1442 lines
30 KiB
Vue
1442 lines
30 KiB
Vue
|
<template>
|
|||
|
|
<div class="course-detail-page">
|
|||
|
|
|
|||
|
|
<!-- 面包屑导航 -->
|
|||
|
|
<div class="breadcrumb">
|
|||
|
|
<div class="container">
|
|||
|
|
<span class="breadcrumb-text">首页 > 课程库 > 云原理课程学习平台开发</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 课程详情头部 -->
|
|||
|
|
<div class="course-detail-header">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="course-detail-content">
|
|||
|
|
<!-- 分享部分 -->
|
|||
|
|
<div class="share-section">
|
|||
|
|
<span class="share-icon"></span>
|
|||
|
|
<span class="share-text">2377</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 左侧课程封面 -->
|
|||
|
|
<div class="course-cover">
|
|||
|
|
<div class="course-image-wrapper">
|
|||
|
|
<img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="DeepSeek课程封面" class="course-cover-image" />
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 右侧课程信息 -->
|
|||
|
|
<div class="course-info-section">
|
|||
|
|
<h1 class="course-info-title">
|
|||
|
|
暑期名师领学，提高班级教学质量！高效冲分指南
|
|||
|
|
</h1>
|
|||
|
|
<p class="course-info-description">
|
|||
|
|
本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能大赛紧密结合，课程设置紧密对应实际全面共享，可为职业工作人员、在校学生、创行教师提供服务与学习支持。
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div class="course-meta-info">
|
|||
|
|
<div class="meta-row">
|
|||
|
|
<span class="meta-label">分类：</span>
|
|||
|
|
<span class="meta-value category-link">信息技术</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="course-stats">
|
|||
|
|
<div class="stats-row">
|
|||
|
|
<span class="stats-item">
|
|||
|
|
<span class="stats-text">已共享54节</span>
|
|||
|
|
</span>
|
|||
|
|
<span class="stats-item">
|
|||
|
|
<span class="stats-text">12小时43分钟</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="course-actions">
|
|||
|
|
<button class="btn-enroll">报名学习</button>
|
|||
|
|
<span class="enrollment-count">324人已报名</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 主要内容区域 -->
|
|||
|
|
<div class="main-content">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="content-layout">
|
|||
|
|
<!-- 左侧主要内容 -->
|
|||
|
|
<div class="main-column">
|
|||
|
|
<!-- 标签导航 -->
|
|||
|
|
<div class="content-tabs">
|
|||
|
|
<div class="tab-item" :class="{ active: activeTab === 'details' }" @click="activeTab = 'details'">详情</div>
|
|||
|
|
<div class="tab-item" :class="{ active: activeTab === 'chapters' }" @click="activeTab = 'chapters'">课程章节</div>
|
|||
|
|
<div class="tab-item" :class="{ active: activeTab === 'downloads' }" @click="activeTab = 'downloads'">课件下载</div>
|
|||
|
|
<div class="tab-item" :class="{ active: activeTab === 'comments' }" @click="activeTab = 'comments'">评论（1258）</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 内容区域 -->
|
|||
|
|
<div class="tab-content">
|
|||
|
|
<!-- 详情内容 -->
|
|||
|
|
<div v-if="activeTab === 'details'" class="details-content">
|
|||
|
|
<div class="course-detail-image">
|
|||
|
|
<img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="课程详情图" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 课程章节 -->
|
|||
|
|
<div v-if="activeTab === 'chapters'" class="chapters-content">
|
|||
|
|
<div class="chapter-list">
|
|||
|
|
<div class="chapter-section" v-for="chapter in courseChapters" :key="chapter.id">
|
|||
|
|
<div class="chapter-header" @click="toggleChapter(chapter.id)">
|
|||
|
|
<div class="chapter-info">
|
|||
|
|
<span class="chapter-title">{{ chapter.title }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="chapter-toggle">
|
|||
|
|
<span class="toggle-icon" :class="{ expanded: chapter.expanded }">
|
|||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|||
|
|
<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|||
|
|
</svg>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="lesson-list" v-if="chapter.expanded && chapter.lessons.length > 0">
|
|||
|
|
<div class="lesson-item" v-for="lesson in chapter.lessons" :key="lesson.id">
|
|||
|
|
<div class="lesson-number">{{ lesson.id }}</div>
|
|||
|
|
<div class="lesson-title">{{ lesson.title }}</div>
|
|||
|
|
<div class="lesson-duration">{{ lesson.duration }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 课件下载 -->
|
|||
|
|
<div v-if="activeTab === 'downloads'" class="downloads-content">
|
|||
|
|
<div class="download-list">
|
|||
|
|
<div class="download-item" v-for="download in courseDownloads" :key="download.id">
|
|||
|
|
<div class="download-info">
|
|||
|
|
<span class="download-name">{{ download.name }}</span>
|
|||
|
|
<span class="download-size">{{ download.size }}</span>
|
|||
|
|
</div>
|
|||
|
|
<button class="btn-download">下载</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 评论区 -->
|
|||
|
|
<div v-if="activeTab === 'comments'" class="comments-content">
|
|||
|
|
<div class="comment-list">
|
|||
|
|
<div class="comment-item" v-for="comment in courseComments" :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>
|
|||
|
|
<p class="comment-text">{{ comment.content }}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 右侧边栏 -->
|
|||
|
|
<div class="sidebar">
|
|||
|
|
<!-- 讲师信息 -->
|
|||
|
|
<div class="instructor-card">
|
|||
|
|
<div class="instructor-header">
|
|||
|
|
<div class="instructor-avatar">
|
|||
|
|
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" alt="讲师头像" />
|
|||
|
|
</div>
|
|||
|
|
<div class="instructor-info">
|
|||
|
|
<h4 class="instructor-name">王老师</h4>
|
|||
|
|
<p class="instructor-desc">
|
|||
|
|
资深AI工程师，拥有丰富的深度学习项目经验。专注于大语言模型的研究与应用，曾参与多个知名AI项目的开发。擅长将复杂的技术概念用简单易懂的方式传授给学员。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="instructor-actions">
|
|||
|
|
<button class="btn-follow">关注</button>
|
|||
|
|
<button class="btn-message">发私信</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 更多课程 -->
|
|||
|
|
<div class="more-courses">
|
|||
|
|
<h3>更多课程</h3>
|
|||
|
|
<div class="course-list">
|
|||
|
|
<div class="course-item" v-for="moreCourse in moreCourses" :key="moreCourse.id">
|
|||
|
|
<div class="course-image">
|
|||
|
|
<img :src="moreCourse.image" :alt="moreCourse.title" />
|
|||
|
|
</div>
|
|||
|
|
<div class="course-info">
|
|||
|
|
<h4 class="course-title">{{ moreCourse.title }}</h4>
|
|||
|
|
<p class="course-meta">{{ moreCourse.studentsCount }}人学习</p>
|
|||
|
|
<button class="btn-learn">立即学习</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, computed, onMounted } from 'vue'
|
|||
|
|
import { useRoute } from 'vue-router'
|
|||
|
|
|
|||
|
|
const route = useRoute()
|
|||
|
|
const courseId = ref(route.params.id)
|
|||
|
|
|
|||
|
|
// 当前激活的标签页
|
|||
|
|
const activeTab = ref('details')
|
|||
|
|
|
|||
|
|
// 课程基本信息
|
|||
|
|
const course = ref({
|
|||
|
|
id: courseId.value,
|
|||
|
|
title: 'DeepSeek入门到精通',
|
|||
|
|
subtitle: '深度学习框架DeepSeek从入门到精通',
|
|||
|
|
description: '本课程深度解析DeepSeek深度学习框架，从基础概念到实际应用，帮助学习者全面理解AI模型的构建与优化。通过理论讲解与实践操作相结合的方式，让学员掌握深度学习的核心技术。',
|
|||
|
|
thumbnail: '/course-thumbnail.jpg',
|
|||
|
|
studentsCount: '1,234',
|
|||
|
|
duration: '15天',
|
|||
|
|
difficulty: '初级到高级',
|
|||
|
|
instructor: {
|
|||
|
|
name: '张教授',
|
|||
|
|
title: 'AI专家 / 深度学习研究员',
|
|||
|
|
avatar: '/instructor-avatar.jpg',
|
|||
|
|
description: '拥有10年以上AI研究经验，专注于深度学习算法优化和应用。发表论文50余篇，指导学生100+。'
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 课程章节
|
|||
|
|
const courseChapters = ref([
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
title: '第一章 课前准备',
|
|||
|
|
expanded: true,
|
|||
|
|
lessons: [
|
|||
|
|
{ id: '1-1', title: '开课彩蛋：新手福利证明', duration: '01:03:56' },
|
|||
|
|
{ id: '1-2', title: '课程定位与目标', duration: '00:44:05' },
|
|||
|
|
{ id: '1-3', title: '数学安装及学习建议', duration: '00:52:22' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
title: '第二章 程序设计基础知识',
|
|||
|
|
expanded: true,
|
|||
|
|
lessons: [
|
|||
|
|
{ id: '2-1', title: '第一课 程序设计入门', duration: '01:03:56' },
|
|||
|
|
{ id: '2-2', title: '第二课 分支结构', duration: '00:44:05' },
|
|||
|
|
{ id: '2-3', title: '第三课 循环结构', duration: '00:52:22' },
|
|||
|
|
{ id: '2-4', title: '第四课 函数&递归', duration: '00:52:22' },
|
|||
|
|
{ id: '2-5', title: '第五课 数组&字符串', duration: '00:52:22' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 3,
|
|||
|
|
title: '第三章 程序的控制结构',
|
|||
|
|
expanded: false,
|
|||
|
|
lessons: []
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 4,
|
|||
|
|
title: '第四章 大语言模型介绍',
|
|||
|
|
expanded: false,
|
|||
|
|
lessons: []
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 5,
|
|||
|
|
title: '第五章 DeepSeek实际应用',
|
|||
|
|
expanded: false,
|
|||
|
|
lessons: []
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
// 课件下载
|
|||
|
|
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 courseComments = 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: '老师讲得很详细，从零基础到实际应用都有涉及，非常适合初学者！'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
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的朋友们！'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
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确实是个很强大的工具，通过这个课程学会了很多实用技巧。'
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
// 更多课程
|
|||
|
|
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 toggleChapter = (chapterId: number) => {
|
|||
|
|
const chapter = courseChapters.value.find(c => c.id === chapterId)
|
|||
|
|
if (chapter) {
|
|||
|
|
chapter.expanded = !chapter.expanded
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
// 页面加载时的初始化逻辑
|
|||
|
|
console.log('课程详情页加载完成，课程ID:', courseId.value)
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
/* 基础样式 */
|
|||
|
|
.course-detail-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 0 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 顶部导航 */
|
|||
|
|
.top-nav {
|
|||
|
|
background: white;
|
|||
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|||
|
|
position: sticky;
|
|||
|
|
top: 0;
|
|||
|
|
z-index: 100;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 0 20px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 60px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-left {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo {
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
font-size: 24px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.site-name {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-right {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-btn {
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-btn.primary {
|
|||
|
|
background: #007bff;
|
|||
|
|
color: white;
|
|||
|
|
border-color: #007bff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-btn:hover {
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-btn.primary:hover {
|
|||
|
|
background: #0056b3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 面包屑导航 */
|
|||
|
|
.breadcrumb {
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
padding: 12px 0;
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.breadcrumb-text {
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 课程详情头部 */
|
|||
|
|
.course-detail-header {
|
|||
|
|
background: #ffffff;
|
|||
|
|
padding: 30px 0;
|
|||
|
|
position: relative;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-detail-content {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 350px 1fr;
|
|||
|
|
gap: 40px;
|
|||
|
|
align-items: stretch;
|
|||
|
|
position: relative;
|
|||
|
|
min-height: 280px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 左侧课程封面 */
|
|||
|
|
.course-cover {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-image-wrapper {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-cover-image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 顶部logo */
|
|||
|
|
.course-header-logo {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 2;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-icon {
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-text {
|
|||
|
|
color: white;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 右侧课程信息 */
|
|||
|
|
.course-info-section {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
min-height: 240px;
|
|||
|
|
padding-left: 30px;
|
|||
|
|
padding-right: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-info-title {
|
|||
|
|
font-size: 22px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #000000;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
word-wrap: break-word;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.course-info-description {
|
|||
|
|
color: #666 !important;
|
|||
|
|
font-size: 14px !important;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
margin-bottom: 25px;
|
|||
|
|
text-align: justify;
|
|||
|
|
display: block !important;
|
|||
|
|
visibility: visible !important;
|
|||
|
|
opacity: 1 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-meta-info {
|
|||
|
|
margin-bottom: 25px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.meta-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.meta-label {
|
|||
|
|
color: #888;
|
|||
|
|
font-size: 13px;
|
|||
|
|
min-width: 45px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.meta-value {
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.category-link {
|
|||
|
|
color: #4facfe !important;
|
|||
|
|
text-decoration: none;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.category-link:hover {
|
|||
|
|
text-decoration: underline;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 课程统计信息 */
|
|||
|
|
.course-stats {
|
|||
|
|
margin-bottom: 25px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stats-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 25px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stats-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stats-text {
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-actions {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 16px;
|
|||
|
|
margin-top: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-enroll {
|
|||
|
|
background: transparent;
|
|||
|
|
color: #4facfe;
|
|||
|
|
border: 1px solid #4facfe;
|
|||
|
|
padding: 8px 20px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-enroll:hover {
|
|||
|
|
background: #4facfe;
|
|||
|
|
color: white;
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.enrollment-count {
|
|||
|
|
color: #888;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 分享部分 */
|
|||
|
|
.share-section {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 15px;
|
|||
|
|
right: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.share-icon {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #999;
|
|||
|
|
opacity: 0.7;
|
|||
|
|
font-family: Arial, sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.share-icon::before {
|
|||
|
|
content: '🔗';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.share-text {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #999;
|
|||
|
|
opacity: 0.7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 主要内容区域 */
|
|||
|
|
.main-content {
|
|||
|
|
padding: 40px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-layout {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 2fr 1fr;
|
|||
|
|
gap: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 标签导航样式 */
|
|||
|
|
.content-tabs {
|
|||
|
|
display: flex;
|
|||
|
|
border-bottom: 2px solid #f0f0f0;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 8px 8px 0 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-item {
|
|||
|
|
padding: 15px 25px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
border-bottom: 3px solid transparent;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #666;
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
border-right: 1px solid #e9ecef;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-item:last-child {
|
|||
|
|
border-right: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-item:hover {
|
|||
|
|
background: #e9ecef;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-item.active {
|
|||
|
|
background: white;
|
|||
|
|
color: #007bff;
|
|||
|
|
border-bottom-color: #007bff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 标签内容区域 */
|
|||
|
|
.tab-content {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 0 0 8px 8px;
|
|||
|
|
min-height: 400px;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 详情内容样式 */
|
|||
|
|
.details-content {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-detail-image {
|
|||
|
|
width: 100%;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-detail-image img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 课程章节样式 */
|
|||
|
|
.chapters-content {
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chapter-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chapter-section {
|
|||
|
|
border-bottom: 1px solid #e9ecef;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chapter-section:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chapter-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 16px 20px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
transition: background-color 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chapter-header:hover {
|
|||
|
|
background: #e9ecef;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chapter-info {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chapter-title {
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chapter-toggle {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.toggle-icon {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 24px;
|
|||
|
|
height: 24px;
|
|||
|
|
color: #666;
|
|||
|
|
transition: transform 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.toggle-icon.expanded {
|
|||
|
|
transform: rotate(180deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lesson-list {
|
|||
|
|
background: white;
|
|||
|
|
border-top: 1px solid #e9ecef;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lesson-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 12px 20px 12px 40px;
|
|||
|
|
border-bottom: 1px solid #f0f0f0;
|
|||
|
|
transition: background-color 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lesson-item:hover {
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lesson-item:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lesson-number {
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 14px;
|
|||
|
|
width: 60px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lesson-title {
|
|||
|
|
flex: 1;
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 14px;
|
|||
|
|
margin: 0 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lesson-duration {
|
|||
|
|
color: #007bff;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 下载内容样式 */
|
|||
|
|
.downloads-content {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.download-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.download-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 15px 20px;
|
|||
|
|
border: 1px solid #e9ecef;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.download-item:hover {
|
|||
|
|
border-color: #28a745;
|
|||
|
|
box-shadow: 0 2px 8px rgba(40, 167, 69, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.download-info {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.download-name {
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.download-size {
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-download {
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
background: #28a745;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: background 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-download:hover {
|
|||
|
|
background: #218838;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 评论样式 */
|
|||
|
|
.comments-content {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comment-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comment-item {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 15px;
|
|||
|
|
padding: 15px;
|
|||
|
|
border: 1px solid #e9ecef;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comment-username {
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comment-time {
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comment-text {
|
|||
|
|
color: #555;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* DeepSeek课程封面 */
|
|||
|
|
.deepseek-course-cover {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 0;
|
|||
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-cover-wrapper {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 600px;
|
|||
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 30%, #1e40af 70%, #1e3a8a 100%);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 30px;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-cover-wrapper::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background:
|
|||
|
|
radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.4) 0%, transparent 50%),
|
|||
|
|
radial-gradient(circle at 80% 20%, rgba(147, 197, 253, 0.3) 0%, transparent 50%),
|
|||
|
|
radial-gradient(circle at 40% 40%, rgba(96, 165, 250, 0.2) 0%, transparent 50%),
|
|||
|
|
radial-gradient(circle at 60% 70%, rgba(59, 130, 246, 0.2) 0%, transparent 40%);
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 顶部品牌区域 */
|
|||
|
|
.cover-header {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 2;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.deepseek-brand {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.brand-icon {
|
|||
|
|
font-size: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.brand-text {
|
|||
|
|
color: white;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 中间主要内容区域 */
|
|||
|
|
.cover-main-content {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main-content-card {
|
|||
|
|
background: rgba(255, 255, 255, 0.15);
|
|||
|
|
backdrop-filter: blur(15px);
|
|||
|
|
border-radius: 20px;
|
|||
|
|
padding: 40px 35px;
|
|||
|
|
text-align: center;
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
|||
|
|
width: 100%;
|
|||
|
|
max-width: 400px;
|
|||
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-main-title {
|
|||
|
|
font-size: 48px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: white;
|
|||
|
|
margin: 0 0 15px 0;
|
|||
|
|
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
|
|||
|
|
letter-spacing: -1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-sub-title {
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #fbbf24;
|
|||
|
|
margin: 0 0 20px 0;
|
|||
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-description {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: rgba(255, 255, 255, 0.95);
|
|||
|
|
margin: 0;
|
|||
|
|
font-weight: 500;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 底部信息区域 */
|
|||
|
|
.cover-footer {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 2;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-info-item {
|
|||
|
|
background: rgba(255, 255, 255, 0.12);
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
border-radius: 25px;
|
|||
|
|
padding: 12px 20px;
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-info-item:hover {
|
|||
|
|
background: rgba(255, 255, 255, 0.18);
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-info-item.highlight-item {
|
|||
|
|
background: rgba(59, 130, 246, 0.35);
|
|||
|
|
border: 1px solid rgba(147, 197, 253, 0.5);
|
|||
|
|
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-text {
|
|||
|
|
color: white;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|||
|
|
display: block;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 右侧边栏 */
|
|||
|
|
.sidebar {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 讲师信息卡片 */
|
|||
|
|
.instructor-card {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 25px;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.instructor-header {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 15px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.instructor-avatar {
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border: 2px solid #f0f0f0;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.instructor-avatar img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.instructor-info {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.instructor-name {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333;
|
|||
|
|
margin: 0 0 8px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.instructor-desc {
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 14px;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.instructor-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-follow, .btn-message {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 10px 16px;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 14px;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-follow {
|
|||
|
|
background: #007bff;
|
|||
|
|
color: white;
|
|||
|
|
border-color: #007bff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-follow:hover {
|
|||
|
|
background: #0056b3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-message:hover {
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 相关课程推荐 */
|
|||
|
|
.related-courses {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 25px;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.related-courses h3 {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.related-course-item {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 12px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
padding-bottom: 20px;
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.related-course-item:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
padding-bottom: 0;
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.related-course-image {
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.related-course-info {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.related-course-title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
line-height: 1.3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.related-course-meta {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #666;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-learn {
|
|||
|
|
padding: 4px 12px;
|
|||
|
|
background: #007bff;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-learn:hover {
|
|||
|
|
background: #0056b3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 更多课程样式 */
|
|||
|
|
.more-courses {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 25px;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more-courses h3 {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333;
|
|||
|
|
margin: 0 0 20px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-item {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 12px;
|
|||
|
|
padding: 12px;
|
|||
|
|
border: 1px solid #e9ecef;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-item:hover {
|
|||
|
|
border-color: #007bff;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-image {
|
|||
|
|
width: 60px;
|
|||
|
|
height: 45px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-image img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-info {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333;
|
|||
|
|
margin: 0;
|
|||
|
|
line-height: 1.3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-meta {
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 12px;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 底部 */
|
|||
|
|
.footer {
|
|||
|
|
background: #2c3e50;
|
|||
|
|
color: white;
|
|||
|
|
padding: 30px 0;
|
|||
|
|
margin-top: 60px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-content {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-link {
|
|||
|
|
color: #bdc3c7;
|
|||
|
|
text-decoration: none;
|
|||
|
|
margin-left: 20px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-link:hover {
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 响应式设计 */
|
|||
|
|
@media (max-width: 1024px) {
|
|||
|
|
.course-detail-content {
|
|||
|
|
grid-template-columns: 300px 1fr;
|
|||
|
|
gap: 30px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.course-detail-content {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
gap: 20px;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-image-wrapper {
|
|||
|
|
width: 100%;
|
|||
|
|
max-width: none;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-info-section {
|
|||
|
|
min-height: auto;
|
|||
|
|
padding-left: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-info-title {
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.content-layout {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-content {
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 15px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.share-section {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 10px;
|
|||
|
|
right: 15px;
|
|||
|
|
gap: 5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 480px) {
|
|||
|
|
.course-detail-content {
|
|||
|
|
gap: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-image-wrapper {
|
|||
|
|
height: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.course-info-title {
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-info-description {
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.stats-row {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-enroll {
|
|||
|
|
padding: 6px 16px;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.share-section {
|
|||
|
|
top: 8px;
|
|||
|
|
right: 10px;
|
|||
|
|
gap: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.share-icon {
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.share-text {
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|