From 68028f36ad91caab00d97670768b8b55f11565b1 Mon Sep 17 00:00:00 2001 From: yangyuqing <1614872855@qq.com> Date: Tue, 2 Jun 2026 22:16:48 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A6=96=E9=A1=B5=E8=83=8C?= =?UTF-8?q?=E6=99=AF=E5=9B=BE=EF=BC=8850%=E4=B8=8D=E9=80=8F=E6=98=8E?= =?UTF-8?q?=E5=BA=A6=EF=BC=89=EF=BC=8C=E9=87=8D=E6=9E=841.2=E5=9C=BA?= =?UTF-8?q?=E5=9C=B0=E5=88=86=E6=9E=90=E4=B8=BA=E4=B8=A4=E4=B8=AA=E5=AD=90?= =?UTF-8?q?=E6=9D=BF=E5=9D=97=EF=BC=88=E8=87=AA=E7=84=B6=E5=9C=B0=E7=90=86?= =?UTF-8?q?9=E5=9B=BE+=E7=BB=8F=E6=B5=8E=E4=BA=BA=E5=8F=A31=E5=9B=BE?= =?UTF-8?q?=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- analysis.html | 146 ++++++++++++++++++++++------- css/style.css | 94 ++++++++++++------- images/IMAGE_GUIDE.md | 211 ++++++++++++++++++++++++++++++++++++++++++ index.html | 1 + 4 files changed, 388 insertions(+), 64 deletions(-) create mode 100644 images/IMAGE_GUIDE.md diff --git a/analysis.html b/analysis.html index 5017ade..b13828d 100644 --- a/analysis.html +++ b/analysis.html @@ -81,52 +81,132 @@

1.2 场地分析

- +
-

地理位置

-
+

1.2.1 自然地理环境分析

+
+
- 央木布村航拍图 - + 自然地理图1 +
-

央木布村航拍图

-

本课题设计场地位于央布木村，村庄位于西藏那曲市班戈县佳琼镇，地处青藏高原北部藏北高原，海拔约4697米。

+

标题1

+

在此处插入说明文字...

+
+
+ + +
+
+ 自然地理图2 + +
+
+

标题2

+

在此处插入说明文字...

+
+
+ + +
+
+ 自然地理图3 + +
+
+

标题3

+

在此处插入说明文字...

+
+
+ + +
+
+ 自然地理图4 + +
+
+

标题4

+

在此处插入说明文字...

+
+
+ + +
+
+ 自然地理图5 + +
+
+

标题5

+

在此处插入说明文字...

+
+
+ + +
+
+ 自然地理图6 + +
+
+

标题6

+

在此处插入说明文字...

+
+
+ + +
+
+ 自然地理图7 + +
+
+

标题7

+

在此处插入说明文字...

+
+
+ + +
+
+ 自然地理图8 + +
+
+

标题8

+

在此处插入说明文字...

+
+
+ + +
+
+ 自然地理图9 + +
+
+

标题9

+

在此处插入说明文字...

- +
-

气候条件

-
-
-
- 气温降水月分布图 - +

1.2.2 经济、人口和基础设施

+
+
+
+ 经济人口基础设施分析图 +
-

气温降水月分布图

-

当地属高原亚寒带半干旱季风气候区，年均气温-2℃至2℃，年降水量约300mm，主要集中在6-9月。冬季漫长寒冷，夏季短暂凉爽，昼夜温差大，紫外线辐射强。

-
-
-
-
- - -
-

选址分析

-
-
-
- 选址分析图 - -
-
-

选址分析图

-

具体选址的优劣分析，包括交通可达性、基础设施等因素。

+

经济、人口和基础设施分析

+

在此处插入关于当地经济发展水平、人口分布特征、交通条件、医疗设施等基础设施的详细说明...

diff --git a/css/style.css b/css/style.css index afbc4f1..dfe9601 100644 --- a/css/style.css +++ b/css/style.css @@ -141,40 +141,27 @@ body { Hero区域 ======================================== */ .hero { - min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; - background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); - padding: 6rem 2rem 4rem; - text-align: center; + position: relative; + overflow: hidden; +} + +.hero-background { + position: absolute; + 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; -} - -.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; + position: relative; + z-index: 1; } /* ======================================== @@ -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; +} diff --git a/images/IMAGE_GUIDE.md b/images/IMAGE_GUIDE.md new file mode 100644 index 0000000..c364e3b --- /dev/null +++ b/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 +
+
+

标题1

← 改成你的标题 +

在此处插入说明文字...

← 改成你的说明 +
+
+``` + +--- + +## 📊 场地分析 - 经济、人口和基础设施（1张图） + +### 布局方式 +- **单张大图**，居中显示 +- **最大宽度**: 1000px +- **固定高度**: 450px + +### 图片规格 +- **推荐尺寸**: 1600×900px 或更大（横图） +- **最小宽度**: 1200px +- **文件格式**: JPG 或 PNG +- **完整展示**: 使用 `object-fit: contain`，允许白边 + +### 命名规范 +``` +site-economy.jpg +``` + +### 修改内容 +打开 `analysis.html`，找到对应位置： + +```html +
+
+ 经济人口基础设施分析图 +
+
+

经济、人口和基础设施分析

← 可修改标题 +

在此处插入关于当地经济发展水平...

← 修改详细说明 +
+
+``` + +--- + +## 🔍 常见问题排查 + +### 问题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张经济人口图居中显示 +✅ 响应式布局正常 + +--- + +**祝你顺利添加图片！** ✨ + +*如有问题，随时告诉我！* diff --git a/index.html b/index.html index b573a71..45b9e22 100644 --- a/index.html +++ b/index.html @@ -67,6 +67,7 @@
+

轻索方舱

雪域阳光方舟 · 高海拔环境乡村医疗服务基站设计与建造研究