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

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

Browse Source 
- 新增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
Download Patch File Download Diff File Expand all files Collapse all files

31
static/css/guess.css
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>";

46
static/css/guess.less
View File

@@ -250,7 +250,7 @@
.details {
// height: 500px;
flex: 1;
// flex: 1;
max-height: 500px;
margin-bottom: 40px;
width: 1200px;
@@ -260,6 +260,7 @@
z-index: 1;
padding: 3px;
overflow: hidden;
height: var(--base-height);
&::after {
content: "";
@@ -306,6 +307,32 @@
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;
@@ -323,7 +350,6 @@
left: 0;
display: flex;
.microphone {
// width: 326px;
// height: 326px;
@@ -338,7 +364,7 @@
.start-right {
display: flex;
flex-direction: column;
align-items: flex-start;
.suspect-text {
// height: 56px;
// margin-top: 136px;
@@ -359,12 +385,11 @@
}
.start-icon {
width: fit-content;
// width: fit-content;
height: calc(var(--base-height) * 0.138);
cursor: pointer;
}
}
}
.answer-box {
@@ -444,10 +469,9 @@
z-index: 1;
border-radius: 20px;
&.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 {
@@ -466,7 +490,6 @@
}
}
&::after {
content: "";
z-index: -1;
@@ -500,9 +523,6 @@
}
}
.select-me {
// width: 150px;
// height: 64px;
@@ -713,4 +733,4 @@
/* 列表排序动画（可选） */
.slide-move {
transition: transform 0.3s ease;
}
}

2
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;

2
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 {