Compare commits
25 Commits
b148167783
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 72e340a7b4 | |||
| bab511ec62 | |||
| d26b4fbcee | |||
| 5a0018d1b5 | |||
| 2478e730fb | |||
| 549c258a36 | |||
| a59928fdc1 | |||
| b7f0c739ef | |||
| 47adff8869 | |||
| 9d18235e9d | |||
| abce083dc4 | |||
| d0f8d72398 | |||
| cbb655274b | |||
| 92afe8d88c | |||
| 4a82620f1c | |||
| 6c8710d3b8 | |||
| 02b36ee131 | |||
| e856615c60 | |||
| de8a9ecea2 | |||
| 68028f36ad | |||
| 8a86668eb1 | |||
| ec29003082 | |||
| d32736b2d0 | |||
| 94d9680174 | |||
| d9c0b6ade9 |
11
.vscode/settings.json
vendored
Normal file
11
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"liveServer.settings.port": 5500,
|
||||||
|
"liveServer.settings.root": "/",
|
||||||
|
"liveServer.settings.CustomBrowser": "chrome",
|
||||||
|
"liveServer.settings.NoBrowser": false,
|
||||||
|
"liveServer.settings.ignoreFiles": [
|
||||||
|
".git",
|
||||||
|
"**/*.sass",
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
|
}
|
||||||
117
about.html
Normal file
117
about.html
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
<!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">建造模拟</a></li>
|
||||||
|
<li><a href="about.html" class="nav-link active">关于项目</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">About the Project</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 内容区域 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">项目信息</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<div class="project-info">
|
||||||
|
<p><strong>项目名称：</strong>雪域阳光方舟 · 高海拔环境乡村医疗服务基站设计与建造研究</p>
|
||||||
|
<p><strong>关键词：</strong>高海拔极端环境·乡村医疗基站·轻型斜拉结构·装配式建造·性能化设计·自保障设计</p>
|
||||||
|
<p><strong>学生姓名：</strong>杨雨晴</p>
|
||||||
|
<p><strong>指导教师：</strong>东南大学：张宏、张弦、李向锋、周欣、张军军、叶红雨、伍雁华；内蒙古工业大学：伊若勒泰、布音敖其尔</p>
|
||||||
|
<p><strong>学校专业：</strong>东南大学 建筑学专业</p>
|
||||||
|
<p><strong>完成时间：</strong>2026年2月~5月</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section section-alt">
|
||||||
|
<div class="container">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<p>© 2026 毕业设计展示 | 雪域阳光方舟 · 高海拔环境乡村医疗服务基站设计与建造研究</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- JavaScript -->
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
400
analysis.html
Normal file
400
analysis.html
Normal file
@@ -0,0 +1,400 @@
|
|||||||
|
<!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 active">前期分析</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">建造模拟</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">Preliminary Analysis</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 1.1 课题任务解析 -->
|
||||||
|
<section class="section" id="task-analysis">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">1.1 课题任务解析</h2>
|
||||||
|
<div class="content-block">
|
||||||
|
<p class="large-text">课题任务解析：</p>
|
||||||
|
<ul class="info-list">
|
||||||
|
<li>研究背景：本课题为 2026 年东南大学、西藏民族大学、西藏大学、内蒙古工业大学四校联合建造毕业设计。在积极响应国家“智能建造”、“碳中和”与“高质量与绿色转型发展”战略方针的宏观背景下，建筑工业化已成为行业核心趋势。当今时代的装配式建筑，其发展已从追求预制率转向以构件法为核心的智能化、精细化新阶段。与此同时，针对西藏高寒、高海拔、运输与施工条件严苛的极端环境，轻钢结构因其自重轻、强度高、构件标准化程度高、可快速装配等优势，成为实现高效、可靠建造的理想选择。其良好的可塑性与工厂预制精度，便于与高性能可再生材料结合。通过复合围护构造优化解决保温与冷桥问题，也能够满足建筑在极端环境下的性能与耐久性要求。本课题旨在将装配式建筑的先进设计理念、智能建造流程与轻钢结构体系在高寒地区的适应性应用相结合。
|
||||||
|
同时，本课题兼具人文关怀。课题关注到，即便近年来随着国家发展，西藏地区的医疗水平有所提升，但以那曲为代表的藏北地区，受制于高海拔、地广人稀、气候恶劣的地理环境，基层医疗的可及性仍是核心痛点。要想提高整体民生水平，探寻在藏北地区最末梢的牧区铺开医疗设施的模式值得被探索。
|
||||||
|
</li>
|
||||||
|
<li>研究目标：本次毕业设计将从建筑设计、建造模拟、性能分析、自保障设计、室内设计五个方面展开，旨在完成一个以轻型钢材（60mm钢管）为主要结构的建筑设计方案，它将扎根于那曲市班戈县央木布村的环境之中，为牧区居民提供基础医疗服务。该方案将集成数字化建造、可再生能源系统和自保障功能，致力于在极端环境下实现建筑的宜居性、低能耗和快速建造。</li>
|
||||||
|
<li>技术路线：技术路线：1.概念设计 → 2. 数字模型构建 → 3.参数化设计 → 4. 构件设计 → 5. 方案迭代 →6. 构件深化→7. 建筑形态与空间设计→8. 力学性能模拟→9. 力学性能模拟→10. 室内设计→11. 深化设计与表达。</li>
|
||||||
|
<li>研究方法与预期成果：首先通过现场调研和文献研究明确设计目标与挑战，结合西藏自治区那曲市班戈县佳琼镇央木布村的气候、环境、场所、人文特征等，结合生态敏感性，选择合理的技术方案，包括可再生材料、可再生能源、电力资源取得、水源取得、中水利用、污水处理、抗风结构等方面，综合运用数据化建筑设计、智能建造相关原理和性能模拟优化技术，设计完成一套医疗服务保障基站的建筑设计方案，同时设计结合建造，最后通过性能模拟验证设计效果，建筑设备等知识，优化建筑墙体、屋面、地面、外窗等围护构造，降低建筑本体耗能，结合可再生能源技术，使建筑综合能效指标达到节能建筑标准，最终使设计方案得以建造落实。</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 1.2 场地分析 -->
|
||||||
|
<section class="section section-alt" id="site-analysis">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">1.2 场地分析</h2>
|
||||||
|
|
||||||
|
<!-- 1.2.1 自然地理环境分析（9张图） -->
|
||||||
|
<div class="subsection">
|
||||||
|
<h3 class="subsection-title">1.2.1 自然地理环境分析</h3>
|
||||||
|
<div class="card-grid analysis-grid-9">
|
||||||
|
<!-- 图片1 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image analysis-img">
|
||||||
|
<img src="images/site-nature-01.jpg" alt="自然地理图1" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||||
|
<div class="placeholder-text" style="display:none;">自然地理图1</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>央木布村航拍图</h3>
|
||||||
|
<p>本课题设计场地位于央布木村，村庄位于西藏那曲市班戈县佳琼镇，地处青藏高原北部藏北高原，海拔约4697米。当地气候属于属于高原亚寒带季风半干旱气候，全年低温，温差大，太阳辐射强，积雪期长。村庄背山面草原，气温常年底下、降水量低、刮风天较多。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 图片2 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image analysis-img">
|
||||||
|
<img src="images/site-nature-02.jpg" alt="自然地理图2" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||||
|
<div class="placeholder-text" style="display:none;">自然地理图2</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>气温降水月分布图</h3>
|
||||||
|
<p>每月温度波动大，冬季干球温度可低至 -25℃以下，夏季不超过20℃。6 月到 8 月气温相对较高，8 月至次年 5 月持续降温，基本保持在 0 摄氏度以下。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 图片3 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image analysis-img">
|
||||||
|
<img src="images/site-nature-03.jpg" alt="自然地理图3" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||||
|
<div class="placeholder-text" style="display:none;">自然地理图3</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>降水频率图</h3>
|
||||||
|
<p>年平均降水量308.3mm，全年降水较为稀少，降水月分布不均。降水主要集中在6-9月，尤其是7-8月。降雪季节从每年的10月到次年5月，以小雪为主，偶有中到大雪，一般一年内有 10 到 15 次的降雪。年降水天气100天左右。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 图片4 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image analysis-img">
|
||||||
|
<img src="images/site-nature-04.jpg" alt="自然地理图4" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||||
|
<div class="placeholder-text" style="display:none;">自然地理图4</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>班戈县全年风玫瑰图</h3>
|
||||||
|
<p>场地盛行西南风，刮风集中在 12 月至次年 5 月，下午至早晨风力较大，上午风力较小。年平均风速为 4.13米/秒，月均风速范围为3.11~5.16米/秒，年极大风速达33.2米/秒。风能较充足。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 图片5 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image analysis-img">
|
||||||
|
<img src="images/site-nature-05.jpg" alt="自然地理图5" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||||
|
<div class="placeholder-text" style="display:none;">自然地理图5</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>场地盛行风向图</h3>
|
||||||
|
<p>场地盛行西南风,央布木村由于海拔高、植被稀疏、气候干燥，加上冬季和春季风力较强，降水少，容易出现大风天气，并可能吹起地面砂石形成风沙。这类天气下不宜开窗，直接开窗通风会导致大量沙尘进入室内，影响空气质量、居住舒适度甚至家用设备的使用寿命。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 图片6 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image analysis-img">
|
||||||
|
<img src="images/site-nature-06.jpg" alt="自然地理图6" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||||
|
<div class="placeholder-text" style="display:none;">自然地理图6</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>那曲水平太阳辐射量</h3>
|
||||||
|
<p>地处高原，空气稀薄，降水稀少，天气晴朗，3 - 9月日照强度明显增强，5 - 7月尤为剧烈，太阳资源丰富。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 图片7 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image analysis-img">
|
||||||
|
<img src="images/site-nature-07.jpg" alt="自然地理图7" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||||
|
<div class="placeholder-text" style="display:none;">自然地理图7</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>那曲太阳高度角</h3>
|
||||||
|
<p>地处高原，空气稀薄，降水稀少，天气晴朗，3 - 9月日照强度明显增强，5 - 7月尤为剧烈，太阳资源丰富。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 图片8 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image analysis-img">
|
||||||
|
<img src="images/site-nature-08.jpg" alt="自然地理图8" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||||
|
<div class="placeholder-text" style="display:none;">自然地理图8</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>班戈县晴雨天气分布图</h3>
|
||||||
|
<p>央木布村降雪以干雪（粉雪）为主，雪花在落地过程中不易融化，多数情况下形成松散、不易结块的干雪。雪量不大，日常小雪积累厚度一般较薄（1-5厘米），但低温使得积雪不易融化，可能长期覆盖地面。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 图片9 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image analysis-img">
|
||||||
|
<img src="images/site-nature-09.jpg" alt="自然地理图9" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||||
|
<div class="placeholder-text" style="display:none;">自然地理图9</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>土壤情况</h3>
|
||||||
|
<p>村庄大面积覆盖的是草原 ，村内土地表层为砂石，但是覆盖率较低， 砂石覆盖在从表层到土地内部将近 10 到 15 厘米左右， 以下为沙土层， 但是由于气温较低，此沙土层较为坚固。地下有冻土层。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 1.2.2 经济、人口和基础设施（1张图） -->
|
||||||
|
<div class="subsection">
|
||||||
|
<h3 class="subsection-title">1.2.2 经济、人口和基础设施</h3>
|
||||||
|
<div class="card-grid analysis-grid-single">
|
||||||
|
<div class="card single-card">
|
||||||
|
<div class="card-image analysis-img wide">
|
||||||
|
<img src="images/site-economy.jpg" alt="经济人口基础设施分析图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||||
|
<div class="placeholder-text" style="display:none;">经济人口基础设施分析图</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>经济、人口和基础设施分析</h3>
|
||||||
|
<li>·经济水平：
|
||||||
|
2023年GDP 12.74亿元，农村人均可支配收入19969元（低于全国平均水平），经济以牧业为主，政策补贴（如草原生态奖补）占重要比重。</li>
|
||||||
|
|
||||||
|
·主导产业：
|
||||||
|
传统畜牧业：牦牛、藏羊养殖为主，受限于草场保护政策与降雪减少导致的草料短缺。
|
||||||
|
商业：2家餐馆兼商店，服务本地基本需求，但规模小、附加值低。
|
||||||
|
|
||||||
|
<li>·人口情况：
|
||||||
|
村内居民约600人，男女比例1：1，男性稍多。村庄共有100多户人家，每户约2-3个小孩，青年外出务工，目前村里以老年人和妇女儿童为主。当地主要以传统牧业为主。居民分布较为集中，少数家庭居住较为零散，最远可达20公里。</li>
|
||||||
|
|
||||||
|
<li>·基础设施情况：
|
||||||
|
电力：依靠太阳能光伏和夜间发动机发电，未接通电网。
|
||||||
|
交通：从班戈县到此村庄有将近两个小时车程，道路情况为半柏油路半土路，目前柏油路的维修进度止步于此村庄。
|
||||||
|
思考：建筑需考虑自发电自适应。</li>
|
||||||
|
|
||||||
|
<li>·村内厕所与排泄物处理方式：
|
||||||
|
传统旱厕为主，通常是在院子的一角单独建一个小屋，地下挖一个深坑，坑上放置两块木板或水泥板作为蹲位。厕所没有冲水系统，粪便直接排入坑中积存。村民会定期进行人工清掏，清掏出来的粪便传统上会直接作为农家肥。</li>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 1.3 案例分析 -->
|
||||||
|
<section class="section" id="case-study">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">1.3 案例分析</h2>
|
||||||
|
<div class="card-grid analysis-grid">
|
||||||
|
<!-- 案例1 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image analysis-img">
|
||||||
|
<img src="images/analysis-04.jpg" alt="案例1" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||||
|
<div class="placeholder-text" style="display:none;">案例1</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>厦门集美大桥收费站</h3>
|
||||||
|
<p>·案例名称：厦门集美大桥收费站顶棚（已拆除）
|
||||||
|
·案例地点：福建省厦门市集美大桥主收费站
|
||||||
|
·结构形式：轻型钢骨架 + 预应力拉索混合结构
|
||||||
|
|
||||||
|
厦门集美大桥收费站顶棚采用了一种创新的“轻型钢骨架+预应力拉索”混合结构。其最核心的技术参数体现在跨度与结构厚度的显著优化上。结构需要横跨八车道和中央隔离带，跨度达到51米。在传统方案中，若采用普通钢结构或桁架，其结构厚度需按三十分之一跨度考虑，将达到1.7至2米，加上装饰层会显得非常笨重。而通过引入12根SNS/S-7×19双护层彩色拉索，构建预应力拉索结构体系，成功将主体结构厚度大幅缩减至0.8米，在考虑完上下装饰面层后，整体厚度也仅为0.9米，最终实现了视觉上轻盈简洁的效果。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 案例2 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image analysis-img">
|
||||||
|
<img src="images/analysis-05.png" alt="案例2" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||||
|
<div class="placeholder-text" style="display:none;">案例2</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>四川大学华西第二医院西藏医院</h3>
|
||||||
|
<p>·案例名称：四川大学华西第二医院西藏医院
|
||||||
|
·案例地点：西藏拉萨市
|
||||||
|
·突出创新点：采用零碳设计目标，兼顾医疗工艺需求与极端气候适应性
|
||||||
|
|
||||||
|
平面布局上，设计将主要功能房间布置在南向等日照充足区域，在北向主要布置辅助功能房间，将医技部门不需要采光的手术室、设备用房等布置在建筑内部。
|
||||||
|
立面形制上，借鉴藏族民居中外窗上部出挑的挑檐结构“八苏”，在建筑立面设计时形成上大下小的基本形制，通过建筑立面凹槽形成综合遮阳构造，将冬季阳光尽量引入室内的同时避免夏季直射阳光引起不舒适眩光与过热影响。
|
||||||
|
太阳能资源利用方面，由于太阳能富集区医疗建筑运行碳排放比例高，需充分利用屋面面积，采用全太阳能驱动的光伏光热等可再生能源策略，而当屋面光伏不足以实现运行零碳时，还需补充立面光伏。
|
||||||
|
该方案的围护结构采用各向异性设计方法以最大化利用太阳辐射得热，实现围护结构保温集热和蓄热性能的综合提升。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 1.4 方案构思 -->
|
||||||
|
<section class="section section-alt" id="concept">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">1.4 方案构思</h2>
|
||||||
|
|
||||||
|
<!-- 1.4.1 文化意象：黑牦牛帐篷 -->
|
||||||
|
<div class="subsection">
|
||||||
|
<h3 class="subsection-title">1.4.1 文化意象：黑牦牛帐篷</h3>
|
||||||
|
|
||||||
|
<!-- 简介 -->
|
||||||
|
<div class="concept-item">
|
||||||
|
<h4 class="concept-item-title">简介</h4>
|
||||||
|
<p class="concept-text">黑帐篷，藏语书面语通称“札那”。
|
||||||
|
东北藏地区真正的游牧部落的帐房是低的，矩形的，由黑牦牛毛织成的粗褐做成。帐篷顶部有轻微的倾斜，帐篷的“墙”体像窗帘一样挂在顶部边缘。作为一个精巧的有独创性的系统，外面的帐杆高于整个帐篷，系于其上的绳子延展开来，帐篷或多或少从顶部和四角桂起，帐篷最中间只有两根柱杆，在帐篷的每一个有从帐篷前厅延伸到后面的两英尺长的烟道。
|
||||||
|
帐身通常呈矩形或六角形，由众多条“热”缝合而成，由此组成两块尺寸较大的帐布，并用“卡察(kha tshab)”(白色羊毛织成的天窗幕布)将双方拼接，用木杆撑起后，帐体呈对称状，顶部具有一定坡度。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 抗风结构 -->
|
||||||
|
<div class="concept-item">
|
||||||
|
<h4 class="concept-item-title">抗风结构</h4>
|
||||||
|
<p class="concept-text">黑帐篷通常采用低矮的坡面形态和内部中心支撑(一根或两根木柱)+周边牵拉的系统。这种柔性结构能有效分散和抵抗高原上强烈的风力，如同一个张开的帆，却又能通过调节绳索而“随波逐流”，极具韧性。
|
||||||
|
这完美契合了游牧生活“逐水草而居”的核心需求，是整个游牧文明的物质载体。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 模块化与可移动性 -->
|
||||||
|
<div class="concept-item">
|
||||||
|
<h4 class="concept-item-title">模块化与可移动性</h4>
|
||||||
|
<p class="concept-text">所有组件--牦牛毛布、木杆、绳索--都易于拆卸、捆扎和运输。这完美契合了游牧生活“逐水草而居”的核心需求，是整个游牧文明的物质载体。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 内部空间特点 -->
|
||||||
|
<div class="concept-item">
|
||||||
|
<h4 class="concept-item-title">内部空间特点</h4>
|
||||||
|
<p class="concept-text">黑帐篷的活动中心一般为整体空间的中部的火炕，这个中央灶台既是生火做饭的热源，也是家庭的中心。以灶为界，右侧为男（阳帐），待客住宿；左侧为女（阴帐），存放厨具。与火炕相对正对门的后方位置最高，供奉佛像和贵重物品。这种秩序体现了游牧民族对秩序和生活仪轨的重视。
|
||||||
|
帐篷顶部留有长方形的顶上天窗开口，是唯一采光口和排烟口。牛羊粪燃烧的炊烟会自然从天窗排出。利用这个天窗，牧人可以通过观察天窗透过的光线位置判断时间（例如光照在后壁为上午，照在锅台为中午），极具智慧。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 5张图片横向滑动展示 -->
|
||||||
|
<div class="image-slider-container">
|
||||||
|
<div class="image-slider">
|
||||||
|
<div class="slider-item">
|
||||||
|
<img src="images/concept-yak-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="slider-item">
|
||||||
|
<img src="images/concept-yak-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="slider-item">
|
||||||
|
<img src="images/concept-yak-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="slider-item">
|
||||||
|
<img src="images/concept-yak-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 class="slider-item">
|
||||||
|
<img src="images/concept-yak-05.jpg" alt="黑牛帐篷图5" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||||
|
<div class="placeholder-text small" style="display:none;">黑牦牛帐篷图5</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slider-hint">← 左右滑动查看更多 →</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 1.4.2 解读与转译：黑牦牛帐篷 -->
|
||||||
|
<div class="subsection">
|
||||||
|
<h3 class="subsection-title">1.4.2 解读与转译：黑牦牛帐篷</h3>
|
||||||
|
|
||||||
|
<div class="content-block">
|
||||||
|
<p class="large-text">基于上述对那曲地区黑帐篷原型的形态解构与场所精神提炼，本设计从空间叙事、结构逻辑、建造方式及环境应对四个维度，提出将传统游牧智慧转化为现代轻型建筑语汇的具体策略，实现从‘文化符号’到‘工程逻辑’的跨越。</p>
|
||||||
|
|
||||||
|
<table class="concept-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>传统元素</th>
|
||||||
|
<th>现代转译</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>中央火塘，人们日常活动围绕中心空间展开，以火炕为基础划分内部空间。
|
||||||
|
</td>
|
||||||
|
<td>中央作为公共活动大厅，多功能，承载集散和聚会的空间任务。</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>木杆交叉利用绳索连接牦牛毛布，牛毛绳穿过木杆并固定于地桩,牛毛绳作为斜拉索</td>
|
||||||
|
<td>轻钢结构 + 钢构立柱 + 斜拉索体系</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>随季节迁徙，所有组件便于拆装和运输。</td>
|
||||||
|
<td>模块化构件、螺栓连接</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>帐篷边缘压石防风</td>
|
||||||
|
<td>地锚抗风构造</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<p>© 2026 毕业设计展示 | 雪域阳光方舟·高海拔环境乡村医疗服务基站设计与建造研究</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- JavaScript -->
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
674
construction.html
Normal file
674
construction.html
Normal file
@@ -0,0 +1,674 @@
|
|||||||
|
<!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">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<p>© 2026 毕业设计展示 | 雪域阳光方舟 · 高海拔环境乡村医疗服务基站设计与建造研究</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- JavaScript -->
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
448
construction.html.bak
Normal file
448
construction.html.bak
Normal file
@@ -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>© 2026 毕业设计展示 | 雪域阳光方舟 · 高海拔环境乡村医疗服务基站设计与建造研究</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- JavaScript -->
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1134
css/style.css
1134
css/style.css
File diff suppressed because it is too large
Load Diff
168
design.html
Normal file
168
design.html
Normal file
@@ -0,0 +1,168 @@
|
|||||||
|
<!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 active">设计表现</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">建造模拟</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">Design Presentation</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 鸟瞰图（1张） -->
|
||||||
|
<section class="section" id="aerial-view">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">鸟瞰图</h2>
|
||||||
|
<div class="gallery-grid">
|
||||||
|
<div class="gallery-item large">
|
||||||
|
<div class="placeholder-img tall">
|
||||||
|
<img src="images/design-aerial-01.jpg" alt="鸟瞰渲染图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||||
|
<div class="placeholder-text" style="display:none;">鸟瞰渲染图</div>
|
||||||
|
</div>
|
||||||
|
<div class="gallery-caption">
|
||||||
|
<h3>整体鸟瞰效果图</h3>
|
||||||
|
<p>展示建筑与周边环境的整体关系。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 室外透视图（2张） -->
|
||||||
|
<section class="section section-alt" id="exterior-perspective">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">室外透视图</h2>
|
||||||
|
<div class="card-grid two-columns">
|
||||||
|
<!-- 室外透视1 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image wide">
|
||||||
|
<img src="images/design-exterior-01.jpg" alt="室外透视图1" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||||
|
<div class="placeholder-text" style="display:none;">室外透视图1</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>主入口透视</h3>
|
||||||
|
<p>展示建筑主入口的外观效果。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 室外透视2 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image wide">
|
||||||
|
<img src="images/design-exterior-02.jpg" alt="室外透视图2" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||||
|
<div class="placeholder-text" style="display:none;">室外透视图2</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>侧面透视</h3>
|
||||||
|
<p>建筑急救入口一侧透视图。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 室内透视图（3张） -->
|
||||||
|
<section class="section" id="interior-perspective">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">室内透视图</h2>
|
||||||
|
<div class="card-grid">
|
||||||
|
<!-- 室内透视1 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image">
|
||||||
|
<img src="images/design-interior-01.jpg" alt="室内透视图1" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||||
|
<div class="placeholder-text" style="display:none;">室内透视图1</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>室内透视1</h3>
|
||||||
|
<p>主入口望向健康教育室透视</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 室内透视2 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image">
|
||||||
|
<img src="images/design-interior-02.jpg" alt="室内透视图2" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||||
|
<div class="placeholder-text" style="display:none;">室内透视图2</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>室内透视2</h3>
|
||||||
|
<p>诊疗室望向健康教育室透视</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 室内透视3 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image">
|
||||||
|
<img src="images/design-interior-03.jpg" alt="室内透视图3" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||||
|
<div class="placeholder-text" style="display:none;">室内透视图3</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>室内透视3</h3>
|
||||||
|
<p>医生休息室门前走廊望向导诊台和取药处</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<p>© 2026 毕业设计展示 | 雪域阳光方舟 · 高海拔环境乡村医疗服务基站设计与建造研究</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- JavaScript -->
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
256
drawings.html
Normal file
256
drawings.html
Normal file
@@ -0,0 +1,256 @@
|
|||||||
|
<!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 active">设计图纸</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">建造模拟</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">Design Drawings</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 总平面图（1张） -->
|
||||||
|
<section class="section" id="site-plan">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">总平面图</h2>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 一层平面图（1张） -->
|
||||||
|
<section class="section section-alt" id="floor-plan">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">一层平面图</h2>
|
||||||
|
<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张，单列展示） -->
|
||||||
|
<section class="section" id="elevations">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">立面图</h2>
|
||||||
|
<div class="single-column-layout">
|
||||||
|
<!-- 东立面 -->
|
||||||
|
<div class="card full-width-card">
|
||||||
|
<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>
|
||||||
|
<div class="card-content centered">
|
||||||
|
<h3>东立面图</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 南立面 -->
|
||||||
|
<div class="card full-width-card">
|
||||||
|
<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>
|
||||||
|
<div class="card-content centered">
|
||||||
|
<h3>南立面图</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 西立面 -->
|
||||||
|
<div class="card full-width-card">
|
||||||
|
<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>
|
||||||
|
<div class="card-content centered">
|
||||||
|
<h3>西立面图</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 北立面 -->
|
||||||
|
<div class="card full-width-card">
|
||||||
|
<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>
|
||||||
|
<div class="card-content centered">
|
||||||
|
<h3>北立面图</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 剖面图（2张，单列展示） -->
|
||||||
|
<section class="section section-alt" id="sections">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">剖面图</h2>
|
||||||
|
<div class="single-column-layout">
|
||||||
|
<!-- 1-1剖面 -->
|
||||||
|
<div class="card full-width-card">
|
||||||
|
<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>
|
||||||
|
<div class="card-content centered">
|
||||||
|
<h3>1-1剖面图</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2-2剖面 -->
|
||||||
|
<div class="card full-width-card">
|
||||||
|
<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>
|
||||||
|
<div class="card-content centered">
|
||||||
|
<h3>2-2剖面图</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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>© 2026 毕业设计展示 | 雪域阳光方舟 · 高海拔环境乡村医疗服务基站设计与建造研究</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- JavaScript -->
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
217
images/ANALYSIS_IMAGES.md
Normal file
217
images/ANALYSIS_IMAGES.md
Normal file
@@ -0,0 +1,217 @@
|
|||||||
|
# 前期分析板块 - 8张图片命名规范
|
||||||
|
|
||||||
|
## 🎯 快速使用指南
|
||||||
|
|
||||||
|
### 步骤1：准备图片
|
||||||
|
将你的8张图片命名为以下格式：
|
||||||
|
|
||||||
|
```
|
||||||
|
analysis-01.jpg ← 地理分析图
|
||||||
|
analysis-02.jpg ← 气候分析图
|
||||||
|
analysis-03.jpg ← 选址分析图
|
||||||
|
analysis-04.jpg ← 分析图4
|
||||||
|
analysis-05.jpg ← 分析图5
|
||||||
|
analysis-06.jpg ← 分析图6
|
||||||
|
analysis-07.jpg ← 分析图7
|
||||||
|
analysis-08.jpg ← 分析图8
|
||||||
|
```
|
||||||
|
|
||||||
|
### 步骤2：放入文件夹
|
||||||
|
将所有图片放入：`d:\my_website\images\` 文件夹
|
||||||
|
|
||||||
|
### 步骤3：刷新浏览器
|
||||||
|
Live Server 会自动刷新，立即看到效果！
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📏 图片规格要求
|
||||||
|
|
||||||
|
### ✅ 重要特性
|
||||||
|
**图片会完整展示，不会被裁剪！**
|
||||||
|
|
||||||
|
我已经设置了CSS样式：
|
||||||
|
```css
|
||||||
|
.analysis-img img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
object-fit: contain; /* 完整展示，不裁剪 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.analysis-img {
|
||||||
|
background: #FFFFFF; /* 白色背景填充 */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**效果**：
|
||||||
|
- ✅ 所有图片**完整展示**，不会有任何部分被裁剪
|
||||||
|
- ✅ 如果图片比例与容器不一致，会出现**白色边距**
|
||||||
|
- ✅ 所有图片高度统一为 **280px**（桌面端）
|
||||||
|
- ✅ 所有卡片底部对齐
|
||||||
|
- ✅ 无论原图是横图还是竖图都能正常显示
|
||||||
|
|
||||||
|
### 推荐尺寸
|
||||||
|
- **任意尺寸都可以**（系统会自动适配）
|
||||||
|
- **推荐比例**: 4:3 或 3:2（白边较少）
|
||||||
|
- **最小宽度**: 600px
|
||||||
|
- **文件大小**: 建议 < 500KB/张
|
||||||
|
- **格式**: JPG 或 PNG
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 当前布局
|
||||||
|
|
||||||
|
### 桌面端（>1024px）
|
||||||
|
```
|
||||||
|
─────────┬─────────┬─────────┬─────────┐
|
||||||
|
│ 01 │ 02 │ 03 │ 04 │
|
||||||
|
├─────────┼─────────┼─────────┼─────────┤
|
||||||
|
│ 05 │ 06 │ 07 │ 08 │
|
||||||
|
└─────────┴─────────┴─────────┴─────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### 平板端（768-1024px）
|
||||||
|
```
|
||||||
|
─────────┬─────────┐
|
||||||
|
│ 01 │ 02 │
|
||||||
|
├─────────┼─────────┤
|
||||||
|
│ 03 │ 04 │
|
||||||
|
├─────────┼─────────┤
|
||||||
|
│ 05 │ 06 │
|
||||||
|
├─────────┼─────────┤
|
||||||
|
│ 07 │ 08 │
|
||||||
|
└─────────┴─────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### 手机端（<768px）
|
||||||
|
```
|
||||||
|
┌─────────┐
|
||||||
|
│ 01 │
|
||||||
|
├─────────┤
|
||||||
|
│ 02 │
|
||||||
|
├─────────┤
|
||||||
|
│ 03 │
|
||||||
|
├─────────┤
|
||||||
|
│ ... │
|
||||||
|
├─────────┤
|
||||||
|
│ 08 │
|
||||||
|
└─────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✏️ 修改文字内容
|
||||||
|
|
||||||
|
如果需要修改每张图的标题和说明，打开 `index.html`，找到对应位置：
|
||||||
|
|
||||||
|
### 示例：修改第4张图
|
||||||
|
```html
|
||||||
|
<!-- 图片4 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image analysis-img">
|
||||||
|
<img src="images/analysis-04.jpg" alt="分析图4" ...>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>标题4</h3> ← 修改这里
|
||||||
|
<p>在此处插入说明文字...</p> ← 修改这里
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔍 如果图片未显示
|
||||||
|
|
||||||
|
### 检查清单
|
||||||
|
|
||||||
|
1. **文件名是否正确？**
|
||||||
|
```
|
||||||
|
✓ analysis-01.jpg
|
||||||
|
✗ Analysis-01.jpg (大写A)
|
||||||
|
✗ analysis_01.jpg (下划线)
|
||||||
|
✗ analysis-1.jpg (缺少0)
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **文件是否在正确位置？**
|
||||||
|
```
|
||||||
|
d:\my_website\images\analysis-01.jpg ✓
|
||||||
|
d:\my_website\analysis-01.jpg ✗
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **文件格式是否正确？**
|
||||||
|
```
|
||||||
|
✓ .jpg
|
||||||
|
✓ .jpeg
|
||||||
|
✓ .png
|
||||||
|
✗ .JPG (大写扩展名可能有问题)
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **浏览器控制台是否有错误？**
|
||||||
|
```
|
||||||
|
按 F12 → Console
|
||||||
|
查看是否有 404 错误
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💡 高级技巧
|
||||||
|
|
||||||
|
### 如果想调整图片高度
|
||||||
|
|
||||||
|
打开 `css/style.css`，找到：
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* 桌面端 */
|
||||||
|
.analysis-img {
|
||||||
|
height: 280px; /* 改为 250px、300px、350px 等 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 平板端 */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.analysis-img {
|
||||||
|
height: 300px; /* 改为 280px、320px 等 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 手机端 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.analysis-img {
|
||||||
|
height: 350px; /* 改为 300px、400px 等 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 如果想调整列间距
|
||||||
|
|
||||||
|
```css
|
||||||
|
.analysis-grid {
|
||||||
|
gap: var(--spacing-md); /* 改为 1rem、3rem 等 */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 如果想让某张图跨两列
|
||||||
|
|
||||||
|
在 HTML 中添加样式：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="card" style="grid-column: span 2;">
|
||||||
|
<!-- 内容 -->
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎊 完成标志
|
||||||
|
|
||||||
|
当你看到以下内容时，表示成功：
|
||||||
|
|
||||||
|
✅ 8张图片全部显示
|
||||||
|
✅ 所有图片**完整展示**，无裁剪
|
||||||
|
✅ 图片周围有**白色边距**（如需要）
|
||||||
|
✅ 所有卡片底部对齐
|
||||||
|
✅ 响应式布局正常（桌面/平板/手机）
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**祝你顺利添加图片！** ✨
|
||||||
|
|
||||||
|
*如有问题，随时告诉我！*
|
||||||
211
images/IMAGE_GUIDE.md
Normal file
211
images/IMAGE_GUIDE.md
Normal file
@@ -0,0 +1,211 @@
|
|||||||
|
# 图片资源命名与使用指南
|
||||||
|
|
||||||
|
## 📋 快速索引
|
||||||
|
|
||||||
|
### 首页背景图
|
||||||
|
```
|
||||||
|
images/hero-bg.jpg ← Hero区域背景底图（建议1920×1080px）
|
||||||
|
```
|
||||||
|
|
||||||
|
### 前期分析 - 场地分析
|
||||||
|
#### 1.2.1 自然地理环境分析（9张图）
|
||||||
|
```
|
||||||
|
images/site-nature-01.jpg ← 自然地理图1
|
||||||
|
images/site-nature-02.jpg ← 自然地理图2
|
||||||
|
images/site-nature-03.jpg ← 自然地理图3
|
||||||
|
images/site-nature-04.jpg ← 自然地理图4
|
||||||
|
images/site-nature-05.jpg ← 自然地理图5
|
||||||
|
images/site-nature-06.jpg ← 自然地理图6
|
||||||
|
images/site-nature-07.jpg ← 自然地理图7
|
||||||
|
images/site-nature-08.jpg ← 自然地理图8
|
||||||
|
images/site-nature-09.jpg ← 自然地理图9
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 1.2.2 经济、人口和基础设施（1张图）
|
||||||
|
```
|
||||||
|
images/site-economy.jpg ← 经济人口基础设施分析图（建议大图，如1600×900px）
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 首页背景图说明
|
||||||
|
|
||||||
|
### 推荐规格
|
||||||
|
- **尺寸**: 1920×1080px 或更大
|
||||||
|
- **格式**: JPG（压缩质量80-90%）
|
||||||
|
- **文件大小**: < 500KB
|
||||||
|
- **内容建议**:
|
||||||
|
- 青藏高原风景
|
||||||
|
- 建筑效果图
|
||||||
|
- 抽象纹理
|
||||||
|
- 任何与项目相关的底图
|
||||||
|
|
||||||
|
### CSS效果
|
||||||
|
```css
|
||||||
|
.hero-background {
|
||||||
|
opacity: 0.5; /* 50%不透明度 */
|
||||||
|
background-size: cover; /* 覆盖整个区域 */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**效果**：
|
||||||
|
- ✅ 背景图半透明显示
|
||||||
|
- ✅ 不影响文字阅读
|
||||||
|
- ✅ 营造氛围感
|
||||||
|
|
||||||
|
### 如何替换
|
||||||
|
1. 准备一张喜欢的背景图
|
||||||
|
2. 命名为 `hero-bg.jpg`
|
||||||
|
3. 放入 `images/` 文件夹
|
||||||
|
4. 刷新浏览器即可看到效果
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🗺️ 场地分析 - 自然地理环境分析（9张图）
|
||||||
|
|
||||||
|
### 布局方式
|
||||||
|
- **桌面端**: 3列 × 3行网格
|
||||||
|
- **平板端**: 2列网格
|
||||||
|
- **手机端**: 1列垂直排列
|
||||||
|
|
||||||
|
### 图片规格
|
||||||
|
- **推荐尺寸**: 800×600px 或 1024×768px
|
||||||
|
- **最小宽度**: 600px
|
||||||
|
- **文件格式**: JPG 或 PNG
|
||||||
|
- **统一高度**: 280px（自动裁剪，白底填充）
|
||||||
|
|
||||||
|
### 命名规范
|
||||||
|
必须严格按照以下格式命名：
|
||||||
|
```
|
||||||
|
site-nature-01.jpg (注意：小写，连字符，两位数)
|
||||||
|
site-nature-02.jpg
|
||||||
|
...
|
||||||
|
site-nature-09.jpg
|
||||||
|
```
|
||||||
|
|
||||||
|
❌ 错误示例：
|
||||||
|
```
|
||||||
|
Site-Nature-1.jpg (大写+缺少0)
|
||||||
|
site_nature_01.jpg (下划线)
|
||||||
|
site nature 01.jpg (空格)
|
||||||
|
```
|
||||||
|
|
||||||
|
### 修改标题和说明
|
||||||
|
打开 `analysis.html`，找到对应位置：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- 图片1 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image analysis-img">
|
||||||
|
<img src="images/site-nature-01.jpg" alt="自然地理图1" ...>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>标题1</h3> ← 改成你的标题
|
||||||
|
<p>在此处插入说明文字...</p> ← 改成你的说明
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 场地分析 - 经济、人口和基础设施（1张图）
|
||||||
|
|
||||||
|
### 布局方式
|
||||||
|
- **单张大图**，居中显示
|
||||||
|
- **最大宽度**: 1000px
|
||||||
|
- **固定高度**: 450px
|
||||||
|
|
||||||
|
### 图片规格
|
||||||
|
- **推荐尺寸**: 1600×900px 或更大（横图）
|
||||||
|
- **最小宽度**: 1200px
|
||||||
|
- **文件格式**: JPG 或 PNG
|
||||||
|
- **完整展示**: 使用 `object-fit: contain`，允许白边
|
||||||
|
|
||||||
|
### 命名规范
|
||||||
|
```
|
||||||
|
site-economy.jpg
|
||||||
|
```
|
||||||
|
|
||||||
|
### 修改内容
|
||||||
|
打开 `analysis.html`，找到对应位置：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="card single-card">
|
||||||
|
<div class="card-image analysis-img wide">
|
||||||
|
<img src="images/site-economy.jpg" alt="经济人口基础设施分析图" ...>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>经济、人口和基础设施分析</h3> ← 可修改标题
|
||||||
|
<p>在此处插入关于当地经济发展水平...</p> ← 修改详细说明
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔍 常见问题排查
|
||||||
|
|
||||||
|
### 问题1：图片未显示
|
||||||
|
**检查清单**：
|
||||||
|
1. ✅ 文件名是否正确（大小写、连字符、数字位数）
|
||||||
|
2. ✅ 文件是否在 `images/` 文件夹
|
||||||
|
3. ✅ 文件格式是否为 `.jpg` 或 `.png`
|
||||||
|
4. ✅ 浏览器控制台是否有404错误（F12 → Console）
|
||||||
|
|
||||||
|
### 问题2：图片变形
|
||||||
|
**解决方案**：
|
||||||
|
- 所有图片都会自动适配容器
|
||||||
|
- 使用 `object-fit: contain` 确保不变形
|
||||||
|
- 可能出现白边，这是正常现象
|
||||||
|
|
||||||
|
### 问题3：背景图不显示
|
||||||
|
**检查清单**：
|
||||||
|
1. ✅ 文件名必须是 `hero-bg.jpg`
|
||||||
|
2. ✅ 文件在 `images/` 文件夹
|
||||||
|
3. ✅ 图片尺寸足够大（至少1920×1080px）
|
||||||
|
4. ✅ 清除浏览器缓存（Ctrl + Shift + R）
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💡 高级技巧
|
||||||
|
|
||||||
|
### 调整背景图不透明度
|
||||||
|
打开 `css/style.css`，找到：
|
||||||
|
|
||||||
|
```css
|
||||||
|
.hero-background {
|
||||||
|
opacity: 0.5; /* 改为 0.3、0.7 等 */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 调整9张图的间距
|
||||||
|
```css
|
||||||
|
.analysis-grid-9 {
|
||||||
|
gap: var(--spacing-md); /* 改为 1rem、3rem 等 */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 调整单张大图的高度
|
||||||
|
```css
|
||||||
|
.analysis-img.wide {
|
||||||
|
height: 450px; /* 改为 400px、500px 等 */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎊 完成标志
|
||||||
|
|
||||||
|
当你看到以下内容时，表示成功：
|
||||||
|
|
||||||
|
✅ 首页有半透明背景图
|
||||||
|
✅ 文字清晰可读
|
||||||
|
✅ 9张自然地理图整齐排列
|
||||||
|
✅ 1张经济人口图居中显示
|
||||||
|
✅ 响应式布局正常
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**祝你顺利添加图片！** ✨
|
||||||
|
|
||||||
|
*如有问题，随时告诉我！*
|
||||||
272
images/STRUCTURE_PERFORMANCE_GUIDE.md
Normal file
272
images/STRUCTURE_PERFORMANCE_GUIDE.md
Normal file
@@ -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张横向滑动图+左侧文字+右侧大图
|
||||||
|
|
||||||
|
✅ **响应式适配**
|
||||||
|
- 桌面端：所有布局正常
|
||||||
|
- 平板端：图文堆叠，表格自适应
|
||||||
|
- 手机端：单列布局，图片缩小
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**祝你顺利添加图片！**
|
||||||
|
|
||||||
|
*如有问题，随时告诉我！*
|
||||||
BIN
images/analysis-04.jpg
Normal file
BIN
images/analysis-04.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
BIN
images/analysis-05.png
Normal file
BIN
images/analysis-05.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 363 KiB |
BIN
images/column-unit-01.jpg
Normal file
BIN
images/column-unit-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 881 KiB |
BIN
images/column-unit-02.jpg
Normal file
BIN
images/column-unit-02.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
BIN
images/column-unit-03.jpg
Normal file
BIN
images/column-unit-03.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 937 KiB |
BIN
images/column-unit-04.jpg
Normal file
BIN
images/column-unit-04.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 822 KiB |
BIN
images/concept-yak-01.jpg
Normal file
BIN
images/concept-yak-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 350 KiB |
BIN
images/concept-yak-02.jpg
Normal file
BIN
images/concept-yak-02.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
images/concept-yak-03.jpg
Normal file
BIN
images/concept-yak-03.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
images/concept-yak-04.jpg
Normal file
BIN
images/concept-yak-04.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
images/concept-yak-05.jpg
Normal file
BIN
images/concept-yak-05.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
BIN
images/construction-base-01.jpg
Normal file
BIN
images/construction-base-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 360 KiB |
BIN
images/construction-base-detail-01.jpg
Normal file
BIN
images/construction-base-detail-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
BIN
images/construction-base-detail-02.jpg
Normal file
BIN
images/construction-base-detail-02.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 734 KiB |
BIN
images/construction-base-detail-03.jpg
Normal file
BIN
images/construction-base-detail-03.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
images/construction-base-detail-04.jpg
Normal file
BIN
images/construction-base-detail-04.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 953 KiB |
BIN
images/construction-base-detail-05.jpg
Normal file
BIN
images/construction-base-detail-05.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 289 KiB |
BIN
images/construction-base-detail-06.jpg
Normal file
BIN
images/construction-base-detail-06.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 641 KiB |
BIN
images/construction-base-detail-07.jpg
Normal file
BIN
images/construction-base-detail-07.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 425 KiB |
BIN
images/construction-base-detail-08.jpg
Normal file
BIN
images/construction-base-detail-08.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
BIN
images/construction-base-detail-09.jpg
Normal file
BIN
images/construction-base-detail-09.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 753 KiB |
BIN
images/construction-greenhouse-01.jpg
Normal file
BIN
images/construction-greenhouse-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 384 KiB |
BIN
images/construction-greenhouse-02.jpg
Normal file
BIN
images/construction-greenhouse-02.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 253 KiB |
BIN
images/construction-main-01.jpg
Normal file
BIN
images/construction-main-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 416 KiB |
BIN
images/construction-main-detail-01.jpg
Normal file
BIN
images/construction-main-detail-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 767 KiB |
BIN
images/construction-main-detail-02.jpg
Normal file
BIN
images/construction-main-detail-02.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1010 KiB |
BIN
images/construction-main-detail-03.jpg
Normal file
BIN
images/construction-main-detail-03.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
BIN
images/construction-main-detail-04.jpg
Normal file
BIN
images/construction-main-detail-04.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 699 KiB |
BIN
images/construction-main-detail-05.jpg
Normal file
BIN
images/construction-main-detail-05.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
images/construction-main-detail-06.jpg
Normal file
BIN
images/construction-main-detail-06.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
images/construction-main-detail-07.jpg
Normal file
BIN
images/construction-main-detail-07.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
images/construction-main-detail-08.jpg
Normal file
BIN
images/construction-main-detail-08.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 930 KiB |
BIN
images/construction-main-detail-09.jpg
Normal file
BIN
images/construction-main-detail-09.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 578 KiB |
BIN
images/construction-process-base-01.jpg
Normal file
BIN
images/construction-process-base-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
images/construction-process-base-02.jpg
Normal file
BIN
images/construction-process-base-02.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 MiB |
BIN
images/construction-process-base-03.jpg
Normal file
BIN
images/construction-process-base-03.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 MiB |
BIN
images/construction-process-base-04.jpg
Normal file
BIN
images/construction-process-base-04.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
BIN
images/construction-process-base-05.jpg
Normal file
BIN
images/construction-process-base-05.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 MiB |
BIN
images/construction-process-base-06.jpg
Normal file
BIN
images/construction-process-base-06.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
BIN
images/construction-process-base-07.jpg
Normal file
BIN
images/construction-process-base-07.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
images/construction-process-base-08.jpg
Normal file
BIN
images/construction-process-base-08.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
BIN
images/construction-process-base-09.jpg
Normal file
BIN
images/construction-process-base-09.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
images/construction-process-main-01.jpg
Normal file
BIN
images/construction-process-main-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
images/construction-process-main-02.jpg
Normal file
BIN
images/construction-process-main-02.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
BIN
images/construction-process-main-03.jpg
Normal file
BIN
images/construction-process-main-03.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
images/construction-process-main-04.jpg
Normal file
BIN
images/construction-process-main-04.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
BIN
images/construction-process-main-05.jpg
Normal file
BIN
images/construction-process-main-05.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
images/construction-process-main-06.jpg
Normal file
BIN
images/construction-process-main-06.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
BIN
images/construction-process-roof-01.jpg
Normal file
BIN
images/construction-process-roof-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
BIN
images/construction-process-roof-02.jpg
Normal file
BIN
images/construction-process-roof-02.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
BIN
images/construction-process-roof-03.jpg
Normal file
BIN
images/construction-process-roof-03.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
BIN
images/construction-process-roof-04.jpg
Normal file
BIN
images/construction-process-roof-04.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
BIN
images/construction-process-wall-01.jpg
Normal file
BIN
images/construction-process-wall-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 MiB |
BIN
images/construction-process-wall-02.jpg
Normal file
BIN
images/construction-process-wall-02.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
BIN
images/construction-process-wall-03.jpg
Normal file
BIN
images/construction-process-wall-03.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
BIN
images/construction-process-wall-04.jpg
Normal file
BIN
images/construction-process-wall-04.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 MiB |
BIN
images/construction-roof-01.jpg
Normal file
BIN
images/construction-roof-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 864 KiB |
BIN
images/construction-roof-detail-01.jpg
Normal file
BIN
images/construction-roof-detail-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 593 KiB |
BIN
images/construction-roof-detail-010.jpg
Normal file
BIN
images/construction-roof-detail-010.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
BIN
images/construction-roof-detail-02.jpg
Normal file
BIN
images/construction-roof-detail-02.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
BIN
images/construction-roof-detail-03.jpg
Normal file
BIN
images/construction-roof-detail-03.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 250 KiB |
BIN
images/construction-roof-detail-04.jpg
Normal file
BIN
images/construction-roof-detail-04.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 376 KiB |
BIN
images/construction-roof-detail-05.jpg
Normal file
BIN
images/construction-roof-detail-05.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 249 KiB |
BIN
images/construction-roof-detail-06.jpg
Normal file
BIN
images/construction-roof-detail-06.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
BIN
images/construction-roof-detail-07.jpg
Normal file
BIN
images/construction-roof-detail-07.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 296 KiB |
BIN
images/construction-roof-detail-08.jpg
Normal file
BIN
images/construction-roof-detail-08.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 375 KiB |
BIN
images/construction-roof-detail-09.jpg
Normal file
BIN
images/construction-roof-detail-09.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 376 KiB |
BIN
images/construction-siteplan.jpg
Normal file
BIN
images/construction-siteplan.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
images/construction-wall-01.jpg
Normal file
BIN
images/construction-wall-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 629 KiB |
BIN
images/construction-wall-detail-01.jpg
Normal file
BIN
images/construction-wall-detail-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
BIN
images/construction-wall-detail-02.jpg
Normal file
BIN
images/construction-wall-detail-02.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 299 KiB |
BIN
images/construction-wall-detail-03.jpg
Normal file
BIN
images/construction-wall-detail-03.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
BIN
images/construction-wall-detail-04.jpg
Normal file
BIN
images/construction-wall-detail-04.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
images/construction-wall-detail-05.jpg
Normal file
BIN
images/construction-wall-detail-05.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 243 KiB |
BIN
images/design-aerial-01.jpg
Normal file
BIN
images/design-aerial-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 MiB |
BIN
images/design-exterior-01.jpg
Normal file
BIN
images/design-exterior-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 MiB |
BIN
images/design-exterior-02.jpg
Normal file
BIN
images/design-exterior-02.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 MiB |
BIN
images/design-interior-01.jpg
Normal file
BIN
images/design-interior-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 MiB |
BIN
images/design-interior-02.jpg
Normal file
BIN
images/design-interior-02.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 MiB |
BIN
images/design-interior-03.jpg
Normal file
BIN
images/design-interior-03.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 MiB |
BIN
images/drawing-elevation-east.jpg
Normal file
BIN
images/drawing-elevation-east.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 MiB |
BIN
images/drawing-elevation-north.jpg
Normal file
BIN
images/drawing-elevation-north.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 MiB |
BIN
images/drawing-elevation-south.jpg
Normal file
BIN
images/drawing-elevation-south.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 MiB |
BIN
images/drawing-elevation-west.jpg
Normal file
BIN
images/drawing-elevation-west.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 MiB |
BIN
images/drawing-floorplan.jpg
Normal file
BIN
images/drawing-floorplan.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 560 KiB |
BIN
images/drawing-section-1.jpg
Normal file
BIN
images/drawing-section-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 585 KiB |
BIN
images/drawing-section-2.jpg
Normal file
BIN
images/drawing-section-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 577 KiB |
BIN
images/drawing-siteplan.jpg
Normal file
BIN
images/drawing-siteplan.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 MiB |
BIN
images/favicon.png
Normal file
BIN
images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user