屏幕逻辑优化

layouts/default.vue

@@ -41,7 +41,15 @@ export default {
     }),
     initSceen() {
       let zoom = 1
+      const { innerWidth, innerHeight } = window
+      console.log('innerWidth', innerWidth)
+      console.log('innerHeight', innerHeight)
+      if (innerWidth / innerHeight > 1080 / 608) {
+        console.log('比例')
+        zoom = window.innerHeight / 608
+      } else {
         zoom = window.innerWidth / 1080
+      }
       this.zoom = zoom
     },
   },
@@ -65,5 +73,7 @@ export default {
     width: 1080px;
     height: 608px;
     position: relative;
+    margin-left: auto;
+    margin-right: auto;
   }
 </style>

pages/index.vue

@@ -48,9 +48,11 @@ export default {
 <style lang="scss" scoped>
 .main-layout {
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 .main-content {
-  height: 100%;
+  flex: 1;
   overflow: auto;
 }
 </style>