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

Compare commits

base: A1300399510:6915e54f5c02a28b989741773d5e840f73a81a80
Branches Tags
A1300399510:main A1300399510:fix/change-name A1300399510:master
...
compare: A1300399510:87acd9c156820aa9e5aefa9289c025bc16c6706e
Branches Tags
A1300399510:main A1300399510:fix/change-name A1300399510:master

3 Commits
6915e54f5c ... 87acd9c156

Author SHA1 Message Date
DESKTOP-RQ919RC\Pc
87acd9c156 no message 2025-09-25 14:51:19 +08:00
DESKTOP-RQ919RC\Pc
bbdff26658 feat(guess): 添加猜歌游戏胜利音效和优化样式 
- 新增triumph.mp3作为胜利音效
- 优化guess.css中的动画效果和布局
- 调整guess.js中的音频播放逻辑和状态管理
- 更新guess.html页面结构和样式
- 修改song-request-station.js中的音频源路径
 2025-09-25 14:46:01 +08:00
A1300399510
b2969a9d37 feat(guess): 添加猜歌游戏音频播放和结果反馈功能 
- 新增音频播放控制逻辑，支持播放、暂停和结束事件
- 添加答对/答错音效和视觉反馈
- 实现答题结果状态管理（正确、错误、胜利）
- 优化界面布局和响应式设计
- 新增返回首页功能
- 添加答案模式显示选项
 2025-09-24 19:10:33 +08:00
15 changed files with 671 additions and 154 deletions
Expand all files Collapse all files

95
2.html Normal file
View File

@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Item Appear Animation</title>
<link rel="stylesheet" href="styles.css" />
<style>
</style>
</head>
<body>
<div class="box" id="animationContainer">
<div class="wave-bg"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('animationContainer');
let containerWidth = container.offsetWidth;
let containerHeight = container.offsetHeight;
// 颜色数组
const colors = [
'#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA5A5', '#845EC2',
'#D65DB1', '#FF6F91', '#FF9671', '#FFC75F', '#F9F871',
'#00B894', '#0984E3', '#6C5CE7', '#A29BFE', '#FD79A8'
];
// 创建指定数量的动画元素
const createAnimatedItems = (count) => {
for (let i = 0; i < count; i++) {
setTimeout(() => {
createSingleItem();
}, i * 100); // 每个元素间隔100ms创建
}
};
// 创建单个动画元素
const createSingleItem = () => {
const item = document.createElement('div');
item.classList.add('animated-item');
// 随机大小
const size = Math.random() * 60 + 20; // 20-80px
item.style.width = `${size}px`;
item.style.height = `${size}px`;
// 随机颜色
const color = colors[Math.floor(Math.random() * colors.length)];
item.style.backgroundColor = color;
// 随机位置，确保在容器内
const left = Math.random() * (containerWidth - size);
const top = Math.random() * (containerHeight - size - 100) + 50; // 避开底部波浪
item.style.left = `${left}px`;
item.style.top = `${top}px`;
// 设置入场动画
const appearDuration = Math.random() * 0.5 + 0.5; // 0.5-1s
item.style.animation = `appear ${appearDuration}s forwards`;
container.appendChild(item);
// 入场动画完成后添加移动动画
setTimeout(() => {
const moveDuration = Math.random() * 2 + 3; // 3-5s
item.style.animation = `appear ${appearDuration}s forwards, move ${moveDuration}s ease-in-out infinite`;
}, appearDuration * 1000);
// 随机时间后移除元素并创建新元素
const lifeTime = Math.random() * 5 + 8; // 8-13s
setTimeout(() => {
// 退场动画
item.style.animation = `appear ${appearDuration}s reverse forwards`;
setTimeout(() => {
container.removeChild(item);
// 创建新元素替代
createSingleItem();
}, appearDuration * 1000);
}, lifeTime * 1000);
};
// 初始创建20个元素
createAnimatedItems(20);
// 窗口大小改变时重新计算容器尺寸
window.addEventListener('resize', () => {
containerWidth = container.offsetWidth;
containerHeight = container.offsetHeight;
});
});
</script>
</body>
</html>

59
guess.html
View File

