refactor: 调整荣誉奖项排版布局及间距
- 将现有奖项包裹在 60% 宽度的左侧容器中,右侧预留 40% 空间 - 添加 honor-section/honor-left/honor-right 布局类 - 缩小奖项名称与等级、证书链接、日期之间的间距
This commit is contained in:
+18
-2
@@ -139,6 +139,18 @@ body {
|
||||
}
|
||||
|
||||
/* Honors */
|
||||
.honor-section {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.honor-left {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.honor-right {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.honor-item {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
@@ -161,7 +173,7 @@ body {
|
||||
display: inline-block;
|
||||
min-width: 52px;
|
||||
text-align: right;
|
||||
margin-left: 8px;
|
||||
margin-left: 4px;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
@@ -173,10 +185,14 @@ body {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.honor-item .cert-link {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.honor-date {
|
||||
color: #888;
|
||||
white-space: nowrap;
|
||||
margin-left: 12px;
|
||||
margin-left: 4px;
|
||||
min-width: 56px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
+21
-15
@@ -61,23 +61,29 @@
|
||||
<!-- 荣誉奖项 -->
|
||||
<div class="section">
|
||||
<div class="section-title">荣誉奖项</div>
|
||||
<div class="honor-item">
|
||||
<div class="honor-content">
|
||||
<img src="img/kingsoft.svg" class="company-logo" alt="金山办公">
|
||||
<span class="honor-name">"金山杯"华中地区高校第十八届程序设计邀请赛</span>
|
||||
<span class="honor-badge">三等奖</span>
|
||||
<div class="honor-section">
|
||||
<div class="honor-left">
|
||||
<div class="honor-item">
|
||||
<div class="honor-content">
|
||||
<img src="img/kingsoft.svg" class="company-logo" alt="金山办公">
|
||||
<span class="honor-name">"金山杯"华中地区高校第十八届程序设计邀请赛</span>
|
||||
<span class="honor-badge">三等奖</span>
|
||||
</div>
|
||||
<a href="http://47.121.181.112:40027/i/2026/05/28/6a17ca366d125.jpg" class="cert-link" target="_blank">证书</a>
|
||||
<div class="honor-date">2024-04</div>
|
||||
</div>
|
||||
<div class="honor-item">
|
||||
<div class="honor-content">
|
||||
<img src="img/icpc.svg" class="company-logo icpc" alt="ICPC">
|
||||
<span class="honor-name">国际大学生程序设计竞赛(ICPC)湖北省赛</span>
|
||||
<span class="honor-badge">优秀奖</span>
|
||||
</div>
|
||||
<a href="http://47.121.181.112:40027/i/2026/05/28/6a17ca3666920.png" class="cert-link" target="_blank">证书</a>
|
||||
<div class="honor-date">2024-06</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="http://47.121.181.112:40027/i/2026/05/28/6a17ca366d125.jpg" class="cert-link" target="_blank">证书</a>
|
||||
<div class="honor-date">2024-04</div>
|
||||
</div>
|
||||
<div class="honor-item">
|
||||
<div class="honor-content">
|
||||
<img src="img/icpc.svg" class="company-logo icpc" alt="ICPC">
|
||||
<span class="honor-name">国际大学生程序设计竞赛(ICPC)湖北省赛</span>
|
||||
<span class="honor-badge">优秀奖</span>
|
||||
<div class="honor-right">
|
||||
</div>
|
||||
<a href="http://47.121.181.112:40027/i/2026/05/28/6a17ca3666920.png" class="cert-link" target="_blank">证书</a>
|
||||
<div class="honor-date">2024-06</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user