添加首页背景图（50%不透明度），重构1.2场地分析为两个子板块（自然地理9图+经济人口1图）

analysis.html

@@ -81,52 +81,132 @@
         <div class="container">
             <h2 class="section-title">1.2 场地分析</h2>
             
-            <!-- 地理位置 -->
+            <!-- 1.2.1 自然地理环境分析（9张图） -->
             <div class="subsection">
-                <h3 class="subsection-title">地理位置</h3>
+                <h3 class="subsection-title">1.2.1 自然地理环境分析</h3>
-                <div class="card-grid analysis-grid">
+                <div class="card-grid analysis-grid-9">
+                    <!-- 图片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';">
+                            <img src="images/site-nature-01.jpg" alt="自然地理图1" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
-                            <div class="placeholder-text" style="display:none;">央木布村航拍图</div>
+                            <div class="placeholder-text" style="display:none;">自然地理图1</div>
                         </div>
                         <div class="card-content">
-                            <h3>央木布村航拍图</h3>
+                            <h3>标题1</h3>
-                            <p>本课题设计场地位于央布木村，村庄位于西藏那曲市班戈县佳琼镇，地处青藏高原北部藏北高原，海拔约4697米。</p>
+                            <p>在此处插入说明文字...</p>
+                        </div>
+                    </div>
+                    
+                    <!-- 图片2 -->
+                    <div class="card">
+                        <div class="card-image analysis-img">
+                            <img src="images/site-nature-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>标题2</h3>
+                            <p>在此处插入说明文字...</p>
+                        </div>
+                    </div>
+                    
+                    <!-- 图片3 -->
+                    <div class="card">
+                        <div class="card-image analysis-img">
+                            <img src="images/site-nature-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>标题3</h3>
+                            <p>在此处插入说明文字...</p>
+                        </div>
+                    </div>
+                    
+                    <!-- 图片4 -->
+                    <div class="card">
+                        <div class="card-image analysis-img">
+                            <img src="images/site-nature-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/site-nature-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/site-nature-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/site-nature-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/site-nature-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>
+                    
+                    <!-- 图片9 -->
+                    <div class="card">
+                        <div class="card-image analysis-img">
+                            <img src="images/site-nature-09.jpg" alt="自然地理图9" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                            <div class="placeholder-text" style="display:none;">自然地理图9</div>
+                        </div>
+                        <div class="card-content">
+                            <h3>标题9</h3>
+                            <p>在此处插入说明文字...</p>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <!-- 气候条件 -->
+            <!-- 1.2.2 经济、人口和基础设施（1张图） -->
             <div class="subsection">
-                <h3 class="subsection-title">气候条件</h3>
+                <h3 class="subsection-title">1.2.2 经济、人口和基础设施</h3>
-                <div class="card-grid analysis-grid">
+                <div class="card-grid analysis-grid-single">
-                    <div class="card">
+                    <div class="card single-card">
-                        <div class="card-image analysis-img">
+                        <div class="card-image analysis-img wide">
-                            <img src="images/analysis-02.jpg" alt="气温降水月分布图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                            <img src="images/site-economy.jpg" alt="经济人口基础设施分析图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
-                            <div class="placeholder-text" style="display:none;">气温降水月分布图</div>
+                            <div class="placeholder-text" style="display:none;">经济人口基础设施分析图</div>
                         </div>
                         <div class="card-content">
-                            <h3>气温降水月分布图</h3>
+                            <h3>经济、人口和基础设施分析</h3>
-                            <p>当地属高原亚寒带半干旱季风气候区，年均气温-2℃至2℃，年降水量约300mm，主要集中在6-9月。冬季漫长寒冷，夏季短暂凉爽，昼夜温差大，紫外线辐射强。</p>
+                            <p>在此处插入关于当地经济发展水平、人口分布特征、交通条件、医疗设施等基础设施的详细说明...</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>

css/style.css

