feat: 为路单组件添加国际化文本，优化统计数据显示和问路UI，并引入白色主题。
This commit is contained in:
li
parent
75e884326d
commit
8483893b6e
@ -22,77 +22,75 @@ function autoask(newData) {
|
||||
Proachcolor: ""
|
||||
}
|
||||
// 庄问路
|
||||
if (newData.ludan_banker) {
|
||||
if (newData.ludan_banker.waybill) {
|
||||
const bigEyeRoad = newData.ludan_banker.waybill.bigEyeRoad
|
||||
const pathway = newData.ludan_banker.waybill.pathway
|
||||
const roach = newData.ludan_banker.waybill.roach
|
||||
if (bigEyeRoad[0]) {
|
||||
if (bigEyeRoad[bigEyeRoad.length - 1].result == 1) {
|
||||
askObg.BbigEyeRoadcolor = "red"
|
||||
} else {
|
||||
askObg.BbigEyeRoadcolor = "blue"
|
||||
}
|
||||
askObg.BbigEyeRoadisshow = true
|
||||
if (newData.ludan_banker && newData.ludan_banker.waybill) {
|
||||
const bigEyeRoad = newData.ludan_banker.waybill.bigEyeRoad
|
||||
const pathway = newData.ludan_banker.waybill.pathway
|
||||
const roach = newData.ludan_banker.waybill.roach
|
||||
if (bigEyeRoad[0]) {
|
||||
if (bigEyeRoad[bigEyeRoad.length - 1].result == 1) {
|
||||
askObg.BbigEyeRoadcolor = "red"
|
||||
} else {
|
||||
askObg.BbigEyeRoadisshow = false
|
||||
}
|
||||
if (pathway[0]) {
|
||||
if (pathway[pathway.length - 1].result == 1) {
|
||||
askObg.Bpathwaycolor = "red"
|
||||
} else {
|
||||
askObg.Bpathwaycolor = "blue"
|
||||
}
|
||||
askObg.Bpathwayisshow = true
|
||||
} else {
|
||||
askObg.Bpathwayisshow = false
|
||||
}
|
||||
if (roach[0]) {
|
||||
if (roach[roach.length - 1].result == 1) {
|
||||
askObg.Broachcolor = "red"
|
||||
} else {
|
||||
askObg.Broachcolor = "blue"
|
||||
}
|
||||
askObg.Broachisshow = true
|
||||
} else {
|
||||
askObg.Broachisshow = false
|
||||
askObg.BbigEyeRoadcolor = "blue"
|
||||
}
|
||||
askObg.BbigEyeRoadisshow = true
|
||||
} else {
|
||||
askObg.BbigEyeRoadisshow = false
|
||||
}
|
||||
// 闲问路
|
||||
if (newData.ludan_player.waybill) {
|
||||
const bigEyeRoad = newData.ludan_player.waybill.bigEyeRoad
|
||||
const pathway = newData.ludan_player.waybill.pathway
|
||||
const roach = newData.ludan_player.waybill.roach
|
||||
if (bigEyeRoad[0]) {
|
||||
if (bigEyeRoad[bigEyeRoad.length - 1].result == 1) {
|
||||
askObg.PbigEyeRoadcolor = "red"
|
||||
} else {
|
||||
askObg.PbigEyeRoadcolor = "blue"
|
||||
}
|
||||
askObg.PbigEyeRoadisshow = true
|
||||
if (pathway[0]) {
|
||||
if (pathway[pathway.length - 1].result == 1) {
|
||||
askObg.Bpathwaycolor = "red"
|
||||
} else {
|
||||
askObg.PbigEyeRoadisshow = false
|
||||
askObg.Bpathwaycolor = "blue"
|
||||
}
|
||||
if (pathway[0]) {
|
||||
if (pathway[pathway.length - 1].result == 1) {
|
||||
askObg.Ppathwaycolor = "red"
|
||||
} else {
|
||||
askObg.Ppathwaycolor = "blue"
|
||||
}
|
||||
askObg.Ppathwayisshow = true
|
||||
askObg.Bpathwayisshow = true
|
||||
} else {
|
||||
askObg.Bpathwayisshow = false
|
||||
}
|
||||
if (roach[0]) {
|
||||
if (roach[roach.length - 1].result == 1) {
|
||||
askObg.Broachcolor = "red"
|
||||
} else {
|
||||
askObg.Ppathwayisshow = false
|
||||
askObg.Broachcolor = "blue"
|
||||
}
|
||||
if (roach[0]) {
|
||||
if (roach[roach.length - 1].result == 1) {
|
||||
askObg.Proachcolor = "red"
|
||||
} else {
|
||||
askObg.Proachcolor = "blue"
|
||||
}
|
||||
askObg.Proachisshow = true
|
||||
askObg.Broachisshow = true
|
||||
} else {
|
||||
askObg.Broachisshow = false
|
||||
}
|
||||
}
|
||||
// 闲问路
|
||||
if (newData.ludan_player && newData.ludan_player.waybill) {
|
||||
const bigEyeRoad = newData.ludan_player.waybill.bigEyeRoad
|
||||
const pathway = newData.ludan_player.waybill.pathway
|
||||
const roach = newData.ludan_player.waybill.roach
|
||||
if (bigEyeRoad[0]) {
|
||||
if (bigEyeRoad[bigEyeRoad.length - 1].result == 1) {
|
||||
askObg.PbigEyeRoadcolor = "red"
|
||||
} else {
|
||||
askObg.Proachisshow = false
|
||||
askObg.PbigEyeRoadcolor = "blue"
|
||||
}
|
||||
askObg.PbigEyeRoadisshow = true
|
||||
} else {
|
||||
askObg.PbigEyeRoadisshow = false
|
||||
}
|
||||
if (pathway[0]) {
|
||||
if (pathway[pathway.length - 1].result == 1) {
|
||||
askObg.Ppathwaycolor = "red"
|
||||
} else {
|
||||
askObg.Ppathwaycolor = "blue"
|
||||
}
|
||||
askObg.Ppathwayisshow = true
|
||||
} else {
|
||||
askObg.Ppathwayisshow = false
|
||||
}
|
||||
if (roach[0]) {
|
||||
if (roach[roach.length - 1].result == 1) {
|
||||
askObg.Proachcolor = "red"
|
||||
} else {
|
||||
askObg.Proachcolor = "blue"
|
||||
}
|
||||
askObg.Proachisshow = true
|
||||
} else {
|
||||
askObg.Proachisshow = false
|
||||
}
|
||||
}
|
||||
return askObg
|
||||
@ -106,7 +104,7 @@ function waybillAsk(canvas, type, data, game_id) {
|
||||
if (data.ludan_banker && data.ludan_banker.waybill) {
|
||||
ask(canvas, data.ludan_banker, data.ludan, game_id)
|
||||
}
|
||||
} else if (type == "palyer") {
|
||||
} else if (type == "player") {
|
||||
if (data.ludan_player && data.ludan_player.waybill) {
|
||||
ask(canvas, data.ludan_player, data.ludan, game_id)
|
||||
}
|
||||
@ -190,7 +188,8 @@ function ask(canvas, newdata, olddata, game_id) {
|
||||
askbigRoad: false,
|
||||
askbigEyeRoad: false,
|
||||
askpathway: false,
|
||||
askroach: false
|
||||
askroach: false,
|
||||
asksanxing: false
|
||||
}
|
||||
if (n_s_last_x > o_s_last_x) {
|
||||
askroad.askshowroad = true
|
||||
@ -262,7 +261,7 @@ function waybillConfig(canvas, data, game_id, ask, askroad) {
|
||||
rows = 6
|
||||
// Strict Width-Based Calculation for Compact Layout
|
||||
// Target fewer columns to make cells larger as requested
|
||||
let targetCols = 14
|
||||
let targetCols = 22
|
||||
unit = (width / targetCols) * dpr // Use float to fill width exactly
|
||||
|
||||
cols = parseInt(width / (unit / dpr))
|
||||
@ -657,11 +656,8 @@ function cutRoad(
|
||||
Tab = cols - 1
|
||||
}
|
||||
} else {
|
||||
if (ask && askroad) {
|
||||
Tab = cols - 1
|
||||
} else {
|
||||
Tab = cols - 2
|
||||
}
|
||||
// Keep space for integrated Ask Panel at bottom right
|
||||
Tab = cols - 7
|
||||
}
|
||||
// 初始位置
|
||||
if (billnumber == 1) {
|
||||
@ -872,7 +868,7 @@ function Drawline(ctb, unit, rows, cols, billnumber) {
|
||||
var CanvasWidht = unit * cols
|
||||
var CanvasHeight = unit * rows
|
||||
ctb.lineWidth = 1 //线条宽度
|
||||
ctb.strokeStyle = "#d9d9d9" //线条颜色
|
||||
ctb.strokeStyle = "#f0f0f0" //线条颜色
|
||||
ctb.beginPath()
|
||||
ctb.moveTo(0, 0.5)
|
||||
ctb.lineTo(CanvasWidht, 0.5)
|
||||
@ -905,7 +901,7 @@ function multipleDrawline(ctb, unit, rows, cols) {
|
||||
var CanvasWidht = unit * cols
|
||||
var CanvasHeight = unit * rows
|
||||
ctb.lineWidth = 1 //线条宽度
|
||||
ctb.strokeStyle = "#d9d9d9" //线条颜色
|
||||
ctb.strokeStyle = "#f0f0f0" //线条颜色
|
||||
ctb.beginPath()
|
||||
ctb.moveTo(0, 0.5)
|
||||
ctb.lineTo(CanvasWidht, 0.5)
|
||||
@ -1027,11 +1023,11 @@ function SoloPath(gameId, ctb, unit, x, y, type, corners) {
|
||||
}
|
||||
break
|
||||
}
|
||||
ctb.arc(unit * (x - 0.5), radius + unit * (y - 1), unit * 0.4, 0, Math.PI * 2)
|
||||
ctb.arc(unit * (x - 0.5), radius + unit * (y - 1), unit * 0.45, 0, Math.PI * 2)
|
||||
ctb.fillStyle = color
|
||||
ctb.fill()
|
||||
ctb.font = "bold " + unit * 0.54 + "px Arial"
|
||||
ctb.fillStyle = "#ddd" // 颜色
|
||||
ctb.font = "bold " + unit * 0.6 + "px Arial"
|
||||
ctb.fillStyle = "#fff" // 颜色
|
||||
ctb.textAlign = "center"
|
||||
ctb.textBaseline = "middle"
|
||||
ctb.fillText(fonts, unit * (x - 0.5), radius + unit * (y - 1))
|
||||
|
||||
@ -333,10 +333,11 @@ export default {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.label-large {
|
||||
font-size: 30px;
|
||||
font-size: 32px; // Increased visibility
|
||||
font-weight: 800;
|
||||
margin-bottom: 2px;
|
||||
margin-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
.odds {
|
||||
@ -380,12 +381,12 @@ export default {
|
||||
|
||||
// Grid Item Style (Digital Table Look)
|
||||
.grid-item {
|
||||
background: rgba(9, 60, 50, 0.7); // Deep Teal Transparent
|
||||
background: rgba(9, 60, 50, 0.85); // Deep Teal, slightly more opaque
|
||||
border: 1px solid #59cfa8; // Cyan/Green Border
|
||||
box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
|
||||
box-shadow: inset 0 0 15px rgba(0,0,0,0.5); // Stronger inner shadow
|
||||
|
||||
&:active {
|
||||
background: rgba(9, 60, 50, 0.9);
|
||||
background: rgba(9, 60, 50, 0.95);
|
||||
border-color: #7fffd4;
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,53 +6,68 @@
|
||||
<!-- Top Header Bar -->
|
||||
<div class="header-bar">
|
||||
<div class="left-stats">
|
||||
<div class="stat-item"><span class="badge red">庄</span><span class="val red">{{ tableData.bankerCount || 0 }}</span></div>
|
||||
<div class="stat-item"><span class="badge blue">闲</span><span class="val blue">{{ tableData.playerCount || 0 }}</span></div>
|
||||
<div class="stat-item"><span class="badge green">和</span><span class="val green">{{ tableData.tieCount || 0 }}</span></div>
|
||||
<div class="stat-item" v-if="tableData.game_id == 1"><span class="badge red">庄对</span><span class="val red">{{ tableData.banker_pair_Count || 0 }}</span></div>
|
||||
<div class="stat-item" v-if="tableData.game_id == 1"><span class="badge blue">闲对</span><span class="val blue">{{ tableData.player_pair_Count || 0 }}</span></div>
|
||||
</div>
|
||||
<div class="right-info">
|
||||
<span class="badge black">局号</span>
|
||||
<span class="game-num">{{ tableData.number_tab_number || '0-0' }}</span>
|
||||
<div class="stat-item">
|
||||
<span class="badge red">{{ Lang[Type].banker }}</span>
|
||||
<span class="val red">{{ tableData.bankerCount || 0 }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="badge blue">{{ Lang[Type].player }}</span>
|
||||
<span class="val blue">{{ tableData.playerCount || 0 }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="badge green">{{ Lang[Type].tie }}</span>
|
||||
<span class="val green">{{ tableData.tieCount || 0 }}</span>
|
||||
</div>
|
||||
<div class="stat-item" v-if="tableData.game_id == 1">
|
||||
<span class="badge red">{{ Lang[Type].p_banker }}</span>
|
||||
<span class="val red">{{ tableData.banker_pair_Count || 0 }}</span>
|
||||
</div>
|
||||
<div class="stat-item" v-if="tableData.game_id == 1">
|
||||
<span class="badge blue">{{ Lang[Type].p_player }}</span>
|
||||
<span class="val blue">{{ tableData.player_pair_Count || 0 }}</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>
|
||||
|
||||
<!-- Main Road Area -->
|
||||
<div class="road-box">
|
||||
<canvas class="canvas" ref="refItem"></canvas>
|
||||
|
||||
<!-- Ask Way Overlay (Bottom Right) -->
|
||||
<div class="ask-panel">
|
||||
<!-- Banker Ask -->
|
||||
<div class="ask-group" @click="askWay('banker')">
|
||||
<div class="ask-title text-red">庄问路</div>
|
||||
<div class="ask-icons">
|
||||
<span class="icon solid red" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'red'"></span>
|
||||
<span class="icon solid blue" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'blue'"></span>
|
||||
|
||||
<span class="icon hollow red" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'red'"></span>
|
||||
<span class="icon hollow blue" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'blue'"></span>
|
||||
|
||||
<span class="icon slash red" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'red'"></span>
|
||||
<span class="icon slash blue" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'blue'"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Player Ask -->
|
||||
<div class="ask-group" @click="askWay('palyer')">
|
||||
<div class="ask-title text-blue">闲问路</div>
|
||||
<div class="ask-icons">
|
||||
<span class="icon solid red" v-if="autoaskData.PbigEyeRoadisshow && autoaskData.PbigEyeRoadcolor == 'red'"></span>
|
||||
<span class="icon solid blue" v-if="autoaskData.PbigEyeRoadisshow && autoaskData.PbigEyeRoadcolor == 'blue'"></span>
|
||||
|
||||
<span class="icon hollow red" v-if="autoaskData.Ppathwayisshow && autoaskData.Ppathwaycolor == 'red'"></span>
|
||||
<span class="icon hollow blue" v-if="autoaskData.Ppathwayisshow && autoaskData.Ppathwaycolor == 'blue'"></span>
|
||||
|
||||
<span class="icon slash red" v-if="autoaskData.Proachisshow && autoaskData.Proachcolor == 'red'"></span>
|
||||
<span class="icon slash blue" v-if="autoaskData.Proachisshow && autoaskData.Proachcolor == 'blue'"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="road-box-container">
|
||||
<div class="road-box">
|
||||
<canvas class="canvas" ref="refItem"></canvas>
|
||||
|
||||
<!-- Ask Way Overlay (Bottom Right) - Floating style to match reference -->
|
||||
<!-- Ask Way Overlay (Bottom Right) - Boxed style to match reference -->
|
||||
<div class="ask-panel">
|
||||
<div class="ask-group banker" @click="askWay('banker')">
|
||||
<div class="ask-title text-red">{{ Lang[Type].askbanker }}</div>
|
||||
<div class="ask-icons">
|
||||
<span class="dot hollow red" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'red'"></span>
|
||||
<span class="dot hollow blue" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'blue'"></span>
|
||||
|
||||
<span class="dot solid red" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'red'"></span>
|
||||
<span class="dot solid blue" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'blue'"></span>
|
||||
|
||||
<span class="dot slash red" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'red'"></span>
|
||||
<span class="dot slash blue" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'blue'"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ask-group player" @click="askWay('player')">
|
||||
<div class="ask-title text-blue">{{ Lang[Type].askplayer }}</div>
|
||||
<div class="ask-icons">
|
||||
<span class="dot hollow red" v-if="autoaskData.PbigEyeRoadisshow && autoaskData.PbigEyeRoadcolor == 'red'"></span>
|
||||
<span class="dot hollow blue" v-if="autoaskData.PbigEyeRoadisshow && autoaskData.PbigEyeRoadcolor == 'blue'"></span>
|
||||
|
||||
<span class="dot solid red" v-if="autoaskData.Ppathwayisshow && autoaskData.Ppathwaycolor == 'red'"></span>
|
||||
<span class="dot solid blue" v-if="autoaskData.Ppathwayisshow && autoaskData.Ppathwaycolor == 'blue'"></span>
|
||||
|
||||
<span class="dot slash red" v-if="autoaskData.Proachisshow && autoaskData.Proachcolor == 'red'"></span>
|
||||
<span class="dot slash blue" v-if="autoaskData.Proachisshow && autoaskData.Proachcolor == 'blue'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -133,10 +148,21 @@ export default {
|
||||
.playway {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #1a1a1a;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top: 1px solid #333;
|
||||
overflow: hidden;
|
||||
|
||||
&.white-theme {
|
||||
background: #fff;
|
||||
.header-bar {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.road-box-container {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.baccarat-view {
|
||||
@ -146,75 +172,80 @@ export default {
|
||||
width: 100%;
|
||||
|
||||
.header-bar {
|
||||
flex: 0 0 32px;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px;
|
||||
background: #252525;
|
||||
border-bottom: 1px solid #333;
|
||||
font-size: 13px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||
z-index: 5;
|
||||
padding: 0 10px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
.left-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
.badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
&.red { background: #d0021b; }
|
||||
&.blue { background: #0044fa; }
|
||||
&.green { background: #22ac38; }
|
||||
}
|
||||
.val {
|
||||
font-weight: 700;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
&.red { color: #ff4d4f; }
|
||||
&.blue { color: #40a9ff; }
|
||||
&.green { color: #52c41a; }
|
||||
}
|
||||
}
|
||||
}
|
||||
gap: 5px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.right-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
.badge.black {
|
||||
background: #444;
|
||||
color: #ccc;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.game-num {
|
||||
font-weight: bold;
|
||||
color: #ffd700;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
.badge {
|
||||
padding: 2px 4px;
|
||||
min-width: 32px;
|
||||
height: 18px;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
|
||||
&.red { background: #e40000; }
|
||||
&.blue { background: #0056ee; }
|
||||
&.green { background: #278127; }
|
||||
&.black { background: #1a1a1a; }
|
||||
}
|
||||
|
||||
.val {
|
||||
font-weight: bold;
|
||||
font-size: 19px;
|
||||
line-height: 1;
|
||||
min-width: 25px;
|
||||
&.red { color: #e40000; }
|
||||
&.blue { color: #0056ee; }
|
||||
&.green { color: #278127; }
|
||||
}
|
||||
|
||||
&.g-num {
|
||||
margin-left: 8px;
|
||||
.game-info {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.road-box {
|
||||
.road-box-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #1a1a1a;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.road-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.canvas {
|
||||
width: 100%;
|
||||
@ -222,63 +253,71 @@ export default {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Ask Panel Floating Bottom Right */
|
||||
/* Ask Panel - Integrated into grid (bottom 3 rows, far right) */
|
||||
.ask-panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 200px; /* Compact width */
|
||||
height: 32px;
|
||||
background: rgba(30,30,30, 0.95);
|
||||
border-top-left-radius: 8px;
|
||||
border: 1px solid #444;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
width: 25%; /* Roughly 6/24 of width */
|
||||
height: 50%; /* Covers bottom 3 rows (50% of 6 rows) */
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-left: 1px solid #eee;
|
||||
border-top: 1px solid #eee;
|
||||
z-index: 10;
|
||||
box-shadow: -2px -2px 5px rgba(0,0,0,0.5);
|
||||
|
||||
.ask-group {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
border-right: 1px solid #444;
|
||||
&:last-child { border-right: none; }
|
||||
|
||||
.ask-title {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
&.text-red { color: #ff4d4f; }
|
||||
&.text-blue { color: #40a9ff; }
|
||||
}
|
||||
|
||||
.ask-icons {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
&.solid {
|
||||
width: 6px; height: 6px; border-radius: 50%;
|
||||
&.red { background: #d0021b; }
|
||||
&.blue { background: #0044fa; }
|
||||
}
|
||||
&.hollow {
|
||||
width: 6px; height: 6px; border-radius: 50%; border: 1px solid;
|
||||
&.red { border-color: #d0021b; }
|
||||
&.blue { border-color: #0044fa; }
|
||||
}
|
||||
&.slash {
|
||||
width: 2px; height: 6px; transform: rotate(-45deg);
|
||||
&.red { background: #d0021b; }
|
||||
&.blue { background: #0044fa; }
|
||||
}
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
&.banker {
|
||||
border-right: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.ask-title {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ask-icons {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
|
||||
.dot {
|
||||
display: inline-block;
|
||||
&.solid {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
&.red { background: #e40000; }
|
||||
&.blue { background: #0056ee; }
|
||||
}
|
||||
}
|
||||
&.hollow {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid;
|
||||
&.red { border-color: #e40000; }
|
||||
&.blue { border-color: #0056ee; }
|
||||
}
|
||||
&.slash {
|
||||
width: 2.5px;
|
||||
height: 12px;
|
||||
transform: rotate(-45deg);
|
||||
border-radius: 1px;
|
||||
&.red { background: #e40000; }
|
||||
&.blue { background: #0056ee; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -288,6 +327,7 @@ export default {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #1a1a1a;
|
||||
.canvas-box { flex: 1; height: 100%; .canvas{width:100%; height:100%;} }
|
||||
.totle-box {
|
||||
width: 120px;
|
||||
|
||||
@ -1395,45 +1395,34 @@ $gold: #c5a059;
|
||||
/* 3. Roadmap Container (Bottom) - Auto Height for Aspect Ratio */
|
||||
.roadmap-container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
height: 180px;
|
||||
flex-shrink: 0;
|
||||
background: #000;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
|
||||
.wayView {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
overflow: hidden;
|
||||
|
||||
/* Deep overrides to fix canvas distortion */
|
||||
/* Deep overrides to ensure standard layout and white background support */
|
||||
::v-deep .playway {
|
||||
height: auto !important;
|
||||
background: #000 !important;
|
||||
height: 100% !important;
|
||||
background: transparent !important;
|
||||
|
||||
&.white-theme {
|
||||
background: #000 !important;
|
||||
background: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .baccarat-view {
|
||||
height: auto !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
::v-deep .road-box {
|
||||
flex: none !important;
|
||||
height: auto !important;
|
||||
background: #000 !important;
|
||||
}
|
||||
::v-deep .header-bar {
|
||||
background: #1a1a1a !important;
|
||||
border-bottom: 1px solid #333 !important;
|
||||
color: #fff !important;
|
||||
.game-num { color: #fff !important; }
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep .canvas {
|
||||
height: auto !important;
|
||||
min-height: 0 !important;
|
||||
flex: none !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user