手机端项目整体UI调整修改

components/tab-bar/tab-bar.vue

@@ -5,19 +5,26 @@
       ['Recharge', 'Withdraw', 'Index', 'User', 'Transfer'].includes(routeName)
     "
   >
-    <view
-      class="item"
-      :class="{ active: routeName == item.name }"
-      v-for="(item, index) in list"
-      :key="index"
-      @click="goTab(item)"
-    >
-      <image
-        class="icon"
-        :src="routeName == item.name ? item.selectedIconPath : item.iconPath"
-        alt=""
-      ></image>
-      <view class="text">{{ item.text }}</view>
+    <view class="tab-bar__shell">
+      <view
+        class="item"
+        :class="{ active: routeName == item.name }"
+        v-for="(item, index) in list"
+        :key="index"
+        @click="goTab(item)"
+      >
+        <view class="item-inner">
+          <view class="item-indicator"></view>
+          <view class="icon-box">
+            <image
+              class="icon"
+              :src="routeName == item.name ? item.selectedIconPath : item.iconPath"
+              alt=""
+            ></image>
+          </view>
+          <view class="text">{{ item.text }}</view>
+        </view>
+      </view>
     </view>
   </view>
 </template>
@@ -122,27 +129,111 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  display: flex;
-  background: #000;
-  justify-content: space-between;
-  height: 50px;
+  z-index: 99;
+  padding: 0 8px 4px;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.12) 26%,
+    rgba(0, 0, 0, 0.32) 100%
+  );
+
+  .tab-bar__shell {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    min-height: 56px;
+    padding: 4px 5px calc(4px + env(safe-area-inset-bottom));
+    background: linear-gradient(
+      180deg,
+      rgba(9, 8, 7, 0.98) 0%,
+      rgba(2, 2, 2, 0.99) 100%
+    );
+    border: 1px solid rgba(226, 193, 117, 0.22);
+    border-bottom: none;
+    border-radius: 16px 16px 0 0;
+    box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.18),
+      inset 0 1px 0 rgba(255, 243, 212, 0.04);
+  }
+
   .item {
     flex: 1;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    color: #fff;
-    &.active {
-      color: #deb366;
+    min-width: 0;
+    color: rgba(255, 255, 255, 0.84);
+
+    .item-inner {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+      min-height: 46px;
+      margin: 0 1px;
+      padding: 5px 5px 2px;
+      border-radius: 14px;
+      transition: all 0.2s ease;
     }
+
+    .item-indicator {
+      position: absolute;
+      top: -1px;
+      left: 50%;
+      width: 20px;
+      height: 2px;
+      border-radius: 999px;
+      background: transparent;
+      transform: translateX(-50%);
+    }
+
+    .icon-box {
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 10px;
+      transition: all 0.2s ease;
+    }
+
     .icon {
-      width: 25px;
-      height: 25px;
+      width: 22px;
+      height: 22px;
     }
+
     .text {
-      font-size: 12px;
-      padding-top: 2px;
+      margin-top: 2px;
+      font-size: 11px;
+      line-height: 1.2;
+      letter-spacing: 0.2px;
+      white-space: nowrap;
+      transition: all 0.2s ease;
+    }
+
+    &.active {
+      color: #e8c26f;
+
+      .item-inner {
+        background: linear-gradient(
+          180deg,
+          rgba(63, 46, 20, 0.24) 0%,
+          rgba(30, 22, 13, 0.08) 100%
+        );
+        box-shadow: inset 0 1px 0 rgba(255, 236, 192, 0.08);
+      }
+
+      .item-indicator {
+        background: linear-gradient(90deg, #f4ddb0 0%, #d9ae55 100%);
+      }
+
+      .icon-box {
+        background: rgba(225, 191, 116, 0.08);
+        box-shadow: inset 0 1px 0 rgba(255, 244, 219, 0.06);
+      }
+
+      .text {
+        font-weight: 600;
+        text-shadow: 0 0 10px rgba(217, 174, 85, 0.1);
+      }
     }
   }
 }