shop-app/pages/sekill/index.vue

<!--
 * @Author: ch
 * @Date: 2022-03-21 18:08:07
 * @LastEditors: ch
 * @LastEditTime: 2022-03-26 18:01:12
 * @Description: file content
-->
<template>
	<view>
		<image class="banner" src="@/static/sekill/banner.png"/>
		<view class="tab">
			<view class="tab--item">
				<text class="tab--time">16:00</text>
				<text>已开抢</text>
			</view>
			<view class="tab--item tab--item__active">
				<text class="tab--time">18:00</text>
				<text>已结束</text>
			</view>
			<view class="tab--item">
				<text class="tab--time">20:00</text>
				<text>即将开抢</text>
			</view>
			<view class="tab--item">
				<text class="tab--time">20:00</text>
				<text>即将开抢</text>
			</view>
			<view class="tab--item">
				<text class="tab--time">20:00</text>
				<text>即将开抢</text>
			</view>
		</view>
		<view class="goods">
			<view class="goodsItem" v-for="item in 3" :key="item">
				<image class="goodsItem--image" src="@/static/testImg/2.png"/>
				<view class="goodsItem--con">
					<text>马士兵教育马士兵教育</text>
					<view class="goodsItem--progBox">
						<u-line-progress class="goodsItem--prog" :percentage="30" :showText="false" height="11rpx" activeColor="#FE0A16" inactiveColor="#FF8E8F" />
						<text>仅剩0件</text>	
					</view>
					<view class="goodsItem--operation">
						<view>
							<view class="goodsItem--price">￥9.9</view>
							<text class="goodsItem--orgPrice">￥19.00</text>
						</view>
						<button v-if="item % 2 == 0" class="goodsItem--btn">立即抢购</button>
						<button v-else class="goodsItem--btn goodsItem--btn__disable">已售罄</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<style lang="scss" scoped>
page{
	background: #F53739;
}
.banner{
	height: 678rpx;
	width: 750rpx;
}
.tab{
	height:120rpx;
	margin: 20rpx 18rpx 0;
	background: linear-gradient(180deg, #FDDBAE 0%, #FEC793 25%, #FFB378 97%, #FFB378 100%);
	display: flex;
	justify-content: space-around;
	align-items: center;
	text-align: center;
	position: relative;
	padding: 0 30rpx;
	&::after,&::before{
		display: block;
		content: '';
		width: 24rpx;
		height: 164rpx;
		background: url('@/static/sekill/jz.png') no-repeat;
		transform: rotate(180deg);
		background-size: 24rpx;
		position: absolute;
		right: 0;
		top: -22rpx;
	}
	&::before{
		left: 0;
		transform: rotate(0deg);
	}
	&--item{
		font-size: 24rpx;
		line-height: 45rpx;
		color: #EF6817;
		&__active{
			color: #F53739;
		}
	}
	&--time{
		display: block;
		font-size: 32rpx;
	}
}
.goods{
	min-height: calc(100vh - 826rpx);
	overflow: hidden;
	margin: 0 20rpx;
	padding: 10rpx 30rpx 0;
	background: #DF1F21;
	box-shadow: 0 10rpx 20rpx rgba($color: #000000, $alpha: .1) inset;
}
.goodsItem{
	width: 650rpx;
	height: 258rpx;
	margin: 30rpx auto;
	border-radius: 12rpx;
	padding: 30rpx;
	display: flex;
	box-sizing: border-box;
	background: linear-gradient(181deg, #FFF1D5 0%, #FBE0BB 21%, #F7CFA1 88%, #F7CFA1 100%);
	&--image{
		width: 190rpx;
		height: 190rpx;
		background: #F0EEE6;
		border-radius: 12rpx;
		margin-right: 30rpx;
	}
	&--con{
		width: 378rpx;
		padding-top: 10rpx;
	}
	&--progBox{
		margin-top: 24rpx;
		display: flex;
		justify-content: start;
		align-items: center;
		font-size: 22rpx;
		color: #F31F07;
	}
	&--prog{
		width: 167rpx;
		margin-right: 20rpx;
		flex: initial;
	}
	&--operation{
		display: flex;
		justify-content: space-between;
		margin-top: 24rpx;
		align-items: flex-end;
	}
	&--price{
		display: flex;
		font-size: 28rpx;
		color: #F31F07;
		font-weight: bold;
		align-items: center;
		margin-bottom: 10rpx;
		&::before{
			display: block;
			content: '秒';
			width: 36rpx;
			height: 36rpx;
			line-height: 36rpx;
			border-radius: 6rpx;
			background: #FE0A16;
			color: #fff;
			font-size: 24rpx;
			text-align: center;
			margin-right: 10rpx;
		}
	}
	&--orgPrice{
		font-size: 24rpx;
		color: #BE4903;
		text-decoration: line-through;
	}
	&--btn{
		width: 166rpx;
		height: 62rpx;
		line-height: 62rpx;
		background: url('@/static/sekill/btn.png');
		background-size: 166rpx;
		font-size: 28rpx;
		font-weight: bold;
		padding: 0;
		border: none;
		margin: 0;
		color: #791704;
		&::after{
			display: none;
		}
		&__disable{
			background: url('@/static/sekill/btn2.png');
		background-size: 166rpx;
		}
	}
}
</style>