完成毕业设计展示网站全部内容：包含前期分析、设计表现、设计图纸、性能分析、自保障设计、建造模拟（含建造过程模拟）、关于项目等全部板块

about.html

@@ -67,11 +67,11 @@
             <div class="content-block">
                 <div class="project-info">
                     <p><strong>项目名称：</strong>雪域阳光方舟 · 高海拔环境乡村医疗服务基站设计与建造研究</p>
-                    <p><strong>设计理念：</strong>Approachable Luxury（亲和的奢华）</p>
+                    <p><strong>关键词：</strong>高海拔极端环境·乡村医疗基站·轻型斜拉结构·装配式建造·性能化设计·自保障设计</p>
                     <p><strong>学生姓名：</strong>杨雨晴</p>
-                    <p><strong>指导教师：</strong>XXX</p>
+                    <p><strong>指导教师：</strong>东南大学：张宏、张弦、李向锋、周欣、张军军、叶红雨、伍雁华；内蒙古工业大学：伊若勒泰、布音敖其尔</p>
-                    <p><strong>学校专业：</strong>XXX大学 XXX专业</p>
+                    <p><strong>学校专业：</strong>东南大学 建筑学专业</p>
-                    <p><strong>完成时间：</strong>2026年</p>
+                    <p><strong>完成时间：</strong>2026年2月~5月</p>
                 </div>
             </div>
         </div>
@@ -90,7 +90,16 @@
         <div class="container">
             <h2 class="section-title">致谢</h2>
             <div class="content-block">
-                <p class="large-text">在此处插入致谢内容...</p>
+                <p class="large-text">“雪域阳光方舟”的完整设计历程，是一次对数字技术如何拓展设计边界、重构工作方法的深刻体验。</p>
+                <p class="large-text">一、数字工具：从“表现辅助”到“思维伙伴”的认知升级</p>
+                <p class="large-text">在过去，软件于我而言更多是后期制图与表现的工具。而本次设计最大的转变，在于我真正将数字化工具前置为贯穿始终的“思维伙伴”与“验证平台”。在概念阶段，Rhino的参数化建模并非仅为生成复杂形态，而是成为推演“轻型钢构+张拉索”混合结构逻辑的核心方法。我通过编写算法来关联结构形态与受力关系，实现了方案的快速迭代与性能的即时反馈，这种“设计即模拟”的过程，极大地深化了我对“形”与“力”之关系的理解。工具角色的转变，带来了设计思维的根本性进化。</p>
+                <p class="large-text">二、性能驱动：在虚拟仿真中锚定真实建造</p>
+                <p class="large-text">本次研究让我深刻体会到，面向高寒极端环境的建筑，其美感必须根植于性能的坚实保障。我运用Grasshopper插件与相关模拟工具，进行了多次关键的性能推敲：例如，通过Design building进行日照与辐射分析，以数据优化建筑朝向与开窗策略；通过abaqus对张拉索结构进行力学模拟与形态找形，确保其在大风荷载下的安全与轻盈；通过手动计算与简化能耗分析，验证复合围护构造的保温效能。这些虚拟仿真并非最终证明，而是在设计过程中不断提供决策依据，确保方案的每一个浪漫构想（如帐篷的意象），都能在现实中稳稳“落地”。这让我真正理解了“性能化设计”不再是附加题，而是设计逻辑的起点。</p>
+                <p class="large-text">三、效果表达：技术理性与人文感性的平衡</p>
+                <p class="large-text">在最终成果的表达上，我力求在技术图纸的精准与效果图的氛围之间找到平衡。效果图的制作不再追求夸张的视觉冲击，而是致力于忠实传达设计在真实环境中的空间体验与材料质感。我特别注意通过光线、材质和人物活动的刻画，来呈现这个医疗基站在雪域阳光下应有的温暖、宁静与希望，避免让技术图纸的“冷感”淹没建筑的人文内核。这个过程让我认识到，优秀的表现本身就是设计思想的延伸，它用一种更直观的方式，讲述了数据与逻辑背后关于“人”的故事。</p>
+                <p class="large-text">四、核心收获：构建整合思维与系统工作流</p>
+                <p class="large-text">最终，我收获的远不止一个设计方案或一系列软件技能。我最大的成长在于初步构建起一种整合思维：如何将文化转译、性能模拟、结构创新、智能建造与人文关怀等多重目标，整合进一个连贯、闭环且高效的设计工作流中。从任务书解读到最终深化，我体验了一个相对完整的研究型设计过程，其核心是“提出假设-技术验证-反馈优化”的循环。这让我对未来应对复杂、多约束的真实项目具备了更强的信心与方法论基础。</p>
+                <p class="large-text">总而言之，这是一次从“用手绘图”到“用系统思考”的蜕变。技术是强大的杠杆，但撬动问题的支点，始终是设计者对于场地、文化与人的深刻理解与关怀。在离天空最近的草原上，为村民筑起一隅健康方舟的朴素愿望，是驱动所有复杂技术探索的最终源泉。</p>
             </div>
         </div>
     </section>
@@ -98,7 +107,7 @@
     <!-- 页脚 -->
     <footer class="footer">
         <div class="container">
-            <p>&copy; 2026 毕业设计展示 | 青藏高原轻钢拉索结构医疗站</p>
+            <p>&copy; 2026 毕业设计展示 | 雪域阳光方舟 · 高海拔环境乡村医疗服务基站设计与建造研究</p>
         </div>
     </footer>
 

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>
 

construction.html

@@ -7,15 +7,24 @@
     
     <!-- SEO Meta Tags -->
     <title>建造模拟 - 轻索方舱 | 高海拔环境乡村医疗服务基站</title>
-    <meta name="description" content="建造模拟：场地总图、流程表、构件表">
+    <meta name="description" content="建造模拟：场地总图、建造流程、构件表">
+    <meta name="keywords" content="建筑设计,毕业设计,青藏高原,轻钢结构,医疗站,拉索结构,建造模拟">
+    <meta name="author" content="杨雨晴">
+    
+    <!-- Open Graph / Social Media Meta Tags -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://solarark.net/g2026/g4/construction.html">
+    <meta property="og:title" content="建造模拟 - 雪域阳光方舟">
+    <meta property="og:description" content="建造模拟：场地总图、建造流程、构件表">
     
     <!-- Base Path for Subdirectory Deployment -->
     <base href="/g2026/g4/">
     
