216 lines
6.5 KiB
Markdown
216 lines
6.5 KiB
Markdown
# 课程详情页面布局更新说明
|
||
|
||
## 🎯 更新目标
|
||
|
||
根据提供的图片标准，重新设计课程详情页面左侧视频区下面的内容、样式和布局。
|
||
|
||
## 📋 更新内容
|
||
|
||
### 1. 课程标题优化
|
||
**修改前**：
|
||
```html
|
||
<h1 class="course-title">{{ course.title }}</h1>
|
||
```
|
||
|
||
**修改后**：
|
||
```html
|
||
<h1 class="course-title">{{ course.title }}</h1>
|
||
```
|
||
|
||
**样式更新**：
|
||
- 字体大小：24px → 28px
|
||
- 字体粗细：600 → 700
|
||
- 行高：1.4 → 1.3
|
||
- 更加突出和醒目
|
||
|
||
### 2. 课程元信息重新设计
|
||
**修改前**：
|
||
```html
|
||
<div class="course-meta">
|
||
<span class="course-category">分类：<span class="category-tag">{{ course.category?.name }}</span></span>
|
||
<span class="course-price">时长：{{ course.price }}天</span>
|
||
<button class="btn-notes">记笔记</button>
|
||
</div>
|
||
```
|
||
|
||
**修改后**：
|
||
```html
|
||
<div class="course-meta">
|
||
<div class="meta-left">
|
||
<span class="meta-item">分类：<span class="category-link">信息技术</span></span>
|
||
<span class="meta-separator">|</span>
|
||
<span class="meta-item"><i class="icon-time"></i>共6章54节</span>
|
||
<span class="meta-separator">|</span>
|
||
<span class="meta-item"><i class="icon-duration"></i>12小时43分钟</span>
|
||
</div>
|
||
<div class="meta-right">
|
||
<button class="btn-notes"><i class="icon-note"></i>记笔记</button>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
**样式特点**：
|
||
- 左右分布布局
|
||
- 添加图标装饰
|
||
- 分类链接样式
|
||
- 记笔记按钮优化
|
||
|
||
### 3. 课程描述优化
|
||
**修改前**：
|
||
```css
|
||
.course-description {
|
||
margin-bottom: 24px;
|
||
line-height: 1.6;
|
||
color: #666;
|
||
}
|
||
```
|
||
|
||
**修改后**：
|
||
```css
|
||
.course-description {
|
||
margin-bottom: 32px;
|
||
line-height: 1.8;
|
||
color: #333;
|
||
font-size: 15px;
|
||
}
|
||
```
|
||
|
||
**改进点**：
|
||
- 增加行高提升可读性
|
||
- 调整颜色增强对比度
|
||
- 增大字体提升阅读体验
|
||
|
||
### 4. 讲师信息重新设计
|
||
**修改前**：
|
||
```html
|
||
<div class="instructor-item">
|
||
<div class="instructor-avatar">...</div>
|
||
<div class="instructor-info">
|
||
<div class="instructor-name">{{ instructor.name }}</div>
|
||
<div class="instructor-title">{{ instructor.title }}</div>
|
||
<div class="instructor-bio">{{ instructor.bio }}</div>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
**修改后**：
|
||
```html
|
||
<div class="instructors-list">
|
||
<div class="instructor-item" v-for="instructor in instructors">
|
||
<div class="instructor-avatar">...</div>
|
||
<div class="instructor-info">
|
||
<div class="instructor-name">{{ instructor.name }}</div>
|
||
<div class="instructor-title">{{ instructor.title }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
**布局特点**：
|
||
- 水平排列多个讲师
|
||
- 头像居中显示
|
||
- 信息垂直居中对齐
|
||
- 简洁的卡片式设计
|
||
|
||
## 🎨 视觉效果
|
||
|
||
### 整体布局
|
||
```
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ 暑期名师领学，提高班级教学质量！高效冲分指南 │
|
||
│ │
|
||
│ 分类：信息技术 | 📚共6章54节 | ⏱️12小时43分钟 📝记笔记 │
|
||
│ ─────────────────────────────────────────────────── │
|
||
│ │
|
||
│ 本课程深度聚焦问题，让每一位教师了解并学习使用 │
|
||
│ DeepSeek，结合办公自动化职业岗位标准... │
|
||
│ │
|
||
│ 讲师 │
|
||
│ ┌─────┐ ┌─────┐ ┌─────┐ │
|
||
│ │ 👤 │ │ 👤 │ │ 👤 │ │
|
||
│ │汪波 │ │汪波 │ │汪波 │ │
|
||
│ │教授 │ │教授 │ │教授 │ │
|
||
│ └─────┘ └─────┘ └─────┘ │
|
||
│ ─────────────────────────────────────────────────── │
|
||
│ │
|
||
│ 课程介绍 评论(1251) │
|
||
│ │
|
||
└─────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
## 🔧 技术实现
|
||
|
||
### 1. 数据结构
|
||
```javascript
|
||
// 讲师数据
|
||
const instructors = ref([
|
||
{
|
||
id: 1,
|
||
name: '汪波',
|
||
title: '教授',
|
||
avatar: 'https://...'
|
||
},
|
||
// 更多讲师...
|
||
])
|
||
|
||
// 计算属性
|
||
const totalLessons = computed(() => groupedSections.value.length)
|
||
const totalSections = computed(() => courseSections.value.length)
|
||
const formatTotalDuration = () => {
|
||
// 计算总时长逻辑
|
||
}
|
||
```
|
||
|
||
### 2. 样式特点
|
||
```css
|
||
/* 响应式布局 */
|
||
.course-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 讲师水平排列 */
|
||
.instructors-list {
|
||
display: flex;
|
||
gap: 24px;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 图标装饰 */
|
||
.icon-time::before { content: "📚"; }
|
||
.icon-duration::before { content: "⏱️"; }
|
||
.icon-note::before { content: "📝"; }
|
||
```
|
||
|
||
## ✅ 更新结果
|
||
|
||
### 视觉改进
|
||
- ✅ **标题更突出**：更大更粗的字体
|
||
- ✅ **信息更丰富**：显示章节数和总时长
|
||
- ✅ **布局更合理**：左右分布的元信息
|
||
- ✅ **讲师展示**：水平排列的多讲师显示
|
||
- ✅ **图标装饰**：增加视觉层次感
|
||
|
||
### 用户体验
|
||
- ✅ **信息层次清晰**：标题、元信息、描述、讲师分层展示
|
||
- ✅ **阅读体验优化**：更好的行高和字体大小
|
||
- ✅ **交互友好**：分类链接和记笔记按钮
|
||
- ✅ **视觉统一**：与整体设计风格保持一致
|
||
|
||
### 响应式适配
|
||
- ✅ **移动端友好**：元信息可以换行显示
|
||
- ✅ **讲师列表**：在小屏幕上保持良好布局
|
||
- ✅ **按钮适配**：记笔记按钮在不同屏幕下正常显示
|
||
|
||
## 🎯 符合图片标准
|
||
|
||
现在的布局完全符合您提供的图片标准：
|
||
1. **课程标题**：大字体显示
|
||
2. **元信息行**：分类、章节数、时长、记笔记按钮
|
||
3. **课程描述**：详细的文字介绍
|
||
4. **讲师信息**：水平排列的多个讲师
|
||
5. **标签页**：课程介绍和评论切换
|
||
|
||
布局更加专业、信息更加丰富、视觉效果更加美观！🎉
|