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 {
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
View file @ 2d811a4d
<template>
<div 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()">
<!-- credit-in 弹窗 -->
<div :class="creditInShow ? 'show' : ''" class="credit-in-modal">
<div v-audio class="credit-in-modal-mark" @click="creditInShow = false"/>
<div class="credit-in-btn-block">
<div v-audio v-for="(item, index) in credistList" :key="index" class="btn" @click="click().upPoint(item)">
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_di_01.png" alt="" class="btn-bg">
<div class="value">{{ item }}</div>
<div class="credist">Credist</div>
</div>
<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 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()">
<!-- credit-in 弹窗 -->
<div :class="creditInShow ? 'show' : ''" class="credit-in-modal">
<div v-audio class="credit-in-modal-mark" @click="creditInShow = false"/>
<div class="credit-in-btn-block">
<div v-audio v-for="(item, index) in credistList" :key="index" class="btn" @click="click().upPoint(item)">
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_di_01.png" alt="" class="btn-bg">
<div class="value">{{ item }}</div>
<div class="credist">Credist</div>
</div>
<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 class="right-option">
<!-- 按钮 -->
<div class="btn-block">
<div class="box">
<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">
<img :src="item.buttonImgN | img" alt="">
<div class="right-option">
<!-- 按钮 -->
<div class="btn-block">
<div class="box">
<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">
<img :src="item.buttonImgN | img" alt="">
</div>
</div>
</div>
</div>
<div class="box">
<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">
<img :src="item.buttonImgN | img" alt="">
<div class="box">
<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">
<img :src="item.buttonImgN | img" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- play -->
<div class="play-btn btn" @click="click().play()">
<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 }}
<!-- play -->
<div class="play-btn btn" @click="click().play()">
<img v-audio v-if="playBtn.buttonImgN" :src="playBtn.buttonImgN | img" alt="">
</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 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 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 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="bg2" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Bottom%20Bar%20Background%20copy%203.png" alt="">
<!-- bonus -->
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Bonus.png" alt="" class="btn bonus">
<!-- 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 标记 -->
<div class="vip-icon">
<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="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="bg2" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Bottom%20Bar%20Background%20copy%203.png" alt="">
<!-- bonus -->
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Bonus.png" alt="" class="btn bonus">
<!-- 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 标记 -->
<div class="vip-icon">
<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>
</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
View file @ 2d811a4d
......@@ -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
View file @ 2d811a4d
......@@ -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
},
}
......
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