Skip to content

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

优化交互

parent b5d502b2
Show whitespace changes
Inline Side-by-side
Showing with 649 additions and 439 deletions
components/common/bg/index.vue
View file @ 0eb1adfa
<template>
<div class="bg">
<img src="@/assets/images/temp/bg/fish/background.png" alt="" class="bg-img">
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/gameSecond/background3.png" alt="" class="bg-img">
<!-- 背景 -->
</div>
</template>
......
components/common/header/components/center-box.vue 0 → 100644
View file @ 0eb1adfa
<template>
<div class="center-img-box">
<div class="bg">
<img class="text-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Golden%20Koi%20Club.png" alt="">
</div>
<img class="icon right" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/-s-eye_glow_l02.png" alt="">
<img class="icon left" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/-s-eye_glow_r02.png" alt="">
</div>
</template>
<script>
export default {
data() {
return {
}
},
}
</script>
<style lang="scss" scoped>
.center-img-box {
position: relative;
.bg {
background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_group.png);
background-size: 100% 100%;
height: 100%;
width: 100%;
overflow: auto;
.text-img {
height: 57px;
display: block;
margin: auto;
margin-top: 8px;
}
}
.icon {
position: absolute;
height: 60px;
top: 0;
&.left {
left: 0;
}
&.right {
right: 0;
}
}
}
</style>
components/common/header/index.vue
View file @ 0eb1adfa
<template>
<div class="header">
<div class="left-block">
<img class="left-block-bg1" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Pattern.png" alt="">
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/logo.png" alt="" class="logo">
<div class="data">
{{ time | filterData }}
......@@ -12,24 +13,24 @@
<div class="bar">
<div class="input-box">
<div class="input-img">
<img src="./static/gold-coin.png" alt="">
<img src="@/assets/images/temp/header/gold-coin.png" alt="">
</div>
<div class="value">
{{ userInfo.goldCredit }}
</div>
</div>
<div class="input-box">
<div class="input-img" style="width: 54px; top: -12px; left: -8px">
<img src="./static/red-coin.png" alt="">
<div class="input-img" style="width: 54px; top: -10px; left: -8px">
<img src="@/assets/images/temp/header/red-coin.png" alt="">
</div>
<div class="value">
{{ userInfo.redCredit }}
</div>
</div>
<div class="center-bg"/>
<CenterBox class="center-bg"/>
<div class="profile btn" @click="click().profile()">
<img v-if="userInfo.avatar" :src="userInfo.avatar | img" alt="" class="profile-img">
<img v-else src="./static/profile/profile-pic.png" alt="" class="profile-img">
<img v-else src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/head1.png" alt="" class="profile-img">
<template v-if="userInfo.id">
<img :src="cardImg[userInfo.playerLevelName]" alt="" class="card-img">
</template>
......@@ -60,6 +61,8 @@ import dayjs from 'dayjs'
import screenfull from 'screenfull'
import { mapState } from 'vuex'
import Confirm from '@/components/dialog/confirm'
import CenterBox from './components/center-box'
export default {
filters: {
filterData(time) {
......@@ -71,6 +74,7 @@ export default {
},
components: {
Confirm,
CenterBox,
},
data() {
// 卡片
......@@ -158,6 +162,8 @@ export default {
params,
}).then(({ data }) => {
console.log('退出游戏页面')
}).catch(() => {
location.reload()
})
},
},
......@@ -175,10 +181,14 @@ export default {
left: 0;
top: 0;
width: 170px;
height: 140px;
background-image: url(./static/left-block-bg.png);
height: 139px;
background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_logo_01.png?t=1);
background-size: 100% 100%;
z-index: 1;
.left-block-bg1 {
position: absolute;
width: 130px;
}
.logo {
width: 136px;
margin: 8px 0 0;
......@@ -245,12 +255,12 @@ export default {
.input-box {
padding-left: 28px;
position: relative;
margin-top: 20px;
margin-top: 18px;
margin-left: 16px;
.input-img {
position: absolute;
left: 0;
top: -8px;
top: -6px;
width: 44px;
height: 44px;
img {
......@@ -258,21 +268,18 @@ export default {
}
}
.value {
height: 28px;
width: 90px;
background-image: url(./static/value-bg.png);
background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Vector%20Smart%20Object%20copy%202.png);
background-size: 100% 100%;
padding: 6px;
font-size: 14px;
padding-right: 8px;
text-align: right;
color: white;
box-sizing: border-box;
line-height: 32px;
}
}
.center-bg {
background-image: url(./static/bar-content-bg.png);
background-size: 100% 100%;
width: 310px;
height: 76px;
margin-left: 10px;
......
pages/index/game/components/keyboard.vue 0 → 100644
View file @ 0eb1adfa
<template>
<div class="option-block">
<div class="left-option">
<img v-audio src="@/assets/images/temp/game/CREDIT-IN.gif" 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 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 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>
<!-- play -->
<div class="play-btn btn" @click="click().play()">
<img v-audio src="@/assets/images/temp/game/play-button.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="@/assets/images/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 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>
</template>
<script>
export default {
filters: {
autoTimeFilter(value) {
let text = ''
if (value === -1) {
text = '∞'
} else {
text = value / 60
text = Math.floor(text) + 'm'
}
return text
},
},
props: {
deviceButtonPanel: {
type: Object,
default: () => {
return {}
},
},
id: {
type: [Number, String],
default: 0,
},
},
data() {
return {
creditInShow: false,
credistList: [50, 100, 200, 500, 1000],
autoTimeList: [30, 20, 15, 5],
showTime: false,
autoTime: 0, // 自动游戏时间，-1表示无穷
cancelAutoClick: 0, // 计数器，用来实现双击
}
},
computed: {
btnList() {
const btnList = this.deviceButtonPanel.keyMapping || []
return btnList.filter(i => i.buttonImgN)
},
btnList1() {
return this.btnList.filter(i => i.buttonName.includes('u'))
},
btnList2() {
return this.btnList.filter(i => i.buttonName.includes('D'))
},
// 是否在自动玩游戏
isAuto() {
let isAuto = false
const { autoTime } = this
if (autoTime > 0 || autoTime === -1) {
isAuto = true
}
return isAuto
},
},
methods: {
init() {
return {
// 自动玩游戏时间倒计时逻辑
autoTime: () => {
if (this.autoTime > 0) {
this.autoTime--
setTimeout(() => {
this.init().autoTime()
}, 1000)
}
},
// 自动玩游戏递归调用
autoPlay: () => {
const { autoTime } = this
if (autoTime > 0 || autoTime === -1) {
this.click().play()
setTimeout(() => {
this.init().autoPlay()
}, 5000)
}
},
}
},
click() {
return {
quit: () => {
this.network().quit()
},
gameBtn: (item) => {
this.network().button(item)
},
upPoint: (cashable) => {
this.network().upPoint({ cashable })
},
allIn: () => {
this.network().upPoint({ type: 2 })
},
play: () => {
this.network().button({ buttonValue: 2 })
},
player: ({ x16, y16 }) => {
this.network().touch({ x: x16, y: y16 })
},
// 设置自动play时间
setAutoPlay: (time) => {
if (time === -1) {
this.autoTime = -1
} else {
this.autoTime = time * 60
this.init().autoTime()
this.showTime = false
}
this.init().autoPlay()
},
cancelAuto: () => {
this.cancelAutoClick++
setTimeout(() => {
this.cancelAutoClick = 0
}, 500)
if (this.cancelAutoClick >= 2) {
this.autoTime = 0
this.cancelAutoClick = 0
}
},
}
},
network() {
return {
quit: () => {
const { id } = this
const params = {
deviceId: id,
}
this.$request({
url: '/api/app/device/quitDevice',
method: 'get',
params,
}).then(({ data }) => {
console.log('quit', data)
this.$router.go(-1)
})
},
upPoint: ({ cashable, type = null }) => {
const { id } = this
const params = {
deviceId: id,
cashable,
type,
}
this.$request({
url: '/api/game/upPoint',
method: 'get',
params,
}).then(({ data }) => {
})
this.creditInShow = false
},
outPoint: () => {
const { id } = this
const params = {
deviceId: id,
}
this.$request({
url: '/api/game/outPoint',
method: 'get',
params,
}).then(({ data }) => {
})
},
button: ({ buttonValue }) => {
const { id } = this
const params = {
deviceId: id,
methodName: 'click',
key: buttonValue,
}
this.$request({
url: '/api/game/button',
method: 'get',
params,
}).then(({ data }) => {
})
},
}
},
}
}
</script>
<style lang="scss" scoped>
.option-block {
position: absolute;
bottom: 0;
height: 150px;
display: flex;
width: 100%;
justify-content: center;
.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: 188px;
height: 132px;
position: relative;
margin-top: 10px;
.credit-in {
width: 84px;
position: absolute;
top: 16px;
left: 18px;
}
.credit-out {
width: 100px;
position: absolute;
right: -18px;
bottom: 0;
opacity: .8;
&:hover{
opacity: 1;
}
}
.credit-in-modal {
position: absolute;
bottom: 118px;
left: -43px;
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: 2;
.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;
}
}
}
}
}
.right-option {
width: 606px;
margin-left: 20px;
margin-bottom: 4px;
/* background-image: url(@/assets/images/temp/game/play.png); */
background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_bottom_01.png);
background-size: 100% 100%;
position: relative;
z-index: 3;
.btn-block {
position: absolute;
left: 10px;
top: 14px;
width: 408px;
.box {
display: flex;
justify-content: center;
.btn {
width: 50px;
height: 50px;
margin: 4px;
img {
height: 100%;
width: 100%;
}
}
}
}
.play-btn {
position: absolute;
right: 100px;
bottom: 26px;
overflow: visible;
width: 90px;
height: 90px;
img {
width: 186px;
position: absolute;
left: -48px;
bottom: -5px;
user-select: none;
pointer-events: none;
}
}
.auto {
width: 70px;
position: absolute;
/* background: #ccc; */
bottom: 68px;
right: 0;
.auto-btn {
position: absolute;
bottom: 0;
width: 72px;
z-index: 2;
&.down {
width: 78px;
height: 77px;
bottom: -4px;
left: -2px;
}
}
}
.auto-time-text {
position: absolute;
bottom: 6px;
right: 5px;
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: 49px;
right: 5px;
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%;
}
}
}
}
}
.vip-block {
width: 170px;
margin-left: -76px;
position: relative;
z-index: 1;
.bg1 {
position: absolute;
right: 0px;
width: 196px;
display: block;
top: 21px;
}
.bg2 {
position: absolute;
right: 16px;
height: 132px;
display: block;
top: 10px;
}
.bonus {
position: absolute;
width: 34px;
bottom: 10px;
right: 78px;
}
.lock-button {
position: absolute;
width: 35px;
bottom: 38px;
right: 46px;
}
.vip-icon {
width: 60px;
z-index: 2;
position: absolute;
right: 20px;
top: 25px;
opacity: 0.5;
.icon-img {
width: 30px;
display: block;
margin: auto;
}
.text {
text-align: center;
color: white;
font-size: 12px;
zoom: 0.8;
text-align: center;
}
}
}
}
</style>
pages/index/game/index.vue
View file @ 0eb1adfa
......@@ -4,79 +4,20 @@
<div class="player">
<div class="live-play">
<div class="asset-number">EGM:{{ device ? device.assetNumber : '' }}</div>
<img src="@/assets/images/temp/game/video-play.png" alt="" class="bg">
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/pic_02.png" alt="" class="bg">
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_object.png" alt="" class="top-icon">
<img v-if="isPlay" src="@/assets/images/temp/game/video-play-state.png" alt="" class="play-state">
<div class="box">
<WebRTCPlayer ref="webrtc" :video-src="player" @click="(data) => click().player(data)"/>
</div>
</div>
<!-- 右侧的直播区域 -->
<div v-if="device" class="right-player">
<RightPlayer :device="device"/>
</div>
</div>
<div class="option-block">
<div class="left-option">
<img v-audio src="@/assets/images/temp/game/CREDIT-IN.gif" alt="" class="credit-in btn" @click="creditInShow = true">
<img v-audio src="@/assets/images/temp/game/CREDIT-OUT.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="@/assets/images/temp/game/credit-in/btn-bg.png" alt="" class="btn-bg">
<div class="value">{{ item }}</div>
<div class="credist">Credist</div>
</div>
<div class="btn" @click="click().allIn()">
<img src="@/assets/images/temp/game/credit-in/allin.png" alt="" class="btn-bg">
</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>
</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>
<!-- play -->
<div class="play-btn btn" @click="click().play()">
<img v-audio src="@/assets/images/temp/game/play-button.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="@/assets/images/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>
<!-- bonus -->
<img src="@/assets/images/temp/game/bonus.png" alt="" class="btn bonus">
<!-- lock-button -->
<img src="@/assets/images/temp/game/lock-button.png" alt="" class="btn lock-button">
</div>
</div>
<!-- 底部键盘 -->
<Keyboard :id="id" :device-button-panel="deviceButtonPanel" />
</div>
</template>
......@@ -85,35 +26,19 @@ import Background from '@/components/common/bg/index'
import { mapActions, mapState, mapMutations, } from 'vuex'
import WebRTCPlayer from './components/WebRTCPlayer'
import RightPlayer from './components/right-player'
import Keyboard from './components/keyboard'
export default {
filters: {
autoTimeFilter(value) {
let text = ''
if (value === -1) {
text = '∞'
} else {
text = value / 60
text = Math.floor(text) + 'm'
}
return text
},
},
components: {
WebRTCPlayer, // 直播视频
Background,
RightPlayer, // 右侧的直播板块
Keyboard, // 键盘组件
},
data() {
return {
player: '',
isPlay: false, // 直播是否在播放
deviceButtonPanel: {},
creditInShow: false,
credistList: [50, 100, 200, 500, 1000],
autoTimeList: [30, 20, 15, 5],
showTime: false,
autoTime: 0, // 自动游戏时间，-1表示无穷
cancelAutoClick: 0, // 计数器，用来实现双击
}
},
computed: {
......@@ -131,12 +56,6 @@ export default {
const btnList = this.deviceButtonPanel.keyMapping || []
return btnList.filter(i => i.buttonImgN)
},
btnList1() {
return this.btnList.filter(i => i.buttonName.includes('u'))
},
btnList2() {
return this.btnList.filter(i => i.buttonName.includes('D'))
},
// 当前设备
device() {
const { deviceList, id } = this
......@@ -149,15 +68,6 @@ export default {
this.SetDevice(device)
return device
},
// 是否在自动玩游戏
isAuto() {
let isAuto = false
const { autoTime } = this
if (autoTime > 0 || autoTime === -1) {
isAuto = true
}
return isAuto
},
},
watch: {
device() {
......@@ -186,25 +96,6 @@ export default {
this.$refs.webrtc.initVideo(webrtc)
this.isPlay = true
},
// 自动玩游戏时间倒计时逻辑
autoTime: () => {
if (this.autoTime > 0) {
this.autoTime--
setTimeout(() => {
this.init().autoTime()
}, 1000)
}
},
// 自动玩游戏递归调用
autoPlay: () => {
const { autoTime } = this
if (autoTime > 0 || autoTime === -1) {
this.click().play()
setTimeout(() => {
this.init().autoPlay()
}, 5000)
}
},
}
},
network() {
......@@ -239,34 +130,6 @@ export default {
console.log('isSave', data)
})
},
quit: () => {
const { id } = this
const params = {
deviceId: id,
}
this.$request({
url: '/api/app/device/quitDevice',
method: 'get',
params,
}).then(({ data }) => {
console.log('quit', data)
this.$router.go(-1)
})
},
button: ({ buttonValue }) => {
const { id } = this
const params = {
deviceId: id,
methodName: 'click',
key: buttonValue,
}
this.$request({
url: '/api/game/button',
method: 'get',
params,
}).then(({ data }) => {
})
},
upPoint: ({ cashable, type = null }) => {
const { id } = this
const params = {
......@@ -282,18 +145,6 @@ export default {
})
this.creditInShow = false
},
outPoint: () => {
const { id } = this
const params = {
deviceId: id,
}
this.$request({
url: '/api/game/outPoint',
method: 'get',
params,
}).then(({ data }) => {
})
},
jackpotList: () => {
this.$request({
url: '/api/app/jackpot/list',
......@@ -320,45 +171,9 @@ export default {
},
click() {
return {
quit: () => {
this.network().quit()
},
gameBtn: (item) => {
this.network().button(item)
},
upPoint: (cashable) => {
this.network().upPoint({ cashable })
},
allIn: () => {
this.network().upPoint({ type: 2 })
},
play: () => {
this.network().button({ buttonValue: 2 })
},
player: ({ x16, y16 }) => {
this.network().touch({ x: x16, y: y16 })
},
// 设置自动play时间
setAutoPlay: (time) => {
if (time === -1) {
this.autoTime = -1
} else {
this.autoTime = time * 60
this.init().autoTime()
this.showTime = false
}
this.init().autoPlay()
},
cancelAuto: () => {
this.cancelAutoClick++
setTimeout(() => {
this.cancelAutoClick = 0
}, 500)
if (this.cancelAutoClick >= 2) {
this.autoTime = 0
this.cancelAutoClick = 0
}
},
}
},
},
......@@ -394,6 +209,12 @@ export default {
left: 0;
top: 0;
}
.top-icon {
top: 1px;
right: 5px;
width: 70px;
position: absolute;
}
@keyframes twinkle {
from {
opacity: 1.0;
......@@ -424,237 +245,6 @@ export default {
}
}
.option-block {
position: absolute;
bottom: 0;
height: 150px;
display: flex;
width: 100%;
justify-content: center;
.left-option {
background-image: url(@/assets/images/temp/game/credit-btn-background.png);
background-size: 100% 100%;
width: 188px;
height: 132px;
position: relative;
margin-top: 10px;
.credit-in {
width: 84px;
position: absolute;
top: 16px;
left: 18px;
}
.credit-out {
width: 74px;
position: absolute;
right: -9px;
bottom: 0;
opacity: .8;
&:hover{
opacity: 1;
}
}
.credit-in-modal {
position: absolute;
bottom: 118px;
left: -43px;
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(@/assets/images/temp/game/credit-in/bg.png);
background-size: 100% 100%;
position: relative;
z-index: 2;
.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;
}
}
}
}
}
.right-option {
width: 742px;
margin-left: 20px;
margin-bottom: 4px;
background-image: url(@/assets/images/temp/game/play.png);
background-size: 100% 100%;
position: relative;
.btn-block {
position: absolute;
left: 10px;
top: 14px;
width: 408px;
.box {
display: flex;
justify-content: center;
.btn {
width: 50px;
height: 50px;
margin: 4px;
img {
height: 100%;
width: 100%;
}
}
}
}
.play-btn {
position: absolute;
right: 204px;
bottom: 26px;
overflow: visible;
width: 90px;
height: 90px;
img {
width: 186px;
position: absolute;
left: -48px;
bottom: -5px;
user-select: none;
pointer-events: none;
}
}
.auto {
width: 70px;
position: absolute;
/* background: #ccc; */
bottom: 68px;
right: 97px;
.auto-btn {
position: absolute;
bottom: 0;
width: 72px;
z-index: 2;
&.down {
width: 78px;
height: 77px;
bottom: -4px;
left: -2px;
}
}
}
.auto-time-text {
position: absolute;
bottom: 6px;
right: 5px;
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: 49px;
right: 5px;
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%;
}
}
}
}
.bonus {
position: absolute;
width: 34px;
bottom: 7px;
right: 78px;
}
.lock-button {
position: absolute;
width: 35px;
bottom: 33px;
right: 46px;
}
}
}
/* .game-btn-block {
display: flex;
.game-btn {
......
pages/loading/data/images.json
View file @ 0eb1adfa
......@@ -43,5 +43,32 @@
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Bar%20Background.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/logo.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/Rectangle%201175%20copy.png"
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rectangle%201175%20copy.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_logo_01.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Pattern.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Vector%20Smart%20Object%20copy%202.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_group.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/-s-eye_glow_l02.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/-s-eye_glow_r02.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Golden%20Koi%20Club.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Red.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Gold.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Silver.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Diamond.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/head1.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Logout%20Button1.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/gameSecond/background3.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_bottom_02.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_credit_01.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_02.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_di_01.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_bottom_01.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Bonus.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Layer%20970.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/vip.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/pic_02.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_object.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/photo-camera-interface-symbol-for-button.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/arrowIcon.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rectangle%208%20copy.png"
]
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