<template>
  <div class="profile-page">
    <!-- 主要内容区域 -->
    <div class="profile-content flex-row">
          <!-- 左侧侧边栏 -->
          <div class="block_14">
            <!-- 用户头像和姓名 -->
            <img
              class="image_7"
              referrerpolicy="no-referrer"
              :src="userStore.user?.avatar || 'https://via.placeholder.com/100'"
            />
            <span class="text_72">{{ userStore.user?.username || '用户名' }}</span>

            <!-- 菜单项容器 -->
            <div class="box_22">
              <!-- 分割线 -->
              <div class="menu-divider"></div>

              <!-- 我的课程 -->
              <div :class="['image-text_19', { active: activeTab === 'courses' }]" @click="handleMenuSelect('courses')">
                <img
                  class="image_8"
                  referrerpolicy="no-referrer"
                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng..."
                />
                <span class="text-group_19">我的课程</span>
              </div>

              <!-- 我的作业 -->
              <div :class="['image-text_20', { active: activeTab === 'homework' }]" @click="handleMenuSelect('homework')">
                <img
                  class="label_4"
                  referrerpolicy="no-referrer"
                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng..."
                />
                <span class="text-group_20">我的作业</span>
              </div>

              <!-- 我的考试 -->
              <div :class="['image-text_21', { active: activeTab === 'exam' }]" @click="handleMenuSelect('exam')">
                <img
                  class="label_5"
                  referrerpolicy="no-referrer"
                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng..."
                />
                <span class="text-group_21">我的考试</span>
              </div>

              <!-- 我的练习 -->
              <div :class="['image-text_22', { active: activeTab === 'practice' }]" @click="handleMenuSelect('practice')">
                <img
                  class="label_6"
                  referrerpolicy="no-referrer"
                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng..."
                />
                <span class="text-group_22">我的练习</span>
              </div>

              <!-- 我的活动 -->
              <div :class="['image-text_23', { active: activeTab === 'activity' }]" @click="handleMenuSelect('activity')">
                <img
                  class="thumbnail_40"
                  referrerpolicy="no-referrer"
                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng..."
                />
                <span class="text-group_23">我的活动</span>
              </div>

              <!-- 我的消息 -->
              <div :class="['image-text_24', { active: activeTab === 'message' }]" @click="handleMenuSelect('message')">
                <img
                  class="label_7"
                  referrerpolicy="no-referrer"
                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng..."
                />
                <span class="text-group_24">我的消息</span>
              </div>

              <!-- 我的资料 -->
              <div :class="['image-text_25', { active: activeTab === 'materials' }]" @click="handleMenuSelect('materials')">
                <img
                  class="image_9"
                  referrerpolicy="no-referrer"
                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng..."
                />
                <span class="text-group_25">我的资料</span>
              </div>

              <!-- 我的下载 -->
              <div :class="['image-text_26', { active: activeTab === 'download' }]" @click="handleMenuSelect('download')">
                <img
                  class="thumbnail_41"
                  referrerpolicy="no-referrer"
                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng..."
                />
                <span class="text-group_26">我的下载</span>
              </div>
            </div>
          </div>

          <!-- 右侧课程列表区域 -->
          <div class="group_5 flex-col">
            <!-- 课程筛选标签 -->
            <div class="text-wrapper_1 flex-row">
              <span class="text_12" :class="{ active: activeCourseTab === 'all' }" @click="handleCourseTabChange('all')">全部课程</span>
              <span class="text_13" :class="{ active: activeCourseTab === 'learning' }" @click="handleCourseTabChange('learning')">学习中</span>
              <span class="text_14" :class="{ active: activeCourseTab === 'completed' }" @click="handleCourseTabChange('completed')">已完结</span>
            </div>

            <!-- 分割线 -->
            <div class="course-divider"></div>

            <!-- 课程列表 -->
            <div class="course-list">
              <!-- 学习中的课程 -->
              <div v-for="course in filteredCourses" :key="course.id" class="box_2 flex-row justify-between">
                <div class="block_4 flex-col">
                  <div class="box_3 flex-row justify-between">
                    <img
                      class="thumbnail_4"
                      referrerpolicy="no-referrer"
                      :src="course.thumbnail"
                    />
                    <span :class="['status-text', course.status]">{{ getStatusText(course.status) }}</span>
                  </div>
                </div>

                <div class="block_5 flex-col">
                  <div class="group_6 flex-row">
                    <span class="text_16">{{ course.title }}</span>
                    <img
                      class="thumbnail_5"
                      referrerpolicy="no-referrer"
                      src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge131c44858bb817d4885b81fdd8ddff8507f62cd51f1025cee826849e6a52c65"
                    />
                    <span class="text_17">{{ course.rating || 541 }}</span>
                  </div>
                  <span class="text_18">讲师：{{ course.instructor }}</span>
                  <span class="text_19">{{ course.description }}</span>

                  <div class="group_7 flex-row">
                    <img
                      class="thumbnail_6"
                      referrerpolicy="no-referrer"
                      src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng285a469537e55535ddd8097d697f25ce2f6071710544f034603554ee4d34f832"
                    />
                    <span class="text_20">共{{ course.chapters || 9 }}章{{ course.lessons || 54 }}节</span>
                    <img
                      class="thumbnail_7"
                      referrerpolicy="no-referrer"
                      src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng23376f42e0d0f21014efca4f1a7ee3c5efa70f6e1419d0d3e6c4a680191c7ef5"
                    />
                    <span class="text_21">{{ course.duration || '12小时43分钟' }}</span>
                    <img
                      class="thumbnail_8"
                      referrerpolicy="no-referrer"
                      :src="course.status === 'learning' ? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng51c1f99cd7b1c15c6efdc0480d16ff2681be4bef17a9dedfcaac33f2976fbd81' : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng317a0d8f3287bb788c48059c8181479ad5eba8557ef1c09215d9a1c962d0db67'"
                    />
                    <span class="text_22">已看{{ course.watchedTime || '10小时20分钟' }}</span>
                    <div class="text-wrapper_2 flex-col" @click="goToCourse(course.id)">
                      <span class="text_23">{{ course.status === 'learning' ? '去学习' : '去复习' }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 分页器 -->
            <div class="pagination-wrapper" v-if="totalPages > 1">
              <div class="pagination">
                <span
                  class="pagination-item nav-button"
                  :class="{ disabled: currentPage === 1 }"
                  @click="goToPage('first')"
                >
                  首页
                </span>
                <span
                  class="pagination-item nav-button"
                  :class="{ disabled: currentPage === 1 }"
                  @click="goToPage('prev')"
                >
                  上一页
                </span>

                <span
                  v-for="page in totalPages"
                  :key="page"
                  class="pagination-item page-number"
                  :class="{ active: page === currentPage }"
                  @click="goToPage(page)"
                >
                  {{ page }}
                </span>

                <span
                  class="pagination-item nav-button"
                  :class="{ disabled: currentPage === totalPages }"
                  @click="goToPage('next')"
                >
                  下一页
                </span>
                <span
                  class="pagination-item nav-button"
                  :class="{ disabled: currentPage === totalPages }"
                  @click="goToPage('last')"
                >
                  尾页
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>


</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useMessage } from 'naive-ui'
import { useUserStore } from '@/stores/user'

