7.7 KiB
7.7 KiB
📋 结构单元拆解与性能分析 - 图片资源指南
快速索引
设计图纸 - 结构单元拆解
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：图片未显示
检查清单：
- ✅ 文件名是否正确（大小写、连字符、数字位数）
- ✅ 文件是否在
images/文件夹 - ✅ 文件格式是否为
.jpg或.png - ✅ 浏览器控制台是否有404错误（F12 → Console）
问题2：图片变形
解决方案：
- 所有图片都使用
object-fit: contain - 会自动保持原始比例
- 可能出现白边，这是正常现象
问题3：表格显示异常
检查清单：
- ✅ 表格行数是否正确（11行或4行）
- ✅ 列数是否正确（5列或3列）
- ✅ 表头是否完整
- ✅ CSS类名是否正确（
performance-table）
💡 高级技巧
调整图片高度
打开 css/style.css，找到对应选择器修改：
/* 屋面/柱身结构图 */
.grid-item img {
height: 350px; /* 改为 300px、400px 等 */
}
/* 全宽大图 */
.full-width-image img {
max-height: 70vh; /* 改为 60vh、80vh 等 */
}
调整图文比例
.text-image-layout .layout-images {
flex: 1; /* 改为 0.8、1.2 等 */
}
.text-image-layout .layout-text {
flex: 2; /* 改为 1.5、2.5 等 */
}
调整表格字体大小
.performance-table {
font-size: 0.95rem; /* 改为 0.9rem、1rem 等 */
}
🎊 完成标志
当你看到以下内容时，表示成功：
✅ 设计图纸页面
- 结构单元拆解板块已添加
- 屋面结构4张图2×2排列
- 柱身结构8张图分两组，图文比例1:2
- 每张图下方有图名标注
✅ 性能分析页面
- 结构受力分析：文字+全宽图+文字+左侧2图+右侧表格
- 外围护节能计算：左侧11行5列表格+右侧文字
- 光环境分析：4张横向滑动图+左侧文字+右侧大图
✅ 响应式适配
- 桌面端：所有布局正常
- 平板端：图文堆叠，表格自适应
- 手机端：单列布局，图片缩小
祝你顺利添加图片！
如有问题，随时告诉我！