1

src/components/MobileBottomNav/index.vue

@@ -106,7 +106,7 @@ export default {
       
       const flatRoutes = flattenRoutes(routes)
       
-      // 过滤并获取所有主要路由（不限制数量）
+      // 过滤并获取所有主要路由（不限制数量，显示所有）
       const mainRoutes = flatRoutes
         .filter(route => {
           // 过滤掉一些特殊路由
@@ -118,8 +118,6 @@ export default {
                  !path.startsWith('/user/')
         })
         // 不限制数量，显示所有可用路由
-        // 但限制最多10个，避免过多导致显示问题
-        .slice(0, 10)
       
       // 缓存结果
       if (mainRoutes.length > 0) {
@@ -212,24 +210,27 @@ export default {
   background: #fff;
   border-top: 1px solid #e4e7ed;
   display: flex;
-  justify-content: space-around;
+  justify-content: flex-start;
   align-items: center;
   z-index: 1000;
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
   padding-bottom: env(safe-area-inset-bottom);
   overflow-x: auto;
+  overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
+  padding: 0 4px;
   
-  // 如果导航项超过5个，允许横向滚动
-  &.scrollable {
-    justify-content: flex-start;
-    padding: 0 8px;
+  // 隐藏滚动条但保持滚动功能
+  &::-webkit-scrollbar {
+    display: none;
   }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
   
   .nav-item {
-    flex: 1;
-    min-width: 60px;
-    max-width: 80px;
+    flex: 0 0 auto;
+    min-width: 70px;
+    max-width: 90px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -238,7 +239,6 @@ export default {
     cursor: pointer;
     transition: all 0.3s;
     -webkit-tap-highlight-color: transparent;
-    flex-shrink: 0;
     
     .nav-icon {
       width: 28px;
@@ -270,6 +270,7 @@ export default {
       text-overflow: ellipsis;
       max-width: 100%;
       text-align: center;
+      line-height: 1.2;
     }
     
     &.active {