1

common.scss

@@ -10,6 +10,7 @@
 	// background: $app-bt-bj;
 	background: linear-gradient(90deg, $app-bt-bj, #AE61FA);
 }
+
 .add_but_css {
 	color: #fff;
 	// background: $app-bt-bj;
@@ -18,6 +19,7 @@
 	text-align: center;
 	border-radius: 16rpx;
 }
+
 .delete_but_css {
 	font-weight: 500;
 	font-size: 32rpx;
@@ -44,6 +46,7 @@
 	align-items: center;
 	line-height: 100rpx;
 }
+
 .add_form_title {
 	margin-right: 20rpx;
 	font-weight: bold;
@@ -51,9 +54,11 @@
 	color: #333333;
 	width: 170rpx;
 }
+
 .add_form_item_but {
 	border-bottom: 1rpx solid #EEEEEEFF;
 }
+
 /* 表单添加 end ，一行显示，input没有背景色 */
 
 /* 上传证件照 start 使用地方有：实名认证，商家入驻 */
@@ -63,28 +68,33 @@
 	padding: 30rpx;
 	margin-bottom: 30rpx;
 }
+
 .data_msg {
 	font-weight: 500;
 	font-size: 26rpx;
 	color: #F34343;
 	margin-bottom: 20rpx;
 }
+
 .ID_card_title {
 	font-weight: 500;
 	font-size: 30rpx;
 	color: #333333;
 }
+
 .ID_card_msg {
 	font-weight: 500;
 	font-size: 24rpx;
 	color: #999999;
 	margin-top: 10rpx;
 }
+
 .ID_card_upload {
 	display: flex;
 	justify-content: space-between;
 	margin-top: 20rpx;
 }
+
 .upload_item {
 	width: 42%;
 	background: #F8F8F8;
@@ -93,40 +103,48 @@
 	padding: 20rpx 20rpx;
 
 }
+
 .upload_msg {
 	font-weight: 500;
 	font-size: 24rpx;
 	color: #525357;
 	margin-top: 10rpx;
 }
+
 .ID_card_upload_templ {
 	margin-top: 20rpx;
 
 }
+
 .templ_title {
 	font-weight: 500;
 	font-size: 28rpx;
 	color: #333333;
 }
+
 .templ_img_list {
 	display: flex;
 	justify-content: space-between;
 	margin-top: 20rpx;
 }
+
 .templ_img_item {
 	width: 22%;
 }
+
 .templ_img_item_msg {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
+
 .templ_img_item_msg_title {
 	margin-left: 10rpx;
 	font-weight: 500;
 	font-size: 20rpx;
 	color: #333333;
 }
+
 /* 上传证件照 end 使用地方有：实名认证，商家入驻 */
 
 /*订单商品列表 start 使用地方有订单列表，订单详情列表*/
@@ -140,23 +158,31 @@
 	justify-content: space-between;
 	margin-top: 20rpx;
 }
+
 .content_info {
 	margin-left: 20rpx;
 	width: calc(100% - 260rpx);
 }
+
 .content_info_title {
 	font-size: 26rpx;
 	color: #222222;
-	width: 200px; /* 设置容器宽度 */
+	width: 200px;
-	white-space: nowrap; /* 防止文本换行 */
+	/* 设置容器宽度 */
-	overflow: hidden; /* 隐藏溢出的文本 */
+	white-space: nowrap;
-	text-overflow: ellipsis; /* 显示省略号 */
+	/* 防止文本换行 */
+	overflow: hidden;
+	/* 隐藏溢出的文本 */
+	text-overflow: ellipsis;
+	/* 显示省略号 */
 }
+
 .content_info_tag {
 	font-size: 24rpx;
 	color: #BBBBBB;
 	margin: 10rpx 0;
 }
+
 .content_info_description {
 	border-radius: 6rpx;
 	border: 1px solid #99999942;
@@ -170,11 +196,13 @@
 	text-align: right;
 
 }
+
 .content_right_total {
 	font-weight: bold;
 	font-size: 20rpx;
 	color: #1A1A1A;
 }
+
 .content_right_quantity {
 	font-weight: 500;
 	font-size: 24rpx;
@@ -188,6 +216,7 @@
 	display: flex;
 	justify-content: flex-end;
 	margin-top: 20rpx;
+
 	.operate_comm {
 		font-weight: 500;
 		font-size: 24rpx;
@@ -198,13 +227,16 @@
 		width: 160rpx;
 		text-align: center;
 	}
+
 	.operate_but_1 {
 		border: 1px solid #767676;
 	}
+
 	.operate_but_2 {
 		background: $app-bt-bj;
 		color: #ffffff;
 	}
+
 	.operate_but_3 {
 		border: 1px solid $app-bt-bj;
 		color: $app-bt-bj;
@@ -222,28 +254,34 @@
 	border-bottom: 1rpx solid #EEEEEEFF;
 	padding: 10rpx 0;
 }
+
 .purse_info_left {
 	display: flex;
 	align-items: center;
 }
+
 .purse_info_right {
 	line-height: 40rpx;
 }
+
 .purse_data_warp {
 	margin-left: 20rpx;
 	line-height: 40rpx;
 }
+
 .purse_info_name {
 	font-weight: bold;
 	font-size: 28rpx;
 	color: #333333;
 }
+
 .purse_info_value {
 	font-weight: 400;
 	font-size: 24rpx;
 	color: #666666;
 	text-align: right;
 }
+
 .purse_info_title {
 	font-weight: bold;
 	font-size: 36rpx;
@@ -257,15 +295,18 @@
 	margin: 60rpx;
 	width: calc(100% - 120rpx);
 	text-align: center;
+
 	.not_order_warp_img {
 		text-align: center;
 	}
+
 	.not_order_msg_warp {
 		font-size: 28rpx;
 		color: #808080;
 		margin-top: 42rpx;
 	}
 }
+
 // 为空的页面展示 end 使用页面有：我的订单，购物车
 
 // 获取验证码的文案 start 使用页面：登录注册
@@ -273,6 +314,7 @@
 	font-size: 36rpx;
 	color: $app-bt-bj;
 }
