init
This commit is contained in:
yixu
242
src/components/HomePage.vue
Normal file
242
src/components/HomePage.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted } from "vue"
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Request, Storage } from "../libs/utils"
|
||||
import faceFamily from "../assets/audio/faceFamily.mp3"
|
||||
defineProps({
|
||||
show: true
|
||||
})
|
||||
const isMusicOn = ref(false);
|
||||
const audioElement = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
// 创建音频
|
||||
audioElement.value = new Audio(faceFamily);
|
||||
// 尝试自动播放
|
||||
tryAutoPlay();
|
||||
})
|
||||
|
||||
// 尝试自动播放
|
||||
const tryAutoPlay = () => {
|
||||
// 先加载音频
|
||||
audioElement.value.load();
|
||||
// 尝试播放
|
||||
const playPromise = audioElement.value.play();
|
||||
if (playPromise !== undefined) {
|
||||
playPromise.then(() => {
|
||||
// 自动播放成功
|
||||
isMusicOn.value = true;
|
||||
console.log("自动播放成功");
|
||||
})
|
||||
.catch(error => {
|
||||
// 自动播放被阻止
|
||||
console.log("自动播放被阻止，需要用户交互:", error);
|
||||
isMusicOn.value = false;
|
||||
audioElement.value.pause();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 播放/暂停切换
|
||||
const toggleMusicState = () => {
|
||||
isMusicOn.value = !isMusicOn.value;
|
||||
if (!isMusicOn.value) {
|
||||
audioElement.value.pause();
|
||||
} else {
|
||||
audioElement.value.play().catch(error => {
|
||||
console.log("播放失败:", error);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
const navigateSelectTemplatePage = () => {
|
||||
router.push({
|
||||
name: 'selectTemplateV2'
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :show="show">
|
||||
<div class="home-wrapper">
|
||||
<div class="scene-item item-1">
|
||||
<img src="../assets/images/lottery.png" alt="抽奖">
|
||||
<div class="lottery-main">
|
||||
<p class="lottery-value">3</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scene-item item-2" @click="navigateSelectTemplatePage">
|
||||
<img src="../assets/images/join.png" alt="立即参与">
|
||||
<div class="join-main">
|
||||
<p class="join-value">2</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scene-item item-3" @click="navigateTodoList">
|
||||
<img src="../assets/images/task.png" alt="任务">
|
||||
</div>
|
||||
|
||||
<div @click="toggleMusicState">
|
||||
<div v-if="isMusicOn" key="on" class="scene-item item-4">
|
||||
<img src="../assets/images/music-on.png" alt="音乐开">
|
||||
</div>
|
||||
<div v-else key="off" class="scene-item item-5">
|
||||
<img src="../assets/images/music-off.png" alt="音乐关">
|
||||
</div>
|
||||
</div>
|
||||
<div class="scene-item item-6">
|
||||
<img src="../assets/images/rule.png" alt="规则">
|
||||
</div>
|
||||
<div class="scene-item item-7">
|
||||
<img src="../assets/images/award.png" alt="奖励">
|
||||
</div>
|
||||
<div class="scene-item item-8">
|
||||
<img src="../assets/images/my-photo.png" alt="我的照片">
|
||||
</div>
|
||||
<div class="scene-item item-9">
|
||||
<img src="../assets/images/photos.png" alt="照片广场">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home-wrapper {
|
||||
width: 100%;
|
||||
height: 92vh;
|
||||
background-image: url('../assets/images/home-bg.png');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
min-height: -webkit-fill-available;
|
||||
}
|
||||
|
||||
.scene-item {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
transition: all 0.4s ease;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
animation: float 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.scene-item:hover {
|
||||
transform: scale(1.05);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.scene-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.item-1 {
|
||||
width: 90px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.lottery-main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 18px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 28px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.lottery-main .lottery-value {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.item-2 {
|
||||
width: 200px;
|
||||
bottom: 0;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.join-main {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 8px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.join-main .join-value {
|
||||
margin: 0;
|
||||
color: white;
|
||||
text-stroke: 4px #ff0000;
|
||||
-webkit-text-stroke: 1px #ff0000;
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.item-3 {
|
||||
width: 90px;
|
||||
bottom: 0;
|
||||
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%;
|
||||
right: 1%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
@keyframes loginloading {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user