添加结构单元拆解和性能分析图片指南文档

analysis.html

@@ -292,25 +292,31 @@
                 <!-- 简介 -->
                 <div class="concept-item">
                     <h4 class="concept-item-title">简介</h4>
-                    <p class="concept-text">黑牦牛帐篷是青藏高原游牧民族的传统居住形式，具有深厚的文化内涵和适应性特征。这种帐篷以牦牛毛编织的布料为主要材料，采用独特的结构体系，能够适应高原极端气候条件。</p>
+                    <p class="concept-text">黑帐篷，藏语书面语通称“札那”。
+东北藏地区真正的游牧部落的帐房是低的，矩形的，由黑牦牛毛织成的粗褐做成。帐篷顶部有轻微的倾斜，帐篷的“墙”体像窗帘一样挂在顶部边缘。作为一个精巧的有独创性的系统，外面的帐杆高于整个帐篷，系于其上的绳子延展开来，帐篷或多或少从顶部和四角桂起，帐篷最中间只有两根柱杆，在帐篷的每一个有从帐篷前厅延伸到后面的两英尺长的烟道。
+帐身通常呈矩形或六角形，由众多条“热”缝合而成，由此组成两块尺寸较大的帐布，并用“卡察(kha tshab)”(白色羊毛织成的天窗幕布)将双方拼接，用木杆撑起后，帐体呈对称状，顶部具有一定坡度。
+</p>
                 </div>
                 
                 <!-- 抗风结构 -->
                 <div class="concept-item">
                     <h4 class="concept-item-title">抗风结构</h4>
-                    <p class="concept-text">黑牦牛帐篷通过斜拉索系统和柔性骨架形成稳定的抗风结构。其独特的张力体系和流线型外形能够有效分散风力荷载，在强风环境下保持稳定。</p>
+                    <p class="concept-text">黑帐篷通常采用低矮的坡面形态和内部中心支撑(一根或两根木柱)+周边牵拉的系统。这种柔性结构能有效分散和抵抗高原上强烈的风力，如同一个张开的帆，却又能通过调节绳索而“随波逐流”，极具韧性。
+这完美契合了游牧生活“逐水草而居”的核心需求，是整个游牧文明的物质载体。</p>
                 </div>
                 
                 <!-- 模块化与可移动性 -->
                 <div class="concept-item">
                     <h4 class="concept-item-title">模块化与可移动性</h4>
-                    <p class="concept-text">传统黑牦牛帐篷采用模块化设计，各个构件可以拆卸、组装和运输。这种特性使其具有良好的可移动性，适应游牧生活的迁徙需求。</p>
+                    <p class="concept-text">所有组件--牦牛毛布、木杆、绳索--都易于拆卸、捆扎和运输。这完美契合了游牧生活“逐水草而居”的核心需求，是整个游牧文明的物质载体。</p>
                 </div>
                 
                 <!-- 内部空间特点 -->
                 <div class="concept-item">
                     <h4 class="concept-item-title">内部空间特点</h4>
-                    <p class="concept-text">黑牦牛帐篷内部空间开敞灵活，中央设有火塘作为生活核心。空间布局体现了藏族人民的生活智慧和文化传统。</p>
+                    <p class="concept-text">黑帐篷的活动中心一般为整体空间的中部的火炕，这个中央灶台既是生火做饭的热源，也是家庭的中心。以灶为界，右侧为男（阳帐），待客住宿；左侧为女（阴帐），存放厨具。与火炕相对正对门的后方位置最高，供奉佛像和贵重物品。这种秩序体现了游牧民族对秩序和生活仪轨的重视。
+帐篷顶部留有长方形的顶上天窗开口，是唯一采光口和排烟口。牛羊粪燃烧的炊烟会自然从天窗排出。利用这个天窗，牧人可以通过观察天窗透过的光线位置判断时间（例如光照在后壁为上午，照在锅台为中午），极具智慧。
+</p>
                 </div>
                 
                 <!-- 5张图片横向滑动展示 -->
@@ -346,7 +352,7 @@
                 <h3 class="subsection-title">1.4.2 解读与转译：黑牦牛帐篷</h3>
                 
                 <div class="content-block">
