OL-LearnPlatform/src/views/CourseDetail.vue

1844 lines
45 KiB
Vue
Raw Normal View History

2025-07-22 14:39:45 +08:00
<template>
<div class="course-detail-page">
<!-- 面包屑导航 -->
<div class="breadcrumb">
<div class="container">
<span class="breadcrumb-text">首页 > 课程库 > 暑期名师领学提高班级教学质量高效冲分指南</span>
2025-07-22 14:39:45 +08:00
</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>
2025-07-22 14:39:45 +08:00
<!-- 报名按钮 -->
<button class="enroll-button" @click="enrollCourse">
立即报名
</button>
</div>
2025-07-22 14:39:45 +08:00
</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>
2025-07-22 14:39:45 +08:00
</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>
2025-07-22 14:39:45 +08:00
<!-- 讲师信息 -->
<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="汪波" />
2025-07-22 14:39:45 +08:00
</div>
<div class="instructor-name">汪波</div>
<div class="instructor-title">讲师</div>
2025-07-22 14:39:45 +08:00
</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">
<!-- 空内容区域保持灰色背景 -->
2025-07-22 14:39:45 +08:00
</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>
2025-07-22 14:39:45 +08:00
</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>
2025-07-22 14:39:45 +08:00
</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>
2025-07-22 14:39:45 +08:00
</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>
2025-07-22 14:39:45 +08:00
</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>
2025-07-22 14:39:45 +08:00
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
2025-07-22 14:39:45 +08:00
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)
// 这里可以添加切换视频源的逻辑
}
2025-07-22 14:39:45 +08:00
2025-07-22 16:23:15 +08:00
2025-07-22 14:39:45 +08:00
// 课程章节数据
const chaptersData = ref([
2025-07-22 14:39:45 +08:00
{
id: 'chapter1',
order: 1,
2025-07-22 14:39:45 +08:00
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' }
2025-07-22 14:39:45 +08:00
]
},
{
id: 'chapter2',
order: 2,
2025-07-22 14:39:45 +08:00
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: '练习题目' }
2025-07-22 14:39:45 +08:00
]
},
{
id: 'chapter3',
order: 3,
2025-07-22 14:39:45 +08:00
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: '控制结构综合练习' }
]
2025-07-22 14:39:45 +08:00
},
{
id: 'chapter4',
order: 4,
2025-07-22 14:39:45 +08:00
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: '模型训练与微调资料' }
]
2025-07-22 14:39:45 +08:00
},
{
id: 'chapter5',
order: 5,
2025-07-22 14:39:45 +08:00
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' }
]
2025-07-22 14:39:45 +08:00
}
])
// 课件下载
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([
2025-07-22 14:39:45 +08:00
{
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
2025-07-22 14:39:45 +08:00
},
{
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
2025-07-22 14:39:45 +08:00
},
{
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'
2025-07-22 14:39:45 +08:00
}
])
// 更多课程(保留原有数据以防其他地方使用)
2025-07-22 14:39:45 +08:00
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' 倒序
2025-07-22 14:39:45 +08:00
// 切换章节展开/收起状态
const toggleChapter = (chapterId: string) => {
chapterStates.value[chapterId] = !chapterStates.value[chapterId]
2025-07-22 14:39:45 +08:00
}
// 切换排序顺序
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)
})
2025-07-22 14:39:45 +08:00
onMounted(() => {
// 页面加载时的初始化逻辑
console.log('课程详情页加载完成课程ID:', courseId.value)
})
</script>
<style scoped>
/* 基础样式 */
.course-detail-page {
min-height: 100vh;
background: #f5f7fa;
2025-07-22 14:39:45 +08:00
}
.container {
max-width: 1600px; /* 限制最大宽度,避免在超宽屏幕上过度拉伸 */
2025-07-22 14:39:45 +08:00
margin: 0 auto;
padding: 0;
/* 左侧对齐导航栏的"首页"位置 */
/* 计算导航栏左边距30px + Logo宽度72px + Logo右边距40px = 142px */
padding-left: 142px;
/* 右边距与左边距保持一致,实现对称布局 */
padding-right: 142px;
2025-07-22 14:39:45 +08:00
}
/* 面包屑导航 */
.breadcrumb {
background: white;
2025-07-22 14:39:45 +08:00
padding: 12px 0;
border-bottom: 1px solid #e8e8e8;
2025-07-22 14:39:45 +08:00
}
.breadcrumb-text {
color: #666;
font-size: 14px;
}
/* 主要内容区域 */
.main-content {
padding: 20px 0;
2025-07-22 14:39:45 +08:00
}
.content-layout {
display: flex;
2025-07-22 14:39:45 +08:00
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;
2025-07-22 14:39:45 +08:00
}
.video-player.unregistered {
2025-07-22 14:39:45 +08:00
position: relative;
}
.video-background {
2025-07-22 14:39:45 +08:00
width: 100%;
height: 400px;
background: linear-gradient(135deg, #2c3e50 0%, #34495e 25%, #2c3e50 50%, #1a252f 75%, #2c3e50 100%);
2025-07-22 14:39:45 +08:00
position: relative;
display: flex;
align-items: center;
justify-content: center;
2025-07-22 14:39:45 +08:00
overflow: hidden;
}
.video-background::before {
content: '';
2025-07-22 14:39:45 +08:00
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;
2025-07-22 14:39:45 +08:00
}
.video-content {
2025-07-22 14:39:45 +08:00
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;
2025-07-22 14:39:45 +08:00
display: flex;
align-items: center;
justify-content: center;
2025-07-22 14:39:45 +08:00
gap: 8px;
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
}
.meta-item {
font-weight: 500;
2025-07-22 14:39:45 +08:00
}
.meta-separator {
opacity: 0.6;
2025-07-22 14:39:45 +08:00
}
.enroll-button {
background: #3498db;
2025-07-22 14:39:45 +08:00
color: white;
border: none;
padding: 12px 32px;
border-radius: 6px;
2025-07-22 14:39:45 +08:00
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
2025-07-22 14:39:45 +08:00
}
.enroll-button:hover {
background: #2980b9;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
}
2025-07-22 14:39:45 +08:00
/* 底部工具栏 */
.video-toolbar {
background: #f8f9fa;
padding: 12px 16px;
2025-07-22 14:39:45 +08:00
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #e9ecef;
2025-07-22 14:39:45 +08:00
}
.toolbar-left,
.toolbar-right {
2025-07-22 14:39:45 +08:00
display: flex;
align-items: center;
gap: 16px;
2025-07-22 14:39:45 +08:00
}
.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;
2025-07-22 14:39:45 +08:00
}
.toolbar-btn:hover {
background: #e9ecef;
2025-07-22 14:39:45 +08:00
color: #333;
}
.toolbar-btn.like-btn.liked {
color: #ff4757;
2025-07-22 14:39:45 +08:00
}
.toolbar-btn.icon-btn {
padding: 6px;
gap: 0;
2025-07-22 14:39:45 +08:00
}
.toolbar-text {
font-size: 13px;
font-weight: 500;
2025-07-22 14:39:45 +08:00
}
/* 评论输入区域 */
.comment-input-container {
2025-07-22 14:39:45 +08:00
display: flex;
align-items: center;
gap: 8px;
margin-left: 8px;
2025-07-22 14:39:45 +08:00
}
.comment-input {
flex: 1;
min-width: 200px;
padding: 6px 12px;
border: 1px solid #d9d9d9;
border-radius: 4px;
2025-07-22 14:39:45 +08:00
font-size: 13px;
color: #666;
background: #f5f5f5;
2025-07-22 14:39:45 +08:00
}
.comment-input:focus {
outline: none;
border-color: #40a9ff;
background: white;
2025-07-22 14:39:45 +08:00
}
.comment-input:disabled {
background: #f5f5f5;
color: #bbb;
cursor: not-allowed;
2025-07-22 14:39:45 +08:00
}
.comment-input::placeholder {
color: #bbb;
}
.send-btn {
background: #d9d9d9;
color: #666;
border: none;
padding: 6px 16px;
2025-07-22 14:39:45 +08:00
border-radius: 4px;
font-size: 13px;
2025-07-22 14:39:45 +08:00
cursor: pointer;
transition: all 0.3s ease;
}
.send-btn:not(:disabled):hover {
background: #1890ff;
2025-07-22 14:39:45 +08:00
color: white;
}
.send-btn:disabled {
background: #d9d9d9;
color: #bbb;
cursor: not-allowed;
2025-07-22 14:39:45 +08:00
}
/* 课程信息区域 */
.course-info-section {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin-bottom: 20px;
2025-07-22 14:39:45 +08:00
}
/* 课程标题和分类 */
.course-header {
margin-bottom: 16px;
2025-07-22 14:39:45 +08:00
}
.course-title {
font-size: 24px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
line-height: 1.4;
2025-07-22 14:39:45 +08:00
}
.course-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
2025-07-22 14:39:45 +08:00
}
.course-category {
font-size: 14px;
color: #666;
}
2025-07-22 14:39:45 +08:00
.category-tag {
color: #1890ff;
font-weight: 500;
}
2025-07-22 14:39:45 +08:00
.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;
2025-07-22 14:39:45 +08:00
}
.btn-notes:hover {
border-color: #1890ff;
color: #1890ff;
2025-07-22 14:39:45 +08:00
}
/* 课程描述 */
.course-description {
2025-07-22 14:39:45 +08:00
margin-bottom: 20px;
}
.course-description p {
font-size: 14px;
line-height: 1.6;
2025-07-22 14:39:45 +08:00
color: #666;
margin: 0;
2025-07-22 14:39:45 +08:00
}
/* 讲师信息 */
.instructors-section {
margin-bottom: 20px;
2025-07-22 14:39:45 +08:00
}
.section-title {
font-size: 16px;
font-weight: 600;
2025-07-22 14:39:45 +08:00
color: #333;
margin-bottom: 12px;
2025-07-22 14:39:45 +08:00
}
.instructors-list {
display: flex;
gap: 20px;
2025-07-22 14:39:45 +08:00
}
.instructor-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
2025-07-22 14:39:45 +08:00
}
.instructor-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
2025-07-22 14:39:45 +08:00
overflow: hidden;
margin-bottom: 8px;
2025-07-22 14:39:45 +08:00
}
.instructor-avatar img {
2025-07-22 14:39:45 +08:00
width: 100%;
height: 100%;
object-fit: cover;
2025-07-22 14:39:45 +08:00
}
.instructor-name {
font-size: 14px;
font-weight: 500;
color: #333;
margin-bottom: 4px;
2025-07-22 14:39:45 +08:00
}
.instructor-title {
font-size: 12px;
color: #999;
2025-07-22 14:39:45 +08:00
}
/* 课程标签页 */
.course-tabs {
border-top: 1px solid #f0f0f0;
padding-top: 16px;
2025-07-22 14:39:45 +08:00
}
.tab-nav {
2025-07-22 14:39:45 +08:00
display: flex;
gap: 24px;
2025-07-22 14:39:45 +08:00
}
.tab-btn {
background: none;
border: none;
font-size: 14px;
color: #666;
cursor: pointer;
padding: 8px 0;
position: relative;
transition: color 0.3s;
2025-07-22 14:39:45 +08:00
}
.tab-btn.active {
color: #1890ff;
2025-07-22 14:39:45 +08:00
font-weight: 500;
}
.tab-btn.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: #1890ff;
2025-07-22 14:39:45 +08:00
}
.tab-btn:hover {
color: #1890ff;
2025-07-22 14:39:45 +08:00
}
/* 标签页内容区域 */
.tab-content {
margin-top: 16px;
background: #f5f5f5;
border-radius: 8px;
padding: 20px;
min-height: auto;
2025-07-22 14:39:45 +08:00
}
.tab-pane {
display: block;
2025-07-22 14:39:45 +08:00
}
/* 课程介绍内容 */
.intro-content h4 {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0 0 12px 0;
2025-07-22 14:39:45 +08:00
}
.intro-content p {
2025-07-22 14:39:45 +08:00
font-size: 14px;
line-height: 1.6;
color: #666;
margin-bottom: 16px;
2025-07-22 14:39:45 +08:00
}
.intro-content ul {
margin: 0 0 16px 0;
padding-left: 20px;
2025-07-22 14:39:45 +08:00
}
.intro-content li {
2025-07-22 14:39:45 +08:00
font-size: 14px;
line-height: 1.6;
color: #666;
margin-bottom: 8px;
2025-07-22 14:39:45 +08:00
}
/* 未报名状态的空内容区域 */
.intro-empty {
height: 530px;
/* 保持灰色背景但内容为空设置530px高度 */
2025-07-22 14:39:45 +08:00
}
/* 评论内容 */
.comments-content {
2025-07-22 14:39:45 +08:00
display: flex;
flex-direction: column;
gap: 16px;
2025-07-22 14:39:45 +08:00
}
.comment-stats {
2025-07-22 14:39:45 +08:00
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16px;
border-bottom: 1px solid #e8e8e8;
2025-07-22 14:39:45 +08:00
}
.total-comments {
font-size: 14px;
color: #666;
2025-07-22 14:39:45 +08:00
}
.comment-filters {
2025-07-22 14:39:45 +08:00
display: flex;
gap: 12px;
2025-07-22 14:39:45 +08:00
}
.filter-btn {
background: none;
border: none;
2025-07-22 14:39:45 +08:00
font-size: 14px;
color: #666;
cursor: pointer;
padding: 6px 12px;
border-radius: 4px;
transition: all 0.3s;
2025-07-22 14:39:45 +08:00
}
.filter-btn.active {
background: #1890ff;
2025-07-22 14:39:45 +08:00
color: white;
}
.filter-btn:hover {
background: #e6f7ff;
color: #1890ff;
2025-07-22 14:39:45 +08:00
}
.filter-btn.active:hover {
background: #1890ff;
color: white;
2025-07-22 14:39:45 +08:00
}
/* 评论列表 */
2025-07-22 14:39:45 +08:00
.comment-list {
display: flex;
flex-direction: column;
gap: 16px;
2025-07-22 14:39:45 +08:00
}
.comment-item {
display: flex;
gap: 12px;
padding: 16px;
background: white;
2025-07-22 14:39:45 +08:00
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
2025-07-22 14:39:45 +08:00
}
.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;
2025-07-22 14:39:45 +08:00
align-items: center;
margin-bottom: 8px;
}
.comment-username {
font-size: 14px;
2025-07-22 14:39:45 +08:00
font-weight: 500;
color: #333;
}
.comment-time {
font-size: 12px;
color: #999;
2025-07-22 14:39:45 +08:00
}
.comment-text {
font-size: 14px;
line-height: 1.6;
color: #666;
margin-bottom: 12px;
2025-07-22 14:39:45 +08:00
}
.comment-actions {
2025-07-22 14:39:45 +08:00
display: flex;
gap: 16px;
2025-07-22 14:39:45 +08:00
}
.action-btn {
background: none;
border: none;
font-size: 12px;
color: #999;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
transition: color 0.3s;
2025-07-22 14:39:45 +08:00
}
.action-btn:hover {
color: #1890ff;
2025-07-22 14:39:45 +08:00
}
.icon-like::before {
content: '👍';
2025-07-22 14:39:45 +08:00
}
/* 加载更多 */
.load-more {
text-align: center;
padding-top: 16px;
2025-07-22 14:39:45 +08:00
}
.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;
2025-07-22 14:39:45 +08:00
}
.btn-load-more:hover {
border-color: #1890ff;
color: #1890ff;
2025-07-22 14:39:45 +08:00
}
/* 右侧边栏 */
.sidebar {
width: 360px;
flex-shrink: 0;
position: sticky;
top: 20px;
2025-07-22 14:39:45 +08:00
}
/* 报名学习按钮 */
.enroll-section {
margin-bottom: 24px;
2025-07-22 14:39:45 +08:00
}
.btn-enroll {
width: 100%;
background: #e6f7ff;
color: #1890ff;
border: 1px solid #91d5ff;
padding: 18px 0;
border-radius: 8px;
font-size: 18px;
2025-07-22 14:39:45 +08:00
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 2px 4px rgba(24, 144, 255, 0.1);
letter-spacing: 0.5px;
2025-07-22 14:39:45 +08:00
}
.btn-enroll:hover {
background: #bae7ff;
border-color: #69c0ff;
2025-07-22 14:39:45 +08:00
}
/* 课程章节 */
.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;
2025-07-22 14:39:45 +08:00
}
.catalog-header {
padding: 16px 20px;
background: #f8f9fa;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
2025-07-22 14:39:45 +08:00
}
.catalog-header h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #333;
letter-spacing: 0.3px;
2025-07-22 14:39:45 +08:00
}
.catalog-sort {
display: flex;
gap: 8px;
font-size: 15px;
color: #666;
cursor: pointer;
transition: color 0.3s;
2025-07-22 14:39:45 +08:00
font-weight: 500;
}
.catalog-sort:hover {
color: #1890ff;
}
2025-07-22 14:39:45 +08:00
.catalog-content {
max-height: 500px;
overflow-y: auto;
background: #f5f5f5;
2025-07-22 14:39:45 +08:00
}
/* 章节列表 */
.chapter-list {
padding: 0;
2025-07-22 14:39:45 +08:00
}
.chapter-item {
border-bottom: 1px solid #f0f0f0;
2025-07-22 14:39:45 +08:00
}
.chapter-item:last-child {
border-bottom: none;
2025-07-22 14:39:45 +08:00
}
.chapter-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
cursor: pointer;
transition: background-color 0.3s;
background: #fafafa;
2025-07-22 14:39:45 +08:00
}
.chapter-header:hover {
background: #ebebeb;
2025-07-22 14:39:45 +08:00
}
.chapter-title {
font-size: 16px;
2025-07-22 14:39:45 +08:00
font-weight: 600;
color: #333;
letter-spacing: 0.2px;
2025-07-22 14:39:45 +08:00
}
.chapter-toggle {
2025-07-22 14:39:45 +08:00
display: flex;
align-items: center;
2025-07-22 14:39:45 +08:00
}
.toggle-icon {
transition: transform 0.3s;
color: #666;
2025-07-22 14:39:45 +08:00
}
.toggle-icon.expanded {
transform: rotate(0deg);
2025-07-22 14:39:45 +08:00
}
/* 课时列表 */
.lesson-list {
background: white;
2025-07-22 14:39:45 +08:00
}
.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;
2025-07-22 14:39:45 +08:00
}
.lesson-item:hover {
background: #f8f9fa;
2025-07-22 14:39:45 +08:00
}
.lesson-item:last-child {
border-bottom: none;
2025-07-22 14:39:45 +08:00
}
.lesson-left {
2025-07-22 14:39:45 +08:00
display: flex;
align-items: center;
flex: 1;
2025-07-22 14:39:45 +08:00
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;
2025-07-22 14:39:45 +08:00
}
.lesson-type.video {
background: #e6f7ff;
color: #1890ff;
border-color: #91d5ff;
2025-07-22 14:39:45 +08:00
}
.lesson-type.document {
background: #f6ffed;
color: #52c41a;
border-color: #b7eb8f;
2025-07-22 14:39:45 +08:00
}
.lesson-title {
flex: 1;
color: #333;
2025-07-22 14:39:45 +08:00
font-size: 14px;
line-height: 1.4;
2025-07-22 14:39:45 +08:00
font-weight: 500;
}
.lesson-right {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
2025-07-22 14:39:45 +08:00
}
.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;
2025-07-22 14:39:45 +08:00
cursor: pointer;
padding: 6px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
2025-07-22 14:39:45 +08:00
transition: all 0.3s;
width: 28px;
height: 28px;
2025-07-22 14:39:45 +08:00
}
.lesson-play-btn:hover,
.lesson-download-btn:hover {
color: #1890ff;
border-color: #1890ff;
background: #f6f8ff;
2025-07-22 14:39:45 +08:00
}
/* 推荐课程 */
.recommended-courses {
2025-07-22 14:39:45 +08:00
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
overflow: hidden;
border: 1px solid #e8e8e8;
2025-07-22 14:39:45 +08:00
}
.recommend-header {
padding: 16px 20px;
background: #f8f9fa;
border-bottom: 1px solid #e8e8e8;
}
.recommend-header h3 {
margin: 0;
font-size: 16px;
2025-07-22 14:39:45 +08:00
font-weight: 600;
color: #333;
letter-spacing: 0.3px;
2025-07-22 14:39:45 +08:00
}
.recommend-list {
background: white;
2025-07-22 14:39:45 +08:00
}
.recommend-item {
padding: 16px 20px;
border-bottom: 1px solid #f0f0f0;
2025-07-22 14:39:45 +08:00
}
.recommend-item:last-child {
border-bottom: none;
2025-07-22 14:39:45 +08:00
}
.recommend-image {
position: relative;
width: 100%;
height: 100px;
border-radius: 6px;
2025-07-22 14:39:45 +08:00
overflow: hidden;
margin-bottom: 10px;
2025-07-22 14:39:45 +08:00
}
.recommend-image img {
2025-07-22 14:39:45 +08:00
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 {
2025-07-22 14:39:45 +08:00
display: flex;
gap: 4px;
margin-bottom: 6px;
flex-wrap: wrap;
2025-07-22 14:39:45 +08:00
}
.tag {
background: #fff7e6;
color: #fa8c16;
padding: 2px 6px;
border-radius: 2px;
font-size: 10px;
2025-07-22 14:39:45 +08:00
font-weight: 500;
border: 1px solid #ffd591;
2025-07-22 14:39:45 +08:00
}
.recommend-desc {
2025-07-22 14:39:45 +08:00
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;
2025-07-22 14:39:45 +08:00
}
.recommend-btn {
background: #1890ff;
2025-07-22 14:39:45 +08:00
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
2025-07-22 14:39:45 +08:00
}
.recommend-btn:hover {
background: #40a9ff;
}
.recommend-meta {
2025-07-22 14:39:45 +08:00
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
2025-07-22 14:39:45 +08:00
}
.recommend-price {
font-size: 16px;
font-weight: 600;
color: #ff4d4f;
2025-07-22 14:39:45 +08:00
}
/* 推荐课程占位图片 */
.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 {
2025-07-22 14:39:45 +08:00
color: white;
font-size: 16px;
font-weight: 600;
text-align: center;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
2025-07-22 14:39:45 +08:00
}
2025-07-22 14:39:45 +08:00
/* 响应式设计 */
/* 大屏幕优化 */
@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 {
2025-07-22 14:39:45 +08:00
gap: 30px;
}
}
/* 平板优化 */
@media (max-width: 992px) {
.container {
/* 导航栏padding: 0 20px所以左边距 = 20px + 72px + 40px = 132px */
padding-left: 132px;
/* 右边距与左边距保持一致 */
padding-right: 132px;
}
}
2025-07-22 14:39:45 +08:00
@media (max-width: 768px) {
.container {
/* 小屏幕下导航栏padding: 0 16px但导航菜单隐藏所以使用常规内边距 */
padding: 0 16px;
}
.content-layout {
flex-direction: column;
2025-07-22 14:39:45 +08:00
gap: 20px;
}
.sidebar {
2025-07-22 14:39:45 +08:00
width: 100%;
position: static;
2025-07-22 14:39:45 +08:00
}
.main-column {
max-width: 100%;
2025-07-22 14:39:45 +08:00
}
.video-background {
height: 300px;
2025-07-22 14:39:45 +08:00
}
.course-main-title {
font-size: 22px;
}
2025-07-22 14:39:45 +08:00
.toolbar-left,
.toolbar-right {
gap: 12px;
}
2025-07-22 14:39:45 +08:00
.toolbar-btn {
padding: 4px 8px;
2025-07-22 14:39:45 +08:00
}
.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;
2025-07-22 14:39:45 +08:00
}
.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;
2025-07-22 14:39:45 +08:00
}
}
@media (max-width: 480px) {
.video-background {
height: 250px;
2025-07-22 14:39:45 +08:00
}
.course-main-title {
font-size: 18px;
margin-bottom: 12px;
2025-07-22 14:39:45 +08:00
}
.course-meta-info {
font-size: 12px;
margin-bottom: 20px;
}
2025-07-22 14:39:45 +08:00
.enroll-button {
padding: 10px 24px;
font-size: 14px;
}
2025-07-22 14:39:45 +08:00
/* 小屏幕右侧边栏字体进一步调整 */
.btn-enroll {
font-size: 15px;
padding: 12px 0;
}
2025-07-22 14:39:45 +08:00
.catalog-header h3 {
font-size: 15px;
}
2025-07-22 14:39:45 +08:00
.chapter-title {
font-size: 14px;
2025-07-22 14:39:45 +08:00
}
.lesson-title {
font-size: 12px;
2025-07-22 14:39:45 +08:00
}
.lesson-duration {
font-size: 11px;
}
2025-07-22 14:39:45 +08:00
.lesson-play-btn,
.lesson-download-btn {
width: 24px;
height: 24px;
padding: 4px;
}
2025-07-22 14:39:45 +08:00
/* 小屏幕推荐课程进一步调整 */
.recommend-header h3 {
font-size: 15px;
2025-07-22 14:39:45 +08:00
}
.recommend-image {
height: 70px;
}
.recommend-title {
2025-07-22 14:39:45 +08:00
font-size: 13px;
}
.recommend-desc {
font-size: 10px;
2025-07-22 14:39:45 +08:00
}
.recommend-btn {
padding: 4px 8px;
font-size: 11px;
}
.video-toolbar {
padding: 8px 12px;
}
.toolbar-left,
.toolbar-right {
gap: 8px;
2025-07-22 14:39:45 +08:00
}
.toolbar-text {
2025-07-22 14:39:45 +08:00
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;
}
2025-07-22 14:39:45 +08:00
}
2025-07-22 14:39:45 +08:00
</style>