大屏适配优化心灵照相机2

package.json

@@ -52,6 +52,7 @@
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "node-sass": "^4.14.1",
+    "postcss-pxtorem": "^5.1.1",
     "sass-loader": "^7.3.1",
     "terser-webpack-plugin": "^4.2.3",
     "uglifyjs-webpack-plugin": "^2.2.0",

postcss.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    'plugins': {
+      // to edit target browsers: use "browserslist" field in package.json
+      'autoprefixer': {},
+      'postcss-pxtorem': {
+        rootValue: 16, // 结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
+        propList: ['*']
+      }
+    }
+  }

src/App.vue

@@ -23,12 +23,13 @@ export default {
   },
 
   mounted() {
-    autofit.init({
-      // designHeight: 1080,
-      // designWidth: 988,
-      renderDom: "#app",
-      resize: true
-    })
+    // autofit.init({
+    //   // designHeight: 1080,
+    //   // designWidth: 988,
+    //   renderDom: "#app",
+    //   resize: true,
+    //   // ignore: [".el-select"],
+    // })
 
   },
   methods: {
@@ -80,6 +81,20 @@ body {
   } */
 }
 
+/* min-width: 182.28px;
+    position: absolute;
+    top: 150px;
+    left: 450px;
+    transform-origin: center top;
+    z-index: 2018; */
+.el-select-dropdown .el-popper {
+  position: absolute;
+  top: 150px !important;
+  left: 220px !important;
+  transform-origin: center top;
+  z-index: 2018;
+}
+
 #nav {
   padding: 30px;
 }

src/components/DateSelect.vue

@@ -23,7 +23,6 @@
 </template>
 
 <script>
