移动端键盘，save

layouts/default.vue

@@ -75,8 +75,7 @@ export default {
       if (process.env.NODE_ENV === 'development') {
         // return
       }
-
-      if (innerWidth < 750 || (isMobile && innerWidth < 750)) {
+      if ((innerWidth < 750 && innerWidth < innerHeight) || (isMobile && innerWidth < innerHeight)) {
         this.initMobileSceen()
         this.isMoblie = true
       } else {
@@ -96,8 +95,8 @@ export default {
         this.marginSceen = false
       }
       this.SetZoom(zoom)
-      // this.SetInnerWidth(innerWidth)
-      // this.SetInnerHeight(innerHeight)
+      this.SetInnerWidth(innerWidth)
+      this.SetInnerHeight(innerHeight)
       this.zoom = zoom
       this.isMoblie = false
     },
@@ -130,7 +129,6 @@ export default {
     top: 0;
     width: 100%;
     height: 100%;
-    min-width: 900px;
     position: fixed;
     display: flex;
     flex-direction: column;

pages/index/game/components/keyboard.vue

 <template>
-  <div class="option-block">
+  <div>
+    <div v-if="!is_mobile" class="option-block">
       <div class="left-option">
         <img v-audio src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/creditIn.png" alt="" class="credit-in btn" @click="creditInShow = true">
         <img v-audio src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_credit_01.png" alt="" class="credit-out btn" @click="network().outPoint()">
@@ -71,9 +72,14 @@
         </div>
       </div>
     </div>
+    <div v-else>
+      移动端键盘
+    </div>
+  </div>
 </template>
 
 <script>
+import { mapGetters, } from 'vuex'
 export default {
   filters: {
     autoTimeFilter(value) {
@@ -111,6 +117,9 @@ export default {
     }
   },
   computed: {
+    ...mapGetters([
+      'is_mobile',
+    ]),
     btnList() {
       const btnList = this.deviceButtonPanel.keyMapping || []
       return btnList.filter(i => i.buttonImgN)

pages/index/game/index.vue

@@ -27,7 +27,7 @@
 
 <script>
 import Background from '@/components/common/bg/index'
-import { mapActions, mapState, mapMutations, } from 'vuex'
+import { mapActions, mapState, mapMutations, mapGetters, } from 'vuex'
 import WebRTCPlayer from './components/WebRTCPlayer'
 import RightPlayer from './components/right-player'
 import Keyboard from './components/keyboard'
@@ -52,6 +52,9 @@ export default {
       'userInfo',
       'deviceList',
     ]),
+    ...mapGetters([
+      'is_mobile',
+    ]),
     id() {
       return this.$route.query.id
     },

store/index.js

@@ -35,6 +35,7 @@ export const state = () => ({
   token: getToken(),
   imToken: getImToken(),
   zoom: 1, // 当前屏幕缩放比例
+  isMoblie: false,
   innerWidth: window.innerWidth,
   innerHeight: window.innerHeight,
   appConfig: {
@@ -54,6 +55,15 @@ export const getters = {
   is_admin(state) { // 是否超级管理员
     return state.userInfo?.role_id === 1
   },
+  is_mobile(state) {
+    let is_mobile = false
+    const { innerWidth, innerHeight, } = state
+    const minWidth = 400
+    if (innerWidth < minWidth || innerHeight < minWidth) {
+      is_mobile = true
+    }
+    return is_mobile
+  },
 }
 
 export const mutations = {
@@ -165,9 +175,11 @@ export const mutations = {
     state.zoom = data
   },
   SetInnerWidth(state, data) {
+    // console.log('SetInnerWidth', data)
     state.innerWidth = data
   },
   SetInnerHeight(state, data) {
+    // console.log('SetInnerHeight', data)
     state.innerHeight = data
   },
 }