<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, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const courseId = ref(route.params.id)

// 当前激活的标签页
const activeTab = ref('details')



// 课程章节
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>
