优化移动端布局样式和配置

2025-09-03 14:48:16 +08:00
parent 694a032d0a
commit 7f2edb91e4
3 changed files with 187 additions and 17 deletions
--- a/layouts/m.vue
+++ b/layouts/m.vue
@ -13,4 +13,108 @@
  height: 100%;
  background-color: #f5f5f5;
 }
+</style>
+
+<style lang="scss" scoped>
+/* 移动端样式重置 - 只在移动端布局中生效 */
+.m {
+  /* 重置 body 的最小宽度限制 */
+  :global(body) {
+    min-width: unset !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+  
+  /* 重置 #__nuxt 容器的样式 */
+  :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-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>