大屏缩放问题

package.json

@@ -33,6 +33,8 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
+    "@jiaminghi/data-view": "^2.10.0",
+    "autofit.js": "^3.1.1",
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.22.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",

src/App.vue

@@ -4,6 +4,7 @@
   </div>
 </template>
 <script>
+import autofit from 'autofit.js'
 export default {
   name: 'app',
   created() {
@@ -17,6 +18,14 @@ export default {
     link.href = require('./assets/img/myImage/logo.png')
     document.getElementsByTagName('head')[0].appendChild(link)
   },
+  mounted() {
+    autofit.init({
+      designHeight: 1080, //高度
+      designWidth: 1920, //宽度
+      renderDom: '#app',
+      resize: true,
+    })
+  },
 
   watch: {
     $route: {
@@ -34,16 +43,14 @@ export default {
 <style lang="less">
 .el-dialog {
   // 背景色透明
-  background-color: rgba(0, 0, 0, 0.5);
-  // background-color: transparent;
-  // background-color: #000;
-  background-image: url('./assets/img/dialog/window.png');
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
+  background: rgba(0, 0, 0, 0.5) !important;
+  background-image: url('./assets/img/dialog/window.png') !important;
+  background-size: 100% 100% !important;
+  background-repeat: no-repeat !important;
   .el-dialog__headerbtn {
     width: 83px;
     height: 44px;
-    background-image: url('./assets/img/dialog/icon_close.png');
+    background-image: url('./assets/img/dialog/icon_close.png') !important;
     background-size: cover;
     // 去除原来的 x 按钮
     .el-dialog__close {
@@ -51,83 +58,83 @@ export default {
     }
   }
   .el-form-item__label {
-    color: #fff;
+    color: #fff !important;
   }
 
   .el-table th {
     // #253855  #30619B 背景色从上到下渐变
-    background: linear-gradient(to bottom, #2b313d, #3267a7);
-    color: #fff;
+    background: linear-gradient(to bottom, #2b313d, #3267a7) !important;
+    color: #fff !important;
     border-bottom: 1px solid #84fcfd !important;
   }
   .el-table tr {
-    background-color: #335684;
-    color: #fff;
+    background-color: #335684 !important;
+    color: #fff !important;
   }
   .el-table--striped .el-table__body tr.el-table__row--striped td {
-    background-color: #25447d;
-    color: #fff;
+    background-color: #25447d !important;
+    color: #fff !important;
   }
   .el-table td,
   .building-top .el-table th.is-leaf {
-    border-bottom: 1px solid #6983a5;
+    border-bottom: 1px solid #6983a5 !important;
   }
   .el-table::before {
-    border-bottom: 1px solid #6983a5;
-    background-color: #6983a5;
-    height: 1px;
+    border-bottom: 1px solid #6983a5 !important;
+    background-color: #6983a5 !important;
+    height: 1px !important;
   }
   .el-table--enable-row-hover .el-table__body tr:hover > td {
-    background-color: #6983a5;
+    background-color: #6983a5 !important;
   }
   .el-pagination__total {
-    color: #e1e3e6;
+    color: #e1e3e6 !important;
   }
   .el-pagination__jump {
-    color: #e1e3e6;
+    color: #e1e3e6 !important;
   }
   .el-input__inner {
-    background-color: transparent;
-    border: 1px solid #77e2e7;
-    color: #e1e3e6;
+    background-color: transparent !important;
+    border: 1px solid #77e2e7 !important;
+    color: #e1e3e6 !important;
   }
   .el-pagination__sizes .el-input .el-input__inner {
-    color: #e3e4e7;
-    border: 1px solid #e3e4e7;
+    color: #e3e4e7 !important;
+    border: 1px solid #e3e4e7 !important;
   }
   .el-pagination__editor.el-input .el-input__inner {
-    color: #e3e4e7;
-    border: 1px solid #e3e4e7;
+    color: #e3e4e7 !important;
+    border: 1px solid #e3e4e7 !important;
   }
   .el-pagination.is-background .btn-prev,
   .el-pagination.is-background .el-pager li {
-    color: #e3e4e7;
-    border: 1px solid #e3e4e7;
-    background-color: transparent;
+    color: #e3e4e7 !important;
+    border: 1px solid #e3e4e7 !important;
+    background-color: transparent !important;
   }
   .el-pagination.is-background .btn-next {
-    color: #e3e4e7;
-    border: 1px solid #e3e4e7;
-    background-color: transparent;
+    color: #e3e4e7 !important;
+    border: 1px solid #e3e4e7 !important;
+    background-color: transparent !important;
   }
   .el-pagination.is-background .el-pager li:not(.disabled).active {
-    background-color: #98f4fb;
-    color: #000;
+    background-color: #98f4fb !important;
+    color: #000 !important;
   }
   .el-button--primary {
-    background-color: #84fcfd;
-    border: #84fcfd;
-    color: #285050;
+    background-color: #84fcfd !important;
+    border: #84fcfd !important;
+    color: #285050 !important;
   }
   .el-button--default {
-    background-color: transparent;
-    border: 1px solid #84fcfd;
-    color: #d5d6da;
+    background-color: transparent !important;
+    border: 1px solid #84fcfd !important;
+    color: #d5d6da !important;
   }
   .el-table__empty-block {
-    background-color: #335684;
+    background-color: #335684 !important;
     .el-table__empty-text {
-      color: #d5d6da;
+      color: #d5d6da !important;
     }
   }
 }

src/views/newHome/index.vue

@@ -266,8 +266,8 @@ export default {
 
 <style scoped lang="less">
 .screen-container {
-  width: 1920px;
-  height: 1080px;
+  width: 100%;
+  height: 100%;
   background: url(../../assets/img/myImage/screenBg.png) no-repeat center;
   background-size: 100% 100%;
   color: #fff;
@@ -291,7 +291,7 @@ export default {
   // display: flex;
   .screen-left,
   .screen-right {
-    width: 25%;
+    width: 23%;
     margin-top: 87px;
     height: calc(100% - 87px);
     display: flex;
@@ -370,7 +370,7 @@ export default {
   }
 
   .screen-center {
-    width: 50%;
+    width: 54%;
     height: 30%;
     position: absolute;
     bottom: 0;