Files
dieign/index.html
2026-05-15 14:14:53 +08:00

369 lines
14 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">
<title>雪域阳光方舟——高海拔极端环境乡村医疗服务基站BIM设计与智能建造研究</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
:root {
--primary: #E9D395;
--dark: #6B4F2E;
--light: #F8F0D7;
--accent: #FF6600;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: var(--light);
color: #333;
padding-top: 72px;
}
/* Navbar */
.navbar-custom {
background: linear-gradient(135deg, var(--primary), var(--dark));
padding: 0 1rem;
box-shadow: 0 2px 12px rgba(107,79,46,0.3);
}
.navbar-custom .navbar-brand {
color: #fff;
font-weight: 700;
font-size: 1.35rem;
letter-spacing: 1px;
padding: 12px 0;
}
.navbar-custom .navbar-brand:hover { color: #fff; }
.navbar-custom .nav-link {
color: rgba(255,255,255,0.9) !important;
padding: 22px 14px !important;
font-size: 0.95rem;
font-weight: 500;
transition: background 0.2s, color 0.2s;
white-space: nowrap;
}
.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus {
background: rgba(255,255,255,0.12);
color: #fff !important;
}
.navbar-custom .nav-link.dropdown-toggle::after {
display: inline-block;
margin-left: 5px;
vertical-align: middle;
border-top: 0.35em solid;
border-right: 0.35em solid transparent;
border-left: 0.35em solid transparent;
transition: transform 0.2s;
}
.navbar-custom .nav-link.dropdown-toggle.show::after {
transform: rotate(180deg);
}
.navbar-custom .dropdown-menu {
background: #fff;
border: none;
border-radius: 8px;
box-shadow: 0 8px 30px rgba(0,51,102,0.18);
padding: 8px 0;
margin-top: 0;
min-width: 200px;
}
.navbar-custom .dropdown-menu .dropdown-item {
padding: 10px 20px;
font-size: 0.9rem;
color: #333;
transition: background 0.2s, color 0.2s;
border-left: 3px solid transparent;
}
.navbar-custom .dropdown-menu .dropdown-item:hover {
background: var(--light);
color: var(--primary);
border-left-color: var(--primary);
}
.navbar-custom .dropdown-menu .dropdown-item:active {
background: var(--primary);
color: #fff;
}
.navbar-toggler {
border: 1px solid rgba(255,255,255,0.5);
padding: 6px 10px;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.8)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Hero */
.hero-section {
background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%);
padding: 60px 0 50px;
text-align: center;
}
.hero-title-wrap {
display: inline-block;
background: linear-gradient(to right, rgba(107,79,46,0.88) 0%, rgba(107,79,46,0.08) 100%);
padding: 14px 36px;
border-radius: 10px;
backdrop-filter: blur(1px);
margin-top: 12px;
}
.hero-title {
font-size: 2.4rem;
font-weight: 800;
color: #fff;
letter-spacing: 4px;
margin-bottom: 4px;
text-shadow: 0 2px 8px rgba(0,0,0,0.2);
line-height: 1.4;
}
.hero-title-sm {
font-size: 1.15rem;
font-weight: 400;
color: rgba(255,255,255,0.8);
letter-spacing: 2px;
margin-top: 4px;
}
.hero-subtitle {
font-size: 1.1rem;
color: rgba(255,255,255,0.75);
letter-spacing: 4px;
margin-bottom: 0;
}
.hero-divider {
width: 60px;
height: 3px;
background: var(--accent);
margin: 16px auto;
border-radius: 2px;
}
.hero-img {
width: 100%;
max-width: 1200px;
height: auto;
border-radius: 12px;
box-shadow: 0 8px 40px rgba(107,79,46,0.15);
display: block;
margin: 0 auto;
object-fit: cover;
}
/* Main content */
.main-wrapper {
max-width: 1260px;
margin: 0 auto;
padding: 50px 20px 80px;
}
/* Section cards */
.section-card {
background: #fff;
border-radius: 12px;
padding: 40px;
box-shadow: 0 4px 20px rgba(107,79,46,0.06);
margin-bottom: 40px;
border: 1px solid rgba(233,211,149,0.2);
}
.section-card h2 {
color: var(--primary);
font-weight: 700;
font-size: 1.6rem;
margin-bottom: 16px;
padding-left: 16px;
border-left: 4px solid var(--accent);
}
.section-card p {
font-size: 1rem;
line-height: 1.8;
color: #555;
}
/* Footer */
footer {
background: var(--dark);
color: rgba(255,255,255,0.65);
text-align: center;
padding: 24px 0;
font-size: 0.85rem;
}
footer span { color: var(--accent); }
/* Responsive */
@media (max-width: 991.98px) {
body { padding-top: 64px; }
.navbar-custom .nav-link { padding: 12px 14px !important; }
.navbar-custom .dropdown-menu { box-shadow: none; padding-left: 16px; }
.hero-title { font-size: 2rem; letter-spacing: 4px; }
.hero-title-wrap { padding: 10px 20px; }
}
@media (max-width: 575.98px) {
.hero-title { font-size: 1.5rem; }
.hero-title-wrap { padding: 8px 14px; }
.section-card { padding: 24px; }
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-xl navbar-dark navbar-custom fixed-top">
<div class="container">
<a class="navbar-brand" href="#">建筑作品集</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar"
aria-controls="mainNavbar" aria-expanded="false" aria-label="切换导航">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="navbar-nav ms-auto">
<!-- 首页 -->
<li class="nav-item">
<a class="nav-link active" href="#">首页</a>
</li>
<!-- 前期调研 -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="ddResearch" role="button" data-bs-toggle="dropdown" aria-expanded="false">
前期调研
</a>
<ul class="dropdown-menu" aria-labelledby="ddResearch">
<li><a class="dropdown-item" href="pages/research-1.html">课题背景</a></li>
<li><a class="dropdown-item" href="pages/research-2.html">场地环境</a></li>
<li><a class="dropdown-item" href="pages/research-3.html">课程特点</a></li>
<li><a class="dropdown-item" href="pages/research-4.html">课程日程安排</a></li>
<li><a class="dropdown-item" href="pages/research-5.html">设计目标与总结</a></li>
</ul>
</li>
<!-- 装配式建筑设计 -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="ddPrefab" role="button" data-bs-toggle="dropdown" aria-expanded="false">
装配式建筑设计
</a>
<ul class="dropdown-menu" aria-labelledby="ddPrefab">
<li><a class="dropdown-item" href="pages/prefab-1.html">建筑设计</a></li>
<li><a class="dropdown-item" href="pages/prefab-2.html">文化意象</a></li>
<li><a class="dropdown-item" href="pages/prefab-3.html">数字模型</a></li>
<li><a class="dropdown-item" href="pages/prefab-4.html">全景预览</a></li>
<li><a class="dropdown-item" href="pages/prefab-5.html">技术图纸</a></li>
<li><a class="dropdown-item" href="pages/prefab-6.html">应力分析</a></li>
<li><a class="dropdown-item" href="pages/prefab-7.html">构件分解</a></li>
<li><a class="dropdown-item" href="pages/prefab-8.html">运输模拟</a></li>
<li><a class="dropdown-item" href="pages/prefab-9.html">建造流程</a></li>
</ul>
</li>
<!-- 自保障设计 -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="ddSelfSecure" role="button" data-bs-toggle="dropdown" aria-expanded="false">
自保障设计
</a>
<ul class="dropdown-menu" aria-labelledby="ddSelfSecure">
<li><a class="dropdown-item" href="pages/selfsecure-1.html">光环境模拟</a></li>
<li><a class="dropdown-item" href="pages/selfsecure-2.html">眩光模拟</a></li>
<li><a class="dropdown-item" href="pages/selfsecure-3.html">太阳辐射模拟</a></li>
<li><a class="dropdown-item" href="pages/selfsecure-4.html">视域分析</a></li>
<li><a class="dropdown-item" href="pages/selfsecure-5.html">水循环系统</a></li>
</ul>
</li>
<!-- 装配式室内设计 -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="ddInterior" role="button" data-bs-toggle="dropdown" aria-expanded="false">
装配式室内设计
</a>
<ul class="dropdown-menu" aria-labelledby="ddInterior">
<li><a class="dropdown-item" href="pages/interior-1.html">空间构想&amp;设计策略</a></li>
<li><a class="dropdown-item" href="pages/interior-2.html">室内平面</a></li>
<li><a class="dropdown-item" href="pages/interior-3.html">家具清单</a></li>
<li><a class="dropdown-item" href="pages/interior-4.html">室内效果渲染</a></li>
<li><a class="dropdown-item" href="pages/interior-5.html">室内全景预览</a></li>
</ul>
</li>
<!-- 建筑景观一体化设计 -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="ddLandscape" role="button" data-bs-toggle="dropdown" aria-expanded="false">
建筑景观一体化设计
</a>
<ul class="dropdown-menu" aria-labelledby="ddLandscape">
<li><a class="dropdown-item" href="pages/landscape-1.html">生态敏感性分析</a></li>
<li><a class="dropdown-item" href="pages/landscape-2.html">宜居程度分析</a></li>
<li><a class="dropdown-item" href="pages/landscape-3.html">建设用地提取</a></li>
<li><a class="dropdown-item" href="pages/landscape-4.html">中观尺度设计</a></li>
<li><a class="dropdown-item" href="pages/landscape-5.html">中水利用</a></li>
<li><a class="dropdown-item" href="pages/landscape-6.html">温室建造</a></li>
</ul>
</li>
<!-- AI应用 -->
<li class="nav-item">
<a class="nav-link" href="#">AI应用</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero -->
<section class="hero-section">
<div class="container">
<p class="hero-subtitle">ARCHITECTURE PORTFOLIO</p>
<div class="hero-title-wrap">
<h1 class="hero-title">雪域阳光方舟</h1>
<p class="hero-title-sm">高海拔极端环境乡村医疗服务基站BIM设计与智能建造研究</p>
</div>
<div class="hero-divider"></div>
</div>
</section>
<!-- Main -->
<main class="main-wrapper">
<div class="container">
<!-- Hero image -->
<img src="images/hero.jpg" alt="雪域阳光方舟项目展示图" class="hero-img mb-5">
<!-- 项目简介 -->
<div class="section-card">
<h2>项目简介</h2>
<p>
<strong>雪域阳光方舟</strong>——本项目聚焦于高海拔极端环境下的乡村医疗服务基站设计,
以装配式建筑技术、BIM数字化设计与智能建造为核心手段
探索在严苛自然条件下构建功能完善、环境友好、可持续运营的医疗服务平台。
研究内容涵盖前期调研、装配式建筑设计、自保障设计、室内设计、
建筑景观一体化设计及AI技术应用形成完整的设计研究闭环。
</p>
</div>
<!-- 设计亮点 -->
<div class="row g-4">
<div class="col-md-4">
<div class="section-card h-100" style="text-align:center; padding-bottom:32px;">
<div style="font-size:2.6rem; color:var(--primary); margin-bottom:12px;">&#9881;</div>
<h3 style="font-size:1.15rem; color:var(--dark); font-weight:700; margin-bottom:10px;">装配式建造</h3>
<p style="font-size:0.92rem; color:#666; margin:0;">模数化设计、工厂预制、现场装配,提升效率与品质</p>
</div>
</div>
<div class="col-md-4">
<div class="section-card h-100" style="text-align:center; padding-bottom:32px;">
<div style="font-size:2.6rem; color:var(--primary); margin-bottom:12px;">&#9729;</div>
<h3 style="font-size:1.15rem; color:var(--dark); font-weight:700; margin-bottom:10px;">环境模拟</h3>
<p style="font-size:0.92rem; color:#666; margin:0;">光环境、热辐射、风环境等多物理场仿真优化</p>
</div>
</div>
<div class="col-md-4">
<div class="section-card h-100" style="text-align:center; padding-bottom:32px;">
<div style="font-size:2.6rem; color:var(--primary); margin-bottom:12px;">&#127758;</div>
<h3 style="font-size:1.15rem; color:var(--dark); font-weight:700; margin-bottom:10px;">景观一体化</h3>
<p style="font-size:0.92rem; color:#666; margin:0;">建筑与景观协同设计,构建完整的生态系统</p>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer>
<div class="container">
&copy; 2026 雪域阳光方舟 &nbsp;|&nbsp; 高海拔极端环境乡村医疗服务基站BIM设计与智能建造研究
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>