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

feat: 更新音乐播放器界面和功能

Browse Source 
- 调整播放器底部样式，优化进度条和操作按钮布局
- 修复音量控制拖动功能
- 更新音乐数据源，增加更多歌曲分类和曲目
- 优化图片资源路径和命名规范
- 添加新的SVG图标和背景元素
- 修复播放进度条选择器错误
- 调整标签样式和交互效果
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-23 12:18:14 +08:00
parent 5d67675772
commit 8a764d2fdb
21 changed files with 636 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
static/css/guess.css
View File

@@ -234,8 +234,53 @@
z-index: -1;
border-radius: 18px;
}
.container .container-box .details .ray-light {
width: 286px;
height: 286px;
position: absolute;
top: 3px;
}
.container .container-box .details .ray-light.ray-light-left {
left: 3px;
}
.container .container-box .details .ray-light.ray-light-right {
right: 3px;
transform: scaleX(-1);
}
.container .container-box .details .bj-check {
width: 1200px;
height: 134px;
position: absolute;
bottom: 3px;
left: 0;
}
.container .container-box .details .bj-mask {
width: 1194px;
height: 129px;
position: absolute;
left: 3px;
bottom: 3px;
}
.container .container-box .details .fluctuate-icon {
width: 400px;
height: 86px;
position: absolute;
top: 293px;
right: 0;
}
.container .container-box .details .start-box {
width: 100%;
height: 100%;
position: relative;
}
.container .container-box .details .start-box .microphone {
width: 326px;
height: 326px;
position: absolute;
top: 93px;
left: 163px;
}
.container .container-box .details .start-box .suspect-text {
width: 493px;
height: 56px;
}

52
static/css/guess.less
View File

@@ -259,10 +259,62 @@
border-radius: 18px;
}
.ray-light {
width: 286px;
height: 286px;
position: absolute;
top: 3px;
&.ray-light-left {
left: 3px;
}
&.ray-light-right {
right: 3px;
transform: scaleX(-1);
}
}
.bj-check {
width: 1200px;
height: 134px;
position: absolute;
bottom: 3px;
left: 0;
}
.bj-mask {
width: 1194px;
height: 129px;
position: absolute;
left: 3px;
bottom: 3px;
}
.fluctuate-icon {
width: 400px;
height: 86px;
position: absolute;
top: 293px;
right: 0;
}
.start-box {
width: 100%;
height: 100%;
position: relative;
.microphone {
width: 326px;
height: 326px;
position: absolute;
top: 93px;
left: 163px;
}
.suspect-text {
width: 493px;
height: 56px;
}
}
}
}

37
static/css/song-request-station.css
View File

