添加结构单元拆解和性能分析图片指南文档

images/STRUCTURE_PERFORMANCE_GUIDE.md

@@ -0,0 +1,272 @@
+# 📋 结构单元拆解与性能分析 - 图片资源指南
+
+##  快速索引
+
+### 设计图纸 - 结构单元拆解
+
+#### 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张横向滑动图+左侧文字+右侧大图
+
+✅ **响应式适配**  
+- 桌面端：所有布局正常
+- 平板端：图文堆叠，表格自适应
+- 手机端：单列布局，图片缩小
+
+---
+
+**祝你顺利添加图片！** 
+
+*如有问题，随时告诉我！*