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

no message

Browse Source
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-12 16:57:43 +08:00
parent cbcd7a501d
commit 5a957acf3f
5 changed files with 440 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
static/css/index.css
View File

@@ -187,10 +187,12 @@
height: 448px;
position: relative;
z-index: 1;
border-radius: 15px;
overflow: hidden;
}
.content .introduce .box .album .album-box .item .bj.bj3 {
width: 100%;
height: 100%;
width: 101%;
height: 101%;
z-index: 1;
}
.content .introduce .box .album .album-box .item .bj.bj4 {
@@ -396,6 +398,7 @@
.content .works .mv-box .item .media .img {
width: 100%;
height: 100%;
border-radius: 10px;
}
.content .works .mv-box .item .media .play {
position: absolute;
@@ -611,38 +614,28 @@
position: relative;
cursor: pointer;
}
.content .custom .list .item .info .progress-bar .bar::after {
position: absolute;
}
.content .custom .list .item .info .progress-bar .bar.white {
width: 0;
border-radius: 10px 0 0 10px;
}
.content .custom .list .item .info .progress-bar .bar.white::after {
content: "";
width: calc(100% + 5px);
height: 100%;
background-color: #5241b0;
display: block;
border-radius: 10px 0 0 10px;
}
.content .custom .list .item .info .progress-bar .bar.black::after {
.content .custom .list .item .info .progress-bar .bar.white::before {
content: "";
width: calc(100% + 5px);
height: 100%;
background-color: #000000;
display: block;
border-radius: 0 10px 10px 0;
left: -5px;
}
.content .custom .list .item .info .progress-bar .circle {
width: 10px;
height: 10px;
background-color: #f3974b;
border-radius: 50%;
position: relative;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -5px;
cursor: pointer;
z-index: 1;
display: block;
}
.content .custom .list .item .info .progress-bar .bar.black {
background-color: #000000;
border-radius: 0 10px 10px 0;
}
.content .custom .list .item .info .operate .speed {
width: 16px;
@@ -850,7 +843,8 @@
font-style: normal;
color: #f2f2f2;
font-size: 13px;
height: 180px;
padding-top: 55px;
padding-bottom: 55px;
background: linear-gradient(180deg, #5241b0 0%, #1e135e 100%);
}
.content .footer .logo {
@@ -887,17 +881,27 @@
height: 76px;
background-color: #353535;
z-index: 1000;
}
.content .bottom-play .bottom-box {
height: 100%;
justify-content: space-between;
animation: fadeInUp 0.3s ease forwards;
min-width: 1200px;
}
.content .bottom-play .bottom-box .left .img {
@keyframes fadeInUp {
0% {
bottom: -76px;
}
100% {
bottom: 0;
}
}
.content .bottom-play .bottom-left {
padding-left: 12px;
}
.content .bottom-play .bottom-left .img {
width: 56px;
height: 56px;
margin-right: 12px;
}
.content .bottom-play .bottom-box .left .name {
.content .bottom-play .bottom-left .name {
color: #fff;
font-size: 14px;
font-weight: 600;
@@ -907,51 +911,51 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.content .bottom-play .bottom-box .middle {
.content .bottom-play .bottom-middle {
flex-direction: column;
}
.content .bottom-play .bottom-box .middle .operate {
.content .bottom-play .bottom-middle .operate {
margin-bottom: 10px;
}
.content .bottom-play .bottom-box .middle .operate .cut {
.content .bottom-play .bottom-middle .operate .cut {
width: 14px;
height: 12px;
cursor: pointer;
}
.content .bottom-play .bottom-box .middle .operate .speed {
.content .bottom-play .bottom-middle .operate .speed {
width: 16px;
height: 12px;
margin: 0 40px;
cursor: pointer;
}
.content .bottom-play .bottom-box .middle .operate .play {
.content .bottom-play .bottom-middle .operate .play {
width: 24px;
height: 24px;
cursor: pointer;
}
.content .bottom-play .bottom-box .middle .time-display {
.content .bottom-play .bottom-middle .time-display {
color: #fff;
font-size: 12px;
line-height: 10px;
}
.content .bottom-play .bottom-box .middle .progress-bar {
.content .bottom-play .bottom-middle .progress-bar {
height: 10px;
width: 500px;
margin: 0 10px;
}
.content .bottom-play .bottom-box .middle .progress-bar .bar {
.content .bottom-play .bottom-middle .progress-bar .bar {
height: 4px;
background-color: #ffffff;
border-radius: 10px;
position: relative;
cursor: pointer;
}
.content .bottom-play .bottom-box .middle .progress-bar .bar.white {
.content .bottom-play .bottom-middle .progress-bar .bar.white {
width: 0;
border-radius: 10px 0 0 10px;
background-color: #5241b0;
}
.content .bottom-play .bottom-box .middle .progress-bar .bar.white::before {
.content .bottom-play .bottom-middle .progress-bar .bar.white::before {
content: "";
width: 10px;
height: 10px;
@@ -965,22 +969,23 @@
z-index: 1;
display: block;
}
.content .bottom-play .bottom-box .middle .progress-bar .bar.black {
.content .bottom-play .bottom-middle .progress-bar .bar.black {
background-color: #f2f2f2;
border-radius: 0 10px 10px 0;
}
.content .bottom-play .bottom-box .right .item {
position: relative;
.content .bottom-play .bottom-right {
justify-content: flex-end;
padding-right: 12px;
}
.content .bottom-play .bottom-box .right .item .svg {
.content .bottom-play .bottom-right .item {
position: relative;
margin-right: 18px;
}
.content .bottom-play .bottom-right .item .svg {
display: block;
cursor: pointer;
}
.content .bottom-play .bottom-box .right .item:hover .sound-control {
display: flex;
}
.content .bottom-play .bottom-box .right .item .sound-control {
display: none;
.content .bottom-play .bottom-right .item .sound-control {
justify-content: center;
left: 50%;
transform: translateX(-50%);
@@ -997,19 +1002,19 @@
padding: 12px;
cursor: auto;
}
.content .bottom-play .bottom-box .right .item .sound-control::after {
.content .bottom-play .bottom-right .item .sound-control::after {
content: "";
width: 100%;
height: 7px;
position: absolute;
bottom: -7px;
}
.content .bottom-play .bottom-box .right .item .sound-control .value {
.content .bottom-play .bottom-right .item .sound-control .value {
color: #fff;
font-size: 14px;
user-select: none;
}
.content .bottom-play .bottom-box .right .item .sound-control .progress {
.content .bottom-play .bottom-right .item .sound-control .progress {
width: 4px;
height: 100px;
border-radius: 4px;
@@ -1018,14 +1023,14 @@
justify-content: flex-end;
cursor: pointer;
}
.content .bottom-play .bottom-box .right .item .sound-control .progress .bar {
.content .bottom-play .bottom-right .item .sound-control .progress .bar {
width: 100%;
height: 50px;
background-color: #fff;
border-radius: 4px;
position: relative;
}
.content .bottom-play .bottom-box .right .item .sound-control .progress .bar::before {
.content .bottom-play .bottom-right .item .sound-control .progress .bar::before {
content: "";
width: 10px;
height: 10px;

348
static/css/index.less
View File

@@ -205,14 +205,15 @@
.item {
width: 800px;
height: 448px;
position: relative;
z-index: 1;
border-radius: 15px;
overflow: hidden;
.bj {
&.bj3 {
width: 100%;
height: 100%;
width: 101%;
height: 101%;
z-index: 1;
}
@@ -454,6 +455,7 @@
.img {
width: 100%;
height: 100%;
border-radius: 10px;
}
.play {
@@ -702,45 +704,32 @@
position: relative;
cursor: pointer;
&::after {
position: absolute;
}
&.white {
width: 0;
border-radius: 10px 0 0 10px;
background-color: #5241b0;
&::after {
&::before {
content: "";
width: calc(100% + 5px);
height: 100%;
background-color: #5241b0;
width: 10px;
height: 10px;
background-color: #f3974b;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -5px;
cursor: pointer;
z-index: 1;
display: block;
border-radius: 10px 0 0 10px;
}
}
&.black {
&::after {
content: "";
width: calc(100% + 5px);
height: 100%;
background-color: rgba(0, 0, 0, 1);
display: block;
border-radius: 0 10px 10px 0;
left: -5px;
}
background-color: rgba(0, 0, 0, 1);
border-radius: 0 10px 10px 0;
}
}
.circle {
width: 10px;
height: 10px;
background-color: #f3974b;
border-radius: 50%;
position: relative;
cursor: pointer;
z-index: 1;
}
}
.operate {
@@ -991,7 +980,9 @@
font-style: normal;
color: #f2f2f2;
font-size: 13px;
height: 180px;
padding-top: 55px;
padding-bottom: 55px;
// height: 180px;
background: linear-gradient(180deg, rgba(82, 65, 176, 1) 0%, rgba(30, 19, 94, 1) 100%);
.logo {
@@ -1032,78 +1023,175 @@
height: 76px;
background-color: #353535;
z-index: 1000;
justify-content: space-between;
animation: fadeInUp 0.3s ease forwards;
min-width: 1200px;
.bottom-box {
height: 100%;
justify-content: space-between;
@keyframes fadeInUp {
0% {
bottom: -76px;
}
.left {
.img {
width: 56px;
height: 56px;
margin-right: 12px;
100% {
bottom: 0;
}
}
.bottom-left {
padding-left: 12px;
.img {
width: 56px;
height: 56px;
margin-right: 12px;
}
.name {
color: #fff;
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.bottom-middle {
flex-direction: column;
.operate {
margin-bottom: 10px;
.cut {
width: 14px;
height: 12px;
cursor: pointer;
}
.name {
color: #fff;
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.speed {
width: 16px;
height: 12px;
margin: 0 40px;
cursor: pointer;
}
.play {
width: 24px;
height: 24px;
cursor: pointer;
}
}
.middle {
flex-direction: column;
.time-display {
color: #fff;
font-size: 12px;
line-height: 10px;
}
.operate {
margin-bottom: 10px;
.progress-bar {
height: 10px;
width: 500px;
margin: 0 10px;
.bar {
height: 4px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
position: relative;
cursor: pointer;
.cut {
width: 14px;
height: 12px;
cursor: pointer;
&.white {
width: 0;
border-radius: 10px 0 0 10px;
background-color: #5241b0;
&::before {
content: "";
width: 10px;
height: 10px;
background-color: #f3974b;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -5px;
cursor: pointer;
z-index: 1;
display: block;
}
}
.speed {
width: 16px;
height: 12px;
margin: 0 40px;
cursor: pointer;
}
.play {
width: 24px;
height: 24px;
cursor: pointer;
&.black {
background-color: #f2f2f2;
border-radius: 0 10px 10px 0;
}
}
}
}
.time-display {
color: #fff;
font-size: 12px;
line-height: 10px;
.bottom-right {
justify-content: flex-end;
padding-right: 12px;
.item {
position: relative;
margin-right: 18px;
.svg {
display: block;
cursor: pointer;
}
// &:hover {
// .sound-control {
// display: flex;
// }
// }
.sound-control {
justify-content: center;
left: 50%;
transform: translateX(-50%);
height: 151px;
padding-bottom: 2px;
position: absolute;
top: -158px;
width: 42px;
align-items: center;
background: #1f1f1f;
border-radius: 8px;
flex-direction: column;
justify-content: space-between;
padding: 12px;
cursor: auto;
.progress-bar {
height: 10px;
width: 500px;
margin: 0 10px;
.bar {
height: 4px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
position: relative;
&::after {
content: "";
width: 100%;
height: 7px;
position: absolute;
bottom: -7px;
}
.value {
color: #fff;
font-size: 14px;
user-select: none;
}
.progress {
width: 4px;
height: 100px;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.2);
flex-direction: column;
justify-content: flex-end;
cursor: pointer;
&.white {
width: 0;
border-radius: 10px 0 0 10px;
background-color: #5241b0;
.bar {
width: 100%;
height: 50px;
background-color: #fff;
border-radius: 4px;
position: relative;
&::before {
content: "";
width: 10px;
@@ -1111,97 +1199,13 @@
background-color: #f3974b;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -5px;
cursor: pointer;
top: 0;
transform: translate(-50%, -50%);
left: 50%;
z-index: 1;
display: block;
}
}
&.black {
background-color: #f2f2f2;
border-radius: 0 10px 10px 0;
}
}
}
}
.right {
.item {
position: relative;
.svg {
display: block;
cursor: pointer;
}
&:hover {
.sound-control {
display: flex;
}
}
.sound-control {
display: none;
justify-content: center;
left: 50%;
transform: translateX(-50%);
height: 151px;
padding-bottom: 2px;
position: absolute;
top: -158px;
width: 42px;
align-items: center;
background: #1f1f1f;
border-radius: 8px;
flex-direction: column;
justify-content: space-between;
padding: 12px;
cursor: auto;
&::after {
content: "";
width: 100%;
height: 7px;
position: absolute;
bottom: -7px;
}
.value {
color: #fff;
font-size: 14px;
user-select: none;
}
.progress {
width: 4px;
height: 100px;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.2);
flex-direction: column;
justify-content: flex-end;
cursor: pointer;
.bar {
width: 100%;
height: 50px;
background-color: #fff;
border-radius: 4px;
position: relative;
&::before {
content: "";
width: 10px;
height: 10px;
background-color: #f3974b;
border-radius: 50%;
position: absolute;
top: 0;
transform: translate(-50%, -50%);
left: 50%;
z-index: 1;
display: block;
}
}
}
}
}
}