-    <!-- Smart Path Detection -->
+    <!-- Smart Path Detection - Must run before CSS/JS loading -->
     <script>
         (function() {
             const hostname = window.location.hostname;
+            // 本地开发环境自动移除 base 标签
             if (hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '') {
                 const baseTag = document.querySelector('base');
                 if (baseTag) {
@@ -28,6 +37,9 @@
     
     <!-- Stylesheet -->
     <link rel="stylesheet" href="css/style.css">
+    
+    <!-- Favicon -->
+    <!-- <link rel="icon" type="image/png" href="images/favicon.png"> -->
 </head>
 <body>
     <!-- 顶部固定导航栏 -->
@@ -61,29 +73,590 @@
     </section>
 
     <!-- 内容区域 -->
-    <section class="section">
+    
+    <!-- 1. 建造总图（一张大图） -->
+    <section class="section" id="construction-site">
         <div class="container">
-            <h2 class="section-title">场地总图</h2>
+            <h2 class="section-title">建造总图</h2>
-            <div class="content-block">
+            <div class="drawing-full enlarged">
-                <p class="large-text">在此处插入场地总图的详细说明...</p>
+                <img src="images/construction-siteplan.jpg" alt="建造总图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                <div class="placeholder-text large" style="display:none;">建造总图</div>
             </div>
         </div>
     </section>
 
-    <section class="section section-alt">
+    <!-- 2. 构件表 -->
-        <div class="container">
+    <section class="section section-alt" id="component-tables">
-            <h2 class="section-title">建造流程</h2>
-            <div class="content-block">
-                <p class="large-text">在此处插入建造流程的详细说明...</p>
-            </div>
-        </div>
-    </section>
-
-    <section class="section">
         <div class="container">
             <h2 class="section-title">构件表</h2>
-            <div class="content-block">
+            
-                <p class="large-text">在此处插入构件表的详细说明...</p>
+            <!-- 2.1 基座部分 -->
+            <div class="subsection">
+                <h3 class="subsection-title">2.1 基座部分</h3>
+                
+                <!-- 上方：左图右表 -->
+                <div class="text-image-layout">
+                    <div class="layout-images">
+                        <img src="images/construction-base-01.jpg" alt="基座部分示意图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text medium" style="display:none;">基座部分示意图</div>
+                    </div>
+                    <div class="layout-table-right">
+                        <table class="performance-table">
+                            <thead>
+                                <tr>
+                                    <th>编号</th>
+                                    <th>构件</th>
+                                    <th>材质</th>
+                                    <th>尺寸/mm</th>
+                                    <th>重量/kg</th>
+                                    <th>数量</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr><td>1</td><td>地螺丝A（配圆形法兰）</td><td>钢制镀锌</td><td>Φ168*4.0*2500mm 螺旋桩</td><td>46</td><td>81</td></tr>
+                                <tr><td>2</td><td>地螺丝B（无法兰，有内螺纹）</td><td>钢制镀锌</td><td>Φ168*4.0*5000mm 螺旋桩</td><td>92</td><td>24</td></tr>
+                                <tr><td>3</td><td>预制基础板</td><td>混凝土</td><td>2000*4000*100mm</td><td>1920</td><td>344</td></tr>
+                                <tr><td>4</td><td>砖堆</td><td>砖</td><td>1200*1200*1500mm</td><td>5400</td><td>56</td></tr>
+                                <tr><td>5</td><td>加热棒</td><td>不锈钢</td><td>Φ16*300mm 500W光面</td><td>0.12</td><td>112</td></tr>
+                                <tr><td>6</td><td>工字钢</td><td>钢材</td><td>160*88*6*4000/8000mm</td><td>82/164</td><td>196/98</td></tr>
+                                <tr><td>7</td><td>风管支架</td><td>钢材</td><td>"吊杆：M8*400*600mm  横杆：∠30×30×3mm"</td><td>0.8/0.4</td><td>70</td></tr>
+                                <tr><td>8</td><td>圆钢管柱</td><td>钢材</td><td>Φ159*5*1750mm</td><td>33</td><td>49</td></tr>
+                                <tr><td>9</td><td>硅酸钙板基氟碳漆饰面的外墙保温装饰一体板</td><td>硅酸钙板 岩棉 氟碳漆</td><td>2270*2000*150mm</td><td>48</td><td>80</td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                
+                <!-- 下方：横向滑动小图（至少8张） -->
+                <div class="image-slider-container">
+                    <div class="image-slider construction-gallery">
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-base-detail-01.jpg" alt="基座细节图1" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                            <div class="placeholder-text small" style="display:none;">地螺丝A</div>
+                            <p class="image-caption">地螺丝A</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-base-detail-02.jpg" alt="基座细节图2" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                            <div class="placeholder-text small" style="display:none;">地螺丝B</div>
+                            <p class="image-caption">地螺丝B</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-base-detail-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">预制基础板</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-base-detail-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">砖堆</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-base-detail-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">加热棒</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-base-detail-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">工字钢</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-base-detail-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">风管支架</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-base-detail-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">硅酸钙基氟碳漆饰面保温装饰一体板</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-base-detail-09.jpg" alt="基座细节图9" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                            <div class="placeholder-text small" style="display:none;">基座细节图9</div>
+                            <p class="image-caption">圆钢管柱</p>
+                        </div>
+                    </div>
+                    <div class="slider-hint">← 左右滑动查看更多 →</div>
+                </div>
+            </div>
+
+            <!-- 2.2 主体结构部分 -->
+            <div class="subsection">
+                <h3 class="subsection-title">2.2 主体结构部分</h3>
+                
+                <!-- 上方：左图右表 -->
+                <div class="text-image-layout">
+                    <div class="layout-images">
+                        <img src="images/construction-main-01.jpg" alt="主体结构示意图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text medium" style="display:none;">主体结构示意图</div>
+                    </div>
+                    <div class="layout-table-right">
+                        <table class="performance-table">
+                            <thead>
+                                <tr>
+                                    <th>编号</th>
+                                    <th>构件</th>
+                                    <th>材质</th>
+                                    <th>尺寸/mm</th>
+                                    <th>重量/kg</th>
+                                    <th>数量</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr><td>1</td><td>Q235B圆钢管柱上半截（带加劲肋外法兰对接）</td><td>钢材</td><td>Φ219*6*5000mm </td><td>157.6</td><td>4</td></tr>
+                                <tr><td>2</td><td>Q235B圆钢管柱下半截（带加劲肋外法兰对接）</td><td>钢材</td><td>Φ219*6*5000mm </td><td>157.6</td><td>4</td></tr>
+                                <tr><td>3</td><td>网架</td><td>钢材</td><td>60*60*4*8000*2000*1060mm</td><td>592</td><td>8</td></tr>
+                                <tr><td>4</td><td>网架（预埋A套筒）</td><td>钢材</td><td>60*60*4*8000*2000*1060mm</td><td>592</td><td>2</td></tr>
+                                <tr><td>5</td><td>网架（预埋B套筒）</td><td>钢材</td><td>60*60*4*8000*2000*1060mm</td><td>592</td><td>2</td></tr>
+                                <tr><td>6</td><td>网架（预埋C套筒）</td><td>钢材</td><td>60*60*4*8000*2000*1060mm</td><td>592</td><td>2</td></tr>
+                                <tr><td>7</td><td>网架（预埋D套筒）</td><td>钢材</td><td>60*60*4*8000*2000*1060mm</td><td>592</td><td>2</td></tr>
+                                <tr><td>8</td><td>三角坡屋面支撑架</td><td>钢材</td><td>60*60*4*8000*2000*1080mm  60*60*4*6000*2000*1080mm</td><td>300/232</td><td>10/4</td></tr>
+                                <tr><td>9</td><td>15.2mm钢绞线</td><td>钢材</td><td>大于132m</td><td>145</td><td>1</td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                
+                <!-- 下方：横向滑动小图（至少8张） -->
+                <div class="image-slider-container">
+                    <div class="image-slider construction-gallery">
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-main-detail-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">圆钢管柱上半截</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-main-detail-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">圆钢管柱下半截</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-main-detail-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">网架（无预埋套筒）</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-main-detail-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">网架（预埋套筒A）</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-main-detail-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">网架（预埋套筒B）</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-main-detail-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">网架（预埋套筒C）</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-main-detail-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">网架（预埋套筒D）</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-main-detail-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">三角坡屋面支架</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-main-detail-09.jpg" alt="主体细节图9" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                            <div class="placeholder-text small" style="display:none;">主体细节图9</div>
+                            <p class="image-caption">15.2mm钢绞线</p>
+                        </div>
+                    </div>
+                    <div class="slider-hint">← 左右滑动查看更多 →</div>
+                </div>
+            </div>
+
+            <!-- 2.3 屋面围护部分 -->
+            <div class="subsection">
+                <h3 class="subsection-title">2.3 屋面围护部分</h3>
+                
+                <!-- 上方：左图右表 -->
+                <div class="text-image-layout">
+                    <div class="layout-images">
+                        <img src="images/construction-roof-01.jpg" alt="屋面围护示意图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text medium" style="display:none;">屋面围护示意图</div>
+                    </div>
+                    <div class="layout-table-right">
+                        <table class="performance-table">
+                            <thead>
+                                <tr>
+                                    <th>编号</th>
+                                    <th>构件</th>
+                                    <th>材质</th>
+                                    <th>尺寸/mm</th>
+                                    <th>重量/kg</th>
+                                    <th>数量</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr><td>1</td><td>彩钢压型屋面夹芯板1</td><td>钢材、岩棉</td><td>2260*2000*70mm</td><td>90</td><td>52</td></tr>
+                                <tr><td>2</td><td>彩钢压型屋面夹芯板2</td><td>钢材、岩棉</td><td>2000*1160*70mm</td><td>46</td><td>52</td></tr>
+                                <tr><td>3</td><td>彩钢压型屋面夹芯板3</td><td>钢材、岩棉</td><td>△30*2020*1260*70mm</td><td>25</td><td>18</td></tr>
+                                <tr><td>4</td><td>彩钢压型屋面夹芯板4</td><td>钢材、岩棉</td><td>2050*2000*130mm</td><td>45</td><td>8</td></tr>
+                                <tr><td>5</td><td>岩棉板组合1</td><td>岩棉</td><td>1925*720*60mm 1925*740*60mm 1925*460*60mm</td><td>25/26/16</td><td>52/52/52</td></tr>
+                                <tr><td>6</td><td>岩棉板组合2</td><td>岩棉</td><td>△1460*840*60mm  △750*430*60mm</td><td>15/9</td><td>18/18</td></tr>
+                                <tr><td>7</td><td>天窗</td><td>钢材、玻璃</td><td>1920*1800*70mm</td><td>95</td><td>4</td></tr>
+                                <tr><td>8</td><td>排水外天沟</td><td>不锈钢</td><td>u形4000*220*120*1mm</td><td>15</td><td>16</td></tr>
+                                <tr><td>9</td><td>排水内天沟</td><td>不锈钢</td><td>异形4000*200*80*1mm</td><td>14</td><td>28</td></tr>
+                                <tr><td>10</td><td>太阳能板支架及夹具</td><td>铝合金</td><td>1950*60*60*3mm（∠15mm）</td><td>9.7</td><td>104</td></tr>
+                                <tr><td>11</td><td>光伏板A</td><td>/</td><td>1860*1110*30mm</td><td>25</td><td>102</td></tr>
+                                <tr><td>12</td><td>光伏板B</td><td>/</td><td>1520*1110*30mm</td><td>20</td><td>2</td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                
+                <!-- 下方：横向滑动小图（至少8张） -->
+                <div class="image-slider-container">
+                    <div class="image-slider construction-gallery">
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-roof-detail-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/construction-roof-detail-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/construction-roof-detail-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/construction-roof-detail-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 class="slider-item with-caption">
+                            <img src="images/construction-roof-detail-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">岩棉板组合1</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-roof-detail-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">岩棉板组合2</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-roof-detail-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">天窗</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-roof-detail-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">排水天沟</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-roof-detail-09.jpg" alt="屋面细节图9" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                            <div class="placeholder-text small" style="display:none;">屋面细节图9</div>
+                            <p class="image-caption">太阳能板支架及夹具</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-roof-detail-10.jpg" alt="屋面细节图10" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                            <div class="placeholder-text small" style="display:none;">屋面细节图10</div>
+                            <p class="image-caption">光伏板</p>
+                        </div>
+                    </div>
+                    <div class="slider-hint">← 左右滑动查看更多 →</div>
+                </div>
+            </div>
+
+            <!-- 2.4 墙面围护部分 -->
+            <div class="subsection">
+                <h3 class="subsection-title">2.4 墙面围护部分</h3>
+                
+                <!-- 上方：左图右表 -->
+                <div class="text-image-layout">
+                    <div class="layout-images">
+                        <img src="images/construction-wall-01.jpg" alt="墙面围护示意图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text medium" style="display:none;">墙面围护示意图</div>
+                    </div>
+                    <div class="layout-table-right">
+                        <table class="performance-table">
+                            <thead>
+                                <tr>
+                                    <th>编号</th>
+                                    <th>构件</th>
+                                    <th>材质</th>
+                                    <th>尺寸/mm</th>
+                                    <th>重量/kg</th>
+                                    <th>数量</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr><td>1</td><td>C型竖龙骨</td><td>钢材</td><td>3450*50*45*0.6mm  1200*50*45*0.6mm</td><td>2.6/0.9</td><td>57/7</td></tr>
+                                <tr><td>2</td><td>u型沿地/沿顶龙骨</td><td>钢材</td><td>4000*50*45*0.6mm</td><td>2.4</td><td>16</td></tr>
+                                <tr><td>3</td><td>通贯龙骨</td><td>钢材</td><td>4000*DU38*12*1.0mm 2100*DU38*12*1.0mm 1100*DU38*12*1.0mm 870*DU38*12*1.0mm</td><td>1.8/0.9/0.5/0.4</td><td>19/8/9/5</td></tr>
+                                <tr><td>4</td><td>保温一体板</td><td>硅酸钙板，岩棉</td><td>1040*1160*200mm 1040*1200*200mm 1040*920*200mm 1000*1160*200mm 1000*1200*200mm 1000*920*200mm 840*1160*200mm 840*1200*200mm 840*920*200mm</td><td>48kg/㎡</td><td>57/33/36/24/8/4/4</td></tr>
+                                <tr><td>5</td><td>窗户</td><td>铝合金，玻璃</td><td>2260*1000*60mm</td><td>80</td><td>12</td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                
+                <!-- 下方：横向滑动小图（5张） -->
+                <div class="image-slider-container">
+                    <div class="image-slider construction-gallery">
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-wall-detail-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">u型沿地沿顶龙骨</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-wall-detail-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">c型竖向龙骨</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-wall-detail-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">通贯龙骨</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-wall-detail-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">外墙一体板</p>
+                        </div>
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-wall-detail-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">窗户</p>
+                        </div>
+                    </div>
+                    <div class="slider-hint">← 左右滑动查看更多 →</div>
+                </div>
+            </div>
+
+            <!-- 2.5 温棚部分 -->
+            <div class="subsection">
+                <h3 class="subsection-title">2.5 温棚部分</h3>
+                
+                <!-- 上方：两张大示意图并排 -->
+                <div class="image-pair-with-caption greenhouse-layout">
+                    <div class="image-item">
+                        <img src="images/construction-greenhouse-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">温棚结构爆炸图</p>
+                    </div>
+                    <div class="image-item">
+                        <img src="images/construction-greenhouse-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">温棚节点详图</p>
+                    </div>
+                </div>
+                
+                <!-- 下方：构件表 -->
+                <table class="performance-table wide">
+                    <thead>
+                        <tr>
+                            <th>编号</th>
+                            <th>构件</th>
+                            <th>材质</th>
+                            <th>尺寸/mm</th>
+                            <th>重量/kg</th>
+                            <th>数量</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr><td>1</td><td>围护中空阳光板</td><td>PC</td><td>10*2040*2000mm 10*3460*2040mm 10*3460*2000mm</td><td>0.06/0.11/0.11</td><td>8/18/18</td></tr>
+                        <tr><td>2</td><td>钢框架（临时支架）</td><td>钢材</td><td>60*60*4*3460*2000*2040mm</td><td>519</td><td>18</td></tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- 2.6 设备部分（只有一张表） -->
+            <div class="subsection">
+                <h3 class="subsection-title">2.6 设备部分</h3>
+                
+                <table class="performance-table wide">
+                    <thead>
+                        <tr>
+                            <th>编号</th>
+                            <th>设备</th>
+                            <th>尺寸/mm</th>
+                            <th>载重/t</th>
+                            <th>自重/kg</th>
+                            <th>数量</th>
+                            <th>其他</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr><td>1</td><td>液压爬升千斤顶</td><td>高度1600</td><td>20</td><td>120</td><td>4</td><td>4点同步提升网架</td></tr>
+                        <tr><td>2</td><td>液压泵站</td><td>700×520×900 mm</td><td>/</td><td>200</td><td>1</td><td>柴油机驱动，压力≥25MPa，可联控多路,一泵拖4顶</td></tr>
+                        <tr><td>3</td><td>控制柜尺寸约500×400×300 mm</td><td>/</td><td>20</td><td>1</td><td>控制4点同步提升网架</td></tr>
+                        <tr><td>4</td><td>水准仪</td><td>230×130×146 mm</td><td>/</td><td>5（全套设备）</td><td>1</td><td>/</td></tr>
+                        <tr><td>5</td><td>全站仪</td><td>190×180×350 mm</td><td>/</td><td>20（全套设备）</td><td>1</td><td>/</td></tr>
+                        <tr><td>6</td><td>手拉葫芦</td><td>350×250×200 mm</td><td>3</td><td>20</td><td>4</td><td>提升速度约0.3~0.8 m/min</td></tr>
+                        <tr><td>7</td><td>光伏板</td><td>1860*1100*30mm/1520*1100*30mm</td><td>/</td><td>24/20</td><td>102/2</td><td>/</td></tr>
+                        <tr><td>8</td><td>手持式电动旋紧机器</td><td>780X320x260mm</td><td>/</td><td>28</td><td>若干</td><td>转速60-150，功率3kw</td></tr>
+                        <tr><td>9</td><td>翻斗车</td><td>1260X760x1160mm</td><td>0.5</td><td>155</td><td>若干</td><td>正常工作实践7-8h</td></tr>
+                        <tr><td>10</td><td>穿心式张拉千斤顶</td><td>φ350×385 mm</td><td>/</td><td>160</td><td>2</td><td>公称张拉力 250 kN</td></tr>
+                        <tr><td>11</td><td>超高压电动油泵</td><td>600×400×800 mm</td><td>/</td><td>100</td><td>2</td><td>额定压力 50~63 MPa</td></tr>
+                        <tr><td>12</td><td>钢绞线锚具（工作锚+工具锚）</td><td>φ75*45mm</td><td>/</td><td>/</td><td>12+2</td><td>适用钢绞线 φ12.7~15.7 mm；夹片硬度 HRC 58~62</td></tr>
+                        <tr><td>13</td><td>钢绞线穿束机</td><td>640×440×240 mm</td><td>/</td><td>100</td><td>1</td><td>/</td></tr>
+                        <tr><td>14</td><td>钢绞线放索架（转盘）</td><td>/</td><td>/</td><td>/</td><td>2</td><td>/</td></tr>
+                        <tr><td>15</td><td>手持式砂轮切割机</td><td>/</td><td>/</td><td>/</td><td>/</td><td>用于切断多余钢绞线（距锚具外 30~50 mm）</td></tr>
+                        <tr><td>16</td><td>登高车</td><td>2500×1200×1800 mm</td><td>0.32</td><td>2400</td><td>2</td><td>升高10m</td></tr>
+
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </section>
+
+    <!-- 3. 建造过程模拟 -->
+    <section class="section section-alt" id="construction-process">
+        <div class="container">
+            <h2 class="section-title">建造过程模拟</h2>
+            
+            <!-- 3.1 基座部分（9张图，3*3排版） -->
+            <div class="subsection">
+                <h3 class="subsection-title">3.1 基座部分</h3>
+                <div class="process-grid grid-3x3">
+                    <div class="grid-item with-caption">
+                        <img src="images/construction-process-base-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/construction-process-base-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/construction-process-base-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/construction-process-base-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 class="grid-item with-caption">
+                        <img src="images/construction-process-base-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/construction-process-base-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/construction-process-base-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/construction-process-base-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 class="grid-item with-caption">
+                        <img src="images/construction-process-base-09.jpg" alt="基座施工步骤9" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text small" style="display:none;">基座施工步骤9</div>
+                        <p class="image-caption">9，安装保温墙体及楼梯坡道，基座完成。</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 3.2 主体结构部分（6张图，2*3排版） -->
+            <div class="subsection">
+                <h3 class="subsection-title">3.2 主体结构部分</h3>
+                <div class="process-grid grid-2x3">
+                    <div class="grid-item with-caption">
+                        <img src="images/construction-process-main-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，先组装两段钢管柱，吊装钢管柱到底板预留点位，与预留地螺栓用M24螺栓锚固。</p>
+                    </div>
+                    <div class="grid-item with-caption">
+                        <img src="images/construction-process-main-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，在地面组装屋面钢构件，分四部分用液压千斤顶抬升屋面至指定高度。（2,3步共交替进行4次）</p>
+                    </div>
+                    <div class="grid-item with-caption">
+                        <img src="images/construction-process-main-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，在预留底板点位处固定临时支架，与屋面相连接。（2,3步共交替进行4次）</p>
+                    </div>
+                    <div class="grid-item with-caption">
+                        <img src="images/construction-process-main-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 class="grid-item with-caption">
+                        <img src="images/construction-process-main-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/construction-process-main-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">（拆除下来的临时支架后期安装在基座四周，覆pc中空阳光板做温棚）</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 3.3 屋面围护部分（4张图，1*4排版） -->
+            <div class="subsection">
+                <h3 class="subsection-title">3.3 屋面围护部分</h3>
+                <div class="process-grid grid-1x4">
+                    <div class="grid-item with-caption">
+                        <img src="images/construction-process-roof-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/construction-process-roof-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/construction-process-roof-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/construction-process-roof-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>
+
+            <!-- 3.4 墙面围护部分（4张图，1*4排版） -->
+            <div class="subsection">
+                <h3 class="subsection-title">3.4 墙面围护部分</h3>
+                <div class="process-grid grid-1x4">
+                    <div class="grid-item with-caption">
+                        <img src="images/construction-process-wall-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/construction-process-wall-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/construction-process-wall-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/construction-process-wall-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>
     </section>
@@ -91,7 +664,7 @@
     <!-- 页脚 -->
     <footer class="footer">
         <div class="container">
-            <p>&copy; 2026 毕业设计展示 | 青藏高原轻钢拉索结构医疗站</p>
+            <p>&copy; 2026 毕业设计展示 | 雪域阳光方舟 · 高海拔环境乡村医疗服务基站设计与建造研究</p>
         </div>
     </footer>
 

construction.html.bak

@@ -0,0 +1,448 @@
+    <!-- 内容区域 -->
+    
+    <!-- 1. 建造总图（一张大图） -->
+    <section class="section" id="construction-site">
+        <div class="container">
+            <h2 class="section-title">建造总图</h2>
+            <div class="drawing-full enlarged">
+                <img src="images/construction-siteplan.jpg" alt="建造总图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                <div class="placeholder-text large" style="display:none;">建造总图</div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 2. 构件表 -->
+    <section class="section section-alt" id="component-tables">
+        <div class="container">
+            <h2 class="section-title">构件表</h2>
+            
+            <!-- 2.1 基座部分 -->
+            <div class="subsection">
+                <h3 class="subsection-title">2.1 基座部分</h3>
+                
+                <!-- 上方：左图右表 -->
+                <div class="text-image-layout">
+                    <div class="layout-images">
+                        <img src="images/construction-base-01.jpg" alt="基座部分示意图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text medium" style="display:none;">基座部分示意图</div>
+                    </div>
+                    <div class="layout-table-right">
+                        <table class="performance-table">
+                            <thead>
+                                <tr>
+                                    <th>编号</th>
+                                    <th>名称</th>
+                                    <th>规格</th>
+                                    <th>数量</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr><td>B-01</td><td>基础梁</td><td>200×400mm</td><td>12</td></tr>
+                                <tr><td>B-02</td><td>柱基础</td><td>500×500mm</td><td>8</td></tr>
+                                <tr><td>B-03</td><td>地脚螺栓</td><td>M20</td><td>32</td></tr>
+                                <tr><td>B-04</td><td>垫层</td><td>C15混凝土</td><td>1</td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                
+                <!-- 下方：横向滑动小图（至少8张） -->
+                <div class="image-slider-container">
+                    <div class="image-slider construction-gallery">
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-base-detail-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/construction-base-detail-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/construction-base-detail-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/construction-base-detail-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 class="slider-item with-caption">
+                            <img src="images/construction-base-detail-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="slider-item with-caption">
+                            <img src="images/construction-base-detail-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="slider-item with-caption">
+                            <img src="images/construction-base-detail-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="slider-item with-caption">
+                            <img src="images/construction-base-detail-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 class="slider-hint">← 左右滑动查看更多 →</div>
+                </div>
+            </div>
+
+            <!-- 2.2 主体结构部分 -->
+            <div class="subsection">
+                <h3 class="subsection-title">2.2 主体结构部分</h3>
+                
+                <!-- 上方：左图右表 -->
+                <div class="text-image-layout">
+                    <div class="layout-images">
+                        <img src="images/construction-main-01.jpg" alt="主体结构示意图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text medium" style="display:none;">主体结构示意图</div>
+                    </div>
+                    <div class="layout-table-right">
+                        <table class="performance-table">
+                            <thead>
+                                <tr>
+                                    <th>编号</th>
+                                    <th>名称</th>
+                                    <th>规格</th>
+                                    <th>数量</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr><td>M-01</td><td>钢柱</td><td>H200×200</td><td>8</td></tr>
+                                <tr><td>M-02</td><td>钢梁</td><td>H250×125</td><td>16</td></tr>
+                                <tr><td>M-03</td><td>拉索</td><td>Φ12</td><td>24</td></tr>
+                                <tr><td>M-04</td><td>连接件</td><td>M16</td><td>64</td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                
+                <!-- 下方：横向滑动小图（至少8张） -->
+                <div class="image-slider-container">
+                    <div class="image-slider construction-gallery">
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-main-detail-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/construction-main-detail-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/construction-main-detail-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/construction-main-detail-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 class="slider-item with-caption">
+                            <img src="images/construction-main-detail-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="slider-item with-caption">
+                            <img src="images/construction-main-detail-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="slider-item with-caption">
+                            <img src="images/construction-main-detail-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="slider-item with-caption">
+                            <img src="images/construction-main-detail-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 class="slider-hint">← 左右滑动查看更多 →</div>
+                </div>
+            </div>
+
+            <!-- 2.3 屋面围护部分 -->
+            <div class="subsection">
+                <h3 class="subsection-title">2.3 屋面围护部分</h3>
+                
+                <!-- 上方：左图右表 -->
+                <div class="text-image-layout">
+                    <div class="layout-images">
+                        <img src="images/construction-roof-01.jpg" alt="屋面围护示意图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text medium" style="display:none;">屋面围护示意图</div>
+                    </div>
+                    <div class="layout-table-right">
+                        <table class="performance-table">
+                            <thead>
+                                <tr>
+                                    <th>编号</th>
+                                    <th>名称</th>
+                                    <th>规格</th>
+                                    <th>数量</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr><td>R-01</td><td>屋面板</td><td>1200×6000mm</td><td>20</td></tr>
+                                <tr><td>R-02</td><td>檩条</td><td>C160×60</td><td>40</td></tr>
+                                <tr><td>R-03</td><td>防水层</td><td>TPO卷材</td><td>1</td></tr>
+                                <tr><td>R-04</td><td>保温层</td><td>岩棉板100mm</td><td>1</td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                
+                <!-- 下方：横向滑动小图（至少8张） -->
+                <div class="image-slider-container">
+                    <div class="image-slider construction-gallery">
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-roof-detail-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/construction-roof-detail-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/construction-roof-detail-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/construction-roof-detail-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 class="slider-item with-caption">
+                            <img src="images/construction-roof-detail-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="slider-item with-caption">
+                            <img src="images/construction-roof-detail-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="slider-item with-caption">
+                            <img src="images/construction-roof-detail-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="slider-item with-caption">
+                            <img src="images/construction-roof-detail-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 class="slider-hint">← 左右滑动查看更多 →</div>
+                </div>
+            </div>
+
+            <!-- 2.4 墙面围护部分 -->
+            <div class="subsection">
+                <h3 class="subsection-title">2.4 墙面围护部分</h3>
+                
+                <!-- 上方：左图右表 -->
+                <div class="text-image-layout">
+                    <div class="layout-images">
+                        <img src="images/construction-wall-01.jpg" alt="墙面围护示意图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text medium" style="display:none;">墙面围护示意图</div>
+                    </div>
+                    <div class="layout-table-right">
+                        <table class="performance-table">
+                            <thead>
+                                <tr>
+                                    <th>编号</th>
+                                    <th>名称</th>
+                                    <th>规格</th>
+                                    <th>数量</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr><td>W-01</td><td>外墙板</td><td>1200×3000mm</td><td>48</td></tr>
+                                <tr><td>W-02</td><td>龙骨</td><td>C75×50</td><td>96</td></tr>
+                                <tr><td>W-03</td><td>玻璃窗</td><td>1500×1800mm</td><td>12</td></tr>
+                                <tr><td>W-04</td><td>门</td><td>900×2100mm</td><td>4</td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                
+                <!-- 下方：横向滑动小图（至少8张） -->
+                <div class="image-slider-container">
+                    <div class="image-slider construction-gallery">
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-wall-detail-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/construction-wall-detail-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/construction-wall-detail-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/construction-wall-detail-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 class="slider-item with-caption">
+                            <img src="images/construction-wall-detail-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="slider-item with-caption">
+                            <img src="images/construction-wall-detail-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="slider-item with-caption">
+                            <img src="images/construction-wall-detail-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="slider-item with-caption">
+                            <img src="images/construction-wall-detail-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 class="slider-hint">← 左右滑动查看更多 →</div>
+                </div>
+            </div>
+
+            <!-- 2.5 温棚部分 -->
+            <div class="subsection">
+                <h3 class="subsection-title">2.5 温棚部分</h3>
+                
+                <!-- 上方：左图右表 -->
+                <div class="text-image-layout">
+                    <div class="layout-images">
+                        <img src="images/construction-greenhouse-01.jpg" alt="温棚示意图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <div class="placeholder-text medium" style="display:none;">温棚示意图</div>
+                    </div>
+                    <div class="layout-table-right">
+                        <table class="performance-table">
+                            <thead>
+                                <tr>
+                                    <th>编号</th>
+                                    <th>名称</th>
+                                    <th>规格</th>
+                                    <th>数量</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr><td>G-01</td><td>骨架</td><td>镀锌钢管</td><td>24</td></tr>
+                                <tr><td>G-02</td><td>覆盖膜</td><td>PO膜0.12mm</td><td>1</td></tr>
+                                <tr><td>G-03</td><td>通风窗</td><td>电动开启</td><td>4</td></tr>
+                                <tr><td>G-04</td><td>遮阳网</td><td>外遮阳系统</td><td>1</td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                
+                <!-- 下方：横向滑动小图（至少8张） -->
+                <div class="image-slider-container">
+                    <div class="image-slider construction-gallery">
+                        <div class="slider-item with-caption">
+                            <img src="images/construction-greenhouse-detail-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/construction-greenhouse-detail-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/construction-greenhouse-detail-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/construction-greenhouse-detail-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 class="slider-item with-caption">
+                            <img src="images/construction-greenhouse-detail-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="slider-item with-caption">
+                            <img src="images/construction-greenhouse-detail-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="slider-item with-caption">
+                            <img src="images/construction-greenhouse-detail-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="slider-item with-caption">
+                            <img src="images/construction-greenhouse-detail-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 class="slider-hint">← 左右滑动查看更多 →</div>
+                </div>
+            </div>
+
+            <!-- 2.6 设备部分（只有一张表） -->
+            <div class="subsection">
+                <h3 class="subsection-title">2.6 设备部分</h3>
+                
+                <table class="performance-table wide">
+                    <thead>
+                        <tr>
+                            <th>编号</th>
+                            <th>设备名称</th>
+                            <th>型号规格</th>
+                            <th>数量</th>
+                            <th>备注</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr><td>E-01</td><td>太阳能光伏板</td><td>550W单晶</td><td>20</td><td>屋顶安装</td></tr>
+                        <tr><td>E-02</td><td>逆变器</td><td>10kW</td><td>2</td><td>室内安装</td></tr>
+                        <tr><td>E-03</td><td>蓄电池组</td><td>48V/200Ah</td><td>4</td><td>储能系统</td></tr>
+                        <tr><td>E-04</td><td>雨水收集系统</td><td>5000L</td><td>1</td><td>地下埋设</td></tr>
+                        <tr><td>E-05</td><td>净水设备</td><td>RO反渗透</td><td>1</td><td>室内安装</td></tr>
+                        <tr><td>E-06</td><td>供暖设备</td><td>空气源热泵</td><td>2</td><td>室外安装</td></tr>
+                        <tr><td>E-07</td><td>通风系统</td><td>新风换气机</td><td>2</td><td>吊顶安装</td></tr>
+                        <tr><td>E-08</td><td>照明系统</td><td>LED智能控制</td><td>1</td><td>全屋覆盖</td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </section>
+
+    <!-- 页脚 -->
+    <footer class="footer">
+        <div class="container">
+            <p>&copy; 2026 毕业设计展示 | 雪域阳光方舟 · 高海拔环境乡村医疗服务基站设计与建造研究</p>
+        </div>
+    </footer>
+
+    <!-- JavaScript -->
+    <script src="js/main.js"></script>
+</body>
+</html>

css/style.css

@@ -962,3 +962,678 @@ 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: 2;  /* 图片区占2份 */
+}
+
+.layout-text {
+    flex: 1;  /* 文字区占1份 */
+}
+
+.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;
+    max-height: 500px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+/* 表格容器 - 用于限制表格高度并添加滚动 */
+.table-container {
+    max-height: 500px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    border-radius: var(--border-radius);
+}
+
+/* ========================================
+   性能分析 - 左侧表格+右侧文字布局
+   ======================================== */
+.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;
+}
+
+/* ========================================
+   设计表现 - 图片完整展示样式
+   ======================================== */
+
+/* 鸟瞰图区域 */
+#aerial-view .gallery-item .placeholder-img,
+#aerial-view .placeholder-img img {
+    object-fit: contain !important;
+    background: #FFFFFF !important;
+    max-height: 70vh !important;  /* 限制最大高度为视口高度的70% */
+}
+
+#aerial-view .gallery-item.large .placeholder-img {
+    min-height: auto !important;  /* 移除最小高度限制 */
+    height: auto !important;      /* 自动高度 */
+}
+
+/* 室外透视图区域 */
+#exterior-perspective .card-image img {
+    width: 100%;
+    height: 400px;
+    object-fit: contain !important;
+    background: #FFFFFF !important;
+    display: block;
+}
+
+/* 室内透视图区域 */
+#interior-perspective .card-image img {
+    width: 100%;
+    height: 350px;
+    object-fit: contain !important;
+    background: #FFFFFF !important;
+    display: block;
+}
+
+/* 通用：设计表现页面所有图片容器 */
+#design .card-image,
+#design .placeholder-img {
+    overflow: visible !important;
+}
+
+/* 确保图片不会被裁剪 */
+#design img {
+    max-width: 100%;
+    height: auto;
+}
+
+/* ========================================
+   设计图纸 - 单列布局样式
+   ======================================== */
+
+/* 总平面图和一层平面图 - 高度增加三分之一 */
+.drawing-full.enlarged {
+    max-height: 100vh !important;  /* 从80vh增加到100vh，约增加25% */
+}
+
+.drawing-full.enlarged img {
+    max-height: 100vh !important;
+}
+
+/* 单列布局容器 */
+.single-column-layout {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-lg);
+}
+
+/* 全宽卡片 */
+.full-width-card {
+    width: 100%;
+    max-width: none;
+}
+
+/* 全宽图片容器 */
+.drawing-img.wide-full {
+    height: auto;
+    min-height: 1000px;  /* 从500px增加到1000px，2倍 */
+    max-height: 140vh;   /* 从70vh增加到140vh，2倍 */
+}
+
+.drawing-img.wide-full img {
+    width: 100%;
+    height: auto;
+    max-height: 140vh;   /* 从70vh增加到140vh，2倍 */
+    object-fit: contain;
+    background: #FFFFFF;
+}
+
+/* 响应式调整 */
+@media (max-width: 1024px) {
+    .drawing-full.enlarged {
+        max-height: 80vh !important;
+    }
+    
+    .drawing-full.enlarged img {
+        max-height: 80vh !important;
+    }
+    
+    .drawing-img.wide-full {
+        min-height: 800px;   /* 从400px增加到800px，2倍 */
+        max-height: 120vh;   /* 从60vh增加到120vh，2倍 */
+    }
+    
+    .drawing-img.wide-full img {
+        max-height: 120vh;   /* 从60vh增加到120vh，2倍 */
+    }
+}
+
+@media (max-width: 768px) {
+    .drawing-full.enlarged {
+        max-height: 60vh !important;
+    }
+    
+    .drawing-full.enlarged img {
+        max-height: 60vh !important;
+    }
+    
+    .drawing-img.wide-full {
+        min-height: 600px;   /* 从300px增加到600px，2倍 */
+        max-height: 100vh;   /* 从50vh增加到100vh，2倍 */
+    }
+    
+    .drawing-img.wide-full img {
+        max-height: 100vh;   /* 从50vh增加到100vh，2倍 */
+    }
+}
+
+/* ========================================
+   自保障设计 - 图片对排布局（带图名）
+   ======================================== */
+.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;
+    }
+}
+
+/* ========================================
+   响应式调整
+   ======================================== */
+@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;
+    }
+}
+
+/* ========================================
+   建造模拟 - 构件表专用样式
+   ======================================== */
+
+/* 子板块标题 */
+.subsection {
+    margin-bottom: var(--spacing-xl);
+    padding-bottom: var(--spacing-lg);
+    border-bottom: 2px solid var(--primary-muted);
+}
+
+.subsection:last-child {
+    border-bottom: none;
+}
+
+.subsection-title {
+    font-size: 1.8rem;
+    color: var(--text-primary);
+    margin-bottom: var(--spacing-md);
+    font-weight: 600;
+    letter-spacing: 1px;
+}
+
+/* 上方左图右表布局 */
+.text-image-layout .layout-images img {
+    width: 100%;
+    height: auto;
+    max-height: 500px;
+    object-fit: contain;
+    background: #FFFFFF;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-soft);
+}
+
+.placeholder-text.medium {
+    min-height: 400px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, var(--primary-muted) 0%, var(--primary-light) 100%);
+    color: var(--primary-dark);
+    font-size: 1.2rem;
+    border-radius: var(--border-radius);
+}
+
+/* 下方横向滑动小图 */
+.image-slider-container {
+    margin-top: var(--spacing-lg);
+}
+
+.slider-hint {
+    text-align: center;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    margin-top: var(--spacing-sm);
+    font-style: italic;
+}
+
+.image-slider.construction-gallery .slider-item {
+    width: 250px;
+    flex-shrink: 0;
+}
+
+.image-slider.construction-gallery .slider-item img {
+    width: 100%;
+    height: 200px;
+    object-fit: contain;
+    background: #FFFFFF;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-soft);
+}
+
+.image-slider.construction-gallery .image-caption {
+    font-size: 0.85rem;
+    padding: var(--spacing-xs) 0;
+    border-top: 1px solid var(--primary-muted);
+}
+
+/* 响应式调整 */
+@media (max-width: 1024px) {
+    .text-image-layout {
+        flex-direction: column;
+    }
+    
+    .layout-images {
+        width: 100%;
+    }
+    
+    .layout-table-right {
+        width: 100%;
+    }
+    
+    .text-image-layout .layout-images img {
+        max-height: 400px;
+    }
+    
+    .placeholder-text.medium {
+        min-height: 300px;
+    }
+    
+    .image-slider.construction-gallery .slider-item {
+        width: 200px;
+    }
+    
+    .image-slider.construction-gallery .slider-item img {
+        height: 160px;
+    }
+}
+
+@media (max-width: 768px) {
+    .subsection-title {
+        font-size: 1.5rem;
+    }
+    
+    .text-image-layout .layout-images img {
+        max-height: 300px;
+    }
+    
+    .placeholder-text.medium {
+        min-height: 250px;
+    }
+    
+    .image-slider.construction-gallery .slider-item {
+        width: 180px;
+    }
+    
+    .image-slider.construction-gallery .slider-item img {
+        height: 140px;
+    }
+    
+    .image-slider.construction-gallery .image-caption {
+        font-size: 0.8rem;
+    }
+}
+
+/* ========================================
+   建造过程模拟 - 网格布局
+   ======================================== */
+.process-grid {
+    display: grid;
+    gap: var(--spacing-md);
+    margin-bottom: var(--spacing-xl);
+}
+
+/* 3x3 网格（基座部分） */
+.grid-3x3 {
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, auto);
+}
+
+/* 2x3 网格（主体结构部分） */
+.grid-2x3 {
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, auto);
+}
+
+/* 1x4 横向网格（屋面、墙面围护部分） */
+.grid-1x4 {
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: 1fr;
+}
+
+/* 网格项通用样式 */
+.grid-item {
+    background: var(--bg-card);
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-soft);
+    overflow: hidden;
+    transition: var(--transition);
+}
+
+.grid-item:hover {
+    box-shadow: var(--shadow-hover);
+    transform: translateY(-5px);
+}
+
+.grid-item img {
+    width: 100%;
+    height: 250px;
+    object-fit: contain;
+    background: #FFFFFF;
+    display: block;
+}
+
+.grid-item .placeholder-text.small {
+    min-height: 250px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-light);
+    font-size: 0.9rem;
+}
+
+/* 图名标注样式 */
+.image-caption {
+    padding: 1rem;
+    text-align: center;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    background: var(--bg-primary);
+    border-top: 2px solid var(--primary-muted);
+    margin: 0;
+    font-weight: 500;
+    line-height: 1.6;
+}
+
+/* 响应式适配 */
+@media (max-width: 1200px) {
+    /* 平板端：3x3和2x3改为2列，1x4改为2行2列 */
+    .grid-3x3,
+    .grid-2x3 {
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: auto;
+    }
+    
+    .grid-1x4 {
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(2, auto);
+    }
+}
+
+@media (max-width: 768px) {
+    /* 移动端：所有网格改为单列 */
+    .grid-3x3,
+    .grid-2x3,
+    .grid-1x4 {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto;
+    }
+    
+    .grid-item img {
+        height: 200px;
+    }
+    
+    .image-caption {
+        font-size: 0.85rem;
+        padding: 0.8rem;
+    }
+}
+

