From 7fcaa1af1ac88054db3b2ce59bb1adc903be59ba Mon Sep 17 00:00:00 2001
From: jinhhanhan <1683105490@qq.com>
Date: Sat, 22 Nov 2025 18:08:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=8A=E6=88=98=E5=8C=BA=E6=8E=92=E5=90=8D?=
 =?UTF-8?q?=E5=92=8C=E8=8B=B1=E9=9B=84=E6=8E=92=E5=90=8D=E7=9A=84=E6=A1=86?=
 =?UTF-8?q?=E6=9C=AC=E8=B0=83=E6=95=B4=E5=AF=B9=E9=BD=90=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/BattleRanking.vue | 849 +++++++++++++++++++-----------------
 1 file changed, 443 insertions(+), 406 deletions(-)

diff --git a/src/views/BattleRanking.vue b/src/views/BattleRanking.vue
index ff7945e..9ca12bb 100644
--- a/src/views/BattleRanking.vue
+++ b/src/views/BattleRanking.vue
@@ -91,31 +91,30 @@
         <div class="individual-rankings">
           <!-- 英雄冠军 -->
           <div class="individual-champion">
-              <div class="individual-avatar champion-container">
-                <div class="crown-animation" :class="{'crown-animation-run': localDisplayConfig.crown?.animationEnabled}" v-if="filteredIndividualRankings.length > 0" :style="{
-                  fontSize: (localDisplayConfig.crown?.size || localDisplayConfig.championLogos?.individualChampionSize * 0.8) + 'px'
-                  // transform: 'translateX(-50%)'
-                }">
-                  👑
-                </div>
-                <img v-if="filteredIndividualRankings[0]?.avatar && filteredIndividualRankings[0].avatar.startsWith('/')"
-                  :src="filteredIndividualRankings[0].avatar" alt="冠军头像" class="avatar-image avatar-image-champion"
-                  :style="{ width: localDisplayConfig.championLogos?.individualChampionSize + 'px', height: localDisplayConfig.championLogos?.individualChampionSize + 'px' }">
-                <img v-else-if="localDisplayConfig.championLogos?.individualChampion"
-                  :src="localDisplayConfig.championLogos.individualChampion" alt="英雄冠军" class="champion-logo"
-                  :style="{ width: localDisplayConfig.championLogos?.individualChampionSize + 'px', height: localDisplayConfig.championLogos?.individualChampionSize + 'px' }">
-                <div v-else class="champion-log">
-                  <span 
-                  :style="{ fontSize: localDisplayConfig.championLogos?.individualChampionSize ? (localDisplayConfig.championLogos.individualChampionSize * 0.8) + 'px' : '2rem' }">
-                  {{ filteredIndividualRankings[0]?.avatar || '👤' }}
-                </span>
-                </div>                 
-
-              </div>
-              <div class="champion-name">
-                {{ filteredIndividualRankings[0]?.name || '暂无冠军' }}
-              </div>
-            </div>
+  <div class="individual-avatar champion-container">
+    <div class="crown-animation" :class="{'crown-animation-run': localDisplayConfig.crown?.animationEnabled}" v-if="filteredIndividualRankings.length > 0" :style="{
+      fontSize: (localDisplayConfig.crown?.size || localDisplayConfig.championLogos?.individualChampionSize * 0.8) + 'px'
+    }">
+      👑
+    </div>
+    <img v-if="filteredIndividualRankings[0]?.avatar && filteredIndividualRankings[0].avatar.startsWith('/')"
+      :src="filteredIndividualRankings[0].avatar" alt="冠军头像" class="avatar-image avatar-image-champion"
+      :style="{ width: localDisplayConfig.championLogos?.individualChampionSize + 'px', height: localDisplayConfig.championLogos?.individualChampionSize + 'px' }">
+    <img v-else-if="localDisplayConfig.championLogos?.individualChampion"
+      :src="localDisplayConfig.championLogos.individualChampion" alt="英雄冠军" class="champion-logo"
+      :style="{ width: localDisplayConfig.championLogos?.individualChampionSize + 'px', height: localDisplayConfig.championLogos?.individualChampionSize + 'px' }">
+    <div v-else class="champion-log">
+      <span 
+      :style="{ fontSize: localDisplayConfig.championLogos?.individualChampionSize ? (localDisplayConfig.championLogos.individualChampionSize * 0.8) + 'px' : '2rem' }">
+      {{ filteredIndividualRankings[0]?.avatar || '👤' }}
+    </span>
+    </div>                 
+  </div>
+  <!-- 确保名字容器不被遮挡，样式已在下方优化 -->
+  <div class="champion-name">
+    {{ filteredIndividualRankings[0]?.name || '暂无冠军' }}
+  </div>
+</div>
           <!-- 英雄排名 -->
           <div class="individual-rankings-container">
             <h2 class="game-subtitle">👤 英雄排名</h2>
