From 874ab3907489f8a427f4487bfbe7eaf2fc299970 Mon Sep 17 00:00:00 2001
From: wangfukang <15630117759@163.com>
Date: Tue, 12 May 2026 13:41:13 +0800
Subject: [PATCH] 1

---
 package1/buyFood/buyFood.vue | 818 +++++++++++++++++++++++++++--------
 1 file changed, 638 insertions(+), 180 deletions(-)

diff --git a/package1/buyFood/buyFood.vue b/package1/buyFood/buyFood.vue
index be1eff0..8306c26 100644
--- a/package1/buyFood/buyFood.vue
+++ b/package1/buyFood/buyFood.vue
@@ -8,24 +8,24 @@
 				</view>
 			</view>
 		</view>
-		<view style="position: absolute;top: 200rpx;width: 100%;">
+		<view class="tab-wrap">
 			<view class="tab1" v-if="isPaotui">
 				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6b3a4d4c61ee42feb29e69d6fcfd2c1e.png" alt=""
-					style="position: absolute;" />
+					class="tab-bg" />
 				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1cbed0734a154a70b75cb84a811bd0b7.png" alt="" />
-				<view style="width: 100%;height: 160rpx;position: absolute;top:0;left: 0;display: flex;">
-					<view style="width: 50%;height: 160rpx;"></view>
-					<view style="width: 50%;height: 160rpx;" @tap="isPaotui=!isPaotui"></view>
+				<view class="tab-hit-area">
+					<view class="tab-hit-item"></view>
+					<view class="tab-hit-item" @tap="isPaotui=!isPaotui"></view>
 				</view>
 			</view>
 			<view class="tab1" v-else>
 				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/3b98dfb370eb4ddcb942b7942dedced2.png" alt=""
-					style="position: absolute;" />
+					class="tab-bg" />
 				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/82627e6cedcf409a932d6afaafa19a4b.png" alt=""
-					style="position: absolute;" />
-				<view style="width: 100%;height: 160rpx;position: absolute;top:0;left: 0;display: flex;">
-					<view style="width: 50%;height: 160rpx;" @tap="isPaotui=!isPaotui"></view>
-					<view style="width: 50%;height: 160rpx;"></view>
+					class="tab-bg" />
+				<view class="tab-hit-area">
+					<view class="tab-hit-item" @tap="isPaotui=!isPaotui"></view>
+					<view class="tab-hit-item"></view>
 				</view>
 			</view>
 		</view>
@@ -41,105 +41,98 @@
 			</view>
 		</view>
 		<view class="address-box" v-if="isPaotui">
-			<view v-if="!formData.address" @tap="openAddressBook">
-				请选择收货地址 <uni-icons type="right" size="16"></uni-icons>
+			<view class="address-empty" v-if="!formData.address" @tap="openAddressBook">
+				<text>请选择收货地址</text>
+				<uni-icons type="right" size="16" color="#0b9b73"></uni-icons>
 			</view>
-			<view v-else style="display: flex; justify-content: space-between; align-items: center;">
-				<view @tap="openAddressBook"
-					style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
+			<view v-else class="address-content">
+				<view class="address-main" @tap="openAddressBook">
 					{{formData.address.areaName || ''}}{{formData.address.floor ? formData.address.floor + '层' : ''}}{{formData.address.roomNum || ''}}
 					{{formData.address.receiverName || ''}}
 				</view>
-				<view @tap.stop="openAddressBook"
-					style="color: #0b9b73; font-size: 26rpx; font-weight: normal; margin-left: 20rpx; display: flex; align-items: center;">
+				<view class="address-change" @tap.stop="openAddressBook">
 					更换地址 <uni-icons type="right" size="13" color="#0b9b73"></uni-icons>
 				</view>
 			</view>
 		</view>
 		<view class="time-box" v-if="isPaotui">
 			<view class="time1" @tap="checkTime(true)"
-				:style="{'background':formData.isImmediately?'linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1))':'rgba(247, 248, 248, 0.6)'}">
-				<view style="font-weight: 700;">
+				:class="{'time1-active': formData.isImmediately}">
+				<view class="time-title">
 					立即送出
 				</view>
-				<view style="font-size: 20rpx;color: #777;">
+				<view class="time-desc">
 					预计{{immediateTimeStr}}送达
 				</view>
 			</view>
 			<view class="time1" @tap="checkTime(false)"
-				:style="{'background':formData.isImmediately==false?'linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1))':'rgba(247, 248, 248, 0.6)'}">
-				<view style="font-weight: 700;">
+				:class="{'time1-active': formData.isImmediately==false}">
+				<view class="time-title">
 					预约配送
 				</view>
-				<view class="">
-					<view style="font-size: 20rpx;color: #777;"
-						v-if="formData.isImmediately!=true&&formData.deliveryTime!=''">
+				<view>
+					<view class="time-desc" v-if="formData.isImmediately!=true&&formData.deliveryTime!=''">
 						{{formData.deliveryTime}}
 					</view>
