273 lines
7.7 KiB
Markdown
273 lines
7.7 KiB
Markdown
# 📋 结构单元拆解与性能分析 - 图片资源指南
|
||
|
||
## 快速索引
|
||
|
||
### 设计图纸 - 结构单元拆解
|
||
|
||
#### 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文件，找到 `<p class="large-text">` 标签修改文字内容。
|
||
|
||
### 修改表格数据
|
||
打开 `performance.html`，找到 `<table>` 标签内的 `<td>` 元素修改数据。
|
||
|
||
### 修改图名标注
|
||
打开对应HTML文件，找到 `<p class="image-caption">` 标签修改图名。
|
||
|
||
---
|
||
|
||
## 🔍 常见问题排查
|
||
|
||
### 问题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张横向滑动图+左侧文字+右侧大图
|
||
|
||
✅ **响应式适配**
|
||
- 桌面端：所有布局正常
|
||
- 平板端：图文堆叠，表格自适应
|
||
- 手机端：单列布局，图片缩小
|
||
|
||
---
|
||
|
||
**祝你顺利添加图片！**
|
||
|
||
*如有问题，随时告诉我！*
|