Merge pull request 'tmp-upload' (#4) from tmp-upload into main

Reviewed-on: #4

src/App.vue

@@ -25,7 +25,7 @@
         <!-- 页脚 -->
         <footer class="game-footer">
           <div class="footer-content">
-            <p>&copy; 2025-2026 聚上集团 | 云上企. 所有权利保留.</p>
+            <p>&copy; 2025-2026 聚上集团 | 云上企 版权所有.</p>
           </div>
         </footer>           
     </div> 
@@ -108,7 +108,28 @@
 
 .footer-content {
   font-size: 14px;
-  text-shadow: 1px 1px 10px black;
+  /* 雕刻效果：使用多层text-shadow创建凸起感 */
+  text-shadow: 
+    -1px -1px 0 rgba(255, 255, 255, 0.3),  /* 高光 - 左上 */
+    1px 1px 0 rgba(0, 0, 0, 0.5),           /* 阴影 - 右下 */
+    0 0 5px rgba(17, 17, 17, 0.5);         /* 光晕 */
+  /* 背景和内边距 */
+  padding: 8px 16px;
+  border-radius: 4px;
+  
+  /* 添加轻微的3D效果 */
+  transform: perspective(1000px) rotateX(0deg);
+  transition: all 0.3s ease;
+}
+
+/* 鼠标悬停时增强3D效果 */
+.footer-content:hover {
+  transform: perspective(1000px) rotateX(2deg) translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  text-shadow: 
+    -1px -1px 0 rgba(255, 255, 255, 0.4),
+    1px 1px 0 rgba(0, 0, 0, 0.6),
+    0 0 8px rgba(15, 15, 15, 0.7);
 }
 
 /* 针对1920x1080分辨率的banner精确定位 */
@@ -172,5 +193,20 @@
   .app-logo {
     width: 200px; /* 移动设备上设置固定宽度为200px */
   }
+  
+  /* 移动设备上的页脚雕刻效果适配 */
+  .footer-content {
+    font-size: 12px;
+    padding: 6px 12px;
+    text-shadow: 
+      -1px -1px 0 rgba(255, 255, 255, 0.2),
+      1px 1px 0 rgba(0, 0, 0, 0.4),
+      0 0 3px rgba(255, 215, 0, 0.4);
+  }
+  
+  .footer-content:hover {
+    transform: none; /* 移动设备上禁用悬停效果 */
+    box-shadow: none;
+  }
 }
 </style>

src/views/BattleRanking.vue

@@ -14,10 +14,10 @@
         <!-- 战鼓动画在上面 -->
         <div class="drums-animation">
           <div class="drum glow-border" :class="{ beating: isBeating }">🥁</div>
-          <div class="drum" :class="{ beating: isBeating }">锣</div>
+          <div class="drum" :class="{ beating: isBeating }">🥁</div>
           <div class="trophy" style="font-size: 2.5rem; filter: drop-shadow(0 0 10px var(--gold-primary));">🏆</div>
-          <div class="drum" :class="{ beating: isBeating }">锣</div>
+          <div class="drum" :class="{ beating: isBeating }">🥁</div>
-          <div class="drum" :class="{ beating: isBeating }">锣</div>
+          <div class="drum" :class="{ beating: isBeating }">🥁</div>
         </div>
       </div>
     </section>
@@ -34,9 +34,8 @@
     <!-- 第三部分：奖金设置（图片形式） -->
     <section v-if="localDisplayConfig.showBonusModule" class="bonus-section card-game" 
       @mousedown="startBonusDrag"
-             @touchstart="startBonusDrag" 
+      @touchstart="startBonusTouch"
-             @click.stop
+      @click.stop>
-             :style="{ left: bonusPosition.x + 'px', top: bonusPosition.y + 'px' }">
       <div class="bonus-awards-container">
         <div><img src="/award1.png" alt="一等奖" class="award-image"></div>
         <div><img src="/award2.png" alt="二等奖" class="award-image"></div>
@@ -48,7 +47,14 @@
     <section class="total-score-section card-game">
       <div class="total-score-container">
         <div class="game-subtitle total-score-total-title">
