From 7afd24e9a04933bfdd91e0df27d9af7a384d87af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=BC=A0?= <2091066548@qq.com>
Date: Fri, 1 Aug 2025 07:00:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E6=B4=BB=E5=8A=A8=E6=88=91?=
 =?UTF-8?q?=E7=9A=84=E6=B6=88=E6=81=AF=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Profile.vue | 2218 ++++++++++++++++++++++++++++++++---------
 1 file changed, 1771 insertions(+), 447 deletions(-)

diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 580ad8b..6c2df44 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -2,513 +2,700 @@
   <div class="profile-page">
     <!-- 主要内容区域 -->
     <div class="profile-content flex-row">
-      <!-- 左侧侧边栏 -->
-      <div class="block_14">
-        <!-- 用户头像和姓名 -->
-        <img
-            class="image_7"
-            referrerpolicy="no-referrer"
-            :src="userStore.user?.avatar || 'https://via.placeholder.com/100'"
-        />
-        <span class="text_72">{{ userStore.user?.username || '用户名' }}</span>
-
-        <!-- 菜单项容器 -->
-        <div class="box_22">
-          <!-- 分割线 -->
-          <div class="menu-divider"></div>
-
-          <!-- 我的课程 -->
-          <div :class="['image-text_19', { active: activeTab === 'courses' }]" @click="handleMenuSelect('courses')">
+          <!-- 左侧侧边栏 -->
+          <div class="block_14">
+            <!-- 用户头像和姓名 -->
             <img
-                class="image_8"
-                referrerpolicy="no-referrer"
-                src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngc9a739861792bd074fb3af58d5ece46828d647f66e1113746e41e68ae5486135"
+              class="image_7"
+              referrerpolicy="no-referrer"
+              :src="userStore.user?.avatar || 'https://via.placeholder.com/100'"
             />
-            <span class="text-group_19">我的课程</span>
-          </div>
+            <span class="text_72">{{ userStore.user?.username || '用户名' }}</span>
 
-          <!-- 我的作业 -->
-          <div :class="['image-text_20', { active: activeTab === 'homework' }]" @click="handleMenuSelect('homework')">
-            <img
-                class="label_4"
-                referrerpolicy="no-referrer"
-                src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9ef14366fc1741a8ada8db176341d56e43f72cb07685130ee04c0fc0e70b95e9"
-            />
-            <span class="text-group_20">我的作业</span>
-          </div>
+            <!-- 菜单项容器 -->
+            <div class="box_22">
+              <!-- 分割线 -->
+              <div class="menu-divider"></div>
 
-          <!-- 我的考试 -->
-          <div :class="['image-text_21', { active: activeTab === 'exam' }]" @click="handleMenuSelect('exam')">
-            <img
-                class="label_5"
-                referrerpolicy="no-referrer"
-                src="https://lanhu-oss-2537-2.lanhuapp.com/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="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="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="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="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="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngad1dcee8a35e9a4214d2c43a40efac32d603d0e91d741f88a0cc5aa8aa0c9e4d"
-            />
-            <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">
-                  <img
-                      class="thumbnail_4"
-                      referrerpolicy="no-referrer"
-                      :src="course.thumbnail"
-                  />
-                  <span :class="['status-text', course.status]">{{ getStatusText(course.status) }}</span>
-                </div>
+              <!-- 我的课程 -->
+              <div :class="['image-text_19', { active: activeTab === 'courses' }]" @click="handleMenuSelect('courses')">
+                <img
+                  class="image_8"
+                  referrerpolicy="no-referrer"
+                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngc9a739861792bd074fb3af58d5ece46828d647f66e1113746e41e68ae5486135"
+                />
+                <span class="text-group_19">我的课程</span>
               </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="['image-text_20', { active: activeTab === 'homework' }]" @click="handleMenuSelect('homework')">
+                <img
+                  class="label_4"
+                  referrerpolicy="no-referrer"
+                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9ef14366fc1741a8ada8db176341d56e43f72cb07685130ee04c0fc0e70b95e9"
+                />
+                <span class="text-group_20">我的作业</span>
+              </div>
 
