From 669c5c3ed27df9c0b1262718d57b85676897ec5f Mon Sep 17 00:00:00 2001
From: li <ljf@com>
Date: Tue, 27 Jan 2026 17:07:29 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E7=99=BE?=
 =?UTF-8?q?=E5=AE=B6=E4=B9=90=E5=92=8C=E9=BE=99=E8=99=8E=E4=B8=8B=E6=B3=A8?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=EF=BC=8C=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E5=92=8C=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=A2=9E=E5=BC=BA=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E4=BA=A4=E4=BA=92=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 更新下注区域结构，采用更清晰的类名和样式
- 调整下注金额和赔率的显示方式，提升可读性
- 增加响应式设计，确保在不同屏幕尺寸下的良好展示
- 统一颜色变量，提升整体视觉一致性
---
 src/components/PlayTable/TableBaccarat.vue | 614 +++++++++++----------
 src/components/PlayTable/TableLonghu.vue   | 365 ++++++------
 2 files changed, 525 insertions(+), 454 deletions(-)

diff --git a/src/components/PlayTable/TableBaccarat.vue b/src/components/PlayTable/TableBaccarat.vue
index a3a9a5d9..a449a8d6 100644
--- a/src/components/PlayTable/TableBaccarat.vue
+++ b/src/components/PlayTable/TableBaccarat.vue
@@ -1,185 +1,192 @@
 <template>
-  <div class="baccarat" :class="Type">
-    <!-- 第一行: 小 | 闲对 | 庄对 | 大 -->
-    <div class="list top">
-      <!-- 小 -->
-      <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="baccarat-table">
+    <!-- 主要下注区域 -->
+    <div class="main-betting-area">
       <!-- 闲 -->
-      <div class="item grid-item">
-        <confirmBet
-          @confirm="confirmChip"
-          @cancel="cancelChip"
-          @undo="undoChip"
-          :data="{
-            money: downChip.player_amount,
-            show: touch == 'player_amount'
-          }"
-        ></confirmBet>
-        <chipView
-          @click="downBet($event, 'player_amount')"
-          :list="chipArray.player_amount"
-          :win="winArray.includes('player')"
-        ></chipView>
-        <div class="text">
-          <span class="label-large text-blue">{{ Lang[Type].player }}</span>
-          <span class="odds">1:{{ tableData.price_player }}</span>
-        </div>
-        <div class="money">
-          <i class="coin-icon"></i>
-          {{ bet_amount_msg.player_amount || 0 }}
+      <div class="bet-cell main-cell player-cell" @click="downBet($event, 'player_amount')">
+        <div class="cell-content">
+          <div class="label">
+            <span class="role player">{{ Lang[Type].player }}</span>
+          </div>
+          <div class="odds">1:{{ tableData.price_player }}</div>
+          <chipView
+            :list="chipArray.player_amount"
+            :win="winArray.includes('player')"
+          ></chipView>
+          <div class="money" v-if="bet_amount_msg.player_amount">
+            <div class="coin-icon"></div>
+            {{ bet_amount_msg.player_amount }}
+          </div>
+          <confirmBet
+            @confirm="confirmChip"
+            @cancel="cancelChip"
+            @undo="undoChip"
+            :data="{
+              money: downChip.player_amount,
+              show: touch == 'player_amount'
+            }"
+          ></confirmBet>
         </div>
       </div>
 
       <!-- 和 -->
-      <div class="item grid-item">
-        <confirmBet
-          @confirm="confirmChip"
-          @cancel="cancelChip"
-          @undo="undoChip"
-          :data="{ money: downChip.tie_amount, show: touch == 'tie_amount' }"
-        ></confirmBet>
-        <chipView
-          @click="downBet($event, 'tie_amount')"
-          :list="chipArray.tie_amount"
-          :win="winArray.includes('tie')"
-        ></chipView>
-        <div class="text">
-          <span class="label-large text-green">{{ Lang[Type].tie }}</span>
-          <span class="odds">1:{{ tableData.price_tie_baccarat }}</span>
-        </div>
-        <div class="money">
-          <i class="coin-icon"></i>
-          {{ bet_amount_msg.tie_amount || 0 }}
+      <div class="bet-cell main-cell tie-cell" @click="downBet($event, 'tie_amount')">
+        <div class="cell-content">
+          <div class="label">
+            <span class="role tie">{{ Lang[Type].tie }}</span>
+          </div>
+          <div class="odds">1:{{ tableData.price_tie_baccarat }}</div>
+          <chipView
+            :list="chipArray.tie_amount"
+            :win="winArray.includes('tie')"
+          ></chipView>
+          <div class="money" v-if="bet_amount_msg.tie_amount">
+            <div class="coin-icon"></div>
+            {{ bet_amount_msg.tie_amount }}
+          </div>
+          <confirmBet
+            @confirm="confirmChip"
+            @cancel="cancelChip"
+            @undo="undoChip"
+            :data="{ money: downChip.tie_amount, show: touch == 'tie_amount' }"
+          ></confirmBet>
         </div>
       </div>
 
       <!-- 庄 -->
