discounts-minapp/activity/timeUp/index.vue

<template>
	<view class="timeUp">
		<view class="top-box">
			<view class="position-box">
				<image class="back" src="../../static/back-btn.png" mode=""></image>
				<view class="topbar">
					限时秒杀
				</view>
			</view>
			<zs-search bgColor="#fff"></zs-search>
		</view>

		<view class="tabs">
			<view class="all" :class="[tab == 0?'active':'']" @click="handleTab(0)">
				全部
			</view>

			<scroll-view class="tab-box" enable-flex scroll-with-animation :scroll-x="true" @scroll="scroll+'rpx'"
				:scroll-left="scrollLeft">
				<view class="tab" :class="[tab == 1?'active':'']" @click="handleTab(1)">
					加油充电
				</view>
				<view class="tab" :class="[tab == 2?'active':'']" @click="handleTab(2)">
					酒店民宿
				</view>
				<view class="tab" :class="[tab == 3?'active':'']" @click="handleTab(3)">
					景区门票
				</view>
				<view class="tab" :class="[tab == 4?'active':'']" @click="handleTab(4)">
					餐饮美食
				</view>
				<view class="tab" :class="[tab == 5?'active':'']" @click="handleTab(5)">
					超市购物
				</view>
				<view class="tab" :class="[tab == 6?'active':'']" @click="handleTab(6)">
					健身运动
				</view>
				<view class="tab" :class="[tab == 7?'active':'']" @click="handleTab(7)">
					医疗健康
				</view>
			</scroll-view>

		</view>

		<view class="seckill-box">
			
			<view class="count-down-box">
							<u-count-down
							    :time="30 * 60 * 60 * 1000"
							    format="HH:mm:ss"
							    autoStart
							    millisecond
							    @change="onChange"
							>
								<view class="time">
									<view class="title">
										倒计时
									</view>
									<view class="time__custom">
										<text class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
									</view>
									<text class="time__doc">:</text>
									<view class="time__custom">
										<text class="time__custom__item">{{ timeData.minutes }}</text>
									</view>
									<text class="time__doc">:</text>
									<view class="time__custom">
										<text class="time__custom__item">{{ timeData.seconds }}</text>
									</view>
								</view>
							</u-count-down>
						</view>
			
			<view class="item-box">
				<view class="item">
					<image class="icon"
						src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/4jGNrpGpdaPX0cc0b8f9dacd8eb606a97fd3a72cbf64.png/1.png"
						mode=""></image>
					<view class="title">
						中国国际能源永
						温加油站加油...
					</view>
					<view class="progress-box">
						<view class="progress">
							<view class="value" :style="{width:'100rpx'}">
							</view>
							<image class="progress-icon" src="../../static/progress-icon.png" mode=""></image>
						</view>
						<view class="label">
							60%
						</view>
					</view>

					<view class="btn">
						马上抢
					</view>

				</view>

				<view class="item">
					<image class="icon"
						src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/YfpEwXi8CoD5c0ed0850ecd9d45219412493577e2e00.png/1.png"
						mode=""></image>
					<view class="title">
						中国国际能源永
						温加油站加油...
					</view>
					<view class="progress-box" :style="{'--num':tab}">
						<view class="progress">
							<view class="value" :style="{width:'100rpx'}">

							</view>
							<image class="progress-icon" src="../../static/progress-icon.png" mode=""></image>
						</view>
						<view class="label">
							60%
						</view>
					</view>
					<view class="btn">
						马上抢
					</view>

				</view>

				<view class="item">
					<image class="icon"
						src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/CgcLtkGfeVi9c82fc7ccde4bc89041c8d16a3c378d14.png/1.png"
						mode=""></image>
					<view class="title">
						中国国际能源永
						温加油站加油...
					</view>
					<view class="progress-box" :style="{'--num':tab}">
						<view class="progress">
							<view class="value" :style="{width:'100rpx'}">

							</view>
							<image class="progress-icon" src="../../static/progress-icon.png" mode=""></image>
						</view>
						<view class="label">
							60%
						</view>
					</view>
					<view class="btn">
						马上抢
					</view>

				</view>

			</view>

		</view>

		<!-- 列表 -->
		<zs-list class="list-box" mt="0" @load="loadMore" :status="status">
			<view class="item" v-for="(item,index) in list" :key="index">
				<image class="icon" :src="item.icon" mode=""></image>
				<view class="info-box">
					<view class="title">
						{{item.title}}
					</view>
					
					<view class="progress-box">
						<view class="progress">
							<view class="value" :style="{width:'100rpx'}">
							</view>
							<image class="progress-icon" src="../../static/progress-icon.png" mode=""></image>
						</view>
						<view class="label">
							60%
						</view>
					</view>
					
					<view class="desc">
						<view class="label">
							折
						</view>
						<view class="value">
							{{item.desc}}
						</view>
					</view>
					<view class="btn">
						马上抢
					</view>
				</view>
			</view>
		</zs-list>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab: 0,
				scrollLeft: 0,
				timeData: {},//倒计时
				status:'more',
				list:[
					{
						icon:'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/ZYTLVzkmgxB10ac3feb8df96b57b8c6c22c9b9ff8cbf.png/1.png',
						title:'麓客岛，动物农场两大一小超值亲子套票',
						desc:'惊喜一元购'
					},
					{
						icon:'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/IRTbUvGb8Q7b004f5f2781831619d71a99d182c67be2.png/1.png',
						title:'佳晨信网红便利店零食超市部分商品1折',
						desc:'低至1折'
					},
					{
						icon:'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/ktFFVE2qnrl187c6f3a8e2a27729d869a8c0606dffc1.png/1.png',
						title:'安心到家家政服务，打扫清洁低至5折',
						desc:'满200享7折'
					},
					
				]
			}
		},
		methods: {
			onChange(e) {
				this.timeData = e
			},
			handleTab(val) {
				this.tab = val
				if (val > 3) {
					this.scrollLeft = (val - 2) * 60
				} else if (val <= 3 && this.scrollLeft > 100) {
					this.scrollLeft = 0
				}
			},
			loadMore() {},
			
		},
	}
