1844 lines
45 KiB
Vue
1844 lines
45 KiB
Vue
<template>
|
||
<div class="course-detail-page">
|
||
<!-- 面包屑导航 -->
|
||
<div class="breadcrumb">
|
||
<div class="container">
|
||
<span class="breadcrumb-text">首页 > 课程库 > 暑期名师领学，提高班级教学质量！高效冲分指南</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主要内容区域 -->
|
||
<div class="main-content">
|
||
<div class="container">
|
||
<div class="content-layout">
|
||
<!-- 左侧主要内容 -->
|
||
<div class="main-column">
|
||
<!-- 视频播放器区域 - 未报名状态 -->
|
||
<div class="video-player-section">
|
||
<div class="video-player unregistered">
|
||
<div class="video-background">
|
||
<div class="video-content">
|
||
<!-- 课程标题 -->
|
||
<h1 class="course-main-title">暑期名师领学，提高班级教学质量！高效冲分指南</h1>
|
||
|
||
<!-- 课程信息 -->
|
||
<div class="course-meta-info">
|
||
<span class="meta-item">讲师：王老师</span>
|
||
<span class="meta-separator">|</span>
|
||
<span class="meta-item">时长：45分32秒</span>
|
||
</div>
|
||
|
||
<!-- 报名按钮 -->
|
||
<button class="enroll-button" @click="enrollCourse">
|
||
立即报名
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部工具栏 -->
|
||
<div class="video-toolbar">
|
||
<div class="toolbar-left">
|
||
<button class="toolbar-btn like-btn" :class="{ liked: isLiked }" @click="toggleLike">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||
<path d="M8 14L7.1 13.2C3.4 9.9 1 7.7 1 5C1 2.8 2.8 1 5 1C6.2 1 7.4 1.6 8 2.5C8.6 1.6 9.8 1 11 1C13.2 1 15 2.8 15 5C15 7.7 12.6 9.9 8.9 13.2L8 14Z" :fill="isLiked ? '#ff4757' : 'none'" stroke="currentColor" stroke-width="1"/>
|
||
</svg>
|
||
<span class="toolbar-text">{{ likeCount }}</span>
|
||
</button>
|
||
|
||
<button class="toolbar-btn share-btn" @click="shareCourse">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||
<path d="M13 10C12.3 10 11.7 10.3 11.2 10.7L5.9 7.8C5.9 7.5 6 7.3 6 7C6 6.7 5.9 6.5 5.9 6.2L11.2 3.3C11.7 3.7 12.3 4 13 4C14.7 4 16 2.7 16 1C16 -0.7 14.7 -2 13 -2C11.3 -2 10 -0.7 10 1C10 1.3 10.1 1.5 10.1 1.8L4.8 4.7C4.3 4.3 3.7 4 3 4C1.3 4 0 5.3 0 7C0 8.7 1.3 10 3 10C3.7 10 4.3 9.7 4.8 9.3L10.1 12.2C10.1 12.5 10 12.7 10 13C10 14.7 11.3 16 13 16C14.7 16 16 14.7 16 13C16 11.3 14.7 10 13 10Z" fill="currentColor"/>
|
||
</svg>
|
||
<span class="toolbar-text">{{ shareCount }}</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="toolbar-right">
|
||
<button class="toolbar-btn icon-btn" @click="showComments">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||
<path d="M14 1H2C1.4 1 1 1.4 1 2V10C1 10.6 1.4 11 2 11H3V14L6 11H14C14.6 11 15 10.6 15 10V2C15 1.4 14.6 1 14 1Z" stroke="currentColor" stroke-width="1" fill="none"/>
|
||
</svg>
|
||
</button>
|
||
|
||
<button class="toolbar-btn icon-btn" @click="showMoreOptions">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||
<path d="M2 8C2 7.4 2.4 7 3 7C3.6 7 4 7.4 4 8C4 8.6 3.6 9 3 9C2.4 9 2 8.6 2 8ZM7 8C7 7.4 7.4 7 8 7C8.6 7 9 7.4 9 8C9 8.6 8.6 9 8 9C7.4 9 7 8.6 7 8ZM12 8C12 7.4 12.4 7 13 7C13.6 7 14 7.4 14 8C14 8.6 13.6 9 13 9C12.4 9 12 8.6 12 8Z" fill="currentColor"/>
|
||
</svg>
|
||
</button>
|
||
|
||
<div class="comment-input-container">
|
||
<input
|
||
type="text"
|
||
class="comment-input"
|
||
placeholder="成功报名学习才能发送弹幕~"
|
||
v-model="commentText"
|
||
:disabled="!isEnrolled"
|
||
/>
|
||
<button class="send-btn" :disabled="!commentText.trim() || !isEnrolled" @click="sendComment">
|
||
发送
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 课程信息区域 -->
|
||
<div class="course-info-section">
|
||
<!-- 课程标题和分类 -->
|
||
<div class="course-header">
|
||
<h1 class="course-title">暑期名师领学，提高班级教学质量！高效冲分指南</h1>
|
||
<div class="course-meta">
|
||
<span class="course-category">分类：<span class="category-tag">信息技术</span></span>
|
||
<button class="btn-notes">记笔记</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 课程描述 -->
|
||
<div class="course-description">
|
||
<p>本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能大赛紧密结合，课程设置紧密对应实际全面共享，可为职业工作人员、在校学生、创行教师提供服务与学习支持。</p>
|
||
</div>
|
||
|
||
<!-- 讲师信息 -->
|
||
<div class="instructors-section">
|
||
<h3 class="section-title">讲师</h3>
|
||
<div class="instructors-list">
|
||
<div class="instructor-item">
|
||
<div class="instructor-avatar">
|
||
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=60&h=60&fit=crop&crop=face" alt="汪波" />
|
||
</div>
|
||
<div class="instructor-name">汪波</div>
|
||
<div class="instructor-title">讲师</div>
|
||
</div>
|
||
<div class="instructor-item">
|
||
<div class="instructor-avatar">
|
||
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=60&h=60&fit=crop&crop=face" alt="汪波" />
|
||
</div>
|
||
<div class="instructor-name">汪波</div>
|
||
<div class="instructor-title">讲师</div>
|
||
</div>
|
||
<div class="instructor-item">
|
||
<div class="instructor-avatar">
|
||
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=60&h=60&fit=crop&crop=face" alt="汪波" />
|
||
</div>
|
||
<div class="instructor-name">汪波</div>
|
||
<div class="instructor-title">讲师</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 课程标签页 -->
|
||
<div class="course-tabs">
|
||
<div class="tab-nav">
|
||
<button class="tab-btn" :class="{ active: activeTab === 'intro' }" @click="activeTab = 'intro'">课程介绍</button>
|
||
<button class="tab-btn" :class="{ active: activeTab === 'comments' }" @click="activeTab = 'comments'">评论(1251)</button>
|
||
</div>
|
||
|
||
<!-- 标签页内容区域 -->
|
||
<div class="tab-content">
|
||
<!-- 课程介绍内容 -->
|
||
<div v-if="activeTab === 'intro'" class="tab-pane">
|
||
<!-- 已报名状态显示详细内容 -->
|
||
<div v-if="isEnrolled" class="intro-content">
|
||
<h4>课程详情</h4>
|
||
<p>本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。</p>
|
||
<p>课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能大赛紧密结合，课程设置紧密对应实际全面共享，可为职业工作人员、在校学生、创行教师提供服务与学习支持。</p>
|
||
|
||
<h4>学习目标</h4>
|
||
<ul>
|
||
<li>掌握DeepSeek的基本使用方法</li>
|
||
<li>了解办公自动化职业岗位标准</li>
|
||
<li>提高教学质量和效率</li>
|
||
<li>获得实际工作技能</li>
|
||
</ul>
|
||
|
||
<h4>适用人群</h4>
|
||
<p>本课程适合职业工作人员、在校学生、教师等群体学习。</p>
|
||
</div>
|
||
|
||
<!-- 未报名状态显示空内容 -->
|
||
<div v-else class="intro-empty">
|
||
<!-- 空内容区域，保持灰色背景 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 评论内容 -->
|
||
<div v-if="activeTab === 'comments'" class="tab-pane">
|
||
<div class="comments-content">
|
||
<div class="comment-stats">
|
||
<span class="total-comments">共1251条评论</span>
|
||
<div class="comment-filters">
|
||
<button class="filter-btn active">全部</button>
|
||
<button class="filter-btn">最新</button>
|
||
<button class="filter-btn">最热</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comment-list">
|
||
<div class="comment-item" v-for="comment in displayComments" :key="comment.id">
|
||
<div class="comment-avatar">
|
||
<img :src="comment.avatar" :alt="comment.username" />
|
||
</div>
|
||
<div class="comment-content">
|
||
<div class="comment-header">
|
||
<span class="comment-username">{{ comment.username }}</span>
|
||
<span class="comment-time">{{ comment.time }}</span>
|
||
</div>
|
||
<div class="comment-text">{{ comment.content }}</div>
|
||
<div class="comment-actions">
|
||
<button class="action-btn">
|
||
<i class="icon-like"></i>
|
||
{{ comment.likes }}
|
||
</button>
|
||
<button class="action-btn">回复</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="load-more">
|
||
<button class="btn-load-more">加载更多评论</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧边栏 -->
|
||
<div class="sidebar">
|
||
<!-- 报名学习按钮 -->
|
||
<div class="enroll-section">
|
||
<button class="btn-enroll">报名学习</button>
|
||
</div>
|
||
|
||
<!-- 课程章节 -->
|
||
<div class="course-catalog">
|
||
<div class="catalog-header">
|
||
<h3>课程章节</h3>
|
||
<div class="catalog-sort" @click="toggleSortOrder">
|
||
<span>三</span>
|
||
<span>{{ sortOrder === 'asc' ? '正序' : '倒序' }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="catalog-content">
|
||
<div class="chapter-list">
|
||
<!-- 动态渲染章节，根据排序状态决定顺序 -->
|
||
<div class="chapter-item" v-for="chapter in sortedChapters" :key="chapter.id">
|
||
<div class="chapter-header" @click="toggleChapter(chapter.id)">
|
||
<span class="chapter-title">{{ chapter.title }}</span>
|
||
<div class="chapter-toggle">
|
||
<svg class="toggle-icon" :class="{ expanded: chapterStates[chapter.id] }" width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||
<path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="lesson-list" v-if="chapterStates[chapter.id]">
|
||
<div class="lesson-item" v-for="lesson in chapter.lessons" :key="lesson.id">
|
||
<div class="lesson-left">
|
||
<span class="lesson-type" :class="lesson.type">{{ lesson.type === 'video' ? '视频' : '资料' }}</span>
|
||
<span class="lesson-title">{{ lesson.title }}</span>
|
||
</div>
|
||
<div class="lesson-right">
|
||
<!-- 视频课时显示时长和播放按钮 -->
|
||
<template v-if="lesson.type === 'video'">
|
||
<span class="lesson-duration">{{ lesson.duration }}</span>
|
||
<button class="lesson-play-btn">
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||
<path d="M3 2L9 6L3 10V2Z" fill="currentColor"/>
|
||
</svg>
|
||
</button>
|
||
</template>
|
||
<!-- 资料课时显示下载按钮 -->
|
||
<template v-else>
|
||
<button class="lesson-download-btn">
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||
<path d="M6 1V8M6 8L3 5M6 8L9 5M2 10H10" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</button>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 推荐课程 -->
|
||
<div class="recommended-courses">
|
||
<div class="recommend-header">
|
||
<h3>推荐课程</h3>
|
||
</div>
|
||
<div class="recommend-list">
|
||
<!-- 计算机二级课程 -->
|
||
<div class="recommend-item">
|
||
<div class="recommend-image">
|
||
<div class="recommend-placeholder computer-bg">
|
||
<div class="placeholder-text">计算机二级</div>
|
||
</div>
|
||
<div class="recommend-badge">热门</div>
|
||
</div>
|
||
<div class="recommend-content">
|
||
<h4 class="recommend-title">计算机二级考前冲刺</h4>
|
||
<div class="recommend-tags">
|
||
<span class="tag">考试必备</span>
|
||
<span class="tag">名师授课</span>
|
||
<span class="tag">高通过率</span>
|
||
</div>
|
||
<p class="recommend-desc">备考计算机二级，名师带你高效复习，掌握考试重点，轻松通过考试</p>
|
||
<button class="recommend-btn">立即学习</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 英语课程 -->
|
||
<div class="recommend-item">
|
||
<div class="recommend-image">
|
||
<div class="recommend-placeholder english-bg">
|
||
<div class="placeholder-text">摆脱哑巴英语</div>
|
||
</div>
|
||
</div>
|
||
<div class="recommend-content">
|
||
<h4 class="recommend-title">摆脱哑巴英语</h4>
|
||
<p class="recommend-desc">备考计算机二级，名师带你高效复习，掌握考试重点，轻松通过考试</p>
|
||
<div class="recommend-meta">
|
||
<span class="recommend-price">¥99</span>
|
||
<button class="recommend-btn">立即学习</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, computed } from 'vue'
|
||
import { useRoute } from 'vue-router'
|
||
|
||
const route = useRoute()
|
||
const courseId = ref(route.params.id)
|
||
|
||
// 视频播放相关状态
|
||
const isPlaying = ref(false)
|
||
const videoProgress = ref(25) // 播放进度百分比
|
||
|
||
// 未报名状态的交互数据
|
||
const isLiked = ref(false)
|
||
const likeCount = ref(541)
|
||
const shareCount = ref(2377)
|
||
const commentText = ref('')
|
||
const isEnrolled = ref(false) // 是否已报名
|
||
const activeTab = ref('intro') // 当前激活的标签页
|
||
|
||
// 视频播放控制方法
|
||
const playVideo = () => {
|
||
isPlaying.value = true
|
||
console.log('开始播放视频')
|
||
}
|
||
|
||
const togglePlay = () => {
|
||
isPlaying.value = !isPlaying.value
|
||
console.log(isPlaying.value ? '播放视频' : '暂停视频')
|
||
}
|
||
|
||
// 未报名状态的交互方法
|
||
const enrollCourse = () => {
|
||
console.log('点击报名课程')
|
||
// 这里可以跳转到报名页面或显示报名弹窗
|
||
}
|
||
|
||
const toggleLike = () => {
|
||
isLiked.value = !isLiked.value
|
||
likeCount.value += isLiked.value ? 1 : -1
|
||
console.log(isLiked.value ? '点赞课程' : '取消点赞')
|
||
}
|
||
|
||
const shareCourse = () => {
|
||
console.log('分享课程')
|
||
// 这里可以打开分享弹窗
|
||
}
|
||
|
||
const showComments = () => {
|
||
console.log('显示评论区')
|
||
// 这里可以滚动到评论区或打开评论弹窗
|
||
}
|
||
|
||
const showMoreOptions = () => {
|
||
console.log('显示更多选项')
|
||
// 这里可以显示更多操作选项
|
||
}
|
||
|
||
const sendComment = () => {
|
||
if (commentText.value.trim() && isEnrolled.value) {
|
||
console.log('发送弹幕:', commentText.value)
|
||
commentText.value = ''
|
||
}
|
||
}
|
||
|
||
// 选择课程方法
|
||
const selectLesson = (lesson: any) => {
|
||
console.log('选择课程:', lesson.title)
|
||
// 这里可以添加切换视频源的逻辑
|
||
}
|
||
|
||
|
||
|
||
// 课程章节数据
|
||
const chaptersData = ref([
|
||
{
|
||
id: 'chapter1',
|
||
order: 1,
|
||
title: '第一章 课前准备',
|
||
lessons: [
|
||
{ id: 1, type: 'video', title: '开课彩蛋：新开始新征程', duration: '01:03:56' },
|
||
{ id: 2, type: 'video', title: '课程定位与目标', duration: '00:44:05' },
|
||
{ id: 3, type: 'video', title: '教学安排及学习建议', duration: '00:52:22' },
|
||
{ id: 4, type: 'material', title: '课前准备PPT' }
|
||
]
|
||
},
|
||
{
|
||
id: 'chapter2',
|
||
order: 2,
|
||
title: '第二章 程序设计基础知识',
|
||
lessons: [
|
||
{ id: 5, type: 'video', title: '第一章 程序设计入门', duration: '01:03:56' },
|
||
{ id: 6, type: 'material', title: '课件PPT' },
|
||
{ id: 7, type: 'video', title: '第二章 循环结构', duration: '00:52:22' },
|
||
{ id: 8, type: 'video', title: '第三章 函数&递归', duration: '00:52:22' },
|
||
{ id: 9, type: 'material', title: '练习题目' }
|
||
]
|
||
},
|
||
{
|
||
id: 'chapter3',
|
||
order: 3,
|
||
title: '第三章 程序的控制结构',
|
||
lessons: [
|
||
{ id: 10, type: 'video', title: '条件语句与分支结构', duration: '00:45:30' },
|
||
{ id: 11, type: 'video', title: '循环语句详解', duration: '00:38:45' },
|
||
{ id: 12, type: 'video', title: '嵌套循环与优化', duration: '00:55:20' },
|
||
{ id: 13, type: 'video', title: '异常处理机制', duration: '00:42:15' },
|
||
{ id: 14, type: 'material', title: '控制结构综合练习' }
|
||
]
|
||
},
|
||
{
|
||
id: 'chapter4',
|
||
order: 4,
|
||
title: '第四章 大语言模型介绍',
|
||
lessons: [
|
||
{ id: 15, type: 'video', title: '人工智能发展历程', duration: '00:35:20' },
|
||
{ id: 16, type: 'video', title: '大语言模型基础概念', duration: '00:48:30' },
|
||
{ id: 17, type: 'video', title: 'Transformer架构解析', duration: '01:15:45' },
|
||
{ id: 18, type: 'video', title: '主流大模型对比分析', duration: '00:52:10' },
|
||
{ id: 19, type: 'video', title: '大模型的应用场景', duration: '00:38:25' },
|
||
{ id: 20, type: 'material', title: '模型训练与微调资料' }
|
||
]
|
||
},
|
||
{
|
||
id: 'chapter5',
|
||
order: 5,
|
||
title: '第五章 DeepSeek实际应用',
|
||
lessons: [
|
||
{ id: 21, type: 'video', title: 'DeepSeek平台介绍', duration: '00:25:30' },
|
||
{ id: 22, type: 'video', title: 'API接口使用指南', duration: '00:42:15' },
|
||
{ id: 23, type: 'video', title: '代码生成与优化', duration: '01:08:20' },
|
||
{ id: 24, type: 'video', title: '文档自动生成', duration: '00:35:45' },
|
||
{ id: 25, type: 'video', title: '智能问答系统搭建', duration: '01:22:30' },
|
||
{ id: 26, type: 'video', title: '数据分析与处理', duration: '00:58:15' },
|
||
{ id: 27, type: 'material', title: '实战项目演示代码' }
|
||
]
|
||
},
|
||
{
|
||
id: 'chapter6',
|
||
order: 6,
|
||
title: '第六章 高级应用与项目实战',
|
||
lessons: [
|
||
{ id: 28, type: 'video', title: '企业级应用架构设计', duration: '01:15:30' },
|
||
{ id: 29, type: 'video', title: '性能优化与调试技巧', duration: '00:48:20' },
|
||
{ id: 30, type: 'video', title: '多模态应用开发', duration: '01:25:45' },
|
||
{ id: 31, type: 'video', title: '安全性与隐私保护', duration: '00:38:15' },
|
||
{ id: 32, type: 'video', title: '综合项目实战', duration: '02:15:30' },
|
||
{ id: 33, type: 'material', title: '项目部署与运维文档' },
|
||
{ id: 34, type: 'video', title: '未来发展趋势', duration: '00:45:20' },
|
||
{ id: 35, type: 'video', title: '课程总结与答疑', duration: '00:35:10' }
|
||
]
|
||
}
|
||
])
|
||
|
||
// 课件下载
|
||
const courseDownloads = ref([
|
||
{ id: 1, name: 'DeepSeek入门指南.pdf', size: '2.5MB' },
|
||
{ id: 2, name: '课程代码示例.zip', size: '15.8MB' },
|
||
{ id: 3, name: '实践项目模板.zip', size: '8.2MB' },
|
||
{ id: 4, name: '参考资料合集.pdf', size: '12.3MB' }
|
||
])
|
||
|
||
// 课程评论
|
||
const displayComments = ref([
|
||
{
|
||
id: 1,
|
||
username: '学习者小王',
|
||
avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=80',
|
||
time: '2天前',
|
||
content: '老师讲得很详细，从零基础到实际应用都有涉及，非常适合初学者！',
|
||
likes: 23
|
||
},
|
||
{
|
||
id: 2,
|
||
username: 'AI爱好者',
|
||
avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=80',
|
||
time: '5天前',
|
||
content: '课程内容很实用，跟着做了几个项目，收获很大。推荐给想学AI的朋友们！',
|
||
likes: 18
|
||
},
|
||
{
|
||
id: 3,
|
||
username: '程序员小李',
|
||
avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=80',
|
||
time: '1周前',
|
||
content: 'DeepSeek确实是个很强大的工具，通过这个课程学会了很多实用技巧。',
|
||
likes: 31
|
||
},
|
||
{
|
||
id: 4,
|
||
username: '资深开发者',
|
||
avatar: 'https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?w=40&h=40&fit=crop&crop=face',
|
||
time: '3天前',
|
||
content: '课程内容很全面，对提高工作效率很有帮助。',
|
||
likes: 15
|
||
},
|
||
{
|
||
id: 5,
|
||
username: '教育工作者',
|
||
avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=40&h=40&fit=crop&crop=face',
|
||
time: '1周前',
|
||
content: '作为教师，这个课程给了我很多教学灵感，值得推荐。',
|
||
likes: 27
|
||
}
|
||
])
|
||
|
||
// 推荐课程
|
||
const recommendedCourses = ref([
|
||
{
|
||
id: 1,
|
||
title: '计算机二级考试指南',
|
||
description: '全面覆盖计算机二级考试要点，助你轻松通过考试',
|
||
image: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80',
|
||
studentsCount: '3421',
|
||
rating: '4.8'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '黑马程序员巴赛罗那',
|
||
description: '从零开始学习编程，打造扎实的编程基础',
|
||
image: 'https://images.unsplash.com/photo-1526379095098-d400fd0bf935?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80',
|
||
studentsCount: '2856',
|
||
rating: '4.9'
|
||
}
|
||
])
|
||
|
||
// 更多课程（保留原有数据以防其他地方使用）
|
||
const moreCourses = ref([
|
||
{
|
||
id: 1,
|
||
title: '计算机二级考试指南',
|
||
image: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80',
|
||
studentsCount: '3421'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: 'Python编程基础',
|
||
image: 'https://images.unsplash.com/photo-1526379095098-d400fd0bf935?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80',
|
||
studentsCount: '2856'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '机器学习实战',
|
||
image: 'https://images.unsplash.com/photo-1555949963-aa79dcee981c?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80',
|
||
studentsCount: '1967'
|
||
}
|
||
])
|
||
|
||
// 章节展开状态管理
|
||
const chapterStates = ref<Record<string, boolean>>({
|
||
chapter1: true, // 第一章默认展开
|
||
chapter2: true, // 第二章默认展开
|
||
chapter3: false, // 第三章默认收起
|
||
chapter4: false, // 第四章默认收起
|
||
chapter5: false, // 第五章默认收起
|
||
chapter6: false // 第六章默认收起
|
||
})
|
||
|
||
// 排序状态管理
|
||
const sortOrder = ref<'asc' | 'desc'>('asc') // 'asc' 正序, 'desc' 倒序
|
||
|
||
// 切换章节展开/收起状态
|
||
const toggleChapter = (chapterId: string) => {
|
||
chapterStates.value[chapterId] = !chapterStates.value[chapterId]
|
||
}
|
||
|
||
// 切换排序顺序
|
||
const toggleSortOrder = () => {
|
||
sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
|
||
console.log('切换排序顺序:', sortOrder.value === 'asc' ? '正序' : '倒序')
|
||
}
|
||
|
||
// 排序后的章节数据
|
||
const sortedChapters = computed(() => {
|
||
const chapters = [...chaptersData.value]
|
||
if (sortOrder.value === 'desc') {
|
||
return chapters.sort((a, b) => b.order - a.order)
|
||
}
|
||
return chapters.sort((a, b) => a.order - b.order)
|
||
})
|
||
|
||
onMounted(() => {
|
||
// 页面加载时的初始化逻辑
|
||
console.log('课程详情页加载完成，课程ID:', courseId.value)
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 基础样式 */
|
||
.course-detail-page {
|
||
min-height: 100vh;
|
||
background: #f5f7fa;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1600px; /* 限制最大宽度，避免在超宽屏幕上过度拉伸 */
|
||
margin: 0 auto;
|
||
padding: 0;
|
||
/* 左侧对齐导航栏的"首页"位置 */
|
||
/* 计算：导航栏左边距30px + Logo宽度72px + Logo右边距40px = 142px */
|
||
padding-left: 142px;
|
||
/* 右边距与左边距保持一致，实现对称布局 */
|
||
padding-right: 142px;
|
||
}
|
||
|
||
/* 面包屑导航 */
|
||
.breadcrumb {
|
||
background: white;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
}
|
||
|
||
.breadcrumb-text {
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 主要内容区域 */
|
||
.main-content {
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.content-layout {
|
||
display: flex;
|
||
gap: 40px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
/* 左侧主要内容 */
|
||
.main-column {
|
||
flex: 1;
|
||
min-width: 0; /* 防止flex子项溢出 */
|
||
}
|
||
|
||
/* 视频播放器区域 - 未报名状态 */
|
||
.video-player-section {
|
||
background: white;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.video-player.unregistered {
|
||
position: relative;
|
||
}
|
||
|
||
.video-background {
|
||
width: 100%;
|
||
height: 400px;
|
||
background: linear-gradient(135deg, #2c3e50 0%, #34495e 25%, #2c3e50 50%, #1a252f 75%, #2c3e50 100%);
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.video-background::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background:
|
||
radial-gradient(circle at 20% 80%, rgba(52, 152, 219, 0.3) 0%, transparent 50%),
|
||
radial-gradient(circle at 80% 20%, rgba(46, 204, 113, 0.2) 0%, transparent 50%),
|
||
radial-gradient(circle at 40% 40%, rgba(155, 89, 182, 0.2) 0%, transparent 50%);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.video-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
text-align: center;
|
||
color: white;
|
||
max-width: 600px;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.course-main-title {
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
margin-bottom: 16px;
|
||
line-height: 1.4;
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.course-meta-info {
|
||
margin-bottom: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
font-size: 14px;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.meta-item {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.meta-separator {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.enroll-button {
|
||
background: #3498db;
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 32px;
|
||
border-radius: 6px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
|
||
}
|
||
|
||
.enroll-button:hover {
|
||
background: #2980b9;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
|
||
}
|
||
|
||
/* 底部工具栏 */
|
||
.video-toolbar {
|
||
background: #f8f9fa;
|
||
padding: 12px 16px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-top: 1px solid #e9ecef;
|
||
}
|
||
|
||
.toolbar-left,
|
||
.toolbar-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.toolbar-btn {
|
||
background: none;
|
||
border: none;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 6px 12px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.toolbar-btn:hover {
|
||
background: #e9ecef;
|
||
color: #333;
|
||
}
|
||
|
||
.toolbar-btn.like-btn.liked {
|
||
color: #ff4757;
|
||
}
|
||
|
||
.toolbar-btn.icon-btn {
|
||
padding: 6px;
|
||
gap: 0;
|
||
}
|
||
|
||
.toolbar-text {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 评论输入区域 */
|
||
.comment-input-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.comment-input {
|
||
flex: 1;
|
||
min-width: 200px;
|
||
padding: 6px 12px;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
font-size: 13px;
|
||
color: #666;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.comment-input:focus {
|
||
outline: none;
|
||
border-color: #40a9ff;
|
||
background: white;
|
||
}
|
||
|
||
.comment-input:disabled {
|
||
background: #f5f5f5;
|
||
color: #bbb;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.comment-input::placeholder {
|
||
color: #bbb;
|
||
}
|
||
|
||
.send-btn {
|
||
background: #d9d9d9;
|
||
color: #666;
|
||
border: none;
|
||
padding: 6px 16px;
|
||
border-radius: 4px;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.send-btn:not(:disabled):hover {
|
||
background: #1890ff;
|
||
color: white;
|
||
}
|
||
|
||
.send-btn:disabled {
|
||
background: #d9d9d9;
|
||
color: #bbb;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* 课程信息区域 */
|
||
.course-info-section {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* 课程标题和分类 */
|
||
.course-header {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.course-title {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.course-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.course-category {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.category-tag {
|
||
color: #1890ff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.btn-notes {
|
||
background: none;
|
||
border: 1px solid #d9d9d9;
|
||
color: #666;
|
||
padding: 6px 12px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn-notes:hover {
|
||
border-color: #1890ff;
|
||
color: #1890ff;
|
||
}
|
||
|
||
/* 课程描述 */
|
||
.course-description {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.course-description p {
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: #666;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 讲师信息 */
|
||
.instructors-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.instructors-list {
|
||
display: flex;
|
||
gap: 20px;
|
||
}
|
||
|
||
.instructor-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.instructor-avatar {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.instructor-avatar img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.instructor-name {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.instructor-title {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
/* 课程标签页 */
|
||
.course-tabs {
|
||
border-top: 1px solid #f0f0f0;
|
||
padding-top: 16px;
|
||
}
|
||
|
||
.tab-nav {
|
||
display: flex;
|
||
gap: 24px;
|
||
}
|
||
|
||
.tab-btn {
|
||
background: none;
|
||
border: none;
|
||
font-size: 14px;
|
||
color: #666;
|
||
cursor: pointer;
|
||
padding: 8px 0;
|
||
position: relative;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.tab-btn.active {
|
||
color: #1890ff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.tab-btn.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: #1890ff;
|
||
}
|
||
|
||
.tab-btn:hover {
|
||
color: #1890ff;
|
||
}
|
||
|
||
/* 标签页内容区域 */
|
||
.tab-content {
|
||
margin-top: 16px;
|
||
background: #f5f5f5;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
min-height: auto;
|
||
}
|
||
|
||
.tab-pane {
|
||
display: block;
|
||
}
|
||
|
||
/* 课程介绍内容 */
|
||
.intro-content h4 {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin: 0 0 12px 0;
|
||
}
|
||
|
||
.intro-content p {
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: #666;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.intro-content ul {
|
||
margin: 0 0 16px 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.intro-content li {
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: #666;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* 未报名状态的空内容区域 */
|
||
.intro-empty {
|
||
height: 530px;
|
||
/* 保持灰色背景，但内容为空，设置530px高度 */
|
||
}
|
||
|
||
/* 评论内容 */
|
||
.comments-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.comment-stats {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 16px;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
}
|
||
|
||
.total-comments {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.comment-filters {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
.filter-btn {
|
||
background: none;
|
||
border: none;
|
||
font-size: 14px;
|
||
color: #666;
|
||
cursor: pointer;
|
||
padding: 6px 12px;
|
||
border-radius: 4px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.filter-btn.active {
|
||
background: #1890ff;
|
||
color: white;
|
||
}
|
||
|
||
.filter-btn:hover {
|
||
background: #e6f7ff;
|
||
color: #1890ff;
|
||
}
|
||
|
||
.filter-btn.active:hover {
|
||
background: #1890ff;
|
||
color: white;
|
||
}
|
||
|
||
/* 评论列表 */
|
||
.comment-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.comment-item {
|
||
display: flex;
|
||
gap: 12px;
|
||
padding: 16px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.comment-avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.comment-avatar img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.comment-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.comment-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.comment-username {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
|
||
.comment-time {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.comment-text {
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: #666;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.comment-actions {
|
||
display: flex;
|
||
gap: 16px;
|
||
}
|
||
|
||
.action-btn {
|
||
background: none;
|
||
border: none;
|
||
font-size: 12px;
|
||
color: #999;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.action-btn:hover {
|
||
color: #1890ff;
|
||
}
|
||
|
||
.icon-like::before {
|
||
content: '👍';
|
||
}
|
||
|
||
/* 加载更多 */
|
||
.load-more {
|
||
text-align: center;
|
||
padding-top: 16px;
|
||
}
|
||
|
||
.btn-load-more {
|
||
background: none;
|
||
border: 1px solid #d9d9d9;
|
||
color: #666;
|
||
padding: 8px 24px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn-load-more:hover {
|
||
border-color: #1890ff;
|
||
color: #1890ff;
|
||
}
|
||
|
||
/* 右侧边栏 */
|
||
.sidebar {
|
||
width: 360px;
|
||
flex-shrink: 0;
|
||
position: sticky;
|
||
top: 20px;
|
||
}
|
||
|
||
/* 报名学习按钮 */
|
||
.enroll-section {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.btn-enroll {
|
||
width: 100%;
|
||
background: #e6f7ff;
|
||
color: #1890ff;
|
||
border: 1px solid #91d5ff;
|
||
padding: 18px 0;
|
||
border-radius: 8px;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
box-shadow: 0 2px 4px rgba(24, 144, 255, 0.1);
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.btn-enroll:hover {
|
||
background: #bae7ff;
|
||
border-color: #69c0ff;
|
||
}
|
||
|
||
/* 课程章节 */
|
||
.course-catalog {
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||
overflow: hidden;
|
||
border: 1px solid #e8e8e8;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.catalog-header {
|
||
padding: 16px 20px;
|
||
background: #f8f9fa;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.catalog-header h3 {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
|
||
.catalog-sort {
|
||
display: flex;
|
||
gap: 8px;
|
||
font-size: 15px;
|
||
color: #666;
|
||
cursor: pointer;
|
||
transition: color 0.3s;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.catalog-sort:hover {
|
||
color: #1890ff;
|
||
}
|
||
|
||
.catalog-content {
|
||
max-height: 500px;
|
||
overflow-y: auto;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
/* 章节列表 */
|
||
.chapter-list {
|
||
padding: 0;
|
||
}
|
||
|
||
.chapter-item {
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.chapter-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.chapter-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 24px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
background: #fafafa;
|
||
}
|
||
|
||
.chapter-header:hover {
|
||
background: #ebebeb;
|
||
}
|
||
|
||
.chapter-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
|
||
.chapter-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.toggle-icon {
|
||
transition: transform 0.3s;
|
||
color: #666;
|
||
}
|
||
|
||
.toggle-icon.expanded {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
/* 课时列表 */
|
||
.lesson-list {
|
||
background: white;
|
||
}
|
||
|
||
.lesson-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 24px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
font-size: 15px;
|
||
min-height: 56px;
|
||
}
|
||
|
||
.lesson-item:hover {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.lesson-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.lesson-left {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
gap: 12px;
|
||
}
|
||
|
||
.lesson-type {
|
||
background: #f8f9fa;
|
||
color: #666;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
flex-shrink: 0;
|
||
border: 1px solid #d9d9d9;
|
||
min-width: 40px;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.lesson-type.video {
|
||
background: #e6f7ff;
|
||
color: #1890ff;
|
||
border-color: #91d5ff;
|
||
}
|
||
|
||
.lesson-type.document {
|
||
background: #f6ffed;
|
||
color: #52c41a;
|
||
border-color: #b7eb8f;
|
||
}
|
||
|
||
.lesson-title {
|
||
flex: 1;
|
||
color: #333;
|
||
font-size: 14px;
|
||
line-height: 1.4;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.lesson-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.lesson-duration {
|
||
font-size: 13px;
|
||
color: #999;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
min-width: 50px;
|
||
text-align: right;
|
||
letter-spacing: 0.3px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.lesson-play-btn,
|
||
.lesson-download-btn {
|
||
background: none;
|
||
border: 1px solid #d9d9d9;
|
||
color: #666;
|
||
cursor: pointer;
|
||
padding: 6px;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s;
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
.lesson-play-btn:hover,
|
||
.lesson-download-btn:hover {
|
||
color: #1890ff;
|
||
border-color: #1890ff;
|
||
background: #f6f8ff;
|
||
}
|
||
|
||
/* 推荐课程 */
|
||
.recommended-courses {
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||
overflow: hidden;
|
||
border: 1px solid #e8e8e8;
|
||
}
|
||
|
||
.recommend-header {
|
||
padding: 16px 20px;
|
||
background: #f8f9fa;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
}
|
||
|
||
.recommend-header h3 {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
|
||
.recommend-list {
|
||
background: white;
|
||
}
|
||
|
||
.recommend-item {
|
||
padding: 16px 20px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.recommend-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.recommend-image {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100px;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.recommend-image img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.recommend-badge {
|
||
position: absolute;
|
||
top: 8px;
|
||
left: 8px;
|
||
background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
|
||
color: white;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.recommend-content {
|
||
padding: 0;
|
||
}
|
||
|
||
.recommend-title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin: 0 0 6px 0;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.recommend-tags {
|
||
display: flex;
|
||
gap: 4px;
|
||
margin-bottom: 6px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.tag {
|
||
background: #fff7e6;
|
||
color: #fa8c16;
|
||
padding: 2px 6px;
|
||
border-radius: 2px;
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
border: 1px solid #ffd591;
|
||
}
|
||
|
||
.recommend-desc {
|
||
font-size: 12px;
|
||
color: #666;
|
||
line-height: 1.4;
|
||
margin: 0 0 10px 0;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.recommend-btn {
|
||
background: #1890ff;
|
||
color: white;
|
||
border: none;
|
||
padding: 6px 12px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.recommend-btn:hover {
|
||
background: #40a9ff;
|
||
}
|
||
|
||
.recommend-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.recommend-price {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
/* 推荐课程占位图片 */
|
||
.recommend-placeholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 8px;
|
||
position: relative;
|
||
}
|
||
|
||
.computer-bg {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.english-bg {
|
||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||
}
|
||
|
||
.placeholder-text {
|
||
color: white;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
|
||
|
||
/* 响应式设计 */
|
||
/* 大屏幕优化 */
|
||
@media (min-width: 1200px) {
|
||
.container {
|
||
max-width: 1800px; /* 大屏幕下适当增加最大宽度 */
|
||
/* 导航栏padding: 0 32px，所以左边距 = 32px + 72px + 40px = 144px */
|
||
padding-left: 144px;
|
||
/* 右边距与左边距保持一致 */
|
||
padding-right: 144px;
|
||
}
|
||
|
||
.sidebar {
|
||
width: 400px;
|
||
}
|
||
|
||
.content-layout {
|
||
gap: 60px;
|
||
}
|
||
}
|
||
|
||
/* 中等屏幕优化 */
|
||
@media (max-width: 1200px) {
|
||
.container {
|
||
/* 保持与导航栏对齐 */
|
||
padding-left: 142px;
|
||
/* 右边距与左边距保持一致 */
|
||
padding-right: 142px;
|
||
}
|
||
|
||
.sidebar {
|
||
width: 320px;
|
||
}
|
||
|
||
.content-layout {
|
||
gap: 30px;
|
||
}
|
||
}
|
||
|
||
/* 平板优化 */
|
||
@media (max-width: 992px) {
|
||
.container {
|
||
/* 导航栏padding: 0 20px，所以左边距 = 20px + 72px + 40px = 132px */
|
||
padding-left: 132px;
|
||
/* 右边距与左边距保持一致 */
|
||
padding-right: 132px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
/* 小屏幕下导航栏padding: 0 16px，但导航菜单隐藏，所以使用常规内边距 */
|
||
padding: 0 16px;
|
||
}
|
||
|
||
.content-layout {
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
.sidebar {
|
||
width: 100%;
|
||
position: static;
|
||
}
|
||
|
||
.main-column {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.video-background {
|
||
height: 300px;
|
||
}
|
||
|
||
.course-main-title {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.toolbar-left,
|
||
.toolbar-right {
|
||
gap: 12px;
|
||
}
|
||
|
||
.toolbar-btn {
|
||
padding: 4px 8px;
|
||
}
|
||
|
||
.comment-input-container {
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.comment-input {
|
||
min-width: 150px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 移动端右侧边栏字体调整 */
|
||
.btn-enroll {
|
||
font-size: 16px;
|
||
padding: 14px 0;
|
||
}
|
||
|
||
.catalog-header h3 {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.chapter-title {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.lesson-title {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.lesson-duration {
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 移动端推荐课程调整 */
|
||
.recommend-header h3 {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.recommend-image {
|
||
height: 80px;
|
||
}
|
||
|
||
.recommend-title {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.recommend-desc {
|
||
font-size: 11px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.video-background {
|
||
height: 250px;
|
||
}
|
||
|
||
.course-main-title {
|
||
font-size: 18px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.course-meta-info {
|
||
font-size: 12px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.enroll-button {
|
||
padding: 10px 24px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 小屏幕右侧边栏字体进一步调整 */
|
||
.btn-enroll {
|
||
font-size: 15px;
|
||
padding: 12px 0;
|
||
}
|
||
|
||
.catalog-header h3 {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.chapter-title {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.lesson-title {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.lesson-duration {
|
||
font-size: 11px;
|
||
}
|
||
|
||
.lesson-play-btn,
|
||
.lesson-download-btn {
|
||
width: 24px;
|
||
height: 24px;
|
||
padding: 4px;
|
||
}
|
||
|
||
/* 小屏幕推荐课程进一步调整 */
|
||
.recommend-header h3 {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.recommend-image {
|
||
height: 70px;
|
||
}
|
||
|
||
.recommend-title {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.recommend-desc {
|
||
font-size: 10px;
|
||
}
|
||
|
||
.recommend-btn {
|
||
padding: 4px 8px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.video-toolbar {
|
||
padding: 8px 12px;
|
||
}
|
||
|
||
.toolbar-left,
|
||
.toolbar-right {
|
||
gap: 8px;
|
||
}
|
||
|
||
.toolbar-text {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.comment-input-container {
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.comment-input {
|
||
min-width: 120px;
|
||
font-size: 11px;
|
||
padding: 4px 8px;
|
||
}
|
||
|
||
.send-btn {
|
||
padding: 4px 12px;
|
||
font-size: 11px;
|
||
}
|
||
}
|
||
|
||
|
||
</style>
|