高度自适应

layouts/default.vue

 <template>
-  <div class="root">
+  <div :class="(isMoblie && marginSceen) ? 'mobile' : ''" class="root">
     <div :style="style" :class="{ margin : marginSceen }" class="sceen">
       <nuxt />
     </div>
@@ -18,24 +18,26 @@ export default {
   data() {
     return {
       zoom: 1,
-      deg: 0, // 旋转角度
-      right: 0,
-      position: 'relative',
       marginSceen: false,
       isMoblie: false,
       scale: 1,
+      top: 0,
     }
   },
   computed: {
     style() {
       const style = {}
-      const { zoom, deg, right, position, scale } = this
+      const { zoom, isMoblie, marginSceen, top, } = this
       style.zoom = zoom
-      // style.transform = `rotate(${deg}deg) scale(1.72)`
-      style.transform = `rotate(${deg}deg) scale(${scale})`
 
-      style.right = `${right}px`
-      style.position = position
+      if (isMoblie) {
+        if (!marginSceen) {
+          style.transform = `rotate(90deg) scale(1.72)`
+        } else {
+          style.transformOrigin = `0px 0px 0px`
+          style.transform = `matrix(0, 1, -1, 0, ${608 + top}, 0)`
+        }
+      }
       return style
     },
   },
@@ -62,6 +64,7 @@ export default {
       }
       if (innerWidth > 750) {
         this.initPcSceen()
+        this.isMoblie = false
       } else {
         this.initMobileSceen()
       }
@@ -81,73 +84,26 @@ export default {
       // this.SetInnerWidth(innerWidth)
       // this.SetInnerHeight(innerHeight)
       this.zoom = zoom
-      this.deg = 0
-      this.right = 0
-      this.position = 'relative'
       this.isMoblie = false
-      this.scale = 1
     },
     // 初始化移动端屏幕
     initMobileSceen() {
       let zoom = 1
       const { innerWidth, innerHeight } = window
-      // if (innerWidth / innerHeight > 1080 / 608) {
-      //   zoom = window.innerHeight / 608
-      //   this.marginSceen = false
-      // } else {
-      //   zoom = window.innerWidth / 1080
-      //   this.marginSceen = false
-      // }
       if (innerHeight / innerWidth > 1080 / 608) {
         zoom = window.innerWidth / 1080
-        console.log(1)
         this.SetZoom(zoom)
         this.zoom = zoom
-        this.deg = 90
-        this.position = 'relative'
-        this.isMoblie = true
-        this.right = 0
-        this.scale = 1.72
+        this.marginSceen = false
       } else {
         zoom = window.innerHeight / 1080
-        console.log(2)
         this.SetZoom(zoom)
         this.zoom = zoom
-        this.deg = 90
-        this.position = 'relative'
-        this.isMoblie = false
-        this.right = 0
-        this.scale = 1
-        // this.initMobileSceen2()
-      }
-
-      // this.position = 'absolute'
-    },
-    // 初始化移动端屏幕
-    initMobileSceen2() {
-      let zoom = 1
-      let right = 0
-      const { innerWidth, innerHeight } = window
-      if (innerHeight / innerWidth > 1080 / 608) {
-        console.log(1)
-        zoom = window.innerWidth / 608
-        this.marginSceen = false
-
-        right = 363
-      } else {
-        console.log(2)
-        zoom = window.innerHeight / 1080
         this.marginSceen = true
-
-        right = (1080 / window.innerWidth * 200) - innerHeight / 0.5 + 608 * 2
+        const top = (innerWidth - (608 / 1080) * innerHeight)
+        this.top = top
       }
-
-      this.SetZoom(zoom)
-      this.zoom = zoom
-      this.right = right
-      this.deg = 90
-      this.position = 'absolute'
-      this.scale = 1
+      this.isMoblie = true
     },
   },
 }
@@ -165,6 +121,15 @@ export default {
     flex-direction: column;
     justify-content: center;
     background: black;
+    &.mobile {
+      justify-content: initial;
+      .sceen {
+        &.margin {
+          margin-left: inherit;
+          margin-right: inherit;
+        }
+      }
+    }
   }
   .sceen {
     width: 1080px;