Files
new-site/index.html

448 lines
20 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="雪域阳光方舟 · 高海拔环境乡村医疗服务基站设计与建造研究">
<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/">
<meta property="og:title" content="雪域阳光方舟 - 轻索方舱">
<meta property="og:description" content="青藏高原轻钢拉索结构医疗站 - Approachable Luxury设计理念">
<!-- <meta property="og:image" content="images/og-image.jpg"> -->
<!-- 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="#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>
</ul>
<div class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<!-- Hero区域 -->
<section class="hero" id="home">
<div class="hero-content">
<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>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<p>&copy; 202X 毕业设计作品 | 青藏高原轻钢拉索结构医疗站</p>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>