-					<view v-else style="font-size: 20rpx;color: #777;">
+					<view class="time-desc" v-else>
 						选择时间 >
 					</view>
 				</view>
 			</view>
 		</view>
-		<view v-if="isPaotui" style='background: #fff;border-bottom: 1px solid #eee;'>
-			<view
-				style="height: 140rpx;line-height: 40rpx;padding: 0 40rpx;font-size: 28rpx;font-weight: 700;padding-top: 20rpx;">
-				<view class="">
+		<view class="delivery-card" v-if="isPaotui">
+			<view class="delivery-head">
+				<view class="delivery-title">
 					配送员
 				</view>
-				<view style="font-size: 24rpx;color: #777;">
+				<view class="delivery-desc">
 					指定配送员，如配送员拒绝接单或者下线，订单进入抢单大厅
 				</view>
-				<view style="font-size: 24rpx;color: #777;">
+				<view class="delivery-desc">
 					不指定配送员超过10分钟没有人接单，会发送短信通知
 				</view>
 			</view>
-			<view style="padding: 40rpx;">
-				<view
-					style="display: flex;font-size: 28rpx;font-weight: bold;line-height: 50rpx;margin-bottom: 30rpx;align-items: center;">
-					<view style="width:50%;display: flex;align-items: center;">
+			<view class="delivery-options">
+				<view class="delivery-option">
+					<view class="delivery-choice">
 						<view class="radio-check" v-if="selected === 'buzhiding'">
 							<uni-icons type="checkmarkempty" size="12"></uni-icons>
 						</view>
 						<view class="radio-no-check" @tap="checkVoucher('buzhiding')" v-else></view>
 						不指定
 					</view>
-					<view style="width: 50%;display: flex;justify-content: flex-end;align-items: center;"
-						v-if="selected === 'buzhiding'">
-						<text style="color: #777; font-weight: normal; margin-right: 10rpx; font-size: 24rpx;">佣金 ￥</text>
-						<input type="digit" v-model="customCommission"
-							style="width: 140rpx; border-bottom: 1px solid #ccc; text-align: center; font-size: 28rpx; font-weight: normal; height: 50rpx; min-height: 50rpx;"
-							placeholder="金额" />
+					<view class="commission-input" v-if="selected === 'buzhiding'">
+						<text>佣金 ￥</text>
+						<input type="digit" v-model="customCommission" placeholder="金额" />
 					</view>
 				</view>
-				<view class="" style="display: flex;font-size: 28rpx;font-weight: bold;line-height: 50rpx;">
-					<view style="width:50%;display: flex;">
+				<view class="delivery-option">
+					<view class="delivery-choice">
 						<view class="radio-check" v-if="selected === 'zhiding'">
 							<uni-icons type="checkmarkempty" size="12"></uni-icons>
 						</view>
 						<view class="radio-no-check" @tap="checkVoucher('zhiding')" v-else></view>
 						指定配送员
 					</view>
-					<view style="width: 50%;color: #777;text-align: right;" @tap="goDetail">
+					<view class="worker-entry" @tap="goDetail">
 						{{ assignedWorker ? assignedWorker.workerName + ' ' + assignedWorker.mobile : '配送员' }}
 						<uni-icons type="right" size="12"></uni-icons>
 					</view>
 				</view>
 				
-				<view v-if="highFloorFeeCalc > 0" style="margin-top: 20rpx; color: #ff5722; font-size: 24rpx; background: #fff5f5; padding: 10rpx 20rpx; border-radius: 10rpx;">
+				<view class="floor-fee-tip" v-if="highFloorFeeCalc > 0">
 					<uni-icons type="info" size="14" color="#ff5722"></uni-icons>
 					因您的收货楼层在3楼以上，将额外收取配送费 ¥{{highFloorFeeCalc}}
 				</view>
 			</view>
 		</view>
 		<view class="box1">
-			<view style="width: 100%;line-height: 70rpx;font-size: 28rpx;font-weight: 700;">
+			<view class="shop-title">
 				{{shopItem.shopName || '未知道商家'}}
 			</view>
 
 			<block v-if="!isGroupBuy">
-				<view style="display: flex;padding: 20rpx;background: rgba(247, 248, 248, 0.6);border-radius: 20rpx; margin-bottom:20rpx;"
+				<view class="goods-card"
 					v-for="(cartItem, index) in cartItems" :key="index">
 					<view class="goods-img">
 						<img :src="cartItem.item.productPicture" alt="">
@@ -154,7 +147,7 @@
 							</view>
 						</view>
 						<view class="goods-content-bottom">
-							<view style="width: 45%;flex:1;">
+							<view class="goods-count">
 								X{{cartItem.quantity}}
 							</view>
 							<view class="pintuan-left-price">
@@ -165,7 +158,7 @@
 				</view>
 			</block>
 			<block v-else>