@@ -973,7 +972,8 @@ onUnmounted(() => {
   border-radius: 50%;
 }
 
-/* 冠军模块样式 */
+/* 冠军模块样式（已修改：统一两个冠军区高度） */
+/* 冠军模块样式（修改后：统一两个冠军区高度，确保名字显示） */
 .champion-section {
   display: flex;
   justify-content: space-between;
@@ -981,6 +981,7 @@ onUnmounted(() => {
   gap: 20px;
 }
 
+/* 核心修改：固定两个冠军区高度，确保对齐+名字不被遮挡 */
 .team-champion,
 .individual-champion {
   display: flex;
@@ -988,67 +989,73 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   text-align: center;
-  padding: 15px;
+  padding: 15px 15px 10px; /* 优化内边距，底部留足名字空间 */
   margin-bottom: 10px;
+  height: 130px; /* 固定总高度，两个区域完全一致 */
+  box-sizing: border-box; /* 确保padding不撑高容器 */
 }
 
 .team-logo {
   font-size: 2rem;
-  margin-bottom: 5px;
-  display: inline-block;
+  margin-bottom: 8px; /* 增加与名字的间距 */
+  display: inline-flex; /* 改为flex确保居中 */
+  align-items: center;
+  justify-content: center;
   color: gold;
+  width: 80px; /* 与英雄头像容器宽度一致 */
+  height: 80px; /* 与英雄头像容器高度一致 */
 }
 
+/* 核心修改：统一英雄头像容器尺寸，不遮挡名字 */
 .individual-avatar {
   font-size: 2rem;
-  margin-bottom: 5px;
-  display: inline-block;
+  margin-bottom: 8px; /* 增加与名字的间距，关键！ */
+  display: inline-flex; /* 改为flex确保居中 */
+  align-items: center;
+  justify-content: center;
+  width: 80px; /* 与战区logo宽度一致 */
+  height: 80px; /* 与战区logo高度一致 */
 }
 
 /* 冠军头像容器 */
 .champion-container {
   position: relative;
-  display: inline-block;
+  display: inline-flex; /* 改为flex，确保头像居中 */
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
 }
 
-/* 皇冠动画效果 */
+/* 核心修改：优化王冠位置，不占用额外高度，不遮挡名字 */
 .crown-animation {
   position: absolute;
   left: 50%;
+  top: -18px; /* 向上偏移，远离头像和名字 */
   transform: translateX(-50%);
   z-index: 10;
   text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary);
-
+  font-size: 2rem; /* 固定大小，避免高度波动 */
 }
 
 .crown-animation-run {
   animation: crownFloat 2s ease-in-out infinite, crownGlow 3s ease-in-out infinite;
 }
 
-/* 皇冠浮动动画 */
+/* 皇冠浮动动画（保留原有，优化偏移） */
 @keyframes crownFloat {
   0% {
     transform: translateX(-50%) translateY(0) rotate(-10deg);
   }
   50% {
-    transform: translateX(-50%) translateY(-5px) rotate(10deg);
+    transform: translateX(-50%) translateY(-3px) rotate(10deg); /* 减小上下浮动幅度，避免遮挡 */
   }
   100% {
     transform: translateX(-50%) translateY(0) rotate(-10deg);
   }
 }
 
-/* 皇冠发光效果动画 */
-@keyframes crownGlow {
-  0%, 100% {
-    text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary);
-  }
-  50% {
-    text-shadow: 0 0 15px var(--gold-primary), 0 0 30px var(--gold-secondary), 0 0 40px var(--gold-tertiary);
-  }
-}
-
-
+/* 皇冠发光效果动画（去重，保留一个） */
 @keyframes crownGlow {
   0%, 100% {
     text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary);
@@ -1058,10 +1065,16 @@ onUnmounted(() => {
   }
 }
 
-.champion-logo {
+/* 核心修改：统一冠军logo/头像尺寸，不遮挡名字 */
+.champion-logo,
+.avatar-image-champion {
+  width: 80px;
+  height: 80px;
   object-fit: cover;
-  max-width: 120px;
   border-radius: 50%;
+  margin: 0; /* 清除额外边距 */
+  position: relative;
+  z-index: 5; /* 确保头像在王冠下方，不被遮挡 */
 }
 
 .avatar-image {
@@ -1078,12 +1091,18 @@ onUnmounted(() => {
   margin-bottom: 3px;
 }
 
+/* 核心修改：强化名字显示，确保不被截断/遮挡 */
 .champion-name {
-  font-size: 1.1rem;
+  font-size: 1.2rem; /* 增大字体，更醒目 */
   font-weight: bold;
   color: gold;
+  margin: 5px 0 0 0; /* 清除默认margin，顶部留小间距 */
+  line-height: 1.3; /* 固定行高 */
+  white-space: nowrap; /* 强制单行，避免换行撑高 */
+  text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* 增加阴影，提升可读性 */
+  z-index: 20; /* 确保名字在最上层，不被任何元素遮挡 */
+  position: relative;
 }
-
 /* 基础样式 */
 :root {
   --gold-primary: #ffd700;
@@ -1092,7 +1111,6 @@ onUnmounted(() => {
   --purple-secondary: #a29bfe;
 }
 
-
 /* 主题容器样式 - 添加居中对齐 */
 .theme-container {
   text-align: center;
@@ -1139,14 +1157,29 @@ onUnmounted(() => {
   /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); */
 }
 
-
 /* 响应式设计 */
 @media (max-width: 768px) {
-  /** 皇冠动画 */
+  /** 皇冠动画（修正位置，不撑高） */
   .crown-animation {
-    top: -120px;
+    top: -15px !important; /* 移动端向上偏移，避免遮挡 */
+    font-size: 1.8rem !important;
   }  
 
+  /* 核心修改：移动端统一冠军区高度 */
+  .team-champion,
+  .individual-champion {
+    height: 120px !important;
+    padding: 10px 10px 5px !important;
+  }
+
+  /* 移动端名字样式优化 */
+  .champion-name {
+    font-size: 1.1rem !important;
+    margin-top: 3px !important;
+  }
+
+  /* 其他原有移动端样式保持不变... */
+}
   /* 隐藏倒计时模块 */
   .timer-float {
     display: none !important;
@@ -1159,9 +1192,7 @@ onUnmounted(() => {
 
   /* 奖金模块垂直居中显示，两侧20px间距 */
   .bonus-section {
-    /* 背景全部取消设置 **/
     background: none !important;
-
     position: static !important;
     margin: 20px auto;
     width: calc(100% - 40px);
@@ -1188,7 +1219,6 @@ onUnmounted(() => {
   .timer-float .countdown {
     gap: 8px;
   }
-}
 
 @media (max-width: 480px) {
   .banner-image {
@@ -1528,19 +1558,24 @@ onUnmounted(() => {
 }
 
 .rankings-container {
-  display: flex;
+  display: flex !important;
+  flex-direction: row !important; /* 明确指定为水平排列 */
   gap: 15px;
-  flex-wrap: wrap;
+  flex-wrap: nowrap; /* 禁止换行，强制水平并列 */
   justify-content: center;
+  align-items: stretch; /* 强制两个排名框高度一致 */
   background: none;
   border: none;
+  /* 移除max-width和margin，让App.vue的rank-wrapper控制容器 */
+  width: 100%;
 }
 
 .individual-rankings,
 .team-rankings {
-  flex: 1;
-  min-width: 350px;
-  max-width: 550px;
+  flex: none; /* 取消平分宽度 */
+  width: 550px; /* 固定宽度，两个框完全一致 */
+  display: flex;
+  flex-direction: column;
 }
 
 /* 为指定的容器添加背景和边框 */
@@ -1733,404 +1768,407 @@ onUnmounted(() => {
 
 /* 针对高度大于1080分辨率的精确优化 */
 
-
 /* 移动端背景图片设置 - 全局样式 */
-  @media (max-width: 768px) {
-    
-    /* 战区排名容器设置 - 根据配置决定显示行数和滚动行为 */
-    .team-rankings-container .rank-table {
-      position: relative;
-      min-height: auto;
-      /* 如果配置了具体了默认显示行数，则设置高度和滚动，否则显示所有行 */
-      height: var(--team-default-height, auto) !important;
-      overflow-y: var(--team-overflow-y, hidden);
-      overflow-x: var(--team-overflow-x, auto);
-    }
-    
-    /* 当设置了滚动锁定时，禁止所有滚动 */
-    :root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table {
-      overflow-y: hidden !important;
-      overflow-x: hidden !important;
-      height: var(--team-default-height, auto) !important;
-      min-width: auto !important;
-      width: 100% !important;
-    }
-    
-    /* 确保表格内容在锁定模式下正确显示 */
-    :root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table .table-header,
-    :root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table .table-row {
-      min-width: auto !important;
-      width: 100% !important;
-      overflow-x: visible !important;
-      white-space: normal !important;
-    }
-      
-    .individual-rankings {
-      margin-top: 60px; /* 增加排名列表的顶部间距 */
-    }
-    
-    /* 英雄排名容器设置 - 允许垂直滚动，设置默认高度显示多行 */
-    .individual-rankings-container .rank-table {
-      overflow-y: auto;
-      overflow-x: auto; /* 允许水平滚动 */
-      position: relative;
-      /* 基于默认显示行数计算合适的高度 */
-      height: calc(60px * var(--default-display-rows, 10));
-      /* 隐藏滚动条但保留滚动功能 */
-      -ms-overflow-style: none;
-      scrollbar-width: none;
-    }
-    
-    /* 移动端非前三名字体放大 */
-    .team-rankings-container .table-row:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)),
-    .individual-rankings-container .table-row:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) {
-      font-size: 1.1rem;
-    }
-    
-    /* 移动端名次列水平垂直居中 */
-    .team-rankings-container .table-header > :first-child,
-    .individual-rankings-container .table-header > :first-child,
-    .team-rankings-container .table-row > :first-child,
-    .individual-rankings-container .table-row > :first-child {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-    }
-    
-    /* 确保前三名特殊样式在移动端正确显示 */
-  .team-rankings-container .table-row.top-three,
-  .individual-rankings-container .table-row.top-three {
-    transform: scale(1);
-    box-shadow: none;
-    position: static;
-  }
-  
-  .team-rankings-container .table-row:nth-child(1),
-  .team-rankings-container .table-row:nth-child(2),
-  .team-rankings-container .table-row:nth-child(3),
-  .individual-rankings-container .table-row:nth-child(1),
-  .individual-rankings-container .table-row:nth-child(2),
-  .individual-rankings-container .table-row:nth-child(3) {
-    box-shadow: none;
-    z-index: 1;
-  }
-  
-  /* 当设置为禁止滚动时，确保战区排名容器不允许滚动 */
-  :root[style*="--team-scroll-lock: lock"] .team-rankings-container {
-    overflow: visible !important;
-    height: auto !important;
+@media (max-width: 768px) {
+  
+  /* 战区排名容器设置 - 根据配置决定显示行数和滚动行为 */
+  .team-rankings-container .rank-table {
+    position: relative;
+    min-height: auto;
+    /* 如果配置了具体了默认显示行数，则设置高度和滚动，否则显示所有行 */
+    height: var(--team-default-height, auto) !important;
+    overflow-y: var(--team-overflow-y, hidden);
+    overflow-x: var(--team-overflow-x, auto);
   }
   
+  /* 当设置了滚动锁定时，禁止所有滚动 */
   :root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table {
-    overflow: hidden !important;
-    display: block;
+    overflow-y: hidden !important;
+    overflow-x: hidden !important;
+    height: var(--team-default-height, auto) !important;
     min-width: auto !important;
     width: 100% !important;
   }
   
-  /* 确保表格头部和行在禁止滚动模式下能够完整显示内容 */
-  :root[style*="--team-scroll-lock: lock"] .team-rankings-container .table-header,
-  :root[style*="--team-scroll-lock: lock"] .team-rankings-container .table-row {
+  /* 确保表格内容在锁定模式下正确显示 */
+  :root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table .table-header,
+  :root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table .table-row {
     min-width: auto !important;
     width: 100% !important;
     overflow-x: visible !important;
     white-space: normal !important;
   }
+    
+  .individual-rankings {
+    margin-top: 60px; /* 增加排名列表的顶部间距 */
+  }
   
-  /* 英雄排名列表隐藏水平滚动条 */
-  .individual-rankings-container .rank-table::-webkit-scrollbar {
-    width: 6px; /* 保留垂直滚动条 */
-    height: 0; /* 隐藏水平滚动条 */
-  }
-
-  /* 1. 背景图片全屏显示并固定 */
-  .battle-ranking {
-    padding: 0 !important;
-    margin-top: 50px;
-    background-image: url('/battle-background.jpg');
-    background-size: cover;
-    background-position: center;
-    background-attachment: fixed;
-    min-height: 100vh;
-  }
-
-  /* 移除原有卡片背景，让内容在背景图上显示 */
-  .card-game {
-    background: transparent;
-    box-shadow: none;
-  }
-
-  /* 主题部分调整 */
-  .theme-section {
-    width: 100%;
-    margin: 0;
-    padding: 0;
-  }
-
-  .banner-image {
-    width: 100%;
-    height: auto;
-  }
-
-  /* 战鼓部分调整 */
-  .drums-section {
-    transform: scale(0.8);
-    /* 缩小战鼓元素 */
-  }
-
-  /* 2. 倒计时模块调整 - 移至冠军战区上方，缩小时间显示为一行 */
-  .timer-float {
+  /* 英雄排名容器设置 - 允许垂直滚动，设置默认高度显示多行 */
+  .individual-rankings-container .rank-table {
+    overflow-y: auto;
+    overflow-x: auto; /* 允许水平滚动 */
     position: relative;
-    right: auto;
-    top: auto;
-    margin: 10px auto;
-    width: 95%;
-    padding: 8px;
-    border-radius: 8px;
-    background: rgba(0, 0, 0, 0.8);
-    color: white;
+    /* 基于默认显示行数计算合适的高度 */
+    height: calc(60px * var(--default-display-rows, 10));
+    /* 隐藏滚动条但保留滚动功能 */
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  
+  /* 移动端非前三名字体放大 */
+  .team-rankings-container .table-row:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)),
+  .individual-rankings-container .table-row:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) {
+    font-size: 1.1rem;
+  }
+  
+  /* 移动端名次列水平垂直居中 */
+  .team-rankings-container .table-header > :first-child,
+  .individual-rankings-container .table-header > :first-child,
+  .team-rankings-container .table-row > :first-child,
+  .individual-rankings-container .table-row > :first-child {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     text-align: center;
   }
+  
+  /* 确保前三名特殊样式在移动端正确显示 */
+.team-rankings-container .table-row.top-three,
+.individual-rankings-container .table-row.top-three {
+  transform: scale(1);
+  box-shadow: none;
+  position: static;
+}
 
-  .timer-float .label {
-    font-size: 0.9rem;
-    display: block;
-    margin-bottom: 5px;
-  }
+.team-rankings-container .table-row:nth-child(1),
+.team-rankings-container .table-row:nth-child(2),
+.team-rankings-container .table-row:nth-child(3),
+.individual-rankings-container .table-row:nth-child(1),
+.individual-rankings-container .table-row:nth-child(2),
+.individual-rankings-container .table-row:nth-child(3) {
+  box-shadow: none;
+  z-index: 1;
+}
 
-  .countdown {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    flex-wrap: nowrap;
-  }
+/* 当设置为禁止滚动时，确保战区排名容器不允许滚动 */
+:root[style*="--team-scroll-lock: lock"] .team-rankings-container {
+  overflow: visible !important;
+  height: auto !important;
+}
 
-  .time-item {
-    font-size: 0.85rem;
-    padding: 4px 6px;
-    background: rgba(255, 215, 0, 0.2);
-    border-radius: 4px;
-    border: 1px solid rgba(255, 215, 0, 0.5);
-  }
+:root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table {
+  overflow: hidden !important;
+  display: block;
+  min-width: auto !important;
+  width: 100% !important;
+}
 
-  /* 任务设置调整 */
-  .task-settings-section {
-    margin-top: -100px;
-    /* 调整负边距 */
-  }
+/* 确保表格头部和行在禁止滚动模式下能够完整显示内容 */
+:root[style*="--team-scroll-lock: lock"] .team-rankings-container .table-header,
+:root[style*="--team-scroll-lock: lock"] .team-rankings-container .table-row {
+  min-width: auto !important;
+  width: 100% !important;
+  overflow-x: visible !important;
+  white-space: normal !important;
+}
 
-  .task-title-container {
-    padding: 15px;
-  }
+/* 英雄排名列表隐藏水平滚动条 */
+.individual-rankings-container .rank-table::-webkit-scrollbar {
+  width: 6px; /* 保留垂直滚动条 */
+  height: 0; /* 隐藏水平滚动条 */
+}
 
-  .task-title-container .game-title {
-    font-size: 1.6rem;
-  }
+/* 1. 背景图片全屏显示并固定 */
+.battle-ranking {
+  padding: 0 !important;
+  margin-top: 50px;
+  background-image: url('/battle-background.jpg');
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+  min-height: 100vh;
+}
 
-  .task-title-container .game-title-highlight {
-    font-size: 2rem;
-  }
+/* 移除原有卡片背景，让内容在背景图上显示 */
+.card-game {
+  background: transparent;
+  box-shadow: none;
+}
 
-  .task-title-container .game-subtitle {
-    font-size: 1rem;
-  }
+/* 主题部分调整 */
+.theme-section {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
 
-  /* 排名部分调整 */
-  .rankings-section {
-    margin: 0 10px 20px 10px;
-  }
+.banner-image {
+  width: 100%;
+  height: auto;
+}
+
+/* 战鼓部分调整 */
+.drums-section {
+  transform: scale(0.8);
+  /* 缩小战鼓元素 */
+}
+
+/* 2. 倒计时模块调整 - 移至冠军战区上方，缩小时间显示为一行 */
+.timer-float {
+  position: relative;
+  right: auto;
+  top: auto;
+  margin: 10px auto;
+  width: 95%;
+  padding: 8px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  text-align: center;
+}
+
+.timer-float .label {
+  font-size: 0.9rem;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.countdown {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: nowrap;
+}
+
+.time-item {
+  font-size: 0.85rem;
+  padding: 4px 6px;
+  background: rgba(255, 215, 0, 0.2);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 215, 0, 0.5);
+}
+
+/* 任务设置调整 */
+.task-settings-section {
+  margin-top: -100px;
+  /* 调整负边距 */
+}
+
+.task-title-container {
+  padding: 15px;
+}
+
+.task-title-container .game-title {
+  font-size: 1.6rem;
+}
+
+.task-title-container .game-title-highlight {
+  font-size: 2rem;
+}
+
+.task-title-container .game-subtitle {
+  font-size: 1rem;
+}
+
+/* 排名部分调整 */
+.rankings-section {
+  margin: 0 10px 20px 10px;
+}
 
   .rankings-container {
-    flex-direction: column;
-    gap: 10px;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 20px; /* 增大垂直间距，避免拥挤 */
+    align-items: stretch; /* 移动端也让两个框体宽度占满 */
+    width: 100%;
   }
 
   .individual-rankings,
   .team-rankings {
-    min-width: auto;
-    width: 100%;
-    /* 调整顺序，确保倒计时在冠军上方 */
-    display: flex;
-    flex-direction: column;
+  width: 550px; /* 移动端也保持固定宽度 */
+  max-width: 100%; /* 在小屏幕上可以自适应 */
+  /* 调整顺序，确保倒计时在冠军上方 */
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto; /* 居中显示 */
   }
 
-  /* 将倒计时移动到冠军上方的位置 */
-  .team-rankings {
-    order: -1;
-  }
+/* 将倒计时移动到冠军上方的位置 */
+.team-rankings {
+  order: -1;
+}
 
-  .team-rankings-container,
-  .individual-rankings-container {
-    padding: 10px;
-    border-radius: 10px;
-    background: rgba(255, 255, 255, 0.95);
-  }
-  
-  /* 当设置为禁止滚动时，确保战区排名容器不允许滚动 */
-  :root[style*="--team-scroll-lock: lock"] .team-rankings-container {
-    overflow: visible !important;
-    height: auto !important;
-  }
-  
-  :root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table {
-    overflow: hidden !important;
-    white-space: nowrap;
-    display: block;
-  }
+.team-rankings-container,
+.individual-rankings-container {
+  padding: 10px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.95);
+}
 
-  /* 表格调整 */
-  .rank-table {
-    min-height: 250px;
-    /* 移除最大高度限制，允许显示所有行 */
-    overflow-x: hidden;
-    /* 禁止横向滚动 */
-    overflow-y: auto;
-    /* 允许纵向滚动 */
-    /* 隐藏移动端滚动条 */
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    display: flex;
-    flex-direction: column;
-  }
-  
-  /* 隐藏WebKit浏览器移动端滚动条 */
-  .rank-table::-webkit-scrollbar {
-    display: none;
-  }
-  
-  /* 移动端英雄排名列表滚动设置 */
-  .individual-rankings-container .rank-table {
-    overflow-x: hidden !important;
-    /* 禁止横向滚动 */
-    overflow-y: auto !important;
-    /* 允许纵向滚动 */
-    /* 确保英雄排名列表隐藏滚动条 */
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .individual-rankings-container .rank-table::-webkit-scrollbar {
-    display: none;
-  }
+/* 当设置为禁止滚动时，确保战区排名容器不允许滚动 */
+:root[style*="--team-scroll-lock: lock"] .team-rankings-container {
+  overflow: visible !important;
+  height: auto !important;
+}
 
+:root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table {
+  overflow: hidden !important;
+  white-space: nowrap;
+  display: block;
+}
+
+/* 表格调整 */
+.rank-table {
+  min-height: 250px;
+  /* 移除最大高度限制，允许显示所有行 */
+  overflow-x: hidden;
+  /* 禁止横向滚动 */
+  overflow-y: auto;
+  /* 允许纵向滚动 */
+  /* 隐藏移动端滚动条 */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 隐藏WebKit浏览器移动端滚动条 */
+.rank-table::-webkit-scrollbar {
+  display: none;
+}
+
+/* 移动端英雄排名列表滚动设置 */
+.individual-rankings-container .rank-table {
+  overflow-x: hidden !important;
+  /* 禁止横向滚动 */
+  overflow-y: auto !important;
+  /* 允许纵向滚动 */
+  /* 确保英雄排名列表隐藏滚动条 */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.individual-rankings-container .rank-table::-webkit-scrollbar {
+  display: none;
+}
+
+.table-header {
+  font-size: 1rem;
+  padding: 8px 6px;
+  min-width: 500px;
+  /* 固定表头，防止滚动时移动 */
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: rgba(255, 255, 255, 0.95);
+}
+
+.table-row {
+  font-size: 0.9rem;
+  padding: 8px 6px;
+  min-width: 500px;
+  /* 确保行内容不会被截断 */
+  overflow: visible;
+}
+
+/* 冠军部分调整 */
+.team-champion,
+.individual-champion {
+  transform: scale(0.9);
+  margin: 5px 0;
+}
+
+/* 管理员入口调整 */
+.admin-entry-float {
+  position: relative;
+  top: auto;
+  right: auto;
+  margin: 10px;
+  text-align: center;
+}
+
+.btn-game-secondary {
+  padding: 10px 15px;
+  font-size: 0.9rem;
+}
+
+/* 3. 奖金模块调整 - 移至底部显示 */
+.bonus-section {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  margin: 0;
+  padding: 10px;
+  z-index: 1000;
+  transform: translateY(0);
+  transition: transform 0.3s ease;
+  box-shadow: none;
+}
+
+.bonus-awards-container {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.award-image {
+  height: 120px;
+  width: auto;
+}
+
+/* 确保重要内容优先显示 */
+.rank-col,
+.name-col,
+.score-col {
+  font-weight: bold;
+}
+
+/* 为底部奖金模块留出空间 */
+.admin-entry-float {
+  margin-bottom: 100px;
+}
+
+/* 针对极小屏幕的特殊处理 */
+@media (max-width: 480px) {
   .table-header {
-    font-size: 1rem;
+    font-size: 0.9rem;
     padding: 8px 6px;
-    min-width: 500px;
-    /* 固定表头，防止滚动时移动 */
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    background-color: rgba(255, 255, 255, 0.95);
+    min-width: 450px;
   }
 
   .table-row {
-    font-size: 0.9rem;
-    padding: 8px 6px;
-    min-width: 500px;
-    /* 确保行内容不会被截断 */
-    overflow: visible;
+    min-width: 450px;
+    font-size: 0.75rem;
+    padding: 6px 4px;
   }
 
-  /* 冠军部分调整 */
-  .team-champion,
-  .individual-champion {
-    transform: scale(0.9);
-    margin: 5px 0;
+  .game-title {
+    font-size: 1.4rem;
   }
 
-  /* 管理员入口调整 */
-  .admin-entry-float {
-    position: relative;
-    top: auto;
-    right: auto;
-    margin: 10px;
-    text-align: center;
-  }
-
-  .btn-game-secondary {
-    padding: 10px 15px;
-    font-size: 0.9rem;
-  }
-
-  /* 3. 奖金模块调整 - 移至底部显示 */
-  .bonus-section {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    margin: 0;
-    padding: 10px;
-    z-index: 1000;
-    transform: translateY(0);
-    transition: transform 0.3s ease;
-    box-shadow: none;
-  }
-
-  .bonus-awards-container {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
+  .game-title-highlight {
+    font-size: 1.7rem;
   }
 
   .award-image {
     height: 120px;
-    width: auto;
   }
 
-  /* 确保重要内容优先显示 */
-  .rank-col,
-  .name-col,
-  .score-col {
-    font-weight: bold;
+  .countdown {
+    gap: 6px;
   }
 
-  /* 为底部奖金模块留出空间 */
-  .admin-entry-float {
-    margin-bottom: 100px;
-  }
-
-  /* 针对极小屏幕的特殊处理 */
-  @media (max-width: 480px) {
-    .table-header {
-      font-size: 0.9rem;
-      padding: 8px 6px;
-      min-width: 450px;
-    }
-
-    .table-row {
-      min-width: 450px;
-      font-size: 0.75rem;
-      padding: 6px 4px;
-    }
-
-    .game-title {
-      font-size: 1.4rem;
-    }
-
-    .game-title-highlight {
-      font-size: 1.7rem;
-    }
-
-    .award-image {
-      height: 120px;
-    }
-
-    .countdown {
-      gap: 6px;
-    }
-
-    .time-item {
-      font-size: 0.8rem;
-      padding: 3px 5px;
-    }
+  .time-item {
+    font-size: 0.8rem;
+    padding: 3px 5px;
   }
 }
+}
 
 /* 触摸设备优化 */
 @media (hover: none) and (pointer: coarse) {
@@ -2160,7 +2198,6 @@ onUnmounted(() => {
   }
 }
 
-
 @media (min-width: 2000px) {
   .bonus-section {
     position: fixed;