-                    <p class="large-text">通过对黑牦牛帐篷的文化意象进行深入分析，我们提取了其核心的设计语言和结构逻辑，并将其转译为现代医疗建筑的设计策略。这一过程不仅保留了传统文化的精髓，还结合了当代建筑技术和功能需求，实现了传统与现代的有机融合。</p>
+                    <p class="large-text">基于上述对那曲地区黑帐篷原型的形态解构与场所精神提炼，本设计从空间叙事、结构逻辑、建造方式及环境应对四个维度，提出将传统游牧智慧转化为现代轻型建筑语汇的具体策略，实现从‘文化符号’到‘工程逻辑’的跨越。</p>
                     
                     <table class="concept-table">
                         <thead>
@@ -357,25 +363,23 @@
                         </thead>
                         <tbody>
                             <tr>
-                                <td>牦牛毛编织布料</td>
+                                <td>中央火塘，人们日常活动围绕中心空间展开，以火炕为基础划分内部空间。
-                                <td>轻质高强膜材料/金属屋面系统</td>
+</td>
+                                <td>中央作为公共活动大厅，多功能，承载集散和聚会的空间任务。</td>
                             </tr>
                             <tr>
-                                <td>木质骨架+斜拉索</td>
+                                <td>木杆交叉利用绳索连接牦牛毛布，牛毛绳穿过木杆并固定于地桩,牛毛绳作为斜拉索</td>
-                                <td>轻钢结构+预应力拉索体系</td>
+                                <td>轻钢结构 + 钢构立柱 + 斜拉索体系</td>
                             </tr>
                             <tr>
-                                <td>模块化组装</td>
+                                <td>随季节迁徙，所有组件便于拆装和运输。</td>
-                                <td>预制装配式建造方式</td>
+                                <td>模块化构件、螺栓连接</td>
                             </tr>
                             <tr>
-                                <td>中央火塘空间</td>
+                                <td>帐篷边缘压石防风</td>
-                                <td>多功能核心服务区</td>
+                                <td>地锚抗风构造</td>
-                            </tr>
-                            <tr>
-                                <td>游牧可移动性</td>
-                                <td>快速部署与灵活扩展能力</td>
                             </tr>
+                            
                         </tbody>
                     </table>
                 </div>
@@ -386,7 +390,7 @@
     <!-- 页脚 -->
     <footer class="footer">
         <div class="container">
-            <p>&copy; 2026 毕业设计展示 | 青藏高原轻钢拉索结构医疗站</p>
+            <p>&copy; 2026 毕业设计展示 | 雪域阳光方舟·高海拔环境乡村医疗服务基站设计与建造研究</p>
         </div>
     </footer>
 

css/style.css

@@ -962,3 +962,237 @@ body {
         font-size: 0.9rem;
     }
 }