design.html

@@ -72,7 +72,7 @@
                     </div>
                     <div class="gallery-caption">
                         <h3>整体鸟瞰效果图</h3>
-                        <p>展示建筑与周边环境的整体关系，体现轻钢拉索结构的空间特征。</p>
+                        <p>展示建筑与周边环境的整体关系。</p>
                     </div>
                 </div>
             </div>
@@ -92,7 +92,7 @@
                     </div>
                     <div class="card-content">
                         <h3>主入口透视</h3>
-                        <p>展示建筑主入口的外观效果，体现轻钢结构与玻璃幕墙的结合。</p>
+                        <p>展示建筑主入口的外观效果。</p>
                     </div>
                 </div>
                 
@@ -104,7 +104,7 @@
                     </div>
                     <div class="card-content">
                         <h3>侧面透视</h3>
-                        <p>展示建筑侧面的拉索结构与立面细节。</p>
+                        <p>建筑急救入口一侧透视图。</p>
                     </div>
                 </div>
             </div>
@@ -123,8 +123,8 @@
                         <div class="placeholder-text" style="display:none;">室内透视图1</div>
                     </div>
                     <div class="card-content">
-                        <h3>诊室空间</h3>
+                        <h3>室内透视1</h3>
-                        <p>展示诊室的内部空间布局与采光效果。</p>
+                        <p>主入口望向健康教育室透视</p>
                     </div>
                 </div>
                 