// 定义课程接口
interface Course {
  id: number
  title: string
  instructor: string
  description: string
  thumbnail: string
  status: 'learning' | 'completed'
  rating?: number
  chapters?: number
  lessons?: number
  duration?: string
  watchedTime?: string
  progress?: number
}

const message = useMessage()
const userStore = useUserStore()

const activeTab = ref('courses')
const activeCourseTab = ref('all')

// 分页相关状态
const currentPage = ref(1)
const pageSize = ref(5) // 每页显示5个课程

// 模拟课程数据（基于蓝湖UI设计）
const mockCourses: Course[] = [
  {
    id: 1,
    title: '教育心理学的起源',
    instructor: '代方枚  史雯',
    description: '本课程紧跟风向，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引领，强调课程内容的易用性和岗位要求的匹配性，课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能…',
    thumbnail: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd0745b9ee85d1fd2251cde7df5f13cdc38cfb57ba7f1ca467638a1196af0a4fc',
    status: 'learning',
    rating: 541,
    chapters: 9,
    lessons: 54,
    duration: '12小时43分钟',
    watchedTime: '10小时20分钟',
    progress: 75
  },
  {
    id: 2,
    title: '现代教育技术应用',
    instructor: '代方枚  史雯',
    description: '本课程紧跟风向，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引领，强调课程内容的易用性和岗位要求的匹配性，课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能…',
    thumbnail: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng80fbbc0cab537164b6d85a9a7dcea31848f9becbaceafadb4ea618af4fde9554',
    status: 'completed',
    rating: 541,
    chapters: 9,
    lessons: 54,
    duration: '12小时43分钟',
    watchedTime: '10小时20分钟',
    progress: 100
  },
  {
    id: 3,
    title: '课程设计与开发',
    instructor: '代方枚  史雯',
    description: '本课程紧跟风向，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引领，强调课程内容的易用性和岗位要求的匹配性，课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能…',
    thumbnail: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng80fbbc0cab537164b6d85a9a7dcea31848f9becbaceafadb4ea618af4fde9554',
    status: 'completed',
    rating: 541,
    chapters: 9,
    lessons: 54,
    duration: '12小时43分钟',
    watchedTime: '10小时20分钟',
    progress: 100
  },
  {
    id: 4,
    title: '现代教育技术应用',
    instructor: '代方枚  史雯',
    description: '本课程紧跟风向，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引领，强调课程内容的易用性和岗位要求的匹配性，课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能…',
    thumbnail: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng80fbbc0cab537164b6d85a9a7dcea31848f9becbaceafadb4ea618af4fde9554',
    status: 'learning',
    rating: 541,
    chapters: 9,
    lessons: 54,
    duration: '12小时43分钟',
    watchedTime: '8小时15分钟',
    progress: 65
  },
  {
    id: 5,
    title: '数字化教学设计',
    instructor: '代方枚  史雯',
    description: '本课程紧跟风向，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引领，强调课程内容的易用性和岗位要求的匹配性，课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能…',
    thumbnail: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng80fbbc0cab537164b6d85a9a7dcea31848f9becbaceafadb4ea618af4fde9554',
    status: 'learning',
    rating: 541,
    chapters: 9,
    lessons: 54,
    duration: '12小时43分钟',
    watchedTime: '5小时30分钟',
    progress: 45
  },
  {
    id: 6,
    title: '在线教育平台运营',
    instructor: '代方枚  史雯',
    description: '本课程紧跟风向，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引领，强调课程内容的易用性和岗位要求的匹配性，课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能…',
    thumbnail: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng80fbbc0cab537164b6d85a9a7dcea31848f9becbaceafadb4ea618af4fde9554',
    status: 'completed',
    rating: 541,
    chapters: 9,
    lessons: 54,
    duration: '12小时43分钟',
    watchedTime: '12小时43分钟',
    progress: 100
  },
  {
    id: 7,
    title: '教学评估与反馈',
    instructor: '代方枚  史雯',
    description: '本课程紧跟风向，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引领，强调课程内容的易用性和岗位要求的匹配性，课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能…',
    thumbnail: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng80fbbc0cab537164b6d85a9a7dcea31848f9becbaceafadb4ea618af4fde9554',
    status: 'learning',
    rating: 541,
    chapters: 9,
    lessons: 54,
    duration: '12小时43分钟',
    watchedTime: '3小时20分钟',
    progress: 25
  },
  {
    id: 8,
    title: '智能教育工具应用',
    instructor: '代方枚  史雯',
    description: '本课程紧跟风向，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引领，强调课程内容的易用性和岗位要求的匹配性，课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能…',
    thumbnail: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng80fbbc0cab537164b6d85a9a7dcea31848f9becbaceafadb4ea618af4fde9554',
    status: 'completed',
    rating: 541,
    chapters: 9,
    lessons: 54,
    duration: '12小时43分钟',
    watchedTime: '12小时43分钟',
    progress: 100
  }
]