</script>

<style lang="scss" scoped>
	.timeUp {
		background: #f5f5f5;
		.top-box {
			height: 358rpx;
			box-sizing: border-box;
			padding-top: 180rpx;
			background: linear-gradient(180deg, #FF4C3A 0%, #FFFFFF 100%);
			position: relative;
		}

		.position-box {
			position: absolute;
			width: 100%;
			top: 90rpx;
			left: 0;
			z-index: 2;
			display: flex;
			align-items: center;
			justify-content: center;

			.back {
				position: absolute;
				top: 10rpx;
				left: 30rpx;
				color: #fff;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				width: 40rpx;
				height: 40rpx;
				filter: invert(1);
			}

			.topbar {

				font-size: 36rpx;
				color: #FFFFFF;
				text-align: center;
				font-weight: bold;
				font-family: DOUYUFont;
			}
		}



		.tabs {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #888888;
			line-height: 100rpx;
			margin-top: -90rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			background: #fff;

			.all {
				padding: 0 30rpx;
				white-space: nowrap;
				width: 110rpx;
				box-sizing: border-box;
				text-align: center;
				background: #FFFFFF;
				color: #333333;
				position: relative;
				z-index: 2;
			}

			.tab {
				padding: 0 20rpx;
				line-height: 100rpx;
				background: #FFFFFF;
			}

			.tab-box {
				width: 640rpx;
				display: flex;
				flex-wrap: nowrap;
				white-space: nowrap;
				height: 100rpx;
			}

			.active {
				font-weight: bold;
				color: #333333;
				position: relative;

				&::before {
					content: '';
					width: 33rpx;
					height: 11rpx;
					position: absolute;
					bottom: 15rpx;
					left: 50%;
					transform: translateX(-50%);
					background: url('../../static/active.png') no-repeat;
					background-size: 100% 100%;
				}
			}
		}

		.seckill-box {
			height: 460rpx;
			margin: 0 30rpx;
			box-sizing: border-box;
			padding: 88rpx 24rpx 0;
			background: url('http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/5LRJ5PeXOEzE424542612bd586ae0f9e10936b41062c.png/1.png') no-repeat;
			background-size: 100% 100%;
			position: relative;
			.count-down-box{
				position: absolute;
				top: 16rpx;
				right: 24rpx;
				.title{
					color: #fff;
					margin-right: 10rpx;
					font-size: 24rpx;
				}
				.time {
						display: flex;
						align-items: center;
				
						&__custom {
							margin-top: 4px;
							width: 22px;
							height: 22px;
							background-color: #fff;
							border-radius: 4px;
							/* #ifndef APP-NVUE */
							display: flex;
							/* #endif */
							justify-content: center;
							align-items: center;
				
							&__item {
								color: #FF4C3A;
								font-size: 12px;
								text-align: center;
							}
						}
				
						&__doc {
							color: #fff;
							padding: 0px 4px;
						}
				
						&__item {
							color: #606266;
							font-size: 15px;
							margin-right: 4px;
						}
					}
				
			}

			.item-box {
				display: flex;
				justify-content: space-between;

				.item {
					width: 200rpx;
					height: 360rpx;
					border-radius: 16rpx;
					background: #fff;

					.icon {
						width: 200rpx;
						height: 178rpx;
					}

					.title {
						margin:10rpx 15rpx;
						font-size: 22rpx;
						color: #222222;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}

					.progress-box {
						margin: 15rpx;
						height: 24rpx;
						background: #FFEFC5;
						border: 1rpx solid #FFA820;
						border-radius: 12rpx;
						position: relative;
						display: flex;
						align-items: center;
						.progress {
							position: absolute;
							left: 0%;
							top: 0;
							display: flex;
							flex: 1;
							width: 170rpx;
							.value {
								background: linear-gradient(180deg, #FFBC1E 0%, #FBD97D 100%);
								height: 24rpx;
							}
							.progress-icon{
								width: 16.8rpx;
								height: 28.4rpx;
								transform: translateX(-50%);
							}
						}
						.label{
							position: absolute;
							top: 50%;
							right: 20rpx;
							display: block;
							transform: translateY(-50%);
							content: var(--num);
							font-size: 16rpx;
							color: #222;
						}
					}

					.btn {
						width: 104rpx;
						line-height: 36rpx;
						text-align: center;
						font-size: 24rpx;
						font-weight: bold;
						color: #fff;
						background: #FF4C3A;
						border-radius: 18rpx;
						margin: 0 auto;
					}
				}
			}
		}
		
		.list-box {
			.item{
				background: #FFFFFF;
				border-radius: 12rpx;
				display: flex;
				padding: 20rpx;
				margin: 30rpx 30rpx 0;
				.icon{
					width: 220rpx;
					height: 220rpx;
				}
				.info-box{
					flex: 1;
					padding-left: 20rpx;
					position: relative;
					.title{
						font-size: 28rpx;
						color: #222222;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}
					
					.progress-box {
						margin: 15rpx;
						height: 24rpx;
						background: #FFEFC5;
						border: 1rpx solid #FFA820;
						border-radius: 12rpx;
						position: relative;
						display: flex;
						align-items: center;
						.progress {
							position: absolute;
							left: 0%;
							top: 0;
							display: flex;
							flex: 1;
							width: 170rpx;
							.value {
								background: linear-gradient(180deg, #FFBC1E 0%, #FBD97D 100%);
								height: 24rpx;
							}
							.progress-icon{
								width: 16.8rpx;
								height: 28.4rpx;
								transform: translateX(-50%);
							}
						}
						.label{
							position: absolute;
							top: 50%;
							right: 20rpx;
							display: block;
							transform: translateY(-50%);
							content: var(--num);
							font-size: 16rpx;
							color: #222;
						}
					}
					
					.desc{
						display: flex;
						align-items: center;
						height: 44rpx;
						line-height: 44rpx;
						margin-top: 24rpx;
						font-size: 24rpx;
						.label{
							background: linear-gradient(180deg, #FF4A39 0%, #FC8B45 100%);
							color: #fff;
							width: 44rpx;
							text-align: center;
							border-radius: 8rpx 0 0 8rpx;
							
						}
						.value{
							color: #FE5B47;
							background: rgba(254,91,71,0.1);
							padding: 0 15rpx;
							border-radius: 0 8rpx 8rpx 0;
						}
					}
					.btn{
						width: 140rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						background: #FF4C3A;
						font-weight: bold;
						color: #FFFFFF;
						font-size: 28rpx;
						border-radius: 30rpx 30rpx 30rpx 30rpx;
						position: absolute;
						right: 0;
						bottom: 0;
					}
				}
			}
		}

	}
</style>