+
+/* ========================================
+   结构单元拆解 - 2×2图片网格
+   ======================================== */
+.image-grid-2x2 {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+}
+
+.grid-item img {
+    width: 100%;
+    height: 350px;
+    object-fit: contain;
+    background: #FFFFFF;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-soft);
+    display: block;
+}
+
+.grid-item.with-caption {
+    text-align: center;
+}
+
+.image-caption {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    margin-top: var(--spacing-sm);
+    font-weight: 500;
+}
+
+/* ========================================
+   文字在右，图片在左（比例2:1）
+   ======================================== */
+.text-image-layout {
+    display: flex;
+    gap: var(--spacing-lg);
+    align-items: flex-start;
+    margin-bottom: var(--spacing-xl);
+}
+
+.text-image-layout.reverse {
+    flex-direction: row-reverse;
+}
+
+.layout-images {
+    flex: 1;
+}
+
+.layout-text {
+    flex: 2;
+}
+
+.layout-image-single img {
+    width: 100%;
+    max-height: 60vh;
+    object-fit: contain;
+    background: #FFFFFF;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-soft);
+}
+
+/* ========================================
+   性能分析 - 全宽大图
+   ======================================== */
+.full-width-image {
+    margin: var(--spacing-lg) 0;
+    width: 100%;
+}
+
+.full-width-image img {
+    width: 100%;
+    max-height: 70vh;
+    object-fit: contain;
+    background: #FFFFFF;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-soft);
+}
+
+.placeholder-text.large {
+    min-height: 400px;
+    font-size: 1.5rem;
+}
+
+/* ========================================
+   性能分析 - 左侧图+右侧表格布局
+   ======================================== */
+.text-image-table-layout {
+    display: flex;
+    gap: var(--spacing-lg);
+    align-items: flex-start;
+    margin-top: var(--spacing-lg);
+}
+
+.layout-images-left {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+}
+
+.image-pair img {
+    width: 100%;
+    height: 280px;
+    object-fit: contain;
+    background: #FFFFFF;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-soft);
+}
+
+.layout-table-right {
+    flex: 1.5;
+}
+
+/* ========================================
+   性能分析 - 左侧表格+右侧文字布局
+   ======================================== */
+.table-text-layout {
+    display: flex;
+    gap: var(--spacing-lg);
+    align-items: flex-start;
+}
+
+.layout-table-left {
+    flex: 1.5;
+}
+
+.layout-text-right {
+    flex: 1;
+}
+
+/* ========================================
+   性能分析表格样式
+   ======================================== */
+.performance-table {
+    width: 100%;
+    border-collapse: collapse;
+    background: var(--bg-card);
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    box-shadow: var(--shadow-soft);
+    font-size: 0.95rem;
+}
+
+.performance-table thead {
+    background: var(--primary-color);
+    color: white;
+}
+
+.performance-table th {
+    padding: 1rem;
+    font-weight: 600;
+    text-align: center;
+    letter-spacing: 1px;
+}
+
+.performance-table td {
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--bg-secondary);
+    color: var(--text-secondary);
+    text-align: center;
+}
+
+.performance-table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+.performance-table tbody tr:hover {
+    background: var(--bg-secondary);
+}
+
+.performance-table.wide {
+    font-size: 0.9rem;
+}
+
+.performance-table.wide th,
+.performance-table.wide td {
+    padding: 0.6rem 0.5rem;
+}
+
+/* ========================================
+   光照分析滑块特殊样式
+   ======================================== */
+.image-slider.light-analysis .slider-item {
+    width: 300px;
+}
+
+.image-slider.light-analysis .slider-item img {
+    height: 300px;
+}
+
+/* ========================================
+   响应式调整
+   ======================================== */
+@media (max-width: 1024px) {
+    .text-image-layout,
+    .text-image-layout.reverse,
+    .text-image-table-layout,
+    .table-text-layout {
+        flex-direction: column;
+    }
+    
+    .layout-text,
+    .layout-table-right,
+    .layout-text-right {
+        flex: none;
+        width: 100%;
+    }
+    
+    .grid-item img {
+        height: 280px;
+    }
+}
+
+@media (max-width: 768px) {
+    .image-grid-2x2 {
+        grid-template-columns: 1fr;
+    }
+    
+    .grid-item img {
+        height: 250px;
+    }
+    
+    .performance-table th,
+    .performance-table td {
+        padding: 0.5rem;
+        font-size: 0.85rem;
+    }
+    
+    .full-width-image img {
+        max-height: 50vh;
+    }
+}

drawings.html

@@ -164,6 +164,110 @@
         </div>
     </section>
 