// 获取筛选后的所有课程
const allFilteredCourses = computed(() => {
  if (activeCourseTab.value === 'learning') {
    return mockCourses.filter(course => course.status === 'learning')
  } else if (activeCourseTab.value === 'completed') {
    return mockCourses.filter(course => course.status === 'completed')
  }
  return mockCourses
})

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(allFilteredCourses.value.length / pageSize.value)
})

// 当前页显示的课程
const filteredCourses = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return allFilteredCourses.value.slice(start, end)
})

// 处理菜单选择
const handleMenuSelect = (key: string) => {
  activeTab.value = key
  message.info(`切换到${key}页面`)
}

// 获取状态文本
const getStatusText = (status: string) => {
  switch (status) {
    case 'learning':
      return '学习中'
    case 'completed':
      return '已完结'
    default:
      return '未开始'
  }
}

// 跳转到课程
const goToCourse = (courseId: number) => {
  message.info(`跳转到课程 ${courseId}`)
}

// 分页器方法
const goToPage = (page: number | string) => {
  if (typeof page === 'number') {
    if (page >= 1 && page <= totalPages.value) {
      currentPage.value = page
    }
  } else {
    switch (page) {
      case 'first':
        if (currentPage.value > 1) {
          currentPage.value = 1
        }
        break
      case 'prev':
        if (currentPage.value > 1) {
          currentPage.value--
        }
        break
      case 'next':
        if (currentPage.value < totalPages.value) {
          currentPage.value++
        }
        break
      case 'last':
        if (currentPage.value < totalPages.value) {
          currentPage.value = totalPages.value
        }
        break
    }
  }
}

