From 9d18235e9dde00de55209d23bf8ec13d800d7335 Mon Sep 17 00:00:00 2001
From: yangyuqing <1614872855@qq.com>
Date: Wed, 3 Jun 2026 01:28:59 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E8=87=AA=E4=BF=9D=E9=9A=9C?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=EF=BC=9A=E5=BB=BA=E7=AD=91=E8=83=BD=E6=BA=90?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=EF=BC=88=E6=96=87+2=E5=9B=BE+=E6=96=87+2?=
 =?UTF-8?q?=E5=9B=BE=EF=BC=89=E5=92=8C=E6=8E=92=E6=B0=B4=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=EF=BC=88=E6=96=87+2=E5=9B=BE=EF=BC=89=EF=BC=8C=E5=B8=A6?=
 =?UTF-8?q?=E5=9B=BE=E5=90=8D=E6=A0=87=E6=B3=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/style.css         | 62 +++++++++++++++++++++++++++++++++++++++
 self-sufficiency.html | 68 ++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 123 insertions(+), 7 deletions(-)

diff --git a/css/style.css b/css/style.css
index 448c65e..6ddbe21 100644
--- a/css/style.css
+++ b/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;
+    }
+}
+
 /* ========================================
    响应式调整
    ======================================== */
diff --git a/self-sufficiency.html b/self-sufficiency.html
index ed17e32..7f1e3e5 100644
--- a/self-sufficiency.html
+++ b/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>