zc

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <!--<dv-full-screen-container style="display: flex;flex-direction: column;flex:1;">-->
+  <!--<dv-full-screen-container style="height:100%!important;">-->
     <div id="app">
       <router-view />
     </div>
@@ -7,30 +7,102 @@
 </template>
 
 <script>
-  import DevicePixelRatio from '@/utils/devicePixelRatio'
+  // import DevicePixelRatio from '@/utils/devicePixelRatio'
   export default  {
     name:  'App',
+    data() {
+      return {
+        windowHeight:"",
+        desktopHeight:"",
+        desktopWidth:"",
+        color: 'red'
+      }
+    },
     metaInfo() {
-        return {
-            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
-            titleTemplate: title => {
-                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
-            }
-        }
+      return {
+        title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
+        titleTemplate: title => {
+          return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
+        },
+      }
+    },
+    // created() {
+    //   new DevicePixelRatio().init()
+    // },
+    mounted(){
+      let cssText1 = '.el-dialog{transform:scale('+document.documentElement.clientWidth / 1920+')}'
+      let cssText2 = '.el-message-box{transform:scale('+document.documentElement.clientWidth / 1920+')}'
+      let cssText3 = '.el-tooltip__popper{transform:scale('+document.documentElement.clientWidth / 1920+')}'
+      this.insertCSS(cssText1);
+      this.insertCSS(cssText2);
+      this.insertCSS(cssText3);
+      document.getElementById('app').style.transform = `scale(${document.documentElement.clientWidth / 1920})`;
+      document.getElementById('app').style.height = (window.innerHeight/(document.documentElement.clientWidth / 1920*100))*100+'px';
+      window.onresize = () => {
+        return (() => {
+          document.getElementById('app').style.transform = `scale(${document.documentElement.clientWidth / 1920})`;
+          document.getElementById('app').style.height = (window.innerHeight/(document.documentElement.clientWidth / 1920*100))*100+'px';
+        })();
+      };
     },
-    created() {
-      new DevicePixelRatio().init()
+    methods:{
+      insertCSS (cssStyle) {
+        var style = document.createElement("style");
+        var theHead = document.head || document.getElementsByTagName('head')[0];
+        style.type = "text/css"; //IE需要设置
+        if (style.styleSheet) { //IE
+          var ieInsertCSS = function() {
+            try {
+              style.styleSheet.cssText = cssStyle;
+            } catch (e) {}
+          };
+          //若当前styleSheet不能使用，则放到异步中
+          if (style.styleSheet.disable) {
+            setTimeout(ieInsertCSS, 10);
+          } else {
+            ieInsertCSS();
+          }
+        } else { //W3c浏览器
+          style.appendChild(document.createTextNode(cssStyle));
+          theHead.appendChild(style);
+        }
+      }
     }
   }
 </script>
 <style>
-  html,body{
+  html{
+    margin:0;
+    padding:0;
+    height:100%;
+    width:100%;
+    overflow: hidden;
+  }
+  body{
     margin:0;
+    padding:0;
     height:100%;
     width:100%;
+    overflow: hidden;
+    /*height:1080px;*/
+    /*width:1920px;*/
+    /*transform-origin: left top;*/
+    /*display: flex;*/
+    /*flex-direction: column;*/
+    /*flex:1;*/
   }
   #app{
-    height:100%!important;
-    width:100%!important;
+    transform-origin: left top;
+    width:1920px;
+    display: flex;
+    flex-direction: column;
+    flex:1;
+  }
+  body::-webkit-scrollbar{ display: none; }
+  .v-modal{
+    display: none;
+  }
+  .el-drawer__container,.el-dialog__wrapper,.el-message-box__wrapper{
+    background: rgba(0,0,0,0.4);
   }
 </style>

src/views/home.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home" :class="userType != 22&&initPage == 'true' ? 'home-class' : ''">
     <!--<div class="button-max-box" v-if="userType != '22'">-->
-    <dv-full-screen-container v-if="userType != '22'&&initPage == 'true'" style="display: flex;flex-direction: column;flex:1;">
+    <!--<dv-full-screen-container v-if="userType != '22'&&initPage == 'true'" style="display: flex;flex-direction: column;flex:1;">-->
       <home-navbar />
       <div class="max-big-home-box">
         <div class="max-home-button-box">
@@ -162,8 +162,8 @@
           </div>
         </div>
       </div>
-      <div class="bottom-null-box"></div>
-    </dv-full-screen-container>
+      <!--<div class="bottom-null-box"></div>-->
+    <!--</dv-full-screen-container>-->
     <backAnimation v-if="userType != '22'&&initPage == 'true'"></backAnimation>
   </div>
 </template>