From 643d17730f94717b68db0aafd41bfa63751ece55 Mon Sep 17 00:00:00 2001
From: wangfukang <15630117759@163.com>
Date: Mon, 11 May 2026 15:03:39 +0800
Subject: [PATCH] 1

---
 pages/index/index.vue | 217 ++++++++++++++++++++++++++++++++----------
 1 file changed, 169 insertions(+), 48 deletions(-)

diff --git a/pages/index/index.vue b/pages/index/index.vue
index ca22be0..d8cdf09 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -222,58 +222,42 @@
 						</view>
 					</view>
 					<view class="daimai-box" style="padding-bottom:180rpx;">
-						<view class="daimai-tab" id="menuList"
-							:style="{'top': (navBarHeight+46) + 'px','background':lastScrollTop>583?'#fff':''}">
-							<view @tap="checkTab1('waimai')" style="flex: 1;">
-								<view class="like-title"
-									style="position: relative;width: 160rpx;height: 50rpx;margin-top:8rpx;"
-									v-if="checked == 'waimai'">
-									<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4d3207adb25546f68ce4d3428e571867.png"
-										alt="" style="width: 160rpx;height: 50rpx;" />
-									<text
-										style="position: absolute;top: 0;left: 60rpx;font-size: 30rpx;font-weight: 700;height: 50rpx;line-height: 40rpx;">（{{waimaiCount}}）</text>
-								</view>
-								<view style="font-size: 30rpx;font-weight: 700;margin-left: 20rpx;color: #777;" v-else>
-									外卖({{waimaiCount}})
+						<view class="daimai-tab" id="menuList" :class="{'daimai-tab--sticky': lastScrollTop>583}"
+							:style="{'top': (navBarHeight+46) + 'px'}">
+							<view class="daimai-tab-item" :class="{'active': checked == 'waimai'}"
+								@tap="checkTab1('waimai')">
+								<view class="daimai-tab-glow"></view>
+								<view class="daimai-tab-icon">饭</view>
+								<view class="daimai-tab-info">
+									<text class="daimai-tab-label">外卖</text>
+									<text class="daimai-tab-count">{{waimaiCount}}</text>
 								</view>
 							</view>
-							<view @tap="checkTab1('kuaidi')" style="margin-left: 20rpx;flex: 1;">
-								<view class="like-title"
-									style="position: relative;width: 160rpx;height: 50rpx;margin-top:8rpx;"
-									v-if="checked == 'kuaidi'">
-									<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/aeff6530c1c4486e9c7d088522de0c98.png"
-										alt="" style="width: 160rpx;height: 50rpx;">
-									<text
-										style="position: absolute;top: 0;left: 60rpx;font-size: 30rpx;font-weight: 700;height: 50rpx;line-height: 40rpx;">（{{kuaidiCount}}）</text>
-								</view>
-								<view style="font-size: 30rpx;font-weight: 700;margin-left: 20rpx;color: #777;" v-else>
-									快递({{kuaidiCount}})
+							<view class="daimai-tab-item" :class="{'active': checked == 'kuaidi'}"
+								@tap="checkTab1('kuaidi')">
+								<view class="daimai-tab-glow"></view>
+								<view class="daimai-tab-icon">递</view>
+								<view class="daimai-tab-info">
+									<text class="daimai-tab-label">快递</text>
+									<text class="daimai-tab-count">{{kuaidiCount}}</text>
 								</view>
 							</view>
-							<view @tap="checkTab1('paotui')" style="margin-left: 20rpx;flex: 1;">
-								<view class="like-title"
-									style="position: relative;width: 160rpx;height: 50rpx;margin-top:8rpx;"
-									v-if="checked == 'paotui'">
-									<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/e2cccb5ad1534b2aaae9b2b67ed401b4.png"
-										alt="" style="width: 160rpx;height: 50rpx;">
-									<text
-										style="position: absolute;top: 0;left: 60rpx;font-size: 30rpx;font-weight: 700;height: 50rpx;line-height: 40rpx;">（{{paotuiCount}}）</text>
-								</view>
-								<view style="font-size: 30rpx;font-weight: 700;margin-left: 20rpx;color: #777;" v-else>
-									跑腿({{paotuiCount}})
+							<view class="daimai-tab-item" :class="{'active': checked == 'paotui'}"
+								@tap="checkTab1('paotui')">
+								<view class="daimai-tab-glow"></view>
+								<view class="daimai-tab-icon">跑</view>
+								<view class="daimai-tab-info">
+									<text class="daimai-tab-label">跑腿</text>
+									<text class="daimai-tab-count">{{paotuiCount}}</text>
 								</view>
 							</view>
