From 6e8a196ecf127c12d8237b1c0b117f897b281c7d Mon Sep 17 00:00:00 2001
From: li <ljf@com>
Date: Thu, 22 Jan 2026 16:56:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=89=9B=E7=89=9B/=E4=B8=89=E5=8D=A1?=
 =?UTF-8?q?=E7=AB=96=E5=B1=8F=E4=BC=98=E5=8C=96=20-=20=E5=AE=9A=E4=BD=8D?=
 =?UTF-8?q?=E7=89=8C=E6=98=BE=E7=A4=BA=E3=80=81=E5=8D=A1=E7=89=8C=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E3=80=81=E4=B8=8B=E6=B3=A8=E9=87=91=E9=A2=9D=E7=BC=A9?=
 =?UTF-8?q?=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加定位牌(nn_position)在视频左侧显示
- 卡牌区域添加庄家/闲1/闲2/闲3标签
- 优化下注金额显示，使用scale(0.5)避免翻倍文字溢出
- 调整poker-section高度(60→40px)和路单高度(100→130px)
- 修复overflow设置允许筹码和金额显示溢出

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/PlayTable/TableBullbull.vue |  29 +--
 src/components/PlayWay.vue                 |  22 ++-
 src/views/play.vue                         | 204 ++++++++++++++++++++-
 3 files changed, 232 insertions(+), 23 deletions(-)

diff --git a/src/components/PlayTable/TableBullbull.vue b/src/components/PlayTable/TableBullbull.vue
index f77b98ed..b3c86dab 100644
--- a/src/components/PlayTable/TableBullbull.vue
+++ b/src/components/PlayTable/TableBullbull.vue
@@ -224,6 +224,7 @@ $text-red: #f56c6c;
     flex: 1;
     display: flex;
     flex-direction: column;
+    overflow: visible; /* 允许金额显示溢出 */
   }
 }
 
@@ -231,6 +232,7 @@ $text-red: #f56c6c;
   flex: 1;
   display: flex;
   border-bottom: 1px solid $border-light;