-				<view style="display: flex;padding: 20rpx;background: rgba(247, 248, 248, 0.6);border-radius: 20rpx; margin-bottom:20rpx;"
+				<view class="goods-card"
 					v-if="groupItem">
 					<view class="goods-img">
 						<img :src="groupItem.item.productPicture" alt="">
@@ -180,12 +173,11 @@
 							</view>
 						</view>
 						<view class="goods-content-bottom">
-							<view style="width: 45%;flex:1;">
+							<view class="goods-count">
 								X1
 							</view>
 							<view class="pintuan-left-price">
-								<view
-									style="background: rgba(255, 57, 57, 0.2);padding: 0px 12rpx;border-radius: 20rpx;margin-left: 20rpx;">
+								<view class="group-price-tag">
 									<text>拼团</text>
 									<text style="color: red;">￥{{groupItem.groupRule.groupPrice}}</text>
 								</view>
@@ -193,86 +185,83 @@
 						</view>
 					</view>
 				</view>
-				<view v-if="groupItem.item.moreBuyData"  style="display: flex;padding: 20rpx;background: rgba(247, 248, 248, 0.6);border-radius: 20rpx; margin-bottom:20rpx;"
-					v-for="(cartItem, index) in groupItem.item.moreBuyData" :key="index">
-					<view class="goods-img">
-						<img :src="cartItem.productPicture" alt="">
-					</view>
-					<view class="goods-content">
-						<view class="goods-name">
-							{{cartItem.productName}}
+				<block v-if="groupItem && groupItem.item.moreBuyData">
+					<view class="goods-card" v-for="(cartItem, index) in groupItem.item.moreBuyData" :key="index">
+						<view class="goods-img">
+							<img :src="cartItem.productPicture" alt="">
 						</view>
-						<view class="goods-content-center" v-if="cartItem.specs">
-							<view class="goods-deal1">
-								{{getSpecDisplayString(cartItem.specs)}}
+						<view class="goods-content">
+							<view class="goods-name">
+								{{cartItem.productName}}
 							</view>
-						</view>
-						<view class="goods-content-bottom">
-							<view style="width: 45%;flex:1;">
-								X{{cartItem.quantity}}
+							<view class="goods-content-center" v-if="cartItem.specs">
+								<view class="goods-deal1">
+									{{getSpecDisplayString(cartItem.specs)}}
+								</view>
 							</view>
-							<view class="pintuan-left-price">
-								￥{{cartItem.attributeListPrice | sliceMsg}}
+							<view class="goods-content-bottom">
+								<view class="goods-count">
+									X{{cartItem.quantity}}
+								</view>
+								<view class="pintuan-left-price">
+									￥{{cartItem.attributeListPrice | sliceMsg}}
+								</view>
 							</view>
 						</view>
 					</view>
-				</view>
+				</block>
 			</block>
 
-			<view>
-				<view style="height: 80rpx;line-height: 80rpx;display: flex;" v-if="isPaotui">
-					<view style="flex: 1;color: #777;font-weight: 700;">
+			<view class="fee-list">
+				<view class="fee-row" v-if="isPaotui">
+					<view class="fee-label">
 						打包费
 					</view>
-					<view style="color: #000;font-weight:700;">
+					<view class="fee-value">
 						￥{{packageFee.toFixed(2)}}
 					</view>
 				</view>
-				<view style="height: 80rpx;line-height: 80rpx;display: flex;" v-if="isPaotui">
-					<view style="flex: 1;color: #777;font-weight: 700;">
-						配送费 <text v-if="isFaceToFace" style="font-size: 20rpx;color: #999;">(均摊 | 如超过2人，每多一人配送费总额增加0.5)</text>
+				<view class="fee-row" v-if="isPaotui">
+					<view class="fee-label">
+						配送费 <text class="fee-tip" v-if="isFaceToFace">(均摊 | 如超过2人，每多一人配送费总额增加0.5)</text>
 					</view>
-					<view style="color: #000;font-weight:700;">
+					<view class="fee-value">
 						￥{{deliveryFeeCalc.toFixed(2)}}
 					</view>
 				</view>
-				<view style="height: 80rpx;line-height: 80rpx;display: flex;">
-					<view style="flex: 1;color: #777;font-weight: 700;">
+				<view class="fee-row">
+					<view class="fee-label">
 						备注
 					</view>
-					<view style="color: #000;font-weight:700;flex: 1;">
-						<input type="digit" v-model="remark"
-							style="border-bottom: 1px solid #ccc; text-align: center; font-size: 28rpx; font-weight: normal; height: 50rpx; min-height: 50rpx;"
-							 />
+					<view class="remark-box">
+						<input type="text" v-model="remark" placeholder="口味、餐具等备注" />
 					</view>
 				</view>
 			</view>