-                <div class="group_7 flex-row">
-                  <img
-                      class="thumbnail_6"
-                      referrerpolicy="no-referrer"
-                      src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng285a469537e55535ddd8097d697f25ce2f6071710544f034603554ee4d34f832"
-                  />
-                  <span class="text_20">共{{ course.chapters || 9 }}章{{ course.lessons || 54 }}节</span>
-                  <img
-                      class="thumbnail_7"
-                      referrerpolicy="no-referrer"
-                      src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng23376f42e0d0f21014efca4f1a7ee3c5efa70f6e1419d0d3e6c4a680191c7ef5"
-                  />
-                  <span class="text_21">{{ course.duration || '12小时43分钟' }}</span>
-                  <img
-                      class="thumbnail_8"
-                      referrerpolicy="no-referrer"
-                      :src="course.status === 'learning' ? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng51c1f99cd7b1c15c6efdc0480d16ff2681be4bef17a9dedfcaac33f2976fbd81' : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng317a0d8f3287bb788c48059c8181479ad5eba8557ef1c09215d9a1c962d0db67'"
-                  />
-                  <span class="text_22">已看{{ course.watchedTime || '10小时20分钟' }}</span>
-                  <div class="text-wrapper_2 flex-col" @click="goToCourse(course.id)">
-                    <span class="text_23">{{ course.status === 'learning' ? '去学习' : '去复习' }}</span>
-                  </div>
-                </div>
+              <!-- 我的考试 -->
+              <div :class="['image-text_21', { active: activeTab === 'exam' }]" @click="handleMenuSelect('exam')">
+                <img
+                  class="label_5"
+                  referrerpolicy="no-referrer"
+                  src="https://lanhu-oss-2537-2.lanhuapp.com/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="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="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="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="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="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngad1dcee8a35e9a4214d2c43a40efac32d603d0e91d741f88a0cc5aa8aa0c9e4d"
+                />
+                <span class="text-group_26">我的下载</span>
               </div>
             </div>
           </div>
 
