refactor: 调整荣誉奖项排版布局及间距

- 将现有奖项包裹在 60% 宽度的左侧容器中,右侧预留 40% 空间
- 添加 honor-section/honor-left/honor-right 布局类
- 缩小奖项名称与等级、证书链接、日期之间的间距
This commit is contained in:
2026-08-27 10:45:30 +08:00
parent 3d137401ce
commit df69fb4850
2 changed files with 39 additions and 17 deletions
+18 -2
View File
@@ -139,6 +139,18 @@ body {
} }
/* Honors */ /* Honors */
.honor-section {
display: flex;
}
.honor-left {
width: 60%;
}
.honor-right {
width: 40%;
}
.honor-item { .honor-item {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
@@ -161,7 +173,7 @@ body {
display: inline-block; display: inline-block;
min-width: 52px; min-width: 52px;
text-align: right; text-align: right;
margin-left: 8px; margin-left: 4px;
color: #222; color: #222;
} }
@@ -173,10 +185,14 @@ body {
white-space: nowrap; white-space: nowrap;
} }
.honor-item .cert-link {
margin-left: 4px;
}
.honor-date { .honor-date {
color: #888; color: #888;
white-space: nowrap; white-space: nowrap;
margin-left: 12px; margin-left: 4px;
min-width: 56px; min-width: 56px;
text-align: right; text-align: right;
} }
+6
View File
@@ -61,6 +61,8 @@
<!-- 荣誉奖项 --> <!-- 荣誉奖项 -->
<div class="section"> <div class="section">
<div class="section-title">荣誉奖项</div> <div class="section-title">荣誉奖项</div>
<div class="honor-section">
<div class="honor-left">
<div class="honor-item"> <div class="honor-item">
<div class="honor-content"> <div class="honor-content">
<img src="img/kingsoft.svg" class="company-logo" alt="金山办公"> <img src="img/kingsoft.svg" class="company-logo" alt="金山办公">
@@ -80,6 +82,10 @@
<div class="honor-date">2024-06</div> <div class="honor-date">2024-06</div>
</div> </div>
</div> </div>
<div class="honor-right">
</div>
</div>
</div>
<!-- 实习经历 --> <!-- 实习经历 -->
<div class="section"> <div class="section">