refactor: 简化 TableBullbull.vue 中重复的下注区域代码并调整 PlayWay.vue。
This commit is contained in:
li
parent
150a255933
commit
23b6841d37
@ -1,324 +1,133 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="nn">
|
<div class="nn-table">
|
||||||
<div class="list">
|
<!-- Player 1 Section -->
|
||||||
<!-- 闲1 -->
|
<div class="player-section" v-for="(pName, pIndex) in ['player_1', 'player_2', 'player_3']" :key="pName">
|
||||||
<span class="tab">{{ Lang[Type].player }}1</span>
|
<div class="section-header">
|
||||||
<!-- 庄翻倍 -->
|
<span class="title">{{ Lang[Type][pName.replace('_', '')] || (Type == 'cn' ? `闲${pIndex+1}` : `P${pIndex+1}`) }}</span>
|
||||||
<div class="item banker">
|
|
||||||
<confirmBet
|
|
||||||
@confirm="confirmChip"
|
|
||||||
@cancel="cancelChip"
|
|
||||||
@undo="undoChip"
|
|
||||||
:data="{
|
|
||||||
money: downChip.amount_player_1_banker_times,
|
|
||||||
show: touch == 'amount_player_1_banker_times',
|
|
||||||
times: true,
|
|
||||||
game_id: game_id
|
|
||||||
}"
|
|
||||||
></confirmBet>
|
|
||||||
<chipView
|
|
||||||
@click="downBet($event, 'amount_player_1_banker_times')"
|
|
||||||
:list="chipArray.amount_player_1_banker_times"
|
|
||||||
:win="winArray.includes('player_1_banker')"
|
|
||||||
></chipView>
|
|
||||||
<div class="text">
|
|
||||||
<span class="big">
|
|
||||||
{{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
|
|
||||||
</span>
|
|
||||||
<span>{{ Lang[Type].double }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="money">
|
|
||||||
{{ bet_amount_msg.amount_player_1_banker_times }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 庄平倍 -->
|
|
||||||
<div class="item banker">
|
|
||||||
<confirmBet
|
|
||||||
@confirm="confirmChip"
|
|
||||||
@cancel="cancelChip"
|
|
||||||
@undo="undoChip"
|
|
||||||
:data="{
|
|
||||||
money: downChip.amount_player_1_banker,
|
|
||||||
show: touch == 'amount_player_1_banker'
|
|
||||||
}"
|
|
||||||
></confirmBet>
|
|
||||||
<chipView
|
|
||||||
@click="downBet($event, 'amount_player_1_banker')"
|
|
||||||
:list="chipArray.amount_player_1_banker"
|
|
||||||
:win="winArray.includes('player_1_banker')"
|
|
||||||
></chipView>
|
|
||||||
<div class="text">
|
|
||||||
<span class="big">
|
|
||||||
{{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
|
|
||||||
</span>
|
|
||||||
<span>{{ Lang[Type].equal }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="money">{{ bet_amount_msg.amount_player_1_banker }}</div>
|
|
||||||
</div>
|
|
||||||
<!-- 闲翻倍 -->
|
|
||||||
<div class="item palyer">
|
|
||||||
<confirmBet
|
|
||||||
@confirm="confirmChip"
|
|
||||||
@cancel="cancelChip"
|
|
||||||
@undo="undoChip"
|
|
||||||
:data="{
|
|
||||||
money: downChip.amount_player_1_times,
|
|
||||||
show: touch == 'amount_player_1_times',
|
|
||||||
times: true,
|
|
||||||
game_id: game_id
|
|
||||||
}"
|
|
||||||
></confirmBet>
|
|
||||||
<chipView
|
|
||||||
@click="downBet($event, 'amount_player_1_times')"
|
|
||||||
:list="chipArray.amount_player_1_times"
|
|
||||||
:win="winArray.includes('player_1')"
|
|
||||||
></chipView>
|
|
||||||
<div class="text">
|
|
||||||
<span class="big">
|
|
||||||
{{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
|
|
||||||
</span>
|
|
||||||
<span>{{ Lang[Type].double }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="money">{{ bet_amount_msg.amount_player_1_times }}</div>
|
|
||||||
</div>
|
|
||||||
<!-- 闲平倍 -->
|
|
||||||
<div class="item palyer">
|
|
||||||
<confirmBet
|
|
||||||
@confirm="confirmChip"
|
|
||||||
@cancel="cancelChip"
|
|
||||||
@undo="undoChip"
|
|
||||||
:data="{
|
|
||||||
money: downChip.amount_player_1,
|
|
||||||
show: touch == 'amount_player_1'
|
|
||||||
}"
|
|
||||||
></confirmBet>
|
|
||||||
<chipView
|
|
||||||
@click="downBet($event, 'amount_player_1')"
|
|
||||||
:list="chipArray.amount_player_1"
|
|
||||||
:win="winArray.includes('player_1')"
|
|
||||||
></chipView>
|
|
||||||
<div class="text">
|
|
||||||
<span class="big">
|
|
||||||
{{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
|
|
||||||
</span>
|
|
||||||
<span>{{ Lang[Type].equal }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="money">{{ bet_amount_msg.amount_player_1 }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 闲2 -->
|
|
||||||
<div class="list">
|
|
||||||
<span class="tab">{{ Lang[Type].player }}2</span>
|
|
||||||
<!-- 庄翻倍 -->
|
|
||||||
<div class="item banker">
|
|
||||||
<confirmBet
|
|
||||||
@confirm="confirmChip"
|
|
||||||
@cancel="cancelChip"
|
|
||||||
@undo="undoChip"
|
|
||||||
:data="{
|
|
||||||
money: downChip.amount_player_2_banker_times,
|
|
||||||
show: touch == 'amount_player_2_banker_times',
|
|
||||||
times: true,
|
|
||||||
game_id: game_id
|
|
||||||
}"
|
|
||||||
></confirmBet>
|
|
||||||
<chipView
|
|
||||||
@click="downBet($event, 'amount_player_2_banker_times')"
|
|
||||||
:list="chipArray.amount_player_2_banker_times"
|
|
||||||
:win="winArray.includes('player_2_banker')"
|
|
||||||
></chipView>
|
|
||||||
<div class="text">
|
|
||||||
<span class="big">
|
|
||||||
{{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
|
|
||||||
</span>
|
|
||||||
<span>{{ Lang[Type].double }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="money">
|
|
||||||
{{ bet_amount_msg.amount_player_2_banker_times }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 庄平倍 -->
|
|
||||||
<div class="item banker">
|
|
||||||
<confirmBet
|
|
||||||
@confirm="confirmChip"
|
|
||||||
@cancel="cancelChip"
|
|
||||||
@undo="undoChip"
|
|
||||||
:data="{
|
|
||||||
money: downChip.amount_player_2_banker,
|
|
||||||
show: touch == 'amount_player_2_banker'
|
|
||||||
}"
|
|
||||||
></confirmBet>
|
|
||||||
<chipView
|
|
||||||
@click="downBet($event, 'amount_player_2_banker')"
|
|
||||||
:list="chipArray.amount_player_2_banker"
|
|
||||||
:win="winArray.includes('player_2_banker')"
|
|
||||||
></chipView>
|
|
||||||
<div class="text">
|
|
||||||
<span class="big">
|
|
||||||
{{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
|
|
||||||
</span>
|
|
||||||
<span>{{ Lang[Type].equal }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="money">
|
|
||||||
{{ bet_amount_msg.amount_player_2_banker }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 闲翻倍 -->
|
|
||||||
<div class="item palyer">
|
|
||||||
<confirmBet
|
|
||||||
@confirm="confirmChip"
|
|
||||||
@cancel="cancelChip"
|
|
||||||
@undo="undoChip"
|
|
||||||
:data="{
|
|
||||||
money: downChip.amount_player_2_times,
|
|
||||||
show: touch == 'amount_player_2_times',
|
|
||||||
times: true,
|
|
||||||
game_id: game_id
|
|
||||||
}"
|
|
||||||
></confirmBet>
|
|
||||||
<chipView
|
|
||||||
@click="downBet($event, 'amount_player_2_times')"
|
|
||||||
:list="chipArray.amount_player_2_times"
|
|
||||||
:win="winArray.includes('player_2')"
|
|
||||||
></chipView>
|
|
||||||
<div class="text">
|
|
||||||
<span class="big">
|
|
||||||
{{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
|
|
||||||
</span>
|
|
||||||
<span>{{ Lang[Type].double }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="money">{{ bet_amount_msg.amount_player_2_times }}</div>
|
|
||||||
</div>
|
|
||||||
<!-- 闲平倍 -->
|
|
||||||
<div class="item palyer">
|
|
||||||
<confirmBet
|
|
||||||
@confirm="confirmChip"
|
|
||||||
@cancel="cancelChip"
|
|
||||||
@undo="undoChip"
|
|
||||||
:data="{
|
|
||||||
money: downChip.amount_player_2,
|
|
||||||
show: touch == 'amount_player_2'
|
|
||||||
}"
|
|
||||||
></confirmBet>
|
|
||||||
<chipView
|
|
||||||
@click="downBet($event, 'amount_player_2')"
|
|
||||||
:list="chipArray.amount_player_2"
|
|
||||||
:win="winArray.includes('player_2')"
|
|
||||||
></chipView>
|
|
||||||
<div class="text">
|
|
||||||
<span class="big">
|
|
||||||
{{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
|
|
||||||
</span>
|
|
||||||
<span>{{ Lang[Type].equal }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="money">{{ bet_amount_msg.amount_player_2 }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 闲3 -->
|
|
||||||
<div class="list">
|
|
||||||
<span class="tab">{{ Lang[Type].player }}3</span>
|
|
||||||
<!-- 庄翻倍 -->
|
|
||||||
<div class="item banker">
|
|
||||||
<confirmBet
|
|
||||||
@confirm="confirmChip"
|
|
||||||
@cancel="cancelChip"
|
|
||||||
@undo="undoChip"
|
|
||||||
:data="{
|
|
||||||
money: downChip.amount_player_3_banker_times,
|
|
||||||
show: touch == 'amount_player_3_banker_times',
|
|
||||||
times: true,
|
|
||||||
game_id: game_id
|
|
||||||
}"
|
|
||||||
></confirmBet>
|
|
||||||
<chipView
|
|
||||||
@click="downBet($event, 'amount_player_3_banker_times')"
|
|
||||||
:list="chipArray.amount_player_3_banker_times"
|
|
||||||
:win="winArray.includes('player_3_banker')"
|
|
||||||
></chipView>
|
|
||||||
<div class="text">
|
|
||||||
<span class="big">
|
|
||||||
{{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
|
|
||||||
</span>
|
|
||||||
<span>{{ Lang[Type].double }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="money">
|
<div class="betting-grid">
|
||||||
{{ bet_amount_msg.amount_player_3_banker_times }}
|
<!-- Banker Win Row -->
|
||||||
|
<div class="bet-row banker-row">
|
||||||
|
<!-- Banker Double -->
|
||||||
|
<div class="bet-cell">
|
||||||
|
<div class="cell-content" @click="downBet($event, `amount_${pName}_banker_times`)">
|
||||||
|
<div class="label">
|
||||||
|
<span class="role banker">{{ Lang[Type].banker }}</span>
|
||||||
|
<span class="mode">{{ Lang[Type].double }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="odds">1:0.97</div>
|
||||||
<!-- 庄平倍 -->
|
|
||||||
<div class="item banker">
|
|
||||||
<confirmBet
|
|
||||||
@confirm="confirmChip"
|
|
||||||
@cancel="cancelChip"
|
|
||||||
@undo="undoChip"
|
|
||||||
:data="{
|
|
||||||
money: downChip.amount_player_3_banker,
|
|
||||||
show: touch == 'amount_player_3_banker'
|
|
||||||
}"
|
|
||||||
></confirmBet>
|
|
||||||
<chipView
|
<chipView
|
||||||
@click="downBet($event, 'amount_player_3_banker')"
|
:list="chipArray[`amount_${pName}_banker_times`]"
|
||||||
:list="chipArray.amount_player_3_banker"
|
:win="winArray.includes(`${pName}_banker`)"
|
||||||
:win="winArray.includes('player_3_banker')"
|
|
||||||
></chipView>
|
></chipView>
|
||||||
<div class="text">
|
<div class="money" v-if="bet_amount_msg[`amount_${pName}_banker_times`]">
|
||||||
<span class="big">
|
<div class="coin-icon"></div>
|
||||||
{{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
|
{{ bet_amount_msg[`amount_${pName}_banker_times`] }}
|
||||||
</span>
|
|
||||||
<span>{{ Lang[Type].equal }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="money">{{ bet_amount_msg.amount_player_3_banker }}</div>
|
|
||||||
</div>
|
|
||||||
<!-- 闲翻倍 -->
|
|
||||||
<div class="item palyer">
|
|
||||||
<confirmBet
|
<confirmBet
|
||||||
@confirm="confirmChip"
|
@confirm="confirmChip"
|
||||||
@cancel="cancelChip"
|
@cancel="cancelChip"
|
||||||
@undo="undoChip"
|
@undo="undoChip"
|
||||||
:data="{
|
:data="{
|
||||||
money: downChip.amount_player_3_times,
|
money: downChip[`amount_${pName}_banker_times`],
|
||||||
show: touch == 'amount_player_3_times',
|
show: touch == `amount_${pName}_banker_times`,
|
||||||
times: true,
|
times: true,
|
||||||
game_id: game_id
|
game_id: game_id
|
||||||
}"
|
}"
|
||||||
></confirmBet>
|
></confirmBet>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Banker Equal -->
|
||||||
|
<div class="bet-cell">
|
||||||
|
<div class="cell-content" @click="downBet($event, `amount_${pName}_banker`)">
|
||||||
|
<div class="label">
|
||||||
|
<span class="role banker">{{ Lang[Type].banker }}</span>
|
||||||
|
<span class="mode">{{ Lang[Type].equal }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="odds">1:0.97</div>
|
||||||
<chipView
|
<chipView
|
||||||
@click="downBet($event, 'amount_player_3_times')"
|
:list="chipArray[`amount_${pName}_banker`]"
|
||||||
:list="chipArray.amount_player_3_times"
|
:win="winArray.includes(`${pName}_banker`)"
|
||||||
:win="winArray.includes('player_3')"
|
|
||||||
></chipView>
|
></chipView>
|
||||||
<div class="text">
|
<div class="money" v-if="bet_amount_msg[`amount_${pName}_banker`]">
|
||||||
<span class="big">
|
<div class="coin-icon"></div>
|
||||||
{{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
|
{{ bet_amount_msg[`amount_${pName}_banker`] }}
|
||||||
</span>
|
|
||||||
<span>{{ Lang[Type].double }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="money">{{ bet_amount_msg.amount_player_3_times }}</div>
|
|
||||||
</div>
|
|
||||||
<!-- 闲平倍 -->
|
|
||||||
<div class="item palyer">
|
|
||||||
<confirmBet
|
<confirmBet
|
||||||
@confirm="confirmChip"
|
@confirm="confirmChip"
|
||||||
@cancel="cancelChip"
|
@cancel="cancelChip"
|
||||||
@undo="undoChip"
|
@undo="undoChip"
|
||||||
:data="{
|
:data="{
|
||||||
money: downChip.amount_player_3,
|
money: downChip[`amount_${pName}_banker`],
|
||||||
show: touch == 'amount_player_3'
|
show: touch == `amount_${pName}_banker`
|
||||||
}"
|
}"
|
||||||
></confirmBet>
|
></confirmBet>
|
||||||
<chipView
|
|
||||||
@click="downBet($event, 'amount_player_3')"
|
|
||||||
:list="chipArray.amount_player_3"
|
|
||||||
:win="winArray.includes('player_3')"
|
|
||||||
></chipView>
|
|
||||||
<div class="text">
|
|
||||||
<span class="big">
|
|
||||||
{{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
|
|
||||||
</span>
|
|
||||||
<span>{{ Lang[Type].equal }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="money">{{ bet_amount_msg.amount_player_3 }}</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Player Win Row -->
|
||||||
|
<div class="bet-row player-row">
|
||||||
|
<!-- Player Double -->
|
||||||
|
<div class="bet-cell">
|
||||||
|
<div class="cell-content" @click="downBet($event, `amount_${pName}_times`)">
|
||||||
|
<div class="label">
|
||||||
|
<span class="role player">{{ Lang[Type].player }}</span>
|
||||||
|
<span class="mode">{{ Lang[Type].double }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="odds">1:0.97</div>
|
||||||
|
<chipView
|
||||||
|
:list="chipArray[`amount_${pName}_times`]"
|
||||||
|
:win="winArray.includes(pName)"
|
||||||
|
></chipView>
|
||||||
|
<div class="money" v-if="bet_amount_msg[`amount_${pName}_times`]">
|
||||||
|
<div class="coin-icon"></div>
|
||||||
|
{{ bet_amount_msg[`amount_${pName}_times`] }}
|
||||||
|
</div>
|
||||||
|
<confirmBet
|
||||||
|
@confirm="confirmChip"
|
||||||
|
@cancel="cancelChip"
|
||||||
|
@undo="undoChip"
|
||||||
|
:data="{
|
||||||
|
money: downChip[`amount_${pName}_times`],
|
||||||
|
show: touch == `amount_${pName}_times`,
|
||||||
|
times: true,
|
||||||
|
game_id: game_id
|
||||||
|
}"
|
||||||
|
></confirmBet>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Player Equal -->
|
||||||
|
<div class="bet-cell">
|
||||||
|
<div class="cell-content" @click="downBet($event, `amount_${pName}`)">
|
||||||
|
<div class="label">
|
||||||
|
<span class="role player">{{ Lang[Type].player }}</span>
|
||||||
|
<span class="mode">{{ Lang[Type].equal }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="odds">1:0.97</div>
|
||||||
|
<chipView
|
||||||
|
:list="chipArray[`amount_${pName}`]"
|
||||||
|
:win="winArray.includes(pName)"
|
||||||
|
></chipView>
|
||||||
|
<div class="money" v-if="bet_amount_msg[`amount_${pName}`]">
|
||||||
|
<div class="coin-icon"></div>
|
||||||
|
{{ bet_amount_msg[`amount_${pName}`] }}
|
||||||
|
</div>
|
||||||
|
<confirmBet
|
||||||
|
@confirm="confirmChip"
|
||||||
|
@cancel="cancelChip"
|
||||||
|
@undo="undoChip"
|
||||||
|
:data="{
|
||||||
|
money: downChip[`amount_${pName}`],
|
||||||
|
show: touch == `amount_${pName}`
|
||||||
|
}"
|
||||||
|
></confirmBet>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -330,43 +139,23 @@ import { useStore } from "vuex"
|
|||||||
import confirmBet from "@/components/confirmBet.vue"
|
import confirmBet from "@/components/confirmBet.vue"
|
||||||
import chipView from "@/components/chipView.vue"
|
import chipView from "@/components/chipView.vue"
|
||||||
import { nnData } from "@/utils/common"
|
import { nnData } from "@/utils/common"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "TableBullbull",
|
name: "TableBullbull",
|
||||||
components: { confirmBet, chipView },
|
components: { confirmBet, chipView },
|
||||||
props: {
|
props: {
|
||||||
game_id: {
|
game_id: { type: [String, Number], default: 1 },
|
||||||
type: [String, Number],
|
touch: { type: String, default: "" },
|
||||||
default: 1
|
bet_amount_msg: { type: Object, default: () => ({ ...nnData.amount }) },
|
||||||
|
winArray: { type: Array, default: () => [] },
|
||||||
|
downChip: { type: Object, default: () => ({ ...nnData.amount }) },
|
||||||
|
chipArray: { type: Object, default: () => ({ ...nnData.array }) }
|
||||||
},
|
},
|
||||||
touch: {
|
setup(props, context) {
|
||||||
type: String,
|
|
||||||
default: ""
|
|
||||||
},
|
|
||||||
bet_amount_msg: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({
|
|
||||||
...nnData.amount
|
|
||||||
})
|
|
||||||
},
|
|
||||||
winArray: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
downChip: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({
|
|
||||||
...nnData.amount
|
|
||||||
})
|
|
||||||
},
|
|
||||||
chipArray: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({ ...nnData.array })
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setup(prop, context) {
|
|
||||||
const store = useStore()
|
const store = useStore()
|
||||||
const Type = computed(() => store.state.config.$Type)
|
const Type = computed(() => store.state.config.$Type)
|
||||||
const Lang = computed(() => store.state.config.$lang)
|
const Lang = computed(() => store.state.config.$lang)
|
||||||
|
|
||||||
const downBet = (e, type) => {
|
const downBet = (e, type) => {
|
||||||
context.emit("downBet", e, type)
|
context.emit("downBet", e, type)
|
||||||
}
|
}
|
||||||
@ -379,163 +168,157 @@ export default {
|
|||||||
const undoChip = () => {
|
const undoChip = () => {
|
||||||
context.emit("undoChip")
|
context.emit("undoChip")
|
||||||
}
|
}
|
||||||
|
|
||||||
return { Type, Lang, downBet, confirmChip, cancelChip, undoChip }
|
return { Type, Lang, downBet, confirmChip, cancelChip, undoChip }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
/* 深色豪华主题配色 */
|
/* Color Variables */
|
||||||
$border-color: #444;
|
$teal: #59cfa8;
|
||||||
$text-secondary: #888;
|
$teal-dark: #3aa684;
|
||||||
$gold: #c5a059;
|
$bg-dark: rgba(20, 30, 30, 0.95);
|
||||||
|
$bg-panel: rgba(255, 255, 255, 0.05);
|
||||||
|
$border-light: rgba(89, 207, 168, 0.3);
|
||||||
|
$text-gold: #c5a059;
|
||||||
|
$text-blue: #409eff;
|
||||||
|
$text-red: #f56c6c;
|
||||||
|
|
||||||
.nn {
|
.nn-table {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: rgba(30, 30, 30, 0.95);
|
|
||||||
.list {
|
|
||||||
width: 33.33%;
|
|
||||||
height: 100%;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
border: none;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
box-sizing: border-box;
|
|
||||||
&:first-child {
|
|
||||||
.item:nth-of-type(1) {
|
|
||||||
.chip-view {
|
|
||||||
border-top-left-radius: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.item:nth-of-type(3) {
|
|
||||||
.chip-view {
|
|
||||||
border-bottom-left-radius: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
.item:nth-of-type(2) {
|
|
||||||
border-right: none;
|
|
||||||
.chip-view {
|
|
||||||
border-top-right-radius: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.item:nth-of-type(4) {
|
|
||||||
border-right: none;
|
|
||||||
.chip-view {
|
|
||||||
border-bottom-right-radius: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.tab {
|
|
||||||
position: absolute;
|
|
||||||
top: -2px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 0.42rem;
|
|
||||||
border: 1px solid $gold;
|
|
||||||
padding: 1px 0.18rem;
|
|
||||||
transform: scale(0.8) translateX(-50%);
|
|
||||||
left: 50%;
|
|
||||||
z-index: 2;
|
|
||||||
background: rgba(30, 30, 30, 0.9);
|
|
||||||
border-radius: 2px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.item {
|
|
||||||
position: relative;
|
|
||||||
width: 50%;
|
|
||||||
height: 50%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-right: 1px solid $border-color;
|
|
||||||
border-radius: 0;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
font-size: 0.45rem;
|
|
||||||
&:nth-of-type(3),
|
|
||||||
&:nth-of-type(4) {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
&.unclick {
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 102%;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
top: 50%;
|
|
||||||
transform: rotate(14deg);
|
|
||||||
z-index: 6;
|
|
||||||
left: -2px;
|
|
||||||
}
|
|
||||||
&.max:after {
|
|
||||||
width: 104%;
|
|
||||||
transform: rotate(21deg);
|
|
||||||
}
|
|
||||||
&.min:after {
|
|
||||||
width: 104%;
|
|
||||||
transform: rotate(21deg);
|
|
||||||
}
|
|
||||||
.chip-view {
|
|
||||||
background: rgba(98, 74, 4, 0.4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chip-box {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 0;
|
padding: 0 4px; /* Slight padding from edges */
|
||||||
top: 0;
|
box-sizing: border-box;
|
||||||
&:active {
|
gap: 4px;
|
||||||
background: rgba(255, 255, 255, 0.15);
|
}
|
||||||
}
|
|
||||||
}
|
.player-section {
|
||||||
.text {
|
flex: 1;
|
||||||
position: relative;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 1px solid $border-light;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: $bg-dark;
|
||||||
|
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
height: 32px;
|
||||||
|
background: linear-gradient(to bottom, rgba(89, 207, 168, 0.2), rgba(89, 207, 168, 0.05));
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100%;
|
justify-content: center;
|
||||||
line-height: 1;
|
border-bottom: 1px solid $border-light;
|
||||||
z-index: 2;
|
|
||||||
pointer-events: none;
|
.title {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
.big {
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding-right: 0.24rem;
|
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
|
||||||
padding-left: 0.2rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.betting-grid {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bet-row {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1px solid $border-light;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bet-cell {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
border-right: 1px solid $border-light;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
z-index: 2; /* Above chips */
|
||||||
|
|
||||||
|
.role {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
&.banker { color: $text-blue; text-shadow: 0 0 5px rgba(64, 158, 255, 0.3); }
|
||||||
|
&.player { color: $teal; text-shadow: 0 0 5px rgba(89, 207, 168, 0.3); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #ccc;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.odds {
|
||||||
|
font-size: 10px;
|
||||||
|
color: rgba(255,255,255,0.6);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
.money {
|
.money {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0px;
|
bottom: 4px;
|
||||||
bottom: -2px;
|
left: 50%;
|
||||||
font-size: 0.24rem;
|
transform: translateX(-50%);
|
||||||
font-weight: normal;
|
background: rgba(0,0,0,0.6);
|
||||||
transform: scale(0.7);
|
padding: 2px 8px;
|
||||||
color: $text-secondary;
|
border-radius: 10px;
|
||||||
vertical-align: bottom;
|
color: #ffd700;
|
||||||
pointer-events: none;
|
font-size: 12px;
|
||||||
&::before {
|
white-space: nowrap;
|
||||||
display: inline-block;
|
display: flex;
|
||||||
content: "总";
|
align-items: center;
|
||||||
background: rgba(255, 255, 255, 0.2);
|
gap: 2px;
|
||||||
font-size: 10px;
|
z-index: 5;
|
||||||
border-radius: 0.615rem;
|
|
||||||
width: 0.615rem;
|
.coin-icon {
|
||||||
height: 0.615rem;
|
width: 10px;
|
||||||
text-align: center;
|
height: 10px;
|
||||||
line-height: 0.615rem;
|
border-radius: 50%;
|
||||||
font-weight: normal;
|
background: #ffd700;
|
||||||
margin-right: 0.06rem;
|
border: 1px solid #b8860b;
|
||||||
transform: scale(0.7);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.text {
|
|
||||||
font-size: 0.58rem;
|
|
||||||
text-shadow: 1px 1px #050505;
|
|
||||||
span {
|
|
||||||
padding-bottom: 0.2rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Win overlay effect */
|
||||||
|
:deep(.chip-view.win) {
|
||||||
|
box-shadow: inset 0 0 15px rgba(255, 215, 0, 0.4);
|
||||||
|
background: rgba(255, 215, 0, 0.1);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,11 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="playway" :class="{ 'white-theme': [1, 2].includes(tableData.game_id) }">
|
<div class="playway" :class="{ 'white-theme': [1, 2, 4, 5].includes(tableData.game_id) }">
|
||||||
|
|
||||||
<!-- New Baccarat/DT Layout -->
|
<!-- New Baccarat/DT Layout (and NiuNiu reuse) -->
|
||||||
<div class="baccarat-view" v-if="[1, 2].includes(tableData.game_id)">
|
<div class="baccarat-view" v-if="[1, 2, 4, 5].includes(tableData.game_id)">
|
||||||
<!-- Top Header Bar -->
|
<!-- Top Header Bar -->
|
||||||
<div class="header-bar">
|
<div class="header-bar">
|
||||||
<div class="left-stats">
|
<div class="left-stats" v-if="[1, 2].includes(tableData.game_id)">
|
||||||
<div class="stat-item">
|
<div class="stat-item">
|
||||||
<span class="badge red">{{ Lang[Type].banker }}</span>
|
<span class="badge red">{{ Lang[Type].banker }}</span>
|
||||||
<span class="val red">{{ tableData.bankerCount || 0 }}</span>
|
<span class="val red">{{ tableData.bankerCount || 0 }}</span>
|
||||||
@ -31,6 +31,17 @@
|
|||||||
<span class="game-info">{{ tableData.number_tab_number || '0-0' }}</span>
|
<span class="game-info">{{ tableData.number_tab_number || '0-0' }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- NiuNiu Stats -->
|
||||||
|
<div class="left-stats" v-else-if="[4, 5].includes(tableData.game_id)">
|
||||||
|
<div class="stat-item" v-for="(val, key) in tableData.count" :key="key">
|
||||||
|
<span class="badge black">{{ key }}</span>
|
||||||
|
<span class="val black">{{ val }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item g-num">
|
||||||
|
<span class="badge black">{{ Lang[Type].game }}</span>
|
||||||
|
<span class="game-info">{{ tableData.number_tab_number || '0-0' }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Main Road Area -->
|
<!-- Main Road Area -->
|
||||||
@ -38,9 +49,8 @@
|
|||||||
<div class="road-box">
|
<div class="road-box">
|
||||||
<canvas class="canvas" ref="refItem"></canvas>
|
<canvas class="canvas" ref="refItem"></canvas>
|
||||||
|
|
||||||
<!-- Ask Way Overlay (Bottom Right) - Floating style to match reference -->
|
<!-- Ask Way Overlay (Bottom Right) -->
|
||||||
<!-- Ask Way Overlay (Bottom Right) - Boxed style to match reference -->
|
<div class="ask-panel" v-if="[1,2].includes(tableData.game_id)">
|
||||||
<div class="ask-panel">
|
|
||||||
<div class="ask-group banker" @click="askWay('banker')">
|
<div class="ask-group banker" @click="askWay('banker')">
|
||||||
<div class="ask-title text-red">{{ Lang[Type].askbanker }}</div>
|
<div class="ask-title text-red">{{ Lang[Type].askbanker }}</div>
|
||||||
<div class="ask-icons">
|
<div class="ask-icons">
|
||||||
@ -77,7 +87,7 @@
|
|||||||
<div class="canvas-box">
|
<div class="canvas-box">
|
||||||
<canvas class="canvas" ref="refItem"></canvas>
|
<canvas class="canvas" ref="refItem"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div class="totle-box" v-if="[4,5,6,7,8].includes(tableData.game_id)">
|
<div class="totle-box" v-if="[6,7,8].includes(tableData.game_id)">
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<div class="item" v-for="(val, key) in tableData.count" :key="key">
|
<div class="item" v-for="(val, key) in tableData.count" :key="key">
|
||||||
<span class="lab">{{key}}</span><span class="num">{{val}}</span>
|
<span class="lab">{{key}}</span><span class="num">{{val}}</span>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user