-import autofit from 'autofit.js'
 
 export default {
   name: "DateSelect",
@@ -56,16 +55,6 @@ export default {
     // }
   },
   mounted() {
-    autofit.init({
-      ignore: [
-        {
-          // dom: "#myDate", //必填
-          // height: 300,//可选，写数字即可（px）
-          // width: 300,//可选，写数字即可（px）
-          // scale: 1.2, //可选：回放程度，基于主元素缩放后的大小
-          // fontSize: 26 //可选，如果自定义缩放后文字大小不合适，可以在这里设置文字大小
-        },]
-    })
 
     if (this.yearsModelPrants && this.yearsModelPrants != '') {
       this.yearsModel = Number(this.yearsModelPrants.split("-")[0]);

src/components/login/Login.vue

@@ -57,8 +57,8 @@
       </div>
     </div>
     <!-- 用户注册弹窗 -->
-    <el-dialog v-show="registShow" title="用户注册" :visible.sync="registShow" width="65%" @closed="closeDialog"
-      @open='openDialog' :close-on-click-modal="false">
+    <el-dialog :append-to-body="false" v-show="registShow" title="用户注册" :visible.sync="registShow" width="65%"
+      @closed="closeDialog" @open='openDialog' :close-on-click-modal="false">
       <div class="grid-content bg-purple-dark">
         <!-- 创建表单进行表单校验 -->
         <el-form :model="userInfo" :rules="rules" ref="userInfo" label-width="100px" class="demo-ruleForm">
@@ -189,7 +189,7 @@
 import "element-ui/lib/theme-chalk/display.css";
 import DateSelect from "../DateSelect.vue";
 import { mapActions } from "vuex";
-// import autofit from 'autofit.js'
+import autofit from 'autofit.js'
 
 
 export default {
@@ -407,7 +407,7 @@ export default {
   },
   created() { },
   mounted() {
-    // autofit.off()
+    autofit.off()
   },
   methods: {
     ...mapActions({
@@ -637,10 +637,10 @@ export default {
 <style scoped="scoped">
 .bg {
   width: 100%;
-  display: flex;
-  flex-direction: column;
-  /* min-height: 100vh; */
-  height: 100%;
+  /* display: flex; */
+  /* flex-direction: column; */
+  min-height: 100vh;
+  /* height: 100%; */
   background-image: url('~@/assets/bg-login1.png');
   background-size: 100% 100%;
   background-repeat: no-repeat;

src/components/manage/main/AdminHome.vue

@@ -145,7 +145,14 @@ import IndexSmallPie from "../../echarts/IndexSmallPie.vue"
 import IndexSmoothLine from "../../echarts/IndexSmoothLine.vue"
 import IndexBar from "../../echarts/IndexBar.vue"
 import { roundToFixed } from "../../../utils/utils"
-
+import autofit from 'autofit.js'
+// autofit.init({
+//   // designHeight: 1080,
+//   // designWidth: 988,
+//   renderDom: "#app",
+//   resize: true,
+//   // ignore: [".el-select"],
+// })
 export default {
   name: "AdminHome",
   components: {
@@ -200,6 +207,13 @@ export default {
   async mounted() {
     let tempDom = document.querySelector('#bottomTableOutline')
     this.$nextTick(() => {
+      autofit.init({
+        // designHeight: 1080,
+        // designWidth: 988,
+        renderDom: ".app-container",
+        resize: true,
+        // ignore: [".el-select"],
+      })
       this.tableHeight = tempDom.offsetHeight - 62
     })
 
@@ -349,8 +363,8 @@ export default {
     riskChangeChart() {
       return new Promise((resolve, reject) => {
         this.$http.get(`/index/riskChangeChart?institutionNo=${this.institutionNo}`, {}, (res) => {
-          console.log(res,'=====================================res教育局');
-          
+          console.log(res, '=====================================res教育局');
+
           resolve(res.data)
         })
       })
@@ -364,7 +378,11 @@ export default {
         })
       })
     }
-  }
+  },
+destroyed(){
+  console.log('销毁');
+  autofit.off()
+}
 }
 </script>
 

src/components/manage/main/AdminHomeS.vue

@@ -190,20 +190,20 @@ export default {
     this.userType = sessionStorage.getItem("f7a42fe7211f98ac7a60a285ac3a9528")
   },
   async mounted() {
-    autofit.init({
-      // designHeight: 1080,
-      // designWidth: 1920,
-      // renderDom: "#homeapp",
-      // resize: true
-    })
+
 
     // this.setScale();
     // window.addEventListener("resize", this.debounce(this.setScale));
     let tempDom = document.querySelector('#bottomTableOutline')
     this.$nextTick(() => {
       console.log(tempDom.offsetHeight);
-      
-      this.tableHeight = tempDom.offsetHeight 
+      autofit.init({
+        // designHeight: 1080,
+        // designWidth: 1920,
+        renderDom: "#homeapp",
+        resize: true
+      })
+      this.tableHeight = tempDom.offsetHeight
       this.$forceUpdate()
     })
 
@@ -262,6 +262,10 @@ export default {
     // this.riskChangeData = await this.riskChangeChart()
     this.mapData = await this.psychologicalRiskMap()
   },
+  destroyed() {
+    console.log('组件销毁');
+    autofit.off()
+  },
   methods: {
     //     debounce(fn, delay) {
     //       const delays = delay || 500;
@@ -595,7 +599,7 @@ export default {
         overflow: hidden;
         margin-top: 10px;
         margin-left: 10px;
-        min-width: calc(100% - 21px);
+        min-width: calc(100% - 41px);
         height: 25%;
         // padding: 10px 0 0 10px;
         background: #FFFFFF;

src/components/manage/main/SacleUserList.vue

@@ -24,6 +24,7 @@
       >
       </el-date-picker>
       <el-select
+      :append-to-body="false"
         v-model="groupValue"
         @change="onSubmit"
         placeholder="年级选择"

src/components/manage/main/UserRecords.vue

@@ -3,6 +3,7 @@
     <div>
       <div class="headerRow">
         <el-select
+        :append-to-body="false"
           v-model="groupValue"
           @change="onSubmit"
           placeholder="年级选择"

src/lib/rem.js

@@ -0,0 +1,17 @@
+// 设置 rem 函数
+function setRem() {
+    // 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16
+    const screenWidth = 1920
+    const scale = screenWidth / 16
+    const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
+    // 得到html的Dom元素
+    const htmlDom = document.getElementsByTagName('html')[0]
+    // 设置根元素字体大小
+    htmlDom.style.fontSize = htmlWidth / scale + 'px'
+  }
+  // 初始化
+  setRem()
+  // 改变窗口大小时重新设置 rem
+  window.onresize = function() {
+    setRem()
+  }

src/main.js

@@ -19,7 +19,7 @@ import * as echarts from "echarts";
 import store from "./store/index";
 import { mapGetters, mapActions } from "vuex";
 import myMixin from "@/mixin/myMixin";
-
+// import '@/lib/rem.js'
 Vue.use(Radio);
 Vue.use(RadioGroup);
 Vue.use(Vant);

src/views/Welcome.vue

@@ -27,7 +27,7 @@
             <i class="el-icon-arrow-down el-icon--right"></i>
           </span>
           <!-- :popper-append-to-body="false" :append-to-body="false" -->
-          <el-dropdown-menu class="selectTab" slot="dropdown">
+          <el-dropdown-menu class="selectTab" :popper-append-to-body="false" :append-to-body="false" slot="dropdown">
             <el-dropdown-item v-show="typeTabShow" command="1">记录查看
             </el-dropdown-item>
             <el-dropdown-item v-show="typeTabShow" command="2">修改密码
@@ -147,6 +147,7 @@
 import { oSessionStorage } from "../utils/utils";
 import screenfull from "screenfull";
 import { mapGetters, mapActions } from "vuex";
+import autofit from 'autofit.js'
 export default {
   computed: {
     ...mapGetters({
@@ -291,6 +292,13 @@ export default {
   },
   // 页面初始化函数
   mounted() {
+    // autofit.off()
+    autofit.init({
+      // designHeight: 1080,
+      // designWidth: 1920,
+      renderDom: "#app",
+      resize: true
+    })
     this.institutionNo = sessionStorage.getItem(
       "f7a42fe7211f98ac7a60a285ac3a9527"
     );