Files
new-site/construction.html.bak

449 lines
31 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!-- 内容区域 -->
<!-- 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>