-          <img src="/completed_performance.png" alt="总战绩" class="total-score-total-image">
+          <img src="/completed_performance.png" 
+  alt="总战绩" 
+  style="width: 600px; display: block; margin: 0 auto; height: auto;" 
+  class="total-score-total-image">
+          <img src="/completed_performance.png" 
+  alt="总战绩" 
+  style="width: 880px; display: block; margin: 0 auto; height: auto;" 
+  class="total-score-total-image">
         </div>
         <div class="total-score-content">
           <div class="total-score-item">
@@ -66,7 +72,8 @@
         <div class="team-rankings">
           <!-- 战区排名宣传语 -->
           <div class="team-rankings-propagation">
-            <img src="/team-propagation.png" alt="虎狼之师" class="team-rankings-propagation-image">
+            <img src="/team-propagation.png" alt="虎狼之师" class="team-rankings-propagation-image"
+            style="width: 500px; height: auto">
           </div>
           <!-- 战区冠军 -->
           <div class="team-champion">
@@ -122,7 +129,8 @@
         <div class="individual-rankings">
           <!-- 英雄排名宣传语 -->
           <div class="individual-rankings-propagation">
-            <img src="/individual-propagation.png" alt="虎狼之师" class="individual-rankings-propagation-image">
+            <img src="/individual-propagation.png" alt="虎狼之师" class="individual-rankings-propagation-image"
+    style="width: 500px; height: auto">
           </div>          
           <!-- 英雄冠军 -->
           <div class="individual-champion">
@@ -154,7 +162,6 @@
           <!-- 英雄排名 -->
           <div class="individual-rankings-container">
             <h2 class="game-subtitle">英雄排名</h2>
-              <div class="scroll-wrapper"></div>
             <div class="rank-table">
               <div class="table-header" :style="{ 'grid-template-columns': individualGridTemplate }">
                 <span class="rank-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.rank || 'left' }">排名</span>
@@ -213,7 +220,7 @@
 </template>
 
 <script setup>