-							<view @tap="checkTab1('zhipai')" style="margin-left: 20rpx;flex: 1;" v-if="worker != null">
-								<view class="like-title"
-									style="position: relative;width: 160rpx;height: 50rpx;margin-top:8rpx;"
-									v-if="checked == 'zhipai'">
-									<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/2bfc2333818b47478572e4d1a430049a.png"
-										alt="" style="width: 160rpx;height: 50rpx;">
-									<text
-										style="position: absolute;top: 0;left: 80rpx;font-size: 30rpx;font-weight: 700;height: 50rpx;line-height: 40rpx;">（{{zhipaiCount}}）</text>
-								</view>
-								<view style="font-size: 30rpx;font-weight: 700;margin-left: 20rpx;color: #777;" v-else>
-									指派单({{zhipaiCount}})
+							<view class="daimai-tab-item" :class="{'active': checked == 'zhipai'}"
+								@tap="checkTab1('zhipai')" v-if="worker != null">
+								<view class="daimai-tab-glow"></view>
+								<view class="daimai-tab-icon">派</view>
+								<view class="daimai-tab-info">
+									<text class="daimai-tab-label">指派单</text>
+									<text class="daimai-tab-count">{{zhipaiCount}}</text>
 								</view>
 							</view>
 						</view>
@@ -1505,11 +1489,148 @@
 
 	.daimai-tab {
 		display: flex;
-		height: 60rpx;
-		line-height: 60rpx;
+		align-items: center;
+		height: 88rpx;
+		padding: 8rpx;
+		margin: 0 -4rpx;
+		box-sizing: border-box;
 		position: sticky;
 		top: 0;
 		z-index: 90;
+		border-radius: 34rpx;
+		background: rgba(255, 255, 255, 0.62);
+	}
+
+	.daimai-tab--sticky {
+		background: rgba(255, 255, 255, 0.96);
+		box-shadow: 0 16rpx 36rpx rgba(130, 84, 43, 0.08);
+	}
+
+	.daimai-tab-item {
+		flex: 1;
+		min-width: 0;
+		height: 68rpx;
+		margin-right: 10rpx;
+		border-radius: 26rpx;
+		border: 1px solid rgba(255, 184, 116, 0.16);
+		background: rgba(255, 252, 244, 0.82);
+		box-shadow: 0 8rpx 22rpx rgba(130, 84, 43, 0.04);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		overflow: hidden;
+		color: #7d756c;
+		transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.35), box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
+	}
+
+	.daimai-tab-item:last-child {
+		margin-right: 0;
+	}
+
+	.daimai-tab-item:active {
+		transform: scale(0.94);
+		box-shadow: 0 4rpx 12rpx rgba(255, 150, 93, 0.14);
+	}
+
+	.daimai-tab-item.active {
+		border-color: rgba(255, 188, 119, 0.72);
+		background: linear-gradient(135deg, #fff7d7 0%, #ffd8a8 45%, #ffb8a3 100%);
+		box-shadow: 0 14rpx 30rpx rgba(255, 158, 100, 0.28);
+		color: #63351d;
+		transform: translateY(-4rpx);
+		animation: daimaiTabPop 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.35);
+	}
+
+	.daimai-tab-item.active:active {
+		transform: translateY(-2rpx) scale(0.96);
+	}
+
+	.daimai-tab-glow {
+		width: 88rpx;
+		height: 88rpx;
+		border-radius: 50%;
+		background: rgba(255, 255, 255, 0.42);
+		position: absolute;
+		top: -38rpx;
+		right: -26rpx;
+		opacity: 0;
+		transform: scale(0.6);
+		transition: opacity 0.22s ease, transform 0.26s ease;
+	}
+
+	.daimai-tab-item.active .daimai-tab-glow {
+		opacity: 1;
+		transform: scale(1.08);
+	}
+
+	.daimai-tab-icon {
+		width: 40rpx;
+		height: 40rpx;
+		margin-right: 8rpx;
+		border-radius: 14rpx;
+		background: rgba(255, 221, 176, 0.56);
+		color: #724126;
+		font-size: 22rpx;
+		font-weight: 900;
+		line-height: 40rpx;
+		text-align: center;
+		z-index: 1;
+	}
+
+	.daimai-tab-item.active .daimai-tab-icon {
+		background: rgba(255, 255, 255, 0.5);
+		color: #63351d;
+		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
+	}
+
+	.daimai-tab-info {
+		min-width: 0;
+		display: flex;
+		align-items: center;
+		z-index: 1;
+	}
+
+	.daimai-tab-label {
+		font-size: 24rpx;
+		font-weight: 900;
+		white-space: nowrap;
+		letter-spacing: 1rpx;
+	}
+
+	.daimai-tab-count {
+		min-width: 30rpx;
+		height: 30rpx;
+		margin-left: 6rpx;
+		padding: 0 8rpx;
+		border-radius: 999rpx;
+		background: rgba(255, 221, 176, 0.66);
+		color: #724126;
+		font-size: 20rpx;
+		font-weight: 900;
+		line-height: 30rpx;
+		text-align: center;
+		box-sizing: border-box;
+	}
+
+	.daimai-tab-item.active .daimai-tab-count {
+		background: rgba(255, 255, 255, 0.88);
+		color: #ff734d;
+		box-shadow: 0 4rpx 12rpx rgba(255, 115, 77, 0.18);
+	}
+
+	@keyframes daimaiTabPop {
+		0% {
+			transform: translateY(0) scale(0.94);
+		}
+
+		65% {
+			transform: translateY(-6rpx) scale(1.04);
+		}
+
+		100% {
+			transform: translateY(-4rpx) scale(1);
+		}
 	}
 
 	.like-title {