yangyuqing/new-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构自保障设计：建筑能源系统（文+2图+文+2图）和排水系统（文+2图），带图名标注

Browse Source
This commit is contained in:
yangyuqing
2026-06-03 01:28:59 +08:00
parent abce083dc4
commit 9d18235e9d
2 changed files with 123 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
css/style.css
View File

@@ -1281,6 +1281,68 @@ body {
}
}
/* ========================================
自保障设计 - 图片对排布局（带图名）
======================================== */
.image-pair-with-caption {
display: flex;
gap: var(--spacing-lg);
margin: var(--spacing-lg) 0;
}
.image-item {
flex: 1;
text-align: center;
}
.image-item img {
width: 100%;
height: auto;
max-height: 500px;
object-fit: contain;
background: #FFFFFF;
border-radius: var(--border-radius);
box-shadow: var(--shadow-soft);
display: block;
margin-bottom: var(--spacing-sm);
}
.placeholder-text.medium {
min-height: 400px;
font-size: 1.2rem;
margin-bottom: var(--spacing-sm);
}
.image-caption {
font-size: 1rem;
color: var(--text-primary);
font-weight: 600;
margin-top: var(--spacing-xs);
padding: var(--spacing-xs) 0;
border-top: 2px solid var(--primary-muted);
}
/* 响应式调整 */
@media (max-width: 1024px) {
.image-pair-with-caption {
flex-direction: column;
}
.image-item img {
max-height: 400px;
}
}
@media (max-width: 768px) {
.image-item img {
max-height: 300px;
}
.placeholder-text.medium {
min-height: 250px;
}
}
/* ========================================
响应式调整
======================================== */

68
self-sufficiency.html
View File

@@ -61,20 +61,74 @@
</section>
<!-- 内容区域 -->
<section class="section">
<!-- 1. 建筑能源系统综合分析 -->
<section class="section" id="energy-analysis">
<div class="container">
<h2 class="section-title">太阳能发电系统</h2>
<h2 class="section-title">建筑能源系统综合分析</h2>
<!-- 第一段文字 -->
<div class="content-block">
<p class="large-text">在此处插入太阳能发电系统的详细说明...</p>
<p class="large-text">在此处插入建筑能源系统综合分析的第一段详细说明...</p>
</div>
<!-- 两张图并排（带图名） -->
<div class="image-pair-with-caption">
<div class="image-item">
<img src="images/self-energy-01.jpg" alt="建筑月度能耗构成柱状图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text medium" style="display:none;">建筑月度能耗构成柱状图</div>
<p class="image-caption">建筑月度能耗构成柱状图</p>
</div>
<div class="image-item">
<img src="images/self-energy-02.jpg" alt="逐月能源供需平衡分析" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text medium" style="display:none;">逐月能源供需平衡分析</div>
<p class="image-caption">逐月能源供需平衡分析</p>
</div>
</div>
<!-- 第二段文字 -->
<div class="content-block">
<p class="large-text">在此处插入建筑能源系统综合分析的第二段详细说明...</p>
</div>
<!-- 两张图并排（带图名） -->
<div class="image-pair-with-caption">
<div class="image-item">
<img src="images/self-energy-03.jpg" alt="各光伏发电板年度发电量排名" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text medium" style="display:none;">各光伏发电板年度发电量排名</div>
<p class="image-caption">各光伏发电板年度发电量排名</p>
</div>
<div class="image-item">
<img src="images/self-energy-04.jpg" alt="典型日（1月1日）能耗变化曲线" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text medium" style="display:none;">典型日（1月1日）能耗变化曲线</div>
<p class="image-caption">典型日（1月1日）能耗变化曲线</p>
</div>
</div>
</div>
</section>
<section class="section section-alt">
<!-- 2. 排水系统设计 -->
<section class="section section-alt" id="drainage-system">
<div class="container">
<h2 class="section-title">水循环利用系统</h2>
<h2 class="section-title">排水系统设计</h2>
<!-- 文字说明 -->
<div class="content-block">
<p class="large-text">在此处插入水循环利用系统的详细说明...</p>
<p class="large-text">在此处插入排水系统设计的详细说明...</p>
</div>
<!-- 两张图并排（带图名） -->
<div class="image-pair-with-caption">
<div class="image-item">
<img src="images/self-drainage-01.jpg" alt="排水系统图1" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text medium" style="display:none;">排水系统图1</div>
<p class="image-caption">图名标注1</p>
</div>
<div class="image-item">
<img src="images/self-drainage-02.jpg" alt="排水系统图2" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text medium" style="display:none;">排水系统图2</div>
<p class="image-caption">图名标注2</p>
</div>
</div>
</div>
</section>
@@ -82,7 +136,7 @@
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<p>&copy; 2026 毕业设计展示 | 青藏高原轻钢拉索结构医疗站</p>
<p>&copy; 2026 毕业设计展示 | 雪域阳光方舟 · 高海拔环境乡村医疗服务基站设计与建造研究</p>
</div>
</footer>