refactor: 重构百家乐和龙虎下注区域，优化布局和样式，增强用户交互体验
- 更新下注区域结构，采用更清晰的类名和样式 - 调整下注金额和赔率的显示方式，提升可读性 - 增加响应式设计，确保在不同屏幕尺寸下的良好展示 - 统一颜色变量，提升整体视觉一致性
This commit is contained in:
li
parent
495a069586
commit
669c5c3ed2
@ -1,185 +1,192 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="baccarat" :class="Type">
|
<div class="baccarat-table">
|
||||||
<!-- 第一行: 小 | 闲对 | 庄对 | 大 -->
|
<!-- 主要下注区域 -->
|
||||||
<div class="list top">
|
<div class="main-betting-area">
|
||||||
<!-- 小 -->
|
|
||||||
<div class="item grid-item" :class="{ unclick: can_bet_big_small != 1 }">
|
|
||||||
<confirmBet
|
|
||||||
@confirm="confirmChip"
|
|
||||||
@cancel="cancelChip"
|
|
||||||
@undo="undoChip"
|
|
||||||
:data="{
|
|
||||||
money: downChip.small_amount,
|
|
||||||
show: touch == 'small_amount'
|
|
||||||
}"
|
|
||||||
></confirmBet>
|
|
||||||
<chipView
|
|
||||||
@click="downBet($event, 'small_amount')"
|
|
||||||
:list="chipArray.small_amount"
|
|
||||||
:win="winArray.includes('small')"
|
|
||||||
></chipView>
|
|
||||||
<div class="text">
|
|
||||||
<span class="label text-blue">{{ Lang[Type].small }}</span>
|
|
||||||
<span class="odds">1:1.5</span>
|
|
||||||
</div>
|
|
||||||
<div class="money">
|
|
||||||
<i class="coin-icon"></i>
|
|
||||||
{{ bet_amount_msg.small_amount || 0 }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 闲对 -->
|
|
||||||
<div class="item grid-item">
|
|
||||||
<confirmBet
|
|
||||||
@confirm="confirmChip"
|
|
||||||
@cancel="cancelChip"
|
|
||||||
@undo="undoChip"
|
|
||||||
:data="{
|
|
||||||
money: downChip.player_pair_amount,
|
|
||||||
show: touch == 'player_pair_amount'
|
|
||||||
}"
|
|
||||||
></confirmBet>
|
|
||||||
<chipView
|
|
||||||
@click="downBet($event, 'player_pair_amount')"
|
|
||||||
:list="chipArray.player_pair_amount"
|
|
||||||
:win="winArray.includes('player_pair')"
|
|
||||||
></chipView>
|
|
||||||
<div class="text">
|
|
||||||
<span class="label text-blue">{{ Lang[Type].msg_player_pair }}</span>
|
|
||||||
<span class="odds">1:11</span>
|
|
||||||
</div>
|
|
||||||
<div class="money">
|
|
||||||
<i class="coin-icon"></i>
|
|
||||||
{{ bet_amount_msg.player_pair_amount || 0 }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 庄对 -->
|
|
||||||
<div class="item grid-item">
|
|
||||||
<confirmBet
|
|
||||||
@confirm="confirmChip"
|
|
||||||
@cancel="cancelChip"
|
|
||||||
@undo="undoChip"
|
|
||||||
:data="{
|
|
||||||
money: downChip.banker_pair_amount,
|
|
||||||
show: touch == 'banker_pair_amount'
|
|
||||||
}"
|
|
||||||
></confirmBet>
|
|
||||||
<chipView
|
|
||||||
@click="downBet($event, 'banker_pair_amount')"
|
|
||||||
:list="chipArray.banker_pair_amount"
|
|
||||||
:win="winArray.includes('banker_pair')"
|
|
||||||
></chipView>
|
|
||||||
<div class="text">
|
|
||||||
<span class="label text-red">{{ Lang[Type].msg_banker_pair }}</span>
|
|
||||||
<span class="odds">1:11</span>
|
|
||||||
</div>
|
|
||||||
<div class="money">
|
|
||||||
<i class="coin-icon"></i>
|
|
||||||
{{ bet_amount_msg.banker_pair_amount || 0 }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 大 -->
|
|
||||||
<div class="item grid-item" :class="{ unclick: can_bet_big_small != 1 }">
|
|
||||||
<confirmBet
|
|
||||||
@confirm="confirmChip"
|
|
||||||
@cancel="cancelChip"
|
|
||||||
@undo="undoChip"
|
|
||||||
:data="{ money: downChip.big_amount, show: touch == 'big_amount' }"
|
|
||||||
></confirmBet>
|
|
||||||
<chipView
|
|
||||||
@click="downBet($event, 'big_amount')"
|
|
||||||
:list="chipArray.big_amount"
|
|
||||||
:win="winArray.includes('big')"
|
|
||||||
></chipView>
|
|
||||||
<div class="text">
|
|
||||||
<span class="label text-red">{{ Lang[Type].big }}</span>
|
|
||||||
<span class="odds">1:0.5</span>
|
|
||||||
</div>
|
|
||||||
<div class="money">
|
|
||||||
<i class="coin-icon"></i>
|
|
||||||
{{ bet_amount_msg.big_amount || 0 }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 第二行: 闲 | 和 | 庄 -->
|
|
||||||
<div class="list bottom">
|
|
||||||
<!-- 闲 -->
|
<!-- 闲 -->
|
||||||
<div class="item grid-item">
|
<div class="bet-cell main-cell player-cell" @click="downBet($event, 'player_amount')">
|
||||||
<confirmBet
|
<div class="cell-content">
|
||||||
@confirm="confirmChip"
|
<div class="label">
|
||||||
@cancel="cancelChip"
|
<span class="role player">{{ Lang[Type].player }}</span>
|
||||||
@undo="undoChip"
|
</div>
|
||||||
:data="{
|
<div class="odds">1:{{ tableData.price_player }}</div>
|
||||||
money: downChip.player_amount,
|
<chipView
|
||||||
show: touch == 'player_amount'
|
:list="chipArray.player_amount"
|
||||||
}"
|
:win="winArray.includes('player')"
|
||||||
></confirmBet>
|
></chipView>
|
||||||
<chipView
|
<div class="money" v-if="bet_amount_msg.player_amount">
|
||||||
@click="downBet($event, 'player_amount')"
|
<div class="coin-icon"></div>
|
||||||
:list="chipArray.player_amount"
|
{{ bet_amount_msg.player_amount }}
|
||||||
:win="winArray.includes('player')"
|
</div>
|
||||||
></chipView>
|
<confirmBet
|
||||||
<div class="text">
|
@confirm="confirmChip"
|
||||||
<span class="label-large text-blue">{{ Lang[Type].player }}</span>
|
@cancel="cancelChip"
|
||||||
<span class="odds">1:{{ tableData.price_player }}</span>
|
@undo="undoChip"
|
||||||
</div>
|
:data="{
|
||||||
<div class="money">
|
money: downChip.player_amount,
|
||||||
<i class="coin-icon"></i>
|
show: touch == 'player_amount'
|
||||||
{{ bet_amount_msg.player_amount || 0 }}
|
}"
|
||||||
|
></confirmBet>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 和 -->
|
<!-- 和 -->
|
||||||
<div class="item grid-item">
|
<div class="bet-cell main-cell tie-cell" @click="downBet($event, 'tie_amount')">
|
||||||
<confirmBet
|
<div class="cell-content">
|
||||||
@confirm="confirmChip"
|
<div class="label">
|
||||||
@cancel="cancelChip"
|
<span class="role tie">{{ Lang[Type].tie }}</span>
|
||||||
@undo="undoChip"
|
</div>
|
||||||
:data="{ money: downChip.tie_amount, show: touch == 'tie_amount' }"
|
<div class="odds">1:{{ tableData.price_tie_baccarat }}</div>
|
||||||
></confirmBet>
|
<chipView
|
||||||
<chipView
|
:list="chipArray.tie_amount"
|
||||||
@click="downBet($event, 'tie_amount')"
|
:win="winArray.includes('tie')"
|
||||||
:list="chipArray.tie_amount"
|
></chipView>
|
||||||
:win="winArray.includes('tie')"
|
<div class="money" v-if="bet_amount_msg.tie_amount">
|
||||||
></chipView>
|
<div class="coin-icon"></div>
|
||||||
<div class="text">
|
{{ bet_amount_msg.tie_amount }}
|
||||||
<span class="label-large text-green">{{ Lang[Type].tie }}</span>
|
</div>
|
||||||
<span class="odds">1:{{ tableData.price_tie_baccarat }}</span>
|
<confirmBet
|
||||||
</div>
|
@confirm="confirmChip"
|
||||||
<div class="money">
|
@cancel="cancelChip"
|
||||||
<i class="coin-icon"></i>
|
@undo="undoChip"
|
||||||
{{ bet_amount_msg.tie_amount || 0 }}
|
:data="{ money: downChip.tie_amount, show: touch == 'tie_amount' }"
|
||||||
|
></confirmBet>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 庄 -->
|
<!-- 庄 -->
|
||||||
<div class="item grid-item">
|
<div class="bet-cell main-cell banker-cell" @click="downBet($event, 'banker_amount')">
|
||||||
<confirmBet
|
<div class="cell-content">
|
||||||
@confirm="confirmChip"
|
<div class="label">
|
||||||
@cancel="cancelChip"
|
<span class="role banker">{{ Lang[Type].banker }}</span>
|
||||||
@undo="undoChip"
|
</div>
|
||||||
:data="{
|
<div class="odds">
|
||||||
money: downChip.banker_amount,
|
|
||||||
show: touch == 'banker_amount'
|
|
||||||
}"
|
|
||||||
></confirmBet>
|
|
||||||
<chipView
|
|
||||||
@click="downBet($event, 'banker_amount')"
|
|
||||||
:list="chipArray.banker_amount"
|
|
||||||
:win="winArray.includes('banker')"
|
|
||||||
></chipView>
|
|
||||||
<div class="text">
|
|
||||||
<span class="label-large text-red">{{ Lang[Type].banker }}</span>
|
|
||||||
<span class="odds">
|
|
||||||
{{ baccarat_type == 0 ? `1:${tableData.price_banker}` : "1:1" }}
|
{{ baccarat_type == 0 ? `1:${tableData.price_banker}` : "1:1" }}
|
||||||
</span>
|
</div>
|
||||||
|
<chipView
|
||||||
|
:list="chipArray.banker_amount"
|
||||||
|
:win="winArray.includes('banker')"
|
||||||
|
></chipView>
|
||||||
|
<div class="money" v-if="bet_amount_msg.banker_amount">
|
||||||
|
<div class="coin-icon"></div>
|
||||||
|
{{ bet_amount_msg.banker_amount }}
|
||||||
|
</div>
|
||||||
|
<confirmBet
|
||||||
|
@confirm="confirmChip"
|
||||||
|
@cancel="cancelChip"
|
||||||
|
@undo="undoChip"
|
||||||
|
:data="{
|
||||||
|
money: downChip.banker_amount,
|
||||||
|
show: touch == 'banker_amount'
|
||||||
|
}"
|
||||||
|
></confirmBet>
|
||||||
</div>
|
</div>
|
||||||
<div class="money">
|
</div>
|
||||||
<i class="coin-icon"></i>
|
</div>
|
||||||
{{ bet_amount_msg.banker_amount || 0 }}
|
|
||||||
|
<!-- 副下注区域 -->
|
||||||
|
<div class="side-betting-area">
|
||||||
|
<!-- 小 -->
|
||||||
|
<div class="bet-cell side-cell" :class="{ unclick: can_bet_big_small != 1 }" @click="downBet($event, 'small_amount')">
|
||||||
|
<div class="cell-content">
|
||||||
|
<div class="label">
|
||||||
|
<span class="role side">{{ Lang[Type].small }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="odds">1:1.5</div>
|
||||||
|
<chipView
|
||||||
|
:list="chipArray.small_amount"
|
||||||
|
:win="winArray.includes('small')"
|
||||||
|
></chipView>
|
||||||
|
<div class="money" v-if="bet_amount_msg.small_amount">
|
||||||
|
<div class="coin-icon"></div>
|
||||||
|
{{ bet_amount_msg.small_amount }}
|
||||||
|
</div>
|
||||||
|
<confirmBet
|
||||||
|
@confirm="confirmChip"
|
||||||
|
@cancel="cancelChip"
|
||||||
|
@undo="undoChip"
|
||||||
|
:data="{
|
||||||
|
money: downChip.small_amount,
|
||||||
|
show: touch == 'small_amount'
|
||||||
|
}"
|
||||||
|
></confirmBet>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 闲对 -->
|
||||||
|
<div class="bet-cell side-cell" @click="downBet($event, 'player_pair_amount')">
|
||||||
|
<div class="cell-content">
|
||||||
|
<div class="label">
|
||||||
|
<span class="role side">{{ Lang[Type].msg_player_pair }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="odds">1:11</div>
|
||||||
|
<chipView
|
||||||
|
:list="chipArray.player_pair_amount"
|
||||||
|
:win="winArray.includes('player_pair')"
|
||||||
|
></chipView>
|
||||||
|
<div class="money" v-if="bet_amount_msg.player_pair_amount">
|
||||||
|
<div class="coin-icon"></div>
|
||||||
|
{{ bet_amount_msg.player_pair_amount }}
|
||||||
|
</div>
|
||||||
|
<confirmBet
|
||||||
|
@confirm="confirmChip"
|
||||||
|
@cancel="cancelChip"
|
||||||
|
@undo="undoChip"
|
||||||
|
:data="{
|
||||||
|
money: downChip.player_pair_amount,
|
||||||
|
show: touch == 'player_pair_amount'
|
||||||
|
}"
|
||||||
|
></confirmBet>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 庄对 -->
|
||||||
|
<div class="bet-cell side-cell" @click="downBet($event, 'banker_pair_amount')">
|
||||||
|
<div class="cell-content">
|
||||||
|
<div class="label">
|
||||||
|
<span class="role side">{{ Lang[Type].msg_banker_pair }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="odds">1:11</div>
|
||||||
|
<chipView
|
||||||
|
:list="chipArray.banker_pair_amount"
|
||||||
|
:win="winArray.includes('banker_pair')"
|
||||||
|
></chipView>
|
||||||
|
<div class="money" v-if="bet_amount_msg.banker_pair_amount">
|
||||||
|
<div class="coin-icon"></div>
|
||||||
|
{{ bet_amount_msg.banker_pair_amount }}
|
||||||
|
</div>
|
||||||
|
<confirmBet
|
||||||
|
@confirm="confirmChip"
|
||||||
|
@cancel="cancelChip"
|
||||||
|
@undo="undoChip"
|
||||||
|
:data="{
|
||||||
|
money: downChip.banker_pair_amount,
|
||||||
|
show: touch == 'banker_pair_amount'
|
||||||
|
}"
|
||||||
|
></confirmBet>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 大 -->
|
||||||
|
<div class="bet-cell side-cell" :class="{ unclick: can_bet_big_small != 1 }" @click="downBet($event, 'big_amount')">
|
||||||
|
<div class="cell-content">
|
||||||
|
<div class="label">
|
||||||
|
<span class="role side">{{ Lang[Type].big }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="odds">1:0.5</div>
|
||||||
|
<chipView
|
||||||
|
:list="chipArray.big_amount"
|
||||||
|
:win="winArray.includes('big')"
|
||||||
|
></chipView>
|
||||||
|
<div class="money" v-if="bet_amount_msg.big_amount">
|
||||||
|
<div class="coin-icon"></div>
|
||||||
|
{{ bet_amount_msg.big_amount }}
|
||||||
|
</div>
|
||||||
|
<confirmBet
|
||||||
|
@confirm="confirmChip"
|
||||||
|
@cancel="cancelChip"
|
||||||
|
@undo="undoChip"
|
||||||
|
:data="{ money: downChip.big_amount, show: touch == 'big_amount' }"
|
||||||
|
></confirmBet>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -258,145 +265,180 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.baccarat {
|
/* Color Variables */
|
||||||
width: 100%;
|
$teal: #59cfa8;
|
||||||
height: 100%;
|
$teal-dark: #3aa684;
|
||||||
|
$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;
|
||||||
|
$text-green: #22ac38;
|
||||||
|
|
||||||
|
.baccarat-table {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
width: 100%;
|
||||||
padding: 8px;
|
height: 100%;
|
||||||
|
padding: 4px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
gap: 4px;
|
||||||
|
background: $bg-dark;
|
||||||
|
}
|
||||||
|
|
||||||
&.yn {
|
.main-betting-area {
|
||||||
.list .item .text {
|
flex: 3;
|
||||||
.label {
|
display: flex;
|
||||||
font-size: 10px;
|
gap: 4px;
|
||||||
transform: scale(0.9); /* Further reduce visual size if needed */
|
overflow: visible;
|
||||||
}
|
}
|
||||||
.label-large {
|
|
||||||
font-size: 20px;
|
.side-betting-area {
|
||||||
}
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bet-cell {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid $border-light;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: visible;
|
||||||
|
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
|
||||||
|
|
||||||
|
&.main-cell {
|
||||||
|
background: $bg-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.side-cell {
|
||||||
|
background: rgba(30, 30, 30, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.player-cell {
|
||||||
|
border-color: $text-blue;
|
||||||
|
box-shadow: 0 0 10px rgba(64, 158, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.banker-cell {
|
||||||
|
border-color: $text-red;
|
||||||
|
box-shadow: 0 0 10px rgba(245, 108, 108, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tie-cell {
|
||||||
|
border-color: $text-green;
|
||||||
|
box-shadow: 0 0 10px rgba(34, 172, 56, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.unclick {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
filter: grayscale(0.8);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 102%;
|
||||||
|
border-bottom: 1px solid $border-light;
|
||||||
|
top: 50%;
|
||||||
|
transform: rotate(14deg);
|
||||||
|
z-index: 6;
|
||||||
|
left: -2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.list {
|
.cell-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
&.top {
|
&:active {
|
||||||
flex: 3; // Top row height ratio
|
background: rgba(255, 255, 255, 0.1);
|
||||||
.item {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.bottom {
|
.label {
|
||||||
flex: 5; // Bottom row height ratio
|
|
||||||
.item {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
// Removed specific flex for green-main as per instruction, assuming it's not needed for the new look.
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
position: relative;
|
|
||||||
border-radius: 8px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
margin-bottom: 4px;
|
||||||
transition: all 0.2s;
|
z-index: 2;
|
||||||
overflow: visible; /* 允许反馈图标完整显示 */
|
|
||||||
|
|
||||||
// Unclick state
|
.role {
|
||||||
&.unclick {
|
font-size: 24px;
|
||||||
opacity: 0.5;
|
font-weight: bold;
|
||||||
cursor: not-allowed;
|
text-shadow: 0 1px 2px #000, 0 0 5px currentColor;
|
||||||
filter: grayscale(0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Text Styles
|
&.player { color: $text-blue; }
|
||||||
.text {
|
&.banker { color: $text-red; }
|
||||||
position: relative;
|
&.tie { color: $text-green; }
|
||||||
z-index: 2;
|
&.side {
|
||||||
display: flex;
|
color: #ffd700;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.label-large {
|
|
||||||
font-size: 32px; // Increased visibility
|
|
||||||
font-weight: 800;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-shadow: 0 2px 4px rgba(0,0,0,0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.odds {
|
|
||||||
font-size: 14px; /* Increased from 12px */
|
|
||||||
color: #FFD700; /* Gold */
|
|
||||||
font-weight: 600;
|
|
||||||
display: block; /* Ensure formatting */
|
|
||||||
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-blue { color: #29abe2; }
|
|
||||||
.text-red { color: #ed1c24; }
|
|
||||||
.text-green { color: #22ac38; }
|
|
||||||
}
|
|
||||||
|
|
||||||
// Money display - 移到顶部并增强显示
|
|
||||||
.money {
|
|
||||||
position: absolute;
|
|
||||||
top: 4px; /* 改为顶部 */
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2px;
|
|
||||||
color: #000; /* 改为黑色，更清晰 */
|
|
||||||
font-size: 13px; /* 稍微放大 */
|
|
||||||
font-weight: 700; /* 加粗 */
|
|
||||||
z-index: 100; /* 大幅提升层级，确保在筹码之上 */
|
|
||||||
white-space: nowrap;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
/* 添加金色渐变背景，防止被筹码遮挡 */
|
|
||||||
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.3);
|
|
||||||
|
|
||||||
.coin-icon {
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 1px solid #DAA520;
|
|
||||||
box-shadow: 0 0 2px rgba(0,0,0,0.5);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Grid Item Style (Digital Table Look)
|
.odds {
|
||||||
.grid-item {
|
font-size: 12px;
|
||||||
background: rgba(9, 60, 50, 0.85); // Deep Teal, slightly more opaque
|
color: #ffa500;
|
||||||
border: 1px solid #59cfa8; // Cyan/Green Border
|
z-index: 2;
|
||||||
box-shadow: inset 0 0 15px rgba(0,0,0,0.5); // Stronger inner shadow
|
text-shadow: 0 1px 2px #000;
|
||||||
|
font-weight: 600;
|
||||||
&:active {
|
}
|
||||||
background: rgba(9, 60, 50, 0.95);
|
|
||||||
border-color: #7fffd4;
|
.money {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) scale(0.5);
|
||||||
|
transform-origin: center bottom;
|
||||||
|
background: rgba(0,0,0,0.85);
|
||||||
|
padding: 2px 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: #ffd700;
|
||||||
|
font-size: 9px;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1px;
|
||||||
|
z-index: 100;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
.coin-icon {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #ffd700;
|
||||||
|
border: 1px solid #b8860b;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 百家乐筹码专用样式 - 缩小筹码避免遮挡文字 */
|
||||||
|
:deep(.chip-view) {
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
.chip-box .box {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,68 +1,82 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="view longhu">
|
<div class="longhu-table">
|
||||||
<div class="list">
|
<div class="betting-area">
|
||||||
<!-- 龙 -->
|
<!-- 龙 -->
|
||||||
<div class="item banker">
|
<div class="bet-cell dragon-cell" @click="downBet($event, 'banker_amount')">
|
||||||
<confirmBet
|
<div class="cell-content">
|
||||||
@confirm="confirmChip"
|
<div class="label">
|
||||||
@cancel="cancelChip"
|
<span class="role dragon">{{ Lang[Type].dragon }}</span>
|
||||||
@undo="undoChip"
|
</div>
|
||||||
:data="{
|
<div class="odds">1:{{ tableData.price_dragon }}</div>
|
||||||
money: downChip.banker_amount,
|
<chipView
|
||||||
show: touch == 'banker_amount'
|
:list="chipArray.banker_amount"
|
||||||
}"
|
:win="winArray.includes('banker')"
|
||||||
></confirmBet>
|
></chipView>
|
||||||
<chipView
|
<div class="money" v-if="bet_amount_msg.banker_amount">
|
||||||
@click="downBet($event, 'banker_amount')"
|
<div class="coin-icon"></div>
|
||||||
:list="chipArray.banker_amount"
|
{{ bet_amount_msg.banker_amount }}
|
||||||
:win="winArray.includes('banker')"
|
</div>
|
||||||
></chipView>
|
<confirmBet
|
||||||
<div class="text">
|
@confirm="confirmChip"
|
||||||
<span class="big">{{ Lang[Type].dragon }}</span>
|
@cancel="cancelChip"
|
||||||
<span>1:{{ tableData.price_dragon }}</span>
|
@undo="undoChip"
|
||||||
|
:data="{
|
||||||
|
money: downChip.banker_amount,
|
||||||
|
show: touch == 'banker_amount'
|
||||||
|
}"
|
||||||
|
></confirmBet>
|
||||||
</div>
|
</div>
|
||||||
<div class="money">{{ bet_amount_msg.banker_amount }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 和 -->
|
<!-- 和 -->
|
||||||
<div class="item tie">
|
<div class="bet-cell tie-cell" @click="downBet($event, 'tie_amount')">
|
||||||
<confirmBet
|
<div class="cell-content">
|
||||||
@confirm="confirmChip"
|
<div class="label">
|
||||||
@cancel="cancelChip"
|
<span class="role tie">{{ Lang[Type].tie }}</span>
|
||||||
@undo="undoChip"
|
</div>
|
||||||
:data="{ money: downChip.tie_amount, show: touch == 'tie_amount' }"
|
<div class="odds">1:{{ tableData.price_tie_dt }}</div>
|
||||||
></confirmBet>
|
<chipView
|
||||||
<chipView
|
:list="chipArray.tie_amount"
|
||||||
@click="downBet($event, 'tie_amount')"
|
:win="winArray.includes('tie')"
|
||||||
:list="chipArray.tie_amount"
|
></chipView>
|
||||||
:win="winArray.includes('tie')"
|
<div class="money" v-if="bet_amount_msg.tie_amount">
|
||||||
></chipView>
|
<div class="coin-icon"></div>
|
||||||
<div class="text">
|
{{ bet_amount_msg.tie_amount }}
|
||||||
<span class="big">{{ Lang[Type].tie }}</span>
|
</div>
|
||||||
<span>1:{{ tableData.price_tie_dt }}</span>
|
<confirmBet
|
||||||
|
@confirm="confirmChip"
|
||||||
|
@cancel="cancelChip"
|
||||||
|
@undo="undoChip"
|
||||||
|
:data="{ money: downChip.tie_amount, show: touch == 'tie_amount' }"
|
||||||
|
></confirmBet>
|
||||||
</div>
|
</div>
|
||||||
<div class="money">{{ bet_amount_msg.tie_amount }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 虎 -->
|
<!-- 虎 -->
|
||||||
<div class="item palyer">
|
<div class="bet-cell tiger-cell" @click="downBet($event, 'player_amount')">
|
||||||
<confirmBet
|
<div class="cell-content">
|
||||||
@confirm="confirmChip"
|
<div class="label">
|
||||||
@cancel="cancelChip"
|
<span class="role tiger">{{ Lang[Type].tiger }}</span>
|
||||||
@undo="undoChip"
|
</div>
|
||||||
:data="{
|
<div class="odds">1:{{ tableData.price_tiger }}</div>
|
||||||
money: downChip.player_amount,
|
<chipView
|
||||||
show: touch == 'player_amount'
|
:list="chipArray.player_amount"
|
||||||
}"
|
:win="winArray.includes('player')"
|
||||||
></confirmBet>
|
></chipView>
|
||||||
<chipView
|
<div class="money" v-if="bet_amount_msg.player_amount">
|
||||||
@click="downBet($event, 'player_amount')"
|
<div class="coin-icon"></div>
|
||||||
:list="chipArray.player_amount"
|
{{ bet_amount_msg.player_amount }}
|
||||||
:win="winArray.includes('player')"
|
</div>
|
||||||
></chipView>
|
<confirmBet
|
||||||
<div class="text">
|
@confirm="confirmChip"
|
||||||
<span class="big">{{ Lang[Type].tiger }}</span>
|
@cancel="cancelChip"
|
||||||
<span>1:{{ tableData.price_tiger }}</span>
|
@undo="undoChip"
|
||||||
|
:data="{
|
||||||
|
money: downChip.player_amount,
|
||||||
|
show: touch == 'player_amount'
|
||||||
|
}"
|
||||||
|
></confirmBet>
|
||||||
</div>
|
</div>
|
||||||
<div class="money">{{ bet_amount_msg.player_amount }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -128,128 +142,143 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
/* 深色豪华主题配色 */
|
/* Color Variables */
|
||||||
$border-color: #444;
|
$teal: #59cfa8;
|
||||||
$text-secondary: #888;
|
$teal-dark: #3aa684;
|
||||||
|
$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;
|
||||||
|
$text-green: #22ac38;
|
||||||
|
|
||||||
.longhu {
|
.longhu-table {
|
||||||
background: rgba(30, 30, 30, 0.95);
|
display: flex;
|
||||||
.list {
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
padding: 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: $bg-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
.betting-area {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bet-cell {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid $border-light;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: visible;
|
||||||
|
background: $bg-dark;
|
||||||
|
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
|
||||||
|
|
||||||
|
&.dragon-cell {
|
||||||
|
border-color: $text-blue;
|
||||||
|
box-shadow: 0 0 10px rgba(64, 158, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tiger-cell {
|
||||||
|
border-color: $text-red;
|
||||||
|
box-shadow: 0 0 10px rgba(245, 108, 108, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tie-cell {
|
||||||
|
border-color: $text-green;
|
||||||
|
box-shadow: 0 0 10px rgba(34, 172, 56, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: none;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
.item {
|
overflow: visible;
|
||||||
position: relative;
|
|
||||||
border-right: 1px solid $border-color;
|
|
||||||
font-size: 0.45rem;
|
|
||||||
flex: 1;
|
|
||||||
&:first-child {
|
|
||||||
.chip-view {
|
|
||||||
border-top-left-radius: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
border: none;
|
|
||||||
.chip-view {
|
|
||||||
border-top-right-radius: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.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 {
|
&:active {
|
||||||
position: absolute;
|
background: rgba(255, 255, 255, 0.1);
|
||||||
width: 100%;
|
}
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
&:active {
|
|
||||||
background: rgba(255, 255, 255, 0.15);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.text {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
line-height: 1;
|
|
||||||
z-index: 2;
|
|
||||||
pointer-events: none;
|
|
||||||
font-size: 0.65rem;
|
|
||||||
text-shadow: 1px 1px #050505;
|
|
||||||
color: #fff;
|
|
||||||
.big {
|
|
||||||
font-weight: bold;
|
|
||||||
padding-right: 0.24rem;
|
|
||||||
padding-left: 0.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.money {
|
|
||||||
position: absolute;
|
|
||||||
top: 4px; /* 改为顶部 */
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
font-size: 13px; /* 放大字体 */
|
|
||||||
font-weight: 700; /* 加粗 */
|
|
||||||
color: #000; /* 黑色文字 */
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 100; /* 大幅提升层级 */
|
|
||||||
|
|
||||||
/* 添加金色渐变背景 */
|
.label {
|
||||||
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
|
display: flex;
|
||||||
padding: 2px 8px;
|
flex-direction: column;
|
||||||
border-radius: 10px;
|
align-items: center;
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.3);
|
margin-bottom: 4px;
|
||||||
display: flex;
|
z-index: 2;
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
|
|
||||||
&::before {
|
.role {
|
||||||
display: inline-block;
|
font-size: 24px;
|
||||||
content: "总";
|
font-weight: bold;
|
||||||
background: rgba(255, 255, 255, 0.9);
|
text-shadow: 0 1px 2px #000, 0 0 5px currentColor;
|
||||||
font-size: 11px;
|
|
||||||
border-radius: 50%;
|
&.dragon { color: $text-blue; }
|
||||||
width: 18px;
|
&.tiger { color: $text-red; }
|
||||||
height: 18px;
|
&.tie { color: $text-green; }
|
||||||
text-align: center;
|
}
|
||||||
line-height: 18px;
|
}
|
||||||
font-weight: 700;
|
|
||||||
color: #000;
|
.odds {
|
||||||
border: 1px solid #DAA520;
|
font-size: 12px;
|
||||||
}
|
color: #ffa500;
|
||||||
|
z-index: 2;
|
||||||
|
text-shadow: 0 1px 2px #000;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.money {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) scale(0.5);
|
||||||
|
transform-origin: center bottom;
|
||||||
|
background: rgba(0,0,0,0.85);
|
||||||
|
padding: 2px 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: #ffd700;
|
||||||
|
font-size: 9px;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1px;
|
||||||
|
z-index: 100;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
.coin-icon {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #ffd700;
|
||||||
|
border: 1px solid #b8860b;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.banker .chip-view {
|
}
|
||||||
border-bottom-left-radius: 10px;
|
|
||||||
}
|
/* Win overlay effect */
|
||||||
.palyer .chip-view {
|
:deep(.chip-view.win) {
|
||||||
border-bottom-right-radius: 10px;
|
box-shadow: inset 0 0 15px rgba(255, 215, 0, 0.4);
|
||||||
|
background: rgba(255, 215, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 龙虎筹码专用样式 - 缩小筹码避免遮挡文字 */
|
||||||
|
:deep(.chip-view) {
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
.chip-box .box {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user