From 6b0ede149b462f1ddab982a7038a5c21a94b1316 Mon Sep 17 00:00:00 2001
From: wangfukang <15630117759@163.com>
Date: Tue, 12 May 2026 11:43:15 +0800
Subject: [PATCH] 1

---
 package1/group/groupBuySingle.vue | 725 ++++++++++++++++++++++++++++--
 1 file changed, 697 insertions(+), 28 deletions(-)

diff --git a/package1/group/groupBuySingle.vue b/package1/group/groupBuySingle.vue
index bbf11e2..dbb3958 100644
--- a/package1/group/groupBuySingle.vue
+++ b/package1/group/groupBuySingle.vue
@@ -13,9 +13,19 @@
 			</view>
 		</view>
 		<!-- 背景头图（随页面滚动） -->
-		<view class="title"></view>
+		<view class="title">
+			<view class="hero-spark spark-a"></view>
+			<view class="hero-spark spark-b"></view>
+			<view class="hero-spark spark-c"></view>
+		</view>
 		<view class="content">
-			<view class="pintuan">
+			<view class="pintuan shop-card group-hero-card">
+				<view class="group-card-glow"></view>
+				<view class="shop-rally-badge">
+					<text>有件事你知道吗？</text>
+					<text class="shop-rally-dot"></text>
+					<text>拼团和期末不挂科一样重要！</text>
+				</view>
 				<view class="shop-top">
 					<view class="shop-img">
 						<img :src="shopItem.shopIcon" alt="">
@@ -27,6 +37,9 @@
 						<view class="shop-name">
 							{{shopItem.shopName}}
 						</view>
+						<view class="shop-subtitle">
+							约上室友同学一起拼，越快成团越快开吃
+						</view>
 						<view class="shop-content-center">
 							<view class="shop-rate">
 								<view class="shop-rate-num">{{shopItem.shopScore}}</view>
@@ -53,16 +66,22 @@
 					</view>
 				</view>
 				<view class="shop-bottom">
-					公告：{{shopItem.remark}}
+					<text class="notice-label">公告</text>
+					<text>{{shopItem.remark}}</text>
 				</view>
 			</view>
 
-			<view class="pintuan" style="padding: 0;margin-top:20rpx;display: flex;"  v-if="orderListWait.length > 0" @tap="openOrderWait('')">
-				
+			<view class="pintuan group-live-card" style="padding: 0;margin-top:20rpx;display: flex;"  v-if="orderListWait.length > 0" @tap="openOrderWait('')">
+				<view class="live-card-header">
+					<view>
+						<view class="live-title">加入队伍，马上省一笔</view>
+					</view>
+					<view class="live-pill">去凑团</view>
+				</view>
 				<swiper class="zaixian-swiper" vertical circular :autoplay="orderListWait.length > 0"
 					:interval="onlineWorkerInterval" :duration="onlineWorkerDuration">
 					<swiper-item v-for="(item,index) in orderListWait" :key="index">
-						<view style="display: flex;">
+						<view class="live-swiper-item">
 							<view class="pintuan-left">
 								<view class="pintuan-left-img">
 									<img :src="item.productPicture" alt="">
@@ -83,7 +102,7 @@
 									<view class="weipincheng">+</view>
 								</view>
 								<view class="pintuan-right-cha">
-									差<text style="color: red;">{{item.targetMembers - item.currentMembers}}人</text>拼成
+									差<text class="missing-count">{{item.targetMembers - item.currentMembers}}人</text>拼成
 								</view>
 							</view>
 						</view>
@@ -93,16 +112,18 @@
 			<!-- 分类栏：移到goods-list外层，position:sticky才能生效 -->
 			<!-- 占位元素：当container吸顶时保持页面高度不塌缩 -->
 			<view v-if="isContainerSticky" :style="'height:' + containerHeight + 'px;margin-top:20rpx;'"></view>