+  overflow: visible; /* 允许金额显示溢出 */
   
   &:last-child {
     border-bottom: none;
@@ -240,7 +242,8 @@ $text-red: #f56c6c;
     flex: 1;
     position: relative;
     border-right: 1px solid $border-light;
-    
+    overflow: visible; /* 允许金额显示溢出 */
+
     &:last-child {
       border-right: none;
     }
@@ -256,6 +259,7 @@ $text-red: #f56c6c;
       cursor: pointer;
       padding: 4px;
       box-sizing: border-box;
+      overflow: visible; /* 允许金额显示溢出 */
 
       &:active {
         background: rgba(255, 255, 255, 0.1);
@@ -290,23 +294,26 @@ $text-red: #f56c6c;
 
       .money {
         position: absolute;
-        bottom: 4px;
+        bottom: 1px;
         left: 50%;
-        transform: translateX(-50%);
-        background: rgba(0,0,0,0.6);
-        padding: 2px 8px;
-        border-radius: 10px;
+        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: 12px;
+        font-size: 9px;
         white-space: nowrap;
         display: flex;
         align-items: center;
-        gap: 2px;
-        z-index: 5;
+        gap: 1px;
+        z-index: 100;
+        pointer-events: none;
 
         .coin-icon {
-          width: 10px;
-          height: 10px;
+          width: 6px;
+          height: 6px;
+          flex-shrink: 0;
           border-radius: 50%;
           background: #ffd700;
           border: 1px solid #b8860b;
diff --git a/src/components/PlayWay.vue b/src/components/PlayWay.vue
index 9fc886d9..a114f343 100644
--- a/src/components/PlayWay.vue
+++ b/src/components/PlayWay.vue
@@ -31,15 +31,23 @@
             <span class="game-info">{{ tableData.number_tab_number || '0-0' }}</span>
           </div>
         </div>
-        <!-- NiuNiu Stats -->
+        <!-- NiuNiu/TC 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">
+          <div class="stat-item">
+            <span class="badge red">{{ Lang[Type].player }}1</span>
+            <span class="val red">{{ tableData.player_1_count || 0 }}</span>
+          </div>
+          <div class="stat-item">
+            <span class="badge blue">{{ Lang[Type].player }}2</span>
+            <span class="val blue">{{ tableData.player_2_count || 0 }}</span>
+          </div>
+          <div class="stat-item">
+            <span class="badge green">{{ Lang[Type].player }}3</span>
+            <span class="val green">{{ tableData.player_3_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>
+            <span class="game-info">{{ tableData.number_tab_number - 1 || 0 }}</span>
           </div>
         </div>
       </div>
diff --git a/src/views/play.vue b/src/views/play.vue
index 592280bb..9cc63c94 100644
--- a/src/views/play.vue
+++ b/src/views/play.vue
@@ -89,7 +89,7 @@
       </div>
 
       <!-- Game Betting Area (Moved below Nav) -->
-      <div class="game-area-block">
+      <div class="game-area-block" :class="{ 'nn-mode': tableData && (tableData.game_id == 4 || tableData.game_id == 5) }">
           <div class="game-area-content">
               <template
                 v-if="tableData && (tableData.game_id == 7 || tableData.game_id == 8)"
@@ -156,13 +156,25 @@
       <!-- 2. Chip Control Bar (Middle Section, Fixed Height) -->
       <PlayChip class="bet-chip-bar"></PlayChip>
 
-      <!-- 3. Roadmap (Bottom Section, Fixed Height or Flex Basis) -->
-      <div class="roadmap-container" @click.stop="closeSwitchView(false)">
+      <!-- 3. Poker Cards for NN/TC (Separate section above roadmap) -->
+      <div
+        class="poker-section"
+        v-if="tableData && (tableData.game_id == 4 || tableData.game_id == 5) && tableData.is_scavenging == 1"
+      >
+        <Poker
+          class="pokerView nn-compact"
+          :thisData="tableData"
+        ></Poker>
+      </div>
+
+      <!-- 4. Roadmap (Bottom Section, Fixed Height or Flex Basis) -->
+      <div class="roadmap-container" :class="{ 'nn-mode': tableData && (tableData.game_id == 4 || tableData.game_id == 5) }" @click.stop="closeSwitchView(false)">
         <PlayWay :tableData="tableData"></PlayWay>
+        <!-- Poker for Baccarat/Dragon Tiger (overlay style) -->
         <Poker
           class="pokerView"
           :thisData="tableData"
-          v-if="tableData && tableData.is_scavenging == 1"
+          v-if="tableData && tableData.is_scavenging == 1 && tableData.game_id != 4 && tableData.game_id != 5"
         ></Poker>
         <ToningResult
           v-if="showToningResult"
@@ -1467,6 +1479,11 @@ $gold: #c5a059;
         z-index: 10;
         overflow: hidden;
 
+        /* NN/TC mode - same as other games */
+        &.nn-mode {
+          height: 200px;
+        }
+
         /* Content wrapper that mimics old absolute positioning for internal components */
         .game-area-content {
             width: 100%;
@@ -1504,7 +1521,179 @@ $gold: #c5a059;
       border-top: 1px solid #333;
     }
 
-    /* 3. Roadmap Container (Bottom) - Auto Height for Aspect Ratio */
+    /* 3. Poker Section for NN/TC - Compact horizontal layout */
+    .poker-section {
+      width: 100%;
+      height: 40px; /* 减小高度 */
+      flex-shrink: 0;
+      position: relative;
+      z-index: 20;
+      background: rgba(0, 0, 0, 0.85);
+      border-top: 1px solid #333;
+      overflow: hidden;
+
+      ::v-deep .nn-compact {
+        /* Override default poker-box styles for compact mode */
+        .poker-box.nn {
+          position: relative !important;
+          height: 100% !important;
+          width: 100% !important;
+          display: flex !important;
+          flex-direction: row !important;
+          align-items: center !important;
+          justify-content: space-around !important;
+          padding: 2px 4px !important;
+          box-sizing: border-box !important;
+          background: transparent !important;
+
+          .list {
+            flex: 1 !important;
+            height: 100% !important;
+            min-width: 0 !important;
+            padding: 0 2px !important;
+            border-left: 1px solid #444 !important;
+            display: flex !important;
+            flex-direction: row !important;
+            align-items: center !important;
+            justify-content: center !important;
+            position: relative !important;
+
+            &:first-child {
+              border-left: none !important;
+            }
+
+            .title {
+              position: relative !important;
+              display: block !important;
+              font-size: 8px !important;
+              padding: 2px 3px !important;
+              border-radius: 2px !important;
+              white-space: nowrap !important;
+              margin-right: 2px !important;
+              flex-shrink: 0 !important;
+              /* 确保颜色样式正确应用 */
+              &.red {
+                background: #ff494b !important;
+                color: #fff !important;
+              }
+              &.blue {
+                background: #00a8ff !important;
+                color: #fff !important;
+              }
+            }
+
+            .role {
+              position: absolute !important;
+              width: auto !important;
+              left: 50% !important;
+              top: auto !important;
+              bottom: 2px !important;
+              transform: translateX(-50%) !important;
+              font-size: 10px !important;
+              padding: 1px 4px !important;
+              margin: 0 !important;
+              background: rgba(0, 0, 0, 0.7) !important;
+              border-radius: 2px !important;
+              color: #ffd700 !important;
+            }
+
+            .item {
+              width: 16px !important;
+              height: 22px !important;
+              margin: 0 -3px !important;
+              margin-top: 0 !important;
+              padding: 0 !important;
+
+              .card {
+                background-size: 100% 100% !important;
+              }
+            }
+          }
+        }
+
+        /* Position card (定位牌) - show on video area left side for NN/TC */
+        .nn_position {
+          display: flex !important;
+          position: fixed !important;
+          top: 15% !important; /* 在视频区域内 */
+          left: 8px !important;
+          transform: translateY(-50%) !important;
+          z-index: 2000 !important;
+          flex-direction: column !important;
+          align-items: center !important;
+          justify-content: center !important;
+          background: transparent !important;
+          padding: 0 !important;
+
+          strong {
+            font-size: 10px !important;
+            color: #fff !important;
+            margin-bottom: 4px !important;
+            padding: 0 !important;
+            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
+          }
+
+          .item {
+            width: 36px !important;
+            height: 52px !important;
+            transform: none !important;
+            margin: 0 !important;
+            padding: 0 !important;
+
+            .card {
+              display: block !important;
+              width: 100% !important;
+              height: 100% !important;
+              background-size: 100% 100% !important;
+              border-radius: 3px !important;
+              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
+            }
+          }
+        }
+
+        /* 三卡牛牛的定位牌在 poker-box 内部，需要额外选择器 */
+        .poker-box.nn .nn_position {
+          display: flex !important;
+          position: fixed !important;
+          top: 15% !important; /* 在视频区域内 */
+          left: 8px !important;
+          transform: translateY(-50%) !important;
+          z-index: 2000 !important;
+          flex-direction: column !important;
+          align-items: center !important;
+          justify-content: center !important;
+          background: transparent !important;
+          padding: 0 !important;
+
+          strong {
+            font-size: 10px !important;
+            color: #fff !important;
+            margin-bottom: 4px !important;
+            padding: 0 !important;
+            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
+          }
+
+          .item {
+            width: 36px !important;
+            height: 52px !important;
+            transform: none !important;
+            margin: 0 !important;
+            padding: 0 !important;
+
+            .card {
+              display: block !important;
+              width: 100% !important;
+              height: 100% !important;
+              background-size: 100% 100% !important;
+              border-radius: 3px !important;
+              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
+            }
+          }
+        }
+      }
+    }
+
+    /* 4. Roadmap Container (Bottom) - Auto Height for Aspect Ratio */
     .roadmap-container {
       width: 100%;
       height: 160px; 
@@ -1514,6 +1703,11 @@ $gold: #c5a059;
       z-index: 20;
       overflow: hidden;
 
+      /* NN/TC mode - larger roadmap */
+      &.nn-mode {
+        height: 130px;
+      }
+
       /* Deep overrides to ensure standard layout and white background support */
       ::v-deep .playway {
         height: 100% !important;