214 lines
10 KiB
HTML
214 lines
10 KiB
HTML
<!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>
|
|
|
|
<!-- 内容区域 -->
|
|
|
|
<!-- 1. 结构受力分析 -->
|
|
<section class="section" id="structural-analysis">
|
|
<div class="container">
|
|
<h2 class="section-title">结构受力分析</h2>
|
|
|
|
<!-- 第一段文字 -->
|
|
<div class="content-block">
|
|
<p class="large-text">在此处插入结构受力分析的第一段详细说明...</p>
|
|
</div>
|
|
|
|
<!-- 受力分析图示（大图横向占满） -->
|
|
<div class="full-width-image">
|
|
<img src="images/perf-structure-full.jpg" alt="受力分析图示" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
|
<div class="placeholder-text large" style="display:none;">受力分析图示</div>
|
|
</div>
|
|
|
|
<!-- 第二段文字 -->
|
|
<div class="content-block">
|
|
<p class="large-text">在此处插入结构受力分析的第二段详细说明...</p>
|
|
</div>
|
|
|
|
<!-- 左侧2张图 + 右侧3列4行表格 -->
|
|
<div class="text-image-table-layout">
|
|
<div class="layout-images-left">
|
|
<div class="image-pair">
|
|
<img src="images/perf-structure-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="image-pair">
|
|
<img src="images/perf-structure-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>
|
|
<div class="layout-table-right">
|
|
<table class="performance-table">
|
|
<thead>
|
|
<tr>
|
|
<th>参数1</th>
|
|
<th>参数2</th>
|
|
<th>参数3</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
|
|
<tr><td>数据4</td><td>数据5</td><td>数据6</td></tr>
|
|
<tr><td>数据7</td><td>数据8</td><td>数据9</td></tr>
|
|
<tr><td>数据10</td><td>数据11</td><td>数据12</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. 外围护节能计算 -->
|
|
<section class="section section-alt" id="energy-calculation">
|
|
<div class="container">
|
|
<h2 class="section-title">外围护节能计算</h2>
|
|
|
|
<!-- 左侧表格 + 右侧文字 -->
|
|
<div class="table-text-layout">
|
|
<div class="layout-table-left">
|
|
<table class="performance-table wide">
|
|
<thead>
|
|
<tr>
|
|
<th>项目</th>
|
|
<th>指标1</th>
|
|
<th>指标2</th>
|
|
<th>指标3</th>
|
|
<th>指标4</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>项目1</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
|
|
<tr><td>项目2</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
|
|
<tr><td>项目3</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
|
|
<tr><td>项目4</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
|
|
<tr><td>项目5</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
|
|
<tr><td>项目6</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
|
|
<tr><td>项目7</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
|
|
<tr><td>项目8</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
|
|
<tr><td>项目9</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
|
|
<tr><td>项目10</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="layout-text-right">
|
|
<p class="large-text">在此处插入外围护节能计算的详细说明...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. 建筑光环境分析：采光模拟 -->
|
|
<section class="section" id="lighting-simulation">
|
|
<div class="container">
|
|
<h2 class="section-title">建筑光环境分析：采光模拟</h2>
|
|
|
|
<!-- 4张光照分析图横向排开 -->
|
|
<div class="image-slider-container">
|
|
<div class="image-slider light-analysis">
|
|
<div class="slider-item with-caption">
|
|
<img src="images/perf-light-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">图名标注1</p>
|
|
</div>
|
|
<div class="slider-item with-caption">
|
|
<img src="images/perf-light-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">图名标注2</p>
|
|
</div>
|
|
<div class="slider-item with-caption">
|
|
<img src="images/perf-light-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">图名标注3</p>
|
|
</div>
|
|
<div class="slider-item with-caption">
|
|
<img src="images/perf-light-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">图名标注4</p>
|
|
</div>
|
|
</div>
|
|
<div class="slider-hint">← 左右滑动查看更多 →</div>
|
|
</div>
|
|
|
|
<!-- 左侧大图 + 右侧文字 -->
|
|
<div class="text-image-layout reverse">
|
|
<div class="layout-text">
|
|
<p class="large-text">在此处插入全年照度平均值的详细说明...</p>
|
|
</div>
|
|
<div class="layout-image-single">
|
|
<img src="images/perf-light-annual.jpg" alt="全年照度平均值" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
|
<div class="placeholder-text large" style="display:none;">全年照度平均值</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>
|