更新周边功能

src/components/HomePage.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed, watch, onMounted } from "vue"
 import { useRouter } from 'vue-router'
+import globalToastEvent, { ToastType } from '../globalToastEvent';
 import { Request, Storage } from "../libs/utils"
 import faceFamily from "../assets/audio/faceFamily.mp3"
 defineProps({
@@ -28,12 +29,12 @@ const tryAutoPlay = () => {
       isMusicOn.value = true;
       console.log("自动播放成功");
     })
-    .catch(error => {
-      // 自动播放被阻止
-      console.log("自动播放被阻止，需要用户交互:", error);
-      isMusicOn.value = false;
-      audioElement.value.pause();
-    });
+      .catch(error => {
+        // 自动播放被阻止
+        console.log("自动播放被阻止，需要用户交互:", error);
+        isMusicOn.value = false;
+        audioElement.value.pause();
+      });
   }
 };
 
@@ -41,7 +42,7 @@ const tryAutoPlay = () => {
 const toggleMusicState = () => {
   isMusicOn.value = !isMusicOn.value;
   if (!isMusicOn.value) {
-      audioElement.value.pause();
+    audioElement.value.pause();
   } else {
     audioElement.value.play().catch(error => {
       console.log("播放失败:", error);
@@ -56,12 +57,25 @@ const navigateSelectTemplatePage = () => {
   })
 }
 
+const navigateTodoList = () => {
+  globalToastEvent.emit(ToastType.SHOW_TODO)
+}
+const handlePrizeList = async () => {
+  globalToastEvent.emit(ToastType.SHOW_PRIZELIST)
+}
+const handleRule = () => {
+  globalToastEvent.emit(ToastType.SHOW_RULE)
+}
+const handleLottery = () => {
+  globalToastEvent.emit(ToastType.SHOW_LOTTERY)
+}
+
 </script>
 
 <template>
   <div :show="show">
     <div class="home-wrapper">
-      <div class="scene-item item-1">
+      <div class="scene-item item-1" @click="handleLottery">
         <img src="../assets/images/lottery.png" alt="抽奖">
         <div class="lottery-main">
           <p class="lottery-value">3</p>
@@ -85,10 +99,10 @@ const navigateSelectTemplatePage = () => {
           <img src="../assets/images/music-off.png" alt="音乐关">
         </div>
       </div>
-      <div class="scene-item item-6">
+      <div class="scene-item item-6" @click="handleRule">
         <img src="../assets/images/rule.png" alt="规则">
       </div>
-      <div class="scene-item item-7">
+      <div class="scene-item item-7" @click="handlePrizeList">
         <img src="../assets/images/award.png" alt="奖励">
       </div>
       <div class="scene-item item-8">
@@ -193,36 +207,42 @@ const navigateSelectTemplatePage = () => {
   right: 0;
   animation-delay: 0s;
 }
+
 .item-4 {
   width: 46px;
   top: 1.5%;
   right: 1.5%;
   animation-delay: 0s;
 }
+
 .item-5 {
   width: 46px;
   top: 1.5%;
   right: 1.5%;
   animation-delay: 0s;
 }
+
 .item-6 {
   width: 62px;
   top: 8%;
   right: 0;
   animation-delay: 0s;
 }
+
 .item-7 {
   width: 62px;
   top: 13.5%;
   right: 0;
   animation-delay: 0s;
 }
+
 .item-8 {
   width: 50px;
   bottom: 32%;
   right: 1%;
   animation-delay: 0s;
 }
+
 .item-9 {
   width: 50px;
   bottom: 23%;