Skip to content

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

键盘收起

parent 2d811a4d
Show whitespace changes
Inline Side-by-side
Showing with 446 additions and 6 deletions
layouts/default.vue
View file @ b5427561
......@@ -148,6 +148,7 @@ export default {
width: 1080px;
height: 608px;
position: relative;
overflow: hidden;
&.margin {
margin-left: auto;
margin-right: auto;
......
pages/index.vue
View file @ b5427561
<template>
<div class="main-layout">
<Header/>
<Header v-if="!hideHeader"/>
<div class="main-content">
<nuxt-child
/>
......@@ -35,6 +35,7 @@ export default {
'relist',
'userInfo',
'imToken',
'hideHeader',
]),
},
watch: {
......
pages/index/game/components/keyboard.vue
View file @ b5427561
......@@ -72,14 +72,96 @@
</div>
</div>
</div>
<div v-else>
移动端键盘
<div v-else class="mobile-option-block">
<img class="bg" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/bottomBar.png" alt="">
<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>
<img class="bonus" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/Bonus02.png" alt="">
<!-- 键盘 -->
<div :class="{ show: showKeyboard, }" class="keyboard">
<div class="direction">
<!-- 向下箭头 -->
<img v-audio v-show="showKeyboard" class="btn" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/downArrow.png" alt="" @click="showKeyboard = !showKeyboard">
<!-- 向上箭头 -->
<img v-audio v-show="!showKeyboard" class="btn" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/topArrow.png" alt="" @click="showKeyboard = !showKeyboard">
</div>
<div class="title">
<div class="bg-box">
<img v-audio class="bg btn" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/topBar.png" alt="" @click="showKeyboard = !showKeyboard">
</div>
<div class="text-box">
<img v-show="showKeyboard" class="text" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/downTip.png" alt="" >
<img v-show="!showKeyboard" class="text" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/upTip.png" alt="">
</div>
</div>
<div class="content">
<img class="bg" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/middleBar.png" alt="">
<!-- 按钮 -->
<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 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 class="play-btn btn" @click="click().play()">
<img v-audio v-if="playBtn.buttonImgN" :src="playBtn.buttonImgN | img" alt="">
</div>
</div>
</div>
<!-- 全屏按钮 -->
<div v-audio class="full-btn" @click="fullState = !fullState">
<img v-show="!fullState" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/Maximize.png" alt="">
<img v-show="fullState" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/Exit%20Button-1.png" 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 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>
<img v-audio class="spin btn" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/spin.png" alt="" @click="click().play()">
</div>
</div>
</template>
<script>
import { mapGetters, } from 'vuex'
import { mapGetters, mapMutations, } from 'vuex'
export default {
filters: {
autoTimeFilter(value) {
......@@ -114,6 +196,8 @@ export default {
autoTime: 0, // 自动游戏时间，-1表示无穷
cancelAutoClick: 0, // 计数器，用来实现双击
loadingData: {},
showKeyboard: false, // 是否显示键盘
fullState: false, // 直播满屏显示
}
},
computed: {
......@@ -149,12 +233,20 @@ export default {
return this.playBtn.buttonValue
},
},
watch: {
fullState(value) {
this.SetHideHeader(value) // 全屏的时候隐藏头部
},
},
created() {
if (this.buttonValue) {
this.network().autoPlay('release') // 进入游戏的时候，先暂停之前的auto
}
},
methods: {
...mapMutations([
'SetHideHeader',
]),
init() {
return {
// 自动玩游戏时间倒计时逻辑
......@@ -597,4 +689,312 @@ export default {
}
}
}
/* 移动端样式 */
.mobile-option-block {
position: absolute;
bottom: 0;
left: 0;
right: 0;
> .bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
$bottom: 10px;
.left-option {
background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_bottom_02.png);
background-size: 100% 100%;
width: 148px;
height: 90px;
position: absolute;
left: 74px;
bottom: 9px;
.credit-in {
width: 84px;
position: absolute;
top: -3px;
left: -1px;
z-index: 3;
}
.credit-out {
width: 100px;
position: absolute;
right: -18px;
bottom: 0;
opacity: .8;
&:hover{
opacity: 1;
}
}
.credit-in-modal {
position: absolute;
bottom: 100px;
left: -62px;
display: none;
&.show {
display: block;
}
.credit-in-modal-mark {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
/* background: #ccc; */
z-index: 1;
}
.credit-in-btn-block {
width: 144px;
display: grid;
grid-template-columns: repeat(2, 66px);
grid-gap: 12px;
padding: 22px 30px;
background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_02.png);
background-size: 100% 100%;
position: relative;
z-index: 20;
.btn {
width: 66px;
height: 54px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
.btn-bg {
position: absolute;
width: 100%;
height: 100%;
}
.value, .credist {
position: relative;
z-index: 2;
text-align: center;
}
.value{
font-size: 18px;
color: white;
}
.credist{
font-size: 12px;
color: white;
}
}
}
}
}
.bonus {
position: absolute;
bottom: 0px;
left: 220px;
width: 100px;
display: block;
}
/* 键盘 */
.keyboard {
width: 680px;
left: 200px;
bottom: 0;
position: absolute;
z-index: 20;
bottom: -220px;
transition: .4s;
&.show {
bottom: 0;
}
.direction {
position: absolute;
width: 100%;
top: -90px;
pointer-events: none;
img {
display: block;
margin: auto;
width: 90px;
pointer-events: all;
}
}
.title{
position: absolute;
width: 100%;
height: 80px;
top: -50px;
z-index: 5;
pointer-events: none;
> .bg-box {
position: absolute;
height: 100%;
width: 100%;
pointer-events: none;
> .bg {
display: block;
margin: auto;
width: 450px;
pointer-events: all;
}
}
> .text-box {
position: absolute;
height: 100%;
width: 100%;
pointer-events: none;
> .text {
display: block;
margin: 24px auto;
width: 329px;
}
}
}
.content {
display: flex;
height: 224px;
> .bg {
width: 100%;
position: absolute;
}
.btn-block {
position: relative;
z-index: 2;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.box {
display: flex;
justify-content: center;
.btn {
width: 80px;
height: 80px;
margin: 4px;
img {
height: 100%;
width: 100%;
}
}
}
}
.play-btn {
flex: none;
width: 140px;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
img {
width: 100%;
}
}
}
}
/* 全屏按钮 */
.full-btn {
position: absolute;
left: 750px;
bottom: 0;
img {
width: 100px;
}
}
/* 自动按钮 */
.auto {
width: 100px;
position: absolute;
bottom: 0;
left: 854px;
left: 800;
.auto-btn {
position: absolute;
bottom: 0;
width: 100px;
z-index: 2;
&.down {
width: 78px;
height: 77px;
bottom: -4px;
left: -2px;
}
}
}
.auto-time-text {
position: absolute;
bottom: 6px;
left: 8px;
z-index: 3;
text-align: center;
color: #2f49e9;
font-weight: bold;
font-size: 20px;
width: 60px;
line-height: 60px;
border-radius: 60px;
.tips {
display: none;
color: #2f49e9;
border-radius: 8px;
background: #e4dede;
width: 189px;
font-size: 16px;
padding: 4px;
position: relative;
line-height: 20px;
left: -64px;
top: -10px;
}
&:hover {
.tips {
display: block !important;
}
}
}
.auto-time-block {
position: absolute;
bottom: 79px;
right: 19px;
overflow: hidden;
height: 164px;
width: 60px;
overflow: hidden;
.auto-time {
background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_auto-01.png);
background-size: 100% 100%;
height: 164px;
width: 60px;
position: absolute;
bottom: -164px;
right: 0;
padding-top: 2px;
box-sizing: border-box;
&.show {
bottom: 0;
}
.auto-time-item {
height: 24px;
color: #17bac5;
line-height: 24px;
font-size: 12px;
text-align: center;
margin: 2px 2px;
&:hover {
background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_auto-03.png);
background-size: 100% 100%;
}
}
}
}
.spin {
position: absolute;
right: -15px;
bottom: -9px;
width: 140px;
}
}
</style>
pages/index/game/index.vue
View file @ b5427561
<template>
<div>
<Background/>
<div class="player">
<div :class="{is_mobile: is_mobile, 'hide-header': hideHeader, }" class="player">
<div class="live-play">
<div class="asset-number">EGM:{{ device ? device.assetNumber : '' }}</div>
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/pic_02.png" alt="" class="bg">
......@@ -51,6 +51,7 @@ export default {
...mapState([
'userInfo',
'deviceList',
'hideHeader',
]),
...mapGetters([
'is_mobile',
......@@ -260,6 +261,27 @@ export default {
.right-player {
margin-left: 30px;
}
&.is_mobile {
.live-play {
width: 660px;
height: 428px;
}
.right-player {
/* display: none; */
}
}
&.hide-header {
left: 168px;
.live-play {
width: 750px;
height: 500px;
}
.right-player {
display: none;
}
}
}
// 音量控制
......
pages/loading/data/images.json
View file @ b5427561
......@@ -79,5 +79,16 @@
"https://kuawai.s3.ap-east-1.amazonaws.com/resource…s/second/Bottom%20Bar%20Background%20copy%203.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource…s/second/Bottom%20Bar%20Background%20copy%202.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/temp/game/player2.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%201131.png"
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%201131.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/Bonus02.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/bottomBar.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/middleBar.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/topArrow.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/topBar.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/downArrow.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/upTip.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/downTip.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/Maximize.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/Exit%20Button-1.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/spin.png"
]
store/index.js
View file @ b5427561
......@@ -43,6 +43,7 @@ export const state = () => ({
img_domain: '', // 图片名称
}, // app配置
dictionary: {}, // 数据字典
hideHeader: false, // 是否隐藏layout的header
ossConfig: {
access_key: '',
secret: '',
......@@ -182,6 +183,10 @@ export const mutations = {
// console.log('SetInnerHeight', data)
state.innerHeight = data
},
SetHideHeader(state, data) {
// console.log('SetInnerHeight', data)
state.hideHeader = data
},
}
export const actions = {
......
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