From aba1d926d384d5f2c22c91b36d0e4037e7833910 Mon Sep 17 00:00:00 2001
From: H1d3rOne <H1d3rOne@users.noreply.github.com>
Date: Sun, 8 Mar 2026 03:11:28 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=A0=8F=E7=82=B9=E5=87=BB=E5=90=8E=E5=BD=93=E5=89=8D=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E4=B8=8D=E9=AB=98=E4=BA=AE=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 增强tabbar激活样式，添加背景色和缩放效果
- 使用switchTab并在失败时降级到reLaunch
- 激活菜单显示蓝色背景和白色图标
---
 .../custom-tabbar/custom-tabbar.vue           | 33 +++++++++++++++----
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/xuan-deduct-uniapp/src/components/custom-tabbar/custom-tabbar.vue b/xuan-deduct-uniapp/src/components/custom-tabbar/custom-tabbar.vue
index 963b040..a08f5ae 100644
--- a/xuan-deduct-uniapp/src/components/custom-tabbar/custom-tabbar.vue
+++ b/xuan-deduct-uniapp/src/components/custom-tabbar/custom-tabbar.vue
@@ -7,7 +7,7 @@
       :class="{ active: currentIndex === index }"
       @click="switchTab(index)"
     >
-      <view class="tabbar-icon">
+      <view class="tabbar-icon" :class="{ 'icon-active': currentIndex === index }">
         <text class="icon-emoji">{{ item.icon }}</text>
       </view>
       <text class="tabbar-text">{{ item.text }}</text>
@@ -65,7 +65,12 @@ export default {
       this.currentIndex = index
       const path = this.tabList[index].pagePath
       uni.switchTab({
-        url: path
+        url: path,
+        fail: () => {
+          uni.reLaunch({
+            url: path
+          })
+        }
       })
     }
   }
@@ -84,7 +89,7 @@ export default {
   align-items: center;
   justify-content: space-around;
   border-top: 1rpx solid #f0f0f0;
-  box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
   z-index: 9999;
   padding-bottom: env(safe-area-inset-bottom);
 }
@@ -96,25 +101,39 @@ export default {
   align-items: center;
   justify-content: center;
   padding: 8rpx 0;
+  transition: all 0.3s ease;
 }
 
 .tabbar-icon {
   margin-bottom: 4rpx;
+  padding: 8rpx 16rpx;
+  border-radius: 20rpx;
+  transition: all 0.3s ease;
+}
+
+.tabbar-icon.icon-active {
+  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
+  transform: scale(1.1);
 }
 
 .icon-emoji {
   font-size: 44rpx;
   line-height: 1;
+  transition: all 0.3s ease;
+}
+
+.tabbar-icon.icon-active .icon-emoji {
+  filter: brightness(0) invert(1);
 }
 
 .tabbar-text {
   font-size: 20rpx;
-  color: #999999;
-  transition: color 0.3s;
+  color: #9CA3AF;
+  transition: all 0.3s ease;
 }
 
 .tabbar-item.active .tabbar-text {
-  color: #DB2777;
-  font-weight: 500;
+  color: #3B82F6;
+  font-weight: 600;
 }
 </style>