feat(guess): 添加猜歌游戏胜利音效和优化样式

- 新增triumph.mp3作为胜利音效
- 优化guess.css中的动画效果和布局
- 调整guess.js中的音频播放逻辑和状态管理
- 更新guess.html页面结构和样式
- 修改song-request-station.js中的音频源路径
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-25 14:46:01 +08:00
parent b2969a9d37
commit bbdff26658
11 changed files with 372 additions and 289 deletions

View File

@@ -218,7 +218,6 @@
left: 997px;
}
.container .container-box .details {
flex: 1;
max-height: 500px;
margin-bottom: 40px;
width: 1200px;
@@ -228,6 +227,7 @@
z-index: 1;
padding: 3px;
overflow: hidden;
height: var(--base-height);
}
.container .container-box .details::after {
content: "";
@@ -268,6 +268,29 @@
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;
@@ -293,6 +316,7 @@
.container .container-box .details .start-box .start-right {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.container .container-box .details .start-box .start-right .suspect-text {
height: calc(var(--base-height) * 0.112);
@@ -306,7 +330,6 @@
margin-bottom: calc(var(--base-height) * 0.058);
}
.container .container-box .details .start-box .start-right .start-icon {
width: fit-content;
height: calc(var(--base-height) * 0.138);
cursor: pointer;
}
@@ -362,8 +385,8 @@
border-radius: 20px;
}
.container .container-box .details .answer-box .list .item .img-box.show {
background: linear-gradient(var(--rotate), #ff1d74, #e3820c 43%, #c28846);
animation: bg 2.5s infinite linear;
background: linear-gradient(var(--rotate), #db4743, #ffffff 43%, #c28846);
animation: bg 1.3s infinite linear;
}
@property --rotate {
syntax: "<angle>";