From 68f36529356f939778d7b25f74811d6f1bcab5ab Mon Sep 17 00:00:00 2001
From: yuk255 <yuk255@qq.com>
Date: Thu, 9 Oct 2025 14:49:41 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=E6=8A=A5?=
 =?UTF-8?q?=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/profile/ActivityContent.vue | 521 +++++++++++++++++++++
 src/components/profile/PracticeContent.vue | 498 ++++++++++++++++++++
 2 files changed, 1019 insertions(+)
 create mode 100644 src/components/profile/ActivityContent.vue
 create mode 100644 src/components/profile/PracticeContent.vue

diff --git a/src/components/profile/ActivityContent.vue b/src/components/profile/ActivityContent.vue
new file mode 100644
index 0000000..22f9871
--- /dev/null
+++ b/src/components/profile/ActivityContent.vue
@@ -0,0 +1,521 @@
+<template>
+  <div 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="activity.banner || activity.imgs || '/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" v-html="activity.introduction">
+          </div>
+        </div>
+
+        <!-- 活动详情 -->
+        <div class="activity-details">
+          <div class="activity-meta-item">
+            <span class="meta-label">开始时间：</span>
+            <span class="meta-value">{{ activity.startTime }}</span>
+          </div>
+          <div class="activity-meta-item">
+            <span class="meta-label">结束时间：</span>
+            <span class="meta-value">{{ activity.endTime }}</span>
+          </div>
+          <div class="activity-meta-item">
+            <span class="meta-label">最大人数：</span>
+            <span class="meta-value">{{ activity.maxNum }}</span>
+          </div>
+        </div>
+
+
+
+        <!-- 活动底部 -->
+        <div class="activity-footer">
+          <div class="activity-action-right">
+            <!-- <button v-if="activity.status === '1'" class="action-btn ongoing-btn"
+              @click="continueActivity(activity.id)">
+              查看活动
+            </button> -->
+            <button
+              class="action-btn ongoing-btn" @click="viewActivityDetail(activity.id)">
+              查看详情
+            </button>
+          </div>
+          <div class="activity-status-left">
+            <span :class="['activity-status-text', activity.status === '1' ? 'ongoing' : 'finished']">
+              {{ activity.status_dictText }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useMessage } from 'naive-ui'
+import { useRouter } from 'vue-router'
+import { ActivityListApi } from '@/api/modules/userCenter'
+
+const message = useMessage()
+const router = useRouter()
+
+// 活动接口
+interface Activity {
+  id: string
+  title: string
+  introduction: string
+  imgs: string
+  banner: string
+  video: string | null
+  maxNum: number
+  startTime: string
+  endTime: string
+  extra: string | null
+  attachment: string
+  status: string
+  createBy: string
+  createTime: string
+  updateBy: string
+  updateTime: string
+  status_dictText: string
+}
+
+// 活动筛选状态
+const activeActivityTab = ref('all')
+
+// 活动列表数据
+const activities = ref<Activity[]>([])
+
+// 获取筛选后的活动
+const filteredActivities = computed(() => {
+  if (activeActivityTab.value === 'ongoing') {
+    return activities.value.filter(activity => activity.status === '1')
+  } else if (activeActivityTab.value === 'finished') {
+    return activities.value.filter(activity => activity.status !== '1')
+  }
+  return activities.value
+})
+
+// 处理活动筛选变化
+const handleActivityTabChange = (tab: string) => {
+  activeActivityTab.value = tab
+}
+
+// 继续活动
+// const continueActivity = (id: string) => {
+//   console.log('继续活动:', id)
+//   message.info(`继续活动 ${id}`)
+// }
+
+// 查看活动详情
+const viewActivityDetail = (id: string) => {
+  router.push(`/activity/${id}`)
+}
+
+onMounted(async () => {
+  try {
+    const response = await ActivityListApi.getActivityList()
+    console.log('活动列表:', response.data.result)
+    activities.value = response.data.result.records || []
+  } catch (error) {
+    message.error('请求活动列表时发生错误')
+    console.error(error)
+  }
+})
+</script>
+
+<style scoped>
+/* 活动页面样式 - 网格布局 */
+.activity-content {
+  width: 100%;
+}
+
+/* 课程筛选标签 */
+.text-wrapper_1 {
+  width: 100%;
+  height: 2.08vh;
+  align-items: center;
+  margin: 20px 0 20px 0;
+  gap: 2.81vw;
+}
+
+.text_12,
+.text_13,
+.text_14 {
+  font-size: 0.94vw;
+  color: #000;
+  font-family: 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: normal;
+  cursor: pointer;
+  padding: 0.42vh 0;
+  transition: color 0.3s ease;
+  background: transparent;
+}
+
+.text_12.active,
+.text_13.active,
+.text_14.active {
+  color: rgba(2, 134, 206, 1);
+}
+
+.text_12:hover,
+.text_13:hover,
+.text_14:hover {
+  color: rgba(2, 134, 206, 1);
+}
+
+/* 课程区域分割线 */
+.course-divider {
+  width: 100%;
+  height: 1.5px;
+  background: #E6E6E6;
+  margin-bottom: 1.67vh;
+}
+
+.activity-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.04vw;
+  margin-top: 1.04vh;
+}
+
+.activity-card {
+  background: #ffffff;
+  border: 1px solid #e8e8e8;
+  padding: 0;
+  position: relative;
+  min-height: 14.58vh;
+  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);
+  transform: translateY(-0.1vh);
+}
+
+/* 活动卡片顶部图片容器 */
+.activity-card-image {
+  width: 100%;
+  height: 179px;
+  overflow: hidden;
+}
+
+/* 活动卡片图片 */
+.activity-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.activity-score-badge {
+  position: absolute;
+  top: 0.83vw;
+  right: 0.83vw;
+  background: #FF6B35;
+  color: white;
+  padding: 0.21vw 0.42vw;
+  border-radius: 0.21vw;
+  font-size: 0.63vw;
+  font-weight: 500;
+  z-index: 1;
+}
+
+.activity-title {
+  font-size: 16px;
+  color: #333;
+  margin: 15px 0 5px 0;
+  line-height: 1.4;
+  padding: 0 1.04vw;
+  font-weight: 600;
+}
+
+.activity-details {
+  padding: 0 1.04vw;
+}
+
+.activity-meta-item {
+  margin-bottom: 10px;
+  font-size: 14px;
+  line-height: 1.4;
+  display: flex;
+}
+
+.meta-label {
+  color: #999;
+  min-width: 70px;
+}
+
+.meta-value {
+  color: #333;
+  font-weight: 500;
+}
+
+.activity-intro {
+  flex: 1;
+  margin-bottom: 1.04vh;
+  padding: 0 1.04vw;
+}
+
+.intro-title {
+  font-size: 0.73vw;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 0.42vh;
+}
+
+.intro-content {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.5;
+  margin-bottom: 10px;
+  -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;
+  flex-shrink: 0;
+}
+
+.activity-status-left {
+  display: flex;
+  align-items: center;
+}
+
+.activity-status-text {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* 活动状态颜色 - 与练习中保持一致 */
+.activity-status-text.ongoing {
+  color: #FF520F;
+}
+
+.activity-status-text.finished {
+  color: #999999;
+}
+
+.activity-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;
+}
+
+.ongoing-btn {
+  background: #0288D1;
+  color: white;
+}
+
+.ongoing-btn:hover {
+  background: #40a9ff;
+}
+
+.finished-btn {
+  background: #0288D1;
+  color: white;
+}
+
+.finished-btn:hover {
+  background: #01579B;
+}
+
+/* 活动已结束按钮样式 - 灰色 */
+.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;
+}
+
+/* 通用样式 */
+.flex-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+/* 活动响应式设计 */
+@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;
+  }
+
+  .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%;
+  }
+}
+
+/* 更小屏幕的适配 */
+@media (max-width: 480px) {
+  .activity-card {
+    padding: 0;
+    min-height: 220px;
+  }
+
+  .activity-title {
+    font-size: 14px;
+  }
+
+  .activity-score-badge {
+    top: 12px;
+    right: 12px;
+  }
+}
+
+@media (max-width: 576px) {
+  .text-wrapper_1 {
+    gap: 0.83vw;
+  }
+
+  .text_12,
+  .text_13,
+  .text_14 {
+    font-size: 0.83vw;
+    padding: 0.31vh 0.63vw;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/profile/PracticeContent.vue b/src/components/profile/PracticeContent.vue
new file mode 100644
index 0000000..bc65aa4
--- /dev/null
+++ b/src/components/profile/PracticeContent.vue
@@ -0,0 +1,498 @@
+<template>
+  <div 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>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useMessage } from 'naive-ui'
+import { useRouter } from 'vue-router'
+
+const message = useMessage()
+const router = useRouter()
+
+// 练习接口
+interface Practice {
+  id: number
+  title: string
+  practiceDate: string
+  duration: number
+  questionCount: number
+  description: string
+  status: 'ongoing' | 'finished'
+  score: number | null
+  correctCount: number
+  wrongCount: number
+}
+
+// 练习筛选状态
+const activePracticeTab = ref('all')
+
+// 模拟练习数据
+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: 75,
+    correctCount: 18,
+    wrongCount: 12
+  },
+  {
+    id: 3,
+    title: 'Java程序设计高级练习',
+    practiceDate: '2025-07-15 14:30',
+    duration: 90,
+    questionCount: 80,
+    description: '深入Java高级特性，包括并发编程、集合框架、网络编程等内容的综合练习。',
+    status: 'finished',
+    score: 88,
+    correctCount: 70,
+    wrongCount: 10
+  }
+]
+
+// 获取筛选后的练习
+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 handlePracticeTabChange = (tab: string) => {
+  activePracticeTab.value = tab
+}
+
+// 继续练习
+const continuePractice = (practiceId: number) => {
+  message.info(`继续练习 ${practiceId}`)
+}
+
+// 查看练习详情
+const viewPracticeDetail = (practiceId: number) => {
+  router.push(`/exam-detail/${practiceId}?source=practice`)
+}
+</script>
+
+<style scoped>
+/* 练习页面样式 - 网格布局 */
+.practice-content {
+  width: 100%;
+}
+
+/* 课程筛选标签 */
+.text-wrapper_1 {
+  width: 100%;
+  height: 2.08vh;
+  align-items: center;
+  margin: 20px 0 20px 0;
+  gap: 2.81vw;
+}
+
+.text_12,
+.text_13,
+.text_14 {
+  font-size: 0.94vw;
+  color: #000;
+  font-family: 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: normal;
+  cursor: pointer;
+  padding: 0.42vh 0;
+  transition: color 0.3s ease;
+  background: transparent;
+}
+
+.text_12.active,
+.text_13.active,
+.text_14.active {
+  color: rgba(2, 134, 206, 1);
+}
+
+.text_12:hover,
+.text_13:hover,
+.text_14:hover {
+  color: rgba(2, 134, 206, 1);
+}
+
+/* 课程区域分割线 */
+.course-divider {
+  width: 100%;
+  height: 1.5px;
+  background: #E6E6E6;
+  margin-bottom: 1.67vh;
+}
+
+.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;
+}
+
+.practice-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: #333;
+  font-weight: 500;
+}
+
+.exam-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;
+  background-color: #F5F8FB;
+}
+
+.practice-stats {
+  display: flex;
+  gap: 16px;
+  height: 54px;
+  background: #F5F8FB;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.divider {
+  width: 1px;
+  height: 20px;
+  background: #EBEBEB;
+}
+
+.stat-row {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.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;
+}
+
+.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;
+}
+
+.ongoing-btn {
+  background: #0288D1;
+  color: white;
+}
+
+.ongoing-btn:hover {
+  background: #40a9ff;
+}
+
+.finished-btn {
+  background: #0288D1;
+  color: white;
+}
+
+.finished-btn:hover {
+  background: #01579B;
+}
+
+/* 通用样式 */
+.flex-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+/* 响应式设计 */
+@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;
+  }
+
+  /* 考试标题在小屏幕上给分数留出空间并允许换行 */
+  .exam-title {
+    padding-right: 80px;
+    word-wrap: break-word;
+    word-break: break-word;
+    white-space: normal;
+  }
+
+  /* 分数徽章保持在右上角不换行 */
+  .practice-score-badge {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    white-space: nowrap;
+  }
+
+  .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%;
+  }
+}
+
+/* 更小屏幕的适配 */
+@media (max-width: 480px) {
+  .exam-card {
+    padding: 12px;
+    min-height: 220px;
+  }
+
+  .exam-title {
+    padding-right: 70px;
+    font-size: 14px;
+  }
+
+  .practice-score-badge {
+    top: 12px;
+    right: 12px;
+  }
+
+  .score-text {
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 576px) {
+  .text-wrapper_1 {
+    gap: 0.83vw;
+  }
+
+  .text_12,
+  .text_13,
+  .text_14 {
+    font-size: 0.83vw;
+    padding: 0.31vh 0.63vw;
+  }
+}
+</style>
\ No newline at end of file