@@ -135,8 +135,8 @@
                         <div class="placeholder-text" style="display:none;">室内透视图2</div>
                     </div>
                     <div class="card-content">
-                        <h3>候诊大厅</h3>
+                        <h3>室内透视2</h3>
-                        <p>展示候诊区的空间组织与人流导向。</p>
+                        <p>诊疗室望向健康教育室透视</p>
                     </div>
                 </div>
                 
@@ -147,8 +147,8 @@
                         <div class="placeholder-text" style="display:none;">室内透视图3</div>
                     </div>
                     <div class="card-content">
-                        <h3>治疗室</h3>
+                        <h3>室内透视3</h3>
-                        <p>展示治疗室的功能布局与设备配置。</p>
+                        <p>医生休息室门前走廊望向导诊台和取药处</p>
                     </div>
                 </div>
             </div>
@@ -158,7 +158,7 @@
     <!-- 页脚 -->
     <footer class="footer">
         <div class="container">
-            <p>&copy; 2026 毕业设计展示 | 青藏高原轻钢拉索结构医疗站</p>
+            <p>&copy; 2026 毕业设计展示 | 雪域阳光方舟 · 高海拔环境乡村医疗服务基站设计与建造研究</p>
         </div>
     </footer>
 

drawings.html

@@ -64,7 +64,7 @@
     <section class="section" id="site-plan">
         <div class="container">
             <h2 class="section-title">总平面图</h2>