-			<view class="container" :style="containerStyle">
-				<scroll-view scroll-y id="menuList" style="border-right: 1px solid #eee;font-weight: 700;font-size: 28rpx;height: 100%;width: 160rpx;">
+			<view class="container goods-panel" :style="containerStyle">
+				<scroll-view scroll-y id="menuList" class="menu-scroll" style="border-right: 1px solid #eee;font-weight: 700;font-size: 28rpx;height: 100%;width: 160rpx;">
 					<view class="menu1" @tap="checkTab(index)" v-for="(item,index) in menuList" :key="index"
 						:style="{'border-top-right-radius':item.checked?'20rpx':'','border-bottom-right-radius':item.checked?'20rpx':'','color':item.checked?'rgba(0, 35, 28, 1)':'#777','background':item.checked?'#fff':''}">
+						<view class="menu-active-dot" v-if="item.checked"></view>
 						<view style="width: 160rpx;">{{item.categoryName}}</view>
 					</view>
 				</scroll-view>
 				<scroll-view class="goods-list" scroll-y :scroll-into-view="scrollIntoViewId" :scroll-top="goodsListScrollTop" @scroll="onGoodsListScroll" @scrolltoupper="onGoodsListScrollToTop" :scroll-with-animation="true">
-					<view class="goods-member" :id="'category-' + item.categoryId" v-for="(item,index) in productItem" :key="index"
+					<view class="goods-member goods-card" :id="'category-' + item.categoryId" v-for="(item,index) in productItem" :key="index"
 						@tap="goDetail('product',item)">
+						<view class="goods-card-shine"></view>
 						<view @tap.stop="buyingye" v-if="item.status == 1"
 							style="width: 100%;height:100%;position: absolute;top: 0;background: rgba(0, 0, 0, 0.1);z-index: 999;border-radius: 20rpx;">
 						</view>
@@ -118,6 +139,10 @@
 								<view class="goods-name">
 									{{item.productName}}
 								</view>
+								<view class="goods-vibe">
+									<text class="goods-vibe-tag">拼团价更香</text>
+									<text class="goods-vibe-copy">约人一起下单</text>
+								</view>
 								<view class="goods-content-center">
 									<view class="goods-deal1">
 										销量 <text> {{item.tailWarn != null ? item.tailWarn : 0}}</text>
@@ -139,10 +164,15 @@
 						</view>
 						<view class="goods-bottom">
 							
-							<view v-if="item.productGroupBuyPrices != null && item.isMoreBuy != 1" class="goods-btn" style="margin-left: 6%;" :style="{'float':groupId != ''?'right':''}" @tap="openPopup('xiadan','pintuan',item)">
-								拼团购买¥{{ getGroupPrice(item) }}
+							<view v-if="item.productGroupBuyPrices != null && item.isMoreBuy != 1" class="goods-btn group-buy-btn" style="margin-left: 6%;" :style="{'float':groupId != ''?'right':''}" @tap="openPopup('xiadan','pintuan',item)">
+								<view class="btn-spark">
+									<view class="spark-dot spark-dot-1"></view>
+									<view class="spark-dot spark-dot-2"></view>
+									<view class="spark-dot spark-dot-3"></view>
+								</view>
+								<text>拼团购买¥{{ getGroupPrice(item) }}</text>
 							</view>
-							<view class="goods-btn" v-if="!groupId" @tap="openPopup('xiadan','dandu',item)"
+							<view class="goods-btn solo-buy-btn" v-if="!groupId" @tap="openPopup('xiadan','dandu',item)"
 								style="background: rgba(166, 255, 234, 0.3);border: 1px solid rgba(166, 255, 234, 0.5);height:68rpx;">
 								直接购买¥{{item.attributeListPrice | sliceMsg}}
 							</view>
@@ -155,17 +185,20 @@
 			</view>
 		</view>
 		<view style="width: 100%;height: 160rpx;"></view>
-		<view class="bottom">
+		<view class="bottom checkout-bar">
 			<view class="bottom-left">