@@ -256,7 +256,7 @@
.container .container-box .list-box .list-fill .fill-item {
width: 33px;
height: 23px;
border-radius: 100px;
border-radius: 12px;
position: absolute;
cursor: pointer;
box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529);
@@ -300,7 +300,7 @@
.tag-item {
height: 60px;
line-height: 60px;
border-radius: 30px;
border-radius: 12px;
background: #d5e7f7;
position: absolute;
font-size: 20px !important;
@@ -310,17 +310,17 @@
cursor: pointer;
box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529);
opacity: 1 !important;
transition: background 0.3s, color 0.3s, z-index 0.3s, font-weight 0.3s;
}
.tag-item:hover {
font-weight: 650;
color: #583a05 !important;
background-color: #f19a04 !important;
background: #f19a04 !important;
z-index: 100 !important;
}
.tag-item.item2 {
height: 50px;
line-height: 50px;
border-radius: 25px;
color: #1c3e5e;
padding: 0 20px;
font-size: 18px !important;
@@ -329,7 +329,6 @@
.tag-item.item3 {
height: 47px;
line-height: 47px;
border-radius: 25px;
color: #1c3e5e;
padding: 0 16px;
font-size: 16px !important;
@@ -338,7 +337,6 @@
.tag-item.item4 {
height: 30px;
line-height: 30px;
border-radius: 30px;
color: #1c3e5e;
padding: 0 10px;
font-size: 14px !important;
@@ -350,26 +348,31 @@
}
.bottom-play {
position: fixed;
bottom: 0;
left: 0;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
border-radius: 12px;
width: 100%;
height: 76px;
background-color: #353535;
padding: 12px 0;
background-color: #000;
z-index: 1000;
justify-content: space-between;
align-items: flex-end;
animation: fadeInUp 0.3s ease forwards;
min-width: 1200px;
width: 800px;
}
@keyframes fadeInUp {
0% {
bottom: -76px;
}
100% {
bottom: 0;
bottom: 10px;
}
}
.bottom-play .bottom-left {
padding-left: 12px;
height: 24px;
position: relative;
}
.bottom-play .bottom-left .img {
width: 56px;
@@ -379,18 +382,19 @@
.bottom-play .bottom-left .name {
color: #fff;
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
max-width: 240px;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
left: 12px;
bottom: 0;
}
.bottom-play .bottom-middle {
flex-direction: column;
}
.bottom-play .bottom-middle .operate {
margin-bottom: 10px;
height: 24px;
}
.bottom-play .bottom-middle .operate .cut {
width: 14px;
@@ -451,6 +455,7 @@
.bottom-play .bottom-right {
justify-content: flex-end;
padding-right: 12px;
height: 24px;
}
.bottom-play .bottom-right .item {
position: relative;

55
static/css/song-request-station.less
View File

@@ -287,7 +287,7 @@
.fill-item {
width: 33px;
height: 23px;
border-radius: 100px;
border-radius: 12px;
// background-color: rgba(255, 255, 255, 0.223529);
position: absolute;
cursor: pointer;
@@ -356,7 +356,8 @@
.tag-item {
height: 60px;
line-height: 60px;
border-radius: 30px;
// border-radius: 30px;
border-radius: 12px;
background: #d5e7f7;
position: absolute;
font-size: 20px !important;
@@ -366,18 +367,19 @@
cursor: pointer;
box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529);
opacity: 1 !important;
transition: background 0.3s, color 0.3s, z-index 0.3s, font-weight 0.3s;
&:hover {
font-weight: 650;
color: rgb(88, 58, 5) !important;
background-color: rgba(241, 154, 4, 1) !important;
color: #583a05 !important;
background: rgba(241, 154, 4, 1) !important;
z-index: 100 !important;
}
&.item2 {
height: 50px;
line-height: 50px;
border-radius: 25px;
// border-radius: 25px;
color: #1c3e5e;
padding: 0 20px;
font-size: 18px !important;
@@ -387,7 +389,7 @@
&.item3 {
height: 47px;
line-height: 47px;
border-radius: 25px;
// border-radius: 25px;
color: #1c3e5e;
padding: 0 16px;
font-size: 16px !important;
@@ -397,7 +399,7 @@
&.item4 {
height: 30px;
line-height: 30px;
border-radius: 30px;
// border-radius: 30px;
color: #1c3e5e;
padding: 0 10px;
font-size: 14px !important;
@@ -408,19 +410,31 @@
color: #62263c !important;
background: linear-gradient(180deg, #ff8eba 0%, #f4458c 100%);
}
// &.red:hover {
// font-weight: 650;
// color: #583a05 !important;
// // background-color: rgba(241, 154, 4, 1) !important;
// background-color: rgb(255, 255, 255) !important;
// z-index: 100 !important;
// }
}
.bottom-play {
position: fixed;
bottom: 0;
left: 0;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
border-radius: 12px;
width: 100%;
height: 76px;
background-color: #353535;
padding: 12px 0;
background-color: #000;
z-index: 1000;
justify-content: space-between;
align-items: flex-end;
animation: fadeInUp 0.3s ease forwards;
min-width: 1200px;
// min-width: 1200px;
width: 800px;
@keyframes fadeInUp {
0% {
@@ -428,12 +442,14 @@
}
100% {
bottom: 0;
bottom: 10px;
}
}
.bottom-left {
padding-left: 12px;
height: 24px;
position: relative;
.img {
width: 56px;
@@ -444,12 +460,16 @@
.name {
color: #fff;
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
max-width: 240px;
// font-weight: 600;
// margin-bottom: 6px;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
left: 12px;
bottom: 0;
}
}
@@ -457,7 +477,7 @@
flex-direction: column;
.operate {
margin-bottom: 10px;
height: 24px;
.cut {
width: 14px;
@@ -528,6 +548,7 @@
.bottom-right {
justify-content: flex-end;
padding-right: 12px;
height: 24px;
.item {
position: relative;