# 精品课页面图片占位符说明

## 📸 已使用的现有图片

页面中的图片已经全部替换为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. **图片压缩**: 对图片进行适当压缩以减少应用包大小