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

src/assets/js/waybill.js

@@ -22,77 +22,75 @@ function autoask(newData) {
     Proachcolor: ""
   }
   // 庄问路
-  if (newData.ludan_banker) {
+  if (newData.ludan_banker && newData.ludan_banker.waybill) {
-    if (newData.ludan_banker.waybill) {
+    const bigEyeRoad = newData.ludan_banker.waybill.bigEyeRoad
-      const bigEyeRoad = newData.ludan_banker.waybill.bigEyeRoad
+    const pathway = newData.ludan_banker.waybill.pathway
-      const pathway = newData.ludan_banker.waybill.pathway
+    const roach = newData.ludan_banker.waybill.roach
-      const roach = newData.ludan_banker.waybill.roach
+    if (bigEyeRoad[0]) {
-      if (bigEyeRoad[0]) {
+      if (bigEyeRoad[bigEyeRoad.length - 1].result == 1) {
-        if (bigEyeRoad[bigEyeRoad.length - 1].result == 1) {
+        askObg.BbigEyeRoadcolor = "red"
-          askObg.BbigEyeRoadcolor = "red"
-        } else {
-          askObg.BbigEyeRoadcolor = "blue"
-        }
-        askObg.BbigEyeRoadisshow = true
       } else {
-        askObg.BbigEyeRoadisshow = false
+        askObg.BbigEyeRoadcolor = "blue"
-      }
-      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.BbigEyeRoadisshow = true
+    } else {
+      askObg.BbigEyeRoadisshow = false
     }
-    // 闲问路
+    if (pathway[0]) {
-    if (newData.ludan_player.waybill) {
+      if (pathway[pathway.length - 1].result == 1) {
-      const bigEyeRoad = newData.ludan_player.waybill.bigEyeRoad
+        askObg.Bpathwaycolor = "red"
-      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
       } else {
-        askObg.PbigEyeRoadisshow = false
+        askObg.Bpathwaycolor = "blue"
       }
-      if (pathway[0]) {
+      askObg.Bpathwayisshow = true
-        if (pathway[pathway.length - 1].result == 1) {
+    } else {
-          askObg.Ppathwaycolor = "red"
+      askObg.Bpathwayisshow = false
-        } else {
+    }
-          askObg.Ppathwaycolor = "blue"
+    if (roach[0]) {
-        }
+      if (roach[roach.length - 1].result == 1) {
-        askObg.Ppathwayisshow = true
+        askObg.Broachcolor = "red"
       } else {
-        askObg.Ppathwayisshow = false
+        askObg.Broachcolor = "blue"
       }
-      if (roach[0]) {
+      askObg.Broachisshow = true
-        if (roach[roach.length - 1].result == 1) {
+    } else {
-          askObg.Proachcolor = "red"
+      askObg.Broachisshow = false
-        } else {
+    }
-          askObg.Proachcolor = "blue"
+  }
-        }
+  // 闲问路
-        askObg.Proachisshow = true
+  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) {
+    // Keep space for integrated Ask Panel at bottom right
-      Tab = cols - 1
+    Tab = cols - 7
-    } else {
-      Tab = cols - 2
-    }
   }
   // 初始位置
   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.font = "bold " + unit * 0.6 + "px Arial"
-  ctb.fillStyle = "#ddd" // 颜色
+  ctb.fillStyle = "#fff" // 颜色
   ctb.textAlign = "center"
   ctb.textBaseline = "middle"
   ctb.fillText(fonts, unit * (x - 0.5), radius + unit * (y - 1))

src/components/PlayTable/TableBaccarat.vue

@@ -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

@@ -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">
-          <div class="stat-item"><span class="badge blue">闲</span><span class="val blue">{{ tableData.playerCount || 0 }}</span></div>
+            <span class="badge red">{{ Lang[Type].banker }}</span>
-          <div class="stat-item"><span class="badge green">和</span><span class="val green">{{ tableData.tieCount || 0 }}</span></div>
+            <span class="val red">{{ tableData.bankerCount || 0 }}</span>
-          <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>
-          <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 class="stat-item">
-        </div>
+            <span class="badge blue">{{ Lang[Type].player }}</span>
-        <div class="right-info">
+            <span class="val blue">{{ tableData.playerCount || 0 }}</span>
-           <span class="badge black">局号</span>
+          </div>
-           <span class="game-num">{{ tableData.number_tab_number || '0-0' }}</span>
+          <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">
+      <div class="road-box-container">
-        <canvas class="canvas" ref="refItem"></canvas>
+        <div class="road-box">
+          <canvas class="canvas" ref="refItem"></canvas>
           
-        <!-- Ask Way Overlay (Bottom Right) -->
+          <!-- Ask Way Overlay (Bottom Right) - Floating style to match reference -->
-        <div class="ask-panel">
+          <!-- Ask Way Overlay (Bottom Right) - Boxed style to match reference -->
-           <!-- Banker Ask -->
+          <div class="ask-panel">
-           <div class="ask-group" @click="askWay('banker')">
+            <div class="ask-group banker" @click="askWay('banker')">
-              <div class="ask-title text-red">庄问路</div>
+                <div class="ask-title text-red">{{ Lang[Type].askbanker }}</div>
-              <div class="ask-icons">
+                <div class="ask-icons">
-                 <span class="icon solid red" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'red'"></span>
+                    <span class="dot hollow red" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'red'"></span>
-                 <span class="icon solid blue" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'blue'"></span>
+                    <span class="dot hollow blue" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'blue'"></span>
                     
-                 <span class="icon hollow red" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'red'"></span>
+                    <span class="dot solid red" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'red'"></span>
-                 <span class="icon hollow blue" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'blue'"></span>
+                    <span class="dot solid blue" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'blue'"></span>
                     
-                 <span class="icon slash red" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'red'"></span>
+                    <span class="dot slash red" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'red'"></span>
-                 <span class="icon slash blue" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'blue'"></span>
+                    <span class="dot slash blue" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'blue'"></span>
-              </div>
+                </div>
-           </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>
                     
-           <!-- Player Ask -->
+                    <span class="dot solid red" v-if="autoaskData.Ppathwayisshow && autoaskData.Ppathwaycolor == 'red'"></span>
-           <div class="ask-group" @click="askWay('palyer')">
+                    <span class="dot solid blue" v-if="autoaskData.Ppathwayisshow && autoaskData.Ppathwaycolor == 'blue'"></span>
-              <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="dot slash red" v-if="autoaskData.Proachisshow && autoaskData.Proachcolor == 'red'"></span>
-                 <span class="icon hollow blue" v-if="autoaskData.Ppathwayisshow && autoaskData.Ppathwaycolor == 'blue'"></span>
+                    <span class="dot slash blue" v-if="autoaskData.Proachisshow && autoaskData.Proachcolor == 'blue'"></span>
-                 
+                </div>
-                 <span class="icon slash red" v-if="autoaskData.Proachisshow && autoaskData.Proachcolor == 'red'"></span>
+            </div>
-                 <span class="icon 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 10px;
-    padding: 0 12px;
+    background: #fff;
-    background: #252525;
+    border-bottom: 1px solid #eee;
-    border-bottom: 1px solid #333;
-    font-size: 13px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
-    z-index: 5;
     
     .left-stats {
       display: flex;
       align-items: center;
-      gap: 16px;
+      gap: 12px;
+      width: 100%;
+
       .stat-item {
         display: flex;
         align-items: center;
-        gap: 6px;
+        gap: 5px;
-        .badge {
+        flex-shrink: 0;
-           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; }
-        }
-      }
-    }
 
-    .right-info {
+        .badge {
-      display: flex;
+          padding: 2px 4px;
-      align-items: center;
+          min-width: 32px;
-      gap: 8px;
+          height: 18px;
-      .badge.black {
+          color: #fff;
-         background: #444;
+          border-radius: 4px;
-         color: #ccc;
+          font-size: 12px;
-         padding: 2px 6px;
+          font-weight: bold;
-         border-radius: 4px;
+          line-height: 18px;
-         font-size: 11px;
+          display: flex;
-      }
+          align-items: center;
-      .game-num {
+          justify-content: center;
-         font-weight: bold;
+          white-space: nowrap;
-         color: #ffd700;
+
-         font-family: 'Roboto', sans-serif;
+          &.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 */
+      width: 25%; /* Roughly 6/24 of width */
-      height: 32px;
+      height: 50%; /* Covers bottom 3 rows (50% of 6 rows) */
-      background: rgba(30,30,30, 0.95);
-      border-top-left-radius: 8px;
-      border: 1px solid #444;
-      border-right: none;
-      border-bottom: none;
       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; 
+        flex: 1;
-         display: flex;
+        display: flex;
-         align-items: center;
+        flex-direction: column;
-         justify-content: center;
+        align-items: center;
-         gap: 6px;
+        justify-content: center;
-         cursor: pointer;
+        cursor: pointer;
-         border-right: 1px solid #444;
-         &:last-child { border-right: none; }
         
-         .ask-title {
+        &.banker {
-            font-size: 12px;
+          border-right: 1px solid #f5f5f5;
-            font-weight: bold;
+        }
-            &.text-red { color: #ff4d4f; }
-            &.text-blue { color: #40a9ff; }
-         }
 
-         .ask-icons {
+        .ask-title {
-            display: flex;
+          font-size: 15px;
-            gap: 3px;
+          font-weight: 500;
-            align-items: center;
+          color: #333;
+          margin-bottom: 2px;
+          white-space: nowrap;
+        }
 
-            .icon {
+        .ask-icons {
-               display: inline-block;
+          display: flex;
-               &.solid {
+          gap: 4px;
-                  width: 6px; height: 6px; border-radius: 50%;
+          align-items: center;
-                  &.red { background: #d0021b; }
+
-                  &.blue { background: #0044fa; }
+          .dot {
-               }
+            display: inline-block;
-               &.hollow {
+            &.solid {
-                  width: 6px; height: 6px; border-radius: 50%; border: 1px solid;
+              width: 12px;
-                  &.red { border-color: #d0021b; }
+              height: 12px;
-                  &.blue { border-color: #0044fa; }
+              border-radius: 50%;
-               }
+              &.red { background: #e40000; }
-               &.slash {
+              &.blue { background: #0056ee; }
-                  width: 2px; height: 6px; transform: rotate(-45deg);
-                  &.red { background: #d0021b; }
-                  &.blue { background: #0044fa; }
-               }
             }
-         }
+            &.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;

src/views/play.vue

@@ -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;
+      overflow: hidden;
 
-      .wayView {
+      /* Deep overrides to ensure standard layout and white background support */
-        width: 100%;
-        height: auto;
-      }
-
-      /* Deep overrides to fix canvas distortion */
       ::v-deep .playway {
-        height: auto !important;
+        height: 100% !important;
-        background: #000 !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;
+        background: transparent !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; }
       }
+      
       ::v-deep .canvas {
-        height: auto !important;
-        min-height: 0 !important;
-        flex: none !important;
         width: 100% !important;
+        height: 100% !important;
         display: block !important;
       }
     }