@@ -15,8 +15,10 @@
}
</style>
</head>
<body>
<div class="container" id="guess" v-cloak>
<audio ref="audioPlayer" preload="none" @ended="audioEnd"></audio>
<div class="container-box mar1200">
<img class="logo" src="./static/img/logo.png" alt="" />
<div class="header">
@@ -39,42 +41,43 @@
<img class="shadow" src="./static/img/shadow.png" />
</div>
<div class="details">
<div class="details" ref="detailsRef" :style="{'--base-height': `${ detailsHeight }px`}">
<img class="ray-light ray-light-left" src="./static/img/guess/ray-light.svg" />
<img class="ray-light ray-light-right" src="./static/img/guess/ray-light.svg" />
<img class="bj-check" src="./static/img/guess/bj-check.svg" alt="" />
<img class="bj-mask" src="./static/img/guess/bj-mask.svg" alt="" />
<!-- <div class="fluctuate-box">
<div class="item" v-for="(item, index) in fluctuate" :key="index"><div class="item-item" v-for="(item, index) in item" :key="index"></div></div>
</div> -->
<img class="fluctuate-icon" src="./static/img/guess/fluctuate-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 class="start-right">
<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>
<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 class="img-box" :class="{'show': audiozSrc == song}">
<img class="img" :src="`./static/img/guess/treasure-${ songIndex + 1 }.png`" alt="" />
<img class="icon" v-if="audiozSrc == song" @click="stop" src="./static/img/pause-white-icon.svg" alt="" />
<img class="icon" v-else @click="play(song)" src="./static/img/play-white-icon.svg" alt="" />
</div>
<img class="select-me" src="./static/img/guess/select-me.png" alt="" @click="select(song, index)" />
<div class="" style="position: absolute; top: 0; left: 0; transform: translateY(-100%)">{{ isAnswer ? song : '' }}</div>
</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="masking reply flexflex" v-if="replyState">
<div class="hint-box flexacenter">
<div class="like">
<img class="icon" src="./static/img/guess/like-icon.svg" alt="" />
@@ -83,16 +86,32 @@
</div>
</div>
<div class="masking win flexflex">
<div class="masking win flexflex" v-if="winState">
<img class="gold-left" src="./static/img/guess/gold-left.png" alt="" />
<img class="gold-right" src="./static/img/guess/gold-right.png" alt="" />
<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 class="text">太棒了，连对三题，恭喜通关！</div>
</div>
<div class="index-btn">
<div class="index-btn" @click="backHome">
<img class="index-icon" src="./static/img/guess/index-icon.svg" alt="" />
返回首页
</div>
</div>
<div class="masking lose flexflex" v-if="loseState">
<div class="hint-box flexacenter">
<div class="regret">
<img class="icon" src="./static/img/guess/regret-icon.png" alt="" />
</div>
<div class="text">很遗憾没有答对…</div>
</div>
<div class="index-btn" @click="backHome">
<img class="index-icon" src="./static/img/guess/index-icon.svg" alt="" />
返回首页
</div>

1
song-request-station.html
View File

@@ -31,6 +31,7 @@
<img class="music-icon" src="./static/img/music-icon.svg" alt="" />
<img class="bj" src="./static/img/song-request-bj.svg" alt="" />
<img class="love-big" src="./static/img/love-big.svg" alt="" />
<img class="robot" src="./static/img/robot.png" alt="" />
<img class="music-score" src="./static/img/music-score.png" />
<img class="text" src="./static/img/song-request-text.svg" />
<img class="face" src="./static/img/smiling-face.png" />

212
static/css/guess.css
View File

