51 lines
2.1 KiB
Markdown
51 lines
2.1 KiB
Markdown
# 精品课页面图片占位符说明
|
||
|
||
## 📸 已使用的现有图片
|
||
|
||
页面中的图片已经全部替换为static目录下的现有图片：
|
||
|
||
### 🎯 图片映射表
|
||
|
||
| 原始占位符 | 替换为现有图片 | 用途说明 |
|
||
|-----------|---------------|----------|
|
||
| `hiv_banner.png` | `lunbo_bg.png` | 主横幅图片 |
|
||
| `liver_icon.png` | `icon_home_my_patient.png` | 肝病分类图标 |
|
||
| `tumor_icon.png` | `icon_home_my_library.png` | 肿瘤分类图标 |
|
||
| `infection_icon.png` | `icon_home_video.png` | 感染分类图标 |
|
||
| `course_thumbnail.png` | `jingpingke.png` | 精品小课缩略图 |
|
||
| `reward_card1.png` | `paper_bg.png` | 学克返现卡片1 |
|
||
| `reward_card2.png` | `pap_bg.png` | 学克返现卡片2 |
|
||
| `welfare_banner.png` | `fulicard.png` | 福利课堂横幅 |
|
||
| `hiv_course.png` | `jingpinkecheng.png` | 热门课程缩略图 |
|
||
|
||
## 🎨 占位图片生成器
|
||
|
||
如果需要生成专用的占位图片，可以使用项目根目录下的 `generate_placeholder_images.html` 文件：
|
||
|
||
### 使用方法：
|
||
1. 在浏览器中打开 `generate_placeholder_images.html`
|
||
2. 点击每个图片下方的"下载"按钮
|
||
3. 将下载的图片保存到 `/static/` 目录
|
||
4. 根据需要修改页面中的图片引用路径
|
||
|
||
### 生成的占位图片规格：
|
||
- **主横幅**: 700x300px，蓝色渐变，包含标题文字
|
||
- **分类图标**: 120x120px，不同颜色渐变，包含emoji图标
|
||
- **课程缩略图**: 240x240px，浅蓝色渐变，包含课程信息
|
||
- **返现卡片**: 350x200px，绿色/橙色渐变，包含活动文字
|
||
- **福利横幅**: 700x200px，紫色渐变，包含福利信息
|
||
|
||
## ✅ 当前状态
|
||
|
||
- ✅ 所有图片路径已更新为现有资源
|
||
- ✅ 页面可以正常显示，无图片加载错误
|
||
- ✅ 保持了原有的视觉设计效果
|
||
- ✅ 提供了备用的占位图片生成方案
|
||
|
||
## 📝 后续优化建议
|
||
|
||
1. **设计专用图片**: 根据实际需求设计符合品牌风格的专用图片
|
||
2. **图片尺寸优化**: 根据实际显示需求调整图片尺寸
|
||
3. **图片格式**: 考虑使用WebP格式提高加载性能
|
||
4. **图片压缩**: 对图片进行适当压缩以减少应用包大小
|