src/views/BattleRanking.vue

@@ -49,7 +49,7 @@
         <div class="game-subtitle total-score-total-title">
           <img src="/completed_performance.png" 
   alt="总战绩" 
-  style="width: 500px; display: block; margin: 0 auto; height: auto;" 
+  style="width: 600px; display: block; margin: 0 auto; height: auto;" 
   class="total-score-total-image">
         </div>
         <div class="total-score-content">
@@ -1378,6 +1378,7 @@ onUnmounted(() => {
   position: fixed;
   cursor: move;
   transition: transform 0.2s ease;
+  z-index: 9999; /* 设置最高层级，确保在最上层显示 */
 }
 
 /* 奖金图片容器样式 - Flex布局居中且保持一行 */
@@ -1408,15 +1409,69 @@ onUnmounted(() => {
 @media (max-width: 768px) {
 
   .total-score-total-image {
-    width: 320px;
+    width: 280px !important; /* 调整总战绩图片大小，覆盖内联样式 */
+  }
+  
+  /* 移动端总战绩金额字体调小 */
+  .total-score-total-value {
+    font-size: 5rem !important; /* 调小总战绩金额字体 */
+    margin-top: -40px !important; /* 调整与图片的间距 */
   }
 
   .team-rankings-propagation-image {
-    width: 220px;
+    width: 200px !important; /* 覆盖内联样式 */
   }
 
   .individual-rankings-propagation-image {
-    width: 220px;
+    width: 200px !important; /* 覆盖内联样式 */
+  }
+  
+  /* 战区排名宣传语容器调整 */
+  .team-rankings-propagation {
+    position: relative;
+    z-index: 5; /* 提高z-index避免被其他元素遮挡 */
+    margin-bottom: 70px; /* 进一步增大战区冠军的间距 */
+  }
+  
+  /* 英雄排名宣传语容器调整 */
+  .individual-rankings-propagation {
+    position: relative;
+    z-index: 5; /* 提高z-index避免被其他元素遮挡 */
+    margin-bottom: 10px; /* 减小英雄榜虎狼之师图片与个人英雄图片的距离 */
+  }
+  
+  /* 移动端战区冠军布局调整，与个人英雄冠军保持一致 */
+  .team-champion {
+    margin-bottom: 30px; /* 增加与下方战区排名标题的间距 */
+    padding: 10px; /* 调整内边距 */
+    min-height: 120px; /* 确保与英雄冠军有相同的视觉权重 */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  /* 移动端英雄冠军布局调整 */
+  .individual-champion {
+    margin-bottom: -10px; /* 恢复为修改之前的间距 */
+    padding: 10px; /* 与战区冠军保持一致的内边距 */
+    min-height: 120px; /* 确保与战区冠军有相同的视觉权重 */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  /* 确保两个排名区域在移动端有相同的起始位置 */
+  .team-rankings,
+  .individual-rankings {
+    position: relative;
+    z-index: 2; /* 统一的层级 */
+    padding-top: 10px; /* 统一的顶部内边距 */
+  }
+  
+  /* 战区和英雄排名容器在移动端的统一样式 */
+  .team-rankings-container,
+  .individual-rankings-container {
+    margin-top: 20px; /* 与上方冠军图片的统一间距 */
   }
 
   /* 隐藏倒计时模块 */
@@ -1446,7 +1501,7 @@ onUnmounted(() => {
 
   /* 保留响应式中的padding设置，但移除其他可能冲突的位置样式 */
   .bonus-section {
-    padding: 10px;
+    padding: 8px; /* 减小padding */
   }
 
   .bonus-awards-container {
@@ -1454,6 +1509,12 @@ onUnmounted(() => {
     scale: 0.8;
   }
   
+  /* 确保图片容器有足够的显示空间 */
+  .team-rankings, .individual-rankings {
+    position: relative;
+    z-index: 2; /* 确保排名区域在奖金模块之上 */
+  }
+
   .timer-float {
     font-size: 0.9rem;
   }
@@ -2075,68 +2136,84 @@ onUnmounted(() => {
     .team-rankings-container .rank-table {
       position: relative;
       min-height: auto;
-      /* 如果配置了具体了默认显示行数，则设置高度和滚动，否则显示所有行 */
+      /* 移动端强制显示所有行，覆盖JS动态设置的CSS变量 */
-      height: var(--team-default-height, auto) !important;
+      height: auto !important;
-      overflow-y: var(--team-overflow-y, hidden);
+      max-height: none !important;
-      overflow-x: var(--team-overflow-x, auto);
+      overflow-y: visible !important;
+      overflow-x: auto !important;
+      /* 强制覆盖CSS变量 */
+      --team-default-height: auto !important;
+      --team-overflow-y: visible !important;
+      --team-overflow-x: auto !important;
     }
     
-    /* 当设置了滚动锁定时，禁止所有滚动 */
+    /* 移动端战区排名显示所有内容，不受滚动锁定影响 */
     :root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table {
-      overflow-y: hidden !important;
+      overflow-y: visible !important;
-      overflow-x: hidden !important;
+      overflow-x: auto !important;
-      height: var(--team-default-height, auto) !important;
+      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;
+      white-space: nowrap !important;
     }
 
     .individual-rankings-propagation {
       margin-top: -40px;
-      padding-bottom: 40px;
+      padding-bottom: 10px;
+      margin-bottom: 20px; /* 恢复为修改之前的间距 */
     }
       
     .individual-rankings {
       margin-top: 60px; /* 增加排名列表的顶部间距 */
     }
     
+    /* 移动端战区排名容器位置调整 */
+    .team-rankings {
+      margin-top: 0; /* 确保与英雄排名区域在统一水平线 */
+    }
+    
     /* 英雄排名容器设置 - 根据配置决定显示行数和滚动行为 */
     .individual-rankings-container .rank-table {
       position: relative;
       min-height: auto;
-      /* 如果配置了具体了默认显示行数，则设置高度和滚动，否则显示所有行 */
+      /* 移动端强制显示所有行，覆盖JS动态设置的CSS变量 */
-      height: var(--individual-default-height, auto) !important;
+      height: auto !important;
-      overflow-y: var(--individual-overflow-y, hidden);
+      max-height: none !important;
-      overflow-x: var(--individual-overflow-x, auto);
+      overflow-y: visible !important;
+      overflow-x: auto !important;
       /* 隐藏滚动条 */
       -ms-overflow-style: none;
       scrollbar-width: none;
+      /* 强制覆盖CSS变量 */
+      --individual-default-height: auto !important;
+      --individual-overflow-y: visible !important;
+      --individual-overflow-x: auto !important;
     }
     
-    /* 当设置了滚动锁定时，禁止所有滚动 */
+    /* 移动端英雄排名显示所有内容，不受滚动锁定影响 */
     :root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table {
-      overflow-y: hidden !important;
+      overflow-y: visible !important;
-      overflow-x: hidden !important;
+      overflow-x: auto !important;
-      height: var(--individual-default-height, auto) !important;
+      height: auto !important;
       min-width: auto !important;
       width: 100% !important;
     }
     
-    /* 确保表格内容在锁定模式下正确显示 */
+    /* 确保表格内容在移动端正确显示 */
     :root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table .table-header,
     :root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table .table-row {
       min-width: auto !important;
       width: 100% !important;
       overflow-x: visible !important;
-      white-space: normal !important;
+      white-space: nowrap !important;
     }
     
     /* 移动端非前三名字体放大 */
@@ -2524,7 +2601,7 @@ onUnmounted(() => {
     position: fixed;
     top: 360px;
     left: 720px;
-    z-index: 0;
+    z-index: 9999; /* 设置最高层级，确保在最上层显示 */
     cursor: move;
     transition: transform 0.2s ease;
   }