From a9da19a5c6d434f9fb20fce1fa5c70f08f122c04 Mon Sep 17 00:00:00 2001
From: wswmsword <cjzjzzz@gmail.com>
Date: Sat, 25 Feb 2023 19:02:57 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BD=BF=E7=94=A8=20postcss-mobile-fo?=
 =?UTF-8?q?rever=20=E8=BF=9B=E8=A1=8C=E5=B1=8F=E5=B9=95=E9=80=82=E9=85=8D?=
 =?UTF-8?q?=EF=BC=8C=E6=8F=90=E5=8D=87=E5=90=84=E7=AB=AF=E5=8F=AF=E8=AE=BF?=
 =?UTF-8?q?=E9=97=AE=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                 |  2 +-
 package.json               |  2 +-
 pnpm-lock.yaml             | 21 ++++++++++-----------
 postcss.config.js          | 31 ++++++++++++++-----------------
 src/App.vue                |  3 +++
 src/layout/basic/index.vue | 18 +++++++++++++++++-
 6 files changed, 46 insertions(+), 31 deletions(-)
diff --git a/index.html b/index.html
index ec0e8b8..7720187 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
     <title>Vite App</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app" class="root-class"></div>
     <script type="module" src="/src/main.ts"></script>
     <script>
       window.onload = function () {
diff --git a/package.json b/package.json
index 375d503..6e6b4ca 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,6 @@
     "@vitejs/plugin-vue-jsx": "^3.0.0",
     "amfe-flexible": "^2.2.1",
     "autoprefixer": "^10.4.13",
-    "cnjm-postcss-px-to-viewport": "^1.0.0",
     "consola": "^2.15.3",
     "cross-env": "^7.0.3",
     "eruda": "^2.11.2",
@@ -55,6 +54,7 @@
     "postcss": "^8.4.20",
     "postcss-html": "1.5.0",
     "postcss-less": "^6.0.0",
+    "postcss-mobile-forever": "^2.1.2",
     "prettier": "^2.8.4",
     "rollup-plugin-visualizer": "^5.9.0",
     "stylelint": "^15.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e87913a..fccb5c9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,7 +17,6 @@ specifiers:
   amfe-flexible: ^2.2.1
   autoprefixer: ^10.4.13
   axios: 1.3.4
-  cnjm-postcss-px-to-viewport: ^1.0.0
   consola: ^2.15.3
   cross-env: ^7.0.3
   dayjs: ^1.11.7
@@ -36,6 +35,7 @@ specifiers:
   postcss: ^8.4.20
   postcss-html: 1.5.0
   postcss-less: ^6.0.0
+  postcss-mobile-forever: ^2.1.2
   prettier: ^2.8.4
   rollup-plugin-visualizer: ^5.9.0
   stylelint: ^15.2.0
@@ -90,7 +90,6 @@ devDependencies:
   '@vitejs/plugin-vue-jsx': 3.0.0_vite@4.1.4+vue@3.2.47
   amfe-flexible: 2.2.1
   autoprefixer: 10.4.13_postcss@8.4.20
-  cnjm-postcss-px-to-viewport: 1.0.0_postcss@8.4.20
   consola: 2.15.3
   cross-env: 7.0.3
   eruda: 2.11.2
@@ -105,6 +104,7 @@ devDependencies:
   postcss: 8.4.20
   postcss-html: 1.5.0
   postcss-less: 6.0.0_postcss@8.4.20
+  postcss-mobile-forever: 2.1.2_postcss@8.4.20
   prettier: 2.8.4
   rollup-plugin-visualizer: 5.9.0
   stylelint: 15.2.0
@@ -3206,15 +3206,6 @@ packages:
     engines: {node: '>=0.8'}
     dev: true
 
-  /cnjm-postcss-px-to-viewport/1.0.0_postcss@8.4.20:
-    resolution: {integrity: sha512-vokFS5qvl7JG/W79JYGZgA19LiVvDzQ5aSIQvnZiZAK2lumP+MP8WCs2AU/fK1aSIBpVmqgRpU4m27RBJ2F7rw==}
-    peerDependencies:
-      postcss: ^8.4.14
-    dependencies:
-      object-assign: 4.1.1
-      postcss: 8.4.20
-    dev: true
-
   /collection-visit/1.0.0:
     resolution: {integrity: sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==}
     engines: {node: '>=0.10.0'}
@@ -7015,6 +7006,14 @@ packages:
     resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
     dev: true
 
+  /postcss-mobile-forever/2.1.2_postcss@8.4.20:
+    resolution: {integrity: sha512-tiQa6rIgeTdhhQF+pXsgFbUcIPEaPKdvobOBK4hGHrqu5M0z2n+dlvipZI1dAQntMCKLDV5c0eu62nXo1E3iiw==}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.20
+    dev: true
+
   /postcss-prefix-selector/1.16.0_postcss@5.2.18:
     resolution: {integrity: sha512-rdVMIi7Q4B0XbXqNUEI+Z4E+pueiu/CS5E6vRCQommzdQ/sgsS4dK42U7GX8oJR+TJOtT+Qv3GkNo6iijUMp3Q==}
     peerDependencies:
diff --git a/postcss.config.js b/postcss.config.js
index adb8601..eaf1b93 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,5 +1,6 @@
 const path = require('path');
 
+/** 这个方法是针对处理vant组件下的设计稿为375问题 */
 const judgeComponent = (file) => {
   const ignore = ['vant', '@nutui', '@varlet'];
   return ignore.some((item) => path.join(file).includes(path.join('node_modules', item)));
@@ -8,25 +9,21 @@ const judgeComponent = (file) => {
 module.exports = {
   plugins: {
     autoprefixer: { overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] },
-    'cnjm-postcss-px-to-viewport': {
-      unitToConvert: 'px', // 要转化的单位
-      viewportWidth: 750, // UI设计稿的宽度
+    'postcss-mobile-forever': {
+      rootClass: 'root-class',
+      viewportWidth: (file) => (judgeComponent(file) ? 375 : 750), // UI设计稿的宽度
       unitPrecision: 6, // 转换后的精度，即小数点位数
       propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
-      viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
-      fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
-      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
-      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
-      replace: true, // 是否转换后直接更换属性值
-      landscape: false, //是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
-      landscapeUnit: 'rem', //横屏时使用的单位
-      landscapeWidth: 1134, //横屏时使用的视口宽度
-      include: [],
-      exclude: [], // 设置忽略文件，用正则做目录名匹配
-      customFun: ({ file }) => {
-        // 这个自定义的方法是针对处理vant组件下的设计稿为375问题
-        const designWidth = judgeComponent(file) ? 375 : 750;
-        return designWidth;
+      include: null,
+      exclude: null, // 设置忽略文件，用正则做目录名匹配
+      border: true, // 横屏和桌面端的边框
+      disableDesktop: false, // 关闭桌面端适配
+      disableLandscape: false, // 关闭横屏适配
+      disableMobile: false, // 关闭竖屏适配
+      mobileConfig: {
+        viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
+        fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
+        replace: true, // 是否转换后直接更换属性值
       },
     },
   },
diff --git a/src/App.vue b/src/App.vue
index a5c0e22..96e2396 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,6 +8,9 @@
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+  }
+
+  .root-class {
     color: #2c3e50;
   }
 </style>
diff --git a/src/layout/basic/index.vue b/src/layout/basic/index.vue
index 3509773..118f8c8 100644
--- a/src/layout/basic/index.vue
+++ b/src/layout/basic/index.vue
@@ -8,7 +8,15 @@
     </RouterView>
     <RouterView v-if="!$route.meta.keepAlive" :key="$route.path" />
   </div>
-  <nut-tabbar unactive-color="#364636" active-color="#1989fa" bottom v-model="activeTab" v-show="tabbarVisible" @tab-switch="tabSwitch">
+  <nut-tabbar
+    class="tabbar-wrapper"
+    unactive-color="#364636"
+    active-color="#1989fa"
+    bottom
+    v-model="activeTab"
+    v-show="tabbarVisible"
+    @tab-switch="tabSwitch"
+  >
     <nut-tabbar-item v-for="item in tabItem" :key="item.key" :tab-title="$t(`tabbar.${item.key}`)" :icon="item.icon" />
   </nut-tabbar>
 </template>
@@ -87,4 +95,12 @@
     padding-left: 30px;
     padding-right: 30px;
   }
+
+  .tabbar-wrapper {
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    width: 100%; // 用于子元素 tabbar 的宽度
+    transform: translate(0); // 令该元素形成 tabbar 的包含块，使得 tabbar 的 fixed 定位宽度基于该元素
+  }
 </style>