-            <div class="drawing-full">
+            <div class="drawing-full enlarged">
                 <img src="images/drawing-siteplan.jpg" alt="总平面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                 <div class="placeholder-text large" style="display:none;">总平面图</div>
             </div>
@@ -75,21 +75,21 @@
     <section class="section section-alt" id="floor-plan">
         <div class="container">
             <h2 class="section-title">一层平面图</h2>
-            <div class="drawing-full">
+            <div class="drawing-full enlarged">
                 <img src="images/drawing-floorplan.jpg" alt="一层平面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                 <div class="placeholder-text large" style="display:none;">一层平面图</div>
             </div>
         </div>
     </section>
 
-    <!-- 立面图（4张） -->
+    <!-- 立面图（4张，单列展示） -->
     <section class="section" id="elevations">
         <div class="container">
             <h2 class="section-title">立面图</h2>
-            <div class="card-grid two-columns">
+            <div class="single-column-layout">
                 <!-- 东立面 -->
-                <div class="card">
+                <div class="card full-width-card">
-                    <div class="card-image drawing-img">
+                    <div class="card-image drawing-img wide-full">
                         <img src="images/drawing-elevation-east.jpg" alt="东立面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                         <div class="placeholder-text" style="display:none;">东立面图</div>
                     </div>
@@ -99,8 +99,8 @@
                 </div>
                 
                 <!-- 南立面 -->
