# 📋 结构单元拆解与性能分析 - 图片资源指南
## 快速索引
### 设计图纸 - 结构单元拆解
#### 1. 屋面结构单元设计拆解（4张图，2×2排列）
```
images/roof-unit-01.jpg ← 屋面结构图1
images/roof-unit-02.jpg ← 屋面结构图2
images/roof-unit-03.jpg ← 屋面结构图3
images/roof-unit-04.jpg ← 屋面结构图4
```
#### 2. 柱身结构单元设计拆解（8张图，分两组，每组4张）
```
images/column-unit-01.jpg ← 柱身结构图1（第一组）
images/column-unit-02.jpg ← 柱身结构图2（第一组）
images/column-unit-03.jpg ← 柱身结构图3（第一组）
images/column-unit-04.jpg ← 柱身结构图4（第一组）
images/column-unit-05.jpg ← 柱身结构图5（第二组）
images/column-unit-06.jpg ← 柱身结构图6（第二组）
images/column-unit-07.jpg ← 柱身结构图7（第二组）
images/column-unit-08.jpg ← 柱身结构图8（第二组）
```
---
### 性能分析
#### 1. 结构受力分析
```
images/perf-structure-full.jpg ← 受力分析图示（全宽大图）
images/perf-structure-01.jpg ← 受力分析图1（左侧小图）
images/perf-structure-02.jpg ← 受力分析图2（左侧小图）
```
#### 2. 外围护节能计算
```
（无图片，仅表格+文字）
```
#### 3. 建筑光环境分析：采光模拟
```
images/perf-light-01.jpg ← 光照分析图1（横向滑动）
images/perf-light-02.jpg ← 光照分析图2（横向滑动）
images/perf-light-03.jpg ← 光照分析图3（横向滑动）
images/perf-light-04.jpg ← 光照分析图4（横向滑动）
images/perf-light-annual.jpg ← 全年照度平均值（右侧大图）
```
---
## 📐 图片规格建议
### 结构单元拆解
#### 屋面结构（4张，2×2网格）
- **推荐尺寸**: 800×800px 或 1024×1024px（正方形）
- **最小宽度**: 600px
- **显示高度**: 350px（固定）
- **object-fit**: contain（完整展示，白底填充）
- **布局**: 2列×2行网格
#### 柱身结构（8张，分两组）
- **推荐尺寸**: 800×800px 或 1024×1024px（正方形）
- **最小宽度**: 600px
- **显示高度**: 350px（固定）
- **object-fit**: contain（完整展示，白底填充）
- **布局**:
- 每组4张，2×2网格
- 图片在左，文字在右（比例1:2）
- 每张图下方有图名标注
---
### 性能分析
#### 结构受力分析
**全宽大图**:
- **推荐尺寸**: 1920×1080px 或更大（横图）
- **最小宽度**: 1600px
- **最大高度**: 70vh（视口高度的70%）
- **object-fit**: contain（完整展示）
**左侧小图（2张）**:
- **推荐尺寸**: 800×600px 或 1024×768px
- **最小宽度**: 600px
- **显示高度**: 280px（固定）
- **object-fit**: contain
#### 光环境分析
**横向滑动4张图**:
- **推荐尺寸**: 800×800px 或 1024×1024px（正方形）
- **最小宽度**: 600px
- **显示尺寸**: 300×300px（固定）
- **object-fit**: contain
- **布局**: 横向滚动，每张图下方有图名标注
**全年照度平均值（右侧大图）**:
- **推荐尺寸**: 1600×1200px 或更大
- **最小宽度**: 1200px
- **最大高度**: 60vh（视口高度的60%）
- **object-fit**: contain
- **布局**: 文字在左，图片在右（比例1:2）
---
## 🎨 布局说明
### 1. 2×2图片网格
```
─────────┬─────────┐
│ 图1 │ 图2 │
├──────────────────┤
│ 图3 │ 图4 │
└─────────┴─────────┘
```
- 桌面端：2列×2行
- 平板端：2列×2行
- 手机端：1列×4行（垂直排列）
### 2. 图文布局（比例1:2）
```
┌──────────┬────────────────────┐
│ │ │
│ 图片区 │ 文字区 │
│ (1份) │ (2份) │
│ │ │
└──────────┴────────────────────┘
```
- 桌面端：左右并排
- 平板/手机端：上下堆叠
### 3. 全宽大图
```
────────────────────────────────┐
│ │
│ 全宽图片 │
│ (占满整个容器宽度) │
│ │
└────────────────────────────────┘
```
- 宽度：100%
- 高度：最大70vh
- 居中显示
### 4. 左侧图+右侧表格
```
┌──────────┬──────────────────┐
│ 图1 │ │
│ │ 表格 │
│ 图2 │ (3列4行) │
│ │ │
└──────────┴──────────────────┘
```
- 图片区：flex: 1
- 表格区：flex: 1.5
### 5. 横向滑动图片
```
┌────────────────────────────────┐
│ [图1] [图2] [图3] [图4] → │
│ ↑ 可以向右滑动查看所有图片 │
└────────────────────────────────┘
```
- 支持鼠标拖拽滑动
- 支持触摸滑动
- 吸附效果（scroll-snap）
---
## ✏️ 修改内容
### 修改文字说明
打开对应HTML文件，找到 `` 标签修改文字内容。
### 修改表格数据
打开 `performance.html`，找到 `
` 标签内的 `| ` 元素修改数据。
### 修改图名标注
打开对应HTML文件，找到 ` ` 标签修改图名。
---
## 🔍 常见问题排查
### 问题1：图片未显示
**检查清单**：
1. ✅ 文件名是否正确（大小写、连字符、数字位数）
2. ✅ 文件是否在 `images/` 文件夹
3. ✅ 文件格式是否为 `.jpg` 或 `.png`
4. ✅ 浏览器控制台是否有404错误（F12 → Console）
### 问题2：图片变形
**解决方案**：
- 所有图片都使用 `object-fit: contain`
- 会自动保持原始比例
- 可能出现白边，这是正常现象
### 问题3：表格显示异常
**检查清单**：
1. ✅ 表格行数是否正确（11行或4行）
2. ✅ 列数是否正确（5列或3列）
3. ✅ 表头是否完整
4. ✅ CSS类名是否正确（`performance-table`）
---
## 💡 高级技巧
### 调整图片高度
打开 `css/style.css`，找到对应选择器修改：
```css
/* 屋面/柱身结构图 */
.grid-item img {
height: 350px; /* 改为 300px、400px 等 */
}
/* 全宽大图 */
.full-width-image img {
max-height: 70vh; /* 改为 60vh、80vh 等 */
}
```
### 调整图文比例
```css
.text-image-layout .layout-images {
flex: 1; /* 改为 0.8、1.2 等 */
}
.text-image-layout .layout-text {
flex: 2; /* 改为 1.5、2.5 等 */
}
```
### 调整表格字体大小
```css
.performance-table {
font-size: 0.95rem; /* 改为 0.9rem、1rem 等 */
}
```
---
## 🎊 完成标志
当你看到以下内容时，表示成功：
✅ **设计图纸页面**
- 结构单元拆解板块已添加
- 屋面结构4张图2×2排列
- 柱身结构8张图分两组，图文比例1:2
- 每张图下方有图名标注
✅ **性能分析页面**
- 结构受力分析：文字+全宽图+文字+左侧2图+右侧表格
- 外围护节能计算：左侧11行5列表格+右侧文字
- 光环境分析：4张横向滑动图+左侧文字+右侧大图
✅ **响应式适配**
- 桌面端：所有布局正常
- 平板端：图文堆叠，表格自适应
- 手机端：单列布局，图片缩小
---
**祝你顺利添加图片！**
*如有问题，随时告诉我！*
|