update

src/components/HomePage.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, watch, onMounted } from "vue"
-import bgm from "../assets/audio/bgm.mp3"
+import bgm from "../assets/audio/zhaoma_bgm.mp3"
 import globalToastEvent, { ToastType } from '../globalToastEvent';
 import { globalStore } from "../globalstore.js";
 import Login from '../components/Login.vue'
@@ -452,9 +452,9 @@ const handleAddress = (id) => {
         <div v-if="isMusicOn" key="on" class="scene-item item-4">
           <img src="../assets/images/new/music.png" alt="音乐开">
         </div>
-        <!-- <div v-else key="off" class="scene-item item-5">
-          <img src="../assets/images/music-off.png" alt="音乐关">
-        </div> -->
+        <div v-else key="off" class="scene-item item-5">
+          <img src="../assets/images/new/music-off.png" alt="音乐关">
+        </div>
       </div>
       <div class="scene-item item-6" @click="handleRule">
         <img src="../assets/images/new/rule.png" alt="规则">
@@ -479,6 +479,38 @@ const handleAddress = (id) => {
         <img src="../assets/images/new/ma4.png" alt="马4">
       </div>
 
+      <div class="scene-item item-jiu1">
+        <img src="../assets/images/new/jiuping1.png" alt="酒瓶1">
+      </div>
+
+      <div class="scene-item item-jiu2">
+        <img src="../assets/images/new/jiuping2.png" alt="酒瓶2">
+      </div>
+
+      <div class="scene-item item-xique1">
+        <img src="../assets/images/new/xique1.png" alt="喜鹊1">
+      </div>
+
+      <div class="scene-item item-xique2">
+        <img src="../assets/images/new/xique2.png" alt="喜鹊2">
+      </div>
+
+      <div class="scene-item item-sidai">
+        <img src="../assets/images/new/sidai.png" alt="丝带">
+      </div>
+
+      <div class="scene-item item-lihe">
+        <img src="../assets/images/new/lihe.png" alt="礼盒">
+      </div>
+
+      <div class="scene-item item-hulu">
+        <img src="../assets/images/new/hulu.png" alt="葫芦">
+      </div>
+
+      <div class="scene-item item-taozi">
+        <img src="../assets/images/new/taozi.png" alt="桃子">
+      </div>
+
       <div class="scene-item item-8" @click="popupMore">
         <img src="../assets/images/new/learn-more.png" alt="更多金喜">
       </div>
@@ -607,6 +639,53 @@ const handleAddress = (id) => {
   right: 6.6vw;
 }
 
+.item-jiu1 {
+  width: 49vw;
+  top: 63vw;
+  left: 0;
+}
+.item-jiu2 {
+  width: 49vw;
+  top: 63vw;
+  right: 0;
+}
+
+.item-xique1 {
+  width: 31vw;
+  top: 78vw;
+  left: 39vw;
+}
+
+.item-xique2 {
+  width: 37vw;
+  top: 77vw;
+  right: 28vw;
+}
+
+.item-sidai {
+  width: 31vw;
+  top: 79vw;
+  left: 39vw;
+}
+
+.item-lihe {
+  width: 42vw;
+  top: 85vw;
+  left: 7vw;
+}
+
+.item-hulu {
+  width: 30vw;
+  top: 99vw;
+  left: 21vw;
+}
+
+.item-taozi {
+  width: 25vw;
+  top: 110vw;
+  left: 10vw;
+}
+
 /* 通用“奔跑”动画：轻微上下＋前后＋缩放 */
 @keyframes horse-gallop {
   0% {
@@ -650,7 +729,48 @@ const handleAddress = (id) => {
 }
 
 .scene-item.item-ma4 img {
-  animation: horse-gallop 1.15s infinite ease-in-out;
+  animation: horse-gallop 1.65s infinite ease-in-out;
+  animation-delay: -0.9s;
+  transform-origin: center bottom;
+}
+
+.scene-item.item-xique1 img {
+  animation: horse-gallop 1.7s infinite ease-in-out;
+  animation-delay: -0.9s;
+  transform-origin: center bottom;
+}
+.scene-item.item-xique2 img {
+  animation: horse-gallop 1.7s infinite ease-in-out;
+  animation-delay: -0.9s;
+  transform-origin: center bottom;
+}
+.scene-item.item-sidai img {
+  animation: horse-gallop 2.6s infinite ease-in-out;
+  animation-delay: -0.9s;
+  transform-origin: center bottom;
+}
+.scene-item.item-jiu1 img {
+  animation: horse-gallop 2.4s infinite ease-in-out;
+  animation-delay: -0.9s;
+  transform-origin: center bottom;
+}
+.scene-item.item-jiu2 img {
+  animation: horse-gallop 2.2s infinite ease-in-out;
+  animation-delay: -0.9s;
+  transform-origin: center bottom;
+}
+.scene-item.item-lihe img {
+  animation: horse-gallop 2s infinite ease-in-out;
+  animation-delay: -0.9s;
+  transform-origin: center bottom;
+}
+.scene-item.item-taozi img {
+  animation: horse-gallop 1.5s infinite ease-in-out;
+  animation-delay: -0.9s;
+  transform-origin: center bottom;
+}
+.scene-item.item-hulu img {
+  animation: horse-gallop 1.8s infinite ease-in-out;
   animation-delay: -0.9s;
   transform-origin: center bottom;
 }
@@ -716,8 +836,8 @@ const handleAddress = (id) => {
 
 .item-5 {
   width: 11vw;
-  top: 1.5%;
-  right: 1.5%;
+  top: 8vw;
+  right: 4vw;
   animation-delay: 0s;
 }
 

src/components/Lottery.vue

@@ -91,11 +91,14 @@ const closeThis = () => {
   emit("close")
 }
 
+import noPrizeBg from '../assets/images/new/NO-prize-bg.png';
+import prizeBg from '../assets/images/new/lottery-bg.png';
+
 const prizeBackgroundImg = computed(() => {
   if (activePrizeData.value.prize_code === 'NO') {
-    return `background-image: url("../assets/images/new/NO-prize-bg.png")`
+    return `background-image: url("${noPrizeBg}")`
   } else {
-    return `background-image: url("../assets/images/new/lottery-bg.png")`
+    return `background-image: url("${prizeBg}")`
   }
 })
 
@@ -436,7 +439,6 @@ onUnmounted(() => {
 }
 
 .lottery-image.USER_NO {
-  background-size: 60% auto;
   background-position: center center;
   background-image: url("../assets/images/new/USER_NO.png");
 }

src/components/Rule.vue

@@ -27,7 +27,7 @@ const emit = defineEmits(['close'])
   position: relative;
   width: 100%;
   height: 182vw;
-  background-image: url("../assets/images/rule-bg.webp");
+  background-image: url("../assets/images/new/rule-bg.png");
   background-repeat: no-repeat;
   background-size: 100%;
 }