-                <div class="card">
+                <div class="card full-width-card">
-                    <div class="card-image drawing-img">
+                    <div class="card-image drawing-img wide-full">
                         <img src="images/drawing-elevation-south.jpg" alt="南立面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                         <div class="placeholder-text" style="display:none;">南立面图</div>
                     </div>
@@ -110,8 +110,8 @@
                 </div>
                 
                 <!-- 西立面 -->
-                <div class="card">
+                <div class="card full-width-card">
-                    <div class="card-image drawing-img">
+                    <div class="card-image drawing-img wide-full">
                         <img src="images/drawing-elevation-west.jpg" alt="西立面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                         <div class="placeholder-text" style="display:none;">西立面图</div>
                     </div>
@@ -121,8 +121,8 @@
                 </div>
                 
                 <!-- 北立面 -->
-                <div class="card">
+                <div class="card full-width-card">
-                    <div class="card-image drawing-img">
+                    <div class="card-image drawing-img wide-full">
                         <img src="images/drawing-elevation-north.jpg" alt="北立面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                         <div class="placeholder-text" style="display:none;">北立面图</div>
                     </div>
@@ -134,14 +134,14 @@
         </div>
     </section>
 
-    <!-- 剖面图（2张） -->
+    <!-- 剖面图（2张，单列展示） -->
     <section class="section section-alt" id="sections">
         <div class="container">
             <h2 class="section-title">剖面图</h2>
