新增结构单元拆解板块（屋面4图+柱身图文2:1），重构性能分析3板块（受力分析/节能计算/光环境）

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

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>