Skip to content

E
eslotsys-game-nuxt
Commit 2d811a4d authored by 毛线's avatar 毛线
Browse files
Options

移动端键盘，save

parent 6eaaf7df
Hide whitespace changes
Inline Side-by-side
Showing with 84 additions and 62 deletions
layouts/default.vue
View file @ 2d811a4d
...@@ -75,8 +75,7 @@ export default { ...@@ -75,8 +75,7 @@ export default {
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
// return // return
} }
if ((innerWidth < 750 && innerWidth < innerHeight) || (isMobile && innerWidth < innerHeight)) {
if (innerWidth < 750 || (isMobile && innerWidth < 750)) {
this.initMobileSceen() this.initMobileSceen()
this.isMoblie = true this.isMoblie = true
} else { } else {
...@@ -96,8 +95,8 @@ export default { ...@@ -96,8 +95,8 @@ export default {
this.marginSceen = false this.marginSceen = false
} }
this.SetZoom(zoom) this.SetZoom(zoom)
// this.SetInnerWidth(innerWidth) this.SetInnerWidth(innerWidth)
// this.SetInnerHeight(innerHeight) this.SetInnerHeight(innerHeight)
this.zoom = zoom this.zoom = zoom
this.isMoblie = false this.isMoblie = false
}, },
...@@ -130,7 +129,6 @@ export default { ...@@ -130,7 +129,6 @@ export default {
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
min-width: 900px;
position: fixed; position: fixed;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
......
pages/index/game/components/keyboard.vue
View file @ 2d811a4d
<template> <template>
<div class="option-block"> <div>
<div class="left-option"> <div v-if="!is_mobile" class="option-block">
<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"> <div class="left-option">
<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()"> <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">
<!-- credit-in 弹窗 --> <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()">
<div :class="creditInShow ? 'show' : ''" class="credit-in-modal"> <!-- credit-in 弹窗 -->
<div v-audio class="credit-in-modal-mark" @click="creditInShow = false"/> <div :class="creditInShow ? 'show' : ''" class="credit-in-modal">
<div class="credit-in-btn-block"> <div v-audio class="credit-in-modal-mark" @click="creditInShow = false"/>
<div v-audio v-for="(item, index) in credistList" :key="index" class="btn" @click="click().upPoint(item)"> <div class="credit-in-btn-block">
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_di_01.png" alt="" class="btn-bg"> <div v-audio v-for="(item, index) in credistList" :key="index" class="btn" @click="click().upPoint(item)">
<div class="value">{{ item }}</div> <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_di_01.png" alt="" class="btn-bg">
<div class="credist">Credist</div> <div class="value">{{ item }}</div>
</div> <div class="credist">Credist</div>
<div class="btn" @click="click().allIn()"> </div>
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_black_01.png" alt="" class="btn-bg"> <div class="btn" @click="click().allIn()">
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_black_01.png" alt="" class="btn-bg">
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="right-option">
<div class="right-option"> <!-- 按钮 -->
<!-- 按钮 --> <div class="btn-block">
<div class="btn-block"> <div class="box">
<div class="box"> <div v-audio v-for="(item, index) in btnList1" :key="index" class="game-btn btn" @click="click().gameBtn(item)">
<div v-audio v-for="(item, index) in btnList1" :key="index" class="game-btn btn" @click="click().gameBtn(item)"> <div v-if="item.buttonImgN" class="btn">
<div v-if="item.buttonImgN" class="btn"> <img :src="item.buttonImgN | img" alt="">
<img :src="item.buttonImgN | img" alt=""> </div>
</div> </div>
</div> </div>
</div> <div class="box">
<div class="box"> <div v-audio v-for="(item, index) in btnList2" :key="index" class="game-btn btn" @click="click().gameBtn(item)">
<div v-audio v-for="(item, index) in btnList2" :key="index" class="game-btn btn" @click="click().gameBtn(item)"> <div v-if="item.buttonImgN" class="btn">
<div v-if="item.buttonImgN" class="btn"> <img :src="item.buttonImgN | img" alt="">
<img :src="item.buttonImgN | img" alt=""> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- play --> <!-- play -->
<div class="play-btn btn" @click="click().play()"> <div class="play-btn btn" @click="click().play()">
<img v-audio v-if="playBtn.buttonImgN" :src="playBtn.buttonImgN | img" alt=""> <img v-audio v-if="playBtn.buttonImgN" :src="playBtn.buttonImgN | img" alt="">
</div>
<!-- 自动下注 -->
<div v-audio class="auto">
<img v-show="!isAuto" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/ic_autoChinese.png" alt="" class="auto-btn btn" @click="showTime = !showTime;">
<img v-show="isAuto" src="https://kuawai.s3.ap-east-1.amazonaws.com/temp/game/auto-time-button.png" alt="" class="auto-btn btn down" @click="click().cancelAuto()">
<div v-if="isAuto" :style="autoTime === -1 ? 'font-size: 40px;' : ''" class="auto-time-text btn" @click="click().cancelAuto()">
<div class="tips">DOUBLE CLICK TO STOP AUTO-SPINNING</div>
{{ autoTime | autoTimeFilter }}
</div> </div>
<div class="auto-time-block"> <!-- 自动下注 -->
<div :class="showTime ? 'show' : ''" class="auto-time"> <div v-audio class="auto">
<div class="auto-time-item btn" style="font-size: 24px" @click="click().setAutoPlay(-1)">∞</div> <img v-show="!isAuto" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/ic_autoChinese.png" alt="" class="auto-btn btn" @click="showTime = !showTime;">
<div v-for="time in autoTimeList" :key="time" class="auto-time-item btn" @click="click().setAutoPlay(time)">{{ time }}min</div> <img v-show="isAuto" src="https://kuawai.s3.ap-east-1.amazonaws.com/temp/game/auto-time-button.png" alt="" class="auto-btn btn down" @click="click().cancelAuto()">
<div v-if="isAuto" :style="autoTime === -1 ? 'font-size: 40px;' : ''" class="auto-time-text btn" @click="click().cancelAuto()">
<div class="tips">DOUBLE CLICK TO STOP AUTO-SPINNING</div>
{{ autoTime | autoTimeFilter }}
</div>
<div class="auto-time-block">
<div :class="showTime ? 'show' : ''" class="auto-time">
<div class="auto-time-item btn" style="font-size: 24px" @click="click().setAutoPlay(-1)">∞</div>
<div v-for="time in autoTimeList" :key="time" class="auto-time-item btn" @click="click().setAutoPlay(time)">{{ time }}min</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="vip-block">
<div class="vip-block"> <img class="bg1" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Bottom%20Bar%20Background%20copy%202.png" alt="">
<img class="bg1" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Bottom%20Bar%20Background%20copy%202.png" alt=""> <img class="bg2" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Bottom%20Bar%20Background%20copy%203.png" alt="">
<img class="bg2" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Bottom%20Bar%20Background%20copy%203.png" alt=""> <!-- bonus -->
<!-- bonus --> <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Bonus.png" alt="" class="btn bonus">
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Bonus.png" alt="" class="btn bonus"> <!-- lock-button -->
<!-- lock-button --> <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Layer%20970.png" alt="" class="btn lock-button">
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Layer%20970.png" alt="" class="btn lock-button"> <!-- vip 标记 -->
<!-- vip 标记 --> <div class="vip-icon">
<div class="vip-icon"> <img class="icon-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/vip.png" alt="">
<img class="icon-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/vip.png" alt=""> <div class="text">RE SERVE</div>
<div class="text">RE SERVE</div> </div>
</div> </div>
</div> </div>
<div v-else>
移动端键盘
</div>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters, } from 'vuex'
export default { export default {
filters: { filters: {
autoTimeFilter(value) { autoTimeFilter(value) {
...@@ -111,6 +117,9 @@ export default { ...@@ -111,6 +117,9 @@ export default {
} }
}, },
computed: { computed: {
...mapGetters([
'is_mobile',
]),
btnList() { btnList() {
const btnList = this.deviceButtonPanel.keyMapping || [] const btnList = this.deviceButtonPanel.keyMapping || []
return btnList.filter(i => i.buttonImgN) return btnList.filter(i => i.buttonImgN)
......
pages/index/game/index.vue
View file @ 2d811a4d
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<script> <script>
import Background from '@/components/common/bg/index' 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 WebRTCPlayer from './components/WebRTCPlayer'
import RightPlayer from './components/right-player' import RightPlayer from './components/right-player'
import Keyboard from './components/keyboard' import Keyboard from './components/keyboard'
...@@ -52,6 +52,9 @@ export default { ...@@ -52,6 +52,9 @@ export default {
'userInfo', 'userInfo',
'deviceList', 'deviceList',
]), ]),
...mapGetters([
'is_mobile',
]),
id() { id() {
return this.$route.query.id return this.$route.query.id
}, },
......
store/index.js
View file @ 2d811a4d
...@@ -35,6 +35,7 @@ export const state = () => ({ ...@@ -35,6 +35,7 @@ export const state = () => ({
token: getToken(), token: getToken(),
imToken: getImToken(), imToken: getImToken(),
zoom: 1, // 当前屏幕缩放比例 zoom: 1, // 当前屏幕缩放比例
isMoblie: false,
innerWidth: window.innerWidth, innerWidth: window.innerWidth,
innerHeight: window.innerHeight, innerHeight: window.innerHeight,
appConfig: { appConfig: {
...@@ -54,6 +55,15 @@ export const getters = { ...@@ -54,6 +55,15 @@ export const getters = {
is_admin(state) { // 是否超级管理员 is_admin(state) { // 是否超级管理员
return state.userInfo?.role_id === 1 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 = { export const mutations = {
...@@ -165,9 +175,11 @@ export const mutations = { ...@@ -165,9 +175,11 @@ export const mutations = {
state.zoom = data state.zoom = data
}, },
SetInnerWidth(state, data) { SetInnerWidth(state, data) {
// console.log('SetInnerWidth', data)
state.innerWidth = data state.innerWidth = data
}, },
SetInnerHeight(state, data) { SetInnerHeight(state, data) {
// console.log('SetInnerHeight', data)
state.innerHeight = data state.innerHeight = data
}, },
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment