From e453548f5ca68b2323222be39e26d8e577dfb40e Mon Sep 17 00:00:00 2001
From: li <ljf@com>
Date: Wed, 11 Feb 2026 02:15:44 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=97=AE=E8=B7=AF=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E4=BB=8E=E8=B7=AF=E5=8D=95=E5=8C=BA=E5=9F=9F=E7=A7=BB?=
 =?UTF-8?q?=E5=88=B0=E9=A1=B6=E9=83=A8=E7=BB=9F=E8=AE=A1=E6=A0=8F=E6=9C=80?=
 =?UTF-8?q?=E5=8F=B3=E4=BE=A7=EF=BC=8C=E4=B8=8D=E5=86=8D=E9=81=AE=E6=8C=A1?=
 =?UTF-8?q?=E8=B7=AF=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PlayWay.vue | 141 ++++++++++++++++---------------------
 1 file changed, 60 insertions(+), 81 deletions(-)

diff --git a/src/components/PlayWay.vue b/src/components/PlayWay.vue
index c9fe03d0..d0adfab7 100644
--- a/src/components/PlayWay.vue
+++ b/src/components/PlayWay.vue
@@ -30,6 +30,27 @@
             <span class="badge black">{{ Lang[Type].game }}</span>
             <span class="game-info">{{ tableData.number_tab_number || '0-0' }}</span>
           </div>
+          <!-- 问路 -->
+          <div class="ask-panel-inline" v-if="[1,2].includes(tableData.game_id)">
+            <div class="ask-group" @click="askWay('banker')">
+              <span class="ask-label text-red">{{ Lang[Type].askbanker }}</span>
+              <span class="dot hollow red" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'red'"></span>
+              <span class="dot hollow blue" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'blue'"></span>
+              <span class="dot solid red" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'red'"></span>
+              <span class="dot solid blue" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'blue'"></span>
+              <span class="dot slash red" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'red'"></span>
+              <span class="dot slash blue" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'blue'"></span>
+            </div>
+            <div class="ask-group" @click="askWay('player')">
+              <span class="ask-label text-blue">{{ Lang[Type].askplayer }}</span>
+              <span class="dot hollow red" v-if="autoaskData.PbigEyeRoadisshow && autoaskData.PbigEyeRoadcolor == 'red'"></span>
+              <span class="dot hollow blue" v-if="autoaskData.PbigEyeRoadisshow && autoaskData.PbigEyeRoadcolor == 'blue'"></span>
+              <span class="dot solid red" v-if="autoaskData.Ppathwayisshow && autoaskData.Ppathwaycolor == 'red'"></span>
+              <span class="dot solid blue" v-if="autoaskData.Ppathwayisshow && autoaskData.Ppathwaycolor == 'blue'"></span>
+              <span class="dot slash red" v-if="autoaskData.Proachisshow && autoaskData.Proachcolor == 'red'"></span>
+              <span class="dot slash blue" v-if="autoaskData.Proachisshow && autoaskData.Proachcolor == 'blue'"></span>
+            </div>
+          </div>
         </div>
         <!-- NiuNiu/TC Stats -->
         <div class="left-stats" v-else-if="[4, 5].includes(tableData.game_id)">
@@ -56,36 +77,6 @@
       <div class="road-box-container">
         <div class="road-box">
           <canvas class="canvas" ref="refItem"></canvas>
-          
-          <!-- 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">
-                    <span class="dot hollow red" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'red'"></span>
-                    <span class="dot hollow blue" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'blue'"></span>
-                    
-                    <span class="dot solid red" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'red'"></span>
-                    <span class="dot solid blue" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'blue'"></span>
-                    
-                    <span class="dot slash red" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'red'"></span>
-                    <span class="dot slash blue" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'blue'"></span>
-                </div>
-            </div>
-            <div class="ask-group player" @click="askWay('player')">
-                <div class="ask-title text-blue">{{ Lang[Type].askplayer }}</div>
-                <div class="ask-icons">
-                    <span class="dot hollow red" v-if="autoaskData.PbigEyeRoadisshow && autoaskData.PbigEyeRoadcolor == 'red'"></span>
-                    <span class="dot hollow blue" v-if="autoaskData.PbigEyeRoadisshow && autoaskData.PbigEyeRoadcolor == 'blue'"></span>
-                    
-                    <span class="dot solid red" v-if="autoaskData.Ppathwayisshow && autoaskData.Ppathwaycolor == 'red'"></span>
-                    <span class="dot solid blue" v-if="autoaskData.Ppathwayisshow && autoaskData.Ppathwaycolor == 'blue'"></span>
-                    
-                    <span class="dot slash red" v-if="autoaskData.Proachisshow && autoaskData.Proachcolor == 'red'"></span>
-                    <span class="dot slash blue" v-if="autoaskData.Proachisshow && autoaskData.Proachcolor == 'blue'"></span>
-                </div>
-            </div>
-          </div>
         </div>
       </div>
     </div>
@@ -272,72 +263,60 @@ export default {
     }
 
     /* Ask Panel - Integrated into grid (bottom 3 rows, far right) */
-    .ask-panel {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      width: 20%;
-      height: 33%;
+    .ask-panel-inline {
+      margin-left: auto;
       display: flex;
-      background: rgba(255,255,255,0.92);
-      border-left: 1px solid #ddd;
-      border-top: 1px solid #ddd;
-      z-index: 10;
+      gap: 8px;
+      align-items: center;
 
       .ask-group {
-        flex: 1;
         display: flex;
-        flex-direction: column;
         align-items: center;
-        justify-content: center;
+        gap: 3px;
         cursor: pointer;
-        
-        &.banker {
-          border-right: 1px solid #f5f5f5;
-        }
 
-        .ask-title {
-          font-size: 11px !important;
+        .ask-label {
+          font-size: 10px;
           font-weight: 500;
-          color: #333;
-          margin-bottom: 2px;
-          white-space: nowrap;
+          margin-right: 2px;
         }
 
-        .ask-icons {
-          display: flex;
-          gap: 4px;
-          align-items: center;
-
-          .dot {
-            display: inline-block;
-            &.solid {
-              width: 10px;
-              height: 10px;
-              border-radius: 50%;
-              &.red { background: #e40000; }
-              &.blue { background: #0056ee; }
-            }
-            &.hollow {
-              width: 8px;
-              height: 8px;
-              border-radius: 50%;
-              border: 1.5px solid;
-              &.red { border-color: #e40000; }
-              &.blue { border-color: #0056ee; }
-            }
-            &.slash {
-              width: 2px;
-              height: 10px;
-              transform: rotate(-45deg);
-              border-radius: 1px;
-              &.red { background: #e40000; }
-              &.blue { background: #0056ee; }
+        .dot {
+          display: inline-block;
+          &.solid {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            &.red { background: #e40000; }
+            &.blue { background: #0056ee; }
+          }
+          &.hollow {
+            width: 7px;
+            height: 7px;
+            border-radius: 50%;
+            border: 1.5px solid;
+            &.red { border-color: #e40000; }
+            &.blue { border-color: #0056ee; }
+          }
+          &.slash {
+            width: 7px;
+            height: 7px;
+            position: relative;
+            &::before {
+              content: '';
+              position: absolute;
+              top: 0; left: 50%;
+              width: 1.5px;
+              height: 100%;
+              transform: rotate(45deg);
             }
+            &.red::before { background: #e40000; }
+            &.blue::before { background: #0056ee; }
           }
         }
       }
     }
+
   }
 }