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

119
static/css/index.css
View File

@@ -44,60 +44,6 @@
background: linear-gradient(180deg, #1e135e 0%, #5241b0 100%);
z-index: -1;
}
.content .introduce .sidebar {
position: absolute;
top: 175px;
right: 100px;
z-index: 10;
flex-direction: column;
align-items: center;
}
.content .introduce .sidebar .pointer {
margin-bottom: 192px;
}
.content .introduce .sidebar .pointer .item {
width: 4px;
height: 50px;
margin-bottom: 2px;
background-color: #ffffff;
cursor: pointer;
position: relative;
}
.content .introduce .sidebar .pointer .item.active {
background-color: #f3974b;
}
.content .introduce .sidebar .pointer .item.active::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;
}
.content .introduce .sidebar .arrow {
width: 12px;
display: flex;
flex-direction: column;
}
.content .introduce .sidebar .arrow .item {
width: 12px;
height: 7px;
}
.content .introduce .sidebar .arrow .item.orange {
cursor: pointer;
}
.content .introduce .sidebar .arrow .item.top.orange {
transform: rotate(180deg);
}
.content .introduce .sidebar .arrow .item:not(:last-of-type) {
margin-bottom: 34px;
}
.content .introduce .sidebar .arrow .item.bottom.white {
transform: rotate(180deg);
}
.content .introduce .head {
height: 116px;
border-bottom: 1px solid rgba(255, 255, 255, 0.101961);
@@ -109,12 +55,13 @@
.content .introduce .box {
justify-content: space-between;
height: 685px;
position: relative;
}
.content .introduce .box .info {
padding-top: 60px;
}
.content .introduce .box .info .brand {
margin-bottom: 175px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.content .introduce .box .info .brand .fill {
width: 16px;
@@ -132,6 +79,7 @@
}
.content .introduce .box .info .award {
flex-direction: column;
margin-bottom: 177px;
}
.content .introduce .box .info .award .title {
width: 101px;
@@ -221,6 +169,60 @@
z-index: 1;
cursor: pointer;
}
.content .introduce .box .sidebar {
position: absolute;
top: 60px;
right: -4px;
z-index: 10;
flex-direction: column;
align-items: center;
}
.content .introduce .box .sidebar .pointer {
margin-bottom: 192px;
}
.content .introduce .box .sidebar .pointer .item {
width: 4px;
height: 50px;
margin-bottom: 2px;
background-color: #ffffff;
cursor: pointer;
position: relative;
}
.content .introduce .box .sidebar .pointer .item.active {
background-color: #f3974b;
}
.content .introduce .box .sidebar .pointer .item.active::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;
}
.content .introduce .box .sidebar .arrow {
width: 12px;
display: flex;
flex-direction: column;
}
.content .introduce .box .sidebar .arrow .item {
width: 12px;
height: 7px;
}
.content .introduce .box .sidebar .arrow .item.orange {
cursor: pointer;
}
.content .introduce .box .sidebar .arrow .item.top.orange {
transform: rotate(180deg);
}
.content .introduce .box .sidebar .arrow .item:not(:last-of-type) {
margin-bottom: 34px;
}
.content .introduce .box .sidebar .arrow .item.bottom.white {
transform: rotate(180deg);
}
.content .introduce .trait {
background-color: #ffffff;
height: 420px;
@@ -326,6 +328,7 @@
grid-template-columns: repeat(3, 1fr);
background-color: #ffffff;
border-radius: 20px;
position: relative;
}
.content .works .mv-box .item {
height: 500px;
@@ -859,7 +862,7 @@
left: 0;
width: 100%;
height: 100%;
background-color: #4c4c4c;
background-color: rgba(0, 0, 0, 0.6);
z-index: 1001;
}
.content .preview .close {