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

65
css/index.less
View File

@@ -651,12 +651,16 @@ body {
font-size: 16px;
color: #ffffff;
margin-bottom: 10px;
align-items: flex-end;
// align-items: flex-end;
.name {
white-space: nowrap;
}
.interview-professional {
color: #ffffff;
font-size: 13px;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
margin-top: 3px;
margin-left: 12px;
}
}
@@ -970,13 +974,22 @@ body {
}
}
.arrows {
transform: translateY(-50%);
.arrows-box {
position: relative;
width: 9px;
height: 5px;
height: 100%;
margin-left: 5px;
vertical-align: middle;
transition: all 0.3s;
.arrows {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 9px;
height: 5px;
vertical-align: middle;
transition: all 0.3s;
}
}
&.more {
@@ -1236,12 +1249,20 @@ body {
left: 0;
z-index: -1;
}
.arrows {
transform: translateY(-50%);
.arrows-box {
position: relative;
width: 9px;
height: 5px;
height: 100%;
margin-left: 5px;
vertical-align: middle;
.arrows {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 9px;
height: 5px;
vertical-align: middle;
}
}
}
}
@@ -1370,14 +1391,24 @@ body {
}
}
.arrows {
transform: translateY(-50%);
.arrows-box {
position: relative;
width: 9px;
height: 5px;
height: 100%;
margin-left: 5px;
vertical-align: middle;
transition: all 0.3s;
margin-top: 3px;
.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;
}
}
&.more {
@@ -1393,7 +1424,7 @@ body {
}
.arrows {
fill: #fff;
transform: translateY(-50%) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg);
}
.more-mask {
display: block;