+    <!-- 结构单元拆解 -->
+    <section class="section section-alt" id="structure-units">
+        <div class="container">
+            <h2 class="section-title">结构单元拆解</h2>
+            
+            <!-- 1. 屋面结构单元设计拆解（4张图，2×2排列） -->
+            <div class="subsection">
+                <h3 class="subsection-title">屋面结构单元设计拆解</h3>
+                
+                <!-- 4张图片 2×2排列 -->
+                <div class="image-grid-2x2">
+                    <div class="grid-item">
+                        <img src="images/roof-unit-01.jpg" alt="屋面结构图1" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text small" style="display:none;">屋面结构图1</div>
+                    </div>
+                    <div class="grid-item">
+                        <img src="images/roof-unit-02.jpg" alt="屋面结构图2" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text small" style="display:none;">屋面结构图2</div>
+                    </div>
+                    <div class="grid-item">
+                        <img src="images/roof-unit-03.jpg" alt="屋面结构图3" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text small" style="display:none;">屋面结构图3</div>
+                    </div>
+                    <div class="grid-item">
+                        <img src="images/roof-unit-04.jpg" alt="屋面结构图4" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text small" style="display:none;">屋面结构图4</div>
+                    </div>
+                </div>
+                
+                <!-- 文字说明 -->
+                <div class="content-block">
+                    <p class="large-text">在此处插入屋面结构单元设计的详细说明...</p>
+                </div>
+            </div>
+
+            <!-- 2. 柱身结构单元设计拆解（文字在右，图片在左，比例2:1） -->
+            <div class="subsection">
+                <h3 class="subsection-title">柱身结构单元设计拆解</h3>
+                
+                <!-- 第一段文字 + 4张图 -->
+                <div class="text-image-layout">
+                    <div class="layout-images">
+                        <div class="image-grid-2x2">
+                            <div class="grid-item with-caption">
+                                <img src="images/column-unit-01.jpg" alt="柱身结构图1" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                                <div class="placeholder-text small" style="display:none;">柱身结构图1</div>
+                                <p class="image-caption">图名标注1</p>
+                            </div>
+                            <div class="grid-item with-caption">
+                                <img src="images/column-unit-02.jpg" alt="柱身结构图2" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                                <div class="placeholder-text small" style="display:none;">柱身结构图2</div>
+                                <p class="image-caption">图名标注2</p>
+                            </div>
+                            <div class="grid-item with-caption">
+                                <img src="images/column-unit-03.jpg" alt="柱身结构图3" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                                <div class="placeholder-text small" style="display:none;">柱身结构图3</div>
+                                <p class="image-caption">图名标注3</p>
+                            </div>
+                            <div class="grid-item with-caption">
+                                <img src="images/column-unit-04.jpg" alt="柱身结构图4" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                                <div class="placeholder-text small" style="display:none;">柱身结构图4</div>
+                                <p class="image-caption">图名标注4</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layout-text">
+                        <p class="large-text">在此处插入柱身结构单元设计的第一段详细说明...</p>
+                    </div>
+                </div>
+                
+                <!-- 第二段文字 + 4张图 -->
+                <div class="text-image-layout">
+                    <div class="layout-images">
+                        <div class="image-grid-2x2">
+                            <div class="grid-item with-caption">
+                                <img src="images/column-unit-05.jpg" alt="柱身结构图5" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                                <div class="placeholder-text small" style="display:none;">柱身结构图5</div>
+                                <p class="image-caption">图名标注5</p>
+                            </div>
+                            <div class="grid-item with-caption">
+                                <img src="images/column-unit-06.jpg" alt="柱身结构图6" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                                <div class="placeholder-text small" style="display:none;">柱身结构图6</div>
+                                <p class="image-caption">图名标注6</p>
+                            </div>
+                            <div class="grid-item with-caption">
+                                <img src="images/column-unit-07.jpg" alt="柱身结构图7" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                                <div class="placeholder-text small" style="display:none;">柱身结构图7</div>
+                                <p class="image-caption">图名标注7</p>
+                            </div>
+                            <div class="grid-item with-caption">
+                                <img src="images/column-unit-08.jpg" alt="柱身结构图8" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                                <div class="placeholder-text small" style="display:none;">柱身结构图8</div>
+                                <p class="image-caption">图名标注8</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layout-text">
+                        <p class="large-text">在此处插入柱身结构单元设计的第二段详细说明...</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- 页脚 -->
     <footer class="footer">
         <div class="container">

images/STRUCTURE_PERFORMANCE_GUIDE.md

