A1300399510/PCAdmissionOfficer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): 重构箭头图标布局和样式

Browse Source 
优化箭头图标的布局方式，将直接定位改为通过容器相对定位
修复箭头图标在不同状态下的对齐问题
调整专业名称的显示样式防止换行
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-08-11 18:57:33 +08:00
parent 047ddd57f6
commit 0e5f3f32cf
5 changed files with 7619 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
css/index.css
View File

@@ -549,12 +549,15 @@ body {
font-size: 16px;
color: #ffffff;
margin-bottom: 10px;
align-items: flex-end;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .interview-name .name {
white-space: nowrap;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .interview-name .interview-professional {
color: #ffffff;
font-size: 13px;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
margin-top: 3px;
margin-left: 12px;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .margin-b-10 {
@@ -829,11 +832,19 @@ body {
.admission-officer .admission-body .school-list .school-item .right .content .year .item.pitch .svg {
fill: #7d2882;
}
.admission-officer .admission-body .school-list .school-item .right .content .year .item .arrows {
transform: translateY(-50%);
.admission-officer .admission-body .school-list .school-item .right .content .year .item .arrows-box {
position: relative;
width: 9px;
height: 100%;
margin-left: 5px;
}
.admission-officer .admission-body .school-list .school-item .right .content .year .item .arrows-box .arrows {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 9px;
height: 5px;
margin-left: 5px;
vertical-align: middle;
transition: all 0.3s;
}
@@ -1059,11 +1070,19 @@ body {
left: 0;
z-index: -1;
}
.admission-officer .admission-body .retrospect .list .item .right .year .year-item .arrows {
transform: translateY(-50%);
.admission-officer .admission-body .retrospect .list .item .right .year .year-item .arrows-box {
position: relative;
width: 9px;
height: 100%;
margin-left: 5px;
}
.admission-officer .admission-body .retrospect .list .item .right .year .year-item .arrows-box .arrows {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 9px;
height: 5px;
margin-left: 5px;
vertical-align: middle;
}
.admission-officer .admission-body .retrospect .pages .arrows {
@@ -1175,14 +1194,21 @@ body {
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.pitch .svg {
fill: #3c7de9;
}
.admission-officer .admission-body .more-school-mask .more-school .content .year .item .arrows {
transform: translateY(-50%);
.admission-officer .admission-body .more-school-mask .more-school .content .year .item .arrows-box {
position: relative;
width: 9px;
height: 100%;
margin-left: 5px;
}
.admission-officer .admission-body .more-school-mask .more-school .content .year .item .arrows-box .arrows {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 9px;
height: 5px;
margin-left: 5px;
vertical-align: middle;
transition: all 0.3s;
margin-top: 3px;
}
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.pitch .arrows {
fill: #fff;
@@ -1195,7 +1221,7 @@ body {
}
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold .arrows {
fill: #fff;
transform: translateY(-50%) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg);
}
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold .more-mask {
display: block;