-import { ref,  onBeforeMount, onMounted, onUnmounted, watch, computed, reactive } from 'vue';
+import { ref,  onBeforeMount, onMounted, onUnmounted, watch, computed, reactive, proxyRefs } from 'vue';
 import { useRouter } from 'vue-router';
 import {
   individualRankings as importedIndividualRankings,
@@ -702,7 +709,7 @@ const isPlayingSound = ref(false);
 const drumsPosition = ref({ x: 20, y: 20 });
 // 倒计时位置状态已移除，直接在模板中使用固定位置
 // 奖金设置模块位置状态 - 使用reactive存储实际定位值
-const bonusPosition = reactive({ x: 320, y: 360 });
+const bonusPosition = reactive({ x: 'auto', y: 'auto' });
 
 let isDragging = false;
 let isBonusDragging = false;
@@ -731,28 +738,37 @@ const startDrag = (e) => {
   e.preventDefault();
 };
 
-// 开始拖动奖金模块
+// 开始拖动奖金模块（鼠标事件）
 const startBonusDrag = (e) => {
   e.stopPropagation(); // 阻止事件冒泡
   isBonusDragging = true;
-  
+  // 计算鼠标相对于元素左上角的偏移量
-  // 根据事件类型处理拖动偏移量
+  const rect = e.currentTarget.getBoundingClientRect();
-  if (e.type === 'touchstart') {
+  bonusDragOffset.x = e.clientX - rect.left;
-    const touch = e.touches[0];
+  bonusDragOffset.y = e.clientY - rect.top;
-    bonusDragOffset.x = touch.clientX - bonusPosition.x;
-    bonusDragOffset.y = touch.clientY - bonusPosition.y;
-  } else {
-    bonusDragOffset.x = e.clientX - bonusPosition.x;
-    bonusDragOffset.y = e.clientY - bonusPosition.y;
-  }
-  
   // 提高拖动时的性能，临时禁用动画效果
-  const bonusElement = e.currentTarget;
+  e.currentTarget.style.transition = 'none';
-  bonusElement.style.transition = 'none';
   e.preventDefault();
 };
 
-// 结束拖动
+// 开始拖动奖金模块（触摸事件）
+const startBonusTouch = (e) => {
+  e.stopPropagation(); // 阻止事件冒泡
+  e.preventDefault(); // 阻止默认行为，如滚动
+  
+  const touch = e.touches[0];
+  isBonusDragging = true;
+  
+  // 计算触摸点相对于元素左上角的偏移量
+  const rect = e.currentTarget.getBoundingClientRect();
+  bonusDragOffset.x = touch.clientX - rect.left;
+  bonusDragOffset.y = touch.clientY - rect.top;
+  
+  // 提高拖动时的性能，临时禁用动画效果
+  e.currentTarget.style.transition = 'none';
+};
+
+// 结束拖动（鼠标和触摸事件）
 const endDrag = (e) => {
   isDragging = false;
 
@@ -766,29 +782,65 @@ const endDrag = (e) => {
   isBonusDragging = false;
 };
 
-// 优化的拖动函数 - 使用节流减少更新频率
+// 结束触摸拖动
+const endTouch = (e) => {
+  if (isBonusDragging) {
+    // 恢复动画效果
+    const bonusElement = document.querySelector('.bonus-section');
+    if (bonusElement) {
+      bonusElement.style.transition = '';
+    }
+  }
+  isBonusDragging = false;
+};
+
+// 优化的拖动函数 - 使用节流减少更新频率（鼠标事件）
 const drag = throttle((e) => {
   if (isDragging) {
     drumsPosition.value.x = e.clientX - dragOffset.x;
     drumsPosition.value.y = e.clientY - dragOffset.y;
   }
   if (isBonusDragging) {
-    // 根据事件类型处理拖动位置
-    let clientX, clientY;
-    if (e.type === 'mousemove') {
-      clientX = e.clientX;
-      clientY = e.clientY;
-    } else if (e.type === 'touchmove') {
-      const touch = e.touches[0];
-      clientX = touch.clientX;
-      clientY = touch.clientY;
-    } else {
-      return; // 如果不是鼠标或触摸事件，直接返回
-    }
-
     // 计算新的位置
-    const newX = clientX - bonusDragOffset.x;
+    const newX = e.clientX - bonusDragOffset.x;
-    const newY = clientY - bonusDragOffset.y;
+    const newY = e.clientY - bonusDragOffset.y;
+
+    // 确保元素不会被拖出视口
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+    const element = document.querySelector('.bonus-section');
+
+    if (element) {
+      const elementWidth = element.offsetWidth;
+      const elementHeight = element.offsetHeight;
+
+      // 限制在视口内，添加一些边距
+      const limitedX = Math.max(10, Math.min(newX, windowWidth - elementWidth - 10));
+      const limitedY = Math.max(10, Math.min(newY, windowHeight - elementHeight - 10));
+
+      // 使用优化的更新函数更新奖金模块位置
+      requestAnimationFrame(() => {
+        bonusPosition.x = limitedX;
+        bonusPosition.y = limitedY;
+        // 直接设置元素样式确保实时更新
+        element.style.left = `${limitedX}px`;
+        element.style.top = `${limitedY}px`;
+        element.style.right = 'auto';
+        element.style.bottom = 'auto';
+      });
+    }
+  }
+}, 10); // 10ms节流，约100FPS
+
+// 优化的触摸拖动函数 - 使用节流减少更新频率
+const touchMove = throttle((e) => {
+  if (isBonusDragging) {
+    e.preventDefault(); // 阻止页面滚动
+    
+    const touch = e.touches[0];
+    // 计算新的位置
+    const newX = touch.clientX - bonusDragOffset.x;
+    const newY = touch.clientY - bonusDragOffset.y;
 
     // 确保元素不会被拖出视口
     const windowWidth = window.innerWidth;
@@ -1038,7 +1090,6 @@ const startDrumAnimation = () => {
         `${(animationConfig.beatTranslateY || -15) * (1 + (patternConfig.accentAnimation || 0) / 100)}px` :
         `${animationConfig.beatTranslateY || -15}px`);
       drum.style.setProperty('--drum-rotate', `${animationConfig.beatRotate || 5}deg`);
-
       drum.style.setProperty('--drum-brightness', isStrongBeat ? '1.4' : '1.3');
       drum.style.setProperty('--drum-saturation', isStrongBeat ? '1.3' : '1.2');
     });
@@ -1117,8 +1168,11 @@ onMounted(async () => {
   // 添加拖放相关的事件监听
   document.addEventListener('mousemove', drag);
   document.addEventListener('mouseup', endDrag);
-  document.addEventListener('touchmove', drag);
+  
-  document.addEventListener('touchend', endDrag);
+  // 添加触摸事件监听
+  document.addEventListener('touchmove', touchMove, { passive: false });
+  document.addEventListener('touchend', endTouch);
+  document.addEventListener('touchcancel', endTouch);
 });
 
 // 监听结束时间变化（在真实环境中，可能需要通过props或store来监听）
@@ -1143,8 +1197,11 @@ onUnmounted(() => {
   // 移除拖放相关的事件监听
   document.removeEventListener('mousemove', drag);
   document.removeEventListener('mouseup', endDrag);
-  document.removeEventListener('touchmove', drag);
+  
-  document.removeEventListener('touchend', endDrag);
+  // 移除触摸事件监听
+  document.removeEventListener('touchmove', touchMove);
+  document.removeEventListener('touchend', endTouch);
+  document.removeEventListener('touchcancel', endTouch);
   
   // 清理音频资源
   if (audioContext) {
@@ -1166,43 +1223,11 @@ onUnmounted(() => {
     transform: translateY(0px) rotate(0deg);
   }
 }
-.team-rankings-propagation-image {
-  width: 360px;
-  height: auto;
-  max-width: 100%;
-}
-
-.individual-rankings-propagation-image {
-  width: 360px;
-  height: auto;
-  max-width: 100%;
-}
-.avatar-image-champion {
-  object-fit: cover;
-  border-radius: 50%;
-}
 .avatar-image-champion {
   object-fit: cover;
   border-radius: 50%;
 }
 
-/* 新增：电脑端「已完成业绩」图片居中 */
-.total-score-total-title {
-  display: flex;
-  justify-content: center; /* 水平居中 */
-}
-.total-score-total-image {
-  width: 780px; /* 电脑端图片宽度（可按需调小，比如160px/200px） */
-  height: auto; /* 保持宽高比不变形 */
-}
-.score-value {
-  font-size: 10rem; /* 电脑端所有业绩数字大小 */
-}
-
-.total-score-total-value {
-  font-size: 10rem;
-  margin-top: -40px;
-  }
 /* 冠军模块样式 */
 .champion-section {
   display: flex;
@@ -1219,12 +1244,12 @@ onUnmounted(() => {
   justify-content: center;
   text-align: center;
   padding: 15px;
-  margin-bottom: 10px;
+  margin-bottom: 0; 
 }
 
 .team-logo {
-  font-size: 2rem;
+  font-size: 0;
-  margin-bottom: 5px;
+  margin-bottom: 0;
   display: inline-block;
   color: gold;
 }
@@ -1357,13 +1382,7 @@ onUnmounted(() => {
   position: fixed;
   cursor: move;
   transition: transform 0.2s ease;
-  background: rgba(255, 255, 255, 0.95);
+  z-index: 9999; /* 设置最高层级，确保在最上层显示 */
-  border-radius: 15px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-  
-  border: 2px solid rgba(255, 215, 0, 0.5);
-  padding: 15px;
-  z-index: 100;
 }
 
 /* 奖金图片容器样式 - Flex布局居中且保持一行 */
@@ -1379,13 +1398,14 @@ onUnmounted(() => {
 .award-image {
   width: auto;
   height: 120px;
-  border-radius: 8px;
+  /* border-radius: 8px; */
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
+  /* transition: transform 0.2s ease, box-shadow 0.2s ease; */
 }
 
 .award-image:hover {
   transform: translateY(-5px);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+  /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); */
 }
 
 
@@ -1393,15 +1413,70 @@ onUnmounted(() => {
 @media (max-width: 768px) {
 
   .total-score-total-image {
-    width: 320px;
+    width: 280px !important; /* 调整总战绩图片大小，覆盖内联样式 */
+    width: 340px !important; /* 调整总战绩图片大小，覆盖内联样式 */
+  }
+  
+  /* 移动端总战绩金额字体调小 */
+  .total-score-total-value {
+    font-size: 5rem !important; /* 调小总战绩金额字体 */
+    margin-top: -40px !important; /* 调整与图片的间距 */
   }
 
   .team-rankings-propagation-image {
-    width: 320px;
+    width: 200px !important; /* 覆盖内联样式 */
   }
 
   .individual-rankings-propagation-image {
-    width: 320px;
+    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; /* 与上方冠军图片的统一间距 */
   }
 
   /* 隐藏倒计时模块 */
@@ -1431,7 +1506,7 @@ onUnmounted(() => {
 
   /* 保留响应式中的padding设置，但移除其他可能冲突的位置样式 */
   .bonus-section {
-    padding: 10px;
+    padding: 8px; /* 减小padding */
   }
 
   .bonus-awards-container {
@@ -1439,6 +1514,12 @@ onUnmounted(() => {
     scale: 0.8;
   }
   
+  /* 确保图片容器有足够的显示空间 */
+  .team-rankings, .individual-rankings {
+    position: relative;
+    z-index: 2; /* 确保排名区域在奖金模块之上 */
+  }
+
   .timer-float {
     font-size: 0.9rem;
   }
@@ -1658,7 +1739,7 @@ onUnmounted(() => {
   background: rgba(255, 255, 255, 0.95);
   border-radius: 20px;
   cursor: move;
-  z-index: 100;
+  z-index: 1000;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
   transition: box-shadow 0.3s ease;
 }
@@ -1846,8 +1927,30 @@ onUnmounted(() => {
   overflow-y: auto;
   position: relative;
   margin-top: 0.8rem;
-  max-height: 480px;
+  max-height: 420px;
-  min-height: 480px;
+  max-height: 420px;
+ // 只对左侧战区的.rank-table生效（通过父容器限定）
+  .team-rankings-container & {
+    -ms-overflow-style: none; /* IE/Edge 隐藏 */
+    scrollbar-width: none; /* Firefox 隐藏 */
+  }
+  // Chrome/Safari 隐藏左侧滚动条（伪元素必须单独写）
+  .team-rankings-container &::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+  }
+
+  // ========== 新增：右侧英雄排名滚动条保留原样 ==========
+  .individual-rankings-container & {
+    -ms-overflow-style: auto; /* 恢复IE/Edge默认 */
+    scrollbar-width: auto; /* 恢复Firefox默认 */
+  }
+  // Chrome/Safari 恢复右侧滚动条
+  .individual-rankings-container &::-webkit-scrollbar {
+    display: block !important;
+    width: 6px !important; // 恢复默认滚动条宽度
+  }
+ 
 }
 
 .table-header {
@@ -1909,7 +2012,7 @@ onUnmounted(() => {
 /* 前三名特殊背景色，增强亮度和对比度 - 确保英雄排名和战区排名样式一致 */
 .team-rankings-container .table-row:nth-child(1),
 .individual-rankings-container .table-row:nth-child(1) {
-  background: linear-gradient(135deg, #ffd700, #ffed4a);
+  background: linear-gradient(135deg, #ffd700, #403f3c);
   color: #333;
   box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
 }
@@ -1992,9 +2095,8 @@ onUnmounted(() => {
   gap: 15px;
 }
 
-.total-score-content {
+/* 移除空的total-score-content规则集以避免SCSS警告 */
 
-}
 
 .total-score-item {
   display: flex;
@@ -2005,23 +2107,20 @@ onUnmounted(() => {
 }
 
 .score-value {
-  font-size: calc(var(--individual-champion-font-size, 2.4rem) * 2);
+  font-size: calc(var(--individual-champion-font-size, 5rem) * 2);
+  font-size: calc(var(--individual-champion-font-size, 6rem) * 2);
   font-weight: bold;
   color: #fff2c4;
-  text-shadow: 
+  text-shadow: 0 0 10px rgba(0, 0, 0, .8), 0 0 20px rgb(16 16 16 / 30%), 1px 1px 2px rgba(0, 0, 0, .8);
-    0 0 10px rgba(255, 215, 0, 0.5),
-    0 0 20px rgba(255, 215, 0, 0.3),
-    1px 1px 2px rgba(0, 0, 0, 0.8);
 }
 
 .total-score-total-value {
-  
   margin-top: -40px;
 }
 
 /* 战区冠军分数特殊样式 */
 .team-champion .score-value {
-  font-size: calc(var(--team-champion-font-size, 1.8rem) * 2);
+  font-size: calc(var(--team-champion-font-size, 1.8rem) * 4);
   text-shadow: 
     0 0 15px rgba(255, 215, 0, 0.7),
     0 0 30px rgba(255, 215, 0, 0.4),
@@ -2031,7 +2130,7 @@ onUnmounted(() => {
 /* 照片容器样式 */
 .team-logo.photo-container {
   overflow: hidden;
-  margin-top: -40px;
+  margin-top: -97px;
 }
 
 .individual-champion {
@@ -2039,7 +2138,7 @@ onUnmounted(() => {
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  margin-bottom: 100px;
+  margin-bottom: 20px;
   gap: 30px;
 }
 
@@ -2057,7 +2156,6 @@ onUnmounted(() => {
 
 @media (max-width: 768px) {
 
-
     .total-score-total-title {
       align-items: center;
       display: flex;
@@ -2068,68 +2166,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;
     }
     
     /* 移动端非前三名字体放大 */
@@ -2342,10 +2456,8 @@ onUnmounted(() => {
   
   /* 英雄排名列表设置 - 根据配置决定显示行数和滚动行为 */
     .individual-rankings-container .rank-table {
-    
       overflow-x: hidden !important;
       /* 禁止横向滚动 */
-      
       height: var(--individual-default-height, auto) !important;
       overflow-y: var(--individual-overflow-y, auto) !important;
       /* 确保英雄排名列表隐藏滚动条 */
@@ -2519,44 +2631,17 @@ onUnmounted(() => {
     position: fixed;
     top: 360px;
     left: 720px;
-    z-index: 100;
+    z-index: 9999; /* 设置最高层级，确保在最上层显示 */
     cursor: move;
     transition: transform 0.2s ease;
   }
 }
-/* ========== 新增的电脑端总业绩样式（放在最底部） ========== */
+.team-rankings-container .rank-table {
-/* 电脑端（769px以上）总业绩字体样式 - 不影响移动端 */
+  -ms-overflow-style: none !important;
-@media (min-width: 769px) {
+  scrollbar-width: none !important;
-  /* 总战绩大数字（核心修改项） */
-  .total-score-total-value {
-    font-size: 10rem !important; /* 电脑端字体大小（默认10rem，可按需调整） */
-    font-weight: 900 !important; /* 字体粗细（加粗） */
-    color: #ffd700 !important; /* 字体颜色（金色） */
-    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8) !important; /* 发光效果 */
-  }
-
-  /* 兜底：确保所有电脑端业绩数值样式统一 */
-  .score-value {
-    font-size: 10rem !important; /* 与总战绩数值保持一致 */
-    font-weight: 900 !important;
-     color:#fff2c4 !important;
-    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8) !important;
-  }
 }
-/* ========== 移动端英雄榜滚动修复 ========== */
+.team-rankings-container .rank-table::-webkit-scrollbar {
-@media (max-width: 768px) {
+  display: none !important;
-  .individual-rankings-container .scroll-wrapper {
+  width: 0 !important;
-    max-height: 60vh;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-  .individual-rankings-container .scroll-wrapper::-webkit-scrollbar {
-    display: none;
-  }
-  .individual-rankings-container .rank-table {
-    min-height: auto !important;
-    max-height: none !important;
-    height: auto !important;
-  }
 }
 </style>