From 7f2edb91e4ea7cf409273c4db3b4a928fbb8f0d2 Mon Sep 17 00:00:00 2001
From: wangqiao <wangqiao@kailinjt.com>
Date: Wed, 3 Sep 2025 14:48:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E6=A0=B7=E5=BC=8F=E5=92=8C=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layouts/m.vue          | 104 +++++++++++++++++++++++++++++++++++++++++
 nuxt.config.ts         |  33 +++++++------
 pages/mobile/index.vue |  67 ++++++++++++++++++++++++--
 3 files changed, 187 insertions(+), 17 deletions(-)

diff --git a/layouts/m.vue b/layouts/m.vue
index 82b228c..01c1509 100644
--- 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>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 121d71c..81eeee6 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -31,20 +31,25 @@ export default defineNuxtConfig({
       postcss: {
         plugins: [
           postcsspxtoviewport({
-            unitToConvert: 'px', // 要转化的单位
-            viewportWidth: 750, // UI设计稿的宽度
-            unitPrecision: 6, // 转换后的精度，即小数点位数
-            propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
-            viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
-            fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
-            selectorBlackList: ['el-'], // 指定不转换为视窗单位的类名,例如van-（vantUI组件），
-            minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
-            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
-            replace: true, // 是否转换后直接更换属性值
-            exclude: [/node_modules/, /^(?!.*\/pages\/mobile\/).*$/], // 排除node_modules和非pages/m目录下的文件
-            landscape: false, // 是否处理横屏情况
-            // 只转换pages下的m文件
-            include: [/pages\/mobile/],
+            unitToConvert: 'px',
+            viewportWidth: 750,
+            unitPrecision: 6,
+            propList: ['*'],
+            viewportUnit: 'vw',
+            fontViewportUnit: 'vw',
+            selectorBlackList: ['el-'],
+            minPixelValue: 1,
+            mediaQuery: true,
+            replace: true,
+            // 严格只允许 pages/mobile 下的文件被转换
+            // 使用强排除：排除 node_modules 和 所有不在 pages/mobile 下的文件
+            exclude: [
+              /node_modules/,
+              /^(?!.*\/(pages|src)\/mobile\/).*$/
+            ],
+            landscape: false,
+            // 可选：进一步放宽 include，以便某些移动端专用布局文件也参与
+            include: [/\/pages\/mobile\//],
           }),
         ],
       },
diff --git a/pages/mobile/index.vue b/pages/mobile/index.vue
index 7b9e458..ac4c54b 100644
--- a/pages/mobile/index.vue
+++ b/pages/mobile/index.vue
@@ -1,6 +1,16 @@
 <template>
-  <div>
-    <h1>Mobile Page</h1>
+  <div class="mobile-page">
+    <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>