@@ -0,0 +1,272 @@
+# 📋 结构单元拆解与性能分析 - 图片资源指南
+
+##  快速索引
+
+### 设计图纸 - 结构单元拆解
+
+#### 1. 屋面结构单元设计拆解（4张图，2×2排列）
+```
+images/roof-unit-01.jpg  ← 屋面结构图1
+images/roof-unit-02.jpg  ← 屋面结构图2
+images/roof-unit-03.jpg  ← 屋面结构图3
+images/roof-unit-04.jpg  ← 屋面结构图4
+```
+
+#### 2. 柱身结构单元设计拆解（8张图，分两组，每组4张）
+```
+images/column-unit-01.jpg  ← 柱身结构图1（第一组）
+images/column-unit-02.jpg  ← 柱身结构图2（第一组）
+images/column-unit-03.jpg  ← 柱身结构图3（第一组）
+images/column-unit-04.jpg  ← 柱身结构图4（第一组）
+
+images/column-unit-05.jpg  ← 柱身结构图5（第二组）
+images/column-unit-06.jpg  ← 柱身结构图6（第二组）
+images/column-unit-07.jpg  ← 柱身结构图7（第二组）
+images/column-unit-08.jpg  ← 柱身结构图8（第二组）
+```
+
+---
+
+### 性能分析
+
+#### 1. 结构受力分析
+```
+images/perf-structure-full.jpg   ← 受力分析图示（全宽大图）
+images/perf-structure-01.jpg     ← 受力分析图1（左侧小图）
+images/perf-structure-02.jpg     ← 受力分析图2（左侧小图）
+```
+
+#### 2. 外围护节能计算
+```
+（无图片，仅表格+文字）
+```
+
+#### 3. 建筑光环境分析：采光模拟
+```
+images/perf-light-01.jpg         ← 光照分析图1（横向滑动）
+images/perf-light-02.jpg         ← 光照分析图2（横向滑动）
+images/perf-light-03.jpg         ← 光照分析图3（横向滑动）
+images/perf-light-04.jpg         ← 光照分析图4（横向滑动）
+images/perf-light-annual.jpg     ← 全年照度平均值（右侧大图）
+```
+
+---
+
+## 📐 图片规格建议
+
+### 结构单元拆解
+
+#### 屋面结构（4张，2×2网格）
+- **推荐尺寸**: 800×800px 或 1024×1024px（正方形）
+- **最小宽度**: 600px
+- **显示高度**: 350px（固定）
+- **object-fit**: contain（完整展示，白底填充）
+- **布局**: 2列×2行网格
+
+#### 柱身结构（8张，分两组）
+- **推荐尺寸**: 800×800px 或 1024×1024px（正方形）
+- **最小宽度**: 600px
+- **显示高度**: 350px（固定）
+- **object-fit**: contain（完整展示，白底填充）
+- **布局**: 
+  - 每组4张，2×2网格
+  - 图片在左，文字在右（比例1:2）
+  - 每张图下方有图名标注
+
+---
+
+### 性能分析
+
+#### 结构受力分析
+**全宽大图**:
+- **推荐尺寸**: 1920×1080px 或更大（横图）
+- **最小宽度**: 1600px
+- **最大高度**: 70vh（视口高度的70%）
+- **object-fit**: contain（完整展示）
+
+**左侧小图（2张）**:
+- **推荐尺寸**: 800×600px 或 1024×768px
+- **最小宽度**: 600px
+- **显示高度**: 280px（固定）
+- **object-fit**: contain
+
+#### 光环境分析
+**横向滑动4张图**:
+- **推荐尺寸**: 800×800px 或 1024×1024px（正方形）
+- **最小宽度**: 600px
+- **显示尺寸**: 300×300px（固定）
+- **object-fit**: contain
+- **布局**: 横向滚动，每张图下方有图名标注
+
+**全年照度平均值（右侧大图）**:
+- **推荐尺寸**: 1600×1200px 或更大
+- **最小宽度**: 1200px
+- **最大高度**: 60vh（视口高度的60%）
+- **object-fit**: contain
+- **布局**: 文字在左，图片在右（比例1:2）
+
+---
+
+## 🎨 布局说明
+
+### 1. 2×2图片网格
+```
+─────────┬─────────┐
+│  图1    │  图2    │
+├──────────────────┤
+│  图3    │  图4    │
+└─────────┴─────────┘
+```
+- 桌面端：2列×2行
+- 平板端：2列×2行
+- 手机端：1列×4行（垂直排列）
+
+### 2. 图文布局（比例1:2）
+```
+┌──────────┬────────────────────┐
+│          │                    │
+│  图片区   │   文字区            │
+│  (1份)   │   (2份)             │
+│          │                    │
+└──────────┴────────────────────┘
+```
+- 桌面端：左右并排
+- 平板/手机端：上下堆叠
+
+### 3. 全宽大图
+```
+────────────────────────────────┐
+│                                │
+│        全宽图片                 │
+│        (占满整个容器宽度)       │
+│                                │
+└────────────────────────────────┘
+```
+- 宽度：100%
+- 高度：最大70vh
+- 居中显示
+
+### 4. 左侧图+右侧表格
+```
+┌──────────┬──────────────────┐
+│  图1     │                  │
+│          │   表格           │
+│  图2     │   (3列4行)       │
+│          │                  │
+└──────────┴──────────────────┘
+```
+- 图片区：flex: 1
+- 表格区：flex: 1.5
+
+### 5. 横向滑动图片
+```
+┌────────────────────────────────┐
+│ [图1] [图2] [图3] [图4] →      │
+│  ↑ 可以向右滑动查看所有图片     │
+└────────────────────────────────┘
+```
+- 支持鼠标拖拽滑动
+- 支持触摸滑动
+- 吸附效果（scroll-snap）
+
+---
+
+## ✏️ 修改内容
+
+### 修改文字说明
+打开对应HTML文件，找到 `<p class="large-text">` 标签修改文字内容。
+
+### 修改表格数据
+打开 `performance.html`，找到 `<table>` 标签内的 `<td>` 元素修改数据。
+
+### 修改图名标注
+打开对应HTML文件，找到 `<p class="image-caption">` 标签修改图名。
+
+---
+
+## 🔍 常见问题排查
+
+### 问题1：图片未显示
+**检查清单**：
+1. ✅ 文件名是否正确（大小写、连字符、数字位数）
+2. ✅ 文件是否在 `images/` 文件夹
+3. ✅ 文件格式是否为 `.jpg` 或 `.png`
+4. ✅ 浏览器控制台是否有404错误（F12 → Console）
+
+### 问题2：图片变形
+**解决方案**：
+- 所有图片都使用 `object-fit: contain`
+- 会自动保持原始比例
+- 可能出现白边，这是正常现象
+
+### 问题3：表格显示异常
+**检查清单**：
+1. ✅ 表格行数是否正确（11行或4行）
+2. ✅ 列数是否正确（5列或3列）
+3. ✅ 表头是否完整
+4. ✅ CSS类名是否正确（`performance-table`）
+
+---
+
+## 💡 高级技巧
+
+### 调整图片高度
+打开 `css/style.css`，找到对应选择器修改：
+
+```css
+/* 屋面/柱身结构图 */
+.grid-item img {
+    height: 350px;  /* 改为 300px、400px 等 */
+}
+
+/* 全宽大图 */
+.full-width-image img {
+    max-height: 70vh;  /* 改为 60vh、80vh 等 */
+}
+```
+
+### 调整图文比例
+```css
+.text-image-layout .layout-images {
+    flex: 1;  /* 改为 0.8、1.2 等 */
+}
+
+.text-image-layout .layout-text {
+    flex: 2;  /* 改为 1.5、2.5 等 */
+}
+```
+
+### 调整表格字体大小
+```css
+.performance-table {
+    font-size: 0.95rem;  /* 改为 0.9rem、1rem 等 */
+}
+```
+
+---
+
+## 🎊 完成标志
+
+当你看到以下内容时，表示成功：
+
+✅ **设计图纸页面**  
+- 结构单元拆解板块已添加
+- 屋面结构4张图2×2排列
+- 柱身结构8张图分两组，图文比例1:2
+- 每张图下方有图名标注
+
+✅ **性能分析页面**  
+- 结构受力分析：文字+全宽图+文字+左侧2图+右侧表格
+- 外围护节能计算：左侧11行5列表格+右侧文字
+- 光环境分析：4张横向滑动图+左侧文字+右侧大图
+
+✅ **响应式适配**  
+- 桌面端：所有布局正常
+- 平板端：图文堆叠，表格自适应
+- 手机端：单列布局，图片缩小
+
+---
+
+**祝你顺利添加图片！** 
+
+*如有问题，随时告诉我！*