@@ -141,40 +141,27 @@ body {
    Hero区域
    ======================================== */
 .hero {
-    min-height: 100vh;
+    position: relative;
-    display: flex;
+    overflow: hidden;
-    align-items: center;
+}
-    justify-content: center;
+
-    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
+.hero-background {
-    padding: 6rem 2rem 4rem;
+    position: absolute;
-    text-align: center;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: url('../images/hero-bg.jpg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    opacity: 0.5;
+    z-index: 0;
 }
 
 .hero-content {
-    max-width: 800px;
+    position: relative;
-}
+    z-index: 1;
-
-.hero-title {
-    font-size: 3rem;
-    font-weight: 700;
-    color: var(--text-primary);
-    margin-bottom: 1.5rem;
-    letter-spacing: 2px;
-    line-height: 1.3;
-}
-
-.hero-subtitle {
-    font-size: 1.5rem;
-    color: var(--primary-color);
-    margin-bottom: 1rem;
-    font-weight: 500;
-    letter-spacing: 3px;
-}
-
-.hero-description {
-    font-size: 1.1rem;
-    color: var(--text-secondary);
-    letter-spacing: 1px;
 }
 
 /* ========================================
@@ -756,3 +743,48 @@ body {
         height: 350px;  /* 手机端更高 */
     }
 }
+
+/* ========================================
+   前期分析 - 9张图片网格布局
+   ======================================== */
+.analysis-grid-9 {
+    /* 3列布局，9张图 */
+    grid-template-columns: repeat(3, 1fr) !important;
+    gap: var(--spacing-md);
+}
+
+/* 响应式：平板设备改为2列 */
+@media (max-width: 1024px) {
+    .analysis-grid-9 {
+        grid-template-columns: repeat(2, 1fr) !important;
+    }
+}
+
+/* 响应式：手机设备改为1列 */
+@media (max-width: 768px) {
+    .analysis-grid-9 {
+        grid-template-columns: 1fr !important;
+    }
+    
+    .analysis-img {
+        height: 250px;
+    }
+}
+
+/* ========================================
+   前期分析 - 单张大图布局
+   ======================================== */
+.analysis-grid-single {
+    display: flex;
+    justify-content: center;
+    margin-top: var(--spacing-md);
+}
+
+.single-card {
+    max-width: 1000px;
+    width: 100%;
+}
+
+.analysis-img.wide {
+    height: 450px;
+}

images/IMAGE_GUIDE.md

