From 3bfd8b23286533459ddf14bf6b9256aa9a945c5b Mon Sep 17 00:00:00 2001
From: chenlimao <web_wei_328@163.com>
Date: Sat, 9 May 2026 16:41:06 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=88=BF=E9=97=B4=E5=8F=B7?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E8=B7=9F=E8=83=B6=E5=9B=8Amargin=E8=B7=9D?=
 =?UTF-8?q?=E7=A6=BB=E6=A0=B9=E6=8D=AE=E6=9C=BA=E5=9E=8B=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E5=86=99=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header.vue | 32 ++++++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 6950948..a1692c5 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -59,6 +59,8 @@ const loading = ref(false);
 const pointBook = ref(null);
 const showProgress = ref(false);
 const heat = ref(0);
+/** 房间号按钮动态定位样式（position: fixed，根据胶囊真实位置计算，脱离 flex 流避免挤压标题） */
+const battleRoomBtnStyle = ref({});
 
 const updateLoading = (value) => {
   loading.value = value;
@@ -83,6 +85,23 @@ onMounted(() => {
   if (currentPage.route === "pages/team-battle") {
     showProgress.value = true;
   }
+  // 仅在对战房间页获取胶囊位置，按钮用 fixed 定位精确贴靠胶囊左侧（脱离 flex 流，不挤压标题）
+  if (currentPage.route === "pages/battle-room") {
+    try {
+      const menuButtonRect = uni.getMenuButtonBoundingClientRect();
+      const { windowWidth } = uni.getSystemInfoSync();
+      battleRoomBtnStyle.value = {
+        // 按钮右边缘距视口右侧 = 屏幕宽 - 胶囊左边缘 + 4px 安全间隙
+        right: (windowWidth - menuButtonRect.left + 4) + "px",
+        // 垂直位置与胶囊顶部对齐
+        top: menuButtonRect.top + "px",
+        // 高度与胶囊一致，视觉融合
+        height: menuButtonRect.height + "px",
+      };
+    } catch (e) {
+      // 获取失败时使用 CSS 兜底定位（28vw + 4px 作为 right，8px 作为 top）
+    }
+  }
   uni.$on("update-hot", updateHot);
 });
 onBeforeUnmount(() => {
@@ -173,12 +192,13 @@ onBeforeUnmount(() => {
     <view v-if="showProgress" class="battle-progress">
       <HeaderProgress />
     </view>
-    <!-- 对战房间：整个胶囊为分享按钮，房号从 Store 读取 -->
+    <!-- 对战房间：整个胶囊为分享按钮，房号从 Store 读取；fixed 定位紧靠系统胶囊左侧 -->
     <button
       v-if="currentPage === 'pages/battle-room' && game.roomNumber"
       open-type="share"
       hover-class="none"
       class="battle-room-number"
+      :style="battleRoomBtnStyle"
     >
       <text class="battle-room-number__text">房号: {{ game.roomNumber }}</text>
       <image src="../static/share2.png" mode="widthFix" class="battle-room-number__icon" />
@@ -270,10 +290,12 @@ onBeforeUnmount(() => {
   margin: 0 20rpx;
   max-width: 300rpx;
 }
-/* 对战房间：整个胶囊作为分享按钮，靠右对齐 */
+/* 对战房间：整个胶囊作为分享按钮，fixed 定位脱离 flex 流，紧贴系统胶囊左侧 */
 .battle-room-number {
-  margin-left: auto;
-  margin-right: 20rpx;
+  position: fixed;
+  /* 兜底定位（JS 获取胶囊位置失败时生效）：约 28vw 对应胶囊区域左边缘 */
+  right: calc(28vw + 4px);
+  top: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -282,9 +304,7 @@ onBeforeUnmount(() => {
   background: rgba(0, 0, 0, 0.15);
   border-radius: 96rpx;
   border: 1rpx solid #5b5758;
-  flex-shrink: 0;
   padding: 0;
-  line-height: normal;
 }
 /* 重置 button 默认边框 */
 .battle-room-number::after {