feat: 优化筹码选择区布局与样式，移除百家乐幸运6投注项并调整投注区显示。

src/views/play.vue

@@ -6,6 +6,7 @@
       { no_bg: tableData && (tableData.game_id == 7 || tableData.game_id == 8) }
     ]"
   >
+    <!-- Top Navigation Bar -->
     <div class="nav">
       <div class="left">
         <div class="back" @click="handleBack"></div>
@@ -52,87 +53,20 @@
         </ul>
       </div>
     </div>
+
+    <!-- Main View Container: Vertical Flex Stack -->
     <div class="view">
-      <div class="video" ref="videoDom" @click.stop="closeSwitchView(false)">
-        <ul class="left-btn">
-          <li
-            class="dice-btn"
-            v-if="tableData && tableData.game_id == 7 && switchVideo == true"
-          >
-            <img
-              class="img-btn"
-              src="~@/assets/images/dice/video_btn.png"
-              alt=""
-              v-if="hideVideo"
-              @click="toggleVide"
-            />
-            <img
-              class="img-btn"
-              src="~@/assets/images/dice/table_btn.png"
-              alt=""
-              @click="toggleVide"
-              v-else
-            />
-          </li>
-          <li
-            class="roulette-btn"
-            v-if="tableData && tableData.game_id == 8 && switchVideo == true"
-          >
-            <img
-              class="img-btn"
-              src="~@/assets/images/roulette/video_btn.png"
-              alt=""
-              v-if="hideVideo"
-              @click="toggleVide"
-            />
-            <img
-              class="img-btn"
-              src="~@/assets/images/roulette/table_btn.png"
-              alt=""
-              @click="toggleVide"
-              v-else
-            />
-          </li>
-          <li
-            class="btn switch"
-            v-if="tableData && tableData.game_id == 8"
-            @click="switchRouletteType"
-          ></li>
-          <li
-            class="btn switch"
-            v-if="tableData && tableData.game_id == 1"
-            @click="showBaccaratPlayType"
-          ></li>
-          <li
-            class="btn free"
-            v-if="tableData && tableData.game_id == 1"
-            :class="[
-              { active: baccaratType == 1 },
-              { en: Type != 'tw' && Type != 'cn' }
-            ]"
-            @click="showSetFree"
-          ></li>
-          <li class="btn tip" @click="showTableInfo"></li>
-          <li
-            class="btn people"
-            @click="showOnLine"
-            :style="{
-              marginBottom:
-                tableData && (tableData.game_id == 4 || tableData.game_id == 5)
-                  ? '1.5rem'
-                  : 0
-            }"
-          ></li>
-        </ul>
-        <ul class="right-btn">
-          <!-- 右侧按钮已移至左上角导航栏 -->
-        </ul>
+      
+      <!-- 1. Video & Game Area (Top Section, Flex Grow to fill space) -->
+      <div class="video-container" ref="videoDom" @click.stop="closeSwitchView(false)">
+        <!-- Video Iframe -->
         <iframe
           v-if="switchVideo && tableData"
           :style="{
             width: foxVideo.w,
             height: foxVideo.h,
-            marginTop: foxVideo.mt
+            marginTop: foxVideo.mt,
+            marginLeft: foxVideo.ml
           }"
           class="iframe"
           :class="[
@@ -146,20 +80,39 @@
           ]"
           :src="videoUrl"
         ></iframe>
-      </div>
-      <div class="game-area">
-        <PlayChip></PlayChip>
-        <template
-          v-if="tableData && (tableData.game_id == 7 || tableData.game_id == 8)"
-        >
-          <Transition
-            name="custom-classes"
-            enter-active-class="animate__animated animate__faster animate__fadeInRight"
-            leave-active-class="animate__animated animate__faster animate__fadeOutRight"
+
+        <!-- Game Betting Overlay -->
+        <div class="game-area">
+          <template
+            v-if="tableData && (tableData.game_id == 7 || tableData.game_id == 8)"
           >