-			<view
-				style="display: flex;height: 80rpx;line-height: 80rpx;border-top: 1px solid #eee;font-size: 28rpx;font-weight: 700; align-items:center;" @tap="openCouponPopup">
-				<view style="flex: 1; color: #777; font-size:32rpx;">
+			<view class="coupon-row" @tap="openCouponPopup">
+				<view class="coupon-label">
 					优惠券
 				</view>
-				<view style="color: #ff5722;" v-if="selectedCoupon">
+				<view class="coupon-discount" v-if="selectedCoupon">
 					-￥{{selectedCoupon.discountAmount.toFixed(2)}}
 				</view>
-				<view style="color: #0b9b73;" v-else-if="availableCoupons.length > 0">
+				<view class="coupon-available" v-else-if="availableCoupons.length > 0">
 					有 {{availableCoupons.length}} 张可用
 				</view>
-				<view style="color: #999;" v-else>
+				<view class="coupon-empty" v-else>
 					无可用券
 				</view>
 				<uni-icons type="right" size="14" color="#999" style="margin-left:10rpx;"></uni-icons>
 			</view>
-			<view
-				style="display: flex;height: 80rpx;line-height: 100rpx;border-top: 1px solid #eee;font-size: 32rpx;font-weight: 700;">
-				<view style="flex: 1;">
+			<view class="total-row">
+				<view class="total-label">
 					合计
 				</view>
-				<view class="">
+				<view class="total-price">
 					￥{{totalAmountCalc.toFixed(2)}}
 				</view>
 			</view>
-			<view style="height:160rpx;"></view>
+			<view class="bottom-placeholder"></view>
 			<view class="buy-bottom">
 				<view class="bottom-btn" @tap="submitPay">
 					立即支付
@@ -387,34 +376,33 @@
 		</uni-popup>
 		
 		<uni-popup ref="couponPopup" type="bottom" background-color="#F5F8F5">
-			<view style="width: 100%; height: 800rpx; display: flex; flex-direction: column;">
-				<view style="height: 100rpx; line-height: 100rpx; text-align: center; font-size: 32rpx; font-weight: bold; border-bottom: 1px solid #eee; position: relative; background: #fff;">
+			<view class="coupon-popup">
+				<view class="coupon-popup-title">
 					选择优惠券
-					<uni-icons type="closeempty" size="24" @tap="$refs.couponPopup.close()" style="position: absolute; right: 30rpx; top: 0;"></uni-icons>
+					<uni-icons type="closeempty" size="24" @tap="$refs.couponPopup.close()" class="coupon-popup-close"></uni-icons>
 				</view>
-				<scroll-view scroll-y style="flex: 1; padding: 20rpx; box-sizing: border-box;">
-					<view v-for="(item, index) in availableCoupons" :key="index" @tap="selectCoupon(item)"
-						style="background: #fff; border-radius: 12rpx; padding: 30rpx 20rpx; margin-bottom: 20rpx; display: flex; align-items: center; justify-content: space-between;">
-						<view style="display: flex; align-items: center; flex: 1;">
-							<view style="color: #ff5722; font-size: 40rpx; font-weight: bold; width: 140rpx;">
-								<text style="font-size: 24rpx;">￥</text>{{item.discountAmount}}
+				<scroll-view scroll-y class="coupon-scroll">
+					<view class="coupon-card" v-for="(item, index) in availableCoupons" :key="index" @tap="selectCoupon(item)">
+						<view class="coupon-card-main">
+							<view class="coupon-card-price">
+								<text>￥</text>{{item.discountAmount}}
 							</view>
-							<view style="flex: 1; display: flex; flex-direction: column; justify-content: center; margin-left: 20rpx;">
-								<view style="font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 6rpx;">{{item.couponName}}</view>
-								<view style="font-size: 22rpx; color: #999;" v-if="item.minAmount > 0">满{{item.minAmount}}可用</view>
-								<view style="font-size: 22rpx; color: #999;" v-else>无门槛使用</view>
+							<view class="coupon-card-info">
+								<view class="coupon-card-name">{{item.couponName}}</view>
+								<view class="coupon-card-limit" v-if="item.minAmount > 0">满{{item.minAmount}}可用</view>
+								<view class="coupon-card-limit" v-else>无门槛使用</view>
 							</view>
 						</view>
 						<uni-icons v-if="selectedCoupon && selectedCoupon.id === item.id" type="checkmarkempty" size="20" color="#0b9b73"></uni-icons>
-						<view v-else style="width: 40rpx; height: 40rpx; border-radius: 50%; border: 1px solid #ddd;"></view>
+						<view v-else class="coupon-card-radio"></view>
 					</view>
-					<view v-if="availableCoupons.length===0" style="text-align:center; padding-top: 100rpx; color: #999;">
+					<view class="coupon-empty-state" v-if="availableCoupons.length===0">
 						暂无可用优惠券
 					</view>
-					<view style="height:40rpx;"></view>
+					<view class="coupon-scroll-bottom"></view>
 				</scroll-view>
