From b4370b4bf24b1147785651f627b084e73a7df231 Mon Sep 17 00:00:00 2001
From: H1d3rOne <H1d3rOne@users.noreply.github.com>
Date: Sun, 8 Mar 2026 03:16:10 +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=E9=A1=B9?=
 =?UTF-8?q?=E9=AB=98=E4=BA=AE=E9=A2=9C=E8=89=B2=E4=B8=8E=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E8=89=B2=E7=B3=BB=E4=B8=8D=E4=B8=80=E8=87=B4=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 每个菜单项使用对应页面的主题色
- 首页: #DB2777 (粉色)
- 记录: #3B82F6 (蓝色)
- 工具: #F97316 (橙色)
- 我的: #10B981 (绿色)
- 使用CSS变量动态设置激活颜色
---
 .../custom-tabbar/custom-tabbar.vue           | 51 ++++++++-----------
 1 file changed, 20 insertions(+), 31 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 a08f5ae..16ec1e5 100644
--- a/xuan-deduct-uniapp/src/components/custom-tabbar/custom-tabbar.vue
+++ b/xuan-deduct-uniapp/src/components/custom-tabbar/custom-tabbar.vue
@@ -5,9 +5,10 @@
       :key="index" 
       class="tabbar-item" 
       :class="{ active: currentIndex === index }"
+      :style="currentIndex === index ? { '--active-color': item.activeColor } : {}"
       @click="switchTab(index)"
     >
-      <view class="tabbar-icon" :class="{ 'icon-active': currentIndex === index }">
+      <view class="tabbar-icon">
         <text class="icon-emoji">{{ item.icon }}</text>
       </view>
       <text class="tabbar-text">{{ item.text }}</text>
@@ -31,22 +32,26 @@ export default {
         { 
           text: '首页', 
           icon: '🏠',
-          pagePath: '/pages/index/index'
+          pagePath: '/pages/index/index',
+          activeColor: '#DB2777'
         },
         { 
           text: '记录', 
           icon: '📋',
-          pagePath: '/pages/records/records'
+          pagePath: '/pages/records/records',
+          activeColor: '#3B82F6'
         },
         { 
           text: '工具', 
           icon: '🔧',
-          pagePath: '/pages/tools/tools'
+          pagePath: '/pages/tools/tools',
+          activeColor: '#F97316'
         },
         { 
           text: '我的', 
           icon: '👤',
-          pagePath: '/pages/mine/mine'
+          pagePath: '/pages/mine/mine',
+          activeColor: '#10B981'
         }
       ]
     }
@@ -62,15 +67,9 @@ export default {
   methods: {
     switchTab(index) {
       if (this.currentIndex === index) return
-      this.currentIndex = index
       const path = this.tabList[index].pagePath
       uni.switchTab({
-        url: path,
-        fail: () => {
-          uni.reLaunch({
-            url: path
-          })
-        }
+        url: path
       })
     }
   }
@@ -89,7 +88,7 @@ export default {
   align-items: center;
   justify-content: space-around;
   border-top: 1rpx solid #f0f0f0;
-  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
+  box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
   z-index: 9999;
   padding-bottom: env(safe-area-inset-bottom);
 }
@@ -101,39 +100,29 @@ 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: #9CA3AF;
-  transition: all 0.3s ease;
+  color: #999999;
+  transition: color 0.3s;
 }
 
 .tabbar-item.active .tabbar-text {
-  color: #3B82F6;
-  font-weight: 600;
+  color: var(--active-color, #DB2777);
+  font-weight: 500;
+}
+
+.tabbar-item.active .icon-emoji {
+  transform: scale(1.1);
 }
 </style>