chore: 奖金设置部分已经调整到偏左上角位置

src/views/BattleRanking.vue

@@ -166,7 +166,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
+import { ref, onMounted, onUnmounted, watch, computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 import {
   individualRankings as importedIndividualRankings,
@@ -411,14 +411,26 @@ let countdownInterval = null;
 let audioContext = null;
 const isPlayingSound = ref(false);
 
-import { reactive } from 'vue';
-
 // 战鼓位置状态
 const drumsPosition = ref({ x: 20, y: 20 });
 // 倒计时位置状态已移除，直接在模板中使用固定位置
 // 奖金设置模块位置状态 - 使用reactive存储实际定位值
-// 默认在屏幕右下角
 const bonusPosition = reactive({ x: 'auto', y: 'auto' });
+
+// 初始化奖金模块位置
+onMounted(() => {
+  // 等待DOM渲染完成后再设置位置
+  setTimeout(() => {
+    const bonusElement = document.querySelector('.bonus-section');
+    if (bonusElement) {
+      // 应用默认位置（左上角）
+      bonusElement.style.top = '260px';
+      bonusElement.style.left = '240px';
+      bonusElement.style.right = 'auto';
+      bonusElement.style.bottom = 'auto';
+    }
+  }, 100);
+});
 let isDragging = false;
 let isBonusDragging = false;
 let dragOffset = { x: 0, y: 0 };
@@ -908,12 +920,12 @@ onUnmounted(() => {
 }
 
 .bonus-section {
-  position: 'fixed';
+  position: fixed;
-  right: '20px'; 
+  top: 20px;
-  bottom: '20px'; 
+  left: 20px;
-  zIndex: 100; 
+  z-index: 100;
-  cursor: 'move';
+  cursor: move;
-  transition: 'transform 0.1s ease-out' ;
+  transition: transform 0.2s ease;
 }
 
 /* 奖金图片容器样式 - Flex布局居中且保持一行 */
@@ -965,15 +977,9 @@ onUnmounted(() => {
     top: 0 !important;
     bottom: 0 !important;
   }
-  /* 奖金模块响应式调整 */
+  /* 保留响应式中的padding设置，但移除其他可能冲突的位置样式 */
   .bonus-section {
-    position: fixed;
-    bottom: 10px;
-    right: 10px;
     padding: 10px;
-    z-index: 100;
-    cursor: move;
-    transition: transform 0.2s ease;
   }
   
   .bonus-awards-container {
@@ -1270,16 +1276,16 @@ onUnmounted(() => {
 /* 奖金设置部分（浮动布局） */
 .bonus-section {
   position: fixed;
-  bottom: 20px;
+  top: 20px;
-  right: 20px;
+  left: 20px;
+  z-index: 100;
+  cursor: move;
+  transition: transform 0.2s ease;
   padding: 15px;
   border-radius: 20px;
-  z-index: 1000;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(250, 245, 240, 0.95));
-  cursor: move;
   user-select: none;
-  transition: all 0.3s ease;
 }
 
 .bonus-section h2 {