-				<view style="padding: 20rpx 40rpx; background: #fff;" v-if="availableCoupons.length>0">
-					<view @tap="selectCoupon(null)" style="width: 100%; height: 80rpx; background: linear-gradient(90deg, #e3ff96, #a6ffea); font-size: 30rpx; font-weight: 700; line-height: 80rpx; text-align: center; border-radius: 100rpx;">
+				<view class="coupon-popup-footer" v-if="availableCoupons.length>0">
+					<view class="coupon-clear-btn" @tap="selectCoupon(null)">
 						不使用优惠券
 					</view>
 				</view>
@@ -1098,26 +1086,36 @@
 </script>
 
 <style lang="scss">
+	$primary: #00231C;
+	$muted: #6f7f79;
+	$brand-start: #e3ff96;
+	$brand-end: #a6ffea;
+	$card-shadow: 0 16rpx 44rpx rgba(8, 36, 29, 0.08);
+
 	page {
 		width: 100%;
 		height: 100%;
 		font-size: 24rpx;
 		background: #F5F8F5;
-		color: #00231C;
+		color: $primary;
 	}
 
 	.page1 {
 		width: 100%;
-		height: 100%;
+		min-height: 100%;
 		font-size: 24rpx;
 		position: relative;
-		background: #fff;
+		overflow-x: hidden;
+		background:
+			linear-gradient(180deg, rgba(245, 248, 245, 0) 0, #F5F8F5 360rpx),
+			#F5F8F5;
 	}
 
 	.title {
 		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
 		width: 100%;
-		height: 20%;
+		height: 340rpx;
+		background-size: 100% 100%;
 	}
 
 	.title-sreach {
@@ -1130,7 +1128,15 @@
 	.back-btn {
 		position: absolute;
 		bottom: 0;
-		left: 0;
+		left: 14rpx;
+		width: 68rpx;
+		height: 68rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+		background: rgba(255, 255, 255, 0.34);
+		backdrop-filter: blur(8rpx);
 	}
 
 	.title-name {
@@ -1141,6 +1147,14 @@
 		text-align: center;
 	}
 
+	.tab-wrap {
+		position: absolute;
+		top: 184rpx;
+		left: 0;
+		width: 100%;
+		z-index: 2;
+	}
+
 	.tab1 {
 		width: 100%;
 		height: 160rpx;
@@ -1153,25 +1167,48 @@
 		}
 	}
 
+	.tab-bg {
+		position: absolute;
+		left: 0;
+		top: 0;
+	}
+
+	.tab-hit-area {
+		width: 100%;
+		height: 160rpx;
+		position: absolute;
+		top: 0;
+		left: 0;
+		display: flex;
+	}
+
+	.tab-hit-item {
+		width: 50%;
+		height: 160rpx;
+	}
+
 	.box1 {
-		width: 95%;
-		margin: 0 auto 20rpx;
+		width: calc(100% - 40rpx);
+		box-sizing: border-box;
+		margin: 20rpx auto 24rpx;
 		background: #fff;
-		border-radius: 20rpx;
-		padding: 20rpx;
+		border-radius: 30rpx;
+		padding: 26rpx;
+		box-shadow: $card-shadow;
 	}
 
 	.goods-img {
-		width: 160rpx;
-		height: 160rpx;
+		width: 150rpx;
+		height: 150rpx;
 		position: relative;
-		
+		flex-shrink: 0;
 
 		img {
 			width: 100%;
 			background-size: 100%;
 			height: 100%;
-			border-radius: 20rpx;
+			border-radius: 24rpx;
+			box-shadow: 0 12rpx 24rpx rgba(0, 35, 28, 0.08);
 		}
 	}
 
@@ -1181,73 +1218,115 @@
 	}
 
 	.goods-name {
-		font-size: 32rpx;
-		font-weight: 900;
+		font-size: 30rpx;
+		font-weight: 800;
+		line-height: 42rpx;
+		color: $primary;
 	}
 
 	.goods-content-center {
 		display: flex;
-		margin: 16rpx 0;
-		color: #777;
+		margin: 12rpx 0;
+		color: $muted;
+		font-size: 24rpx;
 	}
 
 	.pintuan-left-price {
-		// width: 55%;
 		text-align: right;
-		font-weight: 700;
-		color: #000;
+		font-weight: 800;
+		color: $primary;
 		display: flex;
+		align-items: center;
+		justify-content: flex-end;
 	}
 
 	.goods-content-bottom {
 		display: flex;
-		line-height: 56rpx;
-		color: #777;
+		line-height: 52rpx;
+		color: $muted;
+		align-items: center;
 	}
 
 	.address-box {
 		background: #fff;
-		height: 80rpx;
-		line-height: 80rpx;
-		font-size: 32rpx;
-		font-weight: 700;
-		padding: 0 40rpx;
-		margin-top: 20rpx;
+		min-height: 92rpx;
+		line-height: 1.4;
+		font-size: 30rpx;
+		font-weight: 800;
+		padding: 0 30rpx;
+		margin: 18rpx 20rpx 0;
+		border-radius: 28rpx;
+		box-shadow: $card-shadow;
+		display: flex;
+		align-items: center;
 	}
 
 	.time-box {
-		background: #fff;
 		display: flex;
-		height: 140rpx;
 		padding: 20rpx;
 	}
 
 	.time1 {
-		height: 100rpx;
+		min-height: 96rpx;
 		flex: 1;
-		border-radius: 20rpx;
+		border-radius: 24rpx;
 		text-align: center;
-		margin: 0 10rpx 0 20rpx;
 		line-height: 40rpx;
-		padding-top: 10rpx;
+		padding: 16rpx 10rpx;
+		background: rgba(255, 255, 255, 0.86);
+		border: 2rpx solid rgba(255, 255, 255, 0.9);
+		box-shadow: 0 10rpx 28rpx rgba(0, 35, 28, 0.05);
+		box-sizing: border-box;
+		transition: transform 0.18s ease, box-shadow 0.18s ease;
+	}
+
+	.time1 + .time1 {
+		margin-left: 20rpx;
+	}
+
+	.time1:active,
+	.address-box:active,
+	.coupon-row:active,
+	.bottom-btn:active {
+		transform: scale(0.98);
+	}
+
+	.time1-active {
+		background: linear-gradient(110deg, $brand-start, $brand-end);
+		border-color: rgba(255, 255, 255, 0.72);
+		box-shadow: 0 14rpx 32rpx rgba(49, 224, 183, 0.2);
+	}
+
+	.time-title {
+		font-size: 28rpx;
+		font-weight: 800;
+		color: $primary;
+	}
+
+	.time-desc {
+		margin-top: 4rpx;
+		font-size: 21rpx;
+		color: $muted;
 	}
 
 	.radio-check {
-		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
-		width: 48rpx;
-		height: 48rpx;
-		border-radius: 48rpx;
+		background: linear-gradient(90deg, $brand-start, $brand-end);
+		width: 42rpx;
+		height: 42rpx;
+		border-radius: 42rpx;
 		text-align: center;
-		line-height: 48rpx;
-		margin: 0 20rpx 0 0;
+		line-height: 42rpx;
+		margin: 0 18rpx 0 0;
+		box-shadow: 0 6rpx 16rpx rgba(49, 224, 183, 0.22);
 	}
 
 	.radio-no-check {
-		width: 48rpx;
-		height: 48rpx;
-		border-radius: 48rpx;
-		border: 1px solid #eee;
-		margin: 0 20rpx 0 0;
+		width: 42rpx;
+		height: 42rpx;
+		border-radius: 42rpx;
+		border: 2rpx solid #e8eeee;
+		margin: 0 18rpx 0 0;
+		background: #fff;
 	}
 
 	.buy-bottom {
@@ -1255,34 +1334,42 @@
 		bottom: 0;
 		left: 0;
 		width: 100%;
-		height: 150rpx;
+		min-height: 146rpx;
 		display: flex;
-		background: #fff;
+		padding-bottom: env(safe-area-inset-bottom);
+		background: rgba(255, 255, 255, 0.92);
 		z-index: 99;
-		box-shadow: 0 -20rpx 30rpx rgba(0, 0, 0, 0.3);
+		box-shadow: 0 -10rpx 34rpx rgba(0, 35, 28, 0.12);
+		backdrop-filter: blur(14rpx);
 	}
 
 	.bottom-btn {
 		width: 90%;
-		height: 100rpx;
-		background: linear-gradient(90deg, #e3ff96, #a6ffea);
-		font-size: 26rpx;
-		font-weight: 700;
-		line-height: 100rpx;
+		height: 92rpx;
+		background: linear-gradient(100deg, $brand-start 0%, $brand-end 100%);
+		font-size: 28rpx;
+		font-weight: 800;
+		line-height: 92rpx;
 		text-align: center;
 		border-radius: 100rpx;
-		margin: 20rpx auto;
+		margin: 22rpx auto 24rpx;
+		box-shadow: 0 16rpx 30rpx rgba(49, 224, 183, 0.22);
+		transition: transform 0.18s ease;
 	}
+
 	.ziqu-text{
 		align-items: center;
 		display: flex;
+		color: $primary;
+		line-height: 38rpx;
 	}
+
 	.btn {
 		width: 95%;
 		height: 100rpx;
 		font-size: 32rpx;
 		font-weight: 700;
-		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
+		background: linear-gradient(90deg, $brand-start, $brand-end);
 		border-radius: 100rpx;
 		line-height: 100rpx;
 		text-align: center;
@@ -1290,36 +1377,38 @@
 	}
 
 	.ziqu-box {
-		background: rgba(247, 248, 248, 0.6);
-		width: 90%;
-		margin: 0 auto;
-		border-radius: 20rpx;
+		background: rgba(255, 255, 255, 0.9);
+		width: calc(100% - 40rpx);
+		margin: 12rpx auto 22rpx;
+		border-radius: 28rpx;
 		position: relative;
 		overflow: hidden;
+		box-shadow: $card-shadow;
 	}
 
 	.ziqu-xuanfu {
 		position: absolute;
 		top: 0;
 		right: 0;
-		padding: 10rpx 20rpx;
-		background: rgba(166, 255, 234, 1);
-		border-top-right-radius: 20rpx;
-		border-bottom-left-radius: 20rpx;
+		padding: 10rpx 22rpx;
+		background: linear-gradient(90deg, $brand-start, $brand-end);
+		border-top-right-radius: 28rpx;
+		border-bottom-left-radius: 24rpx;
 		font-weight: 700;
 		font-size: 20rpx;
 	}
 
 	.ziqu-address {
 		display: flex;
-		height: 110rpx;
+		min-height: 116rpx;
 		background: #fff;
 		width: 90%;
-		border-radius: 20rpx;
+		border-radius: 24rpx;
 		font-size: 26rpx;
-		margin: 60rpx auto 20rpx;
+		margin: 64rpx auto 24rpx;
 		font-weight: bold;
 		line-height: 40rpx;
+		box-shadow: 0 10rpx 24rpx rgba(0, 35, 28, 0.05);
 
 		img {
 			width: 40rpx;
@@ -1328,6 +1417,375 @@
 		}
 	}
 
+	.address-empty,
+	.address-content {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.address-main {
+		flex: 1;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.address-change {
+		color: #0b9b73;
+		font-size: 25rpx;
+		font-weight: 600;
+		margin-left: 20rpx;
+		display: flex;
+		align-items: center;
+	}
+
+	.delivery-card {
+		width: calc(100% - 40rpx);
+		margin: 0 auto 24rpx;
+		background: #fff;
+		border-radius: 30rpx;
+		box-shadow: $card-shadow;
+		overflow: hidden;
+	}
+
+	.delivery-head {
+		padding: 24rpx 30rpx 18rpx;
+		background: linear-gradient(180deg, rgba(166, 255, 234, 0.18), rgba(255, 255, 255, 0));
+		line-height: 38rpx;
+	}
+
+	.delivery-title {
+		font-size: 30rpx;
+		font-weight: 800;
+		margin-bottom: 8rpx;
+	}
+
+	.delivery-desc {
+		font-size: 23rpx;
+		color: $muted;
+		line-height: 36rpx;
+	}
+
+	.delivery-options {
+		padding: 10rpx 30rpx 30rpx;
+	}
+
+	.delivery-option {
+		display: flex;
+		align-items: center;
+		min-height: 72rpx;
+		font-size: 28rpx;
+		font-weight: 800;
+		line-height: 50rpx;
+	}
+
+	.delivery-option + .delivery-option {
+		margin-top: 12rpx;
+		padding-top: 18rpx;
+		border-top: 1rpx solid #f0f3f2;
+	}
+
+	.delivery-choice {
+		width: 50%;
+		display: flex;
+		align-items: center;
+	}
+
+	.commission-input {
+		width: 50%;
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		color: $muted;
+		font-weight: normal;
+		font-size: 24rpx;
+
+		text {
+			margin-right: 10rpx;
+		}
+
+		input {
+			width: 132rpx;
+			height: 52rpx;
+			min-height: 52rpx;
+			text-align: center;
+			font-size: 28rpx;
+			font-weight: normal;
+			border-radius: 16rpx;
+			background: #f6faf8;
+			border: 1rpx solid #e5efeb;
+		}
+	}
+
+	.worker-entry {
+		width: 50%;
+		color: $muted;
+		text-align: right;
+		font-size: 25rpx;
+		font-weight: 600;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.floor-fee-tip {
+		margin-top: 20rpx;
+		color: #ff5722;
+		font-size: 24rpx;
+		background: #fff5f1;
+		padding: 14rpx 20rpx;
+		border-radius: 16rpx;
+	}
+
+	.shop-title {
+		width: 100%;
+		line-height: 62rpx;
+		font-size: 29rpx;
+		font-weight: 800;
+		color: $primary;
+	}
+
+	.goods-card {
+		display: flex;
+		padding: 18rpx;
+		background: linear-gradient(180deg, rgba(247, 250, 248, 0.9), rgba(247, 248, 248, 0.62));
+		border-radius: 24rpx;
+		margin-bottom: 20rpx;
+		border: 1rpx solid rgba(232, 239, 235, 0.8);
+	}
+
+	.goods-count {
+		width: 45%;
+		flex: 1;
+	}
+
+	.group-price-tag {
+		background: rgba(255, 57, 57, 0.12);
+		padding: 4rpx 14rpx;
+		border-radius: 999rpx;
+		margin-left: 20rpx;
+		font-size: 23rpx;
+	}
+
+	.fee-list {
+		margin-top: 10rpx;
+		border-top: 1rpx solid #f0f3f2;
+	}
+
+	.fee-row,
+	.coupon-row,
+	.total-row {
+		min-height: 80rpx;
+		display: flex;
+		align-items: center;
+	}
+
+	.fee-row + .fee-row {
+		border-top: 1rpx solid #f5f6f6;
+	}
+
+	.fee-label {
+		flex: 1;
+		color: $muted;
+		font-weight: 700;
+	}
+
+	.fee-tip {
+		font-size: 20rpx;
+		color: #9aa6a2;
+		font-weight: normal;
+	}
+
+	.fee-value {
+		color: $primary;
+		font-weight: 800;
+	}
+
+	.remark-box {
+		flex: 1;
+
+		input {
+			width: 100%;
+			box-sizing: border-box;
+			text-align: right;
+			font-size: 26rpx;
+			font-weight: normal;
+			min-height: 56rpx;
+			height: 56rpx;
+			padding: 0 18rpx;
+			border-radius: 18rpx;
+			background: #f6faf8;
+		}
+	}
+
+	.coupon-row {
+		border-top: 1rpx solid #f0f3f2;
+		font-size: 28rpx;
+		font-weight: 700;
+		transition: transform 0.18s ease;
+	}
+
+	.coupon-label {
+		flex: 1;
+		color: $muted;
+		font-size: 30rpx;
+	}
+
+	.coupon-discount {
+		color: #ff5722;
+	}
+
+	.coupon-available {
+		color: #0b9b73;
+	}
+
+	.coupon-empty {
+		color: #999;
+	}
+
+	.total-row {
+		border-top: 1rpx solid #f0f3f2;
+		font-size: 32rpx;
+		font-weight: 800;
+	}
+
+	.total-label {
+		flex: 1;
+	}
+
+	.total-price {
+		color: #ff5722;
+		font-size: 34rpx;
+	}
+
+	.bottom-placeholder {
+		height: 166rpx;
+	}
+
+	.coupon-popup {
+		width: 100%;
+		height: 800rpx;
+		display: flex;
+		flex-direction: column;
+		border-top-left-radius: 34rpx;
+		border-top-right-radius: 34rpx;
+		overflow: hidden;
+		background: #F5F8F5;
+	}
+
+	.coupon-popup-title {
+		height: 104rpx;
+		line-height: 104rpx;
+		text-align: center;
+		font-size: 32rpx;
+		font-weight: 800;
+		border-bottom: 1rpx solid #eef2f0;
+		position: relative;
+		background: #fff;
+	}
+
+	.coupon-popup-close {
+		position: absolute;
+		right: 30rpx;
+		top: 0;
+	}
+
+	.coupon-scroll {
+		flex: 1;
+		padding: 22rpx;
+		box-sizing: border-box;
+	}
+
+	.coupon-card {
+		background: #fff;
+		border-radius: 24rpx;
+		padding: 28rpx 22rpx;
+		margin-bottom: 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.06);
+	}
+
+	.coupon-card:active,
+	.coupon-clear-btn:active {
+		transform: scale(0.98);
+	}
+
+	.coupon-card-main {
+		display: flex;
+		align-items: center;
+		flex: 1;
+	}
+
+	.coupon-card-price {
+		color: #ff5722;
+		font-size: 42rpx;
+		font-weight: 800;
+		width: 140rpx;
+
+		text {
+			font-size: 24rpx;
+		}
+	}
+
+	.coupon-card-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		margin-left: 20rpx;
+	}
+
+	.coupon-card-name {
+		font-size: 28rpx;
+		font-weight: 800;
+		color: #333;
+		margin-bottom: 8rpx;
+	}
+
+	.coupon-card-limit {
+		font-size: 22rpx;
+		color: #999;
+	}
+
+	.coupon-card-radio {
+		width: 40rpx;
+		height: 40rpx;
+		border-radius: 50%;
+		border: 2rpx solid #dfe7e3;
+	}
+
+	.coupon-empty-state {
+		text-align: center;
+		padding-top: 100rpx;
+		color: #999;
+	}
+
+	.coupon-scroll-bottom {
+		height: 40rpx;
+	}
+
+	.coupon-popup-footer {
+		padding: 20rpx 40rpx calc(20rpx + env(safe-area-inset-bottom));
+		background: #fff;
+		box-shadow: 0 -8rpx 24rpx rgba(0, 35, 28, 0.06);
+	}
+
+	.coupon-clear-btn {
+		width: 100%;
+		height: 82rpx;
+		background: linear-gradient(90deg, $brand-start, $brand-end);
+		font-size: 30rpx;
+		font-weight: 800;
+		line-height: 82rpx;
+		text-align: center;
+		border-radius: 100rpx;
+		box-shadow: 0 12rpx 24rpx rgba(49, 224, 183, 0.18);
+	}
+
 	.ziqu-time-box {
 		width: 90%;
 		margin: 20rpx auto;