og/GamePortrait
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 为路单组件添加国际化文本，优化统计数据显示和问路UI，并引入白色主题。

Browse Source
This commit is contained in:
li
2026-01-19 13:48:16 +08:00
parent 75e884326d
commit 8483893b6e
4 changed files with 275 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PlayTable/TableBaccarat.vue
+6 -5
View File
@@ -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;
}
}
src/components/PlayWay.vue
+185 -145
View File
@@ -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;