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

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>

nuxt.config.ts

@@ -31,20 +31,25 @@ export default defineNuxtConfig({
       postcss: {
         plugins: [
           postcsspxtoviewport({
-            unitToConvert: 'px', // 要转化的单位
+            unitToConvert: 'px',
-            viewportWidth: 750, // UI设计稿的宽度
+            viewportWidth: 750,
-            unitPrecision: 6, // 转换后的精度，即小数点位数
+            unitPrecision: 6,
-            propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
+            propList: ['*'],
-            viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
+            viewportUnit: 'vw',
-            fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
+            fontViewportUnit: 'vw',
-            selectorBlackList: ['el-'], // 指定不转换为视窗单位的类名,例如van-（vantUI组件），
+            selectorBlackList: ['el-'],
-            minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
+            minPixelValue: 1,
-            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
+            mediaQuery: true,
-            replace: true, // 是否转换后直接更换属性值
+            replace: true,
-            exclude: [/node_modules/, /^(?!.*\/pages\/mobile\/).*$/], // 排除node_modules和非pages/m目录下的文件
+            // 严格只允许 pages/mobile 下的文件被转换
-            landscape: false, // 是否处理横屏情况
+            // 使用强排除：排除 node_modules 和 所有不在 pages/mobile 下的文件
-            // 只转换pages下的m文件
+            exclude: [
-            include: [/pages\/mobile/],
+              /node_modules/,
+              /^(?!.*\/(pages|src)\/mobile\/).*$/
+            ],
+            landscape: false,
+            // 可选：进一步放宽 include，以便某些移动端专用布局文件也参与
+            include: [/\/pages\/mobile\//],
           }),
         ],
       },

pages/mobile/index.vue

@@ -1,6 +1,16 @@
 <template>
-  <div>
+  <div class="mobile-page">
-    <h1>Mobile Page</h1>
+    <h1 class="page-title">移动端页面</h1>
+    <div class="test-content">
+      <p>这是一个测试页面，用于验证移动端样式重置是否生效。</p>
+      <div class="test-box">
+        <p>测试盒子 - 宽度应该适应屏幕</p>
+      </div>
+      <div class="button-group">
+        <button class="el-button el-button--primary">主要按钮</button>
+        <button class="el-button el-button--default">默认按钮</button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -11,4 +21,55 @@ definePageMeta({
   // Mobile specific logic can be added here
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.mobile-page {
+  padding: 16px;
+  min-height: 100vh;
+  background: #f5f5f5;
+  box-sizing: border-box;
+}
+
+.page-title {
+  font-size: 20px;
+  color: #333;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.test-content {
+  background: #fff;
+  padding: 16px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  
+  p {
+    margin-bottom: 12px;
+    line-height: 1.5;
+  }
+}
+
+.test-box {
+  width: 100%;
+  height: 80px;
+  background: #e8f4fd;
+  border: 1px solid #b3d8ff;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 16px 0;
+  
+  p {
+    margin: 0;
+    color: #409eff;
+    font-weight: 500;
+  }
+}
+
+.button-group {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  margin-top: 20px;
+}
+</style>