From 23b6841d3777f166515d3750037bbc9e4f44f050 Mon Sep 17 00:00:00 2001
From: li <ljf@com>
Date: Mon, 19 Jan 2026 15:10:26 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=AE=80=E5=8C=96=20TableBullbull.?=
 =?UTF-8?q?vue=20=E4=B8=AD=E9=87=8D=E5=A4=8D=E7=9A=84=E4=B8=8B=E6=B3=A8?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E4=BB=A3=E7=A0=81=E5=B9=B6=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=20PlayWay.vue=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PlayTable/TableBullbull.vue | 739 ++++++++-------------
 src/components/PlayWay.vue                 |  26 +-
 2 files changed, 279 insertions(+), 486 deletions(-)

diff --git a/src/components/PlayTable/TableBullbull.vue b/src/components/PlayTable/TableBullbull.vue
index 4016e090..3c98587c 100644
--- a/src/components/PlayTable/TableBullbull.vue
+++ b/src/components/PlayTable/TableBullbull.vue
@@ -1,325 +1,134 @@
 <template>
-  <div class="nn">
-    <div class="list">
-      <!-- 闲1 -->
-      <span class="tab">{{ Lang[Type].player }}1</span>
-      <!-- 庄翻倍 -->
-      <div class="item banker">
-        <confirmBet
-          @confirm="confirmChip"
-          @cancel="cancelChip"
-          @undo="undoChip"
-          :data="{
-            money: downChip.amount_player_1_banker_times,
-            show: touch == 'amount_player_1_banker_times',
-            times: true,
-            game_id: game_id
-          }"
-        ></confirmBet>
-        <chipView
-          @click="downBet($event, 'amount_player_1_banker_times')"
-          :list="chipArray.amount_player_1_banker_times"
-          :win="winArray.includes('player_1_banker')"
-        ></chipView>
-        <div class="text">
-          <span class="big">
-            {{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
-          </span>
-          <span>{{ Lang[Type].double }}</span>
-        </div>
-        <div class="money">
-          {{ bet_amount_msg.amount_player_1_banker_times }}
-        </div>
+  <div class="nn-table">
+    <!-- Player 1 Section -->
+    <div class="player-section" v-for="(pName, pIndex) in ['player_1', 'player_2', 'player_3']" :key="pName">
+      <div class="section-header">
+        <span class="title">{{ Lang[Type][pName.replace('_', '')] || (Type == 'cn' ? `闲${pIndex+1}` : `P${pIndex+1}`) }}</span>
       </div>
-      <!-- 庄平倍 -->
-      <div class="item banker">
-        <confirmBet
-          @confirm="confirmChip"
-          @cancel="cancelChip"
-          @undo="undoChip"
-          :data="{
-            money: downChip.amount_player_1_banker,
-            show: touch == 'amount_player_1_banker'
-          }"
-        ></confirmBet>
-        <chipView
-          @click="downBet($event, 'amount_player_1_banker')"
-          :list="chipArray.amount_player_1_banker"
-          :win="winArray.includes('player_1_banker')"
-        ></chipView>
-        <div class="text">
-          <span class="big">
-            {{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
-          </span>
-          <span>{{ Lang[Type].equal }}</span>
-        </div>
-        <div class="money">{{ bet_amount_msg.amount_player_1_banker }}</div>
-      </div>
-      <!-- 闲翻倍 -->
-      <div class="item palyer">
-        <confirmBet
-          @confirm="confirmChip"
-          @cancel="cancelChip"
-          @undo="undoChip"
-          :data="{
-            money: downChip.amount_player_1_times,
-            show: touch == 'amount_player_1_times',
-            times: true,
-            game_id: game_id
-          }"
-        ></confirmBet>
-        <chipView
-          @click="downBet($event, 'amount_player_1_times')"
-          :list="chipArray.amount_player_1_times"
-          :win="winArray.includes('player_1')"
-        ></chipView>
-        <div class="text">
-          <span class="big">
-            {{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
-          </span>
-          <span>{{ Lang[Type].double }}</span>
-        </div>
-        <div class="money">{{ bet_amount_msg.amount_player_1_times }}</div>
-      </div>
-      <!-- 闲平倍 -->
-      <div class="item palyer">
-        <confirmBet
-          @confirm="confirmChip"
-          @cancel="cancelChip"
-          @undo="undoChip"
-          :data="{
-            money: downChip.amount_player_1,
-            show: touch == 'amount_player_1'
-          }"
-        ></confirmBet>
-        <chipView
-          @click="downBet($event, 'amount_player_1')"
-          :list="chipArray.amount_player_1"
-          :win="winArray.includes('player_1')"
-        ></chipView>
-        <div class="text">
-          <span class="big">
-            {{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
-          </span>
-          <span>{{ Lang[Type].equal }}</span>
-        </div>
-        <div class="money">{{ bet_amount_msg.amount_player_1 }}</div>
-      </div>
-    </div>
-    <!-- 闲2 -->
-    <div class="list">
-      <span class="tab">{{ Lang[Type].player }}2</span>
-      <!-- 庄翻倍 -->
-      <div class="item banker">
-        <confirmBet
-          @confirm="confirmChip"
-          @cancel="cancelChip"
-          @undo="undoChip"
-          :data="{
-            money: downChip.amount_player_2_banker_times,
-            show: touch == 'amount_player_2_banker_times',
-            times: true,
-            game_id: game_id
-          }"
-        ></confirmBet>
-        <chipView
-          @click="downBet($event, 'amount_player_2_banker_times')"
-          :list="chipArray.amount_player_2_banker_times"
-          :win="winArray.includes('player_2_banker')"
-        ></chipView>
-        <div class="text">
-          <span class="big">
-            {{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
-          </span>
-          <span>{{ Lang[Type].double }}</span>
-        </div>
-        <div class="money">
-          {{ bet_amount_msg.amount_player_2_banker_times }}
-        </div>
-      </div>
-      <!-- 庄平倍 -->
-      <div class="item banker">
-        <confirmBet
-          @confirm="confirmChip"
-          @cancel="cancelChip"
-          @undo="undoChip"
-          :data="{
-            money: downChip.amount_player_2_banker,
-            show: touch == 'amount_player_2_banker'
-          }"
-        ></confirmBet>
-        <chipView
-          @click="downBet($event, 'amount_player_2_banker')"
-          :list="chipArray.amount_player_2_banker"
-          :win="winArray.includes('player_2_banker')"
-        ></chipView>
-        <div class="text">
-          <span class="big">
-            {{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
-          </span>
-          <span>{{ Lang[Type].equal }}</span>
-        </div>
-        <div class="money">
-          {{ bet_amount_msg.amount_player_2_banker }}
-        </div>
-      </div>
-      <!-- 闲翻倍 -->
-      <div class="item palyer">
-        <confirmBet
-          @confirm="confirmChip"
-          @cancel="cancelChip"
-          @undo="undoChip"
-          :data="{
-            money: downChip.amount_player_2_times,
-            show: touch == 'amount_player_2_times',
-            times: true,
-            game_id: game_id
-          }"
-        ></confirmBet>
-        <chipView
-          @click="downBet($event, 'amount_player_2_times')"
-          :list="chipArray.amount_player_2_times"
-          :win="winArray.includes('player_2')"
-        ></chipView>
-        <div class="text">
-          <span class="big">
-            {{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
-          </span>
-          <span>{{ Lang[Type].double }}</span>
-        </div>
-        <div class="money">{{ bet_amount_msg.amount_player_2_times }}</div>
-      </div>
-      <!-- 闲平倍 -->
-      <div class="item palyer">
-        <confirmBet
-          @confirm="confirmChip"
-          @cancel="cancelChip"
-          @undo="undoChip"
-          :data="{
-            money: downChip.amount_player_2,
-            show: touch == 'amount_player_2'
-          }"
-        ></confirmBet>
-        <chipView
-          @click="downBet($event, 'amount_player_2')"
-          :list="chipArray.amount_player_2"
-          :win="winArray.includes('player_2')"
-        ></chipView>
-        <div class="text">
-          <span class="big">
-            {{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
-          </span>
-          <span>{{ Lang[Type].equal }}</span>
-        </div>
-        <div class="money">{{ bet_amount_msg.amount_player_2 }}</div>
-      </div>
-    </div>
-    <!-- 闲3 -->
-    <div class="list">
-      <span class="tab">{{ Lang[Type].player }}3</span>
-      <!-- 庄翻倍 -->
-      <div class="item banker">
-        <confirmBet
-          @confirm="confirmChip"
-          @cancel="cancelChip"
-          @undo="undoChip"
-          :data="{
-            money: downChip.amount_player_3_banker_times,
-            show: touch == 'amount_player_3_banker_times',
-            times: true,
-            game_id: game_id
-          }"
-        ></confirmBet>
-        <chipView
-          @click="downBet($event, 'amount_player_3_banker_times')"
-          :list="chipArray.amount_player_3_banker_times"
-          :win="winArray.includes('player_3_banker')"
-        ></chipView>
-        <div class="text">
-          <span class="big">
-            {{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
-          </span>
-          <span>{{ Lang[Type].double }}</span>
+      
+      <div class="betting-grid">
+        <!-- Banker Win Row -->
+        <div class="bet-row banker-row">
+           <!-- Banker Double -->
+           <div class="bet-cell">
+             <div class="cell-content" @click="downBet($event, `amount_${pName}_banker_times`)">
+                <div class="label">
+                  <span class="role banker">{{ Lang[Type].banker }}</span>
+                  <span class="mode">{{ Lang[Type].double }}</span>
+                </div>
+                <div class="odds">1:0.97</div>
+                <chipView
+                  :list="chipArray[`amount_${pName}_banker_times`]"
+                  :win="winArray.includes(`${pName}_banker`)"
+                ></chipView>
+                <div class="money" v-if="bet_amount_msg[`amount_${pName}_banker_times`]">
+                   <div class="coin-icon"></div>
+                   {{ bet_amount_msg[`amount_${pName}_banker_times`] }}
+                </div>
+                <confirmBet
+                   @confirm="confirmChip"
+                   @cancel="cancelChip"
+                   @undo="undoChip"
+                   :data="{
+                     money: downChip[`amount_${pName}_banker_times`],
+                     show: touch == `amount_${pName}_banker_times`,
+                     times: true,
+                     game_id: game_id
+                   }"
+                 ></confirmBet>
+             </div>
+           </div>
+           
+           <!-- Banker Equal -->
+           <div class="bet-cell">
+              <div class="cell-content" @click="downBet($event, `amount_${pName}_banker`)">
+                <div class="label">
+                  <span class="role banker">{{ Lang[Type].banker }}</span>
+                  <span class="mode">{{ Lang[Type].equal }}</span>
+                </div>
+                <div class="odds">1:0.97</div>
+                <chipView
+                  :list="chipArray[`amount_${pName}_banker`]"
+                  :win="winArray.includes(`${pName}_banker`)"
+                ></chipView>
+                <div class="money" v-if="bet_amount_msg[`amount_${pName}_banker`]">
+                  <div class="coin-icon"></div>
+                  {{ bet_amount_msg[`amount_${pName}_banker`] }}
+                </div>
+                <confirmBet
+                   @confirm="confirmChip"
+                   @cancel="cancelChip"
+                   @undo="undoChip"
+                   :data="{
+                     money: downChip[`amount_${pName}_banker`],
+                     show: touch == `amount_${pName}_banker`
+                   }"
+                 ></confirmBet>
+              </div>
+           </div>
         </div>
 
-        <div class="money">
-          {{ bet_amount_msg.amount_player_3_banker_times }}
+        <!-- Player Win Row -->
+        <div class="bet-row player-row">
+           <!-- Player Double -->
+           <div class="bet-cell">
+              <div class="cell-content" @click="downBet($event, `amount_${pName}_times`)">
+                <div class="label">
+                  <span class="role player">{{ Lang[Type].player }}</span>
+                  <span class="mode">{{ Lang[Type].double }}</span>
+                </div>
+                <div class="odds">1:0.97</div>
+                <chipView
+                  :list="chipArray[`amount_${pName}_times`]"
+                  :win="winArray.includes(pName)"
+                ></chipView>
+                <div class="money" v-if="bet_amount_msg[`amount_${pName}_times`]">
+                  <div class="coin-icon"></div>
+                  {{ bet_amount_msg[`amount_${pName}_times`] }}
+                </div>
+                <confirmBet
+                   @confirm="confirmChip"
+                   @cancel="cancelChip"
+                   @undo="undoChip"
+                   :data="{
+                     money: downChip[`amount_${pName}_times`],
+                     show: touch == `amount_${pName}_times`,
+                     times: true,
+                     game_id: game_id
+                   }"
+                 ></confirmBet>
+              </div>
+           </div>
+
+           <!-- Player Equal -->
+           <div class="bet-cell">
+              <div class="cell-content" @click="downBet($event, `amount_${pName}`)">
+                <div class="label">
+                  <span class="role player">{{ Lang[Type].player }}</span>
+                  <span class="mode">{{ Lang[Type].equal }}</span>
+                </div>
+                <div class="odds">1:0.97</div>
+                <chipView
+                  :list="chipArray[`amount_${pName}`]"
+                  :win="winArray.includes(pName)"
+                ></chipView>
+                <div class="money" v-if="bet_amount_msg[`amount_${pName}`]">
+                  <div class="coin-icon"></div>
+                  {{ bet_amount_msg[`amount_${pName}`] }}
+                </div>
+                <confirmBet
+                   @confirm="confirmChip"
+                   @cancel="cancelChip"
+                   @undo="undoChip"
+                   :data="{
+                     money: downChip[`amount_${pName}`],
+                     show: touch == `amount_${pName}`
+                   }"
+                 ></confirmBet>
+              </div>
+           </div>
         </div>
       </div>
-      <!-- 庄平倍 -->
-      <div class="item banker">
-        <confirmBet
-          @confirm="confirmChip"
-          @cancel="cancelChip"
-          @undo="undoChip"
-          :data="{
-            money: downChip.amount_player_3_banker,
-            show: touch == 'amount_player_3_banker'
-          }"
-        ></confirmBet>
-        <chipView
-          @click="downBet($event, 'amount_player_3_banker')"
-          :list="chipArray.amount_player_3_banker"
-          :win="winArray.includes('player_3_banker')"
-        ></chipView>
-        <div class="text">
-          <span class="big">
-            {{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
-          </span>
-          <span>{{ Lang[Type].equal }}</span>
-        </div>
-        <div class="money">{{ bet_amount_msg.amount_player_3_banker }}</div>
-      </div>
-      <!-- 闲翻倍 -->
-      <div class="item palyer">
-        <confirmBet
-          @confirm="confirmChip"
-          @cancel="cancelChip"
-          @undo="undoChip"
-          :data="{
-            money: downChip.amount_player_3_times,
-            show: touch == 'amount_player_3_times',
-            times: true,
-            game_id: game_id
-          }"
-        ></confirmBet>
-        <chipView
-          @click="downBet($event, 'amount_player_3_times')"
-          :list="chipArray.amount_player_3_times"
-          :win="winArray.includes('player_3')"
-        ></chipView>
-        <div class="text">
-          <span class="big">
-            {{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
-          </span>
-          <span>{{ Lang[Type].double }}</span>
-        </div>
-        <div class="money">{{ bet_amount_msg.amount_player_3_times }}</div>
-      </div>
-      <!-- 闲平倍 -->
-      <div class="item palyer">
-        <confirmBet
-          @confirm="confirmChip"
-          @cancel="cancelChip"
-          @undo="undoChip"
-          :data="{
-            money: downChip.amount_player_3,
-            show: touch == 'amount_player_3'
-          }"
-        ></confirmBet>
-        <chipView
-          @click="downBet($event, 'amount_player_3')"
-          :list="chipArray.amount_player_3"
-          :win="winArray.includes('player_3')"
-        ></chipView>
-        <div class="text">
-          <span class="big">
-            {{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
-          </span>
-          <span>{{ Lang[Type].equal }}</span>
-        </div>
-        <div class="money">{{ bet_amount_msg.amount_player_3 }}</div>
-      </div>
     </div>
   </div>
 </template>
@@ -330,43 +139,23 @@ import { useStore } from "vuex"
 import confirmBet from "@/components/confirmBet.vue"
 import chipView from "@/components/chipView.vue"
 import { nnData } from "@/utils/common"
+
 export default {
   name: "TableBullbull",
   components: { confirmBet, chipView },
   props: {
-    game_id: {
-      type: [String, Number],
-      default: 1
-    },
-    touch: {
-      type: String,
-      default: ""
-    },
-    bet_amount_msg: {
-      type: Object,
-      default: () => ({
-        ...nnData.amount
-      })
-    },
-    winArray: {
-      type: Array,
-      default: () => []
-    },
-    downChip: {
-      type: Object,
-      default: () => ({
-        ...nnData.amount
-      })
-    },
-    chipArray: {
-      type: Object,
-      default: () => ({ ...nnData.array })
-    }
+    game_id: { type: [String, Number], default: 1 },
+    touch: { type: String, default: "" },
+    bet_amount_msg: { type: Object, default: () => ({ ...nnData.amount }) },
+    winArray: { type: Array, default: () => [] },
+    downChip: { type: Object, default: () => ({ ...nnData.amount }) },
+    chipArray: { type: Object, default: () => ({ ...nnData.array }) }
   },
-  setup(prop, context) {
+  setup(props, context) {
     const store = useStore()
     const Type = computed(() => store.state.config.$Type)
     const Lang = computed(() => store.state.config.$lang)
+
     const downBet = (e, type) => {
       context.emit("downBet", e, type)
     }
@@ -379,163 +168,157 @@ export default {
     const undoChip = () => {
       context.emit("undoChip")
     }
+
     return { Type, Lang, downBet, confirmChip, cancelChip, undoChip }
   }
 }
 </script>
+
 <style lang="scss" scoped>
-/* 深色豪华主题配色 */
-$border-color: #444;
-$text-secondary: #888;
-$gold: #c5a059;
+/* 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;
 
-.nn {
+.nn-table {
   display: flex;
-  background: rgba(30, 30, 30, 0.95);
-  .list {
-    width: 33.33%;
-    height: 100%;
-    flex-wrap: wrap;
-    border: none;
-    position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 0 4px; /* Slight padding from edges */
+  box-sizing: border-box;
+  gap: 4px;
+}
+
+.player-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid $border-light;
+  border-radius: 8px;
+  overflow: hidden;
+  background: $bg-dark;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+
+  .section-header {
+    height: 32px;
+    background: linear-gradient(to bottom, rgba(89, 207, 168, 0.2), rgba(89, 207, 168, 0.05));
     display: flex;
-    box-sizing: border-box;
-    &:first-child {
-      .item:nth-of-type(1) {
-        .chip-view {
-          border-top-left-radius: 10px;
-        }
-      }
-      .item:nth-of-type(3) {
-        .chip-view {
-          border-bottom-left-radius: 10px;
-        }
-      }
-    }
-    &:last-child {
-      .item:nth-of-type(2) {
-        border-right: none;
-        .chip-view {
-          border-top-right-radius: 10px;
-        }
-      }
-      .item:nth-of-type(4) {
-        border-right: none;
-        .chip-view {
-          border-bottom-right-radius: 10px;
-        }
-      }
-    }
-    .tab {
-      position: absolute;
-      top: -2px;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid $border-light;
+    
+    .title {
       color: #fff;
-      font-size: 0.42rem;
-      border: 1px solid $gold;
-      padding: 1px 0.18rem;
-      transform: scale(0.8) translateX(-50%);
-      left: 50%;
-      z-index: 2;
-      background: rgba(30, 30, 30, 0.9);
-      border-radius: 2px;
-      font-weight: 500;
+      font-size: 16px;
+      font-weight: bold;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
     }
-    .item {
+  }
+
+  .betting-grid {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.bet-row {
+  flex: 1;
+  display: flex;
+  border-bottom: 1px solid $border-light;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .bet-cell {
+    flex: 1;
+    position: relative;
+    border-right: 1px solid $border-light;
+    
+    &:last-child {
+      border-right: none;
+    }
+
+    .cell-content {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
       position: relative;
-      width: 50%;
-      height: 50%;
+      cursor: pointer;
+      padding: 4px;
       box-sizing: border-box;
-      border-right: 1px solid $border-color;
-      border-radius: 0;
-      border-bottom: 1px solid $border-color;
-      font-size: 0.45rem;
-      &:nth-of-type(3),
-      &:nth-of-type(4) {
-        border-bottom: none;
+
+      &:active {
+        background: rgba(255, 255, 255, 0.1);
       }
-      &.unclick {
-        &:after {
-          content: "";
-          position: absolute;
-          width: 102%;
-          border-bottom: 1px solid $border-color;
-          top: 50%;
-          transform: rotate(14deg);
-          z-index: 6;
-          left: -2px;
+
+      .label {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-bottom: 4px;
+        z-index: 2; /* Above chips */
+        
+        .role {
+          font-size: 16px;
+          font-weight: bold;
+          &.banker { color: $text-blue; text-shadow: 0 0 5px rgba(64, 158, 255, 0.3); }
+          &.player { color: $teal; text-shadow: 0 0 5px rgba(89, 207, 168, 0.3); }
         }
-        &.max:after {
-          width: 104%;
-          transform: rotate(21deg);
-        }
-        &.min:after {
-          width: 104%;
-          transform: rotate(21deg);
-        }
-        .chip-view {
-          background: rgba(98, 74, 4, 0.4);
+        
+        .mode {
+          font-size: 12px;
+          color: #ccc;
+          margin-top: 2px;
         }
       }
 
-      .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;
+      .odds {
+        font-size: 10px;
+        color: rgba(255,255,255,0.6);
         z-index: 2;
-        pointer-events: none;
-        color: #fff;
-        .big {
-          font-weight: bold;
-          padding-right: 0.24rem;
-          padding-left: 0.2rem;
-        }
       }
+
       .money {
         position: absolute;
-        left: 0px;
-        bottom: -2px;
-        font-size: 0.24rem;
-        font-weight: normal;
-        transform: scale(0.7);
-        color: $text-secondary;
-        vertical-align: bottom;
-        pointer-events: none;
-        &::before {
-          display: inline-block;
-          content: "总";
-          background: rgba(255, 255, 255, 0.2);
-          font-size: 10px;
-          border-radius: 0.615rem;
-          width: 0.615rem;
-          height: 0.615rem;
-          text-align: center;
-          line-height: 0.615rem;
-          font-weight: normal;
-          margin-right: 0.06rem;
-          transform: scale(0.7);
-        }
-      }
-      .text {
-        font-size: 0.58rem;
-        text-shadow: 1px 1px #050505;
-        span {
-          padding-bottom: 0.2rem;
+        bottom: 4px;
+        left: 50%;
+        transform: translateX(-50%);
+        background: rgba(0,0,0,0.6);
+        padding: 2px 8px;
+        border-radius: 10px;
+        color: #ffd700;
+        font-size: 12px;
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        z-index: 5;
+
+        .coin-icon {
+          width: 10px;
+          height: 10px;
+          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);
+}
 </style>
diff --git a/src/components/PlayWay.vue b/src/components/PlayWay.vue
index df4b6032..9fc886d9 100644
--- a/src/components/PlayWay.vue
+++ b/src/components/PlayWay.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="playway" :class="{ 'white-theme': [1, 2].includes(tableData.game_id) }">
+  <div class="playway" :class="{ 'white-theme': [1, 2, 4, 5].includes(tableData.game_id) }">
     
-    <!-- New Baccarat/DT Layout -->
-    <div class="baccarat-view" v-if="[1, 2].includes(tableData.game_id)">
+    <!-- New Baccarat/DT Layout (and NiuNiu reuse) -->
+    <div class="baccarat-view" v-if="[1, 2, 4, 5].includes(tableData.game_id)">
       <!-- Top Header Bar -->
       <div class="header-bar">
-        <div class="left-stats">
+        <div class="left-stats" v-if="[1, 2].includes(tableData.game_id)">
           <div class="stat-item">
             <span class="badge red">{{ Lang[Type].banker }}</span>
             <span class="val red">{{ tableData.bankerCount || 0 }}</span>
@@ -31,6 +31,17 @@
             <span class="game-info">{{ tableData.number_tab_number || '0-0' }}</span>
           </div>
         </div>
+        <!-- NiuNiu Stats -->
+        <div class="left-stats" v-else-if="[4, 5].includes(tableData.game_id)">
+           <div class="stat-item" v-for="(val, key) in tableData.count" :key="key">
+             <span class="badge black">{{ key }}</span>
+             <span class="val black">{{ val }}</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 -->
@@ -38,9 +49,8 @@
         <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">
+          <!-- Ask Way Overlay (Bottom Right) -->
+          <div class="ask-panel" v-if="[1,2].includes(tableData.game_id)">
             <div class="ask-group banker" @click="askWay('banker')">
                 <div class="ask-title text-red">{{ Lang[Type].askbanker }}</div>
                 <div class="ask-icons">
@@ -77,7 +87,7 @@
        <div class="canvas-box">
          <canvas class="canvas" ref="refItem"></canvas>
        </div>
-       <div class="totle-box" v-if="[4,5,6,7,8].includes(tableData.game_id)">
+       <div class="totle-box" v-if="[6,7,8].includes(tableData.game_id)">
           <div class="list">
              <div class="item" v-for="(val, key) in tableData.count" :key="key">
                 <span class="lab">{{key}}</span><span class="num">{{val}}</span>