GoCo/OL-LearnPlatform-Frontend

Fork 0

GoCo 96c6f6254a init

2025-08-10 23:09:36 +08:00

4.5 KiB

Raw Permalink Blame History

师资力量页面横幅图片设置指南

📋 概述

师资力量页面的横幅区域已经改为支持一整张图片的形式。目前显示占位内容，您可以按照以下步骤添加横幅图片。

🖼️ 当前状态

✅ 横幅区域已改为图片容器
✅ 响应式设计已适配
✅ 占位内容显示中
⏳ 等待提供横幅图片

📐 图片规格建议

文件格式

推荐: JPG/JPEG (文件小，加载快)
支持: PNG (支持透明背景)
支持: WebP (现代浏览器，更小文件)

文件大小

建议: < 500KB
最大: < 1MB

🚀 添加图片的方法

方法一：直接替换（推荐）

将图片文件放到项目中：
```
public/images/faculty-banner.jpg
```

修改 Faculty.vue 文件：

// 在文件开头找到这一行
const bannerImageSrc = ref('')

// 改为
const bannerImageSrc = ref('/images/faculty-banner.jpg')

方法二：使用设置方法

在 src/views/Faculty.vue 中添加初始化代码：

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    # 移动版本（可选）

🎨 图片内容建议

根据师资力量页面的特点，横幅图片应该包含：

专业的教育背景或学术氛围
"师资力量"相关的标题文字
可能包含教师形象或教学场景
体现专业性和权威性的设计元素
与整体网站风格保持一致的色调

🔧 技术实现细节

当前代码结构

<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 样式特点

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 保持比例，裁剪多余部分 */
  object-position: center;  /* 居中显示 */
}

.banner-placeholder {
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  /* 蓝色渐变背景作为占位 */
}

⚡ 性能优化建议

图片压缩: 使用工具压缩图片文件
适当尺寸: 避免使用过大的图片
格式选择: 优先使用JPG格式
懒加载: 大图片可考虑懒加载

🔄 更新步骤

当您准备好师资力量横幅图片时：

准备图片文件
- 确保图片符合推荐规格
- 压缩图片文件大小
- 检查图片内容是否符合师资力量主题
上传图片
- 将图片放到 public/images/ 目录
- 确保文件名清晰易懂
更新代码
- 按照上述方法设置图片路径
- 确保路径正确无误
测试效果
- 访问 /faculty 页面查看效果
- 测试不同设备的显示效果
- 检查图片加载速度

🎯 与活动页面的区别

师资力量页面与活动页面的横幅设置方法相同，但内容主题不同：

活动页面: 侧重课程活动和学习资源
师资力量页面: 侧重教师团队和专业实力

📞 需要帮助？

如果您在设置师资力量横幅图片时遇到任何问题，请：

检查图片路径是否正确
确认图片文件是否存在于 public/images/ 目录
查看浏览器控制台是否有错误信息
确保图片格式被浏览器支持
联系开发人员获取技术支持

🔗 相关页面

注意: 当前页面显示占位内容，一旦您提供师资力量横幅图片并按照上述步骤设置，占位内容将自动被实际图片替换。页面访问地址：http://localhost:3000/faculty

4.5 KiB Raw Permalink Blame History Unescape Escape