test

layouts/default.vue

@@ -18,14 +18,24 @@ export default {
   data() {
     return {
       zoom: 1,
+      deg: 0, // 旋转角度
+      right: 0,
+      position: 'relative',
       marginSceen: false,
+      isMoblie: false,
+      scale: 1,
     }
   },
   computed: {
     style() {
       const style = {}
-      const { zoom } = this
+      const { zoom, deg, right, position, scale } = 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
       return style
     },
   },
@@ -46,23 +56,98 @@ export default {
       'SetInnerHeight',
     ]),
     initSceen() {
+      const { innerWidth, } = window
+      if (process.env.NODE_ENV === 'development') {
+        // return
+      }
+      if (innerWidth > 750) {
+        this.initPcSceen()
+      } else {
+        this.initMobileSceen()
+      }
+    },
+    // 初始化pc屏幕
+    initPcSceen() {
       let zoom = 1
       const { innerWidth, innerHeight } = window
       if (innerWidth / innerHeight > 1080 / 608) {
-        console.log('比例')
         zoom = window.innerHeight / 608
         this.marginSceen = true
       } else {
         zoom = window.innerWidth / 1080
         this.marginSceen = false
       }
-      if (process.env.NODE_ENV === 'development') {
-        return
-      }
       this.SetZoom(zoom)
       // 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
+      } 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
+      }
+
+      this.SetZoom(zoom)
+      this.zoom = zoom
+      this.right = right
+      this.deg = 90
+      this.position = 'absolute'
+      this.scale = 1
     },
   },
 }