A1300399510/PC-official
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(guess): 添加猜歌游戏页面及功能实现

Browse Source 
- 新增猜歌游戏HTML页面结构
- 实现Vue.js猜歌游戏逻辑
- 添加游戏相关图片资源
- 完善CSS样式和动画效果
- 添加音乐数据JSON文件
- 更新歌曲请求站点的JS逻辑
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-23 18:30:02 +08:00
parent b40e69dac2
commit 6915e54f5c
27 changed files with 1396 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
guess.html
View File

@@ -16,7 +16,7 @@
</style>
</head>
<body>
<div class="container">
<div class="container" id="guess" v-cloak>
<div class="container-box mar1200">
<img class="logo" src="./static/img/logo.png" alt="" />
<div class="header">
@@ -45,18 +45,61 @@
<img class="bj-check" src="./static/img/guess/bj-check.svg" alt="" />
<img class="bj-mask" src="./static/img/guess/bj-mask.svg" alt="" />
<img class="fluctuate-icon" src="./static/img/guess/fluctuate-icon.png" alt="" />
<div class="start-box">
<img class="microphone" src="./static/img/guess/microphone.png" alt="" />
<img class="suspect-text" src="./static/img/guess/suspect-text.png" alt="" />
<div class="hint">连对3题有奖品哦，快来挑战吧！</div>
<img class="start-icon" src="./static/img/guess/start-icon.png" alt="" />
<transition-group name="slide-right" tag="div" class="transition-container">
<div class="start-box" v-show="step == null" key="start">
<img class="microphone" src="./static/img/guess/microphone.png" alt="" />
<img class="suspect-text" src="./static/img/guess/suspect-text.png" alt="" />
<div class="hint">连对3题有奖品哦，快来挑战吧！</div>
<img class="start-icon" @click="begin" src="./static/img/guess/start-icon.png" alt="" />
</div>
<div class="answer-box flexacenter" :class="[`answer-${ index }`]" v-for="(item, index) in musicData" v-show="step == index" :key="'answer-' + index">
<img class="figure" :src="`./static/img/guess/figure-${ index + 1 }.png`" alt="" />
<div class="list flexflex">
<div class="item flexflex" v-for="(song, songIndex) in item" :key="'song-' + index + '-' + songIndex">
<img class="img" :src="`./static/img/guess/treasure-${ songIndex + 1 }.png`" alt="" />
<img class="icon" @click="play(song)" src="./static/img/play-white-icon.svg" alt="" />
<img class="select-me" src="./static/img/guess/select-me.png" alt="" />
</div>
</div>
<div class="text">请问哪首歌是真人唱的？</div>
</div>
</transition-group>
<!-- <div class="masking reply flexflex">
<div class="hint-box flexacenter">
<div class="like">
<img class="icon" src="./static/img/guess/like-icon.svg" alt="" />
</div>
<div class="text">恭喜答对！马上进入下一题…</div>
</div>
</div> -->
<div class="masking reply flexflex" v-if="false">
<div class="hint-box flexacenter">
<div class="like">
<img class="icon" src="./static/img/guess/like-icon.svg" alt="" />
</div>
<div class="text">恭喜答对！马上进入下一题…</div>
</div>
</div>
<div class="answer-box answer-one">
<img class="figure" src="./static/img/guess/figure-one.png" alt="" />
<div class="topic-list"></div>
<div class="masking win flexflex">
<img class="win-icon" src="./static/img/guess/win-icon.png" alt="" />
<div class="hint-box flexacenter">
<div class="like">
<img class="icon" src="./static/img/guess/like-icon.svg" alt="" />
</div>
<div class="text">恭喜答对！马上进入下一题…</div>
</div>
<div class="index-btn">
<img class="index-icon" src="./static/img/guess/index-icon.svg" alt="" />
返回首页
</div>
</div>
</div>
</div>
</div>
<script src="./static/js/guess.js"></script>
</body>
</html>