// 监听筛选变化，重置到第一页
const handleCourseTabChange = (tab: string) => {
  activeCourseTab.value = tab
  currentPage.value = 1
}

onMounted(() => {
  // 初始化
})
</script>

<style scoped>
/* 基础布局类 */
.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify-between {
  justify-content: space-between;
}

/* 主页面容器 */
.profile-page {
  width: 100vw;
  min-height: calc(100vh - 6.4vh); /* 减去顶部导航栏高度 */
  background: #f6f6f6;
  padding: 0;
  display: flex;
  justify-content: center;
}

/* 主要内容区域 */
.profile-content {
  width: 80vw; /* 调整为80vw */
  min-height: calc(100vh - 6.4vh);
  margin: 2.08vh auto 0 auto; /* 距离顶部40px转换为vh */
  position: relative;
  background: #f6f6f6;
}

/* 左侧侧边栏 */
.block_14 {
  position: relative;
  width: 13.4vw; /* 20vw缩小33% = 20vw * 0.67 = 13.4vw */
  min-height: calc(100vh - 6.4vh);
  background: #ffffff; /* 改为白色背景 */
  border-right: 0.05vw solid rgba(232, 232, 232, 1);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center; /* 内容居中 */
}

/* 用户头像和姓名 */
.image_7 {
  width: 5vw; /* 调整头像大小 */
  height: 5vw;
  border-radius: 50%;
  margin: 2.6vh auto 0 auto; /* 居中显示 */
  object-fit: cover;
  display: block;
}

.text_72 {
  width: 100%;
  height: auto;
  font-size: 1.1vw; /* 调整字体大小 */
  color: rgba(0, 0, 0, 1);
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  text-align: center;
  line-height: 1.6vh;
  margin: 0.9vh 0 0 0; /* 居中显示 */
}

