Files
new-site/drawings.html

257 lines
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- SEO Meta Tags -->
<title>设计图纸 - 轻索方舱 | 高海拔环境乡村医疗服务基站</title>
<meta name="description" content="设计图纸:总平面图、平面图、立面图、剖面图">
<!-- 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×6mmL=10m倾斜20°</p>
<p class="large-text">分段方式:切为 下段5m + 上段5m。每段两端焊外法兰盘法兰外径 =Φ320法兰厚度δ=14mm螺栓分布圆 Φ280</p>
<p class="large-text">8M20 高强螺栓,均匀分布。</p>
<p class="large-text">法兰与钢管连接处设环形加劲肋。</p>
<p class="large-text">拆分为上下两段,方便运输,利用螺栓现场组装快速。</p>
<p class="large-text">现场安装好钢管柱后,外侧利用定位撑环固定外侧的装饰套筒,套筒处预留耳板传出的位置,既能使柱身更美观,也可以抵御高原日晒对柱身结构的影响。</p>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<p>&copy; 2026 毕业设计展示 | 雪域阳光方舟 · 高海拔环境乡村医疗服务基站设计与建造研究</p>
</div>
</footer>
<!-- JavaScript -->
<script src="js/main.js"></script>
</body>
</html>