移动端适配调整

components/dialog/user-dialog/tab.vue

@@ -5,7 +5,7 @@
         <img v-if="tabIndex === index" class="tab-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%2019.png" alt="">
         <img v-else class="tab-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/last_game%20%E6%8B%B7%E8%B4%9D%202.png" alt="">
         <div class="text">{{ text }}</div>
-        <div v-if="index === 0" class="version">{{ `1.0.040` }}</div>
+        <div v-if="index === 0" class="version">{{ `1.0.041` }}</div>
       </div>
     </div>
   </div>

layouts/default.vue

@@ -29,17 +29,15 @@ export default {
   computed: {
     style() {
       const style = {}
-      const { zoom, isMoblie, marginSceen, top, } = this
+      const { zoom, isMoblie, marginSceen, top, left, } = this
       style.zoom = zoom
 
       // 移动端旋转效果
       if (isMoblie) {
         if (!marginSceen) {
-          style.transform = `rotate(90deg) scale(1.72)`
+          style.transform = `matrix(0, -1, 1, 0, ${top - 244}, 236)`
+          style.bottom = `246px`
         } else {
-          // style.transformOrigin = `0px 0px 0px`
-          // style.transform = `matrix(0, 0, 0, 0, 0, 0)`
-          // style.transform = `matrix(0, 1, -1, 0, ${608 + top}, 0)`
           style.transform = `matrix(0, -1, 1, 0, ${top - 244}, 236)`
         }
       }
@@ -90,7 +88,7 @@ export default {
       if (process.env.NODE_ENV === 'development') {
         // return
       }
-      if ((innerWidth < 750 && innerWidth < innerHeight) || (isMobile && innerWidth < innerHeight)) {
+      if ((innerWidth < 1000 && innerWidth < innerHeight) || (isMobile && innerWidth < innerHeight)) {
         this.initMobileSceen()
         this.isMoblie = true
       } else {
@@ -120,16 +118,22 @@ export default {
       let zoom = 1
       const { innerWidth, innerHeight } = window
       if (innerHeight / innerWidth > 1080 / 608) {
-        zoom = window.innerWidth / 1080
+        console.log('test1')
+        zoom = window.innerWidth / 608
         this.SetZoom(zoom)
         this.zoom = zoom
         this.marginSceen = false
+
+        const left = (innerHeight - (1080 / 608) * innerWidth) * 2
+        this.left = left
+        console.log('this.top', this.top)
       } else {
+        console.log('test2')
         zoom = window.innerHeight / 1080
         this.SetZoom(zoom)
         this.zoom = zoom
         this.marginSceen = true
-        const top = (innerWidth - (608 / 1080) * innerHeight)
+        const top = (innerWidth - (608 / 1080) * innerHeight) / 2
         this.top = top
       }
       this.isMoblie = true

nuxt.config.js

@@ -14,8 +14,8 @@ export default {
     title: process.env.project_name || '',
     meta: [
       { charset: 'utf-8' },
-      // { name: 'viewport', content: 'width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' },
-      { name: 'viewport', content: 'user-scalable=no' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' },
+      // { name: 'viewport', content: 'user-scalable=no' },
       { hid: 'description', name: 'description', content: process.env.project_description || '' }
     ],
     link: [

store/index.js

@@ -63,7 +63,7 @@ export const getters = {
   is_mobile(state) {
     let is_mobile = false
     const { innerWidth, innerHeight, } = state
-    const minWidth = 450
+    const minWidth = 1000
     if (innerWidth < minWidth || innerHeight < minWidth) {
       is_mobile = true
     }