/* 菜单背景 */
.box_22 {
  width: 12vw; /* 调整菜单背景宽度，适应缩小的导航栏 */
  height: auto; /* 自适应高度 */
  background: transparent; /* 去掉背景色 */
  border-radius: 0.6vw; /* 12px转换为vw */
  margin: 2.55vh 0; /* 去掉左右边距，因为父容器已经居中 */
  padding: 1.04vh 0; /* 20px 0转换 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 菜单项居中 */
}

/* 分割线 */
.menu-divider {
  width: 10vw; /* 与菜单项宽度一致 */
  height: 0.05vh; /* 1px转换为vh */
  background: #E6E6E6;
  margin: 1.5vh 0; /* 上下间距 */
}

/* 菜单项 */
.image-text_19, .image-text_20, .image-text_21, .image-text_22,
.image-text_23, .image-text_24, .image-text_25, .image-text_26 {
  width: 10vw; /* 进一步缩小菜单项宽度，适应新的导航栏宽度 */
  height: auto; /* 自适应高度 */
  min-height: 3vh; /* 设置最小高度，让盒子更大 */
  margin: 1.5vh 0; /* 减小间距：从2.34vh减少到1.5vh */
  display: flex;
  align-items: center;
  justify-content: center; /* 菜单项内容居中 */
  cursor: pointer;
  padding: 1.2vh 0.5vw; /* 增加上下内边距，让盒子更高 */
  border-radius: 0.31vw; /* 6px转换为vw */
  transition: all 0.3s ease;
  background: transparent; /* 默认透明背景 */
}

.image-text_19:hover, .image-text_20:hover, .image-text_21:hover, .image-text_22:hover,
.image-text_23:hover, .image-text_24:hover, .image-text_25:hover, .image-text_26:hover {
  background: #eff7fc; /* 悬停时背景色 */
}

/* 激活状态的菜单项 */
.image-text_19.active, .image-text_20.active, .image-text_21.active, .image-text_22.active,
.image-text_23.active, .image-text_24.active, .image-text_25.active, .image-text_26.active {
  background: #eff7fc; /* 激活时背景色 */
}

/* 菜单图标 */
.image_8, .label_4, .label_5, .label_6, .thumbnail_40, .label_7, .image_9, .thumbnail_41 {
  width: 1.04vw; /* 20px转换为vw */
  height: 1.04vw;
  margin-right: 0.78vw; /* 15px转换为vw */
}

/* 菜单文字 */
.text-group_19, .text-group_20, .text-group_21, .text-group_22,
.text-group_23, .text-group_24, .text-group_25, .text-group_26 {
  font-size: 1.04vw; /* 20px转换为vw */
  color: rgba(102, 102, 102, 1); /* 默认灰色 */
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  line-height: 1.46vh; /* 28px转换为vh */
  transition: color 0.3s ease;
}

/* 激活状态的菜单文字颜色 */
.image-text_19.active .text-group_19,
.image-text_20.active .text-group_20,
.image-text_21.active .text-group_21,
.image-text_22.active .text-group_22,
.image-text_23.active .text-group_23,
.image-text_24.active .text-group_24,
.image-text_25.active .text-group_25,
.image-text_26.active .text-group_26 {
  color: rgba(2, 134, 206, 1); /* 激活时蓝色 */
}

/* 悬停状态的菜单文字颜色 */
.image-text_19:hover .text-group_19,
.image-text_20:hover .text-group_20,
.image-text_21:hover .text-group_21,
.image-text_22:hover .text-group_22,
.image-text_23:hover .text-group_23,
.image-text_24:hover .text-group_24,
.image-text_25:hover .text-group_25,
.image-text_26:hover .text-group_26 {
  color: rgba(2, 134, 206, 1); /* 悬停时蓝色 */
}

