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

layouts/m.vue

@@ -1,121 +1,70 @@
 <script setup lang="ts">
+  const active = ref('home')
 </script>
 
 <template>
   <div class="m">
-    <slot />
+    <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%;
+  .m {
-  height: 100%;
+    display: flex;
-  background-color: #f8f8f8;
+    flex-direction: column;
-}
-</style>
-
-<style lang="scss" scoped>
-/* 移动端样式重置 - 只在移动端布局中生效 */
-.m {
-  /* 重置 body 的最小宽度限制 */
-  :global(body) {
-    min-width: unset !important;
-    width: 100% !important;
-    max-width: 100% !important;
     background-color: #f8f8f8;
-  }
+    .scroll-container {
-  
+      // flex: 1;
-  /* 重置 #__nuxt 容器的样式 */
+      overflow-y: auto;
-  :global(#__nuxt) {
+      height: calc(100vh - 40px);
-    min-width: unset !important;
+    }
-    width: 100% !important;
+    .footer {
-    max-width: 100% !important;
+      height: auto;
-    
+    }
-    // .page-content {
+    /* 重置 body 的最小宽度限制 */
-    //   padding: 0 !important;
+    :global(body) {
-    //   overflow-x: hidden !important;
+      min-width: unset !important;
-      
+      width: 100% !important;
-    //   .page-table-wrap {
+      max-width: 100% !important;
-    //     padding: 8px !important;
+      background-color: #f8f8f8;
-    //   }
-      
-    //   .page-card {
-    //     padding: 8px !important;
-    //   }
-    // }
-  }
-  
-  /* 移动端优化滚动条 */
-  :global(::-webkit-scrollbar) {
-    width: 4px !important;
-    height: 4px !important;
-  }
-  
-  /* 移动端表格优化 */
-  :global(.el-table) {
-    font-size: 12px !important;
-    
-    th .cell {
-      font-size: 12px !important;
     }
 
-    td .cell {
+    /* 重置 #__nuxt 容器的样式 */
-      font-size: 12px !important;
+    :global(#__nuxt) {
+      min-width: unset !important;
+      width: 100% !important;
+      max-width: 100% !important;
+
+      // .page-content {
+      //   padding: 0 !important;
+      //   overflow-x: hidden !important;
+
+      //   .page-table-wrap {
+      //     padding: 8px !important;
+      //   }
+
+      //   .page-card {
+      //     padding: 8px !important;
+      //   }
+      // }
+    }
+
+    /* 移动端优化滚动条 */
+    :global(::-webkit-scrollbar) {
+      width: 4px !important;
+      height: 4px !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>