+
 .code-warp {
 	width: 30%;
 	text-align: right;
@@ -290,10 +332,12 @@
 	color: #999999;
 	padding: 28rpx 0;
 }
+
 .login_comm_but_yes {
 	background: $app-bt-bj;
 	color: #ffffff;
 }
+
 .policy_warp {
 	font-weight: 500;
 	font-size: 26rpx;
@@ -302,10 +346,12 @@
 	bottom: 24rpx;
 	// height: 210rpx;
 	width: calc(100% - 80rpx);
+
 	.policy_a_warp {
 		color: $app-policy-color;
 	}
 }
+
 // 获取验证码的文案 end 使用页面：登录注册
 
 // 哈希优选，爆款专区的公共样式 start
@@ -314,6 +360,7 @@
 	overflow: hidden;
 	background: $app-bj;
 }
+
 // 搜索页面也有用
 .header_comm {
 	display: flex;
@@ -322,10 +369,12 @@
 	padding: 114rpx 30rpx 20rpx;
 	background-color: #FFFFFF;
 }
+
 .preference_content_warp {
 	height: calc(100vh - 238rpx);
 	overflow: auto;
 }
+
 .preference_title {
 	margin: 40rpx 0;
 	font-weight: bold;
@@ -334,12 +383,15 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
+
 	.msg {
 		margin: 14rpx 40rpx 0rpx;
 	}
 }
+
 .preference_product {
 	padding: 30rpx;
+
 	.product_item {
 		margin-bottom: 20rpx;
 		background: #FFFFFF;
@@ -347,8 +399,10 @@
 		padding: 18rpx;
 		display: flex;
 	}
+
 	.product_item_left {
 		position: relative;
+
 		.product_item_left_bz {
 			position: absolute;
 			top: -6rpx;
@@ -367,29 +421,35 @@
 		margin-left: 20rpx;
 		display: grid;
 		width: calc(100% - 174rpx);
+
 		.title_warp {
 			font-weight: bold;
 			font-size: 28rpx;
 			color: #000000;
 		}
+
 		.price_warp {
 			display: flex;
 			align-items: flex-end;
 		}
+
 		.price_o_warp {
 			width: 32%;
 			border-radius: 8rpx;
 			height: 54rpx;
 			padding: 10rpx 18rpx;
 		}
+
 		.price_o_title_warp {
 			font-weight: 500;
 			font-size: 20rpx;
 		}
+
 		.price_o_value_warp {
 			font-weight: bold;
 			font-size: 22rpx;
 		}
+
 		.price_zq_warp {
 			width: 66%;
 			text-align: center;
@@ -399,14 +459,15 @@
 			padding: 10rpx;
 			height: 82rpx;
 		}
+
 		.price_lj_warp {
 			border-radius: 4rpx;
 			font-weight: bold;
 			font-size: 20rpx;
 			padding: 6rpx;
 		}
-		.price_ds_warp{
+
-		}
+		.price_ds_warp {}
 	}
 }
 
@@ -426,6 +487,7 @@
 		font-size: 12px;
 	}
 }
+
 ::v-deep {
 	.u-swiper__indicator {
 		right: 20rpx;
@@ -440,14 +502,17 @@
 	justify-content: space-between;
 	align-items: center;
 }
+
 .quantity_but {
 	background: #F6F6F6;
 	border-radius: 10rpx;
 	padding: 8rpx 20rpx;
 }
+
 .quantity_value {
 	margin: 0 30rpx;
 }
+
 // 购买的数量 + - end 使用地方：购物车，加入购物车，购买页面
 // 去支付的样式 start 使用地方：提交订单，订单详情，去支付
 .order_way_warp {
@@ -461,27 +526,33 @@
 	font-weight: 500;
 	font-size: 26rpx;
 	color: #222222;
+
 	.order_way_right {
 		display: flex;
 	}
 }
+
 .way_popup_warp {
 	padding: 30rpx;
 	min-height: 800rpx;
 	width: calc(100% - 60rpx);
 }
+
 .way_popup_title {
 	text-align: center;
 	margin-bottom: 60rpx;
 }
+
 .way_item {
 	display: flex;
 	justify-content: space-between;
+
 	// line-height: 82rpx;
 	.way_item_ {
 		// display: flex;
 		// align-items: center;
 	}
+
 	.way_item_val {
 		font-weight: bold;
 		font-size: 30rpx;
@@ -489,12 +560,14 @@
 		margin-left: 20rpx;
 	}
 }
+
 .balance_comm_msg {
 	margin-left: 20rpx;
 	color: red;
 	font-size: 18rpx;
 	margin-top: 6rpx;
 }
+
 .go_balance_comm_warp {
 	border: 1rpx solid $app-bt-bj;
 	color: $app-bt-bj;
@@ -502,6 +575,7 @@
 	font-size: 16rpx;
 	border-radius: 10rpx;
 }
+
 .popup_but {
 	position: fixed;
 	bottom: 64rpx;
@@ -512,6 +586,7 @@
 	padding: 20rpx 0;
 	width: calc(100% - 60rpx);
 }
+
 // 去支付的样式 end 使用地方：提交订单，订单详情，去支付
 
 // 添加地址的样式 start 使用地方：添加地址，领取奖品
@@ -520,16 +595,19 @@
 	background-color: $app-bj;
 	padding: 30rpx;
 }