/* 右侧课程列表区域 */
.group_5 {
  width: 60vw; /* 保持60vw宽度 */
  min-height: calc(100vh - 6.4vh);
  padding: 2.08vh 2.08vw; /* 40px转换为vh和vw */
  background: rgba(255, 255, 255, 1);
  overflow-y: auto;
  margin-left: 1.56vw; /* 30px转换为vw：30/1920*100 = 1.56vw */
}

/* 课程筛选标签 */
.text-wrapper_1 {
  width: 100%;
  height: 2.08vh; /* 40px转换为vh */
  align-items: center;
  margin-bottom: 1.67vh; /* 32px转换为vh */
  gap: 2.81vw; /* 54px转换为vw：54/1920*100 = 2.81vw */
}

.text_12, .text_13, .text_14 {
  font-size: 0.94vw; /* 18px转换为vw */
  color: rgba(102, 102, 102, 1);
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  cursor: pointer;
  padding: 0.42vh 0; /* 去掉左右内边距，只保留上下 */
  transition: color 0.3s ease; /* 只保留颜色过渡 */
  background: transparent; /* 确保背景透明 */
}

.text_12.active, .text_13.active, .text_14.active {
  color: rgba(2, 134, 206, 1); /* 只改变字体颜色，去掉背景色 */
}

.text_12:hover, .text_13:hover, .text_14:hover {
  color: rgba(2, 134, 206, 1);
}

/* 课程区域分割线 */
.course-divider {
  width: 100%; /* 与课程卡片宽度一致 */
  height: 0.05vh; /* 1px转换为vh */
  background: #E6E6E6;
  margin-bottom: 1.67vh; /* 与课程列表的间距 */
}

/* 课程列表 */
.course-list {
  display: flex;
  flex-direction: column;
  gap: 1.25vh; /* 24px转换为vh */
}

/* 课程卡片 */
.box_2 {
  width: 100%;
  min-height: 10.42vh; /* 200px转换为vh */
  background: rgba(255, 255, 255, 1);
  border: none; /* 去掉边框 */
  border-radius: 0.6vw; /* 12px转换为vw */
  padding: 1.04vh 1.04vw; /* 20px转换 */
  transition: all 0.3s ease;
}

.box_2:hover {
  box-shadow: 0 0.21vh 1.04vh rgba(0, 0, 0, 0.1); /* 0 4px 20px转换 */
  transform: translateY(-0.1vh); /* -2px转换为vh */
}

/* 课程缩略图区域 */
.block_4 {
  width: 10.42vw; /* 200px转换为vw */
  margin-right: 1.04vw; /* 20px转换为vw */
}

.box_3 {
  width: 10.42vw; /* 200px转换为vw */
  height: 7.81vh; /* 150px转换为vh */
  position: relative;
  border-radius: 0.42vw; /* 8px转换为vw */
  overflow: hidden;
}

.thumbnail_4 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 状态标签 */
.status-text {
  position: absolute;
  top: 0.63vh; /* 12px转换为vh */
  left: 0.63vw; /* 12px转换为vw */
  padding: 0.21vh 0.63vw; /* 4px 12px转换 */
  border-radius: 0.21vw; /* 4px转换为vw */
  font-size: 0.63vw; /* 12px转换为vw */
  color: rgba(255, 255, 255, 1);
  font-weight: 500;
}

.status-text.learning {
  background: rgba(82, 196, 26, 1);
}

.status-text.completed {
  background: rgba(24, 144, 255, 1);
}

/* 课程信息区域 */
.block_5 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 课程标题和评分 */
.group_6 {
  align-items: center;
  margin-bottom: 0.42vh; /* 8px转换为vh */
  gap: 0.63vw; /* 12px转换为vw */
}

.text_16 {
  font-size: 0.94vw; /* 18px转换为vw */
  color: rgba(51, 51, 51, 1);
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  font-weight: 500;
  flex: 1;
}

.thumbnail_5 {
  width: 0.83vw; /* 16px转换为vw */
  height: 0.83vw;
}

.text_17 {
  font-size: 0.73vw; /* 14px转换为vw */
  color: rgba(250, 173, 20, 1);
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
}