-      <div class="item grid-item">
-        <confirmBet
-          @confirm="confirmChip"
-          @cancel="cancelChip"
-          @undo="undoChip"
-          :data="{
-            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">
+      <div class="bet-cell main-cell banker-cell" @click="downBet($event, 'banker_amount')">
+        <div class="cell-content">
+          <div class="label">
+            <span class="role banker">{{ Lang[Type].banker }}</span>
+          </div>
+          <div class="odds">
             {{ 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 class="money">
-          <i class="coin-icon"></i>
-          {{ bet_amount_msg.banker_amount || 0 }}
+      </div>
+    </div>
+
+    <!-- 副下注区域 -->
+    <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>
@@ -258,145 +265,180 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.baccarat {
-  width: 100%;
-  height: 100%;
+/* Color Variables */
+$teal: #59cfa8;
+$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;
   flex-direction: column;
-  gap: 8px;
-  padding: 8px;
+  width: 100%;
+  height: 100%;
+  padding: 4px;
   box-sizing: border-box;
-  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
+  gap: 4px;
+  background: $bg-dark;
+}
 
-  &.yn {
-    .list .item .text {
-      .label {
-        font-size: 10px;
-        transform: scale(0.9); /* Further reduce visual size if needed */
-      }
-      .label-large {
-        font-size: 20px;
-      }
+.main-betting-area {
+  flex: 3;
+  display: flex;
+  gap: 4px;
+  overflow: visible;
+}
+
+.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;
-    gap: 8px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    cursor: pointer;
+    padding: 4px;
+    box-sizing: border-box;
+    overflow: visible;
 
-    &.top {
-      flex: 3; // Top row height ratio
-      .item {
-        flex: 1;
-      }
+    &:active {
+      background: rgba(255, 255, 255, 0.1);
     }
 
-    &.bottom {
-      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;
+    .label {
       display: flex;
       flex-direction: column;
       align-items: center;
-      justify-content: center;
-      transition: all 0.2s;
-      overflow: visible; /* 允许反馈图标完整显示 */
+      margin-bottom: 4px;
+      z-index: 2;
 
-      // Unclick state
-      &.unclick {
-        opacity: 0.5;
-        cursor: not-allowed;
-        filter: grayscale(0.8);
-      }
+      .role {
+        font-size: 24px;
+        font-weight: bold;
+        text-shadow: 0 1px 2px #000, 0 0 5px currentColor;
 
-      // Text Styles
-      .text {
-        position: relative;
-        z-index: 2;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: 100%;
-        pointer-events: none;
-
-        .label {
+        &.player { color: $text-blue; }
+        &.banker { color: $text-red; }
+        &.tie { color: $text-green; }
+        &.side {
+          color: #ffd700;
           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)
-    .grid-item {
-      background: rgba(9, 60, 50, 0.85); // Deep Teal, slightly more opaque
-      border: 1px solid #59cfa8; // Cyan/Green Border
-      box-shadow: inset 0 0 15px rgba(0,0,0,0.5); // Stronger inner shadow
-      
-      &:active {
-         background: rgba(9, 60, 50, 0.95);
-         border-color: #7fffd4;
+    .odds {
+      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;
       }
     }
   }
 }
+
+/* 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>
diff --git a/src/components/PlayTable/TableLonghu.vue b/src/components/PlayTable/TableLonghu.vue
index c44abe53..614b5987 100644
--- a/src/components/PlayTable/TableLonghu.vue
+++ b/src/components/PlayTable/TableLonghu.vue
@@ -1,68 +1,82 @@
 <template>
-  <div class="view longhu">
-    <div class="list">
+  <div class="longhu-table">
+    <div class="betting-area">
       <!-- 龙 -->
-      <div class="item banker">
-        <confirmBet
-          @confirm="confirmChip"
-          @cancel="cancelChip"
-          @undo="undoChip"
-          :data="{
-            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="big">{{ Lang[Type].dragon }}</span>
-          <span>1:{{ tableData.price_dragon }}</span>
+      <div class="bet-cell dragon-cell" @click="downBet($event, 'banker_amount')">
+        <div class="cell-content">
+          <div class="label">
+            <span class="role dragon">{{ Lang[Type].dragon }}</span>
+          </div>
+          <div class="odds">1:{{ tableData.price_dragon }}</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 class="money">{{ bet_amount_msg.banker_amount }}</div>
       </div>
+
       <!-- 和 -->
-      <div class="item tie">
-        <confirmBet
-          @confirm="confirmChip"
-          @cancel="cancelChip"
-          @undo="undoChip"
-          :data="{ money: downChip.tie_amount, show: touch == 'tie_amount' }"
-        ></confirmBet>
-        <chipView
-          @click="downBet($event, 'tie_amount')"
-          :list="chipArray.tie_amount"
-          :win="winArray.includes('tie')"
-        ></chipView>
-        <div class="text">
-          <span class="big">{{ Lang[Type].tie }}</span>
-          <span>1:{{ tableData.price_tie_dt }}</span>
+      <div class="bet-cell tie-cell" @click="downBet($event, 'tie_amount')">
+        <div class="cell-content">
+          <div class="label">
+            <span class="role tie">{{ Lang[Type].tie }}</span>
+          </div>
+          <div class="odds">1:{{ tableData.price_tie_dt }}</div>
+          <chipView
+            :list="chipArray.tie_amount"
+            :win="winArray.includes('tie')"
+          ></chipView>
+          <div class="money" v-if="bet_amount_msg.tie_amount">
+            <div class="coin-icon"></div>
+            {{ bet_amount_msg.tie_amount }}
+          </div>
+          <confirmBet
+            @confirm="confirmChip"
+            @cancel="cancelChip"
+            @undo="undoChip"
+            :data="{ money: downChip.tie_amount, show: touch == 'tie_amount' }"
+          ></confirmBet>
         </div>
-        <div class="money">{{ bet_amount_msg.tie_amount }}</div>
       </div>
+
       <!-- 虎 -->
-      <div class="item palyer">
-        <confirmBet
-          @confirm="confirmChip"
-          @cancel="cancelChip"
-          @undo="undoChip"
-          :data="{
-            money: downChip.player_amount,
-            show: touch == 'player_amount'
-          }"
-        ></confirmBet>
-        <chipView
-          @click="downBet($event, 'player_amount')"
-          :list="chipArray.player_amount"
-          :win="winArray.includes('player')"
-        ></chipView>
-        <div class="text">
-          <span class="big">{{ Lang[Type].tiger }}</span>
-          <span>1:{{ tableData.price_tiger }}</span>
+      <div class="bet-cell tiger-cell" @click="downBet($event, 'player_amount')">
+        <div class="cell-content">
+          <div class="label">
+            <span class="role tiger">{{ Lang[Type].tiger }}</span>
+          </div>
+          <div class="odds">1:{{ tableData.price_tiger }}</div>
+          <chipView
+            :list="chipArray.player_amount"
+            :win="winArray.includes('player')"
+          ></chipView>
+          <div class="money" v-if="bet_amount_msg.player_amount">
+            <div class="coin-icon"></div>
+            {{ bet_amount_msg.player_amount }}
+          </div>
+          <confirmBet
+            @confirm="confirmChip"
+            @cancel="cancelChip"
+            @undo="undoChip"
+            :data="{
+              money: downChip.player_amount,
+              show: touch == 'player_amount'
+            }"
+          ></confirmBet>
         </div>
-        <div class="money">{{ bet_amount_msg.player_amount }}</div>
       </div>
     </div>
   </div>
@@ -128,128 +142,143 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-/* 深色豪华主题配色 */
-$border-color: #444;
-$text-secondary: #888;
+/* Color Variables */
+$teal: #59cfa8;
+$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 {
-  background: rgba(30, 30, 30, 0.95);
-  .list {
-    height: 100%;
+.longhu-table {
+  display: flex;
+  width: 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%;
-    border: none;
+    height: 100%;
     display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    cursor: pointer;
+    padding: 4px;
     box-sizing: border-box;
-    .item {
-      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);
-        }
-      }
+    overflow: visible;
 
-      .chip-box {
-        position: absolute;
-        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; /* 大幅提升层级 */
+    &:active {
+      background: rgba(255, 255, 255, 0.1);
+    }
 
-        /* 添加金色渐变背景 */
-        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);
-        display: flex;
-        align-items: center;
-        gap: 4px;
+    .label {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-bottom: 4px;
+      z-index: 2;
 
-        &::before {
-          display: inline-block;
-          content: "总";
-          background: rgba(255, 255, 255, 0.9);
-          font-size: 11px;
-          border-radius: 50%;
-          width: 18px;
-          height: 18px;
-          text-align: center;
-          line-height: 18px;
-          font-weight: 700;
-          color: #000;
-          border: 1px solid #DAA520;
-        }
+      .role {
+        font-size: 24px;
+        font-weight: bold;
+        text-shadow: 0 1px 2px #000, 0 0 5px currentColor;
+
+        &.dragon { color: $text-blue; }
+        &.tiger { color: $text-red; }
+        &.tie { color: $text-green; }
+      }
+    }
+
+    .odds {
+      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;
-  }
-  .palyer .chip-view {
-    border-bottom-right-radius: 10px;
+}
+
+/* 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>