修改App.vue

runner @ 9ce9836f

-Subproject commit 25a10e17bcef2d7bb93902088f9f46371801e0d5
+Subproject commit 9ce9836f46d3271f3f82ad8011b90c838afa4d6c

src/App.vue

 <template>
-    <div id="app">
+    <div id="app"
+        :style="{width: designWidth + 'px', height: designHeight + 'px'}"
+    >
         <router-view></router-view>
     </div>
 </template>
 
 <script>
-import { refreshScale } from 'runner/common/utils/refreshSize'
-import utils from 'utils'
+import setScale from 'runner/common/utils/refreshSize'
 
 export default {
     name: 'app',
 
+    mixins: [setScale],
+
     data () {
         return {
-            designWidth: 3840, // 设计稿宽度
-            designHeight: 2160 // 设计稿高度
+            designWidth: 1920, // 设计稿宽度
+            designHeight: 1080 // 设计稿高度
         }
     },
 
@@ -23,31 +26,14 @@ export default {
         bodyStyle.overflow = 'auto'
 
         // 如无需设置自动适配则注释该方法即可
-        this.initScale()
+        this.initScale(this.designWidth, this.designHeight)
     },
 
-    methods: {
-        /**
-         * @method initScale 设置页面缩放事件
-         */
-        initScale () {
-            const appStyle = document.getElementById('app').style
-            appStyle.position = 'fixed'
-            refreshScale(this.designWidth, this.designHeight)
-
-            // 窗口缩放时重新做适配
-            window.addEventListener('resize', utils.throttle(() => {
-                refreshScale(this.designWidth, this.designHeight)
-            }, false))
-        }
-    }
+    methods: {}
 }
 </script>
 
 <style lang="less">
-@designWidth: 1920px;
-@designHeight: 1080px;
-
 body {
     background-color: #011428;
 }
@@ -57,11 +43,8 @@ body {
     left: 50%;
     right: 0;
     bottom: 0;
-    width: @designWidth;
-    height: @designHeight;
     overflow: hidden;
     user-select: none;
-    background-size: @designWidth @designHeight;
     background-position: center bottom;
 }
 </style>