/* 讲师信息 */
.text_18 {
  font-size: 0.73vw; /* 14px转换为vw */
  color: rgba(102, 102, 102, 1);
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  margin-bottom: 0.42vh; /* 8px转换为vh */
}

/* 课程描述 */
.text_19 {
  font-size: 0.73vw; /* 14px转换为vw */
  color: rgba(102, 102, 102, 1);
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  line-height: 1.5;
  margin-bottom: 0.83vh; /* 16px转换为vh */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 课程统计信息 */
.group_7 {
  align-items: center;
  gap: 1.04vw; /* 20px转换为vw */
}

.thumbnail_6, .thumbnail_7, .thumbnail_8 {
  width: 0.83vw; /* 16px转换为vw */
  height: 0.83vw;
}

.text_20, .text_21, .text_22 {
  font-size: 0.73vw; /* 14px转换为vw */
  color: rgba(102, 102, 102, 1);
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
}

/* 操作按钮 */
.text-wrapper_2 {
  background: rgba(2, 134, 206, 1);
  border-radius: 0.31vw; /* 6px转换为vw */
  padding: 0.42vh 0.83vw; /* 8px 16px转换 */
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: auto;
}

.text-wrapper_2:hover {
  background: rgba(2, 134, 206, 0.8);
}

.text_23 {
  font-size: 0.73vw; /* 14px转换为vw */
  color: rgba(255, 255, 255, 1);
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  text-align: center;
}

/* 分页器样式 */
.pagination-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 4.17vh; /* 80px转换为vh，增加上方间距 */
  padding: 1.04vh 0; /* 20px转换为vh */
}

.pagination {
  display: flex;
  align-items: center;
  gap: 0.52vw; /* 10px转换为vw */
}

.pagination-item {
  min-width: 2.08vw; /* 40px转换为vw */
  height: 2.08vh; /* 40px转换为vh */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.73vw; /* 14px转换为vw */
  color: rgba(102, 102, 102, 1);
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  cursor: pointer;
  border-radius: 0.21vw; /* 4px转换为vw */
  transition: all 0.3s ease;
  padding: 0.52vh 0.83vw; /* 10px 16px转换 */
  background: rgba(255, 255, 255, 1);
  border: 0.05vw solid rgba(232, 232, 232, 1);
}

.pagination-item:hover {
  color: rgba(2, 134, 206, 1);
  border-color: rgba(2, 134, 206, 1);
}

.pagination-item.active {
  background: rgba(2, 134, 206, 1);
  color: rgba(255, 255, 255, 1);
  border-color: rgba(2, 134, 206, 1);
}

.pagination-item.disabled {
  color: rgba(204, 204, 204, 1);
  cursor: not-allowed;
  border-color: rgba(232, 232, 232, 1);
  background: rgba(248, 248, 248, 1);
}

.pagination-item.disabled:hover {
  color: rgba(204, 204, 204, 1);
  border-color: rgba(232, 232, 232, 1);
  background: rgba(248, 248, 248, 1);
}

.nav-button {
  min-width: 3.65vw; /* 70px转换为vw，导航按钮稍宽一些 */
}

.page-number {
  min-width: 2.08vw; /* 40px转换为vw，页码按钮保持原宽度 */
}

/* 响应式设计 */
@media (max-width: 1440px) {
  .profile-page {
    max-width: 100vw;
  }

  .profile-content {
    max-width: 100vw;
  }
}

