OL-LearnPlatform-Frontend/src/views/Profile.vue

<template>
  <div class="profile-page">
    <!-- 主要内容区域 -->
    <div class="profile-content flex-row">
      <!-- 左侧侧边栏 -->
      <div class="block_14">
        <!-- 用户头像和姓名 -->
        <SafeAvatar class="image_7" :src="userStore.user?.avatar" :name="userStore.user?.username || '用户'" :size="96"
          alt="用户头像" />
        <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="activeTab === 'courses'
                ? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng20ffb5f85d4f5f49183f6906fe5a3206b51b978ab1d476e24e95dd05c97e6a09'
                : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngc9a739861792bd074fb3af58d5ece46828d647f66e1113746e41e68ae5486135'" />
            <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="activeTab === 'homework'
                ? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd613ce692c6eadda66e54ef98f178d5a6ae612d44a02e796570dd834a371e490'
                : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9ef14366fc1741a8ada8db176341d56e43f72cb07685130ee04c0fc0e70b95e9'" />
            <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="activeTab === 'exam'
                ? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng5c3e9660c1adc146ed9576ae906d29d0b592f759ddd0c48d7b1ad93f7a8639c5'
                : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4661143d8bce67501f22c432ea5115ddbff845d5f37b8f8c76f349b15de07180'" />
            <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="activeTab === 'practice'
                ? 'https://lanhu-oss-proxy.lanhuapp.com/SketchPng6558c077726c2d2f932ceff91145acab526127fb489bc104b128b6221801f4aa'
                : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd1f325e7252c3ebf57f31a81c92eb1c1fd61be28fb49098fb865a27f77a63e31'" />
            <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="activeTab === 'activity'
                ? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3d2b97401a98315b86af3a5082136c97ba2130259ab48915698eb8c17d8450ff'
                : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd427e1476c90b2d1ad642b921f287910a2d5e51f463a0cad40b98ae1acf9d96a'" />
            <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="activeTab === 'message'
                ? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng7fb5ce5c1bb4b41ff636ad31573bda9280b693ecab753c58ffb25f1175e9acaa'
                : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbc201b8b0d2681bdd7653a9816f04ace0187e2d39ea5a9237e930ebd84c036ca'" />
            <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="activeTab === 'materials'
                ? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8de06526f5df90cd28c5910bcccf9c69f4e8e2c597cc4be22551c85f9184a36d'
                : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga5b70cfab4c855b4d41d1b706e4f5fa1a4373e446574b97726d5d78d7608d0c6'" />
            <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="activeTab === 'download'
                ? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngad1dcee8a35e9a4214d2c43a40efac32d603d0e91d741f88a0cc5aa8aa0c9e4d'
                : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngdb0a3a39327fdf8335003faafcb5e7e485342b4f33448b455f9d3ba5ad9999b0'" />
            <span class="text-group_26">我的下载</span>
          </div>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="group_5 flex-col">
        <!-- 课程内容 -->
        <div v-if="isCoursesTab">
          <!-- 课程筛选标签 -->
          <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">
                  <div class="status-image-container">
                    <img class="status-image" referrerpolicy="no-referrer"
                      :src="course.status === 'learning' ? '/images/icon/learning.png' : '/images/icon/finish.png'"
                      alt="{{ getStatusText(course.status) }}" />
                  </div>
                  <img class="thumbnail_4" referrerpolicy="no-referrer" :src="bannerImage" :alt="bannerAlt" />
                  <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/SketchPng317a0d8f3287bb788c48059c8181479ad5eba8557ef1c09215d9a1c962d0db67' : '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 v-else-if="isHomeworkTab" class="homework-content">
          <!-- 作业筛选标签 -->
          <div class="text-wrapper_1 flex-row">
            <span class="text_12" :class="{ active: activeHomeworkTab === 'all' }"
              @click="handleHomeworkTabChange('all')">全部作业</span>
            <span class="text_13" :class="{ active: activeHomeworkTab === 'pending' }"
              @click="handleHomeworkTabChange('pending')">未完成</span>
            <span class="text_14" :class="{ active: activeHomeworkTab === 'completed' }"
              @click="handleHomeworkTabChange('completed')">已完成</span>
            <span class="draftbox">
              <img src="/images/auth/mti.png" alt="">
              <span>草稿箱</span>
            </span>
          </div>
          <!-- 分割线 -->
          <div class="course-divider"></div>

          <!-- 面包屑 -->
          <div class="breadcrumb-wrapper flex-row">
            <span class="text_15">全部作业</span>
            <span class="text_15">></span>
            <span class="text_15 homework">作业名称</span>
          </div>

          <!-- 作业详情视图 -->
          <div v-if="showDetailView && detailAssignment">
            <div class="detail-header">
              <div class="breadcrumb-nav">
                <span class="breadcrumb-item" @click="backToAssignmentList">全部作业</span>
                <span class="breadcrumb-separator">></span>
                <span class="breadcrumb-current">作业名称</span>
              </div>
            </div>

            <div class="group_11">
              <!-- 头部信息 -->
              <div class="box_5">
                <div class="image-text_2">
                  <img :src="detailAssignment.teacherAvatar" alt="教师头像" class="image_22" />
                  <div class="text-group_3">
                    <span class="text_30">{{ detailAssignment.teacherName }}</span>
                    <span class="text_31">{{ detailAssignment.assignTime }}</span>
                  </div>
                </div>
                <span class="text_32"
                  :style="{ color: detailAssignment.status === '未完成' || detailAssignment.status === '待提交' ? '#FF560C' : '#999999' }">{{
                    detailAssignment.status }}</span>
              </div>

              <!-- 作业内容 -->
              <div class="text-group_4">
                <span class="text_33">{{ detailAssignment.title }}</span>
                <div class="description-container">
                  <span class="text_34 description-full-view">
                    {{ detailAssignment.description }}
                  </span>
                </div>
              </div>

              <!-- 作业附件区域 -->
              <div class="box_6">
                <div class="attachment-images">
                  <img v-for="(_, index) in detailAssignment.attachments.slice(0, 5)" :key="index"
                    src="/images/traings/traing1.png" :class="['image_' + (24 + index)]" />
                </div>
              </div>

              <!-- 作业按钮区域 -->
              <div class="assignment-buttons">
                <template v-if="detailAssignment.status === '未完成' || detailAssignment.status === '待提交'">
                  <div class="text-wrapper_8 submit-button" @click="showUploadFromDetail">
                    <span class="text_36">上传作业</span>
                  </div>
                </template>
              </div>
            </div>
          </div>

          <!-- 作业列表 -->
          <div v-else>
            <div v-for="assignment in filteredAssignments" :key="assignment.id" class="group_11">
              <!-- 作业头部信息 -->
              <div class="box_5">
                <div class="image-text_2">
                  <img src="/images/traings/traing1.png" class="image_22" />
                  <div class="text-group_3">
                    <span class="text_30">{{ assignment.teacherName }}</span>
                    <span class="text_31">{{ assignment.assignTime }}</span>
                  </div>
                </div>
                <span class="text_32">
                  <img
                    src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge131c44858bb817d4885b81fdd8ddff8507f62cd51f1025cee826849e6a52c65"
                    alt="">
                  <span> 12321人已完成</span>
                </span>
              </div>


              <!-- 作业内容 -->
              <div class="text-group_4">
                <!-- 分割线 -->
                <div class="course-divider"></div>

                <span class="text_33">{{ assignment.title }}</span>
                <div class="description-container">
                  <span class="text_34 text-truncated">
                    {{ assignment.description }}
                  </span>
                </div>
              </div>

              <!-- 作业附件区域 -->
              <div class="box_6">


                <!-- 附件图片列表 -->
                <div class="attachment-images">
                  <img v-for="(_, index) in assignment.attachments.slice(0, 5)" :key="index"
                    src="/images/traings/traing1.png" :class="['image_' + (24 + index)]" />
                </div>

                <div class="files-container">
                  <div class="file-items">
                    <img src="/images/auth/file.png" alt="" class="files-icon">
                    <span>文件名称.PDF</span>
                    <img src="/images/auth/download.png" alt="" class="files-icon">
                  </div>
                  <div class="file-items">
                    <img src="/images/auth/file.png" alt="" class="files-icon">
                    <span>文件名称.PDF</span>
                    <img src="/images/auth/download.png" alt="" class="files-icon">
                  </div>
                </div>
                <div class="course-name">这里是课程名称!!! <span>查看详情></span></div>

              </div>

              <!-- 作业按钮区域 -->
              <div class="assignment-buttons">
                <!-- 未完成状态显示两个按钮 -->
                <template v-if="assignment.status === '未完成' || assignment.status === '待提交'">
                  <div class="text-wrapper_8 view-button" @click="viewAssignmentDetail(assignment)">
                    <span class="text_36 text-view">上传作业</span>
                  </div>
                </template>
                <!-- 已完成状态只显示一个按钮 -->
                <template v-else>
                  <div class="text-wrapper_8 details-button" @click="viewAssignmentDetail(assignment)">
                    <span class="text_36 text-view">上传作业</span>
                  </div>
                </template>
              </div>


            </div>
          </div>
        </div>

        <!-- 考试内容 -->
        <div v-else-if="isExamTab" class="exam-content">
          <!-- 考试筛选标签 -->
          <div class="text-wrapper_1 flex-row">
            <span class="text_12" :class="{ active: activeExamTab === 'all' }"
              @click="handleExamTabChange('all')">全部考试</span>
            <span class="text_13" :class="{ active: activeExamTab === 'upcoming' }"
              @click="handleExamTabChange('upcoming')">未开始</span>
            <span class="text_14" :class="{ active: activeExamTab === 'ongoing' }"
              @click="handleExamTabChange('ongoing')">进行中</span>
            <span class="text_15" :class="{ active: activeExamTab === 'finished' }"
              @click="handleExamTabChange('finished')">已结束</span>
          </div>

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

          <!-- 考试列表 -->
          <div class="exam-grid">
            <div v-for="exam in filteredExams" :key="exam.id" class="exam-card">
              <!-- 考试标题 -->
              <div class="exam-title">{{ exam.title }}</div>

              <!-- 分数显示 -->
              <div class="exam-score-badge" v-if="exam.score !== null">
                <span class="score-text">{{ exam.score }}<span>分</span></span>
              </div>

              <!-- 考试信息 -->
              <div class="exam-details">
                <div class="exam-meta-item">
                  <span class="meta-label">考试日期：</span>
                  <span class="meta-value">{{ exam.examDate }}</span>
                </div>
                <div class="exam-meta-item">
                  <span class="meta-label">考试时间：</span>
                  <span class="meta-value">{{ exam.duration }}分钟</span>
                </div>
                <div class="exam-meta-item">
                  <span class="meta-label">考试题量：</span>
                  <span class="meta-value">{{ exam.questionCount }}题</span>
                </div>
              </div>

              <!-- 考试描述 -->
              <div class="exam-description">
                {{ exam.description }}
              </div>

              <!-- 底部操作区域 -->
              <div class="exam-footer">
                <div class="exam-action-right">
                  <button v-if="exam.status === 'upcoming'" class="action-btn upcoming-btn" @click="startExam(exam.id)">
                    未开始
                  </button>
                  <button v-else-if="exam.status === 'ongoing'" class="action-btn ongoing-btn"
                    @click="continueExam(exam.id)">
                    开始考试
                  </button>
                  <button v-else-if="exam.status === 'finished'" class="action-btn finished-btn"
                    @click="viewExamResult(exam.id)">
                    查看详情
                  </button>
                </div>
                <div class="exam-status-left">
                  <span class="exam-status-text">{{ getExamStatusText(exam.status) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 练习内容 -->
        <div v-else-if="isPracticeTab" class="practice-content">
          <!-- 练习筛选标签 -->
          <div class="text-wrapper_1 flex-row">
            <span class="text_12" :class="{ active: activePracticeTab === 'all' }"
              @click="handlePracticeTabChange('all')">全部练习</span>
            <span class="text_13" :class="{ active: activePracticeTab === 'ongoing' }"
              @click="handlePracticeTabChange('ongoing')">练习中</span>
            <span class="text_14" :class="{ active: activePracticeTab === 'finished' }"
              @click="handlePracticeTabChange('finished')">已结束</span>
          </div>

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

          <!-- 练习网格 -->
          <div class="exam-grid">
            <div v-for="practice in filteredPractices" :key="practice.id" class="exam-card">
              <!-- 考试标题 -->
              <div class="exam-title">{{ practice.title }}</div>

              <!-- 分数显示 -->
              <div v-if="practice.status === 'finished'" class="practice-score-badge">
                <span class="score-text">{{ practice.score }} <span>分</span></span>
              </div>

              <!-- 考试信息 -->
              <div class="exam-details">
                <div class="exam-meta-item">
                  <span class="meta-label">练习日期：</span>
                  <span class="meta-value">{{ practice.practiceDate }}</span>
                </div>
                <div class="exam-meta-item">
                  <span class="meta-label">练习时间：</span>
                  <span class="meta-value">{{ practice.duration }}分钟</span>
                </div>
                <div class="exam-meta-item">
                  <span class="meta-label">题库数量：</span>
                  <span class="meta-value">{{ practice.questionCount }}</span>
                </div>
              </div>

              <!-- 动态显示内容 -->
              <div v-if="practice.status === 'finished'" class="practice-stats">
                <div class="stat-row">
                  <span class="stat-label">答对</span>
                  <span class="stat-value correct">{{ practice.correctCount || 0 }}<span>题</span></span>
                </div>
                <!-- 分割线 -->
                <div class="divider"></div>
                <div class="stat-row">
                  <span class="stat-label">答错</span>
                  <span class="stat-value wrong">{{ practice.wrongCount || 0 }}<span>题</span></span>
                </div>
              </div>
              <div v-else class="exam-description">
                {{ practice.description || '该练习包含' + practice.questionCount + '道题目，涵盖了相关知识点。' }}
              </div>

              <!-- 底部操作区域 -->
              <div class="exam-footer">
                <div class="exam-action-right">
                  <button v-show="practice.status === 'ongoing'" class="action-btn ongoing-btn"
                    @click="continuePractice(practice.id)">
                    继续练习
                  </button>
                  <button v-show="practice.status === 'finished'" class="action-btn finished-btn"
                    @click="viewPracticeDetail(practice.id)">
                    查看详情
                  </button>
                </div>
                <div class="exam-status-left">
                  <span class="exam-status-text">{{ practice.status === 'ongoing' ? '练习中' : '已结束' }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 活动内容 -->
        <div v-else-if="isActivityTab" class="activity-content">
          <!-- 活动筛选标签 -->
          <div class="text-wrapper_1 flex-row">
            <span class="text_12" :class="{ active: activeActivityTab === 'all' }"
              @click="handleActivityTabChange('all')">全部活动</span>
            <span class="text_13" :class="{ active: activeActivityTab === 'ongoing' }"
              @click="handleActivityTabChange('ongoing')">进行中</span>
            <span class="text_14" :class="{ active: activeActivityTab === 'finished' }"
              @click="handleActivityTabChange('finished')">已结束</span>
          </div>

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

          <!-- 活动网格 -->
          <div class="activity-grid">
            <div v-for="activity in filteredActivities" :key="activity.id" class="activity-card">
              <!-- 活动卡片顶部图片 -->
              <div class="activity-card-image">
                <img src="/banners/banner1.png" alt="活动图片" class="activity-image" />
              </div>

              <!-- 活动标题 -->
              <h3 class="activity-title">{{ activity.title }}</h3>


              <!-- 活动简介 -->
              <div class="activity-intro">
                <!-- <div class="intro-title">活动简介</div> -->
                <div class="intro-content">
                  {{ activity.description }}
                </div>
              </div>

              <!-- 活动详情 -->
              <div class="activity-details">
                <div class="activity-meta-item">
                  <span class="meta-label">活动时间：</span>
                  <span class="meta-value">{{ activity.activityDate }}</span>
                </div>
                <div class="activity-meta-item">
                  <span class="meta-label">活动类型：</span>
                  <span class="meta-value">{{ activity.activityType }}</span>
                </div>
                <div class="activity-meta-item">
                  <span class="meta-label">已报名：</span>
                  <span class="meta-value">{{ activity.registeredCount }}</span>
                </div>
              </div>



              <!-- 活动底部 -->
              <div class="activity-footer">
                <div class="activity-action-right">
                  <button v-if="activity.status === 'ongoing'" class="action-btn ongoing-btn"
                    @click="continueActivity(activity.id)">
                    查看活动
                  </button>
                  <button v-else-if="activity.status === 'finished'"
                    class="action-btn finished-btn activity-finished-btn" @click="viewActivityDetail(activity.id)">
                    查看详情
                  </button>
                </div>
                <div class="activity-status-left">
                  <span :class="['activity-status-text', activity.status]">{{ activity.status === 'ongoing' ? '进行中' :
                    '已结束'
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 消息内容 -->
        <div v-else-if="isMessageTab" class="message-content">
          <!-- 消息筛选标签 -->
          <div class="message-header">
            <div class="message-tabs">
              <span class="message-tab-item" :class="{ active: activeMessageTab === 'all' }"
                @click="handleMessageTabChange('all')">
                评论
                <span class="message-count">3</span>
              </span>
              <span class="message-tab-item" :class="{ active: activeMessageTab === 'system' }"
                @click="handleMessageTabChange('system')">
                系统消息
              </span>
            </div>
            <div class="message-actions">
              <span class="action-link">全部已读</span>
              <span class="action-link">按时间</span>
            </div>
          </div>

          <!-- 消息列表 -->
          <div class="message-list">
            <!-- 普通消息 -->
            <div v-for="msg in filteredMessages" :key="msg.id" class="message-item">
              <!-- 未读标识 - 移到右上角 -->
              <div v-if="!msg.isRead" class="unread-indicator-top-right"></div>

              <!-- 消息内容 -->
              <div class="message-main">
                <!-- 用户头像和信息 -->
                <div class="message-user">
                  <img src="/images/traings/traing1.png" class="image_22" />
                  <div class="user-info">
                    <div class="user-content">
                      <span class="message-text">{{ msg.senderName }}：{{ msg.content }}</span>
                    </div>
                    <div class="course-info-container">
                      <span class="course-label">回复我的课程：</span>
                      <span class="course-name">《{{ msg.courseName }}》</span>
                    </div>
                  </div>
                  <div class="message-time">{{ msg.date }}</div>
                </div>

                <!-- 操作按钮 -->
                <div class="message-actions-row">
                  <button class="message-action-btn reply-btn" @click="startReply(msg.id)">
                    <i class="icon-reply"></i>
                    回复
                  </button>
                  <button class="message-action-btn delete-btn">
                    <i class="icon-delete"></i>
                    删除
                  </button>
                  <button class="message-action-btn report-btn">
                    <i class="icon-report"></i>
                    举报
                  </button>
                </div>

                <!-- 回复区域 -->
                <div v-if="replyingMessageId === msg.id" class="reply-section">
                  <div class="reply-input-container">
                    <n-input v-model:value="replyContent" type="textarea" placeholder="请输入回复内容..." :rows="3"
                      class="reply-input" />
                    <div class="reply-actions">
                      <n-button size="small" @click="cancelReply">取消</n-button>
                      <n-button type="primary" size="small" @click="sendReply(msg.id)">发送</n-button>
                    </div>
                  </div>
                </div>

                <!-- 已有回复显示 -->
                <div v-if="msg.hasReply && msg.replyContent" class="existing-reply">
                  <div class="reply-content">{{ msg.replyContent }}</div>
                </div>
              </div>
            </div>

            <!-- 系统消息 -->
            <div v-for="sysMsg in filteredSystemMessages" :key="'sys-' + sysMsg.id" class="system-message-item">
              <!-- 未读标识 - 移到右上角 -->
              <div v-if="!sysMsg.isRead" class="unread-indicator-top-right"></div>

              <!-- 系统消息内容 -->
              <div class="system-message-main">
                <!-- 系统图标和信息 -->
                <div class="system-message-user">
                  <div class="system-icon"></div>
                  <div class="system-info">
                    <div class="system-title">{{ sysMsg.title }}</div>
                    <div class="system-subtitle-row">
                      <span class="system-subtitle">{{ sysMsg.subtitle }}</span>
                      <span class="system-detail-link">查看详情></span>
                    </div>
                  </div>
                  <div class="system-time">{{ sysMsg.date }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 我的资料页面 -->
        <div v-else-if="activeTab === 'materials'" class="materials-content">
          <!-- 资料页面标签页 -->
          <div class="materials-header">
            <div class="materials-tabs">
              <span class="materials-tab-item" :class="{ active: activeMaterialsTab === 'basic' }"
                @click="handleMaterialsTabChange('basic')">
                基础信息
              </span>
              <span class="materials-tab-item" :class="{ active: activeMaterialsTab === 'password' }"
                @click="handleMaterialsTabChange('password')">
                密码修改
              </span>
            </div>
          </div>

          <!-- 基础信息页面 -->
          <div v-if="activeMaterialsTab === 'basic'" class="basic-info-content">
            <div class="basic-info-container">
              <h3 class="basic-info-title">基础信息</h3>

              <!-- 用户头像 -->
              <div class="avatar-section">
                <div class="avatar-container">
                  <SafeAvatar :src="userStore.user?.avatar"
                    :name="userStore.user?.username || userInfo.nickname || '用户'" :size="68" alt="用户头像"
                    class="user-avatar-large" />
                  <div class="avatar-edit-btn">
                    <img
                      src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf31d99a65996c8c8ed0d6b2446b4176a30b16838933c10b800a735d092717c57"
                      alt="编辑头像" class="edit-icon" />
                  </div>
                </div>
              </div>

              <!-- 基础信息表单 -->
              <div class="basic-info-form">
                <div class="form-row">
                  <div class="form-group">
                    <label class="form-label">昵称：</label>
                    <input v-model="userInfo.nickname" type="text" class="form-input" placeholder="张成学" />
                  </div>
                  <div class="form-group">
                    <label class="form-label">性别：</label>
                    <select v-model="userInfo.gender" class="form-select">
                      <option value="男">男</option>
                      <option value="女">女</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label class="form-label">所在院校：</label>
                    <input v-model="userInfo.college" type="text" class="form-input" placeholder="北京清华大学" />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 密码修改页面 -->
          <div v-else-if="activeMaterialsTab === 'password'" class="password-content">
            <div class="password-container">
              <h3 class="password-title">密码修改</h3>

              <div class="password-form">
                <!-- 账号显示 -->
                <div class="password-form-group">
                  <label class="password-form-label">账号：</label>
                  <div class="account-display">{{ userInfo.phone || '18658822666654' }}</div>
                </div>

                <!-- 原密码 -->
                <div class="password-form-group">
                  <label class="password-form-label">原密码：</label>
                  <input v-model="passwordForm.currentPassword" type="password" class="password-form-input"
                    placeholder="请输入原密码" />
                </div>

                <!-- 新密码 -->
                <div class="password-form-group">
                  <label class="password-form-label">新密码：</label>
                  <input v-model="passwordForm.newPassword" type="password" class="password-form-input"
                    placeholder="请输入新密码" />
                </div>

                <!-- 确认密码 -->
                <div class="password-form-group">
                  <label class="password-form-label">确认密码：</label>
                  <input v-model="passwordForm.confirmPassword" type="password" class="password-form-input"
                    placeholder="请输入确认新密码" />
                </div>

                <!-- 保存按钮 -->
                <div class="password-form-actions">
                  <button class="password-save-btn" @click="savePassword">保存</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 我的下载页面 -->
        <div v-else-if="activeTab === 'download'" class="download-content"
          :class="{ 'in-subdirectory': isInSubDirectory }">
          <!-- 下载页面标签页 -->
          <div class="download-header">
            <div class="download-tabs">
              <span class="download-tab-item" :class="{ active: activeDownloadTab === 'courseware' }"
                @click="handleDownloadTabChange('courseware')">
                课件
              </span>
              <span class="download-tab-item" :class="{ active: activeDownloadTab === 'certificate' }"
                @click="handleDownloadTabChange('certificate')">
                证书
              </span>
              <span class="download-tab-item" :class="{ active: activeDownloadTab === 'resources' }"
                @click="handleDownloadTabChange('resources')">
                资源库
              </span>
            </div>
          </div>

          <!-- 面包屑导航或筛选和操作区域 -->
          <div v-if="isInSubDirectory" class="breadcrumb-controls">
            <div class="breadcrumb-nav">
              <span class="breadcrumb-text" @click="goBack">课件&gt;图片&gt;</span>
              <span class="breadcrumb-current">风景图片</span>
            </div>
          </div>

          <!-- 筛选和操作区域 -->
          <!-- <div v-else class="download-controls">
                <div class="download-filters">
                  <div class="filter-group">
                    <label class="filter-label">类型：</label>
                    <select v-model="downloadFilter.type" class="filter-select">
                      <option value="all">全部</option>
                      <option value="folder">文件夹</option>
                      <option value="file">文件</option>
                    </select>
                  </div>
                  <div class="search-group">
                    <label class="search-label">搜索：</label>
                    <div class="search-input-container">
                      <input v-model="downloadFilter.keyword" type="text" class="search-input" placeholder="请输入文件名称" />
                      <button class="search-btn">
                        <img
                          src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng870a86da8af58a60f35fcb27ef4822e645d2ad5aaabe6416e4179342a53a5a60"
                          alt="搜索图标"
                          class="search-icon"
                        />
                      </button>
                    </div>
                  </div>
                </div>
                <div class="download-actions">
                  <span class="file-count">已全部加载，共17个文件</span>
                  <button class="new-folder-btn" @click="createNewFolder">
                    + 新建文件夹
                  </button>
                </div>
              </div> -->

          <!-- 文件网格 -->
          <div class="files-grid"
            :class="{ 'subdirectory-grid': isInSubDirectory, 'certificate-grid': activeDownloadTab === 'certificate' }">
            <div v-for="file in filteredDownloadFiles" :key="file.id" class="file-item"
              :class="{ 'subdirectory-item': isInSubDirectory }" @click="handleFileClick(file)">
              <div class="file-menu">
                <button class="file-menu-btn" @click.stop="toggleFileMenu(file.id)">
                  <img
                    src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng1f96e64d810ff7154af17a1f9bef9665cc41358b12d59c243d080f9bf3d5e800"
                    alt="更多操作" class="more-icon" />
                </button>
                <div v-if="activeFileMenu === file.id" class="file-menu-dropdown">
                  <div class="menu-item" @click.stop="renameFile(file.id)">
                    <img
                      src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8c1b4f7b8ae5989716b5b18684021a14f22783c6eea8bb3185e98ed8ed9f2368"
                      alt="编辑图标" class="menu-icon" />
                    <span>编辑</span>
                  </div>
                  <div class="menu-item" @click.stop="deleteFile(file.id)">
                    <img
                      src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9819d7dffe9a246731b571d8d60f2beb2f6819a6b417ca2b4eeb41e288d7b1f3"
                      alt="删除图标" class="menu-icon" />
                    <span>删除</span>
                  </div>
                </div>
              </div>
              <div class="file-icon">
                <img :src="getFileIcon()" alt="文件图标" class="folder-icon" />
              </div>
              <div class="file-name">{{ file.name }}</div>
            </div>
          </div>
        </div>

        <!-- 其他内容的占位符 -->
        <div v-else class="other-content">
          <h2>{{ getTabTitle(activeTab) }}</h2>
          <p>{{ activeTab }}功能开发中...</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 上传作业弹窗 -->
  <n-modal v-model:show="showModal" preset="card" title="上传作业" style="width: 600px;" :mask-closable="false">
    <template v-if="currentAssignment">
      <div class="assignment-info">
        <h3>{{ currentAssignment.title }}</h3>
        <p>{{ currentAssignment.description }}</p>
      </div>
      <n-form>
        <n-form-item label="标题名称" required>
          <n-input v-model:value="uploadForm.title" placeholder="请输入标题" />
        </n-form-item>
        <n-form-item label="编辑内容" required>
          <n-input v-model:value="uploadForm.content" type="textarea" placeholder="请输入内容"
            :autosize="{ minRows: 3, maxRows: 6 }" />
        </n-form-item>
        <n-form-item label="上传文件" required>
          <n-upload multiple directory-dnd :custom-request="customRequest" :default-upload="false">
            <n-button>选择文件</n-button>
          </n-upload>
          <div class="file-list" v-if="uploadForm.files.length > 0">
            <div v-for="(file, index) in uploadForm.files" :key="index" class="file-item">
              <span>{{ file.name }}</span>
              <span>{{ (file.size / 1024).toFixed(2) }} KB</span>
            </div>
          </div>
        </n-form-item>
      </n-form>
      <div class="modal-footer">
        <n-button @click="closeUploadModal">取消</n-button>
        <n-button type="primary" @click="submitAssignment" style="margin-left: 12px;">确认</n-button>
      </div>
    </template>
  </n-modal>

  <!-- 考试详情页面 -->
  <ExamDetail v-if="showExamDetail && currentExamDetail" :currentExamDetail="currentExamDetail"
    :currentDetailType="currentDetailType" @close="closeExamDetail" />


</template>

<script setup lang="ts">
import { ref, computed, onMounted, reactive } from 'vue'
import { useMessage, NModal, NUpload, NInput, NForm, NFormItem, NButton } from 'naive-ui'
import { useI18n } from 'vue-i18n'
import { useUserStore } from '@/stores/user'
import SafeAvatar from '@/components/common/SafeAvatar.vue'
import ExamDetail from '../components/ExamDetail.vue';

const { t, locale } = useI18n()

// 轮播图根据语言动态切换
const bannerImage = computed(() => {
  return locale.value === 'zh' ? '/banners/banner8.png' : '/banners/banner1-en.png'
})

const bannerAlt = computed(() => {
  return t('home.banner.alt')
})

// 定义课程接口
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
}

// 定义作业接口
interface Assignment {
  id: number
  teacherName: string
  teacherAvatar: string
  assignTime: string
  status: string
  title: string
  description: string
  attachments: Array<{
    icon: string
    name: string
  }>
  mainImage: string
}

// 定义考试接口
interface Exam {
  id: number
  title: string
  examDate: string
  duration: number
  questionCount: number
  description: string
  status: 'upcoming' | 'ongoing' | 'finished'
  score: number | null
}

// 考试题目选项接口
interface ExamOption {
  id: string
  text: string
  image?: string
}

// 考试题目接口
interface ExamQuestion {
  id: number
  type: 'single' | 'multiple'
  title: string
  content: string
  options: ExamOption[]
  correctAnswers: string[]
  userAnswers: string[]
  isCorrect: boolean
}

// 考试详情接口
interface ExamDetail {
  id: number
  title: string
  examDate: string
  duration: number
  totalQuestions: number
  correctCount: number
  wrongCount: number
  score: number
  questions: ExamQuestion[]
}

// 练习接口
interface Practice {
  id: number
  title: string
  practiceDate: string
  duration: number
  questionCount: number
  description: string
  status: 'ongoing' | 'finished'
  score: number | null
  correctCount: number
  wrongCount: number
}

// 练习详情接口（复用考试题目结构）
interface PracticeDetail {
  id: number
  title: string
  practiceDate: string
  duration: number
  totalQuestions: number
  correctCount: number
  wrongCount: number
  score: number
  questions: ExamQuestion[]
}

// 活动接口
interface Activity {
  id: number
  title: string
  subtitle: string
  courseTitle: string
  activityDate: string
  duration: number
  activityType: string
  registeredCount: string
  description: string
  status: 'ongoing' | 'finished'
  score: number | null
}

// 消息接口
interface Message {
  id: number
  senderName: string
  senderAvatar: string
  content: string
  courseName: string
  date: string
  isRead: boolean
  hasReply: boolean
  replyContent?: string
}

// 系统消息接口
interface SystemMessage {
  id: number
  title: string
  subtitle: string
  date: string
  isRead: boolean
}



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

// 定义标签页类型
type TabType = 'courses' | 'homework' | 'exam' | 'practice' | 'activity' | 'message' | 'materials' | 'download'

const activeTab = ref<TabType>('courses')
const activeCourseTab = ref('all')

// 作业筛选状态
const activeHomeworkTab = ref('all')

// 考试筛选状态
const activeExamTab = ref('all')

// 练习筛选状态
const activePracticeTab = ref('all')

// 活动筛选状态
const activeActivityTab = ref('all')

// 消息相关状态
const activeMessageTab = ref('all')
const replyingMessageId = ref<number | null>(null)
const replyContent = ref('')

// 资料相关状态
const activeMaterialsTab = ref('basic')

// 用户信息
const userInfo = reactive({
  avatar: '/images/traings/traing1.png',
  nickname: '张成学',
  gender: '男',
  college: '北京清华大学',
  phone: '18658822666654'
})

// 密码修改表单
const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 下载相关状态
const activeDownloadTab = ref('courseware')
const activeFileMenu = ref<number | null>(null)
const currentPath = ref<string[]>([]) // 当前路径，用于面包屑
const isInSubDirectory = ref(false) // 是否在子目录中

// 下载筛选条件
const downloadFilter = reactive({
  type: 'all',
  keyword: ''
})

// 下载文件数据
const downloadFiles = reactive([
  { id: 1, name: '图片', type: 'folder', category: 'courseware' },
  { id: 2, name: '文档', type: 'folder', category: 'courseware' },
  { id: 3, name: '视频', type: 'folder', category: 'courseware' },
  { id: 4, name: '样子', type: 'folder', category: 'courseware' },
  { id: 5, name: '音频', type: 'folder', category: 'courseware' },
  { id: 6, name: '文件名称', type: 'folder', category: 'courseware' },
  { id: 7, name: '文件名称', type: 'folder', category: 'courseware' },
  { id: 8, name: '文件名称', type: 'folder', category: 'courseware' },
  { id: 9, name: '文件名称', type: 'folder', category: 'courseware' },
  { id: 10, name: '文件名称', type: 'folder', category: 'courseware' },
  { id: 11, name: '文件名称', type: 'folder', category: 'courseware' },
  { id: 12, name: '文件名称', type: 'folder', category: 'courseware' },
  { id: 13, name: '证书文件1', type: 'folder', category: 'certificate' },
  { id: 14, name: '证书文件2', type: 'folder', category: 'certificate' },
  { id: 15, name: '资源文件1', type: 'folder', category: 'resources' }

])

// 分页相关状态
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
  }
]

// 模拟作业数据（基于蓝湖UI设计）
const mockAssignments: Assignment[] = [
  {
    id: 1,
    teacherName: '张老师',
    teacherAvatar: '/images/traings/traing1.png',
    assignTime: '2024-01-15',
    status: '待提交',
    title: '教育心理学课程设计作业',
    description: '请根据所学的教育心理学理论，设计一个完整的课程教学方案，包括教学目标、教学内容、教学方法、教学评价等方面。要求理论联系实际，体现现代教育理念。',
    attachments: [
      { icon: '/images/traings/traing1.png', name: '作业要求.pdf' },
      { icon: '/images/traings/traing1.png', name: '参考资料.docx' },
      { icon: '/images/traings/traing1.png', name: '模板文件.pptx' },
      { icon: '/images/traings/traing1.png', name: '评分标准.pdf' },
      { icon: '/images/traings/traing1.png', name: '案例分析.xlsx' }
    ],
    mainImage: '/images/traings/traing1.png'
  },
  {
    id: 2,
    teacherName: '李老师',
    teacherAvatar: '/images/traings/traing1.png',
    assignTime: '2024-01-20',
    status: '已提交',
    title: '现代教育技术应用实践报告',
    description: '结合本学期所学的现代教育技术知识，选择一个具体的教学场景，设计并实施一个融合信息技术的教学活动，撰写实践报告。',
    attachments: [
      { icon: '/images/traings/traing1.png', name: '实践指导.pdf' },
      { icon: '/images/traings/traing1.png', name: '报告模板.docx' },
      { icon: '/images/traings/traing1.png', name: '技术工具清单.xlsx' },
      { icon: '/images/traings/traing1.png', name: '评价量表.pdf' },
      { icon: '/images/traings/traing1.png', name: '优秀案例.pptx' }
    ],
    mainImage: '/images/traings/traing1.png'
  },
  {
    id: 3,
    teacherName: '王老师',
    teacherAvatar: '/images/traings/traing1.png',
    assignTime: '2024-01-18',
    status: '未完成',
    title: '数字化教学资源开发',
    description: '开发一套完整的数字化教学资源，包括课件制作、视频录制、在线测试设计等，要求体现现代教育技术的应用特点。',
    attachments: [
      { icon: '/images/traings/traing1.png', name: '开发指南.pdf' },
      { icon: '/images/traings/traing1.png', name: '技术要求.docx' },
      { icon: '/images/traings/traing1.png', name: '示例资源.zip' }
    ],
    mainImage: '/images/traings/traing1.png'
  },
  {
    id: 4,
    teacherName: '刘老师',
    teacherAvatar: '/images/traings/traing1.png',
    assignTime: '2024-01-10',
    status: '已完成',
    title: '在线教育平台使用报告',
    description: '体验并分析主流在线教育平台的功能特点，撰写详细的使用报告和改进建议。',
    attachments: [
      { icon: '/images/traings/traing1.png', name: '平台列表.pdf' },
      { icon: '/images/traings/traing1.png', name: '评价标准.docx' }
    ],
    mainImage: '/images/traings/traing1.png'
  }
]

// 模拟考试数据
const mockExams: Exam[] = [
  {
    id: 1,
    title: 'C++语言程序设计基础考试',
    examDate: '2025-07-18 10:00',
    duration: 120,
    questionCount: 100,
    description: '考试涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。',
    status: 'upcoming',
    score: null
  },
  {
    id: 2,
    title: 'C++语言程序设计基础考试',
    examDate: '2025-07-18 10:00',
    duration: 120,
    questionCount: 100,
    description: '考试涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。',
    status: 'ongoing',
    score: null
  },
  {
    id: 3,
    title: 'C++语言程序设计基础考试',
    examDate: '2025-07-18 10:00',
    duration: 120,
    questionCount: 100,
    description: '考试涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。',
    status: 'finished',
    score: 90
  },
  {
    id: 4,
    title: 'C++语言程序设计基础考试',
    examDate: '2025-07-18 10:00',
    duration: 120,
    questionCount: 100,
    description: '考试涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。',
    status: 'upcoming',
    score: null
  },
  {
    id: 5,
    title: 'C++语言程序设计基础考试',
    examDate: '2025-07-18 10:00',
    duration: 120,
    questionCount: 100,
    description: '考试涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。',
    status: 'ongoing',
    score: null
  },
  {
    id: 6,
    title: 'C++语言程序设计基础考试',
    examDate: '2025-07-18 10:00',
    duration: 120,
    questionCount: 100,
    description: '考试涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。',
    status: 'finished',
    score: 90
  },
  {
    id: 7,
    title: 'C++语言程序设计基础考试',
    examDate: '2025-07-18 10:00',
    duration: 120,
    questionCount: 100,
    description: '考试涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。',
    status: 'upcoming',
    score: null
  },
  {
    id: 8,
    title: 'C++语言程序设计基础考试',
    examDate: '2025-07-18 10:00',
    duration: 120,
    questionCount: 100,
    description: '考试涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。',
    status: 'finished',
    score: 90
  },
  {
    id: 9,
    title: 'C++语言程序设计基础考试',
    examDate: '2025-07-18 10:00',
    duration: 120,
    questionCount: 100,
    description: '考试涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。',
    status: 'ongoing',
    score: null
  }
]

// 模拟考试详情数据
const mockExamDetails: { [key: number]: ExamDetail } = {
  3: {
    id: 3,
    title: 'C++语言程序设计基础考试',
    examDate: '2025-07-30 12:00',
    duration: 100,
    totalQuestions: 120,
    correctCount: 90,
    wrongCount: 10,
    score: 98,
    questions: [
      {
        id: 1,
        type: 'single',
        title: '[单选题]',
        content: '危险化学品生产企业应当提供危险化学品安全技术说明书，并在包装（包括外包装）上标识，或者将技术与包装内危险化学品相符的化学品（）和安全技术说明书。',
        options: [
          { id: 'A', text: 'A.操作规范说明书' },
          { id: 'B', text: 'B.应急处理措施' },
          { id: 'C', text: 'C.安全标签' },
          { id: 'D', text: 'D.产品合格证' }
        ],
        correctAnswers: ['B'],
        userAnswers: ['B'],
        isCorrect: true
      },
      {
        id: 2,
        type: 'multiple',
        title: '[多选题]',
        content: '危险化学品生产企业应当提供危险化学品安全技术说明书，并在包装（包括外包装）上标识，或者将技术与包装内危险化学品相符的化学品（）和安全技术说明书。',
        options: [
          { id: 'A', text: 'A.操作规范说明书', image: '/images/exam/option-a.png' },
          { id: 'B', text: 'B.应急处理措施', image: '/images/exam/option-b.png' },
          { id: 'C', text: 'C.安全标签' },
          { id: 'D', text: 'D.产品合格证', image: '/images/exam/option-d.png' },
          { id: 'E', text: 'E.产品标签' }
        ],
        correctAnswers: ['A', 'B'],
        userAnswers: ['A', 'B'],
        isCorrect: true
      }
    ]
  },
  6: {
    id: 6,
    title: 'C++语言程序设计基础考试',
    examDate: '2025-07-30 12:00',
    duration: 100,
    totalQuestions: 120,
    correctCount: 90,
    wrongCount: 10,
    score: 98,
    questions: [
      {
        id: 1,
        type: 'single',
        title: '[单选题]',
        content: '危险化学品生产企业应当提供危险化学品安全技术说明书，并在包装（包括外包装）上标识，或者将技术与包装内危险化学品相符的化学品（）和安全技术说明书。',
        options: [
          { id: 'A', text: 'A.操作规范说明书' },
          { id: 'B', text: 'B.应急处理措施' },
          { id: 'C', text: 'C.安全标签' },
          { id: 'D', text: 'D.产品合格证' }
        ],
        correctAnswers: ['B'],
        userAnswers: ['B'],
        isCorrect: true
      },
      {
        id: 2,
        type: 'multiple',
        title: '[多选题]',
        content: '危险化学品生产企业应当提供危险化学品安全技术说明书，并在包装（包括外包装）上标识，或者将技术与包装内危险化学品相符的化学品（）和安全技术说明书。',
        options: [
          { id: 'A', text: 'A.操作规范说明书', image: '/images/exam/option-a.png' },
          { id: 'B', text: 'B.应急处理措施', image: '/images/exam/option-b.png' },
          { id: 'C', text: 'C.安全标签' },
          { id: 'D', text: 'D.产品合格证', image: '/images/exam/option-d.png' },
          { id: 'E', text: 'E.产品标签' }
        ],
        correctAnswers: ['A', 'B'],
        userAnswers: ['A', 'B'],
        isCorrect: true
      }
    ]
  },
  8: {
    id: 8,
    title: 'C++语言程序设计基础考试',
    examDate: '2025-07-30 12:00',
    duration: 100,
    totalQuestions: 120,
    correctCount: 90,
    wrongCount: 10,
    score: 98,
    questions: [
      {
        id: 1,
        type: 'single',
        title: '[单选题]',
        content: '危险化学品生产企业应当提供危险化学品安全技术说明书，并在包装（包括外包装）上标识，或者将技术与包装内危险化学品相符的化学品（）和安全技术说明书。',
        options: [
          { id: 'A', text: 'A.操作规范说明书' },
          { id: 'B', text: 'B.应急处理措施' },
          { id: 'C', text: 'C.安全标签' },
          { id: 'D', text: 'D.产品合格证' }
        ],
        correctAnswers: ['B'],
        userAnswers: ['B'],
        isCorrect: true
      },
      {
        id: 2,
        type: 'multiple',
        title: '[多选题]',
        content: '危险化学品生产企业应当提供危险化学品安全技术说明书，并在包装（包括外包装）上标识，或者将技术与包装内危险化学品相符的化学品（）和安全技术说明书。',
        options: [
          { id: 'A', text: 'A.操作规范说明书', image: '/images/exam/option-a.png' },
          { id: 'B', text: 'B.应急处理措施', image: '/images/exam/option-b.png' },
          { id: 'C', text: 'C.安全标签' },
          { id: 'D', text: 'D.产品合格证', image: '/images/exam/option-d.png' },
          { id: 'E', text: 'E.产品标签' }
        ],
        correctAnswers: ['A', 'B'],
        userAnswers: ['A', 'B'],
        isCorrect: true
      }
    ]
  },
  9: {
    id: 9,
    title: 'C++语言程序设计基础考试',
    examDate: '2025-07-30 12:00',
    duration: 100,
    totalQuestions: 120,
    correctCount: 90,
    wrongCount: 10,
    score: 98,
    questions: [
      {
        id: 1,
        type: 'single',
        title: '[单选题]',
        content: '危险化学品生产企业应当提供危险化学品安全技术说明书，并在包装（包括外包装）上标识，或者将技术与包装内危险化学品相符的化学品（）和安全技术说明书。',
        options: [
          { id: 'A', text: 'A.操作规范说明书' },
          { id: 'B', text: 'B.应急处理措施' },
          { id: 'C', text: 'C.安全标签' },
          { id: 'D', text: 'D.产品合格证' }
        ],
        correctAnswers: ['B'],
        userAnswers: ['B'],
        isCorrect: true
      },
      {
        id: 2,
        type: 'multiple',
        title: '[多选题]',
        content: '危险化学品生产企业应当提供危险化学品安全技术说明书，并在包装（包括外包装）上标识，或者将技术与包装内危险化学品相符的化学品（）和安全技术说明书。',
        options: [
          { id: 'A', text: 'A.操作规范说明书', image: '/images/exam/option-a.png' },
          { id: 'B', text: 'B.应急处理措施', image: '/images/exam/option-b.png' },
          { id: 'C', text: 'C.安全标签' },
          { id: 'D', text: 'D.产品合格证', image: '/images/exam/option-d.png' },
          { id: 'E', text: 'E.产品标签' }
        ],
        correctAnswers: ['A', 'B'],
        userAnswers: ['A', 'B'],
        isCorrect: true
      }
    ]
  }
}

// 模拟练习数据
const mockPractices: Practice[] = [
  {
    id: 1,
    title: 'C++语言程序设计基础练习题',
    practiceDate: '2025-07-18 10:00',
    duration: 120,
    questionCount: 100,
    description: '练习涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。',
    status: 'ongoing',
    score: null,
    correctCount: 18,
    wrongCount: 15
  },
  {
    id: 2,
    title: 'C++语言程序设计基础练习题',
    practiceDate: '2025-07-18 10:00',
    duration: 88,
    questionCount: 100,
    description: '练习涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。',
    status: 'finished',
    score: 90,
    correctCount: 18,
    wrongCount: 15
  },
  {
    id: 3,
    title: 'C++语言程序设计基础练习题',
    practiceDate: '2025-07-18 10:00',
    duration: 88,
    questionCount: 100,
    description: '练习涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。',
    status: 'finished',
    score: 90,
    correctCount: 18,
    wrongCount: 15
  },
  {
    id: 4,
    title: 'C++语言程序设计基础练习题',
    practiceDate: '2025-07-18 10:00',
    duration: 120,
    questionCount: 100,
    description: '练习涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。',
    status: 'ongoing',
    score: null,
    correctCount: 18,
    wrongCount: 15
  },
  {
    id: 5,
    title: 'C++语言程序设计基础练习题',
    practiceDate: '2025-07-18 10:00',
    duration: 88,
    questionCount: 100,
    description: '练习涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。',
    status: 'finished',
    score: 90,
    correctCount: 18,
    wrongCount: 15
  },
  {
    id: 6,
    title: 'C++语言程序设计基础练习题',
    practiceDate: '2025-07-18 10:00',
    duration: 88,
    questionCount: 100,
    description: '练习涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。',
    status: 'finished',
    score: 90,
    correctCount: 18,
    wrongCount: 15
  }
]

// 模拟活动数据
const mockActivities: Activity[] = [
  {
    id: 1,
    title: '2025计算机二级',
    subtitle: 'C语言讲练综合班',
    courseTitle: '2025计算机二级C语言讲练综合班',
    activityDate: '2025-07-18 10:00',
    duration: 120,
    activityType: '激励类活动',
    registeredCount: '100/200',
    description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容。',
    status: 'ongoing',
    score: null
  },
  {
    id: 2,
    title: '2025计算机二级',
    subtitle: 'C语言讲练综合班',
    courseTitle: '2025计算机二级C语言讲练综合班',
    activityDate: '2025-07-18 10:00',
    duration: 88,
    activityType: '激励类活动',
    registeredCount: '100/200',
    description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容。',
    status: 'finished',
    score: null
  },
  {
    id: 3,
    title: '2025计算机二级',
    subtitle: 'C语言讲练综合班',
    courseTitle: '2025计算机二级C语言讲练综合班',
    activityDate: '2025-07-18 10:00',
    duration: 88,
    activityType: '激励类活动',
    registeredCount: '100/200',
    description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容。',
    status: 'finished',
    score: null
  },
  {
    id: 4,
    title: '2025计算机二级',
    subtitle: 'C语言讲练综合班',
    courseTitle: '2025计算机二级C语言讲练综合班',
    activityDate: '2025-07-18 10:00',
    duration: 120,
    activityType: '激励类活动',
    registeredCount: '100/200',
    description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容。',
    status: 'ongoing',
    score: null
  },
  {
    id: 5,
    title: '2025计算机二级',
    subtitle: 'C语言讲练综合班',
    courseTitle: '2025计算机二级C语言讲练综合班',
    activityDate: '2025-07-18 10:00',
    duration: 88,
    activityType: '激励类活动',
    registeredCount: '100/200',
    description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容。',
    status: 'finished',
    score: null
  },
  {
    id: 6,
    title: '2025计算机二级',
    subtitle: 'C语言讲练综合班',
    courseTitle: '2025计算机二级C语言讲练综合班',
    activityDate: '2025-07-18 10:00',
    duration: 88,
    activityType: '激励类活动',
    registeredCount: '100/200',
    description: 'C++语言程序设计基础练习题，涵盖C++基础语法、面向对象编程、数据结构等核心内容。',
    status: 'finished',
    score: null
  }
]

// 模拟消息数据
const mockMessages: Message[] = [
  {
    id: 1,
    senderName: '王建',
    senderAvatar: '/images/avatars/teacher1.png',
    content: '回复了我：没事多看看课程的起源',
    courseName: '教育心理学的起源',
    date: '7月20日 12:41',
    isRead: false,
    hasReply: true,
    replyContent: ''
  },
  {
    id: 2,
    senderName: '建国学习',
    senderAvatar: '/images/avatars/student1.png',
    content: '@了我：没事多看看课程的起源',
    courseName: '教育心理学的起源',
    date: '7月20日 12:41',
    isRead: false,
    hasReply: true,
    replyContent: ''
  },
  {
    id: 3,
    senderName: '建国学习',
    senderAvatar: '/images/avatars/student2.png',
    content: '回复了我：没事多看看课程的起源了',
    courseName: '教育心理学的起源',
    date: '7月20日 12:41',
    isRead: false,
    hasReply: true,
    replyContent: ''
  }
]

// 模拟系统消息数据
const mockSystemMessages: SystemMessage[] = [
  {
    id: 1,
    title: '你的会员日专属福利已更新，快来领取今日小惊喜，仅此一天！',
    subtitle: '好消息好消息！BilibiliWorld2024将在明天6月29日（周六）正式开票！！！',
    date: '7月20日 12:41',
    isRead: false
  },
  {
    id: 2,
    title: 'PACS在特殊医疗场景的业务适配与功能创新',
    subtitle: '好消息好消息！BilibiliWorld2024将在明天6月29日（周六）正式开票！！！',
    date: '7月20日 12:41',
    isRead: false
  },
  {
    id: 3,
    title: '你的会员日专属福利已更新，快来领取今日小惊喜，仅此一天！',
    subtitle: '好消息好消息！BilibiliWorld2024将在明天6月29日（周六）正式开票！！！',
    date: '7月20日 12:41',
    isRead: false
  },
  {
    id: 4,
    title: '你的会员日专属福利已更新，快来领取今日小惊喜，仅此一天！',
    subtitle: '好消息好消息！BilibiliWorld2024将在明天6月29日（周六）正式开票！！！',
    date: '7月20日 12:41',
    isRead: false
  }
]

// 模拟练习详情数据
const mockPracticeDetails: { [key: number]: PracticeDetail } = {
  2: {
    id: 2,
    title: 'C++语言程序设计基础练习题',
    practiceDate: '2025-07-30 14:00',
    duration: 88,
    totalQuestions: 100,
    correctCount: 18,
    wrongCount: 15,
    score: 90,
    questions: [
      {
        id: 1,
        type: 'single',
        title: '[单选题]',
        content: 'C++中，下列哪个关键字用于定义类？',
        options: [
          { id: 'A', text: 'A.struct' },
          { id: 'B', text: 'B.class' },
          { id: 'C', text: 'C.union' },
          { id: 'D', text: 'D.enum' }
        ],
        correctAnswers: ['B'],
        userAnswers: ['B'],
        isCorrect: true
      },
      {
        id: 2,
        type: 'multiple',
        title: '[多选题]',
        content: 'C++中，下列哪些是面向对象编程的特性？',
        options: [
          { id: 'A', text: 'A.封装' },
          { id: 'B', text: 'B.继承' },
          { id: 'C', text: 'C.多态' },
          { id: 'D', text: 'D.递归' },
          { id: 'E', text: 'E.抽象' }
        ],
        correctAnswers: ['A', 'B', 'C', 'E'],
        userAnswers: ['A', 'B', 'C'],
        isCorrect: false
      }
    ]
  },
  3: {
    id: 3,
    title: 'C++语言程序设计基础练习题',
    practiceDate: '2025-07-30 14:00',
    duration: 88,
    totalQuestions: 100,
    correctCount: 18,
    wrongCount: 15,
    score: 90,
    questions: [
      {
        id: 1,
        type: 'single',
        title: '[单选题]',
        content: 'C++中，下列哪个关键字用于定义类？',
        options: [
          { id: 'A', text: 'A.struct' },
          { id: 'B', text: 'B.class' },
          { id: 'C', text: 'C.union' },
          { id: 'D', text: 'D.enum' }
        ],
        correctAnswers: ['B'],
        userAnswers: ['B'],
        isCorrect: true
      }
    ]
  },
  5: {
    id: 5,
    title: 'C++语言程序设计基础练习题',
    practiceDate: '2025-07-30 14:00',
    duration: 88,
    totalQuestions: 100,
    correctCount: 18,
    wrongCount: 15,
    score: 90,
    questions: [
      {
        id: 1,
        type: 'single',
        title: '[单选题]',
        content: 'C++中，下列哪个关键字用于定义类？',
        options: [
          { id: 'A', text: 'A.struct' },
          { id: 'B', text: 'B.class' },
          { id: 'C', text: 'C.union' },
          { id: 'D', text: 'D.enum' }
        ],
        correctAnswers: ['B'],
        userAnswers: ['B'],
        isCorrect: true
      }
    ]
  },
  6: {
    id: 6,
    title: 'C++语言程序设计基础练习题',
    practiceDate: '2025-07-30 14:00',
    duration: 88,
    totalQuestions: 100,
    correctCount: 18,
    wrongCount: 15,
    score: 90,
    questions: [
      {
        id: 1,
        type: 'single',
        title: '[单选题]',
        content: 'C++中，下列哪个关键字用于定义类？',
        options: [
          { id: 'A', text: 'A.struct' },
          { id: 'B', text: 'B.class' },
          { id: 'C', text: 'C.union' },
          { id: 'D', text: 'D.enum' }
        ],
        correctAnswers: ['B'],
        userAnswers: ['B'],
        isCorrect: true
      }
    ]
  }
}

// 获取筛选后的所有课程
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 filteredAssignments = computed(() => {
  if (activeHomeworkTab.value === 'pending') {
    return mockAssignments.filter(assignment => assignment.status === '待提交' || assignment.status === '未完成')
  } else if (activeHomeworkTab.value === 'completed') {
    return mockAssignments.filter(assignment => assignment.status === '已完成' || assignment.status === '已提交')
  }
  return mockAssignments
})

// 获取筛选后的考试
const filteredExams = computed(() => {
  if (activeExamTab.value === 'upcoming') {
    return mockExams.filter(exam => exam.status === 'upcoming')
  } else if (activeExamTab.value === 'ongoing') {
    return mockExams.filter(exam => exam.status === 'ongoing')
  } else if (activeExamTab.value === 'finished') {
    return mockExams.filter(exam => exam.status === 'finished')
  }
  return mockExams
})

// 获取筛选后的练习
const filteredPractices = computed(() => {
  if (activePracticeTab.value === 'ongoing') {
    return mockPractices.filter(practice => practice.status === 'ongoing')
  } else if (activePracticeTab.value === 'finished') {
    return mockPractices.filter(practice => practice.status === 'finished')
  }
  return mockPractices
})

// 获取筛选后的活动
const filteredActivities = computed(() => {
  if (activeActivityTab.value === 'ongoing') {
    return mockActivities.filter(activity => activity.status === 'ongoing')
  } else if (activeActivityTab.value === 'finished') {
    return mockActivities.filter(activity => activity.status === 'finished')
  }
  return mockActivities
})

// 计算属性用于模板中的条件判断
const isCoursesTab = computed(() => activeTab.value === 'courses')
const isHomeworkTab = computed(() => activeTab.value === 'homework')
const isExamTab = computed(() => activeTab.value === 'exam')
const isPracticeTab = computed(() => activeTab.value === 'practice')
const isActivityTab = computed(() => activeTab.value === 'activity')
const isMessageTab = computed(() => activeTab.value === 'message')

// 处理菜单选择
const handleMenuSelect = (key: TabType) => {
  activeTab.value = key
  message.info(`切换到${getTabTitle(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
}

// 处理作业筛选变化
const handleHomeworkTabChange = (tab: string) => {
  activeHomeworkTab.value = tab
}

// 处理考试筛选变化
const handleExamTabChange = (tab: string) => {
  activeExamTab.value = tab
}

// 处理练习筛选变化
const handlePracticeTabChange = (tab: string) => {
  activePracticeTab.value = tab
}

// 处理活动筛选变化
const handleActivityTabChange = (tab: string) => {
  activeActivityTab.value = tab
}

// 获取考试状态文本
const getExamStatusText = (status: string) => {
  switch (status) {
    case 'upcoming':
      return '未开始'
    case 'ongoing':
      return '进行中'
    case 'finished':
      return '已结束'
    default:
      return '未知状态'
  }
}

// 开始考试
const startExam = (examId: number) => {
  message.info(`开始考试 ${examId}`)
}

// 继续考试
const continueExam = (examId: number) => {
  message.info(`继续考试 ${examId}`)
}

// 查看考试结果
const viewExamResult = (examId: number) => {
  currentExamId.value = examId
  currentDetailType.value = 'exam'
  showExamDetail.value = true
}

// 继续练习
const continuePractice = (practiceId: number) => {
  message.info(`继续练习 ${practiceId}`)
}

// 查看练习详情
const viewPracticeDetail = (practiceId: number) => {
  currentExamId.value = practiceId
  currentDetailType.value = 'practice'
  showExamDetail.value = true
}

// 继续活动
const continueActivity = (id: number) => {
  console.log('继续活动:', id)
  message.info(`继续活动 ${id}`)
}

// 查看活动详情
const viewActivityDetail = (id: number) => {
  console.log('查看活动详情:', id)
  message.info(`查看活动详情 ${id}`)
}

// 消息相关方法
const handleMessageTabChange = (tab: string) => {
  activeMessageTab.value = tab
}

// 资料相关方法
const handleMaterialsTabChange = (tab: string) => {
  activeMaterialsTab.value = tab
}

// 保存密码修改
const savePassword = () => {
  if (!passwordForm.currentPassword || !passwordForm.newPassword || !passwordForm.confirmPassword) {
    message.error('请填写完整的密码信息')
    return
  }

  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    message.error('两次输入的新密码不一致')
    return
  }

  if (passwordForm.newPassword.length < 6) {
    message.error('新密码长度不能少于6位')
    return
  }

  // 这里可以添加实际的密码修改逻辑
  message.success('密码修改成功')

  // 清空表单
  passwordForm.currentPassword = ''
  passwordForm.newPassword = ''
  passwordForm.confirmPassword = ''
}

// 下载相关方法
const handleDownloadTabChange = (tab: string) => {
  activeDownloadTab.value = tab
}

// 筛选后的下载文件
const filteredDownloadFiles = computed(() => {
  let files = downloadFiles.filter(file => file.category === activeDownloadTab.value)

  if (downloadFilter.type !== 'all') {
    files = files.filter(file => file.type === downloadFilter.type)
  }

  if (downloadFilter.keyword) {
    files = files.filter(file =>
      file.name.toLowerCase().includes(downloadFilter.keyword.toLowerCase())
    )
  }

  return files
})

// 文件菜单操作
const toggleFileMenu = (fileId: number) => {
  activeFileMenu.value = activeFileMenu.value === fileId ? null : fileId
}

const handleFileClick = (file: any) => {
  if (file.type === 'folder' && file.name === '图片') {
    // 点击图片文件夹，进入子目录
    isInSubDirectory.value = true
    currentPath.value = ['课件', '图片']
  }
}

const goBack = () => {
  // 返回上级目录
  isInSubDirectory.value = false
  currentPath.value = []
}

const getFileIcon = () => {
  if (activeDownloadTab.value === 'certificate') {
    // 证书标签页使用证书图标
    return 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngdbc5738893837b29e29e56db7f3999ff13a42da7012dadb028f61eb9fe149ca4'
  } else if (isInSubDirectory.value) {
    // 子目录使用子目录图标
    return 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf45333052202c303acc2c06223c26b820d330459ce2d452a21a3132fbbeab442'
  } else {
    // 默认文件夹图标
    return 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng5548891b00234027dbe6dadafbd83596d616261421c0587a85652dc194b2d5ef'
  }
}

// const createNewFolder = () => {
//   message.info('新建文件夹功能开发中...')
// }

const renameFile = (fileId: number) => {
  message.info(`重命名文件 ${fileId}`)
  activeFileMenu.value = null
}

const deleteFile = (fileId: number) => {
  message.info(`删除文件 ${fileId}`)
  activeFileMenu.value = null
}

// 开始回复消息
const startReply = (messageId: number) => {
  replyingMessageId.value = messageId
  replyContent.value = ''
}

// 取消回复
const cancelReply = () => {
  replyingMessageId.value = null
  replyContent.value = ''
}

// 发送回复
const sendReply = (messageId: number) => {
  if (!replyContent.value.trim()) {
    message.error('请输入回复内容')
    return
  }

  // 这里可以添加实际的发送逻辑
  message.success('回复发送成功')

  // 更新消息数据中的回复内容
  const messageIndex = mockMessages.findIndex(msg => msg.id === messageId)
  if (messageIndex !== -1) {
    mockMessages[messageIndex].replyContent = replyContent.value
  }

  cancelReply()
}

// 获取筛选后的消息
const filteredMessages = computed(() => {
  if (activeMessageTab.value === 'system') {
    return [] // 系统消息单独处理
  } else if (activeMessageTab.value === 'unread') {
    return mockMessages.filter(msg => !msg.isRead)
  } else if (activeMessageTab.value === 'read') {
    return mockMessages.filter(msg => msg.isRead)
  }
  return mockMessages
})

// 获取筛选后的系统消息
const filteredSystemMessages = computed(() => {
  if (activeMessageTab.value === 'system') {
    return mockSystemMessages
  }
  return []
})

// 获取标签标题
const getTabTitle = (tab: TabType) => {
  const titles: Record<TabType, string> = {
    courses: '我的课程',
    homework: '我的作业',
    exam: '我的考试',
    practice: '我的练习',
    activity: '我的活动',
    message: '我的消息',
    materials: '我的资料',
    download: '我的下载'
  }
  return titles[tab] || '未知页面'
}

// 上传作业弹窗状态
const showModal = ref(false)
const currentAssignment = ref<Assignment | null>(null)
const uploadForm = reactive({
  title: '',
  content: '',
  files: [] as File[]
})



// 作业详情视图状态
const showDetailView = ref(false)
const detailAssignment = ref<Assignment | null>(null)

// 考试详情视图状态
const showExamDetail = ref(false)
const currentExamId = ref<number | null>(null)
const currentDetailType = ref<'exam' | 'practice'>('exam')

// 获取当前详情（考试或练习）
const currentExamDetail = computed(() => {
  if (currentExamId.value) {
    if (currentDetailType.value === 'exam') {
      return mockExamDetails[currentExamId.value]
    } else if (currentDetailType.value === 'practice') {
      return mockPracticeDetails[currentExamId.value]
    }
  }
  return null
})

// 关闭考试详情
const closeExamDetail = () => {
  showExamDetail.value = false
  currentExamId.value = null
  currentDetailType.value = 'exam'
}

// // 获取答题卡项目的样式类
// const getAnswerItemClass = (index: number) => {
//   // 模拟答题状态：前10题答对，第11-15题答错，其余未答
//   if (index <= 10) {
//     return 'correct'
//   } else if (index <= 15) {
//     return 'wrong'
//   } else {
//     return 'unanswered'
//   }
// }

// 查看作业详情
const viewAssignmentDetail = (assignment: Assignment) => {
  detailAssignment.value = assignment
  showDetailView.value = true
}

// 返回作业列表
const backToAssignmentList = () => {
  showDetailView.value = false
  detailAssignment.value = null
}

// 从详情页面跳转到上传作业
const showUploadFromDetail = () => {
  showUploadModal(detailAssignment.value!)
}

// 显示上传作业弹窗
const showUploadModal = (assignment: Assignment) => {
  currentAssignment.value = assignment
  uploadForm.title = ''
  uploadForm.content = ''
  uploadForm.files = []
  showModal.value = true
}

// 关闭上传作业弹窗
const closeUploadModal = () => {
  showModal.value = false
  currentAssignment.value = null
}

// 提交作业
const submitAssignment = () => {
  if (!uploadForm.title.trim()) {
    message.error('请输入标题')
    return
  }

  if (!uploadForm.content.trim()) {
    message.error('请输入内容')
    return
  }

  if (uploadForm.files.length === 0) {
    message.error('请上传至少一个文件')
    return
  }

  // 这里可以添加实际的提交逻辑
  message.success('作业提交成功')
  closeUploadModal()
}

// 自定义上传处理
const customRequest = ({ file, onFinish }: any) => {
  // 模拟上传
  setTimeout(() => {
    uploadForm.files.push(file)
    onFinish()
  }, 1000)
}

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: 1415px;
  margin: 3vh auto 0 auto;
  /* 距离顶部40px转换为vh */
  position: relative;
  background: #f6f6f6;
}

/* 左侧侧边栏 */
.block_14 {
  position: relative;
  width: 13.4vw;
  height: auto;
  background: #ffffff;
  /* 改为白色背景 */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  /* 内容居中 */
}

/* 用户头像和姓名 */
.image_7 {
  width: 5vw !important;
  /* 调整头像大小，覆盖SafeAvatar的内联样式 */
  height: 5vw !important;
  border-radius: 50%;
  margin: 2.6vh auto 0 auto;
  /* 居中显示 */
}

.image_7 img {
  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: 11vw;
  /* 与菜单项宽度一致 */
  height: 0.05vh;
  /* 1px转换为vh */
  background: #E6E6E6;
  margin: 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: 11vw;
  /* 进一步缩小菜单项宽度，适应新的导航栏宽度 */
  height: auto;
  /* 自适应高度 */
  min-height: 3vh;
  /* 设置最小高度，让盒子更大 */
  margin: 1.5vh;
  /* 减小间距：从2.34vh减少到1.5vh */
  display: flex;
  align-items: center;
  justify-content: left;
  /* 菜单项内容居中 */
  cursor: pointer;
  padding: 1.5vh 0 1.5vh 1.8vw;
  /* 增加上下内边距，让盒子更高 */
  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: 16px;
  /* 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: 65vw;
  /* 保持60vw宽度 */
  min-height: calc(100vh - 6.4vh);
  padding: 2.08vh 1.9vw;
  /* 40px转换为vh和vw */
  background: rgba(255, 255, 255, 1);
  overflow-y: auto;
  margin-left: 1.56vw;
  margin-bottom: 30px;
}

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

.text_12,
.text_13,
.text_14,
.text_15 {
  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,
.text_15.active {
  color: rgba(2, 134, 206, 1);
  /* 只改变字体颜色，去掉背景色 */
}

.text_12:hover,
.text_13:hover,
.text_14:hover,
.text_15: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 {
  margin-right: 1.04vw;
}

.box_3 {
  width: 202px;
  /* 200px转换为vw */
  height: 156px;
  /* 大幅增加高度到300px转换为vh，让图片展示到外部盒子高度 */
  position: relative;
  border-radius: 5px;
  /* 8px转换为vw */
  overflow: hidden;
}

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

/* 状态标签 */
.status-image-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.status-image {
  width: 66px;
  height: 22px;
}

.status-text {
  position: absolute;
  top: 26vh;
  /* 12px转换为vh */
  right: 0.63vw;
  /* 调整到右侧 */
  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: 18px;
  /* 18px转换为vw */
  color: #000000;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  font-weight: 600;
  flex: 1;
}

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

.text_17 {
  font-size: 0.73vw;
  /* 14px转换为vw */
  color: #999999;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
}

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

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

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

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

.text_20,
.text_21,
.text_22 {
  font-size: 14px;
  /* 14px转换为vw */
  color: #999;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  margin-right: 10px;
}

/* 操作按钮 */
.text-wrapper_2 {
  background: #0288D1;
  border-radius: 5px;
  /* 6px转换为vw */
  padding: 6px 22px;
  /* 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: 14px;
  /* 14px转换为vw */
  color: white;
  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: 38px;
  height: 38px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.73vw;
  /* 14px转换为vw */
  color: #666666;
  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转换 */
  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: #0088D1;
  color: rgba(255, 255, 255, 1);
  border-color: #0088D1;
}

.pagination-item.disabled {
  color: rgba(204, 204, 204, 1);
  cursor: not-allowed;
  border-color: rgba(232, 232, 232, 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;
  border: none;
}

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

/* 作业部分样式 - 严格按照蓝湖UI */
.homework-content {
  width: 100%;
}

/* 作业卡片主容器 */
.group_11 {
  position: relative;
  width: 53.8vw;
  /* 1033px转换为vw */
  min-height: 25vh;
  /* 设置最小高度 */
  height: auto;
  /* 改为自适应高度 */
  /* background: url('https://lanhu-oss-2537-2.lanhuapp.com/SketchPng75139e59843c2accc2ef713eac90adeeea2be065395a76d5e5e3d7365677e090') -0.05vw -0.05vh no-repeat; */
  background-size: 100% auto;
  /* 背景图宽度100%，高度自适应 */
  background-color: #fff;
  /* 添加背景色，避免内容超出背景图范围时显示问题 */
  margin: 0.2vh 0 3vh 0;
  /* 减少底部间距，避免卡片挤在一起 */
  /* padding-top: 3vh;
  padding-bottom: 3vh; */
  /* 增加内边距确保内容不会溢出 */
  display: flex;
  flex-direction: column;
  border: 2px solid #ECECEC;

}

/* 头部信息容器 */
.box_5 {
  width: 51.46vw;
  /* 988px转换为vw */
  height: 2.81vh;
  /* 54px转换为vh */
  margin: 1.15vh 0 0 1.2vw;
  /* 22px 0 0 23px转换 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 教师信息 */
.image-text_2 {
  width: 8.07vw;
  /* 155px转换为vw */
  height: 2.81vh;
  /* 54px转换为vh */
  display: flex;
  align-items: center;
  margin-top: 1.3vh;
  /* 25px转换为vh (25/1920*100) */
  position: relative;
}

/* 教师头像 */
.image_22 {
  width: 2.71vw;
  /* 52px转换为vw */
  height: 2.71vw;
  /* 改为vw单位，保持正圆形 */
  border-radius: 50%;
  object-fit: cover;
  margin-top: 2vh;
  /* 头像向下移动 */
}

.image-avatar {
  width: 2.71vw;
  /* 52px转换为vw */
  height: 2.71vw;
  border: 2px solid #000;
  background-color: pink;
}

/* 教师详细信息容器 */
.text-group_3 {
  width: 4.43vw;
  /* 85px转换为vw */
  height: auto;
  /* 改为自适应高度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 增加垂直间距 */
  margin-left: 0.52vw;
  /* 10px转换为vw，头像和姓名之间的间距 */
  margin-top: 1.6vh;
  /* 25px转换为vh (25/1920*100) */
}

/* 教师姓名 */
.text_30 {
  width: 2.81vw;
  /* 54px转换为vw */
  height: 1.3vh;
  /* 25px转换为vh */
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 0.94vw;
  /* 18px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 1.3vh;
  /* 恢复原来的行高 */
  margin-top: 0.5vh;
  /* 调整姓名位置 */
}

/* 作业时间 */
.text_31 {
  width: 4.43vw;
  /* 85px转换为vw */
  height: 1.04vh;
  /* 20px转换为vh */
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 0.73vw;
  /* 14px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 1.04vh;
  /* 20px转换为vh */
  margin-top: 1.2vh;
  /* 调整时间与姓名的间距 */
}

/* 作业状态 */
.text_32 {
  width: auto;
  /* 42px转换为vw */
  height: 1.04vh;
  /* 20px转换为vh */
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 0.73vw;
  /* 14px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 1.04vh;
  /* 20px转换为vh */
  margin-top: 0.47vh;
  margin-right: 25px;
  /* 9px转换为vh */
  display: flex;
  align-items: center;
}

/* 作业内容区域 */
.text-group_4 {
  width: 48.02vw;
  /* 922px转换为vw */
  height: auto;
  /* 改为自适应高度 */
  margin: 4vh 0 0 3.2vw;
  /* 减少顶部margin，让内容更紧凑 */
  flex-grow: 1;
  /* 允许内容区域伸展 */
}

/* 作业标题 */
.text_33 {
  width: 16.67vw;
  /* 320px转换为vw */
  min-height: 1.46vh;
  /* 最小高度，允许内容增长 */
  height: auto;
  /* 自适应高度 */
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 1.04vw;
  /* 20px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  text-align: left;
  white-space: normal;
  /* 允许文本换行 */
  line-height: 1.8vh;
  /* 增加行高，提高可读性 */
  margin-bottom: 1vh;
  /* 添加底部间距 */
  display: block;
  /* 确保是块级元素 */
}

/* 作业描述容器 */
.description-container {
  width: 48.02vw;
  /* 922px转换为vw */
  position: relative;
}

/* 作业描述 */
.text_34 {
  width: 100%;
  min-height: 1.15vh;
  /* 最小高度 */
  height: auto;
  /* 自适应高度 */
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 0.83vw;
  /* 16px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  text-align: left;
  white-space: normal;
  /* 允许文本换行 */
  line-height: 1.8vh;
  /* 增加行高，提高可读性 */
  display: block;
  /* 确保是块级元素 */
  margin-top: 0;
  /* 移除顶部间距，因为已经在标题添加了底部间距 */
  transition: all 0.3s ease;
  /* 添加过渡动画 */
}

/* 文本截断样式 */
.text_34.text-truncated {
  /* display: -webkit-box; */
  -webkit-line-clamp: 1;
  line-height: 1.4;
  /* 限制显示1行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 展开/收起按钮 */
.expand-toggle {
  color: #1890ff;
  cursor: pointer;
  font-size: 0.73vw;
  /* 14px转换为vw */
  margin-left: 0.5vw;
  user-select: none;
  transition: color 0.3s ease;
}

.expand-toggle:hover {
  color: #40a9ff;
  text-decoration: underline;
}

/* 作业详情弹窗样式 */
.assignment-detail {
  padding: 20px 0;
}

.detail-header {
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.detail-header h2 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.assignment-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.teacher-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.teacher-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.teacher-name {
  font-weight: 500;
  color: #333;
}

.assignment-time {
  color: #666;
  font-size: 14px;
}

.assignment-status {
  font-size: 14px;
  font-weight: 500;
}

.assignment-status.未完成,
.assignment-status.待提交 {
  color: #ff4d4f;
}

.assignment-status.已完成,
.assignment-status.已提交 {
  color: #52c41a;
}

.detail-content h3 {
  margin: 20px 0 10px 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.description-full {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  line-height: 1.6;
  color: #333;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.attachments-section {
  margin-top: 20px;
}

.attachment-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.attachment-icon {
  width: 24px;
  height: 24px;
  object-fit: cover;
}

.attachment-name {
  color: #333;
  font-size: 14px;
}

/* 附件区域 */
.box_6 {
  width: 48.65vw;
  /* 934px转换为vw */
  height: auto;
  /* 改为自适应高度 */
  margin: 0.94vh 0 0 2vw;
  /* 18px 0 0 67px转换 */
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 附件小图标 */
.thumbnail_6 {
  width: 0.83vw;
  /* 16px转换为vw */
  height: 0.83vw;
  /* 保持宽高比一致 */
}

/* 附件大图标 */
.image_23 {
  width: 0.83vw;
  /* 16px转换为vw */
  height: 2.03vh;
  /* 39px转换为vh */
  margin: 6.51vh 0 0 0.94vw;
  /* 125px 0 0 18px转换 */
}

/* 附件数量文本 */
.text_35 {
  width: 4.27vw;
  /* 82px转换为vw */
  height: 1.04vh;
  /* 20px转换为vh */
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 0.73vw;
  /* 14px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 1.04vh;
  /* 20px转换为vh */
  margin: 7.76vh 0 0 0.31vw;
  /* 149px 0 0 6px转换 */
  position: absolute;
}

/* 附件头部区域 */
.attachment-header {
  position: relative;
  height: 3vh;
  margin-bottom: 1vh;
}

/* 附件图片容器 */
.attachment-images {
  display: flex;
  gap: 0.7vw;
  align-items: center;
  margin-top: 1vh;
  margin-left: 2.5vh;
}

/* 附件图片样式 - 使用flex布局避免重叠 */
.image_24,
.image_25,
.image_26,
.image_27,
.image_28 {
  width: 6.5vw;
  /* 缩小图片尺寸 */
  height: 6.5vw;
  /* 保持正方形 */
  object-fit: cover;
  border: 0.05vw solid #e9ecef;
}

/* 作业按钮区域 */
.assignment-buttons {
  display: flex;
  gap: 1vw;
  margin: 2vh 0 2vh 2.95vw;
}

/* 提交按钮容器 */
.text-wrapper_8 {
  height: 1.72vh;
  /* 33px转换为vh */
  width: 5.31vw;
  /* 102px转换为vw */
  position: relative;
  /* 改为相对定位 */
  cursor: pointer;
  align-self: flex-start;
  /* 按钮靠左对齐 */
  border-radius: 0.2vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 上传作业按钮 - 未完成状态 */
.submit-button {
  width: 102px;
  height: 33px;
  border: 1px solid #0288D1;
}

/* 查看情况按钮 - 未完成状态 */
.view-button {
  width: 102px;
  height: 33px;
  background-color: #0288D1
}

/* 查看详情按钮 - 已完成状态 */
.details-button {
  width: 102px;
  height: 33px;
  background-color: #0288D1
}

/* 提交按钮文字 */
.text_36 {
  width: auto;
  /* 自适应宽度 */
  height: 1.04vh;
  /* 20px转换为vh */
  overflow-wrap: break-word;
  color: #0288D1;
  font-size: 0.73vw;
  /* 14px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 1.04vh;
  /* 20px转换为vh */
  margin: 0;
  /* 移除边距，让按钮控制位置 */
}

.text-view {
  color: #fff;
}

/* 主图样式 */
.image_29 {
  position: absolute;
  left: 4.95vw;
  /* 95px转换为vw */
  top: 12vh;
  /* 调整位置，避免与附件重叠 */
  width: 6.98vw;
  /* 134px转换为vw */
  height: 6.98vh;
  /* 134px转换为vh */
  object-fit: cover;
  border-radius: 0.3vw;
  border: 0.05vw solid #e9ecef;
}

/* 蓝湖UI作业样式完成 */

/* 考试页面样式 - 网格布局 */
.exam-content {
  width: 100%;
}

.exam-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.exam-card {
  background: #ffffff;
  border: 1.5px solid #D8D8D8;
  padding: 20px;
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.exam-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.exam-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.4;
  border-bottom: 1.5px solid #E6E6E6;
  padding-bottom: 10px;
}

.exam-score-badge {
  position: absolute;
  top: 11px;
  right: 18px;
  background: white;
  border: 1px solid #FF6F0F;
  border-radius: 4px;
  padding: 0 11px;
}

.score-text {
  font-size: 20px;
  font-weight: bold;
  color: #FF6F0F;
}

.score-text span {
  margin-left: 2px;
  font-size: 10px;
}

.exam-details {
  margin-bottom: 5px;
}

.exam-meta-item {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
}

.meta-label {
  color: #999;
  min-width: 70px;
}

.meta-value {
  color: #999;
  font-weight: 500;
}

.exam-description {
  padding: 8px 10px;
  font-size: 12px;
  color: #497087;
  margin-bottom: auto;
  flex: 1;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  background-color: #F5F8FB;
}

.exam-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
  flex-shrink: 0;
}

.exam-status-left {
  display: flex;
  align-items: center;
}

.exam-status-text {
  font-size: 12px;
  color: #999;
}

.exam-action-right {
  display: flex;
  gap: 10px;
}

.action-btn {
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
  min-width: 80px;
}

.upcoming-btn {
  background: #F5F8FB;
  color: #999999;
  border: none;
}

.upcoming-btn:hover {
  background: #e8e8e8;
}

.ongoing-btn {
  background: #0288D1;
  color: white;
}

.ongoing-btn:hover {
  background: #40a9ff;
}

.finished-btn {
  background: #0288D1;
  color: white;
}

.finished-btn:hover {
  background: #01579B;
}

.files-container {
  margin: 15px 0 0 20px;
  width: 100%;
  background-color: #F5F9FC;
  height: 48px;
  display: flex;
  align-items: center;
}

.file-items {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  gap: 4px;
}

.file-items span {
  font-size: 12px;
}

.files-icon {
  width: 15px;
  height: 15px;
}

.course-name {
  margin-top: 10px;
  margin-left: 20px;
  color: #000;
}

.course-name span {
  color: #6AA5CC;
}


/* 响应式设计 */
@media (max-width: 1200px) {
  .exam-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .exam-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .exam-card {
    padding: 16px;
    min-height: 240px;
  }
}

/* 简化的作业卡片样式 */
.assignment-card-simple {
  width: 100%;
  margin-bottom: 2vh;
}

/* 其他内容样式 */
.other-content {
  width: 100%;
  padding: 2.08vh 2.08vw;
  /* 40px转换 */
  text-align: center;
}

.other-content h2 {
  font-size: 1.25vw;
  /* 24px转换为vw */
  color: rgba(51, 51, 51, 1);
  margin-bottom: 1.04vh;
  /* 20px转换为vh */
}

.other-content p {
  font-size: 0.83vw;
  /* 16px转换为vw */
  color: rgba(153, 153, 153, 1);
}

/* 作业分隔线 */
.assignment-divider {
  width: 100%;
  height: 1px;
  background-color: #E5E5E5;
  margin: 0.89vh 0;
  /* 17px转换为vh */
}

/* 响应式设计 */
@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: 18vh;
    /* 平板端大幅增加高度，让图片展示到外部盒子高度 */
  }

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

  .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.16px;
    /* 手机端调整字体大小 */
    padding: 10px 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;
    /* 手机端页码按钮宽度 */
  }

  /* 作业部分响应式 */
  .assignment-card {
    width: 90vw;
    height: auto;
    min-height: 30vh;
    margin: 2vh 5vw;
    background-size: 100% 100%;
  }

  .assignment-header {
    width: 85vw;
    height: auto;
    margin: 2vh 2.5vw;
    flex-direction: column;
    align-items: flex-start;
    gap: 1vh;
  }

  .teacher-info {
    width: auto;
    height: auto;
    gap: 2vw;
  }

  .teacher-avatar {
    width: 8vw;
    height: 8vw;
  }

  .teacher-details {
    width: auto;
    height: auto;
  }

  .teacher-name {
    font-size: 3vw;
    width: auto;
    height: auto;
  }

  .assignment-time {
    font-size: 2.5vw;
    width: auto;
    height: auto;
    margin-top: 0.5vh;
  }

  .assignment-status {
    font-size: 2.5vw;
    width: auto;
    height: auto;
    margin-top: 0;
  }

  .assignment-content {
    width: 85vw;
    height: auto;
    margin: 2vh 2.5vw;
  }

  .assignment-title {
    font-size: 3.5vw;
    width: auto;
    height: auto;
    white-space: normal;
    line-height: 1.4;
  }

  .assignment-description {
    font-size: 2.8vw;
    width: auto;
    height: auto;
    white-space: normal;
    line-height: 1.4;
    margin-top: 1vh;
  }

  .assignment-attachments {
    width: 85vw;
    height: auto;
    margin: 2vh 2.5vw;
    flex-direction: column;
    align-items: flex-start;
    gap: 2vh;
  }

  .attachment-list {
    flex-wrap: wrap;
    gap: 2vw;
  }

  .attachment-item {
    width: 15vw;
    height: 15vw;
  }

  .attachment-count {
    font-size: 2.5vw;
    width: auto;
    height: auto;
    margin-left: 0;
  }

  .attachment-actions {
    width: auto;
    height: auto;
    gap: 2vw;
    margin-bottom: 0;
  }

  .action-btn {
    width: 20vw;
    height: 6vh;
    border-radius: 1vw;
  }

  .download-btn span,
  .submit-btn span {
    font-size: 2.5vw;
    width: auto;
    height: auto;
    margin: 0;
  }

  .assignment-main-image {
    position: relative;
    left: 2.5vw;
    top: 0;
    width: 20vw;
    height: 20vw;
    margin-top: 2vh;
  }

  .other-content {
    padding: 4vh 4vw;
  }

  .other-content h2 {
    font-size: 4vw;
    margin-bottom: 2vh;
  }

  .other-content p {
    font-size: 3vw;
  }

  .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: 20vh;
    /* 手机端大幅增加高度，让图片展示到外部盒子高度 */
  }
}

@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转换 */
  }

  /* 平板端面包屑样式 */
  .breadcrumb-nav {
    font-size: 1vw;
    /* 平板端调整字体大小 */
  }

  .breadcrumb-item {
    width: 5vw;
    /* 平板端调整宽度 */
    font-size: 1vw;
    /* 平板端调整字体大小 */
    line-height: 1.3vh;
    /* 平板端调整行高 */
  }

  .breadcrumb-current {
    width: 4.5vw;
    /* 平板端调整宽度 */
    font-size: 1vw;
    /* 平板端调整字体大小 */
    line-height: 1.3vh;
    /* 平板端调整行高 */
  }

  .breadcrumb-separator {
    margin: 0 0.8vw;
    /* 平板端调整间距 */
  }

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

  .text_16 {
    font-size: 0.83vw;

  }

  .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 */
  }

  /* 手机端面包屑样式 */
  .breadcrumb-nav {
    font-size: 3.5vw;
    /* 手机端调整字体大小 */
    margin-bottom: 2vh;
    /* 手机端增加底部间距 */
  }

  .breadcrumb-item {
    width: 15vw;
    /* 手机端调整宽度 */
    font-size: 3.5vw;
    /* 手机端调整字体大小 */
    line-height: 2vh;
    /* 手机端调整行高 */
  }

  .breadcrumb-current {
    width: 13vw;
    /* 手机端调整宽度 */
    font-size: 3.5vw;
    /* 手机端调整字体大小 */
    line-height: 2vh;
    /* 手机端调整行高 */
  }

  .breadcrumb-separator {
    margin: 0 2vw;
    /* 手机端调整间距 */
  }
}

/* 上传作业弹窗样式 */
.assignment-info {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.assignment-info h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
  color: #333;
}

.assignment-info p {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.file-list {
  margin-top: 10px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #eee;
  border-radius: 4px;
}

.file-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}

.file-item:last-child {
  border-bottom: none;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* 作业详情视图样式 */
.detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

/* 面包屑导航样式 */
.breadcrumb-nav {
  display: flex;
  align-items: center;
  font-size: 0.73vw;
  /* 14px转换为vw */
  color: #666;
  margin-bottom: 1.04vh;
  /* 20px转换为vh */
}

.breadcrumb-item {
  width: 3.39vw;
  /* 65px转换为vw */
  height: 1.04vh;
  /* 20px转换为vh */
  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.73vw;
  /* 14px转换为vw */
  color: #333333;
  line-height: 1.04vh;
  /* 20px转换为vh */
  text-align: left;
  font-style: normal;
  text-transform: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

.breadcrumb-item:hover {
  color: #0056b3;
  text-decoration: underline;
}

.breadcrumb-separator {
  margin: 0 0.52vw;
  /* 10px转换为vw */
  color: #999;
}

.breadcrumb-current {
  width: 2.97vw;
  /* 57px转换为vw */
  height: 1.04vh;
  /* 20px转换为vh */
  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.73vw;
  /* 14px转换为vw */
  color: #999999;
  line-height: 1.04vh;
  /* 20px转换为vh */
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.description-full-view {
  white-space: pre-wrap;
  line-height: 1.6;
  color: #666;
  font-size: 14px;
}

/* 考试详情页面样式 */
.exam-detail-overlay {
  position: fixed;
  top: 60px;
  /* 留出导航栏的空间 */
  left: 0;
  width: 100%;
  height: calc(100% - 60px);
  /* 减去导航栏的高度 */
  background: #f5f5f5;
  z-index: 999;
  /* 降低z-index，确保导航栏可见 */
  overflow-y: auto;
}

.exam-detail-container {
  margin: 0 auto;
  background: #f5f5f5;
  min-height: 100vh;
}

.exam-detail-header {
  margin: auto;
  width: 1420px;
  padding: 24px 0;
  background: #f5f5f5;
}

.breadcrumb {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.breadcrumb-link {
  height: 20px;
  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.breadcrumb-link:hover {
  text-decoration: underline;
}

.breadcrumb-separator {
  margin: 0 8px;
  color: #999999;
  flex-shrink: 0;
}

.breadcrumb-current {
  height: 20px;
  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: #999999;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.exam-detail-content {
  margin: auto;
  max-width: 1420px;
  display: flex;
  gap: 24px;
  padding: 0;
  background: #f5f5f5;
}

.exam-questions-section {
  flex: 1;
  background: white;
  padding: 24px;
}

.exam-title-section {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8e8e8;
}

.exam-main-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.questions-container {
  margin-bottom: 24px;
}

.question-item {
  background: white;
  padding: 20px;
  margin-bottom: 20px;
}

.question-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.question-number {
  color: #0088D1;
  font-size: 14px;
  font-weight: 500;
  margin-right: 12px;
}

.question-type {
  color: #1890ff;
  font-size: 14px;
  font-weight: 500;
  margin-right: 12px;
}

.question-score {
  width: 36px;
  height: 20px;
  background: #EEF9FF;
  color: #1890ff;
  font-size: 12px;
  font-weight: 500;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25%;
}

.question-content {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 20px;
}

.question-options {
  margin-bottom: 20px;
}

.option-item {
  display: flex;
  align-items: center;
  width: 1053px;
  height: 50px;
  background: #F5F8FB;
  padding: 0 16px;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.option-item.option-selected {
  background: #F5F8FB !important;
}

.option-item.option-correct {
  background: #f6ffed;
}

.option-item.option-wrong {
  background: #fff2f0;
}

.option-checkbox {
  margin-right: 12px;
  flex-shrink: 0;
}

.option-checkbox input[type="checkbox"] {
  width: 14px;
  height: 14px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: white;
  border: 1px solid #d9d9d9;
  cursor: pointer;
  position: relative;
}

.option-checkbox input[type="checkbox"]:checked {
  background: #1890ff;
  border-color: #1890ff;
}

.option-checkbox input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 10px;
  font-weight: bold;
}

.option-content {
  flex: 1;
  display: flex;
  align-items: center;
}

.option-text {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.option-image {
  margin-top: 8px;
}

.option-image img {
  max-width: 200px;
  height: auto;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

.question-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.answer-status-box {
  width: 100px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  line-height: 20px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.answer-status-box.status-correct {
  background: #0288D1;
}

.answer-status-box.status-wrong {
  background: #ff4d4f;
}

.question-stats {
  display: flex;
  gap: 16px;
  flex: 1;
}

.correct-answer,
.user-answer {
  font-size: 14px;
  color: #666;
}

.question-result {
  font-size: 20px;
  font-weight: bold;
}

.result-correct {
  color: #52c41a;
}

.result-wrong {
  color: #ff4d4f;
}

.question-analysis {
  margin-top: 16px;
  padding: 16px;
  background: #fafafa;
  border-radius: 6px;
}

.analysis-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.analysis-content {
  font-size: 14px;
  color: #497087;
  line-height: 1.6;
}

.exam-submit-section {
  margin-top: 24px;
  text-align: left;
  margin-left: 16px;
}

.submit-btn {
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.submit-btn:hover {
  background: #40a9ff;
}

.submit-text {
  font-weight: 500;
}

.submit-stats {
  font-size: 12px;
  opacity: 0.8;
}

.submit-score {
  font-weight: bold;
}

.exam-info-section {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.score-circle-container {
  background: white;
  padding: 24px;
  text-align: center;
}

.score-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(#1890ff 0deg 352deg, #e8e8e8 352deg 360deg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  position: relative;
}

.score-inner {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.score-number {
  font-size: 32px;
  font-weight: bold;
  color: #333;
}

.score-label {
  font-size: 14px;
  color: #666;
}

.exam-stats {
  background: white;
  padding: 24px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.stat-item:last-child {
  margin-bottom: 0;
}

.stat-label {
  font-size: 10px;
  color: #497087;
}

.stat-value {
  margin-left: 20px;
  color: #333;
  font-weight: 500;
  font-size: 18px;
}

.stat-value span {
  margin-left: 2px;
  font-size: 10px;
}

.stat-value.correct {
  color: #3F76ED;
}

.stat-value.wrong {
  color: #FE2E2F;
}

.answer-stats {
  background: white;
  padding: 24px;
}

.stats-row {
  display: flex;
  gap: 12px;
}

.stat-box {
  flex: 1;
  text-align: center;
  padding: 16px 8px;
  border-radius: 6px;
}

.stat-box.correct {
  background: #f6ffed;
  border: 1px solid #b7eb8f;
}

.stat-box.wrong {
  background: #fff2f0;
  border: 1px solid #ffb3b3;
}

.stat-box.total {
  background: #e6f7ff;
  border: 1px solid #91d5ff;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 4px;
}

.stat-box.correct .stat-number {
  color: #52c41a;
}

.stat-box.wrong .stat-number {
  color: #ff4d4f;
}

.stat-box.total .stat-number {
  color: #1890ff;
}

.stat-text {
  font-size: 12px;
  color: #666;
}

.answer-card {
  background: white;
  padding: 24px;
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 16px;
}

.card-sections {
  margin-bottom: 16px;
}

.card-section {
  margin-bottom: 20px;
}

.card-section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.answer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.answer-item {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.answer-item.correct {
  background: #1890ff;
  color: white;
}

.answer-item.wrong {
  background: #ff4d4f;
  color: white;
}

.answer-item.unanswered {
  background: #f5f5f5;
  color: #999;
  border: 1px solid #e8e8e8;
}

.answer-item:hover {
  transform: scale(1.1);
}

.card-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-color.correct {
  background: #1890ff;
}

.legend-color.wrong {
  background: #ff4d4f;
}

.legend-text {
  font-size: 12px;
  color: #666;
}

.legend-checkbox {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-checkbox input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

.legend-checkbox label {
  font-size: 12px;
  color: #666;
  cursor: pointer;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .exam-detail-content {
    flex-direction: column;
  }

  .exam-info-section {
    width: 100%;
  }

  .stats-row {
    justify-content: center;
  }

  .stat-box {
    max-width: 120px;
  }
}

@media (max-width: 768px) {
  .exam-detail-content {
    padding: 16px;
  }

  .question-item {
    padding: 16px;
  }

  .answer-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .score-circle {
    width: 100px;
    height: 100px;
  }

  .score-inner {
    width: 75px;
    height: 75px;
  }

  .score-number {
    font-size: 24px;
  }
}

/* 练习页面样式 - 网格布局 */
.practice-content {
  width: 100%;
}

.exam-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.practice-card {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 20px;
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.practice-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.practice-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  line-height: 1.4;
}

.practice-score-badge {
  position: absolute;
  top: 11px;
  right: 18px;
  background: white;
  border: 1px solid #FF6F0F;
  border-radius: 4px;
  padding: 0 11px;
}

.practice-details {
  margin-bottom: 10px;
}

.practice-meta-item {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
}

.practice-description {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16px;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.practice-stats {
  display: flex;
  gap: 16px;
  height: 54px;
  background: #F5F8FB;
  align-items: center;
  justify-content: space-evenly;
}

.divider {
  width: 1px;
  height: 20px;
  background: #EBEBEB;
}


.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stats-item.correct .stats-number {
  color: #1890ff;
}

.stats-item.wrong .stats-number {
  color: #ff4d4f;
}

.stats-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.stats-number {
  font-size: 14px;
  font-weight: 600;
}

.practice-intro {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 16px;
}

.intro-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.intro-content {
  padding-bottom: 10px;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
border-bottom: 1.5px solid #E6E6E6;
}

.practice-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.practice-status-left {
  display: flex;
  align-items: center;
}

.practice-status-text {
  font-size: 14px;
  color: #666;
}

.practice-action-right {
  display: flex;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .practice-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .practice-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .practice-card {
    padding: 16px;
    min-height: 240px;
  }
}

/* 活动页面样式 - 网格布局 */
.activity-content {
  width: 100%;
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.04vw;
  /* 20px转换为vw */
  margin-top: 1.04vh;
  /* 20px转换为vh */
}

.activity-card {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  /* 8px转换为vw */
  padding: 0;
  /* 移除内边距，让图片可以占满顶部 */
  position: relative;
  min-height: 14.58vh;
  /* 280px转换为vh */
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  overflow: hidden;
  /* 确保图片不会溢出圆角 */
}

.activity-card:hover {
  box-shadow: 0 0.21vw 0.63vw rgba(0, 0, 0, 0.1);
  /* 0 4px 12px转换 */
  transform: translateY(-0.1vh);
  /* -2px转换为vh */
}

/* 活动卡片顶部图片容器 */
.activity-card-image {
  width: 100%;
  height: 179px;
  /* 179px转换为vh (179/1080*100) */
  overflow: hidden;
  /* 只有顶部圆角 */
}

/* 活动卡片图片 */
.activity-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.activity-score-badge {
  position: absolute;
  top: 0.83vw;
  /* 16px转换为vw */
  right: 0.83vw;
  /* 16px转换为vw */
  background: #FF6B35;
  color: white;
  padding: 0.21vw 0.42vw;
  /* 4px 8px转换为vw */
  border-radius: 0.21vw;
  /* 4px转换为vw */
  font-size: 0.63vw;
  /* 12px转换为vw */
  font-weight: 500;
  z-index: 1;
}

.activity-title {
  font-size: 16px;
  /* 16px转换为vw */
  /* font-weight: 600; */
  color: #333;
  margin: 15px 0 5px 0;
  /* 0 0 16px 0转换 */
  line-height: 1.4;
  padding: 0 1.04vw;
  /* 添加左右内边距 */
}

.activity-details {
  /* 20px转换为vh */
  padding: 0 1.04vw;
  /* 添加左右内边距 */
}

.activity-meta-item {
  margin-bottom: 10px;
  /* 8px转换为vh */
  font-size: 14px;
  /* 13px转换为vw */
  line-height: 1.4;
}

.activity-intro {
  flex: 1;
  margin-bottom: 1.04vh;
  /* 20px转换为vh */
  padding: 0 1.04vw;
  /* 添加左右内边距 */
}

.intro-title {
  font-size: 0.73vw;
  /* 14px转换为vw */
  font-weight: 600;
  color: #333;
  margin-bottom: 0.42vh;
  /* 8px转换为vh */
}

.intro-content {
  font-size: 14px;
  /* 13px转换为vw */
  color: #666;
  line-height: 1.5;
  margin-bottom: 10px;
  /* 16px转换为vh */
  /* display: -webkit-box; */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.activity-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding: 5px 15px 15px 15px;
  /* 添加内边距 */
}

.activity-status-left {
  /* flex: 1; */
}

.activity-status-text {
  font-size: 12px;
  /* 13px转换为vw */
  font-weight: 500;
}

/* 活动状态颜色 - 与练习中保持一致 */
.activity-status-text.ongoing {
  color: #FF520F;
  /* 进行中 - 橙色 */
}

.activity-status-text.finished {
  color: #999999;
  /* 已结束 - 灰色 */
}

.activity-action-right {
  display: flex;
}

/* 活动已结束按钮样式 - 灰色 */
.activity-finished-btn {
  background-color: #999999 !important;
  border-color: #999999 !important;
  color: #ffffff !important;
}

.activity-finished-btn:hover {
  background-color: #808080 !important;
  border-color: #808080 !important;
}

/* 活动响应式设计 */
@media (max-width: 1200px) {
  .activity-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .activity-score-badge {
    font-size: 1vw;
    padding: 0.3vw 0.6vw;
  }

  .activity-title {
    font-size: 1.2vw;
  }

  .activity-meta-item {
    font-size: 1vw;
  }

  .intro-title {
    font-size: 1.1vw;
  }

  .intro-content {
    font-size: 1vw;
  }

  .activity-status-text {
    font-size: 1vw;
  }
}

@media (max-width: 768px) {
  .activity-grid {
    grid-template-columns: 1fr;
    gap: 2vw;
  }

  .activity-card {
    padding: 0;
    /* 保持无内边距，让图片占满顶部 */
    min-height: 30vh;
  }

  /* 手机端活动卡片图片 */
  .activity-card-image {
    height: 12vh;
    /* 手机端增加图片高度 */
  }

  /* 手机端活动内容区域添加内边距 */
  .activity-title,
  .activity-details,
  .activity-intro {
    padding-left: 3vw;
    padding-right: 3vw;
  }

  .activity-footer {
    padding: 0 3vw 3vw;
  }

  .activity-score-badge {
    font-size: 2.5vw;
    padding: 1vw 2vw;
    top: 2vw;
    right: 2vw;
  }

  .activity-title {
    font-size: 3.5vw;
    margin-bottom: 2vh;
  }

  .activity-meta-item {
    font-size: 2.8vw;
    margin-bottom: 1vh;
  }

  .intro-title {
    font-size: 3vw;
    margin-bottom: 1vh;
  }

  .intro-content {
    font-size: 2.8vw;
    margin-bottom: 2vh;
  }

  .activity-status-text {
    font-size: 2.8vw;
  }
}

/* 消息页面样式 */
.message-content {
  width: 100%;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.04vh;
  /* 20px转换为vh */
  padding: 0 1.04vw;
  /* 20px转换为vw */
}

.message-tabs {
  display: flex;
  gap: 2.08vw;
  /* 40px转换为vw */
}

.message-tab-item {
  font-size: 0.94vw;
  /* 18px转换为vw */
  color: #666;
  cursor: pointer;
  padding: 0.52vh 0;
  /* 10px转换为vh */
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.52vw;
  /* 10px转换为vw */
}

.message-tab-item.active {
  color: #1890ff;
  font-weight: 500;
}

/* 移除蓝色下划线
.message-tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.1vh;
  background-color: #1890ff;
}
*/

.message-count {
  background: #ff4d4f;
  color: white;
  font-size: 0.63vw;
  /* 12px转换为vw */
  padding: 2px 2px;
  /* 2px 6px转换 */
  border-radius: 50%;
  /* 10px转换为vw */
  min-width: 1.04vw;
  /* 20px转换为vw */
  text-align: center;
  line-height: 1;
}

.message-actions {
  display: flex;
  gap: 1.04vw;
  /* 20px转换为vw */
}

.action-link {
  width: 2.92vw;
  /* 56px转换为vw */
  height: 1.04vh;
  /* 20px转换为vh */
  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.73vw;
  /* 14px转换为vw */
  color: #000000;
  line-height: 1.04vh;
  /* 20px转换为vh */
  text-align: left;
  font-style: normal;
  text-transform: none;
  cursor: pointer;
  text-decoration: none;
}

.action-link:hover {
  color: #000000;
  /* 悬停时保持黑色 */
  text-decoration: none;
  /* 移除下划线 */
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 1.04vh;
  /* 20px转换为vh，消息项之间的间距 */
}

.message-item {
  position: relative;
  background: white;
  border: 1px solid #D8D8D8;
  border-radius: 0.42vw;
  /* 8px转换为vw */
  transition: border-color 0.3s ease;
}

.message-item:hover {
  border-color: #1890ff;
}

/* 右上角未读标识 */
.unread-indicator-top-right {
  position: absolute;
  top: 0.52vh;
  /* 10px转换为vh */
  right: 0.52vw;
  /* 10px转换为vw */
  width: 0.42vw;
  /* 8px转换为vw */
  height: 0.42vw;
  /* 8px转换为vw */
  background: #ff4d4f;
  border-radius: 50%;
}

.message-main {
  padding: 1.04vh 1.04vw;
  /* 20px转换 */
  margin-left: 1.04vw;
  /* 为未读标识留出空间 */
}

.message-user {
  display: flex;
  align-items: flex-start;
  gap: 0.73vw;
  /* 14px转换为vw */
  margin-bottom: 0.73vh;
  /* 14px转换为vh */
  width: 100%;
  /* 确保占满宽度 */
}

/* 消息头像样式 */
.image_22 {
  width: 2.19vw;
  /* 42px转换为vw */
  height: 2.19vw;
  /* 42px转换为vw */
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 0.1vh;
  /* 2px转换为vh，微调位置 */
}

.user-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* 确保内容不会溢出 */
}

.user-content {
  margin-bottom: 0.31vh;
  /* 6px转换为vh */
  overflow: hidden;
  /* 隐藏溢出内容 */
}

.user-name {
  font-size: 0.83vw;
  /* 16px转换为vw */
  font-weight: 500;
  color: #1890ff;
}

.message-text {
  width: auto;
  /* 自适应宽度 */
  height: auto;
  /* 自适应高度 */
  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.73vw;
  /* 14px转换为vw */
  color: #0388D1;
  line-height: 1.04vh;
  /* 20px转换为vh */
  text-align: left;
  font-style: normal;
  text-transform: none;
  display: inline;
  /* 改为inline，让文字在一行显示 */
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 隐藏溢出 */
  text-overflow: ellipsis;
  /* 超出显示省略号 */
  max-width: 100%;
  /* 最大宽度为容器宽度 */
}

/* 课程信息容器 */
.course-info-container {
  width: 49.06vw;
  /* 942px转换为vw */
  height: 3.22vh;
  /* 62px转换为vh，高度加一倍 */
  background: url('https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9491a7fe5bdac8e8a88de63907163bd6b8a259824f56a3c76784ba6cdc7bc32b') 100% no-repeat;
  background-size: 100% 100%;
  margin-top: 0.26vh;
  /* 5px转换为vh */
  position: relative;
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: flex-start;
  /* 水平左对齐 */
  padding-left: 0.57vw;
  /* 11px转换为vw */
}

.course-label {
  font-size: 0.73vw;
  /* 14px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  color: #999999;
  line-height: 1.04vh;
  /* 20px转换为vh */
}

.course-name {
  font-size: 0.73vw;
  /* 14px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  color: #497087;
  line-height: 1.04vh;
  /* 20px转换为vh */
}

.message-time {
  width: 4.69vw;
  /* 90px转换为vw */
  height: 1.04vh;
  /* 20px转换为vh */
  font-size: 0.63vw;
  /* 12px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  color: rgba(153, 153, 153, 1);
  text-align: left;
  white-space: nowrap;
  line-height: 1.04vh;
  /* 20px转换为vh */
  margin-left: auto;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.05vh;
  /* 1px转换为vh，微调位置 */
  position: relative;
  top: 1.56vh;
  /* 30px转换为vh，让时间下移 */
}

.message-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 1.56vh;
  /* 30px转换为vh，增加距离上方的距离 */
  margin-bottom: 1.09vh;
  /* 21px转换为vh */
  margin-left: 0.36vw;
  /* 7px转换为vw */
  position: relative;
  width: 100%;
}

.message-action-btn {
  display: flex;
  align-items: center;
  gap: 0;
  /* 移除图标和文字间距，让它们紧贴 */
  padding: 0;
  border: none;
  background: none;
  width: auto;
  /* 自适应宽度 */
  height: 1.04vh;
  /* 20px转换为vh */
  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.73vw;
  /* 14px转换为vw */
  color: #999999;
  line-height: 1.04vh;
  /* 20px转换为vh */
  text-align: left;
  font-style: normal;
  text-transform: none;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  /* 防止文字换行 */
}

/* 回复按钮位置 */
.reply-btn {
  margin-left: 2.92vw;
  /* 56px转换为vw */
}

/* 删除按钮位置 */
.delete-btn {
  margin-left: 0.78vw;
  /* 15px转换为vw，减小与回复按钮的间距 */
}

/* 举报按钮位置 - 在最右边 */
.report-btn {
  position: absolute;
  right: 0;
}

/* 系统消息样式 */
.system-message-item {
  position: relative;
  background: white;
  border: 1px solid #D8D8D8;
  border-radius: 0;
  transition: border-color 0.3s ease;
  height: auto;
  min-height: 6.88vh;
  /* 132px转换为vh */
  margin-bottom: 1.04vh;
  /* 20px转换为vh */
}

.system-message-item:hover {
  border-color: #1890ff;
}

.system-message-main {
  padding: 1.25vh 1.04vw;
  /* 24px 20px转换 */
  margin-left: 1.56vw;
  /* 30px转换为vw */
}

.system-message-user {
  display: flex;
  align-items: flex-start;
  gap: 0.73vw;
  /* 14px转换为vw */
  margin-bottom: 0.73vh;
  /* 14px转换为vh */
  width: 100%;
  position: relative;
  /* 为绝对定位的时间提供参考 */
}

.system-icon {
  width: 2.19vw;
  /* 42px转换为vw */
  height: 2.19vw;
  /* 42px转换为vw */
  background: rgba(3, 136, 209, 1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1vh;
  /* 2px转换为vh，微调位置 */
}

.system-icon::before {
  content: '🔔';
  color: white;
  font-size: 1.04vw;
  /* 20px转换为vw */
}

.system-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.system-title {
  font-size: 0.73vw;
  /* 14px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  color: rgba(0, 0, 0, 1);
  line-height: 1.5;
  /* 使用相对行高，确保文字不错位 */
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 0.52vh;
  /* 10px转换为vh */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.system-subtitle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.system-subtitle {
  font-size: 0.73vw;
  /* 14px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  color: rgba(153, 153, 153, 1);
  line-height: 1.5;
  /* 使用相对行高，确保文字不错位 */
  text-align: left;
  font-style: normal;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: 1.04vw;
  /* 20px转换为vw，与查看详情保持间距 */
}

.system-detail-link {
  font-size: 0.73vw;
  /* 14px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  color: rgba(3, 136, 209, 1);
  line-height: 1.5;
  /* 使用相对行高，确保文字不错位 */
  text-align: left;
  font-style: normal;
  text-transform: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.system-detail-link:hover {
  text-decoration: underline;
}

.system-time {
  width: 4.69vw;
  /* 90px转换为vw */
  font-size: 0.63vw;
  /* 12px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  color: rgba(153, 153, 153, 1);
  text-align: left;
  white-space: nowrap;
  line-height: 1.5;
  /* 使用相对行高，确保文字不错位 */
  margin-left: auto;
  /* 推到右边 */
  flex-shrink: 0;
  align-self: flex-start;
}

.message-action-btn:hover {
  /* 移除背景色，只保持透明 */
  background: none;
  color: #999999;
  /* 保持原色不变 */
}

.message-action-btn.reply-btn:hover {
  background: none;
  color: #999999;
  /* 保持原色不变 */
}

.message-action-btn.delete-btn:hover {
  background: none;
  color: #999999;
  /* 保持原色不变 */
}

.message-action-btn.report-btn:hover {
  background: none;
  color: #999999;
  /* 保持原色不变 */
}

.reply-section {
  margin-top: 0.73vh;
  /* 14px转换为vh */
  padding-top: 0.73vh;
  /* 14px转换为vh */
  border-top: 1px solid #f0f0f0;
}

.reply-input-container {
  background: #fafafa;
  border-radius: 0.42vw;
  /* 8px转换为vw */
  padding: 0.73vh 0.73vw;
  /* 14px转换 */
}

.reply-textarea {
  width: 100%;
  min-height: 3.91vh;
  /* 75px转换为vh */
  border: 1px solid #d9d9d9;
  border-radius: 0.31vw;
  /* 6px转换为vw */
  padding: 0.52vh 0.52vw;
  /* 10px转换 */
  font-size: 0.73vw;
  /* 14px转换为vw */
  line-height: 1.5;
  resize: vertical;
  font-family: inherit;
}

.reply-textarea:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 0.1vw rgba(24, 144, 255, 0.2);
}

.reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.52vw;
  /* 10px转换为vw */
  margin-top: 0.52vh;
  /* 10px转换为vh */
}

.cancel-btn,
.send-btn {
  padding: 0.31vh 0.83vw;
  /* 6px 16px转换 */
  border: 1px solid #d9d9d9;
  border-radius: 0.31vw;
  /* 6px转换为vw */
  font-size: 0.73vw;
  /* 14px转换为vw */
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: white;
  color: #666;
}

.cancel-btn:hover {
  border-color: #40a9ff;
  color: #40a9ff;
}

.send-btn {
  background: #1890ff;
  color: white;
  border-color: #1890ff;
}

.send-btn:hover {
  background: #40a9ff;
  border-color: #40a9ff;
}

.draftbox {
  margin-left: auto;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.draftbox img {
  width: 14px;
  height: 14px;
  margin-right: 8px;
}

.draftbox span {
  font-size: 12px;
}

.draftbox:hover {
  color: #40a9ff;
}

.breadcrumb-wrapper {
  padding: 5px 0;
}

.breadcrumb-wrapper .text_15 {
  font-size: 13px;
}

.homework {
  color: #A2A2A2;
}

/* 消息页面响应式设计 */
@media (max-width: 1200px) {
  .message-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1vh;
  }

  .message-tabs {
    gap: 3vw;
  }

  .message-tab-item {
    font-size: 1.2vw;
  }
}

/* 消息页面响应式设计 */
@media (max-width: 1200px) {
  .message-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1vh;
  }

  .message-tabs {
    gap: 3vw;
  }

  .message-tab-item {
    font-size: 1.2vw;
  }

  .user-avatar {
    width: 3vw;
    height: 3vw;
  }

  .user-name {
    font-size: 1.1vw;
  }

  .message-text {
    font-size: 1.1vw;
    width: auto;
    /* 响应式下自适应宽度 */
    height: auto;
    /* 响应式下自适应高度 */
    line-height: 1.5;
    /* 响应式下调整行高 */
    white-space: nowrap;
    /* 保持不换行 */
    overflow: hidden;
    /* 隐藏溢出 */
    text-overflow: ellipsis;
    /* 超出显示省略号 */
  }

  .course-label,
  .course-name,
  .message-time {
    font-size: 1vw;
  }
}

@media (max-width: 768px) {
  .message-header {
    padding: 0 3vw;
  }

  .message-tabs {
    gap: 5vw;
  }

  .message-tab-item {
    font-size: 3vw;
  }

  .message-count {
    font-size: 2.5vw;
    padding: 0.5vh 1.5vw;
  }

  .action-link {
    font-size: 2.8vw;
  }

  .message-main {
    padding: 3vh 3vw;
    margin-left: 2vw;
  }

  .user-avatar {
    width: 8vw;
    height: 8vw;
  }

  .user-name {
    font-size: 3.2vw;
  }

  .message-text {
    font-size: 3.2vw;
    width: auto;
    /* 手机端自适应宽度 */
    height: auto;
    /* 手机端自适应高度 */
    line-height: 1.5;
    /* 手机端调整行高 */
    white-space: nowrap;
    /* 保持不换行 */
    overflow: hidden;
    /* 隐藏溢出 */
    text-overflow: ellipsis;
    /* 超出显示省略号 */
  }

  .course-label,
  .course-name,
  .message-time {
    font-size: 2.8vw;
  }

  /* 手机端课程信息容器调整 */
  .course-info-container {
    width: 90vw;
    height: auto;
    padding: 1vh 3vw;
  }

  /* 手机端系统消息调整 */
  .system-message-item {
    min-height: 15vh;
  }

  .system-message-main {
    padding: 3vh 3vw;
    margin-left: 2vw;
  }

  .system-icon {
    width: 8vw;
    height: 8vw;
  }

  .system-title,
  .system-subtitle,
  .system-detail-link,
  .system-time {
    font-size: 2.8vw;
  }

  .action-btn {
    font-size: 2.8vw;
    padding: 1vh 2vw;
  }

  .reply-textarea {
    font-size: 3vw;
    padding: 2vh 2vw;
  }

  .cancel-btn,
  .send-btn {
    font-size: 2.8vw;
    padding: 1.5vh 3vw;
  }
}

/* 我的资料页面样式 */
.materials-content {
  background: white;
  border-radius: 0.42vw;
  /* 8px转换为vw */
  padding: 0;
  margin: 1.04vh 0;
  /* 20px转换为vh */
}

.materials-header {
  padding: 1.56vh 2.08vw;
  /* 30px 40px转换 */
  border-bottom: 1px solid #f0f0f0;
}

.materials-tabs {
  display: flex;
  gap: 2.08vw;
  /* 40px转换为vw */
}

.materials-tab-item {
  font-size: 0.83vw;
  /* 16px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  color: #666;
  cursor: pointer;
  padding: 0.52vh 0;
  /* 10px转换为vh */
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.materials-tab-item.active {
  color: #1890ff;
  font-weight: 500;
  /* 移除蓝色下划线 */
}

.materials-tab-item:hover {
  color: #1890ff;
}

/* 基础信息页面样式 */
.basic-info-content {
  padding: 1.04vh 1.04vw;
  /* 20px转换，减少内边距因为容器已有边距 */
}

.basic-info-container {
  max-width: 52.08vw;
  /* 1000px转换为vw */
  margin: 0 auto;
  border: 1px solid #D8D8D8;
  border-radius: 0.42vw;
  /* 8px转换为vw */
  padding: 2.08vh 2.08vw;
  /* 40px转换 */
  background: white;
}

.basic-info-title {
  font-size: 0.94vw;
  /* 18px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-weight: 500;
  color: #333;
  margin-bottom: 2.08vh;
  /* 40px转换为vh */
  padding-bottom: 1.04vh;
  /* 20px转换为vh */
  border-bottom: 1px solid #f0f0f0;
}

/* 头像部分样式 */
.avatar-section {
  display: flex;
  justify-content: center;
  margin-bottom: 3.13vh;
  /* 60px转换为vh */
}

.avatar-container {
  position: relative;
  display: inline-block;
}

.user-avatar-large {
  width: 3.54vw !important;
  /* 68px转换为vw，覆盖SafeAvatar样式 */
  height: 3.54vw !important;
  /* 68px转换为vw，覆盖SafeAvatar样式 */
  border-radius: 50%;
  border: 3px solid #e0e0e0;
}

.user-avatar-large img {
  object-fit: cover;
}

.avatar-edit-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.3vw;
  /* 25px转换为vw */
  height: 1.3vw;
  /* 25px转换为vw */
  background: #0288D1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.avatar-edit-btn:hover {
  background: #0277BD;
  /* 稍微深一点的蓝色作为悬停效果 */
}

.avatar-edit-btn .edit-icon {
  width: 0.57vw;
  /* 11px转换为vw */
  height: 0.57vw;
  /* 11px转换为vw */
  object-fit: contain;
}

/* 表单样式 */
.basic-info-form {
  width: 100%;
}

.form-row {
  display: flex;
  flex-direction: row;
  /* 改为水平展示 */
  gap: 2.08vw;
  /* 40px转换为vw */
  justify-content: space-between;
}

.form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.56vh;
  /* 30px转换为vh，增加标签和输入框之间的距离 */
}

.form-label {
  width: auto;
  /* 改为自适应宽度，避免换行 */
  min-width: 4.17vw;
  /* 80px转换为vw，确保最小宽度 */
  height: 1.04vh;
  /* 20px转换为vh */
  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.73vw;
  /* 14px转换为vw */
  color: #999999;
  line-height: 1.04vh;
  /* 20px转换为vh */
  text-align: left;
  font-style: normal;
  text-transform: none;
  white-space: nowrap;
  /* 防止换行 */
  flex-shrink: 0;
}

.form-input,
.form-select {
  width: 14.38vw;
  /* 276px转换为vw */
  height: 4.17vh;
  /* 80px转换为vh，与密码修改页面保持一致 */
  padding: 1.04vh 0.73vw;
  /* 20px 14px转换，增加上下内边距 */
  background: #F5F8FB;
  border: 1px solid #D8D8D8;
  border-radius: 0.21vw;
  /* 4px转换为vw */
  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.73vw;
  /* 14px转换为vw */
  color: #333333;
  line-height: normal;
  /* 改为normal，让浏览器自动计算合适的行高 */
  text-align: left;
  font-style: normal;
  text-transform: none;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
  /* 确保padding包含在总高度内 */
}

/* 专门为select元素优化 */
.form-select {
  display: flex;
  align-items: center;
  /* 垂直居中对齐 */
  padding-top: 0.78vh;
  /* 15px转换为vh，调整顶部内边距 */
  padding-bottom: 0.78vh;
  /* 15px转换为vh，调整底部内边距 */
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.form-input::placeholder {
  color: #bfbfbf;
}

/* 密码修改页面样式 */
.password-content {
  padding: 1.04vh 1.04vw;
  /* 20px转换，减少内边距因为容器已有边距 */
}

.password-container {
  max-width: 52.08vw;
  /* 1000px转换为vw */
  margin: 0 auto;
  border: 1px solid #D8D8D8;
  border-radius: 0.42vw;
  /* 8px转换为vw */
  padding: 2.08vh 2.08vw;
  /* 40px转换 */
  background: white;
}

.password-title {
  font-size: 0.94vw;
  /* 18px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-weight: 500;
  color: #333;
  margin-bottom: 2.08vh;
  /* 40px转换为vh */
  padding-bottom: 1.04vh;
  /* 20px转换为vh */
  border-bottom: 1px solid #f0f0f0;
}

.password-form {
  width: 100%;
}

.password-form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.56vh;
  /* 30px转换为vh */
  margin-bottom: 2.08vh;
  /* 40px转换为vh */
}

.password-form-label {
  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.73vw;
  /* 14px转换为vw */
  color: #999999;
  line-height: 1.04vh;
  /* 20px转换为vh */
  text-align: left;
  font-style: normal;
  text-transform: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.account-display {
  width: 47.92vw;
  /* 920px转换为vw，减小宽度避免超出容器 */
  height: 4.17vh;
  /* 80px转换为vh，增加高度 */
  padding: 1.04vh 1.56vw;
  /* 20px 30px转换，增加内边距，placeholder往右移 */
  background: #F5F8FB;
  border: 1px solid #D8D8D8;
  border-radius: 0.21vw;
  /* 4px转换为vw */
  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.73vw;
  /* 14px转换为vw */
  color: #333333;
  line-height: normal;
  text-align: left;
  font-style: normal;
  text-transform: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.password-form-input {
  width: 47.92vw;
  /* 920px转换为vw，减小宽度避免超出容器 */
  height: 4.17vh;
  /* 80px转换为vh，增加高度 */
  padding: 1.04vh 1.56vw;
  /* 20px 30px转换，增加内边距，placeholder往右移 */
  background: #F5F8FB;
  border: 1px solid #D8D8D8;
  border-radius: 0.21vw;
  /* 4px转换为vw */
  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.73vw;
  /* 14px转换为vw */
  color: #333333;
  line-height: normal;
  text-align: left;
  font-style: normal;
  text-transform: none;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.password-form-input:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.password-form-input::placeholder {
  color: #bfbfbf;
}

.password-form-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 2.08vh;
  /* 40px转换为vh */
}

.password-save-btn {
  padding: 0.73vh 2.08vw;
  /* 14px 40px转换 */
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 0.21vw;
  /* 4px转换为vw */
  font-size: 0.73vw;
  /* 14px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.password-save-btn:hover {
  background: #40a9ff;
}

.password-save-btn:active {
  background: #096dd9;
}

/* 我的下载页面样式 */
.download-content {
  background: white;
  border-radius: 0.42vw;
  /* 8px转换为vw */
  padding: 0 0 1.04vh 0;
  /* 底部添加20px内边距，确保内容不被截断 */
  margin: 1.04vh 0;
  /* 20px转换为vh */
  overflow: visible;
  /* 确保内容完全可见 */
}

/* 面包屑控制区域样式 */
.breadcrumb-controls {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 1.56vh 2.08vw;
  /* 30px 40px转换 */
}

/* 面包屑导航样式 */
.breadcrumb-nav {
  display: flex;
  align-items: center;
}

.breadcrumb-text {
  font-size: 0.73vw;
  /* 14px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  color: #666;
  cursor: pointer;
  transition: color 0.3s ease;
}

.breadcrumb-text:hover {
  color: #1890ff;
}

.breadcrumb-current {
  font-size: 0.73vw;
  /* 14px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  color: #333;
  font-weight: 500;
}

/* 子目录中的文件项样式调整 */
.download-content.in-subdirectory .file-item .file-icon {
  margin-left: 0 !important;
  /* 子目录中移除左边距 */
}

.download-content.in-subdirectory .file-item .file-name {
  margin-top: 1.56vh !important;
  /* 子目录中文件名下移30px */
}

/* 子目录特有样式 */
.subdirectory-item .file-icon {
  margin-left: 0 !important;
  /* 移除左边距 */
}

.subdirectory-item .file-name {
  margin-top: 2.04vh !important;
  /* 20px转换为vh，下移文件名 */
}

/* 证书网格特有样式 - 一行显示3个 */
.certificate-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  /* 固定3列 */
  gap: 1.5vw !important;
  /* 减少间距，给证书更多空间 */
  justify-content: center;
  width: 100% !important;
  /* 确保占满容器宽度 */
}

.certificate-grid .file-item {
  width: 100% !important;
  /* 占满网格单元格宽度 */
  height: auto !important;
  /* 高度自适应内容 */
  min-height: 15vh !important;
  /* 增加最小高度给证书更多空间 */
  background: white !important;
  /* 证书背景色改为白色 */
  padding: 2.6vh 2.6vw !important;
  /* 50px转换为vw/vh，上下左右50px间距 */
  display: flex !important;
  /* 使用flex布局 */
  flex-direction: column !important;
  /* 垂直排列 */
  align-items: center !important;
  /* 水平居中 */
  justify-content: center !important;
  /* 垂直居中 */
}

.certificate-grid .file-item .file-icon {
  width: 100% !important;
  /* 占满容器宽度 */
  height: auto !important;
  /* 高度自适应 */
  max-width: 20vw !important;
  /* 增大最大宽度限制 */
  margin: 0 auto 2.6vh auto !important;
  /* 居中显示，底部留50px间距(2.6vh) */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.certificate-grid .file-item .folder-icon {
  width: 100% !important;
  /* 图片占满图标容器 */
  height: auto !important;
  /* 高度自适应保持比例 */
  max-width: 100% !important;
  /* 最大宽度不超过容器 */
  min-height: 8vh !important;
  /* 设置最小高度确保图片足够大 */
  object-fit: contain !important;
  /* 保持图片比例，完整显示 */
}

.certificate-grid .file-item .file-name {
  margin-top: 0.5vh !important;
  /* 证书名字与图片间距约25px */
  text-align: center !important;
  /* 文字居中 */
  padding: 0 1.3vw !important;
  /* 左右内边距约25px */
}

.download-header {
  padding: 1.56vh 2.08vw;
  /* 30px 40px转换 */
  border-bottom: 1px solid #f0f0f0;
}

.download-tabs {
  display: flex;
  gap: 2.08vw;
  /* 40px转换为vw */
}

.download-tab-item {
  font-size: 0.83vw;
  /* 16px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-weight: normal;
  color: #666;
  cursor: pointer;
  padding: 0.52vh 0;
  /* 10px转换为vh */
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.download-tab-item.active {
  color: #1890ff;
  font-weight: 500;
  /* 移除蓝色下划线 */
}

.download-tab-item:hover {
  color: #1890ff;
}

/* 筛选和操作区域 */
.download-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.56vh 2.08vw;
  /* 30px 40px转换 */
  /* 移除下方边框线条 */
}

.download-filters {
  display: flex;
  align-items: center;
  gap: 2.08vw;
  /* 40px转换为vw */
}

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

.filter-label,
.search-label {
  font-size: 0.73vw;
  /* 14px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  color: #333;
  white-space: nowrap;
}

.filter-select {
  width: 9.21vw;
  /* 100px转换为vw */
  height: 3.16vh;
  /* 80px转换为vh，增加一倍高度 */
  padding: 0.52vh 0.52vw;
  /* 10px转换，增加内边距 */
  border: 1px solid #d9d9d9;

  font-size: 0.73vw;
  /* 14px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  color: #333;
  background: white;
}

.search-input-container {
  display: flex;
  align-items: center;
  position: relative;
}

.search-input {
  width: 10.42vw;
  /* 200px转换为vw */
  height: 3.16vh;
  /* 80px转换为vh，增加一倍高度 */
  padding: 0.26vh 2.08vw 0.26vh 0.52vw;
  /* 5px 40px 5px 10px转换，右侧留空给按钮 */
  border: 1px solid #d9d9d9;
  border-radius: 0;
  /* 移除圆角，变成直角 */
  font-size: 0.73vw;
  /* 14px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  color: #333;
  background: white;
}

.search-btn {
  position: absolute;
  right: 0.26vw;
  /* 5px转换为vw */
  top: 50%;
  transform: translateY(-50%);
  width: 1.56vw;
  /* 30px转换为vw */
  height: 1.56vh;
  /* 30px转换为vh */
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.download-actions {
  display: flex;
  align-items: center;
  gap: 1.04vw;
  /* 20px转换为vw */
}

.file-count {
  width: 5.83vw;
  /* 112px转换为vw */
  height: 0.73vh;
  /* 14px转换为vh */
  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.52vw;
  /* 10px转换为vw */
  color: #999999;
  line-height: 0.73vh;
  /* 14px转换为vh */
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.new-folder-btn {
  padding: 0.52vh 1.04vw;
  /* 10px 20px转换 */
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 0.21vw;
  /* 4px转换为vw */
  font-size: 0.73vw;
  /* 14px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
}

.new-folder-btn:hover {
  background: #40a9ff;
}

/* 文件网格样式 */
.files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 8.17vw);
  /* 自适应列数，每列157px */
  gap: 1vw;
  /* 30px转换为vw，增加间距 */
  /* padding: 2.08vh 2.08vw 3.13vh 2.08vw; 上40px 左右40px 下60px，确保底部边框可见 */
  padding: 20px 0;
  justify-content: start;
  overflow: visible;
  /* 确保内容不被截断 */
}

.file-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 7.5vw;
  /* 157px转换为vw */
  min-height: 10.47vh;
  /* 最小高度201px，允许自适应增长 */
  padding: 1.04vh 0.52vw;
  /* 上下20px 左右10px */
  border: 1px solid #D8D8D8 !important;
  /* 强制显示边框 */
  border-radius: 0;
  /* 移除圆角，变成直角 */
  background: white;
  transition: all 0.3s ease;
  cursor: pointer;
  box-sizing: border-box;
  margin-bottom: 0.26vh;
  /* 2px转换为vh，确保底部边框可见 */
}

.file-item:hover {
  background: #f5f5f5;
  border-color: #bfbfbf;
}

.file-menu {
  position: absolute;
  top: 0.52vh;
  /* 10px转换为vh */
  right: 0.52vw;
  /* 10px转换为vw */
  z-index: 10;
}

.file-menu-btn {
  width: 1.25vw;
  /* 24px转换为vw */
  height: 1.25vh;
  /* 24px转换为vh */
  border: none;
  background: none;
  /* 移除背景 */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.83vw;
  /* 16px转换为vw */
  color: #666;
  transition: all 0.3s ease;
}

.file-menu-btn:hover {
  background: none;
  /* 移除悬停背景 */
}

.more-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.file-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 0.21vw;
  /* 4px转换为vw */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 20;
  min-width: 4.17vw;
  /* 80px转换为vw */
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 0.21vw;
  /* 4px转换为vw，减小图标和文字间距 */
  padding: 0.52vh 0.73vw;
  /* 10px 14px转换 */
  font-size: 0.73vw;
  /* 14px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  /* 确保文字水平展示，不换行 */
}

.menu-icon {
  width: 1.25vw;
  /* 24px转换为vw，增加一倍 */
  height: 1.25vh;
  /* 24px转换为vh，增加一倍 */
  object-fit: contain;
  flex-shrink: 0;
}

.menu-item:hover {
  background: #f5f5f5;
}

.menu-item:first-child {
  border-radius: 0.21vw 0.21vw 0 0;
  /* 4px转换为vw */
}

.menu-item:last-child {
  border-radius: 0 0 0.21vw 0.21vw;
  /* 4px转换为vw */
}

.file-icon {
  width: 5.21vw;
  /* 100px转换为vw */
  height: 5.21vw;
  /* 100px转换为vw */
  margin-top: 4.56vh;
  /* 30px转换为vh，增加顶部间距，图片下移 */
  margin-left: 1.26vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.folder-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

.folder-icon-css {
  font-size: 2.5vw;
  /* 48px转换为vw */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.file-name {
  font-size: 0.73vw;
  /* 14px转换为vw */
  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  color: #333;
  text-align: center;
  word-break: break-all;
  line-height: 1.2;
  margin-top: -0.26vh;
  /* 5px转换为vh，减小与图标的间距，文件名上移 */
  margin-bottom: 0.52vh;
  /* 10px转换为vh，底部间距，确保不贴边框 */
  padding: 0 0.26vw;
  /* 左右5px内边距 */
  width: 100%;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .download-tabs {
    gap: 3vw;
  }

  .download-tab-item {
    font-size: 1vw;
  }

  .download-controls {
    flex-direction: column;
    gap: 2vh;
    align-items: flex-start;
  }

  .download-filters {
    gap: 3vw;
  }

  .filter-select {
    width: 8vw;
    font-size: 1vw;
  }

  .search-input {
    width: 15vw;
    font-size: 1vw;
  }

  .files-grid {
    grid-template-columns: repeat(auto-fit, 12vw);
    /* 平板端调整文件项宽度 */
    gap: 2vw;
  }



  .file-item {
    width: 12vw;
    height: 18vh;
    /* 增加平板端高度 */
  }

  .file-icon {
    width: 8vw;
    height: 8vw;
  }

  .file-name {
    font-size: 1vw;
  }
}

@media (max-width: 1200px) {
  .materials-tabs {
    gap: 3vw;
  }

  .materials-tab-item {
    font-size: 1vw;
  }

  .user-avatar-large {
    width: 6vw !important;
    height: 6vw !important;
  }

  .avatar-edit-btn {
    width: 2.6vw;
    /* 平板端按比例调整：25px * 1.3 ≈ 32px */
    height: 2.6vw;
  }

  .avatar-edit-btn .edit-icon {
    width: 1.14vw;
    /* 平板端按比例调整：11px * 1.3 ≈ 14px */
    height: 1.14vw;
  }

  .form-row {
    flex-direction: column;
    gap: 3vh;
  }

  .form-label {
    width: auto;
    font-size: 1vw;
  }

  .form-input,
  .form-select {
    width: 30vw;
    font-size: 1vw;
  }

  .basic-info-title,
  .password-title {
    font-size: 1.2vw;
  }

  .save-btn {
    font-size: 1vw;
    padding: 1vh 3vw;
  }
}

@media (max-width: 576px) {

  .download-content,
  .materials-content {
    margin: 2vh 1vw;
    border-radius: 1vw;
  }

  .download-header {
    padding: 3vh 4vw;
  }

  .download-tabs {
    gap: 6vw;
  }

  .download-tab-item {
    font-size: 3vw;
  }

  .download-controls {
    padding: 3vh 4vw;
    flex-direction: column;
    gap: 3vh;
  }

  .download-filters {
    flex-direction: column;
    gap: 2vh;
    width: 100%;
  }

  .filter-group,
  .search-group {
    width: 100%;
    justify-content: space-between;
  }

  .filter-select {
    width: 20vw;
    font-size: 3.5vw;
    height: 6vh;
  }

  .search-input {
    width: 50vw;
    font-size: 3.5vw;
    height: 6vh;
    padding: 2vh 8vw 2vh 3vw;
  }

  .search-btn {
    width: 6vw;
    height: 6vh;
  }

  .download-actions {
    width: 100%;
    justify-content: space-between;
  }

  .file-count {
    font-size: 3vw;
  }

  .new-folder-btn {
    font-size: 3vw;
    padding: 2vh 4vw;
  }

  .files-grid {
    grid-template-columns: repeat(auto-fit, 40vw);
    /* 手机端文件项宽度 */
    gap: 4vw;
    padding: 4vh 4vw;
    justify-content: center;
  }



  .file-item {
    width: 40vw;
    height: 30vh;
    /* 增加手机端高度 */
  }

  .file-icon {
    width: 20vw;
    height: 20vw;
  }

  .file-name {
    font-size: 3vw;
  }

  .file-menu-btn {
    width: 6vw;
    height: 6vh;
    font-size: 4vw;
  }

  .menu-item {
    font-size: 3.5vw;
    padding: 2vh 3vw;
  }

  .materials-header {
    padding: 3vh 4vw;
  }

  .materials-tabs {
    gap: 6vw;
  }

  .materials-tab-item {
    font-size: 3vw;
  }

  .basic-info-content,
  .password-content {
    padding: 4vh 4vw;
  }

  .user-avatar-large {
    width: 15vw !important;
    height: 15vw !important;
  }

  .avatar-edit-btn {
    width: 6.5vw;
    /* 手机端按比例调整：25px * 2.6 ≈ 65px */
    height: 6.5vw;
  }

  .avatar-edit-btn .edit-icon {
    width: 2.86vw;
    /* 手机端按比例调整：11px * 2.6 ≈ 29px */
    height: 2.86vw;
  }

  .form-row {
    flex-direction: column;
    gap: 4vh;
  }

  .form-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 1vh;
  }

  .form-label {
    width: auto;
    font-size: 3.5vw;
    text-align: left;
  }

  .form-input,
  .form-select {
    width: 100%;
    font-size: 3.5vw;
    height: 6vh;
    padding: 2vh 3vw;
  }

  .basic-info-title,
  .password-title {
    font-size: 4vw;
  }

  .save-btn {
    font-size: 3.5vw;
    padding: 2vh 6vw;
  }
}
</style>