重构建造模拟：建造总图（大图），构件表6部分（基座/主体/屋面/墙面/温棚/设备），前5部分上图下表+滑动小图，第6部分仅表格
This commit is contained in:
@@ -1,101 +1,438 @@
|
|||||||
<!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="建造模拟：场地总图、流程表、构件表">
|
|
||||||
|
|
||||||
<!-- Base Path for Subdirectory Deployment -->
|
|
||||||
<base href="/g2026/g4/">
|
|
||||||
|
|
||||||
<!-- Smart Path Detection -->
|
|
||||||
<script>
|
|
||||||
(function() {
|
|
||||||
const hostname = window.location.hostname;
|
|
||||||
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">
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<!-- 内容区域 -->
|
<!-- 内容区域 -->
|
||||||
<section class="section">
|
|
||||||
|
<!-- 1. 建造总图（一张大图） -->
|
||||||
|
<section class="section" id="construction-site">
|
||||||
<div class="container">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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">
|
<div class="container">
|
||||||
<h2 class="section-title">构件表</h2>
|
<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>数量</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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 页脚 -->
|
<!-- 页脚 -->
|
||||||
<footer class="footer">
|
|
||||||
<div class="container">
|
|
||||||
<p>© 2026 毕业设计展示 | 青藏高原轻钢拉索结构医疗站</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- JavaScript -->
|
|
||||||
<script src="js/main.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
135
css/style.css
135
css/style.css
@@ -1385,3 +1385,138 @@ body {
|
|||||||
max-height: 50vh;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user