-            <div class="card-grid two-columns">
+            <div class="single-column-layout">
                 <!-- 1-1剖面 -->
-                <div class="card">
+                <div class="card full-width-card">
-                    <div class="card-image drawing-img">
+                    <div class="card-image drawing-img wide-full">
                         <img src="images/drawing-section-1.jpg" alt="1-1剖面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                         <div class="placeholder-text" style="display:none;">1-1剖面图</div>
                     </div>
@@ -151,8 +151,8 @@
                 </div>
                 
                 <!-- 2-2剖面 -->
-                <div class="card">
+                <div class="card full-width-card">
-                    <div class="card-image drawing-img">
+                    <div class="card-image drawing-img wide-full">
                         <img src="images/drawing-section-2.jpg" alt="2-2剖面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                         <div class="placeholder-text" style="display:none;">2-2剖面图</div>
                     </div>
@@ -164,10 +164,89 @@
         </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>
+                    <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">柱头耳板细节</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">柱底耳板细节</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">上下两段柱连接处法兰盘细节</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">圆钢管柱外套筒</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layout-text">
+                        <p class="large-text">圆钢管柱规格：Φ219×6mm，L=10m，倾斜20°：</p>
+                        <p class="large-text">分段方式：切为 下段5m + 上段5m。每段两端焊外法兰盘：法兰外径 =Φ320，法兰厚度δ=14mm，螺栓分布圆 Φ280</p>
+                        <p class="large-text">8M20  高强螺栓，均匀分布。</p>
+                        <p class="large-text">法兰与钢管连接处设环形加劲肋。</p>
+                        <p class="large-text">拆分为上下两段，方便运输，利用螺栓现场组装快速。</p>
+                        <p class="large-text">现场安装好钢管柱后，外侧利用定位撑环固定外侧的装饰套筒，套筒处预留耳板传出的位置，既能使柱身更美观，也可以抵御高原日晒对柱身结构的影响。</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- 页脚 -->
     <footer class="footer">
         <div class="container">
-            <p>&copy; 2026 毕业设计展示 | 青藏高原轻钢拉索结构医疗站</p>
+            <p>&copy; 2026 毕业设计展示 | 雪域阳光方舟 · 高海拔环境乡村医疗服务基站设计与建造研究</p>
         </div>
     </footer>
 

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张横向滑动图+左侧文字+右侧大图
+
+✅ **响应式适配**  
+- 桌面端：所有布局正常
+- 平板端：图文堆叠，表格自适应
+- 手机端：单列布局，图片缩小
+
+---
+
+**祝你顺利添加图片！** 
+
+*如有问题，随时告诉我！*