performance.html

@@ -61,20 +61,141 @@
     </section>
 
     <!-- 内容区域 -->
-    <section class="section">
+    
+    <!-- 1. 结构受力分析 -->
+    <section class="section" id="structural-analysis">
         <div class="container">
             <h2 class="section-title">结构受力分析</h2>
+            
+            <!-- 第一段文字 -->
             <div class="content-block">
-                <p class="large-text">在此处插入结构受力分析的详细说明和图表...</p>
+                <p class="large-text">在此处插入结构受力分析的第一段详细说明...</p>
+            </div>
+            
+            <!-- 受力分析图示（大图横向占满） -->
+            <div class="full-width-image">
+                <img src="images/perf-structure-full.jpg" alt="受力分析图示" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                <div class="placeholder-text large" style="display:none;">受力分析图示</div>
+            </div>
+            
+            <!-- 第二段文字 -->
+            <div class="content-block">
+                <p class="large-text">在此处插入结构受力分析的第二段详细说明...</p>
+            </div>
+            
+            <!-- 左侧2张图 + 右侧3列4行表格 -->
+            <div class="text-image-table-layout">
+                <div class="layout-images-left">
+                    <div class="image-pair">
+                        <img src="images/perf-structure-01.jpg" alt="受力分析图1" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text small" style="display:none;">受力分析图1</div>
+                    </div>
+                    <div class="image-pair">
+                        <img src="images/perf-structure-02.jpg" alt="受力分析图2" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text small" style="display:none;">受力分析图2</div>
+                    </div>
+                </div>
+                <div class="layout-table-right">
+                    <table class="performance-table">
+                        <thead>
+                            <tr>
+                                <th>参数1</th>
+                                <th>参数2</th>
+                                <th>参数3</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
+                            <tr><td>数据4</td><td>数据5</td><td>数据6</td></tr>
+                            <tr><td>数据7</td><td>数据8</td><td>数据9</td></tr>
+                            <tr><td>数据10</td><td>数据11</td><td>数据12</td></tr>
+                        </tbody>
+                    </table>
+                </div>
             </div>
         </div>
     </section>
 
