feat(framework) adapt h5

ruoyi-ui/package-lock.json

@@ -7607,7 +7607,7 @@
     },
     "klona": {
       "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz",
+      "resolved": "https://registry.npmmirror.com/klona/-/klona-2.0.5.tgz",
       "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==",
       "dev": true
     },
@@ -10024,6 +10024,16 @@
         "postcss": "^7.0.0"
       }
     },
+    "postcss-px-to-viewport": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz",
+      "integrity": "sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==",
+      "dev": true,
+      "requires": {
+        "object-assign": ">=4.0.1",
+        "postcss": ">=5.0.2"
+      }
+    },
     "postcss-reduce-initial": {
       "version": "4.0.3",
       "resolved": "https://registry.npm.taobao.org/postcss-reduce-initial/download/postcss-reduce-initial-4.0.3.tgz",
@@ -10820,7 +10830,7 @@
     },
     "sass-loader": {
       "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.1.1.tgz",
+      "resolved": "https://registry.npmmirror.com/sass-loader/-/sass-loader-10.1.1.tgz",
       "integrity": "sha512-W6gVDXAd5hR/WHsPicvZdjAWHBcEJ44UahgxcIE196fW2ong0ZHMPO1kZuI5q0VlvMQZh32gpv69PLWQm70qrw==",
       "dev": true,
       "requires": {
@@ -10833,13 +10843,13 @@
       "dependencies": {
         "@types/json-schema": {
           "version": "7.0.11",
-          "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
+          "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz",
           "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
           "dev": true
         },
         "loader-utils": {
           "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
           "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
           "dev": true,
           "requires": {
@@ -10850,7 +10860,7 @@
         },
         "lru-cache": {
           "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
           "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
           "dev": true,
           "requires": {
@@ -10859,7 +10869,7 @@
         },
         "schema-utils": {
           "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-3.1.1.tgz",
           "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
           "dev": true,
           "requires": {
@@ -10870,7 +10880,7 @@
         },
         "semver": {
           "version": "7.3.8",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+          "resolved": "https://registry.npmmirror.com/semver/-/semver-7.3.8.tgz",
           "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
           "dev": true,
           "requires": {
@@ -10879,7 +10889,7 @@
         },
         "yallist": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
           "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
           "dev": true
         }

ruoyi-ui/package.json

@@ -75,6 +75,7 @@
     "eslint": "7.15.0",
     "eslint-plugin-vue": "7.2.0",
     "lint-staged": "10.5.3",
+    "postcss-px-to-viewport": "^1.1.1",
     "runjs": "4.4.2",
     "sass": "1.32.13",
     "sass-loader": "10.1.1",

ruoyi-ui/src/base.scss

@@ -0,0 +1,35 @@
+// vue 兼容h5样式配置
+// base.scss
+$maxWidth: 540px;
+@mixin MaxWidth {
+  @media screen and (min-width: 540px) {
+    @content;
+  }
+}
+
+@mixin MaxWidth-center {
+  @media screen and (min-width: 540px) {
+    max-width: $maxWidth;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+html {
+  margin: auto;
+  max-width: $maxWidth;
+  height: 100%;
+  font-size: 10vw;
+  // background: #ccc;
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  @include MaxWidth() {
+    font-size: calc((#{$maxWidth} - 17px) / 10);
+  }
+}
+body {
+  margin: auto;
+  max-width: $maxWidth;
+  height: 100%;
+  font-size: 16px;
+  -webkit-text-size-adjust: none !important;
+
+}

ruoyi-ui/vue.config.js

@@ -114,5 +114,34 @@ module.exports = {
           }
         }
       )
+  },
+  // vue 兼容h5样式配置
+  css: {
+    loaderOptions: {
+      sass: {
+        additionalData: `@import "~@/base.scss";`
+      },
+      postcss: {
+        plugins: [
+          require('autoprefixer')({ overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] }),
+          require('postcss-px-to-viewport')({
+            unitToConvert: 'px',
+            viewportWidth: 7500,
+            unitPrecision: 5,
+            propList: ['*', '!max-width'],
+            viewportUnit: 'rem',
+            fontViewportUnit: 'rem',
+            selectorBlackList: ['html'],
+            minPixelValue: 1,
+            mediaQuery: false,
+            replace: true,
+            exclude: [/node_modules/],
+            landscape: false,
+            landscapeUnit: 'vw',
+            landscapeWidth: 568
+          })
+        ]
+      }
+    }
   }
 }