liuxiang/zhaoma
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
yixu
2025-12-24 17:14:48 +08:00
parent 9f8b1db59b
commit 6a19821d73
20 changed files with 134 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/components/HomePage.vue
View File

@@ -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;
}