leaderborad decoration

src/components/AniEle.vue

@@ -7,7 +7,6 @@
 import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 import JSZip from 'jszip'
 
-// Props (接口定义不变)
 interface AnimationRule {
     name: string
     frame: number

src/pages/Game.vue

@@ -12,6 +12,7 @@ import Quiz from './Game/Quiz.vue';
 defineExpose({
     init: () => {
         shootNotice.value?.jumpTo('蓄力');
+        sunEle.value?.jumpTo('起飞前');
     }
 })
 
@@ -429,6 +430,7 @@ async function gameEnd() {
     await wait(1800)
 
     showEndAni.value = true;
+
     sunEndEle.value?.jumpTo('进入');
 
 }
@@ -477,6 +479,15 @@ async function finishCollect() {
     }).finished
 
     await sunEndEle.value?.jumpToSoftly('落下进蹦床');
+
+    document.querySelector('.bg-fireworks')?.animate([
+        { opacity: 1 },
+        { opacity: 0 },
+    ], {
+        duration: 300,
+        easing: 'ease-in-out',
+        fill: 'forwards',
+    }).finished
     await document.querySelector('.bar-container')?.animate([
         { transform: 'translateY(300%)' }], {
         duration: 500,
@@ -563,7 +574,7 @@ window.addEventListener('keydown', (e) => {
                     { name: '蓄力飞', frame: 181, loop: 1, pauseAfter: false, duration: 33 },
                     { name: '天上飞', frame: 90, loop: 0, pauseAfter: true, duration: 33 },
                     { name: '落下', frame: 382, loop: 1, pauseAfter: false, duration: 33 },
-                ]" style="width: 100%; height: auto;" />
+                ]" style="width: 100%; height: auto;" :auto-play="false" />
             </div>
         </div>
 
@@ -590,7 +601,7 @@ window.addEventListener('keydown', (e) => {
         <div class="sun-ani-end-wrapper abs" style="pointer-events: none; inset: 0; width: 100%;z-index: 2;"
             :style="{ display: showEndAni ? 'block' : 'none' }">
 
-            <AniEle :url="assets.ani.后段效果" ref="sun-ani-end" class="sun-ani-end" :height="2462" :width="1179" :rules="[
+            <AniEle :url="assets.ani.后段效果" :auto-play="false" ref="sun-ani-end" class="sun-ani-end" :height="2462" :width="1179" :rules="[
                 // 0 - 97
                 { name: '进入', frame: 98, loop: 1, pauseAfter: false, duration: 33 },
                 // 98 - 129

src/pages/Game/ScoreBoard.vue

@@ -13,7 +13,11 @@ defineProps<{
 
 <template>
     <div class="scoreboard">
+        <img src="../../assets/game/烟花.webp" alt="" class="decoration bg-fireworks"
+            style="position: absolute;width: 60%;left: 20%;top: -8%;z-index: 1;">
         <div class="bar-container">
+            <img src="../../assets/game/排行榜太阳.webp" class="decoration bg-sun" style="right: 8%;top: 33%;" alt="">
+            <img src="../../assets/game/排行榜太阳.webp" class="decoration bg-sun" style="left: 17%;top: 9%;" alt="">
             <div class="bar" v-for="(item, index) in [leaderBoard[1], leaderBoard[0], leaderBoard[2]]" :key="index"
                 :class="{
                     'first': index === 1, 'second': index === 0, 'third': index === 2
@@ -25,6 +29,7 @@ defineProps<{
             </div>
         </div>
         <div class="lines">
+            <img src="../../assets/game/排行榜太阳.webp" class="decoration bg-sun" style="left: 37%;top: -32%; z-index: 1;" alt="">
             <div class="line" v-for="(item, index) in leaderBoard.slice(3, 9)" :key="index"
                 :style="{ animationDelay: index * 100 + 400 + 'ms' }">
                 <div class="rank">{{ index + 4 }}</div>
@@ -37,6 +42,18 @@ defineProps<{
 </template>
 
 <style lang="scss" scoped>
+.decoration {
+    scale: 0;
+    animation: scale-in 0.2s ease-out forwards;
+    animation-delay: 0.5s;
+}
+
+
+.bg-sun {
+    position: absolute;
+    z-index: -1;
+    width: 17vw;
+}
 
 .scoreboard {
     position: absolute;
@@ -44,6 +61,7 @@ defineProps<{
     width: 100%;
 
     .bar-container {
+        position: relative;
         width: 100%;
         justify-content: center;
         align-items: center;