Files
new-site/self-sufficiency.html

147 lines
6.7 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">设计图纸</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>
<!-- 内容区域 -->
<!-- 1. 建筑能源系统综合分析 -->
<section class="section" id="energy-analysis">
<div class="container">
<h2 class="section-title">建筑能源系统综合分析</h2>
<!-- 第一段文字 -->
<div class="content-block">
<p class="large-text">在此处插入建筑能源系统综合分析的第一段详细说明...</p>
</div>
<!-- 两张图并排(带图名) -->
<div class="image-pair-with-caption">
<div class="image-item">
<img src="images/self-energy-01.jpg" alt="建筑月度能耗构成柱状图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text medium" style="display:none;">建筑月度能耗构成柱状图</div>
<p class="image-caption">建筑月度能耗构成柱状图</p>
</div>
<div class="image-item">
<img src="images/self-energy-02.jpg" alt="逐月能源供需平衡分析" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text medium" style="display:none;">逐月能源供需平衡分析</div>
<p class="image-caption">逐月能源供需平衡分析</p>
</div>
</div>
<!-- 第二段文字 -->
<div class="content-block">
<p class="large-text">在此处插入建筑能源系统综合分析的第二段详细说明...</p>
</div>
<!-- 两张图并排(带图名) -->
<div class="image-pair-with-caption">
<div class="image-item">
<img src="images/self-energy-03.jpg" alt="各光伏发电板年度发电量排名" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text medium" style="display:none;">各光伏发电板年度发电量排名</div>
<p class="image-caption">各光伏发电板年度发电量排名</p>
</div>
<div class="image-item">
<img src="images/self-energy-04.jpg" alt="典型日1月1日能耗变化曲线" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text medium" style="display:none;">典型日1月1日能耗变化曲线</div>
<p class="image-caption">典型日1月1日能耗变化曲线</p>
</div>
</div>
</div>
</section>
<!-- 2. 排水系统设计 -->
<section class="section section-alt" id="drainage-system">
<div class="container">
<h2 class="section-title">排水系统设计</h2>
<!-- 文字说明 -->
<div class="content-block">
<p class="large-text">在此处插入排水系统设计的详细说明...</p>
</div>
<!-- 两张图并排(带图名) -->
<div class="image-pair-with-caption">
<div class="image-item">
<img src="images/self-drainage-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">图名标注1</p>
</div>
<div class="image-item">
<img src="images/self-drainage-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">图名标注2</p>
</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>