8a764d2fdb
- 调整播放器底部样式，优化进度条和操作按钮布局 - 修复音量控制拖动功能 - 更新音乐数据源，增加更多歌曲分类和曲目 - 优化图片资源路径和命名规范 - 添加新的SVG图标和背景元素 - 修复播放进度条选择器错误 - 调整标签样式和交互效果
322 lines
7.7 KiB
Plaintext
322 lines
7.7 KiB
Plaintext
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.mar1200 {
|
|
width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
width: 100%;
|
|
background-color: rgba(51, 51, 51, 1);
|
|
|
|
.container-box {
|
|
padding-top: 24px;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.logo {
|
|
width: 121px;
|
|
height: 24px;
|
|
margin-bottom: 31px;
|
|
}
|
|
|
|
.header {
|
|
position: relative;
|
|
width: 1200px;
|
|
height: 280px;
|
|
// background: linear-gradient(180deg, #7d4bf8 0%, #5241b0 100%);
|
|
border-radius: 20px;
|
|
margin-bottom: 20px;
|
|
|
|
&::after {
|
|
content: "";
|
|
width: 1200px;
|
|
height: 280px;
|
|
background: linear-gradient(180deg, rgba(125, 75, 248, 1) 0%, rgba(82, 65, 176, 1) 100%);
|
|
border-radius: 20px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.halo {
|
|
width: 240px;
|
|
height: 214px;
|
|
position: absolute;
|
|
top: -71px;
|
|
left: -59px;
|
|
}
|
|
|
|
.star-icon {
|
|
position: absolute;
|
|
top: 46px;
|
|
left: 51px;
|
|
width: 56px;
|
|
height: 56px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.love-little {
|
|
position: absolute;
|
|
top: 120px;
|
|
left: -9px;
|
|
width: 173px;
|
|
height: 148px;
|
|
transform: rotate(315deg);
|
|
z-index: 1;
|
|
}
|
|
|
|
.bj-2 {
|
|
width: 360px;
|
|
height: 128px;
|
|
position: absolute;
|
|
left: 25px;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.music-icon {
|
|
width: 34px;
|
|
height: 37px;
|
|
position: absolute;
|
|
top: 194px;
|
|
left: 40px;
|
|
transform: rotate(345deg);
|
|
z-index: 1;
|
|
}
|
|
|
|
.bj {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 1064px;
|
|
height: 280px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.love-big {
|
|
width: 298px;
|
|
height: 256px;
|
|
display: flex;
|
|
transform: rotate(44deg);
|
|
position: absolute;
|
|
top: 22px;
|
|
left: 64px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.music-score {
|
|
width: 240px;
|
|
height: 240px;
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 197px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.question {
|
|
width: 289px;
|
|
height: 280px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 668px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.text {
|
|
width: 243px;
|
|
height: 210px;
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 423px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.face {
|
|
width: 83px;
|
|
height: 83px;
|
|
position: absolute;
|
|
top: -27px;
|
|
left: 1080px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.star-icon-2 {
|
|
width: 110px;
|
|
height: 110px;
|
|
position: absolute;
|
|
left: 979px;
|
|
top: 70px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ai-music {
|
|
width: 81px;
|
|
height: 28px;
|
|
position: absolute;
|
|
top: 240px;
|
|
left: 1106px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.record-black {
|
|
width: 191px;
|
|
height: 199px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: -1px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.record-circle {
|
|
position: absolute;
|
|
top: 132px;
|
|
left: 1063px;
|
|
background-color: rgb(114, 219, 134);
|
|
width: 94px;
|
|
height: 94px;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: block;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
.green-glow {
|
|
width: 306px;
|
|
height: 62px;
|
|
position: absolute;
|
|
top: 245px;
|
|
left: 217px;
|
|
}
|
|
|
|
.shadow {
|
|
width: 240px;
|
|
height: 165px;
|
|
position: absolute;
|
|
top: 151px;
|
|
left: 997px;
|
|
}
|
|
}
|
|
|
|
.details {
|
|
height: 500px;
|
|
width: 1200px;
|
|
border-radius: 20px;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: 3px;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: calc(100% - 6px);
|
|
height: calc(100% - 6px);
|
|
background-color: #7d4bf8;
|
|
z-index: -1;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|