<template>
	<view class="seckill">
		<view >
			<u-navbar title="限时秒杀" back-icon-color="#fff" :border-bottom="false" title-color="#fff" :background="background"></u-navbar>
		</view>
		<view class="title">
			<image src="/static/seckill/topHeader.png" mode="" class="bgImg"></image>
			<view class="limitTitle">
				<image src="/static/seckill/limit.png" mode="" class="img"></image>
			</view>
			<view class="time">
				<view class="timeItem" v-for="(item,index) in 4" :key="index">
					<view class="num">
						10:00
					</view>
					<view class="desc">
						疯抢中
					</view>
				</view>
				
			</view>
		</view>
		<view class="main">
			<view class="over">
				<view class="info">
					距秒杀结束还剩
				</view>
				<view class="hou com">
					08
				</view>:
				<view class="min com">
					50
				</view>:
				<view class="sec com">
					12
				</view>
			</view>
			<view class="goodsList">
				<view class="goodItem" v-for="(item,index) in 3" :key="index" @click="goodsDetail(item)">
					<view class="itemImg">
						<image src="/static/newGoods/goods.png" mode="" class="goodsImg"></image>
					</view>
					<view class="goodsInfo">
						<view class="name">
							Apple iphone 15(A3092)
						</view>
						<view class="sellNum">
							爆卖76件
						</view>
						<view class="info">
							<view class="price">
								¥1849
							</view>
							<view class="delPrice">
								<view class="delText">
									直降32元
								</view>
								
							</view>
							<view class="update">
								即将调整
							</view>
						</view>
						<view class="line">
							<image src="/static/seckill/line.png" mode=""></image>
						</view>
						<view class="btn">
							<view class="killPrice">
								秒杀价￥1149
							</view>
							<view class="buyNow">
								立即抢
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import img from "@/static/seckill/topHeader.png"
	export default{
		data(){
			return{
				background: {
					background: 'url('+	img+') center top no-repeat',
					backgroundSize: '100% auto',
				},
			}
		},
		methods:{
			goodsDetail(item){
				uni.navigateTo({
					url:'/pages/goods/detail'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.seckill{
		width: 100%;
		height: 100%;
	}
	.title{
		width: 100%;
		height: 180rpx;
		position: relative;
		.bgImg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
		.limitTitle{
			display: flex;
			justify-content: center;
			z-index: 20;
			.img{
				margin-top: 20rpx;
				width: 302rpx;
				height: 82rpx;
				z-index: 20;
			}
		}
		.time{
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: space-around;
			z-index: 30;
			.timeItem{
				.num{
					width: 102rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 33rpx;
					text-shadow: 0px 0px 11px #FB3A22;
					text-align: center;
				}
				.desc{
					width: 102rpx;
					height: 36rpx;
					background: #FFFFFF;
					border-radius: 62rpx 62rpx 62rpx 62rpx;
					opacity: 1;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #FB3D27;
					line-height: 36rpx;
					text-align: center;
				}
			}
		}
	}
	.main{
		width: 100%;
		height: 100%;
		background: #F4F6FA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		padding-top:34rpx ;	
		.over{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #3C3C3C;
			.info{
				line-height: 40rpx;
				margin-right: 18rpx;
			}
			.com{
				width: 54rpx;
				height: 48rpx;
				background: #252525;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				opacity: 1;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 48rpx;
				text-align: center;
			}
			.hou{
				margin-right: 4rpx;
			}
			.min{
				margin: 0 4rpx;
			}
			.sec{
				margin-left: 4rpx;
			}
		}
	}
	.goodsList{
		margin-top: 22rpx;
		.goodItem{
			margin-left: 34rpx;
			width: 686rpx;
			height: 342rpx;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			display: flex;
			padding: 48rpx 32rpx 36rpx 6rpx;
			margin-bottom: 26rpx;
			.itemImg{
				width: 258rpx;
				height: 258rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;
				.goodsImg{
					width: 100%;
					height: 100%;
				}
			}
			.goodsInfo{
				.name{
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #0E0E0E;
					line-height: 44rpx;
				}
				.sellNum{
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #A9A9A9;
					line-height: 44rpx;
					margin-bottom: 8rpx;
				}
				.info{
					display: flex;
					.price{
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #979797;
						line-height: 40rpx;
					}
					.delPrice{
						width: 132rpx;
						height: 48rpx;
						font-size: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #FB402B;
						line-height: 23rpx;
						background-image: url('../../static/seckill/bottom.png');
						background-size: 100% 100%;
						margin:0 12rpx 0 14rpx;
						.delText{
							width: 132rpx;
							text-align: center;
							margin-top: 4rpx;
						}
					}
					.update{
						width: 112rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #979797;
						line-height: 40rpx;
					}
				}
				.line{
					width: 302rpx;
					height: 30rpx;
					margin-left:22rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.btn{
					margin-top: 14rpx;
					width: 390rpx;
					height: 70rpx;
					border-radius: 96rpx 96rpx 96rpx 96rpx;
					opacity: 1;
					text-align: center;
					line-height: 70rpx;
					display: flex;
					justify-content: space-between;
					background-image: url('../../static/seckill/btnBg.png');
					background-size: 100% 100%;
					.killPrice{
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #FF423D;
						margin-left: 26rpx;
					}
					.buyNow{
						width: 84rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						margin-right: 34rpx;
					}
				}
			}
		}
	}
</style>