+
 .address_form {
 	background: #FFFFFF;
 	border-radius: 24rpx;
 	padding: 0 30rpx 30rpx;
 }
+
 .region_warp {
 	display: flex;
 	justify-content: space-between;
 	width: calc(100% - 160rpx);
 }
+
 .address_default {
 	background: #FFFFFF;
 	border-radius: 24rpx;
@@ -537,6 +615,7 @@
 	display: flex;
 	justify-content: space-between;
 	margin-top: 30rpx;
+
 	.title {
 		font-weight: bold;
 		font-size: 28rpx;
@@ -552,41 +631,50 @@
 	padding: 30rpx;
 	height: 1200rpx;
 	overflow-y: hidden;
+
 	.address_popup_title {
 		text-align: center;
 		margin-bottom: 20rpx;
 	}
+
 	.address_popup_content {
 		height: calc(100% - 180rpx);
 		overflow-y: auto;
 	}
+
 	.address_popup_content_add {
 		text-align: right;
 		margin: 10rpx 0 20rpx;
 	}
 }
+
 // 选择地址的弹框 end 
 
 // 分类 :start 使用地方：首页，哈希联盟
 .sort_comm_warp {
 	background: #ffffff;
 	padding: 20rpx;
+	height: 170rpx;
 	border-radius: 20rpx;
+	box-sizing: border-box;
 	display: flex;
 	flex-wrap: wrap;
+	align-items: center;
 	justify-content: space-between;
 
 	.sort_item_comm {
-		width: 18%;
+		flex: 1;
 		text-align: center;
 		margin-bottom: 20rpx;
 	}
+
 	.sort_item_title_comm {
 		font-weight: 500;
 		font-size: 22rpx;
 		color: #333333;
 	}
 }
+
 // 分类 :end 
 
 // 未开放弹框 :start
@@ -594,23 +682,28 @@
 	text-align: center;
 	width: 100%;
 	position: relative;
+
 	.close_warp {
 		position: absolute;
 		right: 0rpx;
 		top: 0rpx;
 	}
+
 	.content_ {}
+
 	.content_1 {
 		font-weight: bold;
 		font-size: 36rpx;
 		color: #111111;
 	}
+
 	.content_2 {
 		font-weight: 500;
 		font-size: 28rpx;
 		color: #111111;
 		margin-top: 30rpx;
 	}
+
 	.content_3 {
 		background: #EEEEEE;
 		border-radius: 20rpx;
@@ -621,8 +714,10 @@
 		text-align: center;
 		margin-top: 20rpx;
 	}
+
 	.but_ {
 		margin-top: 40rpx;
+
 		.but_copy {
 			background: $app-bt-bj;
 			border-radius: 45rpx;
@@ -631,6 +726,7 @@
 			color: #FFFFFF;
 			padding: 20rpx 0;
 		}
+
 		.but_close {
 			font-weight: bold;
 			font-size: 28rpx;
@@ -648,9 +744,11 @@
 	background-color: $app-bj;
 	height: 100%;
 	overflow: auto;
+
 	.purse_recharge_cntent {
 		padding: 30rpx;
 	}
+
 	.recharge_balance {
 		display: flex;
 		justify-content: space-between;
@@ -662,9 +760,11 @@
 		height: 140rpx;
 
 	}
+
 	.recharge_balance_image {
 		display: flex;
 		align-items: center;
+
 		.msg_ {
 			font-size: 31rpx;
 			color: rgba(255, 255, 255, 0.9);
@@ -672,29 +772,35 @@
 			margin-left: 10rpx;
 		}
 	}
+
 	.recharge_balance_ {
 		font-weight: 600;
 		font-size: 46rpx;
 		color: rgba(255, 255, 255, 0.9);
 		line-height: 63rpx;
 	}
+
 	.form_item {
 		margin-top: 50rpx;
+
 		.form_item_title {
 			font-weight: 500;
 			font-size: 31rpx;
 			color: rgba(0, 0, 0, 0.85);
 			line-height: 42rpx;
 		}
+
 		.recharge_way_warp {
 			background: #FFFFFF;
 			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
 			border-radius: 8rpx;
 			padding: 20rpx;
 			margin-top: 20rpx;
+
 			.way_item_but {
 				border-bottom: 1rpx solid rgba(0, 0, 0, 0.26);
 			}
+
 			.way_item_ {
 				// margin-bottom: 20rpx;
 			}
@@ -715,6 +821,7 @@
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%, -50%);
+
 	// background-color: #111111;
 	#img {
 		width: 100%;
@@ -767,6 +874,7 @@
 		background: url(https://static.tbmall.xin/static/version-tip.png) no-repeat;
 		background-size: 100% 100%;
 	}
+
 	.close_btn {
 		position: absolute;
 		top: 0;
@@ -774,12 +882,14 @@
 		width: 48rpx;
 		height: 48rpx;
 	}
+
 	.banner_box {
 		// margin-top:140rpx;
 		height: 700rpx;
 		padding: 40rpx;
 		width: 88%;
 	}
+
 	.title_ {
 		text-align: center;
 		line-height: 96rpx;
@@ -787,11 +897,13 @@
 		color: #fff;
 		font-weight: bold;
 	}
+
 	.version_ {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		margin-top: 10rpx;
+
 		.version_item {
 			background: #FFFFFF;
 			border-radius: 30rpx;
@@ -800,6 +912,7 @@
 			font-size: 30rpx;
 		}
 	}
+
 	.conter {
 		font-size: 28rpx;
 		margin-top: 280rpx;
@@ -830,6 +943,7 @@
 	.banner_foot_button:active {
 		background-image: linear-gradient(to right, $app-zt-color, $app-zt-color);
 	}
+
 	.banner_foot_button_no {
 		font-size: 23rpx;
 		color: rgba(0, 0, 0, 0.26);
@@ -846,6 +960,7 @@
 		top: 0;
 		z-index: 2;
 	}
+
 	.banner_loading_msg {
 		text-align: center;
 		font-size: 26rpx;
@@ -861,6 +976,7 @@
 	align-items: center;
 	justify-content: space-between;
 	padding: 74rpx 20rpx 20rpx;
+
 	.title_ {
 		// font-weight: bold;
 		font-size: 36rpx;

components/common/product-seckill-card.vue

@@ -0,0 +1,349 @@
+<template>
+	<view class="seckill_card_container" @click="$emit('click', item)">
+		<!-- Left side image with optional countdown overlay -->
+		<view class="seckill_card_left">
+			<up-image :src="item.url || item.image || item.accessUrl" width="220rpx" height="220rpx" bgColor="#f1f6ff00" shape="square" radius="16rpx"></up-image>
+			<view class="countdown_bar" v-if="showCountdown && countdownText">
+				<text class="countdown_text">{{ countdownText }}</text>
+			</view>
+		</view>
+
+		<!-- Right side content -->
+		<view class="seckill_card_right">
+			<!-- Tags row (Placeholders, toggleable via item flags) -->
+			<view class="tags_row">
+				<view class="tag_badge seckill" v-if="isSeckill">限时秒杀</view>
+				<view class="tag_badge limit" v-if="isLimitTime">限时</view>
+				<view class="tag_badge special" v-if="isSpecialSupply">
+					<view class="vip_icon">V</view>特供
+				</view>
+			</view>
+
+			<!-- Title -->
+			<view class="product_title">{{ item.title || '商品名称' }}</view>
+
+			<!-- Coupon tag (秒杀券立减) -->
+			<view class="coupon_row" v-if="hasCoupon">
+				<view class="coupon_badge">
+					<text class="flash_icon">⚡</text>
+					<text class="coupon_text">秒杀券立减{{ item.couponAmount || '8.8' }}元</text>
+				</view>
+			</view>
+
+			<!-- Price and action card row -->
+			<view class="price_action_row">
+				<view class="price_section">
+					<text class="price_symbol">¥</text>
+					<text class="price_integer">{{ priceParts.integer }}</text>
+					<text class="price_decimal">.{{ priceParts.decimal }}</text>
+					<text class="original_price">¥{{ item.originalPrice || item.price || '0.00' }}</text>
+				</view>
+				<!-- Alarm clock button -->
+				<view class="alarm_btn_wrapper" @click.stop="$emit('action', item)">
+					<up-image src="https://static.tbmall.xin/static/new-home/home_3.png" width="36rpx" height="36rpx" bgColor="#f1f6ff00"></up-image>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: "product-seckill-card",
+	props: {
+		// Product details object
+		item: {
+			type: Object,
+			default: () => ({})
+		},
+		// Control showing countdown bar
+		showCountdown: {
+			type: Boolean,
+			default: true
+		},
+		// Time object containing startTime and endTime timestamps
+		timeObj: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	data() {
+		return {
+			countdownText: "",
+			timer: null,
+			now: Date.now()
+		};
+	},
+	watch: {
+		timeObj: {
+			immediate: true,
+			deep: true,
+			handler() {
+				this.startCountdown();
+			}
+		}
+	},
+	computed: {
+		priceParts() {
+			const price = String(this.item.price || '0.00');
+			const parts = price.split('.');
+			return {
+				integer: parts[0] || '0',
+				decimal: parts[1] || '00'
+			};
+		},
+		hasCoupon() {
+			return this.item.couponAmount !== undefined || this.item.couponText !== undefined;
+		},
+		isSeckill() {
+			return this.item.isSeckill !== undefined ? this.item.isSeckill : true;
+		},
+		isLimitTime() {
+			return this.item.isLimitTime !== undefined ? this.item.isLimitTime : true;
+		},
+		isSpecialSupply() {
+			return this.item.isSpecialSupply !== undefined ? this.item.isSpecialSupply : true;
+		}
+	},
+	beforeDestroy() {
+		this.clearTimer();
+	},
+	methods: {
+		startCountdown() {
+			this.clearTimer();
+			this.updateCountdown();
+			this.timer = setInterval(() => {
+				this.now = Date.now();
+				this.updateCountdown();
+			}, 1000);
+		},
+		updateCountdown() {
+			if (!this.timeObj || !this.timeObj.startTime || !this.timeObj.endTime) {
+				this.countdownText = "";
+				return;
+			}
+			const now = Date.now();
+			const startTime = Number(this.timeObj.startTime);
+			const endTime = Number(this.timeObj.endTime);
+
+			if (now < startTime) {
+				const diff = startTime - now;
+				this.countdownText = `秒杀专享 ${this.formatDuration(diff)} 后开始`;
+			} else if (now >= startTime && now <= endTime) {
+				const diff = endTime - now;
+				this.countdownText = `秒杀专享 ${this.formatDuration(diff)} 后结束`;
+			} else {
+				this.countdownText = "已结束";
+			}
+		},
+		formatDuration(ms) {
+			let totalSeconds = Math.floor(ms / 1000);
+			if (totalSeconds < 0) totalSeconds = 0;
+
+			const hours = Math.floor(totalSeconds / 3600);
+			const minutes = Math.floor((totalSeconds % 3600) / 60);
+			const seconds = totalSeconds % 60;
+
+			const pad = (num) => String(num).padStart(2, '0');
+			return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+		},
+		clearTimer() {
+			if (this.timer) {
+				clearInterval(this.timer);
+				this.timer = null;
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.seckill_card_container {
+	display: flex;
+	padding: 24rpx;
+	background-color: #ffffff;
+	border-radius: 24rpx;
+	margin-bottom: 20rpx;
+	box-sizing: border-box;
+	width: 100%;
+}
+
+.seckill_card_left {
+	position: relative;
+	width: 220rpx;
+	height: 220rpx;
+	flex-shrink: 0;
+	border-radius: 16rpx;
+	overflow: hidden;
+}
+
+.countdown_bar {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	background: rgba(109, 63, 10, 0.9); // Dark bronze/brown background
+	padding: 6rpx 0;
+	text-align: center;
+}
+
+.countdown_text {
+	color: #ffffff;
+	font-size: 18rpx;
+	font-weight: bold;
+}
+
+.seckill_card_right {
+	flex: 1;
+	margin-left: 24rpx;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	min-width: 0;
+}
+
+.tags_row {
+	display: flex;
+	align-items: center;
+	margin-bottom: 8rpx;
+}
+
+.tag_badge {
+	font-size: 18rpx;
+	font-weight: bold;
+	padding: 4rpx 10rpx;
+	border-radius: 6rpx;
+	display: flex;
+	align-items: center;
+	line-height: 1;
+	margin-right: 12rpx;
+
+	&:last-child {
+		margin-right: 0;
+	}
+
+	&.seckill {
+		background-color: #ff1212;
+		color: #ffffff;
+		border: 1rpx dashed #ffffff;
+	}
+
+	&.limit {
+		background-color: #ae61fa;
+		color: #ffffff;
+	}
+
+	&.special {
+		background-color: #333333;
+		color: #e2d2b2; // Gold/bronze text color
+		border: 1rpx solid #e2d2b2;
+		padding: 3rpx 10rpx;
+	}
+}
+
+.vip_icon {
+	color: #ffffff;
+	background: #ffb100;
+	border-radius: 50%;
+	width: 18rpx;
+	height: 18rpx;
+	font-size: 14rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-right: 6rpx;
+	font-weight: 900;
+}
+
+.product_title {
+	font-size: 28rpx;
+	color: #111111;
+	font-weight: bold;
+	line-height: 40rpx;
+	word-break: break-all;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	margin-bottom: 12rpx;
+}
+
+.coupon_row {
+	display: flex;
+	margin-bottom: 12rpx;
+}
+
+.coupon_badge {
+	background: linear-gradient(90deg, #b164fb 0%, #7632ff 100%);
+	color: #ffffff;
+	font-size: 20rpx;
+	font-weight: bold;
+	padding: 6rpx 16rpx;
+	border-radius: 8rpx;
+	display: flex;
+	align-items: center;
+}
+
+.flash_icon {
+	margin-right: 6rpx;
+	color: #ffdd00;
+}
+
+.price_action_row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background-color: #f1ebff; // Light purple box background
+	padding: 10rpx 20rpx;
+	border-radius: 16rpx;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.price_section {
+	display: flex;
+	align-items: baseline;
+}
+
+.price_symbol {
+	font-size: 24rpx;
+	color: #7632ff;
+	font-weight: bold;
+	margin-right: 4rpx;
+}
+
+.price_integer {
+	font-size: 40rpx;
+	color: #7632ff;
+	font-weight: bold;
+}
+
+.price_decimal {
+	font-size: 28rpx;
+	color: #7632ff;
+	font-weight: bold;
+}
+
+.original_price {
+	font-size: 24rpx;
+	color: #999999;
+	text-decoration: line-through;
+	margin-left: 16rpx;
+}
+
+.alarm_btn_wrapper {
+	width: 56rpx;
+	height: 56rpx;
+	background-color: #ffffff;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: background-color 0.2s;
+
+	&:active {
+		background-color: #f0e7ff;
+	}
+}
+</style>

pages/home/home.vue

@@ -1,8 +1,19 @@
 <template>
 	<view v-if="pageReady" class="home_warp" :class="platformType ? '' : 'iosplatformType'">
 		<!-- 带背景的头部 -->
-		<view class="home_header_warp"></view>
 		<view class="home_content_z_warp">
+			<view class="home_header_warp">
+				<view class="logo_banner">
+					<view style="padding: 20rpx 0 0 20rpx">
+						<up-image src="https://static.tbmall.xin/static/home/logo_banner.png" width="108" height="16"
+							bgColor="#f1f6ff00"></up-image>
+						<view class="logo_banner_title">TB聚合商城</view>
+						<view class="logo_banner_msg">全民共创共享的电商平台</view>
+					</view>
+					<up-image src="https://static.tbmall.xin/static/logo_banner2.png" width="140" height="98"
+						bgColor="#f1f6ff00"></up-image>
+				</view>
+
 				<!-- 分类 -->
 				<view class="home_sort_warp">
 					<view class="sort_comm_warp" v-if="sortList && sortList.length !== 0 && isBlockedDate">
@@ -12,66 +23,64 @@
 						</view>
 					</view>
 					<view v-else class="not_order_warp">
-					<up-image src="https://static.tbmall.xin/static/not_order.png" width="80"
+						<up-image src="https://static.tbmall.xin/static/not_order.png" width="80" height="80"
-						height="80" bgColor="#f1f6ff00"></up-image>
+							bgColor="#f1f6ff00"></up-image>
 						<view class="not_order_msg_warp">暂无分类</view>
 					</view>
 				</view>
+
+				<!-- 爆款专区-->
+				<view class="home_content_warp Hot_Picks_Zone" v-if="faddishProduct && faddishProduct.length !== 0"
+					@click="onJumpYou">
+					<view class="product_comm_yp">
+						<view class="yp_title">
+							<view class="yp_title_left">
+								<text class="yp_title_main">信任桥优品</text>
+								<up-image src="https://static.tbmall.xin/static/home/youxuan.png" width="14" height="14"
+									bgColor="#f1f6ff00"></up-image>
+								<text class="yp_title_sub" style="margin-left: 8rpx;">品牌五折秒杀福利</text>
+							</view>
+							<view class="yp_title_right">
+								<text>立即抢购</text>
+								<view class="yp_arrow_circle">
+									<view class="yp_arrow_chevron"></view>
+								</view>
+							</view>
+						</view>
+						<view class="yp_content">
+							<!-- <up-loading-icon :show="productLoading"></up-loading-icon> -->
+							<view class="yp_item" v-for="item in faddishProduct" :key="item.id"
+								@click.stop="jumpInfo(item)">
+								<view class="yp_item_image_wrapper">
+									<up-image :src="item.url" width="100%" height="90" bgColor="#f1f6ff00"
+										shape="square" radius="15"></up-image>
+								</view>
+								<view class="yp_item_info">
+									<view class="yp_item_name">{{ item.title }}</view>
+									<view class="yp_item_price_tag">优选价{{ item.price }}元</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+
 			<!-- 带灰色背景的内容 -->
 			<view class="home_content_warp">
-				<!-- 爆款专区-->
+
-				<view class="product_comm hx_warp" @click="onJumpYou"
-					v-if="faddishProduct && faddishProduct.length !== 0">
-					<view class="product_title">
-						<view class="product_title_left">
-							<text class="product_title_yp">信任桥优品</text>
-							<up-image src="https://static.tbmall.xin/static/home/youxuan.png"
-								width="10" height="10" bgColor="#f1f6ff00"></up-image>
-							<text style="margin-left: 6rpx; color: #ffffff">品牌5折秒杀福利</text>
-						</view>
-						<view class="product_title_f" style="font-weight: bold">
-							<text style="">立即抢购</text>
-							<view style="margin: 6rpx 0 0 6rpx"><up-image src="/static/common/right_y_st3.png"
-									width="12" height="12" bgColor="#f1f6ff00"></up-image></view>
-						</view>
-					</view>
-					<view :class="faddishProduct && faddishProduct.length > 2
-							? 'product_content product_content2'
-							: 'product_content'
-						">
-						<up-loading-icon :show="productLoading"></up-loading-icon>
-						<view :class="faddishProduct && faddishProduct.length > 2
-								? 'product_item2'
-								: 'product_item'
-							" v-for="item in faddishProduct" :key="item.id" @click.stop="jumpInfo(item)">
-							<up-image :src="item.url" width="100%" height="130" bgColor="#f1f6ff00" shape="square"
-								radius="15"></up-image>
-							<view class="product_f_item">
-								<view class="product_f_item_name">{{ item.title }}</view>
-								<view class="product_f_item_price product_f_item_price_hx">优选价{{ item.price }}元</view>
-							</view>
-						</view>
-					</view>
-				</view>
 				<!-- 积分兑换，红包抽奖 -->
 				<view class="min_card_warp">
 					<!-- 积分兑换 -->
 					<view class="min_card_item" @click="jumpIntegral">
 						<!-- <up-image src="https://static.tbmall.xin/static/home/min_card_jfdh.png" width="60" height="14" bgColor="#f1f6ff00" ></up-image> -->
 						<view class="min_card_item_content">
-							<view class="min_card_item_title">信任桥兑换</view>
+							<view class="min_card_item_title">积分兑换</view>
 							<view class="content_msg">
 								<view>好物随心兑</view>
-								<view class="content_msg_but">
-									立即抢购
-									<view style="margin-top: 6rpx; margin-left: 4rpx"><up-image
-											src="/static/common/right_y.png" width="10" height="10"
-											bgColor="#f1f6ff00"></up-image></view>
 							</view>
 						</view>
-						</view>
+						<up-image src="https://static.tbmall.xin/static/home/min_card_jfdh_2.png" width="55" height="55"
-						<up-image src="https://static.tbmall.xin/static/home/min_card_jfdh_2.png"
+							bgColor="#f1f6ff00"></up-image>
-							width="66" height="66" bgColor="#f1f6ff00"></up-image>
 					</view>
 					<!-- 红包抽奖 -->
 					<view class="min_card_item" @click="jumpTurntable">
@@ -80,52 +89,23 @@
 							<view class="min_card_item_title">红包抽奖</view>
 							<view class="content_msg">
 								<view>现金红包等你拿！</view>
-								<view class="content_msg_but">
+
-									立即抢购
-									<view style="margin-top: 6rpx; margin-left: 4rpx"><up-image
-											src="/static/common/right_y.png" width="10" height="10"
-											bgColor="#f1f6ff00"></up-image></view>
 							</view>
 						</view>
-						</view>
+						<up-image src="https://static.tbmall.xin/static/home/min_card_hbcj_2.png" width="55" height="55"
-						<up-image src="https://static.tbmall.xin/static/home/min_card_hbcj_2.png"
+							bgColor="#f1f6ff00"></up-image>
-							width="66" height="66" bgColor="#f1f6ff00"></up-image>
 					</view>
 				</view>
-				<!-- 好物优选 -->
+
-				<view class="product_comm yx_warp" v-if="yxProduct && yxProduct.length !== 0" @click="jumpPrdference">
+				<view class="product_comm_tip">
-					<view class="product_title">
+
-						<view class="product_title_left">
-							<text class="product_title_z">平价专区</text>
-							<text class="product_title_zk">4折起</text>
 				</view>
-						<view class="product_title_f" style="color: #7632ff">
+				<!-- 限时秒杀 -->
-							<text style="">立即抢购</text>
+				<view class="product_seckill_card" v-for="item in seckillList" :key="item.id">
-							<view style="margin: 6rpx 0 0 6rpx"><up-image src="/static/common/right_y_st4.png"
+					<productSeckillCard />
-									width="10" height="10" bgColor="#f1f6ff00"></up-image></view>
 				</view>
-					</view>
+
-					<view class="product_tips">平价专区 抢到就是赚到！</view>
+
-					<view :class="yxProduct && yxProduct.length > 3
-							? 'product_content_yx product_content2'
-							: 'product_content_yx'
-						">
-						<up-loading-icon :show="productLoading"></up-loading-icon>
-						<view :class="yxProduct && yxProduct.length < 4
-								? 'product_item_yx product_item_yx2'
-								: 'product_item_yx'
-							" v-for="item in yxProduct" :key="item.id">
-							<up-image :src="item.url" width="100%" height="80" bgColor="#f1f6ff00" shape="square"
-								radius="10"></up-image>
-							<!-- <view class="product_f_item">
-								<view class="product_f_item_name">{{item.title}}</view>
-								<view class="product_f_item_price product_f_item_price_yx">优选价{{item.adPrice}}元</view>
-							</view> -->
-						</view>
-					</view>
-				</view>
-				<!-- 为您精选 -->
-				<choiceness />
 			</view>
 		</view>
 
@@ -219,6 +199,7 @@
 	comparisonVersionHandler
 } from "@/utils/index.js";
 import HomePopup from "@/components/common/home-popup.vue";
+import productSeckillCard from "@/components/common/product-seckill-card.vue";
 
 import {
 	SHARE_URL
@@ -602,7 +583,23 @@
 				{
 					id: 1,
 					name: "超级补贴",
-						icon: ''
+					icon: 'https://static.tbmall.xin/static/new-home/home_2.png'
+				}, {
+					id: 2,
+					name: "限时秒杀",
+					icon: 'https://static.tbmall.xin/static/new-home/home_3.png'
+				}, {
+					id: 3,
+					name: "全网爆款",
+					icon: 'https://static.tbmall.xin/static/new-home/home_6.png'
+				}, {
+					id: 3,
+					name: "低价好物",
+					icon: 'https://static.tbmall.xin/static/new-home/home_4.png'
+				}, {
+					id: 4,
+					name: "新人专享",
+					icon: 'https://static.tbmall.xin/static/new-home/home_4.png'
 				}
 			];
 			// const resp = await getCascadeCategory({
@@ -637,7 +634,7 @@
 
 <style lang="scss" scoped>
 .home_warp {
-		background: $app-bj;
+	background: #fff;
 	height: calc(100vh - env(safe-area-inset-bottom)); // 是底部的导航栏高度
 	overflow: auto;
 	position: relative;
@@ -648,16 +645,15 @@
 }
 
 .home_header_warp {
-		// background-color: #AC2A29FF;
-		// background: linear-gradient(0deg, $app-bj, #AC2A29FF);
 	background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
-		height: 500rpx;
+	height: 854rpx;
 	padding: 100rpx 30rpx 0rpx;
 }
 
 .home_content_z_warp {
 	position: absolute;
-		top: 90rpx;
+	left: 0;
+	width: 100%;
 
 	.header_right_warp {
 		display: flex;
@@ -693,7 +689,7 @@
 .logo_banner {
 	display: flex;
 	justify-content: space-between;
-		padding: 0 30rpx;
+	// padding: 0 30rpx;
 	color: #ffffff;
 
 	.logo_banner_title {
@@ -711,8 +707,7 @@
 .home_sort_warp {
 	// position: absolute;
 	top: 460rpx;
-		padding: 0 30rpx;
+	width: 100%;
-		width: calc(100% - 60rpx);
 
 	.sort_warp {
 		background: #ffffff;
@@ -739,6 +734,137 @@
 .home_content_warp {
 	padding: 0 30rpx;
 
+	&.Hot_Picks_Zone {
+		width: 100%;
+		box-sizing: border-box;
+		height: auto;
+		background: linear-gradient(344deg, #FFFFFF 0%, #EDE3FF 100%);
+		border-radius: 28rpx;
+		border: 1rpx solid #DFDFDF;
+		padding: 24rpx 20rpx 20rpx;
+		margin: 20rpx auto 0;
+	}
+
+	.product_comm_yp {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.yp_title {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0 0 10rpx;
+	}
+
+	.yp_title_left {
+		display: flex;
+		align-items: center;
+	}
+
+	.yp_title_main {
+		font-weight: 800;
+		font-size: 36rpx;
+		color: #000000;
+		margin-right: 10rpx;
+	}
+
+	.yp_title_sub {
+		font-size: 22rpx;
+		color: #333333;
+		font-weight: 500;
+	}
+
+	.yp_title_right {
+		display: flex;
+		align-items: center;
+		font-size: 24rpx;
+		color: #7632ff;
+		font-weight: bold;
+	}
+
+	.yp_arrow_circle {
+		width: 24rpx;
+		height: 24rpx;
+		background-color: #7632ff;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-left: 8rpx;
+	}
+
+	.yp_arrow_chevron {
+		width: 8rpx;
+		height: 8rpx;
+		border-top: 3rpx solid #ffffff;
+		border-right: 3rpx solid #ffffff;
+		transform: rotate(45deg);
+		margin-left: -2rpx;
+	}
+
+	.yp_content {
+		display: flex;
+		justify-content: space-between;
+		align-items: stretch;
+		width: 100%;
+	}
+
+	.yp_item {
+		flex: 0 0 32%;
+		min-width: 0;
+		background-color: #ffffff;
+		border-radius: 24rpx;
+		border: 1rpx solid #eae5f9;
+		padding: 16rpx;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+
+	.yp_item_image_wrapper {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		margin-bottom: 12rpx;
+	}
+
+	.yp_item_info {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 100%;
+		min-width: 0;
+	}
+
+	.yp_item_name {
+		font-size: 24rpx;
+		color: #000000;
+		font-weight: bold;
+		text-align: center;
+		width: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		margin-bottom: 12rpx;
+	}
+
+	.yp_item_price_tag {
+		width: 100%;
+		background: linear-gradient(270deg, #b164fb 0%, #7632ff 100%);
+		color: #ffffff;
+		font-size: 20rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 44rpx;
+		border-radius: 12rpx;
+		white-space: nowrap;
+		font-weight: bold;
+	}
+
 	.product_comm {
 		border-radius: 30rpx;
 		padding: 10rpx;
@@ -750,24 +876,6 @@
 		background: linear-gradient(270deg, #fdefff 0%, #ede3ff 100%);
 	}
 
-		.hx_warp {
-			background: linear-gradient(270deg, #b164fb 0%, $app-zt-color 100%);
-		}
-
-		.product_title {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			padding: 10rpx 20rpx;
-		}
-
-		.product_title_yp {
-			font-weight: 800;
-			font-size: 36rpx;
-			color: #ffffff;
-			margin-right: 10rpx;
-		}
-
 	.product_title_z {
 		font-weight: 800;
 		font-size: 36rpx;
@@ -886,26 +994,30 @@
 	// 积分兑换，红包
 	.min_card_warp {
 		display: flex;
+		gap: 10rpx;
 		justify-content: space-between;
-			margin-top: 20rpx;
+		margin-top: 24rpx;
 
 		.min_card_item {
-				padding: 20rpx;
+			padding: 10rpx 12rpx;
-				width: 43%;
+			flex: 1;
+			height: 108rpx;
 			border-radius: 30rpx;
 			opacity: 0.8;
 			border-radius: 16rpx;
-				border: 1rpx solid #dfdfdf;
 			display: flex;
 			justify-content: space-between;
+			background: linear-gradient(344deg, #FFFFFF 0%, #EDE3FF 100%);
+			border-radius: 12rpx;
+			border: 1rpx solid #DFDFDF;
 		}
 
 		.min_card_item_content {
-				margin-top: 10rpx;
+			margin-top: 15rpx;
 
 			.min_card_item_title {
 				font-weight: bold;
-					font-size: 28rpx;
+				font-size: 32rpx;
 				color: #000000;
 			}
 
@@ -925,115 +1037,11 @@
 	}
 
 	// 热门榜
-		.hot_warp {
+	.product_comm_tip {
-			background: #ffffff;
-			border-radius: 30rpx;
-			padding: 20rpx;
-			margin-top: 20rpx;
-
-			.hot_title_warp {
 		display: flex;
 		justify-content: space-between;
-				align-items: center;
-
-				.title_warp {
-					display: flex;
-					align-items: center;
 	}
 
-				.title_ {
-					font-weight: 800;
-					font-size: 36rpx;
-					color: #111111;
-					margin-right: 10rpx;
-				}
-
-				.good_warp {
-					display: flex;
-					align-items: center;
-				}
-
-				.good__msg_warp {
-					background: #fff8f3;
-					/* border-radius: 18rpx; */
-					border-top: 2rpx solid $app-zt-color;
-					border-right: 2rpx solid $app-zt-color;
-					border-bottom: 2rpx solid $app-zt-color;
-					font-size: 20rpx;
-					color: $app-zt-color;
-					padding: 4rpx 14rpx 4rpx 20rpx;
-					margin-left: -6px;
-					border-radius: 0rpx 18rpx 18rpx 0rpx;
-				}
-
-				.more_warp {
-					display: flex;
-					font-size: 24rpx;
-					color: #666666;
-				}
-			}
-
-			.hot_content_warp {
-				display: flex;
-				justify-content: space-between;
-				margin-top: 20rpx;
-
-				.hot_item {
-					width: 24%;
-				}
-
-				.hot_item_name {
-					font-weight: 800;
-					font-size: 24rpx;
-					color: #000000;
-					width: 160rpx;
-					white-space: nowrap;
-					/* 防止文本换行 */
-					overflow: hidden;
-					/* 隐藏溢出的文本 */
-					text-overflow: ellipsis;
-					/* 使用省略号表示溢出的内容 */
-				}
-
-				.hot_item_price {
-					display: flex;
-					justify-content: center;
-					font-size: 20rpx;
-					color: $app-zt-color;
-					text-align: center;
-					margin-top: 10rpx;
-				}
-			}
-		}
-
-		// 哈希商学院
-		.business_school_warp {
-			margin-top: 20rpx;
-			height: 160rpx;
-			background-image: url("https://static.tbmall.xin/static/result.png");
-			background-size: 100% 100%;
-			background-position: center;
-			/* 将图片居中显示 */
-			display: grid;
-			align-items: center;
-			padding: 0 40rpx;
-			color: rgba(255, 255, 255, 0.9);
-			border-radius: 20rpx;
-
-			.title {
-				font-weight: 800;
-				font-size: 32rpx;
-				// color: #0987F8;
-			}
-
-			.msg {
-				font-size: 20rpx;
-				// color: #666666;
-				display: flex;
-				align-items: center;
-				// margin-top: 10rpx;
-			}
-		}
 }
 
 .uni-banner-news {