Skip to content

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

弹窗

parent fc006c96
Hide whitespace changes
Inline Side-by-side
Showing with 249 additions and 31 deletions
components/common/device/index.vue
View file @ a6694724
<template>
<div v-audio :class="{btn: !data.playerId}" class="device-box" @click="click().joinGasme(data)">
<div class="header">
<div v-if="header === 'title'" class="game-name">{{ data.gameNameEn }}</div>
<div v-if="header === 'player'">
<img class="img player" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_play_again.png" alt="">
<div>
<div v-audio :class="{btn: !data.playerId}" class="device-box" @click="click().showJoinGasme(data)">
<div class="header">
<div v-if="header === 'title'" class="game-name">{{ data.gameNameEn }}</div>
<div v-if="header === 'player'">
<img class="img player" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_play_again.png" alt="">
</div>
</div>
<div class="device-content">
<img :src="data.lobbyImg | img" alt="" class="game-img">
<img v-if="data.playerId" :src="userImg[0]" alt="" class="user">
</div>
<!-- <div>
gameNameEn: {{ data.gameNameEn }}
</div>
<div>
assetNumber: {{ data.assetNumber }}
</div>
<div>
id: {{ data.id }}
</div> -->
<div class="num-box">
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_ellipse_03.png" alt="">
<div class="num">{{ data.egmId }}</div>
</div>
</div>
<div class="device-content">
<img :src="data.lobbyImg | img" alt="" class="game-img">
<img v-if="data.playerId" :src="userImg[0]" alt="" class="user">
</div>
<!-- <div>
gameNameEn: {{ data.gameNameEn }}
</div>
<div>
assetNumber: {{ data.assetNumber }}
</div>
<div>
id: {{ data.id }}
</div> -->
<div class="num-box">
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_ellipse_03.png" alt="">
<div class="num">{{ data.egmId }}</div>
</div>
<DeviceDialog ref="dialog"/>
<DeviceDialog ref="dialog" :data="data" @start="() => click().joinGasme(data)"/>
</div>
</template>
......
components/dialog/device.vue
View file @ a6694724
<template>
<Dialog
ref="dialog"
width="502px"
height="300px"
width="602px"
height="440px"
>
<img v-audio class="close btn" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rectangle%201175%20copy.png" alt="" @click.stop="visible = false">
<div class="bg"/>
<div class="content">
cibtebt
<div class="left-box">
<div class="title">
{{ data.gameNameEn }}
</div>
<div class="game-img">
<img :src="data.beforeGameImg | img" alt="" class="img">
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/gameMore/start_button.png" class="start btn" alt="" @click="$emit('start')">
</div>
<div class="line">
50 LINES
</div>
</div>
<div class="right-box">
<div class="box">
<div class="item">
<div class="label">
机台号
</div>
<div class="input" style="margin: 4px 0 0;">
<UiInput
:value="data.egmId"
:bg-height="30"
:line-height="24"
:margin-left="0"
text-align="center"
bg="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/info_box.png"
icon="" />
</div>
</div>
<div class="item">
<div class="label">
注数
</div>
<div class="input">
<UiInput
:value="data.playerDenomination"
:bg-height="30"
:line-height="24"
:margin-left="-40"
text-align="center"
style="height: 40px;"
bg="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/info_box.png"
icon="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/icon.png" />
</div>
</div>
<div class="item">
<div class="label">
连线
</div>
<div class="input">
<UiInput
:value="data.link"
:bg-height="30"
:line-height="24"
:margin-left="-40"
text-align="center"
bg="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/info_box.png"
icon="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/icon_02.png" />
</div>
</div>
<div class="item">
<div class="label">
最后出分
</div>
<div class="input">
<UiInput
:value="data.lastCashOut"
:bg-height="30"
:line-height="24"
:margin-left="-40"
text-align="center"
bg="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/info_box.png"
icon="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/icon_03.png" />
</div>
</div>
<div class="item">
<div class="label">
最高投注额(上限)
</div>
<div class="input">
<UiInput
:value="data.maxBet"
:bg-height="30"
:line-height="24"
:margin-left="-40"
text-align="center"
bg="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/info_box.png"
icon="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/icon_03(1).png" />
</div>
</div>
<div class="item">
<div class="label">
最高中奖记录
</div>
<div class="input">
<UiInput
:value="data.topWinHistory"
:bg-height="30"
:line-height="24"
:margin-left="-40"
text-align="center"
bg="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/info_box.png"
icon="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/icon_04.png" />
</div>
</div>
<div class="item">
<div class="label">
会员门槛要求
</div>
<div class="input">
<UiInput
:value="data.miniMemberLevelName"
:bg-height="30"
:line-height="24"
:margin-left="-40"
text-align="center"
bg="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/info_box.png"
icon="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/icon_06.png" />
</div>
</div>
</div>
</div>
</div>
</Dialog>
</template>
<script>
import Dialog from '@/components/dialog/index'
import UiInput from '@/components/ui/ui-input'
import { mapState } from 'vuex'
import dayjs from 'dayjs'
export default {
components: {
Dialog,
UiInput,
},
filters: {
filterTime(value) {
......@@ -59,6 +183,7 @@ export default {
},
show() {
this.visible = true
console.log('device', JSON.stringify(this.data))
},
},
}
......@@ -68,14 +193,79 @@ export default {
.bg {
background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/pop.png);
background-size: 100% 100%;
height: 100%;
width: 100%;
position: absolute;
}
.close {
position: absolute;
right: -20px;
top: -16px;
right: -10px;
top: -10px;
width: 38px;
z-index: 10;
z-index: 3;
}
.content {
display: flex;
height: 100%;
position: relative;
z-index: 1;
.left-box{
flex: none;
width: 263px;
/* background-color: rgba(255, 0, 0, 0.346); */
margin-left: 32px;
.title {
font-size: 24px;
text-shadow: 0px 0px 5px #091538;
padding: 20px 10px;
color: #f2ea07;
font-weight: bold;
text-align: center;
}
.game-img {
position: relative;
max-height: 310px;
.img {
max-width: 100%;
max-height: 310px;
display: block;
margin: auto;
}
.start {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
margin-left: -25px;
margin-top: -25px;
}
}
.line {
font-size: 22px;
font-weight: bold;
color: #f2ea07;
text-align: center;
padding: 8px;
}
}
.right-box{
flex: 1;
margin-right: 26px;
padding: 40px 25px 30px;
.box {
.item {
.label {
font-size: 14px;
line-height: 12px;
zoom: 0.9;
color: #080803;
text-align: center;
font-weight: bold;
/* background: red; */
}
}
}
}
}
</style>
components/ui/ui-input.vue
View file @ a6694724
<template>
<div class="ui-input">
<img :src="icon" class="icon" alt="">
<div :style="valueStyle" class="value">{{ value | filterValue }}</div>
<img v-if="icon" :src="icon" class="icon" alt="">
<div :style="valueStyle" class="value">{{ value }}</div>
</div>
</template>
......@@ -25,15 +25,41 @@ export default {
type: String,
default: '',
},
bgHeight: {
type: Number,
default: 20,
},
lineHeight: {
type: Number,
default: 20,
},
textAlign: {
type: String,
default: 'right',
},
marginLeft: {
type: Number,
default: -14
},
},
data() {
return {}
},
computed: {
valueStyle() {
const { bg } = this
const { bg, bgHeight, lineHeight, textAlign, icon, marginLeft, } = this
console.log('bgHeight', bgHeight)
const style = {}
style.backgroundImage = `url(${bg})`
style.height = `${bgHeight}px`
style.lineHeight = `${lineHeight}px`
style.textAlign = textAlign
if (!icon) {
style.marginLeft = '0px'
}
if (marginLeft) {
style.marginLeft = `${marginLeft}px`
}
return style
},
},
......
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