Skip to content

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

弹窗

parent fc006c96
Show whitespace changes
Inline Side-by-side
Showing with 249 additions and 31 deletions
components/common/device/index.vue
View file @ a6694724
<template> <template>
<div v-audio :class="{btn: !data.playerId}" class="device-box" @click="click().joinGasme(data)"> <div>
<div v-audio :class="{btn: !data.playerId}" class="device-box" @click="click().showJoinGasme(data)">
<div class="header"> <div class="header">
<div v-if="header === 'title'" class="game-name">{{ data.gameNameEn }}</div> <div v-if="header === 'title'" class="game-name">{{ data.gameNameEn }}</div>
<div v-if="header === 'player'"> <div v-if="header === 'player'">
...@@ -23,7 +24,8 @@ ...@@ -23,7 +24,8 @@
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_ellipse_03.png" alt=""> <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 class="num">{{ data.egmId }}</div>
</div> </div>
<DeviceDialog ref="dialog"/> </div>
<DeviceDialog ref="dialog" :data="data" @start="() => click().joinGasme(data)"/>
</div> </div>
</template> </template>
......
components/dialog/device.vue
View file @ a6694724
<template> <template>
<Dialog <Dialog
ref="dialog" ref="dialog"
width="502px" width="602px"
height="300px" 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="bg"/>
<div class="content"> <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> </div>
</Dialog> </Dialog>
</template> </template>
<script> <script>
import Dialog from '@/components/dialog/index' import Dialog from '@/components/dialog/index'
import UiInput from '@/components/ui/ui-input'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import dayjs from 'dayjs' import dayjs from 'dayjs'
export default { export default {
components: { components: {
Dialog, Dialog,
UiInput,
}, },
filters: { filters: {
filterTime(value) { filterTime(value) {
...@@ -59,6 +183,7 @@ export default { ...@@ -59,6 +183,7 @@ export default {
}, },
show() { show() {
this.visible = true this.visible = true
console.log('device', JSON.stringify(this.data))
}, },
}, },
} }
...@@ -68,14 +193,79 @@ export default { ...@@ -68,14 +193,79 @@ export default {
.bg { .bg {
background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/pop.png); background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/pop.png);
background-size: 100% 100%; background-size: 100% 100%;
height: 100%;
width: 100%;
position: absolute;
} }
.close { .close {
position: absolute; position: absolute;
right: -20px; right: -10px;
top: -16px; top: -10px;
width: 38px; width: 38px;
z-index: 10; z-index: 10;
z-index: 3;
} }
.content { .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> </style>
components/ui/ui-input.vue
View file @ a6694724
<template> <template>
<div class="ui-input"> <div class="ui-input">
<img :src="icon" class="icon" alt=""> <img v-if="icon" :src="icon" class="icon" alt="">
<div :style="valueStyle" class="value">{{ value | filterValue }}</div> <div :style="valueStyle" class="value">{{ value }}</div>
</div> </div>
</template> </template>
...@@ -25,15 +25,41 @@ export default { ...@@ -25,15 +25,41 @@ export default {
type: String, type: String,
default: '', default: '',
}, },
bgHeight: {
type: Number,
default: 20,
},
lineHeight: {
type: Number,
default: 20,
},
textAlign: {
type: String,
default: 'right',
},
marginLeft: {
type: Number,
default: -14
},
}, },
data() { data() {
return {} return {}
}, },
computed: { computed: {
valueStyle() { valueStyle() {
const { bg } = this const { bg, bgHeight, lineHeight, textAlign, icon, marginLeft, } = this
console.log('bgHeight', bgHeight)
const style = {} const style = {}
style.backgroundImage = `url(${bg})` 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 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