1

pages/index/index.vue

@@ -121,10 +121,20 @@
 						</view>
 					</view>
 					<view class="like-box">
+						<view class="like-head">
 							<view class="like-title">
 								<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/e0c44bc9b69a46559d3aa4160d3cf4a5.png"
 									alt="" />
 							</view>
+							<view class="seckill-entry" @tap="goSeckillGroup">
+								<view class="seckill-entry-light"></view>
+								<view class="seckill-entry-info" style="padding-left: 20rpx;">
+									<view class="seckill-entry-title">秒杀团</view>
+									<view class="seckill-entry-sub">限时低价 秒杀更划算</view>
+								</view>
+								<view class="seckill-entry-btn">秒</view>
+							</view>
+						</view>
 
 						<view class="like-content-box">
 							<view class="like-left">
@@ -1125,6 +1135,11 @@
 					url: item.url
 				})
 			},
+			goSeckillGroup() {
+				uni.navigateTo({
+					url: '/package2/seckill/seckillGroup'
+				})
+			},
 			goDetail(type) {
 				let url = ''
 				switch (type) {
@@ -1762,6 +1777,12 @@
 		}
 	}
 
+	.like-head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
 	.like-title {
 		width: 218rpx;
 		height: 64rpx;
@@ -1774,6 +1795,93 @@
 		background-size: 100%;
 	}
 
+	.seckill-entry {
+		width: 280rpx;
+		height: 76rpx;
+		padding: 0 12rpx;
+		box-sizing: border-box;
+		border-radius: 999rpx;
+		background: linear-gradient(135deg, #ff4b27 0%, #ff8b18 48%, #ffd257 100%);
+		box-shadow: 0 16rpx 30rpx rgba(255, 91, 39, 0.22);
+		display: flex;
+		align-items: center;
+		position: relative;
+		overflow: hidden;
+		animation: seckillEntryFloat 2.6s ease-in-out infinite;
+	}
+
+	.seckill-entry:active {
+		transform: scale(0.96);
+	}
+
+	.seckill-entry-light {
+		width: 190rpx;
+		height: 120rpx;
+		background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.76) 46%, rgba(255, 255, 255, 0) 100%);
+		position: absolute;
+		top: -20rpx;
+		left: -220rpx;
+		transform: rotate(12deg);
+		animation: seckillEntrySweep 2.8s ease-in-out infinite;
+	}
+
+	.seckill-entry-icon {
+		width: 54rpx;
+		height: 54rpx;
+		margin-right: 10rpx;
+		border-radius: 50%;
+		background: rgba(255, 255, 255, 0.92);
+		color: #ff4f24;
+		font-size: 26rpx;
+		font-weight: 900;
+		line-height: 54rpx;
+		text-align: center;
+		box-shadow: inset 0 -4rpx 0 rgba(255, 197, 69, 0.38);
+		position: relative;
+		z-index: 1;
+		animation: seckillIconPulse 1.6s ease-in-out infinite;
+	}
+
+	.seckill-entry-info {
+		flex: 1;
+		min-width: 0;
+		position: relative;
+		z-index: 1;
+		color: #fff;
+	}
+
+	.seckill-entry-title {
+		font-size: 28rpx;
+		font-weight: 900;
+		line-height: 34rpx;
+		letter-spacing: 1rpx;
+		text-shadow: 0 3rpx 8rpx rgba(183, 35, 0, 0.24);
+	}
+
+	.seckill-entry-sub {
+		margin-top: 2rpx;
+		font-size: 18rpx;
+		font-weight: 700;
+		opacity: 0.92;
+		white-space: nowrap;
+	}
+
+	.seckill-entry-btn {
+		width: 54rpx;
+		height: 54rpx;
+		border-radius: 50%;
+		background: #fff;
+		color: #ff3d18;
+		font-size: 26rpx;
+		font-weight: 900;
+		line-height: 54rpx;
+		text-align: center;
+		position: relative;
+		z-index: 1;
+		box-shadow: 0 8rpx 18rpx rgba(158, 32, 0, 0.22);
+		animation: seckillBtnBeat 1.2s ease-in-out infinite;
+	}
+
 	.like-content-box {
 		height: 400rpx;
 		background: url("https://jewel-shop.oss-cn-beijing.aliyuncs.com/6d65d349d68f40e7886c978190b6ea33.png") no-repeat;
@@ -1957,6 +2065,56 @@
 		}
 	}
 
+	@keyframes seckillEntryFloat {
+		0%,
+		100% {
+			transform: translateY(0);
+		}
+
+		50% {
+			transform: translateY(-6rpx);
+		}
+	}
+
+	@keyframes seckillEntrySweep {
+		0% {
+			left: -220rpx;
+			opacity: 0;
+		}
+
+		34% {
+			opacity: 0.9;
+		}
+
+		72%,
+		100% {
+			left: 470rpx;
+			opacity: 0;
+		}
+	}
+
+	@keyframes seckillIconPulse {
+		0%,
+		100% {
+			transform: scale(1);
+		}
+
+		50% {
+			transform: scale(1.08);
+		}
+	}
+
+	@keyframes seckillBtnBeat {
+		0%,
+		100% {
+			transform: scale(1);
+		}
+
+		50% {
+			transform: scale(1.12);
+		}
+	}
+
 	@keyframes groupCardFloat {
 		0%,
 		100% {