@@ -0,0 +1,211 @@
+#  图片资源命名与使用指南
+
+## 📋 快速索引
+
+### 首页背景图
+```
+images/hero-bg.jpg          ← Hero区域背景底图（建议1920×1080px）
+```
+
+### 前期分析 - 场地分析
+#### 1.2.1 自然地理环境分析（9张图）
+```
+images/site-nature-01.jpg   ← 自然地理图1
+images/site-nature-02.jpg   ← 自然地理图2
+images/site-nature-03.jpg   ← 自然地理图3
+images/site-nature-04.jpg   ← 自然地理图4
+images/site-nature-05.jpg   ← 自然地理图5
+images/site-nature-06.jpg   ← 自然地理图6
+images/site-nature-07.jpg   ← 自然地理图7
+images/site-nature-08.jpg   ← 自然地理图8
+images/site-nature-09.jpg   ← 自然地理图9
+```
+
+#### 1.2.2 经济、人口和基础设施（1张图）
+```
+images/site-economy.jpg     ← 经济人口基础设施分析图（建议大图，如1600×900px）
+```
+
+---
+
+## 🎨 首页背景图说明
+
+### 推荐规格
+- **尺寸**: 1920×1080px 或更大
+- **格式**: JPG（压缩质量80-90%）
+- **文件大小**: < 500KB
+- **内容建议**: 
+  - 青藏高原风景
+  - 建筑效果图
+  - 抽象纹理
+  - 任何与项目相关的底图
+
+### CSS效果
+```css
+.hero-background {
+    opacity: 0.5;  /* 50%不透明度 */
+    background-size: cover;  /* 覆盖整个区域 */
+}
+```
+
+**效果**：
+- ✅ 背景图半透明显示
+- ✅ 不影响文字阅读
+- ✅ 营造氛围感
+
+### 如何替换
+1. 准备一张喜欢的背景图
+2. 命名为 `hero-bg.jpg`
+3. 放入 `images/` 文件夹
+4. 刷新浏览器即可看到效果
+
+---
+
+## 🗺️ 场地分析 - 自然地理环境分析（9张图）
+
+### 布局方式
+- **桌面端**: 3列 × 3行网格
+- **平板端**: 2列网格
+- **手机端**: 1列垂直排列
+
+### 图片规格
+- **推荐尺寸**: 800×600px 或 1024×768px
+- **最小宽度**: 600px
+- **文件格式**: JPG 或 PNG
+- **统一高度**: 280px（自动裁剪，白底填充）
+
+### 命名规范
+必须严格按照以下格式命名：
+```
+site-nature-01.jpg  (注意：小写，连字符，两位数)
+site-nature-02.jpg
+...
+site-nature-09.jpg
+```
+
+❌ 错误示例：
+```
+Site-Nature-1.jpg   (大写+缺少0)
+site_nature_01.jpg  (下划线)
+site nature 01.jpg  (空格)
+```
+
+### 修改标题和说明
+打开 `analysis.html`，找到对应位置：
+
+```html
+<!-- 图片1 -->
+<div class="card">
+    <div class="card-image analysis-img">
+        <img src="images/site-nature-01.jpg" alt="自然地理图1" ...>
+    </div>
+    <div class="card-content">
+        <h3>标题1</h3>           ← 改成你的标题
+        <p>在此处插入说明文字...</p>  ← 改成你的说明
+    </div>
+</div>
+```
+
+---
+
+## 📊 场地分析 - 经济、人口和基础设施（1张图）
+
+### 布局方式
+- **单张大图**，居中显示
+- **最大宽度**: 1000px
+- **固定高度**: 450px
+
+### 图片规格
+- **推荐尺寸**: 1600×900px 或更大（横图）
+- **最小宽度**: 1200px
+- **文件格式**: JPG 或 PNG
+- **完整展示**: 使用 `object-fit: contain`，允许白边
+
+### 命名规范
+```
+site-economy.jpg
+```
+
+### 修改内容
+打开 `analysis.html`，找到对应位置：
+
+```html
+<div class="card single-card">
+    <div class="card-image analysis-img wide">
+        <img src="images/site-economy.jpg" alt="经济人口基础设施分析图" ...>
+    </div>
+    <div class="card-content">
+        <h3>经济、人口和基础设施分析</h3>  ← 可修改标题
+        <p>在此处插入关于当地经济发展水平...</p>  ← 修改详细说明
+    </div>
+</div>
+```
+
+---
+
+## 🔍 常见问题排查
+
+### 问题1：图片未显示
+**检查清单**：
+1. ✅ 文件名是否正确（大小写、连字符、数字位数）
+2. ✅ 文件是否在 `images/` 文件夹
+3. ✅ 文件格式是否为 `.jpg` 或 `.png`
+4. ✅ 浏览器控制台是否有404错误（F12 → Console）
+
+### 问题2：图片变形
+**解决方案**：
+- 所有图片都会自动适配容器
+- 使用 `object-fit: contain` 确保不变形
+- 可能出现白边，这是正常现象
+
+### 问题3：背景图不显示
+**检查清单**：
+1. ✅ 文件名必须是 `hero-bg.jpg`
+2. ✅ 文件在 `images/` 文件夹
+3. ✅ 图片尺寸足够大（至少1920×1080px）
+4. ✅ 清除浏览器缓存（Ctrl + Shift + R）
+
+---
+
+## 💡 高级技巧
+
+### 调整背景图不透明度
+打开 `css/style.css`，找到：
+
+```css
+.hero-background {
+    opacity: 0.5;  /* 改为 0.3、0.7 等 */
+}
+```
+
+### 调整9张图的间距
+```css
+.analysis-grid-9 {
+    gap: var(--spacing-md);  /* 改为 1rem、3rem 等 */
+}
+```
+
+### 调整单张大图的高度
+```css
+.analysis-img.wide {
+    height: 450px;  /* 改为 400px、500px 等 */
+}
+```
+
+---
+
+## 🎊 完成标志
+
+当你看到以下内容时，表示成功：
+
+✅ 首页有半透明背景图  
+✅ 文字清晰可读  
+✅ 9张自然地理图整齐排列  
+✅ 1张经济人口图居中显示  
+✅ 响应式布局正常  
+
+---
+
+**祝你顺利添加图片！** ✨
+
+*如有问题，随时告诉我！*

index.html

@@ -67,6 +67,7 @@
 
     <!-- Hero区域 -->
     <section class="hero" id="home">
+        <div class="hero-background"></div>
         <div class="hero-content">
             <h1 class="hero-title">轻索方舱</h1>
             <p class="hero-subtitle">雪域阳光方舟 · 高海拔环境乡村医疗服务基站设计与建造研究</p>