refactor: 添加移动端底部导航栏并优化布局样式

layouts/m.vue

@@ -1,23 +1,38 @@
 <script setup lang="ts">
+  const active = ref('home')
 </script>
 
 <template>
   <div class="m">
+    <div class="scroll-container">
       <slot />
     </div>
+    <!-- 底部信息 -->
+    <div class="footer">
+      <van-tabbar v-model="active">
+        <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
+        <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
+        <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
+        <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
+      </van-tabbar>
+    </div>
+  </div>
 </template>
 
-<style lang="scss" scoped>
-.m {
-  width: 100%;
-  height: 100%;
-  background-color: #f8f8f8;
-}
-</style>
-
 <style lang="scss" scoped>
   /* 移动端样式重置 - 只在移动端布局中生效 */
   .m {
+    display: flex;
+    flex-direction: column;
+    background-color: #f8f8f8;
+    .scroll-container {
+      // flex: 1;
+      overflow-y: auto;
+      height: calc(100vh - 40px);
+    }
+    .footer {
+      height: auto;
+    }
     /* 重置 body 的最小宽度限制 */
     :global(body) {
       min-width: unset !important;
@@ -51,71 +66,5 @@
       width: 4px !important;
       height: 4px !important;
     }
-  
-  /* 移动端表格优化 */
-  :global(.el-table) {
-    font-size: 12px !important;
-    
-    th .cell {
-      font-size: 12px !important;
-    }
-    
-    td .cell {
-      font-size: 12px !important;
-    }
-  }
-  
-  /* 移动端按钮优化 */
-  :global(.el-button) {
-    padding: 6px 8px !important;
-    font-size: 13px !important;
-  }
-  
-  /* 移动端表单优化 */
-  :global(.el-form-item) {
-    margin-bottom: 12px !important;
-  }
-  
-  :global(.el-form-item__label) {
-    font-size: 13px !important;
-  }
-  
-  :global(.el-input__inner) {
-    height: 32px !important;
-    font-size: 13px !important;
-  }
-  
-  /* 移动端对话框优化 */
-  :global(.el-dialog) {
-    width: 95% !important;
-    margin: 0 auto !important;
-  }
-  
-  :global(.el-dialog__body) {
-    padding: 12px !important;
-    max-height: calc(100vh - 200px) !important;
-  }
-  
-  /* 移动端分页器优化 */
-  :global(.el-pagination) {
-    --el-pagination-font-size: 11px !important;
-    --el-pagination-font-size-small: 11px !important;
-    --el-pagination-button-height: 24px !important;
-    --el-pagination-button-width: 24px !important;
-    --el-pagination-button-height-small: 24px !important;
-    --el-pagination-button-width-small: 24px !important;
-  }
-  
-  /* 移动端标签页优化 */
-  :global(.el-tabs__item) {
-    padding: 0 12px 6px 0 !important;
-    font-size: 13px !important;
-  }
-  
-  /* 移动端徽章优化 */
-  :global(.el-badge) {
-    --el-badge-size: 14px !important;
-    --el-badge-padding: 3px !important;
-  }
   }
 </style>