重构为多页导航架构：8个独立页面，前期分析4子板块，设计表现6图，设计图纸完整展示
This commit is contained in:
108
about.html
Normal file
108
about.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!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>Approachable Luxury（亲和的奢华）</p>
|
||||
<p><strong>学生姓名：</strong>杨雨晴</p>
|
||||
<p><strong>指导教师：</strong>XXX</p>
|
||||
<p><strong>学校专业：</strong>XXX大学 XXX专业</p>
|
||||
<p><strong>完成时间：</strong>2026年</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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© 2026 毕业设计展示 | 青藏高原轻钢拉索结构医疗站</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
232
analysis.html
Normal file
232
analysis.html
Normal file
@@ -0,0 +1,232 @@
|
||||
<!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>研究背景与意义</li>
|
||||
<li>设计目标与要求</li>
|
||||
<li>技术路线与方法</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>
|
||||
|
||||
<!-- 地理位置 -->
|
||||
<div class="subsection">
|
||||
<h3 class="subsection-title">地理位置</h3>
|
||||
<div class="card-grid analysis-grid">
|
||||
<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>本课题设计场地位于央布木村，村庄位于西藏那曲市班戈县佳琼镇，地处青藏高原北部藏北高原，海拔约4697米。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 气候条件 -->
|
||||
<div class="subsection">
|
||||
<h3 class="subsection-title">气候条件</h3>
|
||||
<div class="card-grid analysis-grid">
|
||||
<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>当地属高原亚寒带半干旱季风气候区，年均气温-2℃至2℃，年降水量约300mm，主要集中在6-9月。冬季漫长寒冷，夏季短暂凉爽，昼夜温差大，紫外线辐射强。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选址分析 -->
|
||||
<div class="subsection">
|
||||
<h3 class="subsection-title">选址分析</h3>
|
||||
<div class="card-grid analysis-grid">
|
||||
<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>
|
||||
</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>案例1标题</h3>
|
||||
<p>在此处插入案例分析说明...</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>案例2标题</h3>
|
||||
<p>在此处插入案例分析说明...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 案例3 -->
|
||||
<div class="card">
|
||||
<div class="card-image analysis-img">
|
||||
<img src="images/analysis-06.png" 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>
|
||||
|
||||
<!-- 案例4 -->
|
||||
<div class="card">
|
||||
<div class="card-image analysis-img">
|
||||
<img src="images/analysis-07.png" 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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 1.4 方案构思 -->
|
||||
<section class="section section-alt" id="concept">
|
||||
<div class="container">
|
||||
<h2 class="section-title">1.4 方案构思</h2>
|
||||
<div class="content-block">
|
||||
<p class="large-text">在此处插入方案构思的详细说明，包括：</p>
|
||||
<ul class="info-list">
|
||||
<li>设计理念与灵感来源</li>
|
||||
<li>功能布局与空间组织</li>
|
||||
<li>结构选型与技术策略</li>
|
||||
<li>材料选择与构造方式</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card-grid analysis-grid" style="margin-top: var(--spacing-md);">
|
||||
<div class="card">
|
||||
<div class="card-image analysis-img">
|
||||
<img src="images/analysis-08.png" 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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© 2026 毕业设计展示 | 青藏高原轻钢拉索结构医疗站</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
101
construction.html
Normal file
101
construction.html
Normal file
@@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
<!-- SEO Meta Tags -->
|
||||
<title>建造模拟 - 轻索方舱 | 高海拔环境乡村医疗服务基站</title>
|
||||
<meta name="description" content="建造模拟：场地总图、流程表、构件表">
|
||||
|
||||
<!-- Base Path for Subdirectory Deployment -->
|
||||
<base href="/g2026/g4/">
|
||||
|
||||
<!-- Smart Path Detection -->
|
||||
<script>
|
||||
(function() {
|
||||
const hostname = window.location.hostname;
|
||||
if (hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '') {
|
||||
const baseTag = document.querySelector('base');
|
||||
if (baseTag) {
|
||||
baseTag.remove();
|
||||
console.log('🔧 Local dev mode: base tag removed');
|
||||
}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Stylesheet -->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部固定导航栏 -->
|
||||
<nav class="navbar" id="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="nav-logo">毕业设计展示</div>
|
||||
<ul class="nav-menu" id="navMenu">
|
||||
<li><a href="index.html" class="nav-link">首页</a></li>
|
||||
<li><a href="analysis.html" class="nav-link">前期分析</a></li>
|
||||
<li><a href="design.html" class="nav-link">设计表现</a></li>
|
||||
<li><a href="drawings.html" class="nav-link">设计图纸</a></li>
|
||||
<li><a href="performance.html" class="nav-link">性能分析</a></li>
|
||||
<li><a href="self-sufficiency.html" class="nav-link">自保障设计</a></li>
|
||||
<li><a href="construction.html" class="nav-link active">建造模拟</a></li>
|
||||
<li><a href="about.html" class="nav-link">关于项目</a></li>
|
||||
</ul>
|
||||
<div class="hamburger" id="hamburger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 页面标题区域 -->
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1 class="page-title">建造模拟</h1>
|
||||
<p class="page-subtitle">Construction Simulation</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">场地总图</h2>
|
||||
<div class="content-block">
|
||||
<p class="large-text">在此处插入场地总图的详细说明...</p>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© 2026 毕业设计展示 | 青藏高原轻钢拉索结构医疗站</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
162
css/style.css
162
css/style.css
@@ -412,6 +412,168 @@ body {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
多页导航 - 页面标题区域
|
||||
======================================== */
|
||||
.page-header {
|
||||
padding: 8rem 2rem 4rem;
|
||||
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
|
||||
text-align: center;
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1rem;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.2rem;
|
||||
color: var(--primary-color);
|
||||
letter-spacing: 3px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
子板块标题
|
||||
======================================== */
|
||||
.subsection {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.subsection:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.subsection-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
padding-left: 1rem;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
内容块
|
||||
======================================== */
|
||||
.content-block {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
按钮样式
|
||||
======================================== */
|
||||
.hero-buttons {
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 1rem 2.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
border-radius: 30px;
|
||||
transition: var(--transition);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-dark);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
设计图纸 - 完整展示（避免滚动）
|
||||
======================================== */
|
||||
.drawing-full {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: #FFFFFF;
|
||||
padding: 2rem;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-soft);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.drawing-full img {
|
||||
max-width: 100%;
|
||||
max-height: 80vh;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.drawing-img {
|
||||
height: 400px;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.drawing-img img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.placeholder-text.large {
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
画廊样式优化
|
||||
======================================== */
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-md);
|
||||
margin-top: var(--spacing-md);
|
||||
}
|
||||
|
||||
.gallery-item.large {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.gallery-caption {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery-caption h3 {
|
||||
font-size: 1.3rem;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.gallery-caption p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
响应式设计
|
||||
======================================== */
|
||||
|
||||
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>诊室空间</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>候诊大厅</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>治疗室</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>
|
||||
177
drawings.html
Normal file
177
drawings.html
Normal file
@@ -0,0 +1,177 @@
|
||||
<!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">
|
||||
<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">
|
||||
<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="card-grid two-columns">
|
||||
<!-- 东立面 -->
|
||||
<div class="card">
|
||||
<div class="card-image drawing-img">
|
||||
<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">
|
||||
<div class="card-image drawing-img">
|
||||
<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">
|
||||
<div class="card-image drawing-img">
|
||||
<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">
|
||||
<div class="card-image drawing-img">
|
||||
<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="card-grid two-columns">
|
||||
<!-- 1-1剖面 -->
|
||||
<div class="card">
|
||||
<div class="card-image drawing-img">
|
||||
<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">
|
||||
<div class="card-image drawing-img">
|
||||
<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>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© 2026 毕业设计展示 | 青藏高原轻钢拉索结构医疗站</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 462 KiB After Width: | Height: | Size: 462 KiB |
|
Before Width: | Height: | Size: 780 KiB After Width: | Height: | Size: 780 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
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>
|
||||
|
||||
41
js/main.js
41
js/main.js
@@ -24,18 +24,37 @@ const hamburger = document.getElementById('hamburger');
|
||||
const navMenu = document.getElementById('navMenu');
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
|
||||
hamburger.addEventListener('click', () => {
|
||||
hamburger.classList.toggle('active');
|
||||
navMenu.classList.toggle('active');
|
||||
});
|
||||
|
||||
// 点击导航链接后关闭菜单
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
hamburger.classList.remove('active');
|
||||
navMenu.classList.remove('active');
|
||||
if (hamburger && navMenu) {
|
||||
hamburger.addEventListener('click', () => {
|
||||
hamburger.classList.toggle('active');
|
||||
navMenu.classList.toggle('active');
|
||||
});
|
||||
});
|
||||
|
||||
// 点击导航链接后关闭菜单
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
hamburger.classList.remove('active');
|
||||
navMenu.classList.remove('active');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// 当前页面高亮显示
|
||||
// ========================================
|
||||
(function highlightCurrentPage() {
|
||||
const currentPage = window.location.pathname.split('/').pop() || 'index.html';
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
|
||||
navLinks.forEach(link => {
|
||||
const linkHref = link.getAttribute('href');
|
||||
if (linkHref === currentPage) {
|
||||
link.classList.add('active');
|
||||
} else {
|
||||
link.classList.remove('active');
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
// ========================================
|
||||
// 平滑滚动到锚点
|
||||
|
||||
92
performance.html
Normal file
92
performance.html
Normal file
@@ -0,0 +1,92 @@
|
||||
<!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 active">性能分析</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">Performance Analysis</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">结构受力分析</h2>
|
||||
<div class="content-block">
|
||||
<p class="large-text">在此处插入结构受力分析的详细说明和图表...</p>
|
||||
</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>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© 2026 毕业设计展示 | 青藏高原轻钢拉索结构医疗站</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
92
self-sufficiency.html
Normal file
92
self-sufficiency.html
Normal file
@@ -0,0 +1,92 @@
|
||||
<!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 active">自保障设计</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">Self-Sufficiency Design</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">太阳能发电系统</h2>
|
||||
<div class="content-block">
|
||||
<p class="large-text">在此处插入太阳能发电系统的详细说明...</p>
|
||||
</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>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© 2026 毕业设计展示 | 青藏高原轻钢拉索结构医疗站</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user