Merge branch 'master' into kdwc-web

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <!--<dv-full-screen-container id="app">-->
+  <!--<dv-full-screen-container style="display: flex;flex-direction: column;height:1080px;width:1920px;">-->
   <div id="app">
     <router-view />
   </div>
@@ -7,26 +7,50 @@
 </template>
 
 <script>
-export default  {
-  name:  'App',
+  export default  {
+    name:  'App',
+    data() {
+      return {
+        windowHeight:"",
+        desktopHeight:"",
+        desktopWidth:"",
+      }
+    },
     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
+        },
+      }
+    },
+    mounted(){
+      document.getElementById('app').style.transform = `scale(${document.body.clientWidth / 1920})`;
+      document.getElementById('app').style.height = (window.innerHeight/(document.body.clientWidth / 1920*100))*100+'px';
+      console.log("document.getElementById('app').style.height",document.getElementById('app').style.height)
+      window.onresize = () => {
+        return (() => {
+          document.getElementById('app').style.transform = `scale(${document.body.clientWidth / 1920})`;
+          document.getElementById('app').style.height = (window.innerHeight/(document.body.clientWidth / 1920*100))*100+'px';
+          console.log("document.getElementById('app').style.height",document.getElementById('app').style.height)
+        })();
+      };
+    },
+  }
 </script>
 <style>
   html,body{
     margin:0;
     height:100%;
     width:100%;
+    overflow: hidden;
   }
   #app{
-    height:100%!important;
-    width:100%!important;
+    /*height:1080px;*/
+    width:1920px;
+    transform-origin: left top;
+    display: flex;
+    flex-direction: column;
+    flex:1;
   }
 </style>

src/utils/devicePixelRatio.js

@@ -0,0 +1,57 @@
+class DevicePixelRatio {
+  constructor() {
+    // this.flag = false;
+  }
+  // 获取系统类型
+  _getSystem() {
+    // let flag = false;
+    var agent = navigator.userAgent.toLowerCase();
+    //		var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
+    //		if(isMac) {
+    //			return false;
+    //		}
+    // 现只针对windows处理，其它系统暂无该情况，如有，继续在此添加
+    if (agent.indexOf('windows') >= 0) {
+      return true;
+    }
+  }
+  // 获取页面缩放比例
+  //	_getDevicePixelRatio() {
+  //		let t = this;
+  //	}
+  // 监听方法兼容写法
+  _addHandler(element, type, handler) {
+    if (element.addEventListener) {
+      element.addEventListener(type, handler, false);
+    } else if (element.attachEvent) {
+      element.attachEvent('on' + type, handler);
+    } else {
+      element['on' + type] = handler;
+    }
+  }
+  // 校正浏览器缩放比例
+  _correct() {
+    let t = this;
+    // 页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。
+    document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio;
+  }
+  // 监听页面缩放
+  _watch() {
+    let t = this;
+    t._addHandler(window, 'resize', function() { // 注意这个方法是解决全局有两个window.resize
+      // 重新校正
+      t._correct()
+    })
+  }
+  // 初始化页面比例
+  init() {
+    let t = this;
+    if (t._getSystem()) { // 判断设备，目前只在windows系统下校正浏览器缩放比例
+      // 初始化页面校正浏览器缩放比例
+      t._correct();
+      // 开启监听页面缩放
+      t._watch();
+    }
+  }
+}
+export default DevicePixelRatio;

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>