feat: 更新依赖和修改适配方案

.postcssrc.js

@@ -1,31 +1,20 @@
 // https://github.com/michael-ciniawsky/postcss-load-config
-const path = require('path')
 
-module.exports = {
-  plugins: {
-    autoprefixer: {},
-    'postcss-px-to-viewport': {
-      unitToConvert: 'px', // 要转化的单位
-      viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
-      viewportHeight: 812, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
-      unitPrecision: 6, // 指定`px`转换为视窗单位值的小数位数
-      viewportUnit: 'vw', //指定需要转换成的视窗单位，建议使用vw
-      selectorBlackList: [
-        '.van-cell',
-        '.van-button',
-        '.van-skeleton',
-        '.van-toast',
-        '.van-popup__close-icon',
-        '.van-field',
-        '.van-dropdown-menu',
-        '.van-radio',
-        '.van-swipe',
-        '.van-list',
-        '.van-dialog',
-        '.van-tabbar'
-      ], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
-      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
-      mediaQuery: false // 允许在媒体查询中转换`px`
+module.exports = ({ file }) => {
+  console.log(file)
+  return {
+    plugins: {
+      autoprefixer: {},
+      'postcss-px-to-viewport': {
+        unitToConvert: 'px', // 要转化的单位
+        viewportWidth: file.includes('vant') ? 375 : 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
+        viewportHeight: 812, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
+        unitPrecision: 6, // 指定`px`转换为视窗单位值的小数位数
+        viewportUnit: 'vw', //指定需要转换成的视窗单位，建议使用vw
+        selectorBlackList: [], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
+        minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
+        mediaQuery: false // 允许在媒体查询中转换`px`
+      }
     }
   }
 }

package.json

@@ -24,11 +24,11 @@
   "devDependencies": {
     "@babel/core": "^7.18.6",
     "@babel/eslint-parser": "^7.18.2",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-plugin-router": "~5.0.0",
-    "@vue/cli-plugin-vuex": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-router": "~5.0.8",
+    "@vue/cli-plugin-vuex": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
     "babel-eslint": "^10.1.0",
     "babel-plugin-import": "^1.13.5",
     "babel-plugin-transform-remove-console": "^6.9.4",

src/assets/css/index.scss

@@ -9,5 +9,5 @@ body .app {
 }
 
 .app-container {
-  padding-bottom: 50px;
+  padding-bottom: 100px;
 }

src/views/home/index.vue

@@ -37,18 +37,21 @@ let list = ref([
 <style lang="scss" scoped>
 .index-container {
   .warpper {
-    padding: 12px;
+    padding: 24px;
     background: #fff;
     .demo-home__title {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       margin: 0 0 6px;
-      font-size: 64px;
+      font-size: 56px;
       .demo-home__title img,
       .demo-home__title span {
         display: inline-block;
         vertical-align: middle;
       }
       img {
-        width: 32px;
+        width: 64px;
       }
       span {
         margin-left: 16px;
@@ -56,9 +59,10 @@ let list = ref([
       }
     }
     .demo-home__desc {
+      text-align: center;
       margin: 0 0 20px;
       color: rgba(69, 90, 100, 0.6);
-      font-size: 14px;
+      font-size: 28px;
     }
   }
 }