@@ -3,6 +3,9 @@
padding: 0;
box-sizing: border-box;
}
:root {
--base-height: 500px;
}
.container {
width: 100%;
background-color: #333333;
@@ -215,7 +218,8 @@
left: 997px;
}
.container .container-box .details {
height: 500px;
max-height: 500px;
margin-bottom: 40px;
width: 1200px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.1);
@@ -223,6 +227,7 @@
z-index: 1;
padding: 3px;
overflow: hidden;
height: var(--base-height);
}
.container .container-box .details::after {
content: "";
@@ -263,11 +268,34 @@
left: 3px;
bottom: 3px;
}
.container .container-box .details .fluctuate-box {
position: absolute;
left: 10px;
top: 10px;
display: flex;
align-items: self-end;
z-index: 100;
}
.container .container-box .details .fluctuate-box .item {
height: 100%;
width: 12px;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-right: 2px;
}
.container .container-box .details .fluctuate-box .item .item-item {
width: 100%;
height: 5px;
border-radius: 2px;
background-color: #7d4bf8;
margin-top: 2px;
}
.container .container-box .details .fluctuate-icon {
width: 400px;
height: 86px;
position: absolute;
top: 293px;
bottom: 120px;
right: 0;
}
.container .container-box .details .start-box {
@@ -276,35 +304,33 @@
position: absolute;
top: 0;
left: 0;
display: flex;
}
.container .container-box .details .start-box .microphone {
width: 326px;
height: 326px;
position: absolute;
top: 93px;
left: 163px;
width: calc(var(--base-height) * 0.652);
height: calc(var(--base-height) * 0.652);
margin-top: calc(var(--base-height) * 0.186);
margin-left: 163px;
margin-right: 28px;
}
.container .container-box .details .start-box .suspect-text {
width: 493px;
height: 56px;
position: absolute;
top: 136px;
left: 517px;
.container .container-box .details .start-box .start-right {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.container .container-box .details .start-box .hint {
.container .container-box .details .start-box .start-right .suspect-text {
height: calc(var(--base-height) * 0.112);
margin-top: calc(var(--base-height) * 0.278);
margin-bottom: calc(var(--base-height) * 0.048);
}
.container .container-box .details .start-box .start-right .hint {
font-size: 18px;
color: #ffffff;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
position: absolute;
top: 215px;
left: 517px;
margin-bottom: calc(var(--base-height) * 0.058);
}
.container .container-box .details .start-box .start-icon {
width: 168px;
height: 69px;
position: absolute;
top: 268px;
left: 517px;
.container .container-box .details .start-box .start-right .start-icon {
height: calc(var(--base-height) * 0.138);
cursor: pointer;
}
.container .container-box .details .answer-box {
@@ -314,7 +340,7 @@
top: 0;
left: 0;
flex-direction: column;
padding-top: 39px;
padding-top: calc(var(--base-height) * 0.078);
align-items: center;
}
@keyframes fadeInUp {
@@ -326,9 +352,9 @@
}
}
.container .container-box .details .answer-box .figure {
width: 60px;
height: 60px;
margin-bottom: 25px;
width: calc(var(--base-height) * 0.12);
height: calc(var(--base-height) * 0.12);
margin-bottom: calc(var(--base-height) * 0.05);
}
.container .container-box .details .answer-box.answer-0 .list .item:not(:last-of-type) {
margin-right: 175px;
@@ -340,30 +366,72 @@
margin-right: 78px;
}
.container .container-box .details .answer-box .list {
margin-bottom: 13px;
margin-bottom: calc(var(--base-height) * 0.026);
}
.container .container-box .details .answer-box .list .item {
position: relative;
flex-direction: column;
align-items: center;
}
.container .container-box .details .answer-box .list .item .img {
width: 200px;
height: 212px;
margin-bottom: 40px;
.container .container-box .details .answer-box .list .item .img-box {
display: flex;
justify-content: center;
align-items: center;
width: calc(var(--base-height) * 0.412);
height: calc(var(--base-height) * 0.436);
margin-bottom: calc(var(--base-height) * 0.074);
position: relative;
z-index: 1;
border-radius: 20px;
}
.container .container-box .details .answer-box .list .item .icon {
.container .container-box .details .answer-box .list .item .img-box.show {
background: linear-gradient(var(--rotate), #db4743, #ffffff 43%, #c28846);
animation: bg 1.3s infinite linear;
}
@property --rotate {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes bg {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
.container .container-box .details .answer-box .list .item .img-box::after {
content: "";
z-index: -1;
width: calc(100% - 6px);
height: calc(100% - 6px);
position: absolute;
top: 164px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
background-color: #7d4bf8;
}
.container .container-box .details .answer-box .list .item .img-box .img {
width: calc(100% - 6px);
height: calc(100% - 6px);
position: relative;
z-index: 1;
}
.container .container-box .details .answer-box .list .item .img-box .icon {
position: absolute;
bottom: calc(var(--base-height) * 0.036);
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 30px;
width: calc(var(--base-height) * 0.06);
height: calc(var(--base-height) * 0.06);
cursor: pointer;
z-index: 1;
}
.container .container-box .details .answer-box .list .item .select-me {
width: 150px;
height: 64px;
width: calc(var(--base-height) * 0.3);
height: calc(var(--base-height) * 0.128);
cursor: pointer;
}
.container .container-box .details .answer-box .text {
@@ -382,13 +450,14 @@
background: linear-gradient(to bottom, rgba(51, 51, 51, 0.2), rgba(0, 0, 0, 0.898));
flex-direction: column;
align-items: center;
z-index: 2;
}
.container .container-box .details .masking .hint-box {
background-color: rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.25);
position: relative;
z-index: 1;
padding: 3px;
height: 64px;
height: calc(var(--base-height) * 0.128);
padding-left: 18px;
border-radius: 60px;
padding-right: 27px;
@@ -412,11 +481,22 @@
}
.container .container-box .details .masking .hint-box .like .icon {
position: absolute;
left: -3px;
top: -3px;
left: -10px;
top: -17px;
width: 92px;
height: 98px;
}
.container .container-box .details .masking .hint-box .regret {
position: relative;
width: calc(var(--base-height) * 0.23);
height: calc(var(--base-height) * 0.23);
}
.container .container-box .details .masking .hint-box .regret .icon {
width: 100%;
height: 100%;
position: absolute;
top: -15px;
}
.container .container-box .details .masking .hint-box .text {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
@@ -425,17 +505,7 @@
color: #ffffff;
text-overflow: ellipsis;
}
.container .container-box .details .reply {
justify-content: center;
}
.container .container-box .details .win {
justify-content: space-between;
}
.container .container-box .details .win .win-icon {
width: 209px;
height: 200px;
}
.container .container-box .details .win .index-btn {
.container .container-box .details .masking .index-btn {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
@@ -447,8 +517,9 @@
line-height: 40px;
z-index: 1;
position: relative;
cursor: pointer;
}
.container .container-box .details .win .index-btn .index-icon {
.container .container-box .details .masking .index-btn .index-icon {
width: 190px;
height: 40px;
position: absolute;
@@ -457,6 +528,39 @@
transform: translate(-50%, -50%);
z-index: -1;
}
.container .container-box .details .reply {
justify-content: center;
}
.container .container-box .details .win .gold-left {
width: 327px;
height: 381px;
position: absolute;
top: 55px;
left: 146px;
}
.container .container-box .details .win .gold-right {
width: 416px;
height: 375px;
position: absolute;
top: 37px;
left: 755px;
}
.container .container-box .details .win .win-icon {
width: calc(var(--base-height) * 0.418);
height: calc(var(--base-height) * 0.4);
margin-top: calc(var(--base-height) * 0.004);
margin-bottom: calc(var(--base-height) * 0.022);
}
.container .container-box .details .win .hint-box {
margin-bottom: calc(var(--base-height) * 0.318);
}
.container .container-box .details .lose {
padding-top: calc(var(--base-height) * 0.422);
}
.container .container-box .details .lose .hint-box {
margin-bottom: calc(var(--base-height) * 0.322);
padding-left: 15px;
}
/* 入场动画 */
.slide-right-enter-from {
/* 入场开始位置：向左偏移自身宽度 */

297
static/css/guess.less
View File

@@ -3,26 +3,36 @@
padding: 0;
box-sizing: border-box;
}
:root {
--base-height: 500px;
}
.container {
.flexflex {
display: flex;
}
.flexcenter {
display: flex;
justify-content: center;
align-items: center;
}
.flexjcenter {
display: flex;
justify-content: center;
}
.flexacenter {
display: flex;
align-items: center;
}
.flex1 {
flex: 1;
}
.flexcolumn {
display: flex;
flex-direction: column;
@@ -239,7 +249,10 @@
}
.details {
height: 500px;
// height: 500px;
// flex: 1;
max-height: 500px;
margin-bottom: 40px;
width: 1200px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.1);
@@ -247,6 +260,7 @@
z-index: 1;
padding: 3px;
overflow: hidden;
height: var(--base-height);
&::after {
content: "";
@@ -293,11 +307,38 @@
bottom: 3px;
}
.fluctuate-box {
position: absolute;
left: 10px;
top: 10px;
display: flex;
align-items: self-end;
z-index: 100;
.item {
height: 100%;
width: 12px;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-right: 2px;
.item-item {
width: 100%;
height: 5px;
border-radius: 2px;
background-color: #7d4bf8;
margin-top: 2px;
}
}
}
.fluctuate-icon {
width: 400px;
height: 86px;
position: absolute;
top: 293px;
// top: 293px;
bottom: 120px;
right: 0;
}
@@ -307,38 +348,47 @@
position: absolute;
top: 0;
left: 0;
display: flex;
.microphone {
width: 326px;
height: 326px;
position: absolute;
top: 93px;
left: 163px;
// width: 326px;
// height: 326px;
// margin-top: 93px;
width: calc(var(--base-height) * 0.652);
height: calc(var(--base-height) * 0.652);
margin-top: calc(var(--base-height) * 0.186);
margin-left: 163px;
margin-right: 28px;
}
.suspect-text {
width: 493px;
height: 56px;
position: absolute;
top: 136px;
left: 517px;
}
.start-right {
display: flex;
flex-direction: column;
align-items: flex-start;
.suspect-text {
// height: 56px;
// margin-top: 136px;
// margin-bottom: 23px;
height: calc(var(--base-height) * 0.112);
margin-top: calc(var(--base-height) * 0.278);
margin-bottom: calc(var(--base-height) * 0.048);
}
.hint {
font-size: 18px;
color: #ffffff;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
position: absolute;
top: 215px;
left: 517px;
}
.hint {
font-size: 18px;
color: #ffffff;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
// position: absolute;
// top: calc(var(--base-height) * 0.43);
// left: 517px;
margin-bottom: calc(var(--base-height) * 0.058);
}
.start-icon {
width: 168px;
height: 69px;
position: absolute;
top: 268px;
left: 517px;
cursor: pointer;
.start-icon {
// width: fit-content;
height: calc(var(--base-height) * 0.138);
cursor: pointer;
}
}
}
@@ -349,7 +399,8 @@
top: 0;
left: 0;
flex-direction: column;
padding-top: 39px;
// padding-top: 39px;
padding-top: calc(var(--base-height) * 0.078);
align-items: center;
// animation: fadeInUp 3s ease forwards;
@@ -364,9 +415,10 @@
}
.figure {
width: 60px;
height: 60px;
margin-bottom: 25px;
width: calc(var(--base-height) * 0.12);
height: calc(var(--base-height) * 0.12);
// margin-bottom: 22px;
margin-bottom: calc(var(--base-height) * 0.05);
}
&.answer-0 {
@@ -394,30 +446,88 @@
}
.list {
margin-bottom: 13px;
// margin-bottom: 13px;
margin-bottom: calc(var(--base-height) * 0.026);
.item {
position: relative;
flex-direction: column;
align-items: center;
.img {
width: 200px;
height: 212px;
margin-bottom: 40px;
}
.icon {
position: absolute;
top: 164px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 30px;
cursor: pointer;
.img-box {
display: flex;
justify-content: center;
align-items: center;
width: calc(var(--base-height) * 0.412);
height: calc(var(--base-height) * 0.436);
// width: 206px;
// height: 218px;
// margin-bottom: 37px;
margin-bottom: calc(var(--base-height) * 0.074);
position: relative;
z-index: 1;
border-radius: 20px;
&.show {
background: linear-gradient(var(--rotate), #db4743, #ffffff 43%, #c28846);
animation: bg 1.3s infinite linear;
}
@property --rotate {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes bg {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
&::after {
content: "";
z-index: -1;
width: calc(100% - 6px);
height: calc(100% - 6px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
background-color: #7d4bf8;
}
.img {
width: calc(100% - 6px);
height: calc(100% - 6px);
position: relative;
z-index: 1;
}
.icon {
position: absolute;
// top: 164px;
bottom: calc(var(--base-height) * 0.036);
left: 50%;
transform: translateX(-50%);
width: calc(var(--base-height) * 0.06);
height: calc(var(--base-height) * 0.06);
cursor: pointer;
z-index: 1;
}
}
.select-me {
width: 150px;
height: 64px;
// width: 150px;
// height: 64px;
width: calc(var(--base-height) * 0.3);
height: calc(var(--base-height) * 0.128);
cursor: pointer;
}
}
@@ -441,15 +551,19 @@
background: linear-gradient(to bottom, rgba(51, 51, 51, 0.2), rgba(0, 0, 0, 0.898));
flex-direction: column;
align-items: center;
z-index: 2;
.hint-box {
background-color: rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.25);
position: relative;
z-index: 1;
padding: 3px;
height: 64px;
// height: 64px;
height: calc(var(--base-height) * 0.128);
padding-left: 18px;
border-radius: 60px;
padding-right: 27px;
&::after {
content: "";
position: absolute;
@@ -470,13 +584,28 @@
.icon {
position: absolute;
left: -3px;
top: -3px;
left: -10px;
top: -17px;
width: 92px;
height: 98px;
}
}
.regret {
position: relative;
// width: 115px;
// height: 115px;
width: calc(var(--base-height) * 0.23);
height: calc(var(--base-height) * 0.23);
.icon {
width: 100%;
height: 100%;
position: absolute;
top: -15px;
}
}
.text {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
@@ -486,18 +615,6 @@
text-overflow: ellipsis;
}
}
}
.reply {
justify-content: center;
}
.win {
justify-content: space-between;
.win-icon {
width: 209px;
height: 200px;
}
.index-btn {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
@@ -511,6 +628,7 @@
line-height: 40px;
z-index: 1;
position: relative;
cursor: pointer;
.index-icon {
width: 190px;
@@ -523,6 +641,55 @@
}
}
}
.reply {
justify-content: center;
}
.win {
.gold-left {
width: 327px;
height: 381px;
position: absolute;
top: 55px;
left: 146px;
}
.gold-right {
width: 416px;
height: 375px;
position: absolute;
top: 37px;
left: 755px;
}
.win-icon {
// width: 209px;
// height: 200px;
// margin-top: 2px;
// margin-bottom: 11px;
width: calc(var(--base-height) * 0.418);
height: calc(var(--base-height) * 0.4);
margin-top: calc(var(--base-height) * 0.004);
margin-bottom: calc(var(--base-height) * 0.022);
}
.hint-box {
// margin-bottom: 159px;
margin-bottom: calc(var(--base-height) * 0.318);
}
}
.lose {
// padding-top: 211px;
padding-top: calc(var(--base-height) * 0.422);
.hint-box {
// margin-bottom: 161px;
margin-bottom: calc(var(--base-height) * 0.322);
padding-left: 15px;
}
}
}
}
}

6
static/css/index.css
View File

@@ -175,6 +175,8 @@
z-index: 10;
flex-direction: column;
align-items: center;
height: 448px;
justify-content: space-between;
}
.content .introduce .box .sidebar .pointer {
margin-bottom: 192px;
@@ -398,10 +400,14 @@
margin: 0 auto;
cursor: pointer;
}
.content .works .mv-box .item .media:hover .img {
transform: scale(1.05);
}
.content .works .mv-box .item .media .img {
width: 100%;
height: 100%;
border-radius: 10px;
transition: all 0.3s ease-in-out;
}
.content .works .mv-box .item .media .play {
position: absolute;

8
static/css/index.less
View File

@@ -202,6 +202,8 @@
z-index: 10;
flex-direction: column;
align-items: center;
height: 448px;
justify-content: space-between;
.pointer {
margin-bottom: 192px;
.item {
@@ -459,10 +461,16 @@
margin: 0 auto;
cursor: pointer;
&:hover .img {
transform: scale(1.05);
}
.img {
width: 100%;
height: 100%;
border-radius: 10px;
transition: all 0.3s ease-in-out;
}
.play {

BIN
static/img/guess/gold-left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 679 KiB

BIN
static/img/guess/gold-right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 408 KiB

BIN
static/img/works-title.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

143
static/js/guess.js
View File

@@ -2,45 +2,162 @@ const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue;
const search = createApp({
setup() {
const musicData = ref([
["A组 世界在转动.MP3", "A组《来吧，占领我的无私》"],
["A组 世界在转动.MP3", "A组《来吧，占领我的无私》.MP3"],
["B组 《远方》.MP3", "B组 大闹天宫.MP3", "B组 下一站旅行.MP3"],
["C组 旧唱片.MP3", "C组 梅雨季.MP3", "C组 尊重成长共赢.MP3", "C组《弥留》.MP3"],
]);
let step = ref(0); // null 是未开始 0 是第一题
let step = ref(null); // null 是未开始 0 是第一题
let detailsHeight = ref(500);
const detailsRef = ref(null);
let isAnswer = ref(false);
onMounted(() => {
console.log("init");
init();
// 获取可是窗口高度
const windowHeight = window.innerHeight;
detailsHeight.value = Math.max(windowHeight - 379 - 40, 350);
const searchParams = new URLSearchParams(window.location.search);
isAnswer.value = searchParams.has("a") ? true : false;
});
const init = () => {
// 将 musicData 里的 二维值打乱
musicData.value.forEach((item) => {
item.sort(() => Math.random() - 0.5);
});
console.log(musicData.value);
};
const begin = () => {
step.value = 0;
play(musicData.value[0][0]);
};
// 添加一个方法来切换到下一题
const nextStep = () => {
if (step.value < musicData.value.length - 1) {
step.value++;
step.value++;
play(musicData.value[step.value][0]);
};
const audioPlayer = ref(null);
const audiozSrc = ref("");
const play = (item) => {
clearTimeout(autoTimer);
audioPlayer.value.src = "./static/mp3/guess/" + item;
audioPlayer.value.play();
audiozSrc.value = item;
};
const stop = () => {
audioPlayer.value.pause();
audiozSrc.value = "";
};
const playSucceed = () => {
audioPlayer.value.src = "./static/mp3/guess/succeed.mp3";
audioPlayer.value.play();
};
const playTriumph = () => {
audioPlayer.value.src = "./static/mp3/guess/triumph.mp3";
audioPlayer.value.play();
};
const playLose = () => {
audioPlayer.value.src = "./static/mp3/guess/lose.mp3";
audioPlayer.value.play();
};
let autoTimer = null;
const audioEnd = (item) => {
const nextItem = findNextItem(audiozSrc.value);
console.log("nextItem", nextItem);
if (nextItem) autoTimer = setTimeout(() => play(nextItem), 500);
audiozSrc.value = "";
};
const select = (item, index) => {
stop();
if (item.indexOf("《") !== -1) {
if (step.value == musicData.value.length - 1) {
playTriumph();
winState.value = true;
} else {
playSucceed();
replyState.value = true;
autoSkip();
}
} else {
// 所有问题都回答完毕，可以重置或显示结果
// step.value = null;
loseState.value = true;
playLose();
// 开启一个定时器
loseTimer = setTimeout(() => backHome(), 5000);
}
};
const play = (item) => {
console.log("item", item);
let replyState = ref(false);
let winState = ref(false);
let loseState = ref(false);
let loseTimer = null;
const autoSkip = () => {
setTimeout(() => {
replyState.value = false;
nextStep();
}, 2000);
};
return { play, step, begin, musicData, nextStep };
const backHome = () => {
clearTimeout(loseTimer);
init();
step.value = null;
replyState.value = false;
winState.value = false;
loseState.value = false;
};
const findNextItem = (str) => {
// 遍历二维数组的每一项
for (let i = 0; i < musicData.value.length; i++) {
const currentArray = musicData.value[i];
// 在当前数组中查找目标字符串的索引
const index = currentArray.indexOf(str);
// 如果找到且不是数组中的最后一个元素，则返回null
if (index !== -1) {
// 检查是否有下一个元素
if (index < currentArray.length - 1) {
return currentArray[index + 1];
} else {
return "";
}
}
}
// 如果在整个二维数组中都找不到该字符串
return "";
};
let fluctuate = ref([]);
onMounted(() => {
// setInterval(() => {
// randomFluctuate();
// }, 150);
});
const randomFluctuate = () => {
fluctuate.value = []
for (let i = 0; i < 30; i++) {
fluctuate.value.push(Math.floor(Math.random() * 10) + 1);
}
console.log("fluctuate", fluctuate.value);
};
return { fluctuate, isAnswer, detailsHeight, detailsRef, audioEnd, playSucceed, stop, audiozSrc, audioPlayer, backHome, select, loseState, winState, replyState, play, step, begin, musicData, nextStep };
},
}).mount("#guess");

4
static/js/song-request-station.js
View File

@@ -525,8 +525,8 @@ const search = createApp({
setTimeout(() => {
console.log("item", item);
if (audio?.src != item.path) audio.src = item.path;
// audio.src = "https://app.gter.net/image/miniApp/mp3/1.mp3";
audio.src = "/static/mp3/1.MP3";
audio.src = "https://app.gter.net/image/miniApp/mp3/1.mp3";
// audio.src = "/static/mp3/1.MP3";
audio.play().then(() => (playData.value = { ...item, state: true }));
}, 500);
};

BIN
static/mp3/guess/lose.mp3 Normal file
View File

Binary file not shown.

BIN
static/mp3/guess/succeed.mp3 Normal file
View File

Binary file not shown.

BIN
static/mp3/guess/triumph.mp3 Normal file
View File

Binary file not shown.