Browse Source

fix:平板适配

chenzhen2 2 years ago
parent
commit
04d684aba5

+ 0 - 6
package-lock.json

@@ -13973,12 +13973,6 @@
         }
       }
     },
-    "postcss-pxtorem": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-pxtorem/-/postcss-pxtorem-6.0.0.tgz",
-      "integrity": "sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg==",
-      "dev": true
-    },
     "postcss-reduce-initial": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz",

+ 0 - 1
package.json

@@ -91,7 +91,6 @@
     "lint-staged": "^9.5.0",
     "postcss-plugin-px2rem": "^0.8.1",
     "postcss-px2rem-exclude": "^0.0.6",
-    "postcss-pxtorem": "^6.0.0",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
     "style-loader": "^2.0.0",

+ 9 - 0
public/images/ipdImages/rectangle-fotter.svg

@@ -0,0 +1,9 @@
+<svg width="93" height="40" viewBox="0 0 93 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 40L-1.74846e-06 3.8147e-06L53 1.49799e-06C67.0013 8.85977e-07 74.002 5.79968e-07 79.3498 2.72483C84.0538 5.12167 87.8783 8.94618 90.2752 13.6502C93 18.998 93 25.9987 93 40L0 40Z" fill="url(#paint0_linear_1187_8053)"/>
+<defs>
+<linearGradient id="paint0_linear_1187_8053" x1="93" y1="27" x2="18.4726" y2="27" gradientUnits="userSpaceOnUse">
+<stop stop-color="#414141"/>
+<stop offset="1" stop-color="#282828"/>
+</linearGradient>
+</defs>
+</svg>

+ 1 - 3
public/index.html

@@ -4,9 +4,7 @@
   <meta base="/borui/">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta http-equiv="Content-Security-Policy" content="">
-  <meta name="viewport"
-        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
-  >
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
   <meta charset="utf-8">
   <title><%= htmlWebpackPlugin.options.title %></title>
 </head>

+ 4 - 3
src/main.ts

@@ -2,10 +2,11 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import { store } from './store'
-// import 'default-passive-events'
-// import 'lib-flexible'
-import { Toast, Icon, Tab, Tabs, Loading, Popup } from 'vant'
+// import 'amfe-flexible' // rem 布局适配
+// import 'amfe-flexible/index.js'
+import '@/utils/flexible.js'
 import '@/styles/index.scss'
+import { Toast, Icon, Tab, Tabs, Loading, Popup } from 'vant'
 import '@/permission'
 
 const app = createApp(App)

+ 117 - 0
src/utils/flexible.js

@@ -0,0 +1,117 @@
+;(function(win, lib) {
+    var doc = win.document;
+    var docEl = doc.documentElement;
+    var metaEl = doc.querySelector('meta[name="viewport"]');
+    var flexibleEl = doc.querySelector('meta[name="flexible"]');
+    var dpr = 0;
+    var scale = 0;
+    var tid;
+    var flexible = lib.flexible || (lib.flexible = {});
+
+    if (metaEl) {
+        console.warn('将根据已有的meta标签来设置缩放比例');
+        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
+        if (match) {
+            scale = parseFloat(match[1]);
+            dpr = parseInt(1 / scale);
+        }
+    } else if (flexibleEl) {
+        var content = flexibleEl.getAttribute('content');
+        if (content) {
+            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
+            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
+            if (initialDpr) {
+                dpr = parseFloat(initialDpr[1]);
+                scale = parseFloat((1 / dpr).toFixed(2));
+            }
+            if (maximumDpr) {
+                dpr = parseFloat(maximumDpr[1]);
+                scale = parseFloat((1 / dpr).toFixed(2));
+            }
+        }
+    }
+
+    if (!dpr && !scale) {
+        var isAndroid = win.navigator.appVersion.match(/android/gi);
+        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
+        var devicePixelRatio = win.devicePixelRatio;
+        if (isIPhone) {
+            // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
+            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
+                dpr = 3;
+            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
+                dpr = 2;
+            } else {
+                dpr = 1;
+            }
+        } else {
+            // 其他设备下,仍旧使用1倍的方案
+            dpr = 1;
+        }
+        scale = 1 / dpr;
+    }
+
+    docEl.setAttribute('data-dpr', dpr);
+    if (!metaEl) {
+        metaEl = doc.createElement('meta');
+        metaEl.setAttribute('name', 'viewport');
+        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
+        if (docEl.firstElementChild) {
+            docEl.firstElementChild.appendChild(metaEl);
+        } else {
+            var wrap = doc.createElement('div');
+            wrap.appendChild(metaEl);
+            doc.write(wrap.innerHTML);
+        }
+    }
+
+    function refreshRem(){
+        var width = docEl.getBoundingClientRect().width;
+        if (width / dpr > 1366) {
+            width = 1366 * dpr;
+        }
+        var rem = width / 10;
+        docEl.style.fontSize = rem + 'px';
+        flexible.rem = win.rem = rem;
+    }
+
+    win.addEventListener('resize', function() {
+        clearTimeout(tid);
+        tid = setTimeout(refreshRem, 300);
+    }, false);
+    win.addEventListener('pageshow', function(e) {
+        if (e.persisted) {
+            clearTimeout(tid);
+            tid = setTimeout(refreshRem, 300);
+        }
+    }, false);
+
+    if (doc.readyState === 'complete') {
+        doc.body.style.fontSize = 12 * dpr + 'px';
+    } else {
+        doc.addEventListener('DOMContentLoaded', function(e) {
+            doc.body.style.fontSize = 12 * dpr + 'px';
+        }, false);
+    }
+
+
+    refreshRem();
+
+    flexible.dpr = win.dpr = dpr;
+    flexible.refreshRem = refreshRem;
+    flexible.rem2px = function(d) {
+        var val = parseFloat(d) * this.rem;
+        if (typeof d === 'string' && d.match(/rem$/)) {
+            val += 'px';
+        }
+        return val;
+    }
+    flexible.px2rem = function(d) {
+        var val = parseFloat(d) / this.rem;
+        if (typeof d === 'string' && d.match(/px$/)) {
+            val += 'rem';
+        }
+        return val;
+    }
+
+})(window, window['lib'] || (window['lib'] = {}));

