样式

src/App.vue

@@ -79,7 +79,7 @@ body {
 /* 响应式容器 */
 .container {
   width: 100%;
-  max-width: 1400px;
+  max-width: 1420px;
   margin: 0 auto;
   padding: 0 20px;
 }

src/components/layout/AppHeader.vue

@@ -36,7 +36,7 @@
       </div>
 
       <div class="nav-item" :class="{ active: activeKey === 'ai' }" @click="handleMenuSelect('ai')">
-        <img src="/images/ai/ai.png" alt="AI" class="nav-icon ai-icon" />
+        <span class="nav-item-ai">AI体验</span>
       </div>
     </div>
 
@@ -357,7 +357,7 @@ onUnmounted(() => {
   font-size: 14px;
   font-weight: 400;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  color: #333;
+  color: #000;
   cursor: pointer;
   transition: all 0.2s;
   white-space: nowrap;
@@ -387,16 +387,39 @@ onUnmounted(() => {
 
 /* AI导航项 */
 .nav-item:nth-child(7) {
-  width: 50px;
-  height: 40px;
+  /* width: 50px;
+  height: 40px; */
+  background-image: url('/images/ai/ai-bg.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+
+}
+
+.nav-item.active .nav-item-ai {
+  background: linear-gradient(90deg, #0FAAFF, #79DEFF);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  font-weight: bold;
+}
+
+.nav-item-ai:hover {
+  background: linear-gradient(90deg, #0FAAFF, #79DEFF);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  font-weight: bold;
 }
 
 .nav-item:hover {
-  color: #1890ff;
+  color: #0084CD;
 }
 
 .nav-item.active {
-  color: #1890ff;
+  color: #0084CD;
   font-weight: 400;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   position: relative;
@@ -410,7 +433,7 @@ onUnmounted(() => {
   transform: translateX(-50%);
   width: 30px;
   height: 2px;
-  background-color: #1890ff;
+  background-color: #0084CD;
   border-radius: 1px;
 }
 
@@ -623,6 +646,7 @@ onUnmounted(() => {
   white-space: nowrap;
 }
 
+
 /* 大屏幕 */
 @media (min-width: 1200px) {
   .header-container {

src/data/mockCourses.ts

@@ -6,7 +6,8 @@ export const mockCourses: Course[] = [
     "id": 1,
     "title": "暑期名师领学，提高班级教学质量！高效冲分指南",
     "description": "本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。",
-    "thumbnail": "/images/home/1.png",
+    "thumbnail": "/images/courses/course-activities5.png",
+
     "price": 99,
     "originalPrice": 199,
     "currency": "CNY",
@@ -47,7 +48,7 @@ export const mockCourses: Course[] = [
     "id": 2,
     "title": "暑期名师领学，提高班级教学质量！高效冲分指南",
     "description": "本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。",
-    "thumbnail": "/images/home/2.png",
+    "thumbnail": "/images/courses/course-activities4.png",
     "price": 99,
     "originalPrice": 199,
     "currency": "CNY",
@@ -88,7 +89,7 @@ export const mockCourses: Course[] = [
     "id": 3,
     "title": "暑期名师领学，提高班级教学质量！高效冲分指南",
     "description": "本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。",
-    "thumbnail": "/images/home/3.png",
+    "thumbnail": "/images/courses/course-activities3.png",
     "price": 99,
     "originalPrice": 199,
     "currency": "CNY",
@@ -129,7 +130,7 @@ export const mockCourses: Course[] = [
     "id": 4,
     "title": "暑期名师领学，提高班级教学质量！高效冲分指南",
     "description": "本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。",
-    "thumbnail": "/images/home/4.png",
+    "thumbnail": "/images/courses/course5.png",
     "price": 99,
     "originalPrice": 199,
     "currency": "CNY",
@@ -170,7 +171,7 @@ export const mockCourses: Course[] = [
     "id": 5,
     "title": "暑期名师领学，提高班级教学质量！高效冲分指南",
     "description": "本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。",
-    "thumbnail": "https://lanhu-oss-proxy.lanhuapp.com/SketchPng93688065965c55f15f75657fe9660d6040b466e6a1a98664409f17eff744c088",
+    "thumbnail": "/images/courses/course-activities1.png",
     "price": 99,
     "originalPrice": 199,
     "currency": "CNY",
@@ -211,7 +212,7 @@ export const mockCourses: Course[] = [
     "id": 6,
     "title": "暑期名师领学，提高班级教学质量！高效冲分指南",
     "description": "本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。",
-    "thumbnail": "https://lanhu-oss-proxy.lanhuapp.com/SketchPng8772d4ad1b8a119933c290df89c1d46e062df72ae405e889f1ddcfbe4e11c91d",
+    "thumbnail": "/images/courses/course-activities5.png",
     "price": 99,
     "originalPrice": 199,
     "currency": "CNY",
@@ -252,7 +253,7 @@ export const mockCourses: Course[] = [
     "id": 7,
     "title": "暑期名师领学，提高班级教学质量！高效冲分指南",
     "description": "本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。",
-    "thumbnail": "https://lanhu-oss-proxy.lanhuapp.com/SketchPnga1957310d225f55ef8df00a464930dc3aeb381291c365f8b6cfd14b1b8df36c5",
+    "thumbnail": "/images/courses/course-activities4.png",
     "price": 99,
     "originalPrice": 199,
     "currency": "CNY",
@@ -293,7 +294,7 @@ export const mockCourses: Course[] = [
     "id": 8,
     "title": "暑期名师领学，提高班级教学质量！高效冲分指南",
     "description": "本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。",
-    "thumbnail": "https://lanhu-oss-proxy.lanhuapp.com/SketchPnga1957310d225f55ef8df00a464930dc3aeb381291c365f8b6cfd14b1b8df36c5",
+    "thumbnail": "/images/courses/course-activities4.png",
     "price": 99,
     "originalPrice": 199,
     "currency": "CNY",
@@ -334,7 +335,7 @@ export const mockCourses: Course[] = [
     "id": 9,
     "title": "暑期名师领学，提高班级教学质量！高效冲分指南",
     "description": "本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。",
-    "thumbnail": "https://lanhu-oss-proxy.lanhuapp.com/SketchPng8772d4ad1b8a119933c290df89c1d46e062df72ae405e889f1ddcfbe4e11c91d",
+    "thumbnail": "/images/courses/course-activities5.png",
     "price": 99,
     "originalPrice": 199,
     "currency": "CNY",
@@ -375,7 +376,7 @@ export const mockCourses: Course[] = [
     "id": 10,
     "title": "暑期名师领学，提高班级教学质量！高效冲分指南",
     "description": "本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。",
-    "thumbnail": "https://lanhu-oss-proxy.lanhuapp.com/SketchPnga1957310d225f55ef8df00a464930dc3aeb381291c365f8b6cfd14b1b8df36c5",
+    "thumbnail": "/images/courses/course-activities4.png",
     "price": 99,
     "originalPrice": 199,
     "currency": "CNY",
@@ -416,7 +417,7 @@ export const mockCourses: Course[] = [
     "id": 11,
     "title": "暑期名师领学，提高班级教学质量！高效冲分指南",
     "description": "本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。",
-    "thumbnail": "https://lanhu-oss-proxy.lanhuapp.com/SketchPng8772d4ad1b8a119933c290df89c1d46e062df72ae405e889f1ddcfbe4e11c91d",
+    "thumbnail": "/images/courses/course-activities5.png",
     "price": 99,
     "originalPrice": 199,
     "currency": "CNY",
@@ -457,7 +458,7 @@ export const mockCourses: Course[] = [
     "id": 12,
     "title": "暑期名师领学，提高班级教学质量！高效冲分指南",
     "description": "本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。",
-    "thumbnail": "https://lanhu-oss-proxy.lanhuapp.com/SketchPnga1957310d225f55ef8df00a464930dc3aeb381291c365f8b6cfd14b1b8df36c5",
+    "thumbnail": "/images/courses/course-activities4.png",
     "price": 99,
     "originalPrice": 199,
     "currency": "CNY",
@@ -498,7 +499,7 @@ export const mockCourses: Course[] = [
     "id": 13,
     "title": "暑期名师领学，提高班级教学质量！高效冲分指南",
     "description": "本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。",
-    "thumbnail": "https://lanhu-oss-proxy.lanhuapp.com/SketchPnga1957310d225f55ef8df00a464930dc3aeb381291c365f8b6cfd14b1b8df36c5",
+    "thumbnail": "/images/courses/course-activities4.png",
     "price": 99,
     "originalPrice": 199,
     "currency": "CNY",
@@ -539,7 +540,7 @@ export const mockCourses: Course[] = [
     "id": 14,
     "title": "暑期名师领学，提高班级教学质量！高效冲分指南",
     "description": "本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。",
-    "thumbnail": "https://lanhu-oss-proxy.lanhuapp.com/SketchPng8772d4ad1b8a119933c290df89c1d46e062df72ae405e889f1ddcfbe4e11c91d",
+    "thumbnail": "/images/courses/course-activities5.png",
     "price": 99,
     "originalPrice": 199,
     "currency": "CNY",
@@ -580,7 +581,7 @@ export const mockCourses: Course[] = [
     "id": 15,
     "title": "暑期名师领学，提高班级教学质量！高效冲分指南",
     "description": "本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。",
-    "thumbnail": "https://lanhu-oss-proxy.lanhuapp.com/SketchPnga1957310d225f55ef8df00a464930dc3aeb381291c365f8b6cfd14b1b8df36c5",
+    "thumbnail": "/images/courses/course-activities4.png",
     "price": 99,
     "originalPrice": 199,
     "currency": "CNY",

src/views/Activities.vue

@@ -266,7 +266,7 @@ onMounted(() => {
 
 .container {
   margin: 0 auto;
-  padding: 0 20px;
+  /* padding: 0 20px; */
 }
 
 /* 主要内容区域 */

src/views/ActivityDetail.vue

@@ -18,6 +18,15 @@
       <div class="banner-image-container">
         <img src="/images/activity/活动报名-切图.png" alt="活动横幅" class="banner-image" />
       </div>
+      <div class="hero-content">
+        <h2>“与AI共创未来”</h2>
+        <p class="hero-content-description">2025年全国青少年人工智能创新实践活动</p>
+        <div>
+          <p>【主办单位】中国科协青少年科技中心、中国青少年科技教育工作者协会、上海人工智能创新中心、上海市科协</p>
+          <p>【支持单位】中国公众科学素质促进联合体</p>
+          <p>【协办单位】各省级青少年科技教育活动部门单位、上海市科协科学教育中心</p>
+        </div>
+      </div>
     </div>
 
     <!-- 主要内容区域 -->
@@ -207,7 +216,8 @@
 
           <!-- 操作按钮 -->
           <section class="action-buttons">
-            <button v-if="activity.status === 'ongoing'" class="btn btn-primary register-btn" @click="handleRegister">前往报名 >></button>
+            <button v-if="activity.status === 'ongoing'" class="btn btn-primary register-btn"
+              @click="handleRegister">前往报名 >></button>
             <button v-else class="btn btn-secondary submit-btn" @click="handleSubmit">提交作品</button>
           </section>
         </template>
@@ -342,7 +352,7 @@ onMounted(() => {
 }
 
 .breadcrumb-item {
-  color: #007bff;
+  color: #333;
   text-decoration: none;
 }
 
@@ -368,9 +378,50 @@ onMounted(() => {
   overflow: hidden;
 }
 
+.hero-content {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 100px;
+}
+
+.hero-content h2 {
+  font-family: AlimamaShuHeiTi, AlimamaShuHeiTi, '黑体';
+  font-weight: bold;
+  font-size: 48px;
+  color: #FFFFFF;
+  line-height: 57px;
+  text-align: justify;
+  font-style: normal;
+}
+
+.hero-content .hero-content-description {
+  margin-top: 12px;
+  margin-bottom: 40px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 500;
+  font-size: 32px;
+  color: #FFFFFF;
+  line-height: 45px;
+  text-align: justify;
+  font-style: normal;
+}
+
+.hero-content div p {
+  margin-bottom: 2px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 14px;
+  color: #FFFFFF;
+  line-height: 20px;
+  text-align: justify;
+  font-style: normal;
+  text-transform: none;
+}
+
 .banner-image-container {
   width: 100%;
-  height: 400px;
+  /* height: 400px; */
   position: relative;
   display: flex;
   align-items: center;
@@ -473,19 +524,20 @@ onMounted(() => {
 
 /* 主要内容 */
 .main-content {
-  padding: 40px 0;
+  padding: 30px 0 40px 0;
 }
 
 .container {
-  width: 1420px;
-  margin: 0 auto;
-  padding: 0;
+  width: 1420px !important;
+  margin: 0 auto !important;
+  padding: 0 !important;
 }
 
 /* 主内容区域的容器 - 居中显示，左右边距相等 */
 .main-content .container {
-  max-width: 1420px;
-  margin: 0 auto;
+  width: 1420px !important;
+  margin: 0 auto !important;
+  padding: 0 !important;
 }
 
 .section-title {
@@ -511,6 +563,12 @@ onMounted(() => {
   margin-bottom: 30px;
 }
 
+.activity-intro .section-title {
+  margin-bottom: 20px;
+  justify-content: center;
+  font-size: 36px;
+}
+
 .intro-content {
   width: 1240px;
   margin: 0 auto 40px;

src/views/ActivityRegistration.vue

@@ -18,6 +18,15 @@
       <div class="banner-image-container">
         <img src="/images/activity/活动报名-切图.png" alt="活动横幅" class="banner-image" />
       </div>
+      <div class="hero-content">
+        <h2>“与AI共创未来”</h2>
+        <p class="hero-content-description">2025年全国青少年人工智能创新实践活动</p>
+        <div>
+          <p>【主办单位】中国科协青少年科技中心、中国青少年科技教育工作者协会、上海人工智能创新中心、上海市科协</p>
+          <p>【支持单位】中国公众科学素质促进联合体</p>
+          <p>【协办单位】各省级青少年科技教育活动部门单位、上海市科协科学教育中心</p>
+        </div>
+      </div>
     </div>
 
     <!-- 报名表单区域 -->
@@ -232,7 +241,7 @@ const handleSubmit = async () => {
 }
 
 .breadcrumb-item {
-  color: #1890ff;
+  color: #333;
   text-decoration: none;
 }
 
@@ -246,11 +255,53 @@ const handleSubmit = async () => {
 
 /* 活动横幅区域 */
 .hero-banner {
-  width: 100%;
+  margin: auto;
+  width: 1420px;
   position: relative;
   overflow: hidden;
 }
 
+.hero-content {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 100px;
+}
+
+.hero-content h2 {
+  font-family: AlimamaShuHeiTi, AlimamaShuHeiTi, '黑体';
+  font-weight: bold;
+  font-size: 48px;
+  color: #FFFFFF;
+  line-height: 57px;
+  text-align: justify;
+  font-style: normal;
+}
+
+.hero-content .hero-content-description {
+  margin-top: 12px;
+  margin-bottom: 40px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 500;
+  font-size: 32px;
+  color: #FFFFFF;
+  line-height: 45px;
+  text-align: justify;
+  font-style: normal;
+}
+
+.hero-content div p {
+  margin-bottom: 2px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 14px;
+  color: #FFFFFF;
+  line-height: 20px;
+  text-align: justify;
+  font-style: normal;
+  text-transform: none;
+}
+
 .banner-image-container {
   margin: auto;
   width: 1420px;

src/views/CourseDetail.vue

@@ -121,7 +121,7 @@
                         <i class="icon-time"></i>
                         共{{ totalLessons }}章{{ totalSections }}节
                       </span>
-                      <span class="meta-separator">|</span>
+                      <span class="meta-separator"></span>
                       <span class="meta-item">
                         <i class="icon-duration"></i>
                         {{ formatTotalDuration() }}
@@ -291,47 +291,28 @@
                                 <button v-if="isVideoLesson(section)" class="lesson-action-btn video-btn"
                                   :class="{ 'disabled': !isUserEnrolled }" :disabled="!isUserEnrolled"
                                   @click.stop="isUserEnrolled ? handleSectionClick(section) : handleUnregisteredClick(section)">
-                                  <svg width="12" height="12" viewBox="0 0 16 16">
-                                    <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5" fill="none" />
-                                    <path d="M6 5l6 3-6 3V5z" fill="currentColor" />
-                                  </svg>
+                                  <!-- 调试: 视频课时判断结果 -->
+                                  <img src="/public/images/courses/video.png" alt="视频" width="14" height="14">
                                 </button>
                                 <!-- 下载图标 -->
                                 <button v-else-if="isResourceLesson(section)" class="lesson-action-btn download-btn"
                                   :class="{ 'disabled': !isUserEnrolled }" :disabled="!isUserEnrolled"
                                   @click.stop="isUserEnrolled ? handleDownload(section) : handleUnregisteredClick(section)">
-                                  <svg width="12" height="12" viewBox="0 0 16 16">
-                                    <path d="M8 1v10M4 7l4 4 4-4M2 14h12" stroke="currentColor" stroke-width="1.5"
-                                      fill="none" />
-                                  </svg>
+                                  <img src="/images/courses/download.png" alt="资料" width="14" height="14">
                                 </button>
-                                <!-- 编辑图标（作业） -->
+                                <!-- 作业图标 -->
                                 <button v-else-if="isHomeworkLesson(section)" class="lesson-action-btn edit-btn"
                                   :class="{ 'disabled': !isUserEnrolled }" :disabled="!isUserEnrolled"
                                   @click.stop="isUserEnrolled ? handleHomework(section) : handleUnregisteredClick(section)">
-                                  <svg width="12" height="12" viewBox="0 0 16 16">
-                                    <path d="M12 1l3 3-8 8-4 1 1-4 8-8z" stroke="currentColor" stroke-width="1.5"
-                                      fill="none" />
-                                  </svg>
+                                  <img src="/images/courses/homework.png" alt="作业" width="14" height="14">
                                 </button>
                                 <!-- 考试图标 -->
                                 <button v-else-if="isExamLesson(section)" class="lesson-action-btn exam-btn"
                                   :class="{ 'disabled': !isUserEnrolled }" :disabled="!isUserEnrolled"
                                   @click.stop="isUserEnrolled ? handleExam(section) : handleUnregisteredClick(section)">
-                                  <svg width="12" height="12" viewBox="0 0 16 16">
-                                    <rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor"
-                                      stroke-width="1.5" fill="none" />
-                                    <path d="M6 6h4M6 8h4M6 10h2" stroke="currentColor" stroke-width="1.5" />
-                                  </svg>
+                                  <img src="/images/courses/examination.png" alt="考试" width="14" height="14">
                                 </button>
-                                <!-- 完成状态图标 -->
-                                <!-- <span v-if="section.completed" class="completion-icon"
-                                  :class="{ 'disabled': !isUserEnrolled }">
-                                  <svg width="14" height="14" viewBox="0 0 16 16">
-                                    <circle cx="8" cy="8" r="7" :fill="isUserEnrolled ? '#52c41a' : '#d9d9d9'" />
-                                    <path d="M5 8l2 2 4-4" stroke="white" stroke-width="2" fill="none" />
-                                  </svg>
-                                </span> -->
+
                               </div>
                             </div>
                           </div>
@@ -898,7 +879,20 @@ const formatLessonDuration = (section: CourseSection): string => {
 
 // 判断是否为视频课时
 const isVideoLesson = (section: CourseSection): boolean => {
-  return !!(section.outline && section.outline.includes('.m3u8'))
+
+
+  if (!section.outline && getLessonTypeText(section) != '考试') {
+    return true
+  }
+  console.log(section.outline)
+  // 检查常见视频格式扩展名
+  return !!(section.outline && (
+    section.outline.includes('.m3u8') ||
+    section.outline.includes('.mp4') ||
+    section.outline.includes('.avi') ||
+    section.outline.includes('.mov') ||
+    section.outline.includes('.wmv')
+  )) || section.name.includes('视频')
 }
 
 // 判断是否为资料课时
@@ -1066,11 +1060,14 @@ const confirmEnrollment = async () => {
     enrollConfirmVisible.value = false
     enrollSuccessVisible.value = true
 
-    // 2秒后跳转到已报名状态的课程详情页面
+    // 2秒后跳转到已报名状态的课程详情页面并刷新
     setTimeout(() => {
       enrollSuccessVisible.value = false
       // 跳转到已报名状态页面
-      router.push(`/course/${courseId.value}/enrolled`)
+      router.push(`/course/${courseId.value}/enrolled`).then(() => {
+        // 手动刷新页面
+        window.location.reload();
+      })
     }, 2000)
 
   } catch (error) {
@@ -1369,7 +1366,7 @@ onMounted(() => {
 }
 
 .course-stats-info .stats-item {
-  color: rgba(255, 255, 255, 0.85);
+  color: #999999;
   display: flex;
   align-items: center;
   gap: 6px;
@@ -1616,8 +1613,8 @@ onMounted(() => {
 }
 
 .icon-note {
-  width: 18px;
-  height: 18px;
+  width: 18px !important;
+  height: 18px !important;
   background-image: url('/images/courses/note.png');
   background-size: contain;
   background-repeat: no-repeat;
@@ -1631,7 +1628,7 @@ onMounted(() => {
 .icon-notes {
   width: 32px;
   height: 32px;
-  background-image: url('/images/courses/底部交互区4.png');
+  background-image: url('/images/courses/底部交互区3.png');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
@@ -1675,7 +1672,6 @@ onMounted(() => {
 .course-meta {
   display: flex;
   flex-direction: column;
-  padding-bottom: 16px;
 }
 
 .meta-row {
@@ -1700,12 +1696,12 @@ onMounted(() => {
   color: #999999;
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 3px;
 }
 
 .meta-separator {
   color: #d9d9d9;
-  margin: 0 4px;
+  width: 20px;
 }
 
 .category-link {
@@ -1721,8 +1717,8 @@ onMounted(() => {
 .icon-time,
 .icon-duration,
 .icon-note {
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
   display: inline-block;
 }
 
@@ -1733,13 +1729,13 @@ onMounted(() => {
   border: none;
   padding: 6px 12px;
   border-radius: 4px;
-  font-size: 14px;
+  font-size: 16px;
   color: #000;
   cursor: pointer;
   transition: all 0.3s;
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 2px;
 }
 
 .btn-notes:hover {
@@ -2212,10 +2208,6 @@ onMounted(() => {
   color: #d9d9d9 !important;
 }
 
-.completion-icon.disabled {
-  opacity: 0.5;
-}
-
 .lesson-meta {
   display: flex;
   justify-content: flex-end;
@@ -2274,29 +2266,35 @@ onMounted(() => {
   background: #f0f0f0;
 }
 
-.video-btn svg {
+.video-btn svg,
+.video-btn img {
   color: #1890ff;
+  display: inline-block;
+  vertical-align: middle;
 }
 
-.download-btn svg {
+.download-btn svg,
+.download-btn img {
   color: #52c41a;
+  display: inline-block;
+  vertical-align: middle;
 }
 
-.edit-btn svg {
+.edit-btn svg,
+.edit-btn img {
   color: #1890ff;
+  display: inline-block;
+  vertical-align: middle;
 }
 
-.exam-btn svg {
+.exam-btn svg,
+.exam-btn img {
   color: #1890ff;
+  display: inline-block;
+  vertical-align: middle;
 }
 
 /* 完成状态图标 */
-.completion-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .lesson-title {
   font-size: 13px;
   color: #333;
@@ -2720,7 +2718,7 @@ onMounted(() => {
   position: absolute;
   top: 50%;
   width: 34%;
-  height: 2px;
+  height: 1px;
   background-color: #E1E1E1;
   ;
 }

src/views/CourseDetailEnrolled.vue

@@ -35,17 +35,15 @@
                 <div class="video-player enrolled">
                   <div class="video-container">
                     <!-- CKPlayer 容器 -->
-                    <div
-                      v-if="currentVideoUrl"
-                      id="ckplayer_container"
-                      class="ckplayer-container">
+                    <div v-if="currentVideoUrl" id="ckplayer_container" class="ckplayer-container">
                     </div>
-                    <div v-else class="video-placeholder" :style="{ backgroundImage: course?.coverImage || course?.thumbnail ? `url(${course.coverImage || course.thumbnail})` : '' }">
+                    <div v-else class="video-placeholder"
+                      :style="{ backgroundImage: course?.coverImage || course?.thumbnail ? `url(${course.coverImage || course.thumbnail})` : '' }">
                       <div class="placeholder-content">
                         <div class="play-icon">
                           <svg width="60" height="60" viewBox="0 0 60 60">
-                            <circle cx="30" cy="30" r="30" fill="rgba(255,255,255,0.9)"/>
-                            <path d="M23 18l20 12-20 12V18z" fill="#1890ff"/>
+                            <circle cx="30" cy="30" r="30" fill="rgba(255,255,255,0.9)" />
+                            <path d="M23 18l20 12-20 12V18z" fill="#1890ff" />
                           </svg>
                         </div>
                         <p>请选择要播放的视频课程</p>
@@ -108,7 +106,7 @@
                         <i class="icon-time"></i>
                         共{{ totalLessons }}章{{ totalSections }}节
                       </span>
-                      <span class="meta-separator">|</span>
+                      <span class="meta-separator"></span>
                       <span class="meta-item">
                         <i class="icon-duration"></i>
                         {{ formatTotalDuration() }}
@@ -209,13 +207,8 @@
             <div class="sidebar">
               <!-- 学习进度 -->
               <div class="progress-section">
-                <LearningProgressStats
-                  :course-progress="videoProgress"
-                  :homework-progress="exerciseProgress"
-                  :exam-progress="examProgress"
-                  :completed-items="completedLessons"
-                  :total-items="totalSections"
-                />
+                <LearningProgressStats :course-progress="videoProgress" :homework-progress="exerciseProgress"
+                  :exam-progress="examProgress" :completed-items="completedLessons" :total-items="totalSections" />
               </div>
 
               <!-- 课程章节列表 -->
@@ -227,7 +220,7 @@
                   <div class="header-right">
                     <button class="sort-btn">
                       <svg width="16" height="16" viewBox="0 0 16 16" class="sort-icon">
-                        <path d="M3 3h10M3 8h7M3 13h4" stroke="currentColor" stroke-width="1.5" fill="none"/>
+                        <path d="M3 3h10M3 8h7M3 13h4" stroke="currentColor" stroke-width="1.5" fill="none" />
                       </svg>
                       <span class="sort-text">正序</span>
                     </button>
@@ -247,11 +240,12 @@
                     <div v-for="(chapter, chapterIndex) in groupedSections" :key="chapterIndex" class="chapter-section">
                       <div class="chapter-header" @click="toggleChapter(chapterIndex)">
                         <div class="chapter-info">
-                          <span class="chapter-title">第{{ getChapterNumber(chapterIndex + 1) }}章 {{ chapter.title }}</span>
+                          <span class="chapter-title">第{{ getChapterNumber(chapterIndex + 1) }}章 {{ chapter.title
+                          }}</span>
                         </div>
                         <span class="chapter-toggle" :class="{ 'expanded': chapter.expanded }">
                           <svg width="12" height="12" viewBox="0 0 12 12">
-                            <path d="M4 3l4 3-4 3" stroke="currentColor" stroke-width="1.5" fill="none"/>
+                            <path d="M4 3l4 3-4 3" stroke="currentColor" stroke-width="1.5" fill="none" />
                           </svg>
                         </span>
                       </div>
@@ -266,41 +260,29 @@
                               <span class="lesson-title">{{ section.name }}</span>
                             </div>
                             <div class="lesson-meta">
-                              <span v-if="isVideoLesson(section)" class="lesson-duration">{{ formatLessonDuration(section) }}</span>
+                              <span v-if="isVideoLesson(section)" class="lesson-duration">{{
+                                formatLessonDuration(section) }}</span>
                               <div class="lesson-actions">
                                 <!-- 视频播放图标 - 可点击 -->
-                                <button v-if="isVideoLesson(section)" 
-                                        class="lesson-action-btn video-btn" 
+                                <button v-if="isVideoLesson(section)" class="lesson-action-btn video-btn"
                                   @click.stop="handleVideoPlay(section)">
-                                  <svg width="12" height="12" viewBox="0 0 16 16">
-                                    <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5" fill="none"/>
-                                    <path d="M6 5l6 3-6 3V5z" fill="currentColor"/>
-                                  </svg>
+                                  <img src="/public/images/courses/video-enroll.png" alt="视频" width="14" height="14">
                                 </button>
                                 <!-- 下载图标 - 可点击 -->
-                                <button v-else-if="isResourceLesson(section)" 
-                                        class="lesson-action-btn download-btn" 
+                                <button v-else-if="isResourceLesson(section)" class="lesson-action-btn download-btn"
                                   @click.stop="handleDownload(section)">
-                                  <svg width="12" height="12" viewBox="0 0 16 16">
-                                    <path d="M8 1v10M4 7l4 4 4-4M2 14h12" stroke="currentColor" stroke-width="1.5" fill="none"/>
-                                  </svg>
+                                  <img src="/public/images/courses/download-enroll.png" alt="资料" width="14" height="14">
                                 </button>
                                 <!-- 编辑图标（作业） - 可点击 -->
-                                <button v-else-if="isHomeworkLesson(section)" 
-                                        class="lesson-action-btn edit-btn" 
+                                <button v-else-if="isHomeworkLesson(section)" class="lesson-action-btn edit-btn"
                                   @click.stop="handleHomework(section)">
-                                  <svg width="12" height="12" viewBox="0 0 16 16">
-                                    <path d="M12 1l3 3-8 8-4 1 1-4 8-8z" stroke="currentColor" stroke-width="1.5" fill="none"/>
-                                  </svg>
+                                  <img src="/public/images/courses/homework-enroll.png" alt="作业" width="14" height="14">
                                 </button>
                                 <!-- 考试图标 - 可点击 -->
-                                <button v-else-if="isExamLesson(section)" 
-                                        class="lesson-action-btn exam-btn" 
+                                <button v-else-if="isExamLesson(section)" class="lesson-action-btn exam-btn"
                                   @click.stop="handleExam(section)">
-                                  <svg width="12" height="12" viewBox="0 0 16 16">
-                                    <rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.5" fill="none"/>
-                                    <path d="M6 6h4M6 8h4M6 10h2" stroke="currentColor" stroke-width="1.5"/>
-                                  </svg>
+                                  <img src="/public/images/courses/examination-enroll.png" alt="考试" width="14"
+                                    height="14">
                                 </button>
                                 <!-- 完成状态图标 - 彩色显示 -->
                                 <!-- <span v-if="section.completed" class="completion-icon">
@@ -387,11 +369,7 @@
   </div>
 
   <!-- 笔记弹窗 -->
-  <NotesModal
-    :visible="showNotesModal"
-    @close="closeNotesModal"
-    @save="saveNote"
-  />
+  <NotesModal :visible="showNotesModal" @close="closeNotesModal" @save="saveNote" />
 </template>
 
 <script setup lang="ts">
@@ -562,7 +540,7 @@ const generateMockSections = (): CourseSection[] => {
     { id: 5, lessonId: courseId.value, name: '第一课 程序设计入门', outline: 'https://example.com/video4.m3u8', parentId: 0, sort: 5, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: true, duration: '00:52:22' },
     { id: 6, lessonId: courseId.value, name: '操作PPT', outline: 'https://example.com/ppt2.ppt', parentId: 0, sort: 6, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined },
     { id: 7, lessonId: courseId.value, name: '第二课 循环结构', outline: 'https://example.com/video5.m3u8', parentId: 0, sort: 7, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: true, duration: '01:03:56' },
-    { id: 8, lessonId: courseId.value, name: '函数&循环', outline: '', parentId: 0, sort: 8, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined },
+    { id: 8, lessonId: courseId.value, name: '函数&循环', outline: 'https://example.com/video5.m3u8', parentId: 0, sort: 8, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined },
     { id: 9, lessonId: courseId.value, name: '第三课 条件结构', outline: 'https://example.com/video6.m3u8', parentId: 0, sort: 9, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '00:45:30' },
 
     // 第三章 - 实战项目 (6个)
@@ -724,6 +702,7 @@ const getChapterNumber = (num: number) => {
 
 // 课程类型判断函数
 const isVideoLesson = (section: CourseSection) => {
+  console.log(section.outline)
   return section.outline && (section.outline.includes('.m3u8') || section.outline.includes('.mp4'))
 }
 
@@ -754,7 +733,7 @@ const getLessonTypeText = (section: CourseSection) => {
   if (isResourceLesson(section)) return '资料'
   if (isHomeworkLesson(section)) return '作业'
   if (isExamLesson(section)) return '考试'
-  return '课程'
+  return '视频'
 }
 
 // 格式化课程时长
@@ -1135,7 +1114,6 @@ onUnmounted(() => {
 .course-meta {
   display: flex;
   flex-direction: column;
-  padding-bottom: 16px;
 }
 
 .meta-row {
@@ -1160,12 +1138,12 @@ onUnmounted(() => {
   color: #999999;
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 3px;
 }
 
 .meta-separator {
   color: #d9d9d9;
-  margin: 0 4px;
+  width: 20px;
 }
 
 .category-link {
@@ -1206,13 +1184,13 @@ onUnmounted(() => {
   border: none;
   padding: 6px 12px;
   border-radius: 4px;
-  font-size: 14px;
+  font-size: 16px;
   color: #000;
   cursor: pointer;
   transition: all 0.3s;
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 2px;
 }
 
 .btn-notes:hover {
@@ -1741,21 +1719,21 @@ onUnmounted(() => {
 }
 
 .badge-homework {
-  background: #fff2e6;
-  color: #fa8c16;
-  border: 1px solid #ffd591;
+  background: #fff !important;
+  color: #C0C0C0 !important;
+  border: 1px solid #E1E1E1;
 }
 
 .badge-exam {
-  background: #fff1f0;
-  color: #f5222d;
-  border: 1px solid #ffa39e;
+  background: #fff !important;
+  color: #C0C0C0 !important;
+  border: 1px solid #E1E1E1;
 }
 
 .badge-default {
-  background: #f0f0f0;
-  color: #666;
-  border: 1px solid #d9d9d9;
+  background: #fff;
+  color: #C0C0C0;
+  border: 1px solid #E1E1E1;
 }
 
 .lesson-info {
@@ -1765,7 +1743,7 @@ onUnmounted(() => {
 
 .lesson-title {
   font-size: 14px;
-  color: #333;
+  color: #666;
   transition: color 0.2s;
   display: block;
   white-space: nowrap;
@@ -1785,7 +1763,7 @@ onUnmounted(() => {
 
 .lesson-duration {
   font-size: 12px;
-  color: #999;
+  color: #666;
   flex-shrink: 0;
 }
 
@@ -2528,7 +2506,7 @@ onUnmounted(() => {
 .icon-note {
   width: 18px;
   height: 18px;
-  background-image: url('/images/courses/底部交互区3.png');
+  background-image: url('/images/courses/note.png');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;

src/views/Exam.vue

@@ -5,6 +5,10 @@
       <div class="banner-container">
         <img src="/banners/考前须知.png" alt="考前须知" class="banner-image" />
       </div>
+      <div class="banner-text">
+        <h2>考试中心</h2>
+        <p>涵盖多种题型，全方位考核，AI智能阅卷</p>
+      </div>
     </div>
 
 
@@ -411,7 +415,7 @@
                 <img src="/images/examination/submit-the-paper.png" alt="提交成功" class="success-img">
               </div>
               <div class="success-message">
-                <h3>答题卡已成功提交！将在1-3个工作日内批阅，请等待心理健康测试结果</h3>
+                <h3>答题卡已成功提交！预计1-3个工作日完成批阅请您耐心等候查询成绩</h3>
               </div>
               <div class="success-actions">
                 <button class="btn-return-home" @click="goHome">返回课程</button>
@@ -1054,6 +1058,7 @@ const getQuestionStatus = (index: number) => {
 
 // 提交考试
 const submitExam = () => {
+
   // 防止重复提交
   if (examSubmitted.value) {
     return
@@ -1211,6 +1216,47 @@ onMounted(() => {
   background: #F6F6F6;
 }
 
+.banner-section {
+  position: relative;
+}
+
+.banner-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+
+.banner-text h2 {
+  width: 128px;
+  height: 39px;
+  font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
+  font-weight: bold;
+  font-size: 32px;
+  color: #000000;
+  line-height: 39px;
+  text-align: center;
+  font-style: normal;
+}
+
+.banner-text p {
+  width: 252px;
+  height: 20px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 14px;
+  color: #000000;
+  line-height: 20px;
+  text-align: center;
+  font-style: normal;
+}
+
 /* 考试中心标题 */
 .exam-center-header {
   background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
@@ -1220,6 +1266,12 @@ onMounted(() => {
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
+.banner-image {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+
 .center-title {
   font-size: 36px;
   font-weight: 600;
@@ -1544,9 +1596,9 @@ onMounted(() => {
 }
 
 .answer-card-number.answered {
-  background: #e6f7ff;
-  color: #0088d1;
-  border-color: #91d5ff;
+  background: #E2F5FF;
+  color: #0088D1;
+  border-color: #0088D1;
 }
 
 .answer-card-number.marked {
@@ -2134,12 +2186,22 @@ onMounted(() => {
 }
 
 .success-message {
+  margin: auto;
+  width: 372px;
+  height: 50px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 18px;
+  color: #000000;
+  line-height: 25px;
+  text-align: center;
+  font-style: normal;
   margin-bottom: 40px;
 }
 
 .success-message h3 {
   color: #333;
-  font-size: 20px;
+  font-size: 18px;
   line-height: 1.6;
   margin: 0;
   font-weight: 500;

src/views/ExamNotice.vue

@@ -5,6 +5,10 @@
       <div class="banner-container">
         <img src="/banners/考前须知.png" alt="考前须知" class="banner-image" />
       </div>
+      <div class="banner-text">
+        <h2>考试中心</h2>
+        <p>涵盖多种题型，全方位考核，AI智能阅卷</p>
+      </div>
     </div>
 
     <!-- 主要内容区域 -->
@@ -195,6 +199,44 @@ onMounted(() => {
 .banner-section {
   padding: 0;
   width: 100%;
+  position: relative;
+}
+
+.banner-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+
+.banner-text h2 {
+  width: 128px;
+  height: 39px;
+  font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
+  font-weight: bold;
+  font-size: 32px;
+  color: #000000;
+  line-height: 39px;
+  text-align: center;
+  font-style: normal;
+}
+
+.banner-text p {
+  width: 252px;
+  height: 20px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 14px;
+  color: #000000;
+  line-height: 20px;
+  text-align: center;
+  font-style: normal;
 }
 
 .banner-container {
@@ -213,6 +255,7 @@ onMounted(() => {
 .main-content {
   background: #f5f5f5;
   padding: 10px 0;
+  height: 1740px;
 }
 
 .content-container {

src/views/Faculty.vue

@@ -38,7 +38,7 @@
         <div class="faculty-grid">
           <div v-for="teacher in paginatedTeachers" :key="teacher.id" class="faculty-card">
             <div class="card-header">
-              <div class="avatar-container">
+              <div class="avatar-container" @mouseenter="toggleCourseInfo(teacher.id)">
                 <!-- 师资头像 -->
                 <img :src="teacher.avatar" :alt="teacher.name" class="teacher-avatar" />
                 <div v-if="teacher.featured" class="featured-badge"></div>
@@ -53,7 +53,7 @@
                   </div>
                 </div>
               </div>
-              <div class="card-arrow" @click.stop="toggleCourseInfo(teacher.id)">
+              <div class="card-arrow">
                 <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                   <path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                     stroke-linejoin="round" />
@@ -447,10 +447,10 @@ const goToPage = (page: number) => {
   position: relative;
 }
 
-.faculty-card:hover {
+/* .faculty-card:hover {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
   transform: translateY(-2px);
-}
+} */
 
 .card-header {
   position: relative;
@@ -459,6 +459,8 @@ const goToPage = (page: number) => {
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: 5px;
+  overflow: hidden;
 }
 
 .avatar-container {
@@ -481,8 +483,8 @@ const goToPage = (page: number) => {
   top: 0;
   left: 0;
   background: #FF4419;
-  width: 78px;
-  height: 26px;
+  width: 96px;
+height: 37px;
   background-image: url('/images/Teachers/excellent-lecturer.png');
   background-size: 100% 100%;
 }
@@ -503,12 +505,12 @@ const goToPage = (page: number) => {
 
 .card-arrowhead {
   position: absolute;
-  bottom: 0;
-  right: 0;
+  bottom: 5px;
+  right: 20px;
   color: white;
   background: #0088D1;
-  width: 36px;
-  height: 36px;
+  width: 32px;
+  height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -569,7 +571,7 @@ const goToPage = (page: number) => {
   color: white;
   padding: 16px;
   border-radius: 0 0 5px 5px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
   z-index: 10;
   transform: translateY(100%);
   transition: transform 0.3s ease-out;
@@ -619,13 +621,13 @@ const goToPage = (page: number) => {
 }
 
 /* 箭头按钮旋转动画 */
-.card-arrow {
+/* .card-arrow {
   transition: transform 0.3s ease;
-}
+} */
 
-.faculty-card:hover .card-arrow {
+/* .faculty-card:hover .card-arrow {
   transform: rotate(180deg);
-}
+} */
 
 /* 分页组件 */
 .pagination {

src/views/HelpCenter.vue

@@ -186,7 +186,7 @@
 }
 
 .box_3.active {
-  background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPngea37d58dc512c4fe2d935dd556f5b31c5faeb614367c3c7469f974973aa5c1af) 100% no-repeat;
+  background: url('/images/Help-center/01.jpg') 100% no-repeat;
   background-size: 100% 100%;
 }
 
@@ -272,7 +272,7 @@
   padding-top: 20px;
   width: 1093px;
   height: 971px;
-  background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng91cb1a05b3f48dfb20e67b9927d110db8b26da25038c169d9601f477923a436a) 100% no-repeat;
+  background: url('/images/Help-center/02.jpg') 100% no-repeat;
   background-size: 100% 100%;
 }
 

src/views/Home.vue

@@ -1352,16 +1352,16 @@ onMounted(async () => {
 
 .course-image {
   position: relative;
-  /* width: 268px; */
-  height: 206px;
+  width: 334px;
+height: 209px;
   overflow: hidden;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   flex-shrink: 0;
 }
 
 .course-image img {
-  /* width: 334px; */
-  /* height: 206px; */
+  width: 334px;
+  height: 209px;
   object-fit: cover;
 }
 

src/views/SpecialTraining.vue

@@ -248,7 +248,7 @@ onMounted(() => {
 
 .page-subtitle {
   font-size: 14px;
-  color: #666;
+  color: #000;
   margin: 0;
 }
 

src/views/SpecialTrainingDetail.vue

@@ -222,7 +222,7 @@
 .text-wrapper_2 {
   width: 305px;
   height: 20px;
-  margin: 28px 0 20px 340px;
+  margin: 28px 0 20px 130px;
 }
 
 .text_12 {
@@ -406,6 +406,7 @@
 }
 
 .course button {
+  min-width: 96px;
   flex-shrink: 0;
   padding: 6px 19px;
   font-size: 14px;
@@ -476,6 +477,7 @@
 }
 
 .task button.completed {
+  min-width: 96px;
   background: #F6F6F6;
   border: 1px solid #979797;
   color: #999999;
@@ -518,7 +520,7 @@
   padding: 10px;
   width: 136px;
   height: auto;
-  border: 1px dashed #979797;
+  /* border: 1px dashed #979797; */
 }
 
 .certificate p {
@@ -685,6 +687,9 @@
   margin-right: 4px;
   border-radius: 50%;
   background-image: url('/images/special/attend.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
   display: flex;
   align-items: center;
   justify-content: center;

src/views/TeacherDetail.vue

@@ -20,7 +20,9 @@
       <img src="/images/Teachers/师资力量1.png" alt="">
       <h3>汪波</h3>
       <p>云南师范大学教授、平台签约讲师</p>
-      <button class="">+ 关注</button>
+      <button :class="{ 'disabled': isFollowing }" @click="toggleFollow">
+  {{ isFollowing ? '已关注' : '+ 关注' }}
+</button>
     </div>
 
     <!-- 主要内容区域 -->
@@ -116,6 +118,14 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
+
+// 关注状态
+const isFollowing = ref(false)
+
+// 切换关注状态
+const toggleFollow = () => {
+  isFollowing.value = !isFollowing.value
+}
 import { useRouter } from 'vue-router'
 import type { Course } from '@/api/types'
 import { mockCourses } from '@/data/mockCourses'