-          <!-- 分页器 -->
-          <div class="pagination-wrapper" v-if="totalPages > 1">
-            <div class="pagination">
+          <!-- 右侧内容区域 -->
+          <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">
+                    <img
+                      class="thumbnail_4"
+                      referrerpolicy="no-referrer"
+                      :src="course.thumbnail"
+                    />
+                    <span :class="['status-text', course.status]">{{ getStatusText(course.status) }}</span>
+                  </div>
+                </div>
+
+                <div class="block_5 flex-col">
+                  <div class="group_6 flex-row">
+                    <span class="text_16">{{ course.title }}</span>
+                    <img
+                      class="thumbnail_5"
+                      referrerpolicy="no-referrer"
+                      src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge131c44858bb817d4885b81fdd8ddff8507f62cd51f1025cee826849e6a52c65"
+                    />
+                    <span class="text_17">{{ course.rating || 541 }}</span>
+                  </div>
+                  <span class="text_18">讲师：{{ course.instructor }}</span>
+                  <span class="text_19">{{ course.description }}</span>
+
+                  <div class="group_7 flex-row">
+                    <img
+                      class="thumbnail_6"
+                      referrerpolicy="no-referrer"
+                      src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng285a469537e55535ddd8097d697f25ce2f6071710544f034603554ee4d34f832"
+                    />
+                    <span class="text_20">共{{ course.chapters || 9 }}章{{ course.lessons || 54 }}节</span>
+                    <img
+                      class="thumbnail_7"
+                      referrerpolicy="no-referrer"
+                      src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng23376f42e0d0f21014efca4f1a7ee3c5efa70f6e1419d0d3e6c4a680191c7ef5"
+                    />
+                    <span class="text_21">{{ course.duration || '12小时43分钟' }}</span>
+                    <img
+                      class="thumbnail_8"
+                      referrerpolicy="no-referrer"
+                      :src="course.status === 'learning' ? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng51c1f99cd7b1c15c6efdc0480d16ff2681be4bef17a9dedfcaac33f2976fbd81' : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng317a0d8f3287bb788c48059c8181479ad5eba8557ef1c09215d9a1c962d0db67'"
+                    />
+                    <span class="text_22">已看{{ course.watchedTime || '10小时20分钟' }}</span>
+                    <div class="text-wrapper_2 flex-col" @click="goToCourse(course.id)">
+                      <span class="text_23">{{ course.status === 'learning' ? '去学习' : '去复习' }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 分页器 -->
+            <div class="pagination-wrapper" v-if="totalPages > 1">
+              <div class="pagination">
                 <span
-                    class="pagination-item nav-button"
-                    :class="{ disabled: currentPage === 1 }"
-                    @click="goToPage('first')"
+                  class="pagination-item nav-button"
+                  :class="{ disabled: currentPage === 1 }"
+                  @click="goToPage('first')"
                 >
                   首页
                 </span>
-              <span
+                <span
                   class="pagination-item nav-button"
                   :class="{ disabled: currentPage === 1 }"
                   @click="goToPage('prev')"
-              >
+                >
                   上一页
                 </span>
 
-              <span
+                <span
                   v-for="page in totalPages"
                   :key="page"
                   class="pagination-item page-number"
                   :class="{ active: page === currentPage }"
                   @click="goToPage(page)"
-              >
+                >
                   {{ page }}
                 </span>
 
-              <span
+                <span
                   class="pagination-item nav-button"
                   :class="{ disabled: currentPage === totalPages }"
                   @click="goToPage('next')"
-              >
+                >
                   下一页
                 </span>
-              <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>
-          </div>
-
-          <!-- 分割线 -->
-          <div class="course-divider"></div>
-
-          <!-- 作业详情视图 -->
-          <div v-if="showDetailView && detailAssignment">
-            <div class="detail-header">
-              <button @click="backToAssignmentList" class="back-button">← 返回作业列表</button>
+              </div>
+              </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 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>
               </div>
 
-              <!-- 作业内容 -->
-              <div class="text-group_4">
-                <span class="text_33">{{ detailAssignment.title }}</span>
-                <div class="description-container">
+              <!-- 分割线 -->
+              <div class="course-divider"></div>
+
+              <!-- 作业详情视图 -->
+            <div v-if="showDetailView && detailAssignment">
+              <div class="detail-header">
+                <button @click="backToAssignmentList" class="back-button">← 返回作业列表</button>
+              </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 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>
 
-          <!-- 作业列表 -->
-          <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 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" :style="{ color: assignment.status === '未完成' || assignment.status === '待提交' ? '#FF560C' : '#999999' }">{{ assignment.status }}</span>
                 </div>
-                <span class="text_32" :style="{ color: assignment.status === '未完成' || assignment.status === '待提交' ? '#FF560C' : '#999999' }">{{ assignment.status }}</span>
-              </div>
 
-              <!-- 作业内容 -->
-              <div class="text-group_4">
-                <span class="text_33">{{ assignment.title }}</span>
-                <div class="description-container">
+                <!-- 作业内容 -->
+                <div class="text-group_4">
+                  <span class="text_33">{{ assignment.title }}</span>
+                  <div class="description-container">
                     <span class="text_34 text-truncated">
                       {{ assignment.description }}
                     </span>
+                  </div>
                 </div>
-              </div>
 
-              <!-- 作业附件区域 -->
-              <div class="box_6">
+                <!-- 作业附件区域 -->
+                <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 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>
+
+                <!-- 作业按钮区域 -->
+                <div class="assignment-buttons">
+                  <!-- 未完成状态显示两个按钮 -->
+                  <template v-if="assignment.status === '未完成' || assignment.status === '待提交'">
+                    <div class="text-wrapper_8 submit-button" @click="showUploadModal(assignment)">
+                      <span class="text_36">上传作业</span>
+                    </div>
+                    <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 class="assignment-buttons">
-                <!-- 未完成状态显示两个按钮 -->
-                <template v-if="assignment.status === '未完成' || assignment.status === '待提交'">
-                  <div class="text-wrapper_8 submit-button" @click="showUploadModal(assignment)">
-                    <span class="text_36">上传作业</span>
-                  </div>
-                  <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>
 
-        <!-- 考试内容 -->
-        <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>
+            <!-- 考试内容 -->
+            <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="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="course-divider"></div>
 
-              <!-- 考试描述 -->
-              <div class="exam-description">
-                {{ exam.description }}
-              </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-footer">
-                <div class="exam-status-left">
-                  <span class="exam-status-text">{{ getExamStatusText(exam.status) }}</span>
-                </div>
-                <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 class="exam-score-badge" v-if="exam.score !== null">
+                    <span class="score-text">{{ exam.score }}分</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-status-left">
+                      <span class="exam-status-text">{{ getExamStatusText(exam.status) }}</span>
+                    </div>
+                    <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>
                 </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="practice-grid">
-            <div v-for="practice in filteredPractices" :key="practice.id" class="practice-card">
-              <!-- 分数标签 -->
-              <div v-if="practice.status === 'finished'" class="practice-score-badge">
-                <span class="score-text">{{ practice.score }}分</span>
+            <!-- 练习内容 -->
+            <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>
 
-              <!-- 练习标题 -->
-              <h3 class="practice-title">{{ practice.title }}</h3>
+              <!-- 练习分割线 -->
+              <div class="course-divider"></div>
 
-              <!-- 练习详情 -->
-              <div class="practice-details">
-                <div class="practice-meta-item">
-                  <span class="meta-label">练习日期：</span>
-                  <span class="meta-value">{{ practice.practiceDate }}</span>
-                </div>
-                <div class="practice-meta-item">
-                  <span class="meta-label">练习时间：</span>
-                  <span class="meta-value">{{ practice.duration }}分钟</span>
-                </div>
-                <div class="practice-meta-item">
-                  <span class="meta-label">题库数量：</span>
-                  <span class="meta-value">{{ practice.questionCount }}</span>
-                </div>
-              </div>
+              <!-- 练习网格 -->
+              <div class="practice-grid">
+                <div v-for="practice in filteredPractices" :key="practice.id" class="practice-card">
+                  <!-- 分数标签 -->
+                  <div v-if="practice.status === 'finished'" class="practice-score-badge">
+                    <span class="score-text">{{ practice.score }}分</span>
+                  </div>
 
+                  <!-- 练习标题 -->
+                  <h3 class="practice-title">{{ practice.title }}</h3>
 
+                  <!-- 练习详情 -->
+                  <div class="practice-details">
+                    <div class="practice-meta-item">
+                      <span class="meta-label">练习日期：</span>
+                      <span class="meta-value">{{ practice.practiceDate }}</span>
+                    </div>
+                    <div class="practice-meta-item">
+                      <span class="meta-label">练习时间：</span>
+                      <span class="meta-value">{{ practice.duration }}分钟</span>
+                    </div>
+                    <div class="practice-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="stats-item correct">
-                  <span class="stats-label">答对</span>
-                  <span class="stats-number">{{ practice.correctCount }}题</span>
-                </div>
-                <div class="stats-item wrong">
-                  <span class="stats-label">答错</span>
-                  <span class="stats-number">{{ practice.wrongCount }}题</span>
-                </div>
-              </div>
+                
 
-              <!-- 练习简介（练习中状态） -->
-              <div v-else class="practice-intro">
-                <div class="intro-title">练习简介</div>
-                <div class="intro-content">
-                  练习涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。
-                </div>
-              </div>
+                  <!-- 练习统计/简介 -->
+                  <div v-if="practice.status === 'finished'" class="practice-stats">
+                    <div class="stats-item correct">
+                      <span class="stats-label">答对</span>
+                      <span class="stats-number">{{ practice.correctCount }}题</span>
+                    </div>
+                    <div class="stats-item wrong">
+                      <span class="stats-label">答错</span>
+                      <span class="stats-number">{{ practice.wrongCount }}题</span>
+                    </div>
+                  </div>
 
-              <!-- 练习底部 -->
-              <div class="practice-footer">
-                <div class="practice-status-left">
-                  <span class="practice-status-text">{{ practice.status === 'ongoing' ? '练习中' : '已结束' }}</span>
-                </div>
-                <div class="practice-action-right">
-                  <button
-                      v-if="practice.status === 'ongoing'"
-                      class="action-btn ongoing-btn"
-                      @click="continuePractice(practice.id)"
-                  >
-                    继续练习
-                  </button>
-                  <button
-                      v-else-if="practice.status === 'finished'"
-                      class="action-btn finished-btn"
-                      @click="viewPracticeDetail(practice.id)"
-                  >
-                    查看详情
-                  </button>
+                  <!-- 练习简介（练习中状态） -->
+                  <div v-else class="practice-intro">
+                    <div class="intro-title">练习简介</div>
+                    <div class="intro-content">
+                      练习涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。
+                    </div>
+                  </div>
+
+                  <!-- 练习底部 -->
+                  <div class="practice-footer">
+                    <div class="practice-status-left">
+                      <span class="practice-status-text">{{ practice.status === 'ongoing' ? '练习中' : '已结束' }}</span>
+                    </div>
+                    <div class="practice-action-right">
+                      <button
+                        v-if="practice.status === 'ongoing'"
+                        class="action-btn ongoing-btn"
+                        @click="continuePractice(practice.id)"
+                      >
+                        继续练习
+                      </button>
+                      <button
+                        v-else-if="practice.status === 'finished'"
+                        class="action-btn finished-btn"
+                        @click="viewPracticeDetail(practice.id)"
+                      >
+                        查看详情
+                      </button>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        </div>
 
-        <!-- 其他内容的占位符 -->
-        <div v-else class="other-content">
-          <h2>{{ getTabTitle(activeTab) }}</h2>
-          <p>{{ activeTab }}功能开发中...</p>
+            <!-- 活动内容 -->
+            <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-status-left">
+                      <span :class="['activity-status-text', activity.status]">{{ activity.status === 'ongoing' ? '进行中' : '已结束' }}</span>
+                    </div>
+                    <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>
+                </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 class="other-content">
+              <h2>{{ getTabTitle(activeTab) }}</h2>
+              <p>{{ activeTab }}功能开发中...</p>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
 
   <!-- 上传作业弹窗 -->
   <n-modal v-model:show="showModal" preset="card" title="上传作业" style="width: 600px;" :mask-closable="false">
@@ -523,18 +710,18 @@
         </n-form-item>
         <n-form-item label="编辑内容" required>
           <n-input
-              v-model:value="uploadForm.content"
-              type="textarea"
-              placeholder="请输入内容"
-              :autosize="{ minRows: 3, maxRows: 6 }"
+            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"
+            multiple
+            directory-dnd
+            :custom-request="customRequest"
+            :default-upload="false"
           >
             <n-button>选择文件</n-button>
           </n-upload>
@@ -593,10 +780,10 @@
               <!-- 选项列表 -->
               <div class="question-options">
                 <div
-                    v-for="option in question.options"
-                    :key="option.id"
-                    class="option-item"
-                    :class="{
+                  v-for="option in question.options"
+                  :key="option.id"
+                  class="option-item"
+                  :class="{
                     'option-selected': question.userAnswers.includes(option.id),
                     'option-correct': question.correctAnswers.includes(option.id),
                     'option-wrong': question.userAnswers.includes(option.id) && !question.correctAnswers.includes(option.id)
@@ -604,9 +791,9 @@
                 >
                   <div class="option-checkbox">
                     <input
-                        type="checkbox"
-                        :checked="question.userAnswers.includes(option.id)"
-                        disabled
+                      type="checkbox"
+                      :checked="question.userAnswers.includes(option.id)"
+                      disabled
                     />
                   </div>
                   <div class="option-content">
@@ -854,6 +1041,45 @@ interface PracticeDetail {
   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()
 
@@ -872,6 +1098,14 @@ 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 currentPage = ref(1)
 const pageSize = ref(5) // 每页显示5个课程
@@ -1405,6 +1639,157 @@ const mockPractices: Practice[] = [
   }
 ]
 
+// 模拟活动数据
+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++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对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++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对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++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对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++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对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++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对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++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对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: {
@@ -1587,11 +1972,23 @@ const filteredPractices = computed(() => {
   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) => {
@@ -1669,6 +2066,11 @@ const handlePracticeTabChange = (tab: string) => {
   activePracticeTab.value = tab
 }
 
+// 处理活动筛选变化
+const handleActivityTabChange = (tab: string) => {
+  activeActivityTab.value = tab
+}
+
 // 获取考试状态文本
 const getExamStatusText = (status: string) => {
   switch (status) {
@@ -1712,6 +2114,74 @@ const viewPracticeDetail = (practiceId: number) => {
   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 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> = {
@@ -1816,17 +2286,17 @@ const submitAssignment = () => {
     message.error('请输入标题')
     return
   }
-
+  
   if (!uploadForm.content.trim()) {
     message.error('请输入内容')
     return
   }
-
+  
   if (uploadForm.files.length === 0) {
     message.error('请上传至少一个文件')
     return
   }
-
+  
   // 这里可以添加实际的提交逻辑
   message.success('作业提交成功')
   closeUploadModal()
@@ -2654,22 +3124,22 @@ onMounted(() => {
 
 /* 上传作业按钮 - 未完成状态 */
 .submit-button {
-  width: 102px;
-  height: 33px;
-  border: 1px solid #0288D1;
+ width: 102px;
+height: 33px;
+border: 1px solid #0288D1;
 }
 
 /* 查看情况按钮 - 未完成状态 */
 .view-button {
-  width: 102px;
-  height: 33px;
+   width: 102px;
+height: 33px;
   background-color: #0288D1
 }
 
 /* 查看详情按钮 - 已完成状态 */
 .details-button {
-  width: 102px;
-  height: 33px;
+   width: 102px;
+height: 33px;
   background-color: #0288D1
 }
 
@@ -4035,4 +4505,858 @@ onMounted(() => {
     min-height: 240px;
   }
 }
+
+/* 活动页面样式 - 网格布局 */
+.activity-content {
+  width: 100%;
+}
+
+.activity-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.04vw; /* 20px转换为vw */
+  margin-top: 1.04vh; /* 20px转换为vh */
+}
+
+.activity-card {
+  background: #ffffff;
+  border: 1px solid #e8e8e8;
+  border-radius: 0.42vw; /* 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: 18.59vh; /* 179px转换为vh (179/1080*100) */
+  overflow: hidden;
+  border-radius: 0.42vw 0.42vw 0 0; /* 只有顶部圆角 */
+}
+
+/* 活动卡片图片 */
+.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: 0.83vw; /* 16px转换为vw */
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 0.83vh 0; /* 0 0 16px 0转换 */
+  line-height: 1.4;
+  padding: 0 1.04vw; /* 添加左右内边距 */
+}
+
+.activity-details {
+  margin-bottom: 1.04vh; /* 20px转换为vh */
+  padding: 0 1.04vw; /* 添加左右内边距 */
+}
+
+.activity-meta-item {
+  margin-bottom: 0.42vh; /* 8px转换为vh */
+  font-size: 0.68vw; /* 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: 0.68vw; /* 13px转换为vw */
+  color: #666;
+  line-height: 1.5;
+  margin-bottom: 0.83vh; /* 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: 0 1.04vw 1.04vh; /* 添加内边距 */
+}
+
+.activity-status-left {
+  flex: 1;
+}
+
+.activity-status-text {
+  font-size: 0.68vw; /* 13px转换为vw */
+  font-weight: 500;
+}
+
+/* 活动状态颜色 - 与练习中保持一致 */
+.activity-status-text.ongoing {
+  color: #FF6B35; /* 进行中 - 橙色 */
+}
+
+.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: 0.1vh 0.31vw; /* 2px 6px转换 */
+  border-radius: 0.52vw; /* 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;
+}
+
+/* 消息页面响应式设计 */
+@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;
+  }
+}
 </style>
\ No newline at end of file