Files
new-site/construction.html

506 lines
33 KiB
HTML
Raw 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.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- SEO Meta Tags -->
<title>建造模拟 - 轻索方舱 | 高海拔环境乡村医疗服务基站</title>
<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 - 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) {
baseTag.remove();
console.log('🔧 Local dev mode: base tag removed');
}
}
})();
</script>
<!-- Stylesheet -->
<link rel="stylesheet" href="css/style.css">
<!-- Favicon -->
<!-- <link rel="icon" type="image/png" href="images/favicon.png"> -->
</head>
<body>
<!-- 顶部固定导航栏 -->
<nav class="navbar" id="navbar">
<div class="nav-container">
<div class="nav-logo">毕业设计展示</div>
<ul class="nav-menu" id="navMenu">
<li><a href="index.html" class="nav-link">首页</a></li>
<li><a href="analysis.html" class="nav-link">前期分析</a></li>
<li><a href="design.html" class="nav-link">设计表现</a></li>
<li><a href="drawings.html" class="nav-link">设计图纸</a></li>
<li><a href="performance.html" class="nav-link">性能分析</a></li>
<li><a href="self-sufficiency.html" class="nav-link">自保障设计</a></li>
<li><a href="construction.html" class="nav-link active">建造模拟</a></li>
<li><a href="about.html" class="nav-link">关于项目</a></li>
</ul>
<div class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<!-- 页面标题区域 -->
<section class="page-header">
<div class="container">
<h1 class="page-title">建造模拟</h1>
<p class="page-subtitle">Construction Simulation</p>
</div>
</section>
<!-- 内容区域 -->
<!-- 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">
<div class="table-container">
<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>
</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">
<div class="table-container">
<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>
</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">
<div class="table-container">
<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>
</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">
<div class="table-container">
<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>
</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>
<!-- 下方:构件表 -->
<div class="table-container">
<table class="performance-table wide">
<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>
<!-- 2.6 设备部分(只有一张表) -->
<div class="subsection">
<h3 class="subsection-title">2.6 设备部分</h3>
<div class="table-container">
<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>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<p>&copy; 2026 毕业设计展示 | 雪域阳光方舟 · 高海拔环境乡村医疗服务基站设计与建造研究</p>
</div>
</footer>
<!-- JavaScript -->
<script src="js/main.js"></script>
</body>
</html>