仅剩获奖列表后端接口

src/views/choujiang/index.vue

@@ -9,7 +9,7 @@
       @reset="handleReset"
       @export="handleExport"
     />
-    <MusicPlayer />
+    <MusicPlayer ref="musicPlayerRef" />
     <Mascot />
 
     <!-- 透明弹窗 -->
@@ -77,6 +77,7 @@ watch(isDisabled, (newVal, oldVal) => {
 // 数据与抽奖主流程
 const dataManager = useDataManager();
 let lottery3DRef = ref(null);
+let musicPlayerRef = ref(null);
 const lotteryEngine = useLotteryEngine(dataManager, {
   resetCard: (...args) => lottery3DRef.value?.resetCard?.(...args),
   addHighlight: (...args) => lottery3DRef.value?.addHighlight?.(...args),
@@ -92,6 +93,14 @@ onMounted(async () => {
 
   // 将 dataManager 挂载到 window 对象，供子组件使用
   window.dataManager = dataManager;
+  
+  // 延迟一点时间确保音乐播放器组件已经加载完成
+  setTimeout(() => {
+    if (musicPlayerRef.value && !musicPlayerRef.value.isPlaying()) {
+      // 触发音乐播放
+      musicPlayerRef.value.toggleMusic();
+    }
+  }, 1000);
 });
 
 function showLotteryQipao() {

src/views/choujiang/lottery/MusicPlayer.vue

@@ -6,8 +6,8 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
-const musicSrc = '/src/assets/lottery/music.mp3';
+import { ref, onMounted } from 'vue';
+const musicSrc = '/src/assets/music.mp3';
 const audioRef = ref(null);
 const playing = ref(false);
 
@@ -21,10 +21,36 @@ function toggleMusic() {
     playing.value = false;
   }
 }
+
+// 检查是否正在播放
+function isPlaying() {
+  return playing.value;
+}
+
+// 自动播放音乐
+onMounted(() => {
+  // 延迟一点时间确保音频元素已经加载
+  setTimeout(() => {
+    if (audioRef.value) {
+      audioRef.value.play().then(() => {
+        playing.value = true;
+      }).catch((error) => {
+        console.log('自动播放失败，可能需要用户交互:', error);
+      });
+    }
+  }, 500);
+});
+
+// 暴露方法给父组件
+defineExpose({
+  toggleMusic,
+  isPlaying
+});
 </script>
 
 <style scoped>
 .music-box {
+  
   position: absolute;
   top: 24px;
   right: 32px;
@@ -42,7 +68,7 @@ function toggleMusic() {
 }
 .music-icon.playing {
   animation: rotate 1.2s linear infinite;
-  box-shadow: 0 0 12px #0078ff;
+  /* box-shadow: 0 0 12px #0078ff; */
 }
 @keyframes rotate {
   100% { transform: rotate(360deg); }

src/views/choujiang/lottery/PrizePanel.vue

@@ -505,7 +505,7 @@ function getProgressPercent(prize) {
 }
 .winner-btn {
   background: rgba(255, 210, 131, 0.8);
-  color: #fff;
+  color: #D5291F;
   border: #fff;
   border-radius: 8px;
   padding: 15px 79px;
@@ -532,10 +532,12 @@ function getProgressPercent(prize) {
   padding-top: 12px;
       padding-left: 25px;
     padding-right: 25px;
+    padding-bottom: 10px;
   min-width: 280px;
   max-width: 90vw;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
   position: relative;
+  margin-left: 10px;
 }
 .winner-modal-title {
   font-size: 22px;