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

css/style.css

@@ -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;
+    }
+}
+
 /* ========================================
    响应式调整
    ======================================== */

self-sufficiency.html

@@ -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>