+            <Transition
+              name="custom-classes"
+              enter-active-class="animate__animated animate__faster animate__fadeInRight"
+              leave-active-class="animate__animated animate__faster animate__fadeOutRight"
+            >
+              <PlayTable
+                v-if="hideVideo"
+                class="dice-table"
+                ref="chipTable"
+                :game_id="tableData?.game_id"
+                :sendMode="tableData?.sendMode"
+                :table_id="tableData?.id"
+                :number_tab_id="tableData?.number_tab_id"
+                :is_scavenging="tableData?.is_scavenging"
+                :winArray="winArray"
+                :bet_amount_msg="tableData?.bet_amount_msg"
+                :can_bet_big_small="tableData?.can_bet_big_small"
+                :can_bet_luck_six="tableData?.can_bet_luck_six"
+                :limit_money="tableData?.limit_money"
+                :limit_money_pair="tableData?.limit_money_pair"
+                :limit_money_tie="tableData?.limit_money_tie"
+                :tableData="tableData"
+              ></PlayTable>
+            </Transition>
+          </template>
+          <template v-else>
             <PlayTable
-              v-if="hideVideo"
-              class="dice-table"
               ref="chipTable"
               :game_id="tableData?.game_id"
               :sendMode="tableData?.sendMode"
@@ -174,43 +127,46 @@
               :limit_money_pair="tableData?.limit_money_pair"
               :limit_money_tie="tableData?.limit_money_tie"
               :tableData="tableData"
+              :class="[
+                {
+                  hideTable:
+                    tableData &&
+                    (tableData.sendMode == 'sendScanResult' ||
+                      tableData.sendMode == 'endBet') &&
+                    (tableData.game_id == 4 || tableData.game_id == 5)
+                }
+              ]"
             ></PlayTable>
-          </Transition>
-        </template>
-        <template v-else>
-          <PlayTable
-            ref="chipTable"
-            :game_id="tableData?.game_id"
-            :sendMode="tableData?.sendMode"
-            :table_id="tableData?.id"
-            :number_tab_id="tableData?.number_tab_id"
-            :is_scavenging="tableData?.is_scavenging"
-            :winArray="winArray"
-            :bet_amount_msg="tableData?.bet_amount_msg"
-            :can_bet_big_small="tableData?.can_bet_big_small"
-            :can_bet_luck_six="tableData?.can_bet_luck_six"
-            :limit_money="tableData?.limit_money"
-            :limit_money_pair="tableData?.limit_money_pair"
-            :limit_money_tie="tableData?.limit_money_tie"
-            :tableData="tableData"
-            :class="[
-              {
-                hideTable:
-                  tableData &&
-                  (tableData.sendMode == 'sendScanResult' ||
-                    tableData.sendMode == 'endBet') &&
-                  (tableData.game_id == 4 || tableData.game_id == 5)
-              }
-            ]"
-          ></PlayTable>
-        </template>
-        <RushVillage
-          v-if="tableData && tableData.is_rob == 1"
-          :thisData="tableData"
-        ></RushVillage>
+          </template>
+          <RushVillage
+            v-if="tableData && tableData.is_rob == 1"
+            :thisData="tableData"
+          ></RushVillage>
+        </div>
+
+        <!-- Overlays inside Top Section -->
+        <div class="switchView animate__fadeIn animated0" v-if="switchtabshow">
+          <SwitchTab
+            @showSwitchtab="showSwitchtab"
+            :tabInfo="{
+              game_id: tableData && tableData.game_id,
+              table_id: tableData && tableData.id
+            }"
+          ></SwitchTab>
+        </div>
+        <div
+          class="switchView camera animate__fadeIn animated0"
+          v-if="switchCameraShow"
+        >
+          <setCamera @showSwitchCamera="showSwitchCamera"></setCamera>
+        </div>
       </div>
-      <!-- 路单 -->
-      <div class="wayView" @click.stop="closeSwitchView(false)">
+
+      <!-- 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)">
         <PlayWay :tableData="tableData"></PlayWay>
         <Poker
           class="pokerView"
@@ -233,29 +189,12 @@
           :sendMode="tableData.sendMode"
         ></RouletteResult>
       </div>
-      <!-- 切换台 -->
-      <div class="switchView animate__fadeIn animated0" v-if="switchtabshow">
-        <SwitchTab
-          @showSwitchtab="showSwitchtab"
-          :tabInfo="{
-            game_id: tableData && tableData.game_id,
-            table_id: tableData && tableData.id
-          }"
-        ></SwitchTab>
-      </div>
-      <!-- 切换视频线路 -->
-      <div
-        class="switchView camera animate__fadeIn animated0"
-        v-if="switchCameraShow"
-      >
-        <setCamera @showSwitchCamera="showSwitchCamera"></setCamera>
-      </div>
+
     </div>