-				<view style="position: relative;width: 60rpx;height: 80rpx;margin-top: 20rpx;"
+				<view class="cart-bag-wrap" style="position: relative;width: 60rpx;height: 80rpx;margin-top: 20rpx;"
 					@tap="openPopup('car','','')">
 					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/60db52398a65459e9541881c926986a4.png"
 						alt="" />
 					<view class="bottom-dot" v-if="cartTotalCount > 0">{{cartTotalCount}}</view>
 				</view>
-				<view class="bottom-price">￥{{cartTotalPrice}}</view>
+				<view class="bottom-price">
+					<view class="bottom-price-label">已选合计</view>
+					<view>￥{{cartTotalPrice}}</view>
+				</view>
 			</view>
-			<view class="bottom-right" @tap="submitCartCheckout">
+			<view class="bottom-right checkout-btn" @tap="submitCartCheckout">
 				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d93d893296ed46ea99cfd0e8e2835eaa.png" alt="" />
 			</view>
 		</view>
@@ -250,11 +283,14 @@
 		</uni-popup>
 		<!-- 拼团和选规格弹窗 -->
 		<uni-popup ref="pintuanPopup" background-color="#fff">
-			<view class="car-content">
+			<view class="car-content group-order-popup">
 				<view class="car-close" @tap="$refs.pintuanPopup.close()">
 					<uni-icons type="close" size="30" color="#fff"></uni-icons>
 				</view>
-				<view class="goods-top">
+				<view class="popup-rally-title" v-if="isPintuan">
+					<view class="popup-rally-main">拼团搭子哪里找-隔壁宿舍全是宝！</view>
+				</view>
+				<view class="goods-top popup-product-card">
 					<view class="goods-img">
 						<img :src="currentItem.productPicture" alt="" style="border-radius: 20rpx;">
 						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png"
@@ -271,7 +307,7 @@
 							</view>
 						</view>
 						<view class="goods-content-bottom">
-							<view style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;">
+							<view class="popup-origin-price" style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;">
 								￥{{currentItem.attributeListPrice | sliceMsg}}
 							</view>
 						</view>
@@ -299,7 +335,7 @@
 						</view>
 						<view class="goods-team">
 							<view
-								:class="selectedGroupRule && selectedGroupRule.groupCount === rule.groupCount ? 'team-check' : 'team1'"
+								:class="selectedGroupRule && selectedGroupRule.groupCount === rule.groupCount ? 'team-check team-rule-card' : 'team1 team-rule-card'"
 								v-for="(rule, rIndex) in currentItem.productGroupBuyPrices" :key="rIndex"
 								@tap="selectGroupRule(rule)">
 								<view class="team11" style="margin-top: 0;">
@@ -350,7 +386,7 @@
 						</view>
 					</view>
 					<!-- 优惠券选择 -->
-					<view v-if="isPintuan" style="display: flex;height: 80rpx;line-height: 80rpx;border-top: 1px solid #eee;font-size: 28rpx;font-weight: 700; align-items:center; margin-top: 20rpx;" @tap="openCouponPopup">
+					<view v-if="isPintuan" class="coupon-row" style="display: flex;height: 80rpx;line-height: 80rpx;border-top: 1px solid #eee;font-size: 28rpx;font-weight: 700; align-items:center; margin-top: 20rpx;" @tap="openCouponPopup">
 						<view style="flex: 1; color: #777;">
 							优惠券
 						</view>
@@ -367,7 +403,7 @@
 					</view>
 					<view style="width: 100%;height: 160rpx;"></view>
 				</scroll-view>
-				<view class="bottom" style="padding-bottom: 40rpx;height: 160rpx;z-index: 10;">
+				<view class="bottom popup-bottom-bar" style="padding-bottom: 40rpx;height: 160rpx;z-index: 10;">
 					<view v-if="isPintuan" class="pintuan1">
 						<template v-if="!groupId">
 							<view class="pintuan2" style="border-bottom-left-radius: 100rpx;border-top-left-radius: 100rpx;"
