【编号:13566】看板优化

FTT.Board.VueUI/.postcssrc.js

@@ -5,6 +5,20 @@ module.exports = {
     "postcss-import": {},
     "postcss-url": {},
     // to edit target browsers: use "browserslist" field in package.json
-    "autoprefixer": {}
+    "autoprefixer": {},
+    "postcss-pxtorem": { 
+      rootValue: 192,
+      propList: ['*'],
+      exclude:function(file){
+        if (/src(\\|\/)views(\\|\/)board(\\|\/)workShopList(\\|\/)kanbanView/.test(file) || /src(\\|\/)views(\\|\/)board(\\|\/)workShopList(\\|\/)kanbanViewCX/.test(file)) {
+          return false;
+        }
+        return true;
+      }
+      // exclude:function(file){
+      //   console.log
+      //   return
+      // }
+    }
   }
 }

FTT.Board.VueUI/package.json

@@ -14,6 +14,7 @@
     "echarts": "^4.2.1",
     "element-ui": "^2.11.1",
     "moment": "^2.24.0",
+    "postcss-px2rem-exclude": "0.0.6",
     "swiper": "^6.3.5",
     "uglifyjs-webpack-plugin": "^1.0.0",
     "vue": "^2.5.2",
@@ -48,6 +49,7 @@
     "portfinder": "^1.0.13",
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.8",
+    "postcss-pxtorem": "^5.1.1",
     "postcss-url": "^7.2.1",
     "rimraf": "^2.6.0",
     "sass-loader": "^7.3.1",

FTT.Board.VueUI/src/function/rem.js

+// 基准大小
+const baseSize = 192 //跟postcss.config.js中rootValue的值是一致的
+// 设置 rem 函数
+function setRem () {
+ // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
+ const scale = document.documentElement.clientWidth / 1920
+ // 设置页面根节点字体大小
+ document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
+}
+// 初始化
+setRem()
+// 改变窗口大小时重新设置 rem
+window.onresize = function () {
+ setRem()
+}
\ No newline at end of file

FTT.Board.VueUI/src/main.js

@@ -5,6 +5,8 @@ import App from './App'
 import router from './router'
 import './assets/font/iconfont.css'
 import axios from 'axios'
+// import './function/rem.js'
+
 // axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
 axios.defaults.headers.post['Content-Type'] = "application/json; charset=UTF-8";
 Vue.prototype.axios = axios

FTT.Board.VueUI/src/views/board/workShopList/kanbanView.vue

@@ -165,6 +165,21 @@ export default {
     }
   },
   mounted() {
+    // 基准大小
+    const baseSize = 192 //跟postcss.config.js中rootValue的值是一致的
+    // 设置 rem 函数
+    function setRem () {
+    // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
+    const scale = document.documentElement.clientWidth / 1920
+    // 设置页面根节点字体大小
+    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
+    }
+    // 初始化
+    setRem()
+    // 改变窗口大小时重新设置 rem
+    window.onresize = function () {
+    setRem()
+    }
     this.loadData();
     this.timer = window.setInterval(() => {
       this.loadData();
@@ -309,6 +324,9 @@ export default {
 };
 </script>
 <style scoped>
+img{
+  display: block;
+}
 .main_view {
   /* width: 100%; */
   height: 100%;
@@ -624,4 +642,12 @@ export default {
   margin-top: 32px;
   height: auto;
 }
+/* @media screen and (max-width: 1024px) {
+  .main_view{
+    transform: scaleX(0.54) scaleY(0.71111) translateX(-44%) translateY(0%);
+  }
+} */
+/* @media screen and (min-width: 1024px) {
+
+} */
 </style>

FTT.Board.VueUI/src/views/board/workShopList/kanbanViewCX.vue

@@ -172,6 +172,21 @@ export default {
     }
   },
   mounted() {
+    // 基准大小
+    const baseSize = 192 //跟postcss.config.js中rootValue的值是一致的
+    // 设置 rem 函数
+    function setRem () {
+    // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
+    const scale = document.documentElement.clientWidth / 1920
+    // 设置页面根节点字体大小
+    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
+    }
+    // 初始化
+    setRem()
+    // 改变窗口大小时重新设置 rem
+    window.onresize = function () {
+    setRem()
+    }
     this.loadData();
     this.loadDataLeft();
     this.timer = window.setInterval(() => {
@@ -376,6 +391,9 @@ export default {
 };
 </script>
 <style scoped>
+img {
+  display: block;
+}
 .main_view {
   /* width: 100%; */
   height: 100%;