fix: 修复菜单栏点击后当前项高亮颜色与页面色系不一致的问题

- 每个菜单项使用对应页面的主题色
- 首页: #DB2777 (粉色)
- 记录: #3B82F6 (蓝色)
- 工具: #F97316 (橙色)
- 我的: #10B981 (绿色)
- 使用CSS变量动态设置激活颜色

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>