@@ -396,18 +432,19 @@
 		</uni-popup>
 		<!-- 拼团和选规格弹窗 -->
 		<uni-popup ref="pintuanGroupPopup" background-color="#fff">
-			<view class="car-content">
+			<view class="car-content join-team-popup">
 				<view class="car-close" @tap="$refs.pintuanGroupPopup.close()">
 					<uni-icons type="close" size="30" color="#fff"></uni-icons>
 				</view>
-				<view class="goods-top" style="font-size: 28rpx;font-weight: 700;">
-					快来加入拼团吧！可以选取任意拼团商品下单！
+				<view class="join-popup-title" style="font-size: 28rpx;font-weight: 700;">
+					<view class="join-popup-main">快来加入拼团吧！</view>
+					<view class="join-popup-sub">选一支快成团的队伍，马上省</view>
 				</view>
 				<scroll-view scroll-y style="max-height: 50vh;">
 					<template>
 						<!-- 占位假数据展示 -->
 						<view class="">
-							<view class="goods-center" v-for="(item, index) in orderListWait" :key="index">
+							<view class="goods-center team-wait-card" v-for="(item, index) in orderListWait" :key="index">
 								<view class="list-right">
 									<view class="list-right-img">
 										<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/94f91382e76c4f289d53fbf858e8732b.png"
@@ -419,7 +456,7 @@
 											{{item.targetMembers}}人拼
 										</view>
 										<view style="line-height: 40rpx;padding-left: 10rpx;">
-											差<text style="color: red;">{{item.targetMembers - item.currentMembers}}人</text>拼成
+											差<text class="missing-count">{{item.targetMembers - item.currentMembers}}人</text>拼成
 										</view>
 									</view>
 								</view>
@@ -1656,6 +1693,8 @@
 		width: 100%;
 		height: 340rpx;
 		background-size: 100% 100%;
+		position: relative;
+		overflow: hidden;
 	}
 
 	/* 固定在顶部的导航栏，覆盖在背景图上 */
@@ -2318,4 +2357,634 @@
 		text-align: center;
 		line-height: 90rpx;
 	}