-    <section class="section section-alt">
+    <!-- 2. 外围护节能计算 -->
+    <section class="section section-alt" id="energy-calculation">
         <div class="container">
-            <h2 class="section-title">节能计算</h2>
+            <h2 class="section-title">外围护节能计算</h2>
-            <div class="content-block">
+            
-                <p class="large-text">在此处插入节能计算的详细说明和图表...</p>
+            <!-- 左侧表格 + 右侧文字 -->
+            <div class="table-text-layout">
+                <div class="layout-table-left">
+                    <table class="performance-table wide">
+                        <thead>
+                            <tr>
+                                <th>项目</th>
+                                <th>指标1</th>
+                                <th>指标2</th>
+                                <th>指标3</th>
+                                <th>指标4</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr><td>项目1</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
+                            <tr><td>项目2</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
+                            <tr><td>项目3</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
+                            <tr><td>项目4</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
+                            <tr><td>项目5</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
+                            <tr><td>项目6</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
+                            <tr><td>项目7</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
+                            <tr><td>项目8</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
+                            <tr><td>项目9</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
+                            <tr><td>项目10</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="layout-text-right">
+                    <p class="large-text">在此处插入外围护节能计算的详细说明...</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 3. 建筑光环境分析：采光模拟 -->
+    <section class="section" id="lighting-simulation">
+        <div class="container">
+            <h2 class="section-title">建筑光环境分析：采光模拟</h2>
+            
+            <!-- 4张光照分析图横向排开 -->
+            <div class="image-slider-container">
+                <div class="image-slider light-analysis">
+                    <div class="slider-item with-caption">
+                        <img src="images/perf-light-01.jpg" alt="光照分析图1" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text small" style="display:none;">光照分析图1</div>
+                        <p class="image-caption">图名标注1</p>
+                    </div>
+                    <div class="slider-item with-caption">
+                        <img src="images/perf-light-02.jpg" alt="光照分析图2" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text small" style="display:none;">光照分析图2</div>
+                        <p class="image-caption">图名标注2</p>
+                    </div>
+                    <div class="slider-item with-caption">
+                        <img src="images/perf-light-03.jpg" alt="光照分析图3" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text small" style="display:none;">光照分析图3</div>
+                        <p class="image-caption">图名标注3</p>
+                    </div>
+                    <div class="slider-item with-caption">
+                        <img src="images/perf-light-04.jpg" alt="光照分析图4" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text small" style="display:none;">光照分析图4</div>
+                        <p class="image-caption">图名标注4</p>
+                    </div>
+                </div>
+                <div class="slider-hint">← 左右滑动查看更多 →</div>
+            </div>
+            
+            <!-- 左侧大图 + 右侧文字 -->
+            <div class="text-image-layout reverse">
+                <div class="layout-text">
+                    <p class="large-text">在此处插入全年照度平均值的详细说明...</p>
+                </div>
+                <div class="layout-image-single">
+                    <img src="images/perf-light-annual.jpg" alt="全年照度平均值" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                    <div class="placeholder-text large" style="display:none;">全年照度平均值</div>
+                </div>
             </div>
         </div>
     </section>