上传文件至「/」

README_IMAGES.md

@@ -0,0 +1,137 @@
+# 图片替换指南
+
+## 📸 如何替换占位图为实际图片
+
+### 方法一：直接替换（推荐）
+
+1. **将你的图片放入 `images/` 文件夹**
+   ```
+   images/
+   ├── analysis-geography.jpg      # 地理分析图
+   ├── analysis-climate.jpg        # 气候分析图
+   ├── analysis-site.jpg           # 选址分析图
+   ├── design-aerial.jpg           # 鸟瞰渲染图
+   ├── design-interior-1.jpg       # 室内渲染图1
+   ├── design-interior-2.jpg       # 室内渲染图2
+   ├── design-elevation.jpg        # 立面效果图
+   ├── design-detail.jpg           # 细节特写
+   ├── drawing-site-plan.jpg       # 总平面图
+   ├── drawing-floor-plan.jpg      # 平面图
+   ├── performance-structure.jpg   # 结构受力分析图
+   ├── performance-energy.jpg      # 节能计算图表
+   ├── self-solar.jpg              # 太阳能系统示意图
+   ├── self-water.jpg              # 水循环系统图
+   └── construction-site.jpg       # 建造场地总图
+   ```
+
+2. **在 index.html 中替换对应的 div**
+
+   **原代码：**
+   ```html
+   <div class="card-image placeholder-img">
+       <span>地理分析图</span>
+   </div>
+   ```
+
+   **替换为：**
+   ```html
+   <div class="card-image">
+       <img src="images/analysis-geography.jpg" alt="地理分析图">
+   </div>
+   ```
+
+3. **在 CSS 中添加图片样式**（在 `css/style.css` 末尾添加）：
+   ```css
+   /* 卡片图片样式 */
+   .card-image img {
+       width: 100%;
+       height: 100%;
+       object-fit: cover;
+       display: block;
+   }
+
+   /* 画廊图片样式 */
+   .gallery-item img {
+       width: 100%;
+       height: 100%;
+       object-fit: cover;
+       border-radius: var(--border-radius);
+       display: block;
+   }
+   ```
+
+### 方法二：使用在线图片测试
+
+如果你想先测试效果，可以使用在线占位图服务：
+
+```html
+<!-- 使用 placehold.co 服务 -->
+<div class="card-image">
+    <img src="https://placehold.co/800x600/8A9B7E/FFFFFF?text=地理分析图" alt="地理分析图">
+</div>
+```
+
+## 🎨 图片尺寸建议
+
+| 位置 | 建议尺寸 | 说明 |
+|------|---------|------|
+| 卡片图片 | 800×600px | 4:3 比例，适合大多数内容 |
+| 宽卡片图片 | 1200×600px | 2:1 比例，用于图纸展示 |
+| 画廊小图 | 600×600px | 1:1 正方形 |
+| 画廊大图 | 1200×900px | 4:3 比例，鸟瞰图等 |
+| Hero背景 | 1920×1080px | 如需添加背景图 |
+
+## 💡 图片优化建议
+
+1. **格式选择**：
+   - 照片类：使用 JPG（质量 80-85%）
+   - 带透明：使用 PNG
+   - 最优选择：使用 WebP（体积更小）
+
+2. **压缩工具**：
+   - TinyPNG (https://tinypng.com/)
+   - Squoosh (https://squoosh.app/)
+   - ImageOptim (Mac)
+
+3. **命名规范**：
+   - 使用小写字母
+   - 用连字符 `-` 分隔单词
+   - 避免中文和特殊字符
+   - 例如：`design-aerial-view.jpg`
+
+## 🔧 常见问题
+
+### Q: 图片显示变形怎么办？
+A: 确保使用了 `object-fit: cover` 属性，它会自动裁剪图片以适应容器。
+
+### Q: 如何让图片点击放大？
+A: 可以添加简单的灯箱效果，需要额外的 JavaScript 代码。
+
+### Q: 图片加载太慢怎么办？
+A: 
+1. 压缩图片大小
+2. 使用 WebP 格式
+3. 实现懒加载（代码已预留）
+
+### Q: 如何添加图片说明文字？
+A: 在 `<img>` 标签后添加 `<figcaption>`：
+```html
+<div class="card-image">
+    <img src="images/example.jpg" alt="示例图片">
+    <p class="image-caption">这是图片说明</p>
+</div>
+```
+
+然后在 CSS 中添加：
+```css
+.image-caption {
+    padding: 0.5rem 1rem;
+    text-align: center;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+```
+
+---
+
+**提示**: 在替换完所有图片后，建议在手机和电脑上分别测试显示效果。