176 lines
4.5 KiB
Markdown
176 lines
4.5 KiB
Markdown
|
# 师资力量页面横幅图片设置指南
|
|||
|
|
|
|||
|
|
## 📋 概述
|
|||
|
|
|
|||
|
|
师资力量页面的横幅区域已经改为支持一整张图片的形式。目前显示占位内容，您可以按照以下步骤添加横幅图片。
|
|||
|
|
|
|||
|
|
## 🖼️ 当前状态
|
|||
|
|
|
|||
|
|
- ✅ 横幅区域已改为图片容器
|
|||
|
|
- ✅ 响应式设计已适配
|
|||
|
|
- ✅ 占位内容显示中
|
|||
|
|
- ⏳ 等待提供横幅图片
|
|||
|
|
|
|||
|
|
## 📐 图片规格建议
|
|||
|
|
|
|||
|
|
### 推荐尺寸
|
|||
|
|
- **桌面端**: 1200px × 400px
|
|||
|
|
- **平板端**: 1024px × 350px
|
|||
|
|
- **移动端**: 768px × 300px
|
|||
|
|
- **小屏手机**: 480px × 250px
|
|||
|
|
|
|||
|
|
### 文件格式
|
|||
|
|
- **推荐**: JPG/JPEG (文件小，加载快)
|
|||
|
|
- **支持**: PNG (支持透明背景)
|
|||
|
|
- **支持**: WebP (现代浏览器，更小文件)
|
|||
|
|
|
|||
|
|
### 文件大小
|
|||
|
|
- **建议**: < 500KB
|
|||
|
|
- **最大**: < 1MB
|
|||
|
|
|
|||
|
|
## 🚀 添加图片的方法
|
|||
|
|
|
|||
|
|
### 方法一：直接替换（推荐）
|
|||
|
|
|
|||
|
|
1. **将图片文件放到项目中**：
|
|||
|
|
```
|
|||
|
|
public/images/faculty-banner.jpg
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. **修改 Faculty.vue 文件**：
|
|||
|
|
```typescript
|
|||
|
|
// 在文件开头找到这一行
|
|||
|
|
const bannerImageSrc = ref('')
|
|||
|
|
|
|||
|
|
// 改为
|
|||
|
|
const bannerImageSrc = ref('/images/faculty-banner.jpg')
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 方法二：使用设置方法
|
|||
|
|
|
|||
|
|
在 `src/views/Faculty.vue` 中添加初始化代码：
|
|||
|
|
```typescript
|
|||
|
|
import { ref, computed, onMounted } from 'vue'
|
|||
|
|
|
|||
|
|
// 在组件挂载时设置图片
|
|||
|
|
onMounted(() => {
|
|||
|
|
setBannerImage('/images/faculty-banner.jpg')
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 📁 推荐的文件结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
public/
|
|||
|
|
├── images/
|
|||
|
|
│ ├── faculty-banner.jpg # 师资力量横幅图片
|
|||
|
|
│ ├── faculty-banner-tablet.jpg # 平板版本（可选）
|
|||
|
|
│ └── faculty-banner-mobile.jpg # 移动版本（可选）
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🎨 图片内容建议
|
|||
|
|
|
|||
|
|
根据师资力量页面的特点，横幅图片应该包含：
|
|||
|
|
- 专业的教育背景或学术氛围
|
|||
|
|
- "师资力量"相关的标题文字
|
|||
|
|
- 可能包含教师形象或教学场景
|
|||
|
|
- 体现专业性和权威性的设计元素
|
|||
|
|
- 与整体网站风格保持一致的色调
|
|||
|
|
|
|||
|
|
## 🔧 技术实现细节
|
|||
|
|
|
|||
|
|
### 当前代码结构
|
|||
|
|
```vue
|
|||
|
|
<template>
|
|||
|
|
<div class="page-header">
|
|||
|
|
<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; /* 居中显示 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.banner-placeholder {
|
|||
|
|
background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
|
|||
|
|
/* 蓝色渐变背景作为占位 */
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## ⚡ 性能优化建议
|
|||
|
|
|
|||
|
|
1. **图片压缩**: 使用工具压缩图片文件
|
|||
|
|
2. **适当尺寸**: 避免使用过大的图片
|
|||
|
|
3. **格式选择**: 优先使用JPG格式
|
|||
|
|
4. **懒加载**: 大图片可考虑懒加载
|
|||
|
|
|
|||
|
|
## 🔄 更新步骤
|
|||
|
|
|
|||
|
|
当您准备好师资力量横幅图片时：
|
|||
|
|
|
|||
|
|
1. **准备图片文件**
|
|||
|
|
- 确保图片符合推荐规格
|
|||
|
|
- 压缩图片文件大小
|
|||
|
|
- 检查图片内容是否符合师资力量主题
|
|||
|
|
|
|||
|
|
2. **上传图片**
|
|||
|
|
- 将图片放到 `public/images/` 目录
|
|||
|
|
- 确保文件名清晰易懂
|
|||
|
|
|
|||
|
|
3. **更新代码**
|
|||
|
|
- 按照上述方法设置图片路径
|
|||
|
|
- 确保路径正确无误
|
|||
|
|
|
|||
|
|
4. **测试效果**
|
|||
|
|
- 访问 `/faculty` 页面查看效果
|
|||
|
|
- 测试不同设备的显示效果
|
|||
|
|
- 检查图片加载速度
|
|||
|
|
|
|||
|
|
## 🎯 与活动页面的区别
|
|||
|
|
|
|||
|
|
师资力量页面与活动页面的横幅设置方法相同，但内容主题不同：
|
|||
|
|
- **活动页面**: 侧重课程活动和学习资源
|
|||
|
|
- **师资力量页面**: 侧重教师团队和专业实力
|
|||
|
|
|
|||
|
|
## 📞 需要帮助？
|
|||
|
|
|
|||
|
|
如果您在设置师资力量横幅图片时遇到任何问题，请：
|
|||
|
|
1. 检查图片路径是否正确
|
|||
|
|
2. 确认图片文件是否存在于 `public/images/` 目录
|
|||
|
|
3. 查看浏览器控制台是否有错误信息
|
|||
|
|
4. 确保图片格式被浏览器支持
|
|||
|
|
5. 联系开发人员获取技术支持
|
|||
|
|
|
|||
|
|
## 🔗 相关页面
|
|||
|
|
|
|||
|
|
- [活动页面横幅设置指南](./Banner-Image-Setup.md)
|
|||
|
|
- [师资力量页面功能说明](./Faculty-Page.md)
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**注意**: 当前页面显示占位内容，一旦您提供师资力量横幅图片并按照上述步骤设置，占位内容将自动被实际图片替换。页面访问地址：`http://localhost:3000/faculty`
|