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

refactor(页面布局): 重构页面布局和样式

Browse Source 
- 移除未使用的HTML文件和冗余代码
- 调整侧边栏位置和样式
- 优化标签云组件交互和性能
- 更新播放器控件样式和功能
- 改进预览弹窗的背景透明度
- 添加favicon图标
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-22 17:49:06 +08:00
parent 0e0d977c3b
commit 4087c429fa
14 changed files with 1302 additions and 1127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
static/css/index.less
View File

@@ -48,68 +48,6 @@
z-index: -1;
}
.sidebar {
position: absolute;
top: 175px;
right: 100px;
z-index: 10;
flex-direction: column;
align-items: center;
.pointer {
margin-bottom: 192px;
.item {
width: 4px;
height: 50px;
margin-bottom: 2px;
background-color: rgba(255, 255, 255, 1);
cursor: pointer;
position: relative;
&.active {
background-color: rgba(243, 151, 75, 1);
&::after {
content: attr(data-index);
position: absolute;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
color: #f3974b;
font-size: 14px;
top: 0;
left: -21px;
}
}
}
}
.arrow {
width: 12px;
display: flex;
flex-direction: column;
.item {
width: 12px;
height: 7px;
&.orange {
cursor: pointer;
}
&.top.orange {
transform: rotate(180deg);
}
&:not(:last-of-type) {
margin-bottom: 34px;
}
&.bottom.white {
transform: rotate(180deg);
}
}
}
}
.head {
height: 116px;
border-bottom: 1px solid rgba(255, 255, 255, 0.101961);
@@ -123,10 +61,15 @@
.box {
justify-content: space-between;
height: 685px;
position: relative;
.info {
padding-top: 60px;
display: flex;
flex-direction: column;
justify-content: space-between;
.brand {
margin-bottom: 175px;
// margin-bottom: 175px;
.fill {
width: 16px;
@@ -147,6 +90,7 @@
.award {
flex-direction: column;
margin-bottom: 177px;
.title {
width: 101px;
height: 24px;
@@ -250,6 +194,68 @@
}
}
}
.sidebar {
position: absolute;
top: 60px;
right: -4px;
z-index: 10;
flex-direction: column;
align-items: center;
.pointer {
margin-bottom: 192px;
.item {
width: 4px;
height: 50px;
margin-bottom: 2px;
background-color: rgba(255, 255, 255, 1);
cursor: pointer;
position: relative;
&.active {
background-color: rgba(243, 151, 75, 1);
&::after {
content: attr(data-index);
position: absolute;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
color: #f3974b;
font-size: 14px;
top: 0;
left: -21px;
}
}
}
}
.arrow {
width: 12px;
display: flex;
flex-direction: column;
.item {
width: 12px;
height: 7px;
&.orange {
cursor: pointer;
}
&.top.orange {
transform: rotate(180deg);
}
&:not(:last-of-type) {
margin-bottom: 34px;
}
&.bottom.white {
transform: rotate(180deg);
}
}
}
}
}
.trait {
@@ -372,6 +378,7 @@
grid-template-columns: repeat(3, 1fr);
background-color: #ffffff;
border-radius: 20px;
position: relative;
.item {
height: 500px;
@@ -998,7 +1005,7 @@
left: 0;
width: 100%;
height: 100%;
background-color: #4c4c4c;
background-color: rgba(0, 0, 0, 0.6);
z-index: 1001;
.close {