@media (max-width: 1024px) {
  .profile-content {
    flex-direction: column;
  }

  .block_14 {
    width: 100%;
    min-height: auto;
    order: 2;
    border-right: none;
    border-top: 0.05vw solid rgba(232, 232, 232, 1);
  }

  .group_5 {
    width: 100%;
    order: 1;
    min-height: auto;
    margin-left: 0; /* 移动端取消左边距 */
  }

  .box_2 {
    flex-direction: column;
  }

  .block_4 {
    width: 100%;
    margin-right: 0;
    margin-bottom: 0.83vh; /* 16px转换为vh */
  }

  .box_3 {
    width: 100%;
    height: 10.42vh; /* 200px转换为vh */
  }

  /* 调整用户信息区域为横向布局 */
  .image_7 {
    margin: 1.04vh 0 0 1.04vw; /* 20px转换 */
    width: 4.17vw; /* 80px转换为vw */
    height: 4.17vw;
  }

  .text_72 {
    margin: 1.04vh 0 0 1.04vw; /* 20px转换 */
    width: auto;
    text-align: left;
  }

  .box_22 {
    margin: 1.04vh 0; /* 移动端保持居中 */
    width: 90%; /* 移动端调整宽度 */
    height: auto;
    padding: 1.04vh 0; /* 移动端调整内边距 */
  }

  .image-text_19, .image-text_20, .image-text_21, .image-text_22,
  .image-text_23, .image-text_24, .image-text_25, .image-text_26 {
    width: 80%; /* 移动端菜单项宽度 */
    margin: 1.5vh 0; /* 保持与桌面端一致的间距 */
    padding: 1.2vh 2vw; /* 保持与桌面端一致的内边距 */
    min-height: 3vh; /* 保持最小高度 */
  }

  .menu-divider {
    width: 80%; /* 移动端分割线宽度 */
    margin: 1.5vh 0;
  }
}

@media (max-width: 768px) {
  .group_5 {
    padding: 1.04vh 1.04vw; /* 20px转换 */
  }

  .text-wrapper_1 {
    justify-content: flex-start; /* 改为左对齐 */
    gap: 4vw; /* 手机端调整间距 */
    flex-wrap: wrap;
  }

  .text_12, .text_13, .text_14 {
    font-size: 2.5vw; /* 手机端调整字体大小 */
    padding: 0.8vh 0; /* 保持无左右内边距 */
  }

  .course-divider {
    width: 100%; /* 手机端也保持与课程卡片宽度一致 */
  }

  .pagination-wrapper {
    margin-top: 6vh; /* 手机端增加更多上方间距 */
  }

  .pagination {
    gap: 2vw; /* 手机端增加间距 */
  }

  .pagination-item {
    min-width: 8vw; /* 手机端增加按钮宽度 */
    height: 4vh; /* 手机端增加按钮高度 */
    font-size: 2.5vw; /* 手机端调整字体大小 */
    padding: 1vh 2vw;
  }

  .nav-button {
    min-width: 12vw; /* 手机端导航按钮更宽 */
  }

  .page-number {
    min-width: 8vw; /* 手机端页码按钮宽度 */
  }

  .group_7 {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.42vh; /* 8px转换为vh */
  }

  .box_2 {
    padding: 0.83vh 0.83vw; /* 16px转换 */
  }

  .block_4 {
    margin-bottom: 0.63vh; /* 12px转换为vh */
  }

  .box_3 {
    height: 9.38vh; /* 180px转换为vh */
  }
}

@media (max-width: 576px) {
  .profile-page {
    padding: 0;
  }

  .group_5 {
    padding: 0.83vh 0.83vw; /* 16px转换 */
  }

  .text-wrapper_1 {
    gap: 0.83vw; /* 16px转换为vw */
  }

  .text_12, .text_13, .text_14 {
    font-size: 0.83vw; /* 16px转换为vw */
    padding: 0.31vh 0.63vw; /* 6px 12px转换 */
  }

  .box_2 {
    padding: 0.63vh 0.63vw; /* 12px转换 */
  }

  .text_16 {
    font-size: 0.83vw; /* 16px转换为vw */
  }

  .text_19 {
    font-size: 0.68vw; /* 13px转换为vw */
  }

  .group_7 {
    gap: 0.31vh; /* 6px转换为vh */
  }

  .text_20, .text_21, .text_22 {
    font-size: 0.63vw; /* 12px转换为vw */
  }
}
</style>