808 lines
24 KiB
Vue
808 lines
24 KiB
Vue
|
<template>
|
|||
|
|
<div class="course-detail">
|
|||
|
|
<div class="course-header">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="course-info">
|
|||
|
|
<h1 class="course-title">{{ course.title }}</h1>
|
|||
|
|
<p class="course-desc">{{ course.description }}</p>
|
|||
|
|
<div class="course-meta">
|
|||
|
|
<div class="meta-item">
|
|||
|
|
<el-icon><User /></el-icon>
|
|||
|
|
<span>讲师: {{ course.teacher }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="meta-item">
|
|||
|
|
<el-icon><Calendar /></el-icon>
|
|||
|
|
<span>更新时间: {{ course.updateTime }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="meta-item">
|
|||
|
|
<el-icon><View /></el-icon>
|
|||
|
|
<span>{{ course.studentCount }}人学习</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="meta-item">
|
|||
|
|
<el-rate v-model="course.rating" disabled text-color="#ff9900" />
|
|||
|
|
<span>({{ course.ratingCount }})</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="course-content">
|
|||
|
|
<div class="course-main">
|
|||
|
|
<el-tabs v-model="activeTab" class="course-tabs">
|
|||
|
|
<el-tab-pane label="课程章节" name="chapters">
|
|||
|
|
<div class="course-chapters">
|
|||
|
|
<el-collapse v-model="activeChapters">
|
|||
|
|
<el-collapse-item v-for="chapter in course.chapters" :key="chapter.id" :title="chapter.title" :name="chapter.id">
|
|||
|
|
<div class="chapter-sections">
|
|||
|
|
<div
|
|||
|
|
v-for="section in chapter.sections"
|
|||
|
|
:key="section.id"
|
|||
|
|
class="section-item"
|
|||
|
|
:class="{ 'is-free': section.isFree, 'is-active': currentSection && currentSection.id === section.id }"
|
|||
|
|
@click="playSection(chapter, section)"
|
|||
|
|
>
|
|||
|
|
<div class="section-info">
|
|||
|
|
<el-icon v-if="section.type === 'video'"><VideoPlay /></el-icon>
|
|||
|
|
<el-icon v-else-if="section.type === 'document'"><Document /></el-icon>
|
|||
|
|
<span class="section-title">{{ section.title }}</span>
|
|||
|
|
<span v-if="section.isFree" class="free-tag">免费</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="section-meta">
|
|||
|
|
<span>{{ section.duration }}</span>
|
|||
|
|
<el-icon v-if="section.isCompleted"><Check /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-collapse-item>
|
|||
|
|
</el-collapse>
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
|
|||
|
|
<el-tab-pane label="课程介绍" name="intro">
|
|||
|
|
<div class="course-intro" v-html="course.introHtml"></div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
|
|||
|
|
<el-tab-pane label="课程评价" name="reviews">
|
|||
|
|
<div class="course-reviews">
|
|||
|
|
<div class="review-summary">
|
|||
|
|
<div class="rating-overall">
|
|||
|
|
<div class="rating-score">{{ course.rating.toFixed(1) }}</div>
|
|||
|
|
<div class="rating-stars">
|
|||
|
|
<el-rate v-model="course.rating" disabled text-color="#ff9900" />
|
|||
|
|
<div class="rating-count">{{ course.ratingCount }}人评价</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="rating-distribution">
|
|||
|
|
<div v-for="(count, index) in course.ratingDistribution" :key="index" class="rating-bar">
|
|||
|
|
<span class="rating-level">{{ 5 - index }}星</span>
|
|||
|
|
<el-progress
|
|||
|
|
:percentage="Math.round(count / course.ratingCount * 100)"
|
|||
|
|
:stroke-width="12"
|
|||
|
|
:show-text="false"
|
|||
|
|
:color="'#ffc107'"
|
|||
|
|
/>
|
|||
|
|
<span class="rating-percent">{{ Math.round(count / course.ratingCount * 100) }}%</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="review-list">
|
|||
|
|
<div v-for="review in course.reviews" :key="review.id" class="review-item">
|
|||
|
|
<div class="review-header">
|
|||
|
|
<div class="reviewer-info">
|
|||
|
|
<el-avatar :size="40" :src="review.avatar"></el-avatar>
|
|||
|
|
<div class="reviewer-meta">
|
|||
|
|
<div class="reviewer-name">{{ review.username }}</div>
|
|||
|
|
<div class="review-date">{{ review.date }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="review-rating">
|
|||
|
|
<el-rate v-model="review.rating" disabled text-color="#ff9900" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="review-content">{{ review.content }}</div>
|
|||
|
|
<div v-if="review.reply" class="review-reply">
|
|||
|
|
<div class="reply-header">讲师回复:</div>
|
|||
|
|
<div class="reply-content">{{ review.reply }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="course-sidebar">
|
|||
|
|
<el-card class="sidebar-card">
|
|||
|
|
<div class="video-preview">
|
|||
|
|
<img :src="course.coverImg" :alt="course.title">
|
|||
|
|
<div class="play-button" @click="playPreview">
|
|||
|
|
<el-icon><VideoPlay /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="course-price-info">
|
|||
|
|
<div v-if="course.price > 0" class="price">
|
|||
|
|
<span class="current-price">¥{{ course.price.toFixed(2) }}</span>
|
|||
|
|
<span v-if="course.originalPrice" class="original-price">¥{{ course.originalPrice.toFixed(2) }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div v-else class="price free">免费</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="course-actions">
|
|||
|
|
<el-button v-if="isEnrolled" type="primary" @click="continueLearning">继续学习</el-button>
|
|||
|
|
<el-button v-else type="primary" @click="enrollCourse">立即报名</el-button>
|
|||
|
|
<el-button v-if="isFavorite" @click="removeFavorite">取消收藏</el-button>
|
|||
|
|
<el-button v-else @click="addFavorite">收藏课程</el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="course-includes">
|
|||
|
|
<h3>课程包含</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li><el-icon><VideoPlay /></el-icon> {{ course.videoCount }}个视频</li>
|
|||
|
|
<li><el-icon><Document /></el-icon> {{ course.documentCount }}个文档</li>
|
|||
|
|
<li><el-icon><Timer /></el-icon> {{ course.totalDuration }}</li>
|
|||
|
|
<li><el-icon><Trophy /></el-icon> 完成后获得证书</li>
|
|||
|
|
<li><el-icon><Connection /></el-icon> 永久观看权限</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-dialog v-model="videoDialogVisible" title="视频播放" width="70%" destroy-on-close>
|
|||
|
|
<div class="video-player">
|
|||
|
|
<div class="player-placeholder">
|
|||
|
|
<img :src="course.coverImg" alt="视频封面">
|
|||
|
|
<div class="player-overlay">
|
|||
|
|
<p>{{ currentSection ? currentSection.title : '课程预览' }}</p>
|
|||
|
|
<el-icon><VideoPlay /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, computed, onMounted } from 'vue'
|
|||
|
|
import { useRoute, useRouter } from 'vue-router'
|
|||
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|||
|
|
import { User, Calendar, View, VideoPlay, Document, Check, Trophy, Timer, Connection } from '@element-plus/icons-vue'
|
|||
|
|
|
|||
|
|
const route = useRoute()
|
|||
|
|
const router = useRouter()
|
|||
|
|
const courseId = route.params.id
|
|||
|
|
const activeTab = ref('chapters')
|
|||
|
|
const activeChapters = ref([1])
|
|||
|
|
const videoDialogVisible = ref(false)
|
|||
|
|
const currentSection = ref(null)
|
|||
|
|
|
|||
|
|
// 模拟课程数据
|
|||
|
|
const course = ref({
|
|||
|
|
id: 1,
|
|||
|
|
title: 'Vue.js 3 完全指南',
|
|||
|
|
description: '从入门到精通，全面掌握Vue3的新特性和开发技巧',
|
|||
|
|
coverImg: 'https://picsum.photos/id/1/600/400',
|
|||
|
|
teacher: '张教授',
|
|||
|
|
updateTime: '2023-05-15',
|
|||
|
|
studentCount: 1250,
|
|||
|
|
rating: 4.8,
|
|||
|
|
ratingCount: 245,
|
|||
|
|
ratingDistribution: [180, 50, 10, 3, 2], // 5星到1星的分布
|
|||
|
|
price: 199,
|
|||
|
|
originalPrice: 299,
|
|||
|
|
videoCount: 45,
|
|||
|
|
documentCount: 12,
|
|||
|
|
totalDuration: '12小时30分钟',
|
|||
|
|
introHtml: `
|
|||
|
|
<h2>课程简介</h2>
|
|||
|
|
<p>Vue.js 3是一个流行的JavaScript框架，用于构建用户界面。它建立在标准HTML、CSS和JavaScript之上，并提供了一个声明式的、组件化的编程模型，帮助你高效地开发用户界面。</p>
|
|||
|
|
<h3>你将学到什么</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>Vue 3的核心概念和基础知识</li>
|
|||
|
|
<li>组合式API的使用方法和最佳实践</li>
|
|||
|
|
<li>Vue Router和Pinia状态管理</li>
|
|||
|
|
<li>Vue 3的高级特性和性能优化</li>
|
|||
|
|
<li>实际项目开发和部署</li>
|
|||
|
|
</ul>
|
|||
|
|
<h3>适合人群</h3>
|
|||
|
|
<p>本课程适合有一定JavaScript基础，想要学习Vue.js 3的开发者。如果你已经熟悉Vue 2，本课程也会帮助你快速过渡到Vue 3。</p>
|
|||
|
|
`,
|
|||
|
|
chapters: [
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
title: '第1章：Vue 3基础入门',
|
|||
|
|
sections: [
|
|||
|
|
{ id: 101, title: '课程介绍', type: 'video', duration: '10:30', isFree: true, isCompleted: true },
|
|||
|
|
{ id: 102, title: 'Vue 3新特性概述', type: 'video', duration: '15:45', isFree: true, isCompleted: true },
|
|||
|
|
{ id: 103, title: '开发环境搭建', type: 'video', duration: '12:20', isFree: false, isCompleted: true },
|
|||
|
|
{ id: 104, title: '第一个Vue 3应用', type: 'video', duration: '18:15', isFree: false, isCompleted: false }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
title: '第2章：组合式API详解',
|
|||
|
|
sections: [
|
|||
|
|
{ id: 201, title: 'setup函数介绍', type: 'video', duration: '14:30', isFree: false, isCompleted: false },
|
|||
|
|
{ id: 202, title: 'ref和reactive', type: 'video', duration: '20:15', isFree: false, isCompleted: false },
|
|||
|
|
{ id: 203, title: '计算属性和侦听器', type: 'video', duration: '16:40', isFree: false, isCompleted: false },
|
|||
|
|
{ id: 204, title: '生命周期钩子', type: 'video', duration: '12:55', isFree: false, isCompleted: false },
|
|||
|
|
{ id: 205, title: '组合式函数', type: 'document', duration: '阅读材料', isFree: false, isCompleted: false }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 3,
|
|||
|
|
title: '第3章：Vue Router路由管理',
|
|||
|
|
sections: [
|
|||
|
|
{ id: 301, title: 'Vue Router 4基础', type: 'video', duration: '18:20', isFree: false, isCompleted: false },
|
|||
|
|
{ id: 302, title: '动态路由和路由参数', type: 'video', duration: '15:10', isFree: false, isCompleted: false },
|
|||
|
|
{ id: 303, title: '路由导航守卫', type: 'video', duration: '22:35', isFree: false, isCompleted: false },
|
|||
|
|
{ id: 304, title: '路由元信息和过渡效果', type: 'document', duration: '阅读材料', isFree: false, isCompleted: false }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
reviews: [
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
username: '李明',
|
|||
|
|
avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
|||
|
|
rating: 5,
|
|||
|
|
date: '2023-05-10',
|
|||
|
|
content: '非常棒的课程！讲解清晰，内容全面，对Vue 3的理解有了质的提升。',
|
|||
|
|
reply: '谢谢支持，希望课程对你有所帮助！'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
username: '王芳',
|
|||
|
|
avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
|||
|
|
rating: 4,
|
|||
|
|
date: '2023-05-05',
|
|||
|
|
content: '内容很充实，但有些地方讲解速度有点快，需要多看几遍才能理解。',
|
|||
|
|
reply: null
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 3,
|
|||
|
|
username: '张伟',
|
|||
|
|
avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
|||
|
|
rating: 5,
|
|||
|
|
date: '2023-04-28',
|
|||
|
|
content: '老师讲解非常清晰，示例也很实用，强烈推荐给想学Vue 3的同学！',
|
|||
|
|
reply: '感谢您的评价，我们会继续努力提供更好的课程！'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 模拟用户状态
|
|||
|
|
const isEnrolled = ref(true)
|
|||
|
|
const isFavorite = ref(false)
|
|||
|
|
|
|||
|
|
// 播放课程章节
|
|||
|
|
const playSection = (chapter, section) => {
|
|||
|
|
if (!isEnrolled.value && !section.isFree) {
|
|||
|
|
ElMessage.warning('请先报名课程')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
currentSection.value = section
|
|||
|
|
videoDialogVisible.value = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 播放预览视频
|
|||
|
|
const playPreview = () => {
|
|||
|
|
currentSection.value = null
|
|||
|
|
videoDialogVisible.value = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 继续学习
|
|||
|
|
const continueLearning = () => {
|
|||
|
|
// 查找上次学习的位置或第一个未完成的章节
|
|||
|
|
let targetChapter, targetSection
|
|||
|
|
|
|||
|
|
for (const chapter of course.value.chapters) {
|
|||
|
|
const uncompletedSection = chapter.sections.find(section => !section.isCompleted)
|
|||
|
|
if (uncompletedSection) {
|
|||
|
|
targetChapter = chapter
|
|||
|
|
targetSection = uncompletedSection
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (targetChapter && targetSection) {
|
|||
|
|
activeChapters.value = [targetChapter.id]
|
|||
|
|
playSection(targetChapter, targetSection)
|
|||
|
|
} else {
|
|||
|
|
// 如果全部完成，播放第一章第一节
|
|||
|
|
const firstChapter = course.value.chapters[0]
|
|||
|
|
const firstSection = firstChapter.sections[0]
|
|||
|
|
activeChapters.value = [firstChapter.id]
|
|||
|
|
playSection(firstChapter, firstSection)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 报名课程
|
|||
|
|
const enrollCourse = () => {
|
|||
|
|
ElMessageBox.confirm('确定要报名该课程吗?', '提示', {
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'info'
|
|||
|
|
}).then(() => {
|
|||
|
|
// 在实际应用中，这里应该调用API报名课程
|
|||
|
|
isEnrolled.value = true
|
|||
|
|
ElMessage.success('报名成功')
|
|||
|
|
}).catch(() => {
|
|||
|
|
// 用户取消操作
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 收藏课程
|
|||
|
|
const addFavorite = () => {
|
|||
|
|
// 在实际应用中，这里应该调用API收藏课程
|
|||
|
|
isFavorite.value = true
|
|||
|
|
ElMessage.success('已收藏课程')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 取消收藏
|
|||
|
|
const removeFavorite = () => {
|
|||
|
|
ElMessageBox.confirm('确定要取消收藏该课程吗?', '提示', {
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'warning'
|
|||
|
|
}).then(() => {
|
|||
|
|
// 在实际应用中，这里应该调用API取消收藏
|
|||
|
|
isFavorite.value = false
|
|||
|
|
ElMessage.success('已取消收藏')
|
|||
|
|
}).catch(() => {
|
|||
|
|
// 用户取消操作
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
// 在实际应用中，这里应该从API获取课程详情
|
|||
|
|
// fetchCourseDetail(courseId)
|
|||
|
|
|
|||
|
|
// 检查URL参数，如果有autoplay=true，则自动开始播放
|
|||
|
|
if (route.query.autoplay === 'true') {
|
|||
|
|
continueLearning()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.course-detail {
|
|||
|
|
.course-header {
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
padding: 40px 0;
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 0 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-info {
|
|||
|
|
max-width: 800px;
|
|||
|
|
|
|||
|
|
.course-title {
|
|||
|
|
font-size: 28px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
color: #303133;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-desc {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #606266;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-meta {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 20px;
|
|||
|
|
|
|||
|
|
.meta-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
color: #909399;
|
|||
|
|
|
|||
|
|
.el-icon {
|
|||
|
|
margin-right: 5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 30px 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-content {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 350px;
|
|||
|
|
gap: 30px;
|
|||
|
|
|
|||
|
|
@media (max-width: 992px) {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-main {
|
|||
|
|
background-color: white;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.course-tabs {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-chapters {
|
|||
|
|
.chapter-sections {
|
|||
|
|
.section-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 12px 10px;
|
|||
|
|
border-bottom: 1px solid #ebeef5;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.is-free {
|
|||
|
|
.section-title {
|
|||
|
|
color: #67c23a;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.is-active {
|
|||
|
|
background-color: #ecf5ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
|
|||
|
|
.el-icon {
|
|||
|
|
color: #409eff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.free-tag {
|
|||
|
|
background-color: #67c23a;
|
|||
|
|
color: white;
|
|||
|
|
padding: 2px 6px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
margin-left: 8px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-meta {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
color: #909399;
|
|||
|
|
font-size: 14px;
|
|||
|
|
|
|||
|
|
.el-icon {
|
|||
|
|
color: #67c23a;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-intro {
|
|||
|
|
padding: 0 10px;
|
|||
|
|
|
|||
|
|
h2 {
|
|||
|
|
font-size: 20px;
|
|||
|
|
margin: 20px 0 15px;
|
|||
|
|
color: #303133;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h3 {
|
|||
|
|
font-size: 18px;
|
|||
|
|
margin: 18px 0 12px;
|
|||
|
|
color: #303133;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ul {
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
padding-left: 20px;
|
|||
|
|
|
|||
|
|
li {
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-reviews {
|
|||
|
|
.review-summary {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 30px;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
padding: 20px;
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rating-overall {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
min-width: 150px;
|
|||
|
|
|
|||
|
|
.rating-score {
|
|||
|
|
font-size: 48px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #ff9900;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rating-stars {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.rating-count {
|
|||
|
|
margin-top: 5px;
|
|||
|
|
color: #909399;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rating-distribution {
|
|||
|
|
flex-grow: 1;
|
|||
|
|
|
|||
|
|
.rating-bar {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
|
|||
|
|
.rating-level {
|
|||
|
|
width: 40px;
|
|||
|
|
text-align: right;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-progress {
|
|||
|
|
flex-grow: 1;
|
|||
|
|
margin: 0 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rating-percent {
|
|||
|
|
width: 40px;
|
|||
|
|
color: #909399;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.review-list {
|
|||
|
|
.review-item {
|
|||
|
|
border-bottom: 1px solid #ebeef5;
|
|||
|
|
padding: 20px 0;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.review-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
|
|||
|
|
.reviewer-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.reviewer-meta {
|
|||
|
|
margin-left: 10px;
|
|||
|
|
|
|||
|
|
.reviewer-name {
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.review-date {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #909399;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.review-content {
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.review-reply {
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
|
|||
|
|
.reply-header {
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
color: #409eff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.reply-content {
|
|||
|
|
color: #606266;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-sidebar {
|
|||
|
|
.sidebar-card {
|
|||
|
|
position: sticky;
|
|||
|
|
top: 20px;
|
|||
|
|
|
|||
|
|
.video-preview {
|
|||
|
|
position: relative;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 200px;
|
|||
|
|
object-fit: cover;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.play-button {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.el-icon {
|
|||
|
|
font-size: 30px;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-price-info {
|
|||
|
|
margin: 20px 0;
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
.price {
|
|||
|
|
.current-price {
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #f56c6c;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.original-price {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #909399;
|
|||
|
|
text-decoration: line-through;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.free {
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #67c23a;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
|
|||
|
|
.el-button {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-includes {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
|
|||
|
|
h3 {
|
|||
|
|
font-size: 16px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
color: #303133;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ul {
|
|||
|
|
list-style: none;
|
|||
|
|
padding: 0;
|
|||
|
|
|
|||
|
|
li {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
color: #606266;
|
|||
|
|
|
|||
|
|
.el-icon {
|
|||
|
|
margin-right: 8px;
|
|||
|
|
color: #409eff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-player {
|
|||
|
|
.player-placeholder {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 400px;
|
|||
|
|
background-color: #000;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
opacity: 0.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.player-overlay {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
color: white;
|
|||
|
|
font-size: 18px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-icon {
|
|||
|
|
font-size: 48px;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|