+
+	.hero-spark {
+		position: absolute;
+		border-radius: 999rpx;
+		background: rgba(255, 255, 255, 0.78);
+		box-shadow: 0 0 22rpx rgba(255, 244, 183, 0.9);
+		animation: sparkFloat 3.2s ease-in-out infinite;
+	}
+
+	.spark-a {
+		width: 18rpx;
+		height: 18rpx;
+		top: 120rpx;
+		left: 80rpx;
+	}
+
+	.spark-b {
+		width: 24rpx;
+		height: 24rpx;
+		top: 190rpx;
+		right: 110rpx;
+		animation-delay: 0.6s;
+	}
+
+	.spark-c {
+		width: 14rpx;
+		height: 14rpx;
+		top: 82rpx;
+		right: 250rpx;
+		animation-delay: 1.1s;
+	}
+
+	.group-hero-card,
+	.group-live-card,
+	.goods-card {
+		position: relative;
+		overflow: hidden;
+		border: 1px solid rgba(255, 255, 255, 0.9);
+		box-shadow: 0 18rpx 42rpx rgba(0, 35, 28, 0.08);
+	}
+
+	.group-hero-card {
+		background:
+			radial-gradient(circle at 88% 8%, rgba(255, 216, 133, 0.44) 0, rgba(255, 216, 133, 0) 190rpx),
+			linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 255, 248, 0.95) 48%, rgba(233, 255, 247, 0.98) 100%);
+		animation: cardFloatIn 0.32s ease both;
+	}
+
+	.group-card-glow,
+	.goods-card-shine {
+		position: absolute;
+		width: 280rpx;
+		height: 240rpx;
+		top: -120rpx;
+		right: -150rpx;
+		border-radius: 50%;
+		background: rgba(166, 255, 234, 0.26);
+		pointer-events: none;
+	}
+
+	.shop-rally-badge {
+		display: inline-flex;
+		align-items: center;
+		height: 42rpx;
+		margin-bottom: 18rpx;
+		padding: 0 18rpx;
+		border-radius: 999rpx;
+		background: linear-gradient(90deg, #fff2c6 0%, #a6ffea 100%);
+		color: #123d35;
+		font-size: 22rpx;
+		font-weight: 900;
+		box-shadow: 0 8rpx 18rpx rgba(0, 35, 28, 0.06);
+		position: relative;
+		z-index: 1;
+	}
+
+	.shop-rally-dot {
+		width: 8rpx;
+		height: 8rpx;
+		margin: 0 12rpx;
+		border-radius: 50%;
+		background: #ff7a4f;
+		box-shadow: 0 0 16rpx rgba(255, 122, 79, 0.7);
+	}
+
+	.shop-subtitle {
+		margin-top: 8rpx;
+		color: #6b7c77;
+		font-size: 22rpx;
+		font-weight: 700;
+		line-height: 32rpx;
+	}
+
+	.notice-label {
+		display: inline-block;
+		height: 34rpx;
+		line-height: 34rpx;
+		margin-right: 12rpx;
+		padding: 0 12rpx;
+		border-radius: 999rpx;
+		background: rgba(255, 117, 88, 0.12);
+		color: #ff5b36;
+		font-size: 20rpx;
+		font-weight: 900;
+	}
+
+	.group-live-card {
+		display: block !important;
+		padding: 12rpx 16rpx !important;
+		background:
+			radial-gradient(circle at 92% 0, rgba(166, 255, 234, 0.42) 0, rgba(166, 255, 234, 0) 150rpx),
+			linear-gradient(135deg, #f8fffb 0%, #fff7dc 48%, #eafff8 100%);
+		color: #123d35;
+		border: 1px solid rgba(166, 255, 234, 0.72);
+		border-radius: 26rpx;
+		box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.08);
+	}
+
+	.group-live-card::after {
+		content: '';
+		position: absolute;
+		width: 300rpx;
+		height: 520rpx;
+		top: -150rpx;
+		left: -340rpx;
+		background: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 196, 102, 0.28) 46%, rgba(255, 255, 255, 0) 100%);
+		transform: rotate(18deg);
+		animation: lightSweep 3.8s ease-in-out infinite;
+	}
+
+	.live-card-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		position: relative;
+		z-index: 1;
+		margin-bottom: 6rpx;
+	}
+
+	.live-title {
+		font-size: 28rpx;
+		font-weight: 900;
+		line-height: 34rpx;
+	}
+
+	.live-subtitle {
+		color: #6d7c77;
+		font-size: 20rpx;
+		line-height: 26rpx;
+	}
+
+	.live-pill {
+		height: 48rpx;
+		line-height: 48rpx;
+		padding: 0 22rpx;
+		border-radius: 999rpx;
+		background: linear-gradient(90deg, #e3ff96, #a6ffea);
+		color: #00231c;
+		font-size: 22rpx;
+		font-weight: 900;
+		animation: ctaBreath 1.8s ease-in-out infinite;
+	}
+
+	.live-swiper-item {
+		display: flex;
+		align-items: center;
+		position: relative;
+		z-index: 1;
+		height: 92rpx;
+		border-radius: 22rpx;
+		background: rgba(255, 255, 255, 0.74);
+		border: 1px solid rgba(166, 255, 234, 0.46);
+	}
+
+	.group-live-card .pintuan-left {
+		min-width: 0;
+		padding: 8rpx 10rpx;
+	}
+
+	.group-live-card .pintuan-right {
+		width: 214rpx;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: flex-end;
+		margin-top: 0;
+		color: #123d35;
+	}
+
+	.group-live-card .pintuan-left-img {
+		width: 70rpx;
+		height: 70rpx;
+	}
+
+	.group-live-card .pintuan-left-name {
+		margin-bottom: 8rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.group-live-card .pintuan-left-price {
+		padding: 6rpx 10rpx;
+		font-size: 20rpx;
+	}
+
+	.group-live-card .pintuan-right-cha {
+		padding-left: 6rpx;
+		font-size: 20rpx;
+		line-height: 34rpx;
+		white-space: nowrap;
+	}
+
+	.group-live-card .pintuan-right-img {
+		height: 36rpx;
+	}
+
+	.group-live-card .pintuan-right-img img,
+	.group-live-card .weipincheng {
+		width: 36rpx;
+		height: 36rpx;
+	}
+
+	.group-live-card .weipincheng {
+		line-height: 36rpx;
+		font-size: 24rpx;
+	}
+
+	.group-live-card .zaixian-swiper {
+		height: 92rpx;
+	}
+
+	.missing-count {
+		color: #ff5938;
+		font-size: 22rpx;
+		font-weight: 900;
+		padding: 0 4rpx;
+		animation: pricePop 1.5s ease-in-out infinite;
+	}
+
+	.goods-panel {
+		border-radius: 34rpx 34rpx 0 0;
+		overflow: hidden;
+		box-shadow: 0 -8rpx 28rpx rgba(0, 35, 28, 0.04);
+	}
+
+	.menu-scroll {
+		background: rgba(247, 255, 251, 0.9);
+		border-right: 0 !important;
+	}
+
+	.menu1 {
+		font-weight: 900;
+		transition: transform 0.18s ease, background 0.18s ease;
+	}
+
+	.menu1:active {
+		transform: scale(0.96);
+	}
+
+	.menu-active-dot {
+		position: absolute;
+		left: 14rpx;
+		top: 36rpx;
+		width: 14rpx;
+		height: 14rpx;
+		border-radius: 50%;
+		background: #ff7a4f;
+		box-shadow: 0 0 16rpx rgba(255, 122, 79, 0.65);
+	}
+
+	.goods-card {
+		width: 96%;
+		margin: 0 auto 22rpx;
+		border-radius: 30rpx;
+		background:
+			radial-gradient(circle at 92% 6%, rgba(255, 237, 176, 0.34) 0, rgba(255, 237, 176, 0) 150rpx),
+			#fff;
+		animation: cardFloatIn 0.28s ease both;
+	}
+
+	.goods-card:active {
+		transform: scale(0.985);
+	}
+
+	.goods-card .goods-img img:first-child {
+		box-shadow: 0 12rpx 22rpx rgba(0, 35, 28, 0.1);
+	}
+
+	.goods-vibe {
+		margin-top: 10rpx;
+		display: flex;
+		align-items: center;
+	}
+
+	.goods-vibe-tag {
+		height: 34rpx;
+		line-height: 34rpx;
+		padding: 0 12rpx;
+		border-radius: 999rpx;
+		background: linear-gradient(90deg, #fff2c6, #a6ffea);
+		color: #0f554a;
+		font-size: 20rpx;
+		font-weight: 900;
+	}
+
+	.goods-vibe-copy {
+		margin-left: 10rpx;
+		color: #88928f;
+		font-size: 20rpx;
+		font-weight: 700;
+	}
+
+	.goods-card .goods-deal1 {
+		color: #71817c;
+		font-weight: 700;
+	}
+
+	.group-buy-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 70rpx;
+		border-radius: 999rpx;
+		background: linear-gradient(90deg, #a6ffea 0%, #fff2a8 46%, #ff855d 100%) !important;
+		color: #0d332c;
+		box-shadow: 0 12rpx 24rpx rgba(255, 133, 93, 0.24);
+		animation: ctaBreath 1.35s ease-in-out infinite;
+	}
+
+	.btn-spark {
+		width: 36rpx;
+		height: 36rpx;
+		margin-right: 8rpx;
+		position: relative;
+	}
+
+	.btn-spark::before {
+		content: '';
+		position: absolute;
+		left: 8rpx;
+		top: 8rpx;
+		width: 20rpx;
+		height: 20rpx;
+		border-radius: 50% 50% 50% 8rpx;
+		background: linear-gradient(135deg, #ff4d38 0%, #ffbd49 62%, #fff2a8 100%);
+		transform: rotate(-35deg);
+		box-shadow: 0 0 14rpx rgba(255, 120, 56, 0.5);
+		animation: flamePulse 1.2s ease-in-out infinite;
+	}
+
+	.spark-dot {
+		position: absolute;
+		width: 6rpx;
+		height: 6rpx;
+		border-radius: 50%;
+		background: #fff1a6;
+		box-shadow: 0 0 10rpx rgba(255, 193, 74, 0.8);
+		animation: sparkBurst 1.1s ease-in-out infinite;
+	}
+
+	.spark-dot-1 {
+		top: 0;
+		left: 14rpx;
+	}
+
+	.spark-dot-2 {
+		top: 10rpx;
+		right: 0;
+		animation-delay: 0.22s;
+	}
+
+	.spark-dot-3 {
+		left: 0;
+		bottom: 8rpx;
+		animation-delay: 0.42s;
+	}
+
+	.solo-buy-btn {
+		border-radius: 999rpx !important;
+		color: #1f685d;
+		box-shadow: inset 0 0 0 1px rgba(166, 255, 234, 0.36);
+	}
+
+	.checkout-bar {
+		left: 2.5%;
+		bottom: 18rpx;
+		width: 95%;
+		border-radius: 42rpx;
+		background: rgba(255, 255, 255, 0.96);
+		box-shadow: 0 -8rpx 34rpx rgba(0, 35, 28, 0.16);
+		overflow: hidden;
+	}
+
+	.cart-bag-wrap {
+		animation: bagBounce 2.2s ease-in-out infinite;
+	}
+
+	.checkout-bar .bottom-left {
+		align-items: center;
+		padding: 14rpx 22rpx;
+	}
+
+	.checkout-bar .bottom-price {
+		margin-left: 28rpx;
+		line-height: 42rpx;
+		color: #ff3d2e;
+	}
+
+	.bottom-price-label {
+		color: #7c8b86;
+		font-size: 20rpx;
+		font-weight: 700;
+		line-height: 26rpx;
+	}
+
+	.checkout-btn:active,
+	.group-buy-btn:active,
+	.solo-buy-btn:active,
+	.list-btn:active,
+	.pintuan2:active {
+		transform: scale(0.96);
+	}
+
+	.group-order-popup,
+	.join-team-popup {
+		border-top-left-radius: 40rpx;
+		border-top-right-radius: 40rpx;
+		background:
+			radial-gradient(circle at 92% 0, rgba(166, 255, 234, 0.34) 0, rgba(166, 255, 234, 0) 210rpx),
+			linear-gradient(180deg, #ffffff 0%, #f7fffb 100%);
+	}
+
+	.popup-rally-title,
+	.join-popup-title {
+		padding: 8rpx 20rpx 22rpx;
+		text-align: center;
+	}
+
+	.popup-rally-main,
+	.join-popup-main {
+		color: #103a32;
+		font-size: 36rpx;
+		font-weight: 900;
+		line-height: 48rpx;
+	}
+
+	.popup-rally-sub,
+	.join-popup-sub {
+		margin-top: 6rpx;
+		color: #74817d;
+		font-size: 24rpx;
+		font-weight: 700;
+		line-height: 34rpx;
+	}
+
+	.popup-product-card {
+		margin: 0 0 18rpx;
+		border-radius: 28rpx;
+		background: rgba(255, 255, 255, 0.82);
+		border: 1px solid rgba(166, 255, 234, 0.42);
+		box-shadow: 0 12rpx 26rpx rgba(0, 35, 28, 0.06);
+	}
+
+	.popup-origin-price {
+		color: #ff4d38;
+		font-weight: 900;
+	}
+
+	.team-rule-card {
+		box-shadow: 0 10rpx 20rpx rgba(0, 35, 28, 0.05);
+		transition: transform 0.18s ease;
+	}
+
+	.team-check.team-rule-card {
+		background: linear-gradient(135deg, #fff2c6, #a6ffea);
+		box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.1);
+		animation: cardPulse 1.8s ease-in-out infinite;
+	}
+
+	.coupon-row {
+		margin-top: 28rpx !important;
+		padding: 0 18rpx;
+		border: 1px solid rgba(255, 216, 133, 0.44) !important;
+		border-radius: 22rpx;
+		background: rgba(255, 248, 224, 0.64);
+	}
+
+	.popup-bottom-bar {
+		background: rgba(255, 255, 255, 0.98);
+		box-shadow: 0 -12rpx 28rpx rgba(0, 35, 28, 0.1);
+	}
+
+	.popup-bottom-bar .pintuan2 {
+		transition: transform 0.18s ease;
+	}
+
+	.popup-bottom-bar .pintuan2:last-child {
+		box-shadow: 0 12rpx 24rpx rgba(0, 35, 28, 0.18);
+		animation: ctaBreath 1.9s ease-in-out infinite;
+	}
+
+	.team-wait-card {
+		height: 156rpx;
+		border-radius: 30rpx;
+		background:
+			radial-gradient(circle at 90% 8%, rgba(255, 226, 142, 0.34) 0, rgba(255, 226, 142, 0) 130rpx),
+			#fff;
+		border: 1px solid rgba(166, 255, 234, 0.42);
+		box-shadow: 0 12rpx 26rpx rgba(0, 35, 28, 0.06);
+	}
+
+	.team-wait-card .list-btn {
+		background: linear-gradient(90deg, #ff855d, #ffd76d);
+		color: #fff;
+		box-shadow: 0 10rpx 18rpx rgba(255, 133, 93, 0.22);
+	}
+
+	@keyframes sparkFloat {
+		0%,
+		100% {
+			opacity: 0.5;
+			transform: translateY(0) scale(1);
+		}
+
+		50% {
+			opacity: 1;
+			transform: translateY(-22rpx) scale(1.25);
+		}
+	}
+
+	@keyframes lightSweep {
+		0% {
+			left: -360rpx;
+			opacity: 0;
+		}
+
+		28% {
+			opacity: 1;
+		}
+
+		64%,
+		100% {
+			left: 760rpx;
+			opacity: 0;
+		}
+	}
+
+	@keyframes ctaBreath {
+		0%,
+		100% {
+			transform: scale(1);
+			box-shadow: 0 12rpx 24rpx rgba(255, 133, 93, 0.22);
+		}
+
+		50% {
+			transform: scale(1.075);
+			box-shadow: 0 18rpx 34rpx rgba(255, 133, 93, 0.42);
+		}
+	}
+
+	@keyframes pricePop {
+		0%,
+		100% {
+			transform: scale(1);
+		}
+
+		50% {
+			transform: scale(1.16);
+		}
+	}
+
+	@keyframes flamePulse {
+		0%,
+		100% {
+			opacity: 0.92;
+			transform: rotate(-35deg) scale(1);
+		}
+
+		50% {
+			opacity: 1;
+			transform: rotate(-30deg) scale(1.14);
+		}
+	}
+
+	@keyframes sparkBurst {
+		0%,
+		100% {
+			opacity: 0.35;
+			transform: translateY(0) scale(0.8);
+		}
+
+		50% {
+			opacity: 1;
+			transform: translateY(-8rpx) scale(1.2);
+		}
+	}
+
+	@keyframes bagBounce {
+		0%,
+		100% {
+			transform: translateY(0);
+		}
+
+		50% {
+			transform: translateY(-8rpx);
+		}
+	}
+
+	@keyframes cardFloatIn {
+		0% {
+			opacity: 0;
+			transform: translateY(16rpx);
+		}
+
+		100% {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes cardPulse {
+		0%,
+		100% {
+			transform: scale(1);
+		}
+
+		50% {
+			transform: scale(1.03);
+		}
+	}
 </style>
\ No newline at end of file