调整位置

src/components/BottomNav.vue

@@ -12,6 +12,7 @@
         class="nav-image"
         :class="{ 'nav-image-active': isActive('/mymatching') }"
       />
+      <span class="nav-text" :class="{ 'nav-text-active': isActive('/mymatching') }">融豆匹配</span>
     </div>
     <!-- 融豆明细 -->
     <div 
@@ -25,6 +26,7 @@
         class="nav-image"
         :class="{ 'nav-image-active': isActive('/transfers') }"
       />
+      <span class="nav-text" :class="{ 'nav-text-active': isActive('/transfers') }">融豆明细</span>
     </div>
     <!-- 主页 -->
     <div 
@@ -38,6 +40,7 @@
         class="nav-image"
         :class="{ 'nav-image-active': isActive('/mainpage') }"
       />
+      <span class="nav-text" :class="{ 'nav-text-active': isActive('/mainpage') }">主页</span>
     </div>
     <!-- 积分商城 -->
     <div 
@@ -51,6 +54,7 @@
         class="nav-image"
         :class="{ 'nav-image-active': isActive('/myshop') }"
       />
+      <span class="nav-text" :class="{ 'nav-text-active': isActive('/myshop') }">积分商城</span>
     </div>
     <!-- 个人中心 -->
     <div 
@@ -64,6 +68,7 @@
         class="nav-image"
         :class="{ 'nav-image-active': isActive('/myprofile') }"
       />
+      <span class="nav-text" :class="{ 'nav-text-active': isActive('/myprofile') }">个人中心</span>
     </div>
   </div>
 </template>
@@ -139,8 +144,8 @@ const backgroundImage = computed(() => {
 }
 
 .nav-image {
-  width: 40px;
+  width: 50px;
-  height: 40px;
+  height: 50px;
   object-fit: contain;
   transition: all 0.3s ease;
 }
@@ -149,6 +154,28 @@ const backgroundImage = computed(() => {
   transform: translateY(-50px);
 }
 
+.nav-text {
+  font-size: 12px;
+  color: white;
+  margin-top: 4px;
+  transition: all 0.3s ease;
+}
+
+.nav-text-active {
+  color: white;
+  font-weight: bold;
+}
+
+/* 最左边小球向右偏移 */
+.nav-item:first-child {
+  transform: translateX(10px);
+}
+
+/* 最右边小球向左偏移 */
+.nav-item:last-child {
+  transform: translateX(-10px);
+}
+
 /* 移动端适配 */
 @media (max-width: 768px) {
   .bottom-nav {
@@ -163,13 +190,17 @@ const backgroundImage = computed(() => {
   }
   
   .nav-image {
-    width: 35px;
+    width: 45px;
-    height: 35px;
+    height: 45px;
   }
   
   .nav-image-active {
     transform: translateY(-40px);
   }
+  
+  .nav-text {
+    font-size: 11px;
+  }
 }
 
 @media (max-width: 480px) {
@@ -185,12 +216,16 @@ const backgroundImage = computed(() => {
   }
   
   .nav-image {
-    width: 30px;
+    width: 40px;
-    height: 30px;
+    height: 40px;
   }
   
   .nav-image-active {
-    transform: translateY(-35px);
+    transform: translateY(-20px);
+  }
+  
+  .nav-text {
+    font-size: 10px;
   }
 }
 
@@ -206,12 +241,16 @@ const backgroundImage = computed(() => {
   }
   
   .nav-image {
-    width: 25px;
+    width: 35px;
-    height: 25px;
+    height: 35px;
   }
   
   .nav-image-active {
     transform: translateY(-30px);
   }
+  
+  .nav-text {
+    font-size: 9px;
+  }
 }
 </style>