+ 34 - 3
src/views/envmonitor/index.vue

@@ -60,6 +60,10 @@
           <img :src="parseImgUrl('ipdImages', 'rectangle1.svg')" />
           <span>博锐研发中心二区 </span>
         </div>
+        <div class="fotter-item-end">
+          <img :src="parseImgUrl('ipdImages', 'rectangle-fotter.svg')" />
+          <span>…</span>
+        </div>
       </div>
     </div>
     <div class="main-right popup-content">
@@ -1682,7 +1686,7 @@ export default defineComponent({
     }
 
     .left-space {
-      padding-top: 124px;
+      padding-top: 20.6vh;
       padding-right: 80px;
       .text {
         position: relative;
@@ -1732,7 +1736,8 @@ export default defineComponent({
       }
     }
     .space-info {
-      padding-top: 48px;
+      // padding-top: 48px;
+      padding-top: 6vh;
       .space-temp {
         padding-bottom: 13px;
         border-bottom: 0.5px solid rgba(255, 255, 255, 0.4);
@@ -1785,7 +1790,8 @@ export default defineComponent({
     }
     .space-env {
       display: flex;
-      padding-top: 20px;
+      // padding-top: 20px;
+      padding-top: 5vh;
       justify-content: space-between;
       text-align: left;
       overflow: hidden;
@@ -1893,6 +1899,7 @@ export default defineComponent({
     position: fixed;
     left: 0;
     bottom: 0;
+    z-index: 666;
     .fotter-item {
       position: relative;
       display: inline-block;
@@ -1934,6 +1941,30 @@ export default defineComponent({
         white-space: nowrap; /*强制不换行*/
       }
     }
+    .fotter-item-end {
+      position:relative;
+      display: inline-block;
+      vertical-align: middle;
+      width: 93px;
+      height: 40px;
+      margin-left: -30px;
+      text-align: center;
+      img {
+        width: 100%;
+      }
+      span {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        font-family: "Noto Sans SC";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        text-align: center;
+        color: #c3c7cb;
+      }
+    }
     .fotter-item-active {
       margin-bottom: -2px;
       span {

+ 18 - 5
vue.config.js

@@ -37,18 +37,31 @@ module.exports = {
   outputDir,
   lintOnSave,
   transpileDependencies,
+  css: {
+    loaderOptions: {
+      postcss: {
+        plugins: [
+          require('postcss-px2rem-exclude')({
+            'remUnit':98,  //设计稿是750,那么这里的设置就是填750/10=75
+            'propList': ['*', '!border'],
+            'exclude': /node_modules|folder_name/i   // 解决UI库px转rem问题 配置忽略node包
+          })
+        ]
+      }
+    },
+  },
   // css: {
   //   loaderOptions: {
   //     postcss: {
   //       plugins: [
-  //         require('postcss-px2rem-exclude')({
-  //           'remUnit':37.5,  //设计稿是750,那么这里的设置就是填750/10=75
-  //           'propList': ['*', '!border'],
-  //           'exclude': /node_modules|folder_name/i   // 解决UI库px转rem问题 配置忽略node包
+  //         require('postcss-pxtorem')({ // 把px单位换算成rem单位
+  //           rootValue: 98, // vant官方使用的是37.5
+  //           selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
+  //           propList: ['*']
   //         })
   //       ]
   //     }
-  //   },
+  //   }
   // },
   devServer: {
     hot: true,