-    <!-- 玩法切换 -->
+
+    <!-- Popups -->
     <PlayTypePop class="play-type-pop"></PlayTypePop>
-    <!-- 桌台信息 -->
     <TableInfoPop class="table-info-pop" :tableData="tableData"></TableInfoPop>
-    <!-- 在线玩家 -->
     <OnLinePop class="online-pop"></OnLinePop>
   </div>
 </template>
@@ -923,30 +862,53 @@ export default {
     }
     const foxVideoFn = () => {
       nextTick(() => {
-        const h = videoDom.value.clientHeight * videoConfig.value.scale
-        const w =
-          (videoConfig.value.proportion[0] / videoConfig.value.proportion[1]) *
-          h
-        const mt = 0
+        if (!videoDom.value) return;
+        const containerH = videoDom.value.clientHeight;
+        const containerW = videoDom.value.clientWidth;
+        
+        // Default to 16:9 if missing
+        const proportion = videoConfig.value.proportion || [16, 9];
+        const videoRatio = proportion[0] / proportion[1];
+        const screenRatio = containerW / containerH; // Inverse for calculation check
+        
+        let w, h, ml = 0, mt = 0;
+
+        if (screenRatio > videoRatio) {
+          // Screen is wider than video (or video is taller than screen) -> Height constrained
+          // e.g. Landscape or wide container
+          h = containerH;
+          w = h * videoRatio;
+          ml = (containerW - w) / 2;
+        } else {
+           // Screen is narrower than video (Standard Mobile Portrait) -> Width constrained
+           w = containerW;
+           h = w / videoRatio;
+           mt = (containerH - h) / 2;
+        }
+
+        // Apply specific offsets if needed, though usually centering is best for 'contain'
+        if (phoneModel.value == "ios") {
+           if (phoneScreen.value == "landscape") {
+             mt += videoConfig.value.offset.iosLandscape || 0;
+           } else {
+             mt += videoConfig.value.offset.iosPortrait || 0;
+           }
+        } else if (phoneModel.value == "android") {
+           mt += videoConfig.value.offset.android || 0;
+        } else {
+           mt += videoConfig.value.offset.pc || 0;
+        }
+        
+        // Ensure values are safe
+        if (isNaN(w)) w = containerW;
+        if (isNaN(h)) h = containerW * 0.56; // Fallback 16:9
+
         foxVideo.value.w = `${w}px`
         foxVideo.value.h = `${h}px`
         foxVideo.value.mt = `${mt}px`
+        foxVideo.value.ml = `${ml}px`
         foxVideo.value.model = phoneModel.value
         foxVideo.value.screen = phoneScreen.value
-        if (phoneModel.value == "ios") {
-          foxVideo.value.w = `100%`
-          if (phoneScreen.value == "landscape") {
-            foxVideo.value.mt = videoConfig.value.offset.iosLandscape
-          } else {
-            foxVideo.value.mt = videoConfig.value.offset.iosPortrait
-          }
-        } else if (phoneModel.value == "android") {
-          foxVideo.value.w = `100%`
-          foxVideo.value.mt = videoConfig.value.offset.android
-        } else {
-          foxVideo.value.w = `100%`
-          foxVideo.value.mt = videoConfig.value.offset.pc
-        }
       })
     }
     // 牛牛点数声音
