重构为多页导航架构：8个独立页面，前期分析4子板块，设计表现6图，设计图纸完整展示
This commit is contained in:
380
index.html
380
index.html
@@ -48,13 +48,14 @@
|
||||
<div class="nav-container">
|
||||
<div class="nav-logo">毕业设计展示</div>
|
||||
<ul class="nav-menu" id="navMenu">
|
||||
<li><a href="#analysis" class="nav-link">前期分析</a></li>
|
||||
<li><a href="#design" class="nav-link">设计表现</a></li>
|
||||
<li><a href="#drawings" class="nav-link">设计图纸</a></li>
|
||||
<li><a href="#performance" class="nav-link">性能分析</a></li>
|
||||
<li><a href="#self-sufficient" class="nav-link">自保障设计</a></li>
|
||||
<li><a href="#construction" class="nav-link">建造模拟</a></li>
|
||||
<li><a href="#about" class="nav-link">关于项目</a></li>
|
||||
<li><a href="index.html" class="nav-link active">首页</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">关于项目</a></li>
|
||||
</ul>
|
||||
<div class="hamburger" id="hamburger">
|
||||
<span></span>
|
||||
@@ -70,367 +71,9 @@
|
||||
<h1 class="hero-title">轻索方舱</h1>
|
||||
<p class="hero-subtitle">雪域阳光方舟 · 高海拔环境乡村医疗服务基站设计与建造研究</p>
|
||||
<p class="hero-description">高海拔极端环境 · 乡村医疗基站 · 轻型斜拉结构 · 装配式建造 · 性能化设计 · 自保障设计</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 1. 前期分析 -->
|
||||
<section class="section" id="analysis">
|
||||
<div class="container">
|
||||
<h2 class="section-title">前期分析</h2>
|
||||
<div class="card-grid analysis-grid">
|
||||
<!-- 图片1 -->
|
||||
<div class="card">
|
||||
<div class="card-image analysis-img">
|
||||
<img src="images/analysis-01.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>
|
||||
<p>青藏高原选址的地理环境分析，包括海拔、地形地貌等信息。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片2 -->
|
||||
<div class="card">
|
||||
<div class="card-image analysis-img">
|
||||
<img src="images/analysis-02.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>
|
||||
<p>高原气候特征分析，包括温度、降水、风力等气象数据。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片3 -->
|
||||
<div class="card">
|
||||
<div class="card-image analysis-img">
|
||||
<img src="images/analysis-03.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>
|
||||
<p>具体选址的优劣分析，包括交通可达性、基础设施等因素。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片4 -->
|
||||
<div class="card">
|
||||
<div class="card-image analysis-img">
|
||||
<img src="images/analysis-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>标题4</h3>
|
||||
<p>在此处插入说明文字...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片5 -->
|
||||
<div class="card">
|
||||
<div class="card-image analysis-img">
|
||||
<img src="images/analysis-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>标题5</h3>
|
||||
<p>在此处插入说明文字...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片6 -->
|
||||
<div class="card">
|
||||
<div class="card-image analysis-img">
|
||||
<img src="images/analysis-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>标题6</h3>
|
||||
<p>在此处插入说明文字...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片7 -->
|
||||
<div class="card">
|
||||
<div class="card-image analysis-img">
|
||||
<img src="images/analysis-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>标题7</h3>
|
||||
<p>在此处插入说明文字...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片8 -->
|
||||
<div class="card">
|
||||
<div class="card-image analysis-img">
|
||||
<img src="images/analysis-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>标题8</h3>
|
||||
<p>在此处插入说明文字...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2. 设计表现 -->
|
||||
<section class="section section-alt" id="design">
|
||||
<div class="container">
|
||||
<h2 class="section-title">设计表现</h2>
|
||||
<div class="gallery-grid">
|
||||
<div class="gallery-item large">
|
||||
<div class="placeholder-img tall">
|
||||
<span>鸟瞰渲染图</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<div class="placeholder-img">
|
||||
<span>室内渲染图1</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<div class="placeholder-img">
|
||||
<span>室内渲染图2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<div class="placeholder-img">
|
||||
<span>立面效果图</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<div class="placeholder-img">
|
||||
<span>细节特写</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3. 设计图纸 -->
|
||||
<section class="section" id="drawings">
|
||||
<div class="container">
|
||||
<h2 class="section-title">设计图纸</h2>
|
||||
<div class="card-grid two-columns">
|
||||
<div class="card">
|
||||
<div class="card-image placeholder-img wide">
|
||||
<span>总平面图</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>总平面布置图</h3>
|
||||
<p>展示建筑与场地的整体布局关系，包括道路、绿化、出入口等要素。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-image placeholder-img wide">
|
||||
<span>平面图</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>建筑平面图</h3>
|
||||
<p>详细展示各功能区域的平面布置，包括诊室、治疗室、候诊区等功能分区。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. 性能分析 -->
|
||||
<section class="section section-alt" id="performance">
|
||||
<div class="container">
|
||||
<h2 class="section-title">性能分析</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-image placeholder-img">
|
||||
<span>结构受力分析图</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>结构受力分析</h3>
|
||||
<p>轻钢拉索结构的受力计算与分析，展示关键节点的应力分布和承载能力。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-image placeholder-img">
|
||||
<span>节能计算图表</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>外围护结构节能计算</h3>
|
||||
<p>墙体、屋面、门窗的保温隔热性能计算，满足高原严寒地区的节能要求。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5. 自保障设计 -->
|
||||
<section class="section" id="self-sufficient">
|
||||
<div class="container">
|
||||
<h2 class="section-title">自保障设计</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-image placeholder-img">
|
||||
<span>太阳能系统示意图</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>太阳能发电系统</h3>
|
||||
<p>光伏发电系统的装机容量计算、储能配置及供电可靠性分析。</p>
|
||||
<ul class="info-list">
|
||||
<li>光伏板面积：XX m²</li>
|
||||
<li>日发电量：XX kWh</li>
|
||||
<li>储能电池容量：XX kWh</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-image placeholder-img">
|
||||
<span>水循环系统图</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>水循环利用系统</h3>
|
||||
<p>雨水收集、净化处理及中水回用系统的设计方案和水资源利用效率分析。</p>
|
||||
<ul class="info-list">
|
||||
<li>雨水收集量：XX m³/年</li>
|
||||
<li>中水回用率：XX%</li>
|
||||
<li>节水效益：XX%</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6. 建造模拟 -->
|
||||
<section class="section section-alt" id="construction">
|
||||
<div class="container">
|
||||
<h2 class="section-title">建造模拟</h2>
|
||||
|
||||
<div class="card mb-large">
|
||||
<div class="card-image placeholder-img wide">
|
||||
<span>建造场地总图</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>建造场地总平面布置</h3>
|
||||
<p>施工期间的场地布置，包括材料堆放区、施工机械位置、临时设施等。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-grid two-columns">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<h3>建造流程安排表</h3>
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>阶段</th>
|
||||
<th>工作内容</th>
|
||||
<th>工期(天)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>基础施工</td>
|
||||
<td>场地平整、基础浇筑</td>
|
||||
<td>15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>钢结构安装</td>
|
||||
<td>钢柱、钢梁吊装就位</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>拉索张拉</td>
|
||||
<td>拉索安装与预应力张拉</td>
|
||||
<td>7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>围护结构</td>
|
||||
<td>墙体、屋面安装</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>内部装修</td>
|
||||
<td>地面、墙面、吊顶</td>
|
||||
<td>15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>设备安装</td>
|
||||
<td>水电、暖通、医疗设备</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<h3>主要构件表</h3>
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>构件名称</th>
|
||||
<th>规格型号</th>
|
||||
<th>数量</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>钢柱</td>
|
||||
<td>H型钢 XXX×XXX</td>
|
||||
<td>XX根</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>钢梁</td>
|
||||
<td>H型钢 XXX×XXX</td>
|
||||
<td>XX根</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>拉索</td>
|
||||
<td>ΦXXmm 高强钢丝</td>
|
||||
<td>XX根</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>屋面板</td>
|
||||
<td>复合保温板 XXmm</td>
|
||||
<td>XX m²</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>外墙板</td>
|
||||
<td>保温装饰一体板</td>
|
||||
<td>XX m²</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 7. 关于项目 -->
|
||||
<section class="section" id="about">
|
||||
<div class="container">
|
||||
<h2 class="section-title">关于项目</h2>
|
||||
<div class="card single-card">
|
||||
<div class="card-content centered">
|
||||
<h3>结语与致谢</h3>
|
||||
<p class="large-text">
|
||||
本项目立足于青藏高原特殊的地理气候条件，探索轻钢拉索结构在极端环境下的应用可能性。
|
||||
通过"Approachable Luxury"的设计理念，在有限的资源条件下创造出既实用又具有美学价值的医疗空间。
|
||||
</p>
|
||||
<p>
|
||||
感谢指导老师的悉心教导，感谢评审专家的宝贵意见。<br>
|
||||
希望这个小小的医疗站能够为高原地区的医疗服务贡献一份力量。
|
||||
</p>
|
||||
<div class="project-info">
|
||||
<p><strong>项目名称：</strong>青藏高原轻钢拉索结构医疗站</p>
|
||||
<p><strong>建筑面积：</strong>200平方米</p>
|
||||
<p><strong>设计理念：</strong>Approachable Luxury（亲和的奢华）</p>
|
||||
<p><strong>设计时间：</strong>202X年</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-buttons">
|
||||
<a href="analysis.html" class="btn btn-primary">开始浏览</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -438,10 +81,11 @@
|
||||
<!-- 页脚 -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© 202X 毕业设计作品 | 青藏高原轻钢拉索结构医疗站</p>
|
||||
<p>© 2026 毕业设计展示 | 青藏高原轻钢拉索结构医疗站</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user