159 lines
3.7 KiB
Markdown
159 lines
3.7 KiB
Markdown
# 活动页面横幅图片设置指南
|
||
|
||
## 📋 概述
|
||
|
||
活动页面的横幅区域已经改为支持一整张图片的形式。目前显示占位内容，您可以按照以下步骤添加横幅图片。
|
||
|
||
## 🖼️ 当前状态
|
||
|
||
- ✅ 横幅区域已改为图片容器
|
||
- ✅ 响应式设计已适配
|
||
- ✅ 占位内容显示中
|
||
- ⏳ 等待提供横幅图片
|
||
|
||
## 📐 图片规格建议
|
||
|
||
### 推荐尺寸
|
||
- **桌面端**: 1200px × 400px
|
||
- **平板端**: 1024px × 350px
|
||
- **移动端**: 768px × 300px
|
||
|
||
### 文件格式
|
||
- **推荐**: JPG/JPEG (文件小，加载快)
|
||
- **支持**: PNG (支持透明背景)
|
||
- **支持**: WebP (现代浏览器，更小文件)
|
||
|
||
### 文件大小
|
||
- **建议**: < 500KB
|
||
- **最大**: < 1MB
|
||
|
||
## 🚀 添加图片的方法
|
||
|
||
### 方法一：直接替换（推荐）
|
||
|
||
1. **将图片文件放到项目中**：
|
||
```
|
||
public/images/activities-banner.jpg
|
||
```
|
||
|
||
2. **修改 Activities.vue 文件**：
|
||
```typescript
|
||
// 在 onMounted 中取消注释并设置图片路径
|
||
onMounted(() => {
|
||
setTimeout(() => {
|
||
loading.value = false
|
||
}, 800)
|
||
|
||
// 设置横幅图片路径
|
||
setBannerImage('/images/activities-banner.jpg')
|
||
})
|
||
```
|
||
|
||
### 方法二：直接设置变量
|
||
|
||
在 `src/views/Activities.vue` 中找到这一行：
|
||
```typescript
|
||
const bannerImageSrc = ref('')
|
||
```
|
||
|
||
改为：
|
||
```typescript
|
||
const bannerImageSrc = ref('/images/activities-banner.jpg')
|
||
```
|
||
|
||
## 📁 推荐的文件结构
|
||
|
||
```
|
||
public/
|
||
├── images/
|
||
│ ├── activities-banner.jpg # 横幅图片
|
||
│ ├── activities-banner-tablet.jpg # 平板版本（可选）
|
||
│ └── activities-banner-mobile.jpg # 移动版本（可选）
|
||
```
|
||
|
||
## 🎨 图片内容建议
|
||
|
||
根据原设计图，横幅图片应该包含：
|
||
- 蓝色渐变背景
|
||
- "理工/消安/药师/中经" 分类文字
|
||
- "免费海量题库" 主标题
|
||
- "小程序" 橙色标签
|
||
- "优质试题 | 无需下载 | 随时刷题" 特色说明
|
||
- 右侧人物和手机界面插图
|
||
|
||
## 🔧 技术实现细节
|
||
|
||
### 当前代码结构
|
||
```vue
|
||
<template>
|
||
<div class="hero-banner">
|
||
<div class="banner-image-container">
|
||
<!-- 实际图片 -->
|
||
<img
|
||
v-if="hasBannerImage"
|
||
:src="bannerImageSrc"
|
||
alt="活动横幅"
|
||
class="banner-image"
|
||
/>
|
||
<!-- 占位区域 -->
|
||
<div v-else class="banner-placeholder">
|
||
<!-- 占位内容 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
### 响应式适配
|
||
- 桌面端：400px 高度
|
||
- 平板端：350px 高度
|
||
- 移动端：300px 高度
|
||
- 小屏手机：250px 高度
|
||
|
||
### CSS 样式
|
||
```css
|
||
.banner-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover; /* 保持比例，裁剪多余部分 */
|
||
object-position: center; /* 居中显示 */
|
||
}
|
||
```
|
||
|
||
## ⚡ 性能优化建议
|
||
|
||
1. **图片压缩**: 使用工具压缩图片文件
|
||
2. **懒加载**: 大图片可考虑懒加载
|
||
3. **多尺寸**: 为不同设备提供不同尺寸的图片
|
||
4. **WebP格式**: 现代浏览器使用WebP格式
|
||
|
||
## 🔄 更新步骤
|
||
|
||
当您准备好横幅图片时：
|
||
|
||
1. **准备图片文件**
|
||
- 确保图片符合推荐规格
|
||
- 压缩图片文件大小
|
||
|
||
2. **上传图片**
|
||
- 将图片放到 `public/images/` 目录
|
||
|
||
3. **更新代码**
|
||
- 按照上述方法一或方法二设置图片路径
|
||
|
||
4. **测试效果**
|
||
- 刷新浏览器查看效果
|
||
- 测试不同设备的显示效果
|
||
|
||
## 📞 需要帮助？
|
||
|
||
如果您在设置横幅图片时遇到任何问题，请：
|
||
1. 检查图片路径是否正确
|
||
2. 确认图片文件是否存在
|
||
3. 查看浏览器控制台是否有错误信息
|
||
4. 联系开发人员获取技术支持
|
||
|
||
---
|
||
|
||
**注意**: 当前页面显示占位内容，一旦您提供横幅图片并按照上述步骤设置，占位内容将自动被实际图片替换。
|