Merge branch '改变了战区排名英雄排名虎狼之师英雄榜' of http://git.aigc-quickapp.com/WeWork/vs100 into tmp

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>
@@ -32,8 +32,11 @@
     </section>
 
     <!-- 第三部分：奖金设置（图片形式） -->
-    <section v-if="localDisplayConfig.showBonusModule" class="bonus-section card-game" @mousedown="startBonusDrag"
-      @click.stop>
+    <section v-if="localDisplayConfig.showBonusModule" class="bonus-section card-game" 
+             @mousedown="startBonusDrag" 
+             @touchstart="startBonusDrag" 
+             @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>
@@ -151,6 +154,7 @@
           <!-- 英雄排名 -->
           <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>
@@ -698,7 +702,7 @@ const isPlayingSound = ref(false);
 const drumsPosition = ref({ x: 20, y: 20 });
 // 倒计时位置状态已移除，直接在模板中使用固定位置
 // 奖金设置模块位置状态 - 使用reactive存储实际定位值
-const bonusPosition = reactive({ x: 'auto', y: 'auto' });
+const bonusPosition = reactive({ x: 320, y: 360 });
 
 let isDragging = false;
 let isBonusDragging = false;
@@ -731,12 +735,20 @@ const startDrag = (e) => {
 const startBonusDrag = (e) => {
   e.stopPropagation(); // 阻止事件冒泡
   isBonusDragging = true;
-  // 计算鼠标相对于元素左上角的偏移量
-  const rect = e.currentTarget.getBoundingClientRect();
-  bonusDragOffset.x = e.clientX - rect.left;
-  bonusDragOffset.y = e.clientY - rect.top;
+  
+  // 根据事件类型处理拖动偏移量
+  if (e.type === 'touchstart') {
+    const touch = e.touches[0];
+    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;
+  }
+  
   // 提高拖动时的性能，临时禁用动画效果
-  e.currentTarget.style.transition = 'none';
+  const bonusElement = e.currentTarget;
+  bonusElement.style.transition = 'none';
   e.preventDefault();
 };
 
@@ -761,9 +773,22 @@ const drag = throttle((e) => {
     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 = e.clientX - bonusDragOffset.x;
-    const newY = e.clientY - bonusDragOffset.y;
+    const newX = clientX - bonusDragOffset.x;
+    const newY = clientY - bonusDragOffset.y;
 
     // 确保元素不会被拖出视口
     const windowWidth = window.innerWidth;
@@ -1012,7 +1037,8 @@ const startDrumAnimation = () => {
       drum.style.setProperty('--drum-translate-y', isStrongBeat ?
         `${(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-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');
     });
@@ -1091,6 +1117,8 @@ onMounted(async () => {
   // 添加拖放相关的事件监听
   document.addEventListener('mousemove', drag);
   document.addEventListener('mouseup', endDrag);
+  document.addEventListener('touchmove', drag);
+  document.addEventListener('touchend', endDrag);
 });
 
 // 监听结束时间变化（在真实环境中，可能需要通过props或store来监听）
@@ -1115,6 +1143,8 @@ onUnmounted(() => {
   // 移除拖放相关的事件监听
   document.removeEventListener('mousemove', drag);
   document.removeEventListener('mouseup', endDrag);
+  document.removeEventListener('touchmove', drag);
+  document.removeEventListener('touchend', endDrag);
   
   // 清理音频资源
   if (audioContext) {
@@ -1327,6 +1357,13 @@ onUnmounted(() => {
   position: fixed;
   cursor: move;
   transition: transform 0.2s ease;
+  background: rgba(255, 255, 255, 0.95);
+  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布局居中且保持一行 */
@@ -1342,14 +1379,13 @@ onUnmounted(() => {
 .award-image {
   width: auto;
   height: 120px;
-  /* border-radius: 8px; */
-  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
-  /* transition: transform 0.2s ease, box-shadow 0.2s ease; */
+  border-radius: 8px;
+  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);
 }
 
 
@@ -2021,6 +2057,7 @@ onUnmounted(() => {
 
 @media (max-width: 768px) {
   
+
     .total-score-total-title {
       align-items: center;
       display: flex;
@@ -2305,8 +2342,10 @@ 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;
       /* 确保英雄排名列表隐藏滚动条 */
@@ -2504,4 +2543,20 @@ onUnmounted(() => {
     text-shadow: 0 0 20px rgba(255, 215, 0, 0.8) !important;
   }
 }
+/* ========== 移动端英雄榜滚动修复 ========== */
+@media (max-width: 768px) {
+  .individual-rankings-container .scroll-wrapper {
+    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>