@@ -1252,8 +1214,8 @@ export default {
 <style lang="scss" scoped>
 /* 深色豪华主题配色 */
 $dark-bg: #0d0d0d;
-$dark-bg-secondary: #1a1a1a;
-$card-bg: #1e1e1e;
+$dark-bg-secondary: #000;
+$card-bg: #000;
 $border-color: #333;
 $gold: #c5a059;
 
@@ -1267,32 +1229,21 @@ $gold: #c5a059;
   top: 0;
   bottom: 0;
   box-sizing: border-box;
+  overflow: hidden;
 
-  &.offcamera {
-    background: $dark-bg;
-    &::after {
-      display: none;
-    }
-  }
-  &.no_bg {
-    background: $dark-bg;
-    &::after {
-      display: none;
-    }
-  }
+  /* Navigation Bar */
   .nav {
-    position: absolute;
-    z-index: 10;
-    left: 0;
-    top: 0;
+    position: relative; 
+    z-index: 100;
     width: 100%;
-    min-height: 45px;
+    height: 45px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    transform: rotateX(0deg);
     background: $dark-bg-secondary;
     border-bottom: 1px solid $border-color;
+    flex-shrink: 0;
+
     .left {
       height: 0.923rem;
       display: flex;
@@ -1301,23 +1252,15 @@ $gold: #c5a059;
       .back {
         width: 0.923rem;
         height: 0.923rem;
-        background: url("~@/assets/images/icon/back.png") center center
-          no-repeat;
+        background: url("~@/assets/images/icon/back.png") center center no-repeat;
         background-size: 60% auto;
         margin-left: 0.6rem;
-        &:active {
-          opacity: 0.5;
-        }
       }
       .switch-tab {
         width: 0.923rem;
         height: 0.923rem;
-        background: url("~@/assets/images/icon/switch_tab.png") center center
-          no-repeat;
+        background: url("~@/assets/images/icon/switch_tab.png") center center no-repeat;
         background-size: 60% auto;
-        &:active {
-          opacity: 0.5;
-        }
       }
       .user {
         font-size: 13px;
@@ -1328,16 +1271,14 @@ $gold: #c5a059;
           color: #fff;
           padding-left: 20px;
           margin-top: 3px;
-          background: url("~@/assets/images/icon/user.png") left center
-            no-repeat;
+          background: url("~@/assets/images/icon/user.png") left center no-repeat;
           background-size: 14px;
         }
         .money {
           color: $gold;
           padding-left: 20px;
           margin-top: 3px;
-          background: url("~@/assets/images/icon/money.png") left center
-            no-repeat;
+          background: url("~@/assets/images/icon/money.png") left center no-repeat;
           background-size: 14px;
         }
       }
@@ -1351,10 +1292,8 @@ $gold: #c5a059;
         left: 50%;
         top: 0.15rem;
         margin-left: 2rem;
-        ::v-deep {
-          .van-circle__text {
+        ::v-deep .van-circle__text {
             color: #fff;
-          }
         }
       }
       .box {
@@ -1367,9 +1306,6 @@ $gold: #c5a059;
           background-size: 1.2rem;
           background-position: center center;
           background-repeat: no-repeat;
-          &:active {
-            opacity: 0.5;
-          }
           &.camera {
             background-image: url("~@/assets/images/icon/camera.png");
             &.off {
@@ -1386,183 +1322,119 @@ $gold: #c5a059;
       }
     }
   }
+
+  /* Main View Container - Vertical Flex */
   .view {
     display: flex;
     flex-direction: column;
     width: 100%;
-    height: 100%;
-    align-items: center;
-    .video {
-      width: 100%;
-      // height: 100%;
-      position: relative;
-      overflow: hidden;
-      flex: 1;
-      .left-btn {
-        position: absolute;
-        left: 0.6rem;
-        bottom: 0.5rem;
-        width: 1rem;
-        z-index: 9;
-        transform: rotateX(0deg);
-        .dice-btn,
-        .roulette-btn {
-          width: 1.5rem;
-          margin-bottom: 3rem;
-          .img-btn {
-            width: 100%;
-            &:active {
-              opacity: 0.5;
-            }
-          }
-        }
-        .roulette-btn {
-          margin-bottom: 1rem;
-        }
+    height: calc(100% - 45px); /* Subtract nav height */
+    position: relative;
+    overflow: hidden;
 
-        .btn {
-          width: 1.3rem;
-          height: 1.3rem;
-          margin-bottom: 0.553rem;
-          background-size: 100%;
-          background-position: center center;
-          background-repeat: no-repeat;
-          &:active {
-            opacity: 0.5;
-          }
-          &.switch {
-            background-image: url("~@/assets/images/icon/switch.png");
-          }
-          &.free {
-            background-image: url("~@/assets/images/icon/free.png");
-            &.active {
-              background-image: url("~@/assets/images/icon/free_active.png");
-            }
-            &.en {
-              background-image: url("~@/assets/images/icon/en_free.png");
-              &.active {
-                background-image: url("~@/assets/images/icon/en_free_active.png");
-              }
-            }
-          }
-          &.tip {
-            background-image: url("~@/assets/images/icon/tip.png");
-          }
-          &.people {
-            background-image: url("~@/assets/images/icon/people.png");
-          }
-        }
-      }
-      .right-btn {
-        position: absolute;
-        right: 2.7rem;
-        top: 1.5rem;
-        width: 0.923rem;
-        z-index: 9;
-        transform: rotateX(0deg);
-        .btn {
-          width: 1.2rem;
-          height: 1.2rem;
-          margin-bottom: 0.4rem;
-          background-size: 100%;
-          background-position: center center;
-          background-repeat: no-repeat;
-          &:active {
-            opacity: 0.5;
-          }
-          &.switch-tab {
-            background-image: url("~@/assets/images/icon/switch_tab.png");
-          }
-          &.continue {
-            background-image: url("~@/assets/images/icon/continue.png");
-          }
-        }
-      }
-      .dice-table {
-        background: $dark-bg;
-        transform: rotateX(1deg);
-      }
-      .hideTable {
-        display: none;
-      }
+    /* 1. Video Container (Top) - Flex Grow */
+    .video-container {
+      flex: 1; /* Grow to fill available space */
+      position: relative;
+      width: 100%;
+      background: #000;
+      overflow: hidden;
+      
       .iframe {
         border: none;
-        width: 100%;
+        /* Remove fixed width/height to allow JS dynamic sizing */
+        /* width: 100%; */
+        /* height: 100%; */
         position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
+        top: 0;
         left: 0;
         z-index: 1;
-        transition: all 2s, left 0s, top 0s, width 0s, height 0s;
+        /* object-fit: cover; Remove object-fit as it might conflict with iframe content */
+      }
+      
+      .game-area {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 10;
         pointer-events: none;
-        &.scale {
-          transition-delay: 2s;
-          transform: translateY(-70%) scale(2);
-        }
-        &.hideVideo {
-          display: none;
+        
+        /* Enable clicks on children */
+        ::v-deep .playtable, ::v-deep .rushvillage {
+          pointer-events: auto;
         }
       }
+      
+      /* Switch Views (Camera/Tables)Overlay */
+      .switchView {
+        position: absolute;
+        width: 60%;
+        height: 100%;
+        bottom: 0;
+        right: 0;
+        z-index: 100;
+        background: $dark-bg-secondary;
+        border-top-left-radius: 0.3rem;
+        &.camera { width: 40%; }
+      }
     }
-  }
-  .wayView {
-    position: relative;
-    width: 100%;
-    height: 2.31rem;
-    background: $card-bg;
-    border-top: 1px solid $border-color;
-    // overflow: hidden;
-    .pokerView {
-      position: absolute;
+
+    /* 2. Chip Control Bar (Middle) - Fixed Height */
+    .bet-chip-bar {
       width: 100%;
-      height: 100%;
-      bottom: 0;
-      left: 0;
-      pointer-events: none;
+      height: 70px;
+      flex-shrink: 0;
+      position: relative;
+      z-index: 20;
+      background: #111;
+      border-top: 1px solid #333;
     }
-  }
-  .switchView {
-    position: absolute;
-    width: 60%;
-    height: 100%;
-    bottom: 0;
-    right: 0;
-    z-index: 10001;
-    transform: rotateX(0deg);
-    border-top-left-radius: 0.3rem;
-    border-bottom-left-radius: 0.3rem;
-    overflow: hidden;
-    background: $dark-bg-secondary;
-    &.camera {
-      width: 40%;
-    }
-  }
-}
 
-/* 竖屏模式下，路单区域平铺全屏 */
-@media screen and (orientation: portrait) {
-  .play .view {
-    .wayView {
-      width: 100% !important;
-      max-width: 100% !important;
-      height: 250px !important;
-      min-height: 250px !important;
-      margin: 0 !important;
-      padding: 0 !important;
-      left: 0 !important;
-      right: 0 !important;
-      display: flex !important;
-      flex-direction: row !important;
-
-      .pokerView {
-        order: 1 !important;
-        flex: none !important;
-        width: 200px !important;
+    /* 3. Roadmap Container (Bottom) - Auto Height for Aspect Ratio */
+    .roadmap-container {
+      width: 100%;
+      height: auto; 
+      flex-shrink: 0;
+      background: #000;
+      position: relative;
+      z-index: 20;
+      
+      .wayView {
+        width: 100%;
+        height: auto;
       }
 
-      .playway {
-        order: 2 !important;
-        flex: 1 !important;
+      /* Deep overrides to fix canvas distortion */
+      ::v-deep .playway {
+        height: auto !important;
+        background: #000 !important;
+        
+        &.white-theme {
+           background: #000 !important;
+        }
+      }
+      ::v-deep .baccarat-view {
+        height: auto !important;
+      }
+      ::v-deep .road-box {
+        flex: none !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;
+        display: block !important;
       }
     }
   }