样式

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;
+  /* width: 50px;
-  height: 40px;
+  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;
+  width: 1420px !important;
-  margin: 0 auto;
+  margin: 0 auto !important;
-  padding: 0;
+  padding: 0 !important;
 }
 
 /* 主内容区域的容器 - 居中显示，左右边距相等 */
 .main-content .container {
-  max-width: 1420px;
+  width: 1420px !important;
-  margin: 0 auto;
+  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/Ai.vue

@@ -10,36 +10,41 @@
           <span class="text_15">实验方向</span>
           <span class="text_16">最新</span> <span class="text_17">最热</span>
           <span class="text_18">难度等级</span>
-          <img class="thumbnail_4" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng20bb8df2d25963d2f9a15938bde5268726a9725a399eace8e8b30fa6f6fc6ae0" />
+          <img class="thumbnail_4" referrerpolicy="no-referrer"
+            src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng20bb8df2d25963d2f9a15938bde5268726a9725a399eace8e8b30fa6f6fc6ae0" />
         </div>
         <div class="group_4 flex-col">
           <div class="block_3 flex-col"></div>
         </div>
         <div class="group_5 flex-row">
-          <img class="thumbnail_5" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng221d12611b979e5a2255fc34da1f37f982d562e7db29041e6d42e9528e14f249" />
+          <img class="thumbnail_5" referrerpolicy="no-referrer"
+            src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng221d12611b979e5a2255fc34da1f37f982d562e7db29041e6d42e9528e14f249" />
           <span class="text_19">经典技术</span>
           <span class="text_20">手势分类</span>
         </div>
         <div class="group_6 flex-row">
           <div class="box_5 flex-col">
-            <img class="image_7" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng3426aa4546c0dde66812d2ca51234931fe8308cf73b18ffc8690e8bfd53cd650" />
+            <img class="image_7" referrerpolicy="no-referrer" src="/images/ai/55.jpg" />
             <div class="image-text_1 flex-row justify-between">
-              <img class="thumbnail_6" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPngd4359394ad3231a061a6c177963eff548f9dfad49670e0eeb1ea11aa3ac877c2" />
+              <img class="thumbnail_6" referrerpolicy="no-referrer"
+                src="https://lanhu-oss-proxy.lanhuapp.com/SketchPngd4359394ad3231a061a6c177963eff548f9dfad49670e0eeb1ea11aa3ac877c2" />
               <span class="text-group_1">在线训练</span>
             </div>
-            <img class="image_8" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng3426aa4546c0dde66812d2ca51234931fe8308cf73b18ffc8690e8bfd53cd650" />
+            <img class="image_8" referrerpolicy="no-referrer" src="/images/ai/55.jpg" />
             <div class="image-text_2 flex-row justify-between">
-              <img class="thumbnail_7" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng9c352004401a0cd1d0034f83919069ac4f46afee4c7472f36df34e0953cca68d" />
+              <img class="thumbnail_7" referrerpolicy="no-referrer"
+                src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng9c352004401a0cd1d0034f83919069ac4f46afee4c7472f36df34e0953cca68d" />
               <span class="text-group_2">神经网络</span>
             </div>
-            <img class="image_9" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng3426aa4546c0dde66812d2ca51234931fe8308cf73b18ffc8690e8bfd53cd650" />
+            <img class="image_9" referrerpolicy="no-referrer" src="/images/ai/55.jpg" />
             <div class="box_6 flex-row">
               <div class="image-text_3 flex-row justify-between">
-                <img class="thumbnail_8" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng3eb646bd16341266f70c97c1b362075b4882c97778d0cce8b71dd3427cd2033c" />
+                <img class="thumbnail_8" referrerpolicy="no-referrer"
+                  src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng3eb646bd16341266f70c97c1b362075b4882c97778d0cce8b71dd3427cd2033c" />
                 <span class="text-group_3">特征提取</span>
               </div>
             </div>
-            <img class="image_10" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng3426aa4546c0dde66812d2ca51234931fe8308cf73b18ffc8690e8bfd53cd650" />
+            <img class="image_10" referrerpolicy="no-referrer" src="/images/ai/55.jpg" />
           </div>
           <FirstProject />
           <SecondProject />
@@ -47,31 +52,36 @@
         </div>
         <div class="group_11 flex-row justify-between">
           <div class="image-text_9 flex-row justify-between">
-            <img class="thumbnail_14" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPngae5cbb0288d044b7940a7e4f58e90a79b376525c7074fe6081d2eb80f3b66af2" />
+            <img class="thumbnail_14" referrerpolicy="no-referrer"
+              src="https://lanhu-oss-proxy.lanhuapp.com/SketchPngae5cbb0288d044b7940a7e4f58e90a79b376525c7074fe6081d2eb80f3b66af2" />
             <span class="text-group_12">原理解释</span>
           </div>
           <span class="text_28">姿态识别</span>
         </div>
-        <img class="image_11" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng3426aa4546c0dde66812d2ca51234931fe8308cf73b18ffc8690e8bfd53cd650" />
+        <img class="image_11" referrerpolicy="no-referrer" src="/images/ai/55.jpg" />
         <div class="group_12 flex-row">
           <div class="group_13 flex-col justify-between">
             <div class="image-text_10 flex-row justify-between">
-              <img class="thumbnail_15" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPngd3627550c0a611773c768561b0cc502ab1163b6e3b146e9488302ef4b7251277" />
+              <img class="thumbnail_15" referrerpolicy="no-referrer"
+                src="https://lanhu-oss-proxy.lanhuapp.com/SketchPngd3627550c0a611773c768561b0cc502ab1163b6e3b146e9488302ef4b7251277" />
               <span class="text-group_13">大语言模型</span>
             </div>
-            <img class="image_12" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng3426aa4546c0dde66812d2ca51234931fe8308cf73b18ffc8690e8bfd53cd650" />
+            <img class="image_12" referrerpolicy="no-referrer" src="/images/ai/55.jpg" />
             <div class="image-text_11 flex-row justify-between">
-              <img class="thumbnail_16" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPngcc4df0afc94cd3f9f28423107ee9405bf78e0b8c065738718a8de09e514b3d9c" />
+              <img class="thumbnail_16" referrerpolicy="no-referrer"
+                src="https://lanhu-oss-proxy.lanhuapp.com/SketchPngcc4df0afc94cd3f9f28423107ee9405bf78e0b8c065738718a8de09e514b3d9c" />
               <span class="text-group_14">声音识别</span>
             </div>
-            <img class="image_13" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng3426aa4546c0dde66812d2ca51234931fe8308cf73b18ffc8690e8bfd53cd650" />
+            <img class="image_13" referrerpolicy="no-referrer" src="/images/ai/55.jpg" />
             <div class="image-text_12 flex-row justify-between">
-              <img class="thumbnail_17" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng9c2b537e7b3537b38d16c6bf24dccbbbcc816a69760c86cc95c6c5075ee387c9" />
+              <img class="thumbnail_17" referrerpolicy="no-referrer"
+                src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng9c2b537e7b3537b38d16c6bf24dccbbbcc816a69760c86cc95c6c5075ee387c9" />
               <span class="text-group_15">图像识别</span>
             </div>
-            <img class="image_14" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng3426aa4546c0dde66812d2ca51234931fe8308cf73b18ffc8690e8bfd53cd650" />
+            <img class="image_14" referrerpolicy="no-referrer" src="/images/ai/55.jpg" />
             <div class="image-text_13 flex-row justify-between">
-              <img class="thumbnail_18" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng85eb232fb28be7bf813c024779fa564ca25755fce1f50bfcde00ed68af41ed04" />
+              <img class="thumbnail_18" referrerpolicy="no-referrer"
+                src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng85eb232fb28be7bf813c024779fa564ca25755fce1f50bfcde00ed68af41ed04" />
               <span class="text-group_16">生成式AI</span>
             </div>
           </div>
@@ -87,7 +97,7 @@
               <span class="text_34">需消耗20智点</span>
               <div class="group_19 flex-row">
                 <div class="image-text_15 flex-row justify-between">
-                  <img class="thumbnail_20" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng8c408105a9fd19d2ed517d26c3972819e5802316449362c24f8fa8609583f1cf" />
+                  <img class="thumbnail_20" referrerpolicy="no-referrer" src="/images/ai/33.jpg" />
                   <span class="text-group_20">立即体验</span>
                 </div>
               </div>
@@ -104,7 +114,8 @@
               <span class="text_37">还剩3次体验机会</span>
               <div class="box_15 flex-row">
                 <div class="image-text_16 flex-row justify-between">
-                  <img class="thumbnail_21" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng8c408105a9fd19d2ed517d26c3972819e5802316449362c24f8fa8609583f1cf" />
+                  <img class="thumbnail_21" referrerpolicy="no-referrer"
+                    src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng8c408105a9fd19d2ed517d26c3972819e5802316449362c24f8fa8609583f1cf" />
                   <span class="text-group_22">立即体验</span>
                 </div>
               </div>
@@ -113,22 +124,25 @@
         </div>
         <div class="group_21 flex-row">
           <div class="group_22 flex-col justify-between">
-            <img class="image_15" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng3426aa4546c0dde66812d2ca51234931fe8308cf73b18ffc8690e8bfd53cd650" />
+            <img class="image_15" referrerpolicy="no-referrer" src="/images/ai/55.jpg" />
             <div class="image-text_17 flex-row justify-between">
-              <img class="thumbnail_22" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng6fb8a5a4cc27854d72bae222fd8bea05a887376bfe01ab2a72ce9057638a0588" />
+              <img class="thumbnail_22" referrerpolicy="no-referrer"
+                src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng6fb8a5a4cc27854d72bae222fd8bea05a887376bfe01ab2a72ce9057638a0588" />
               <span class="text-group_23">学科能力</span>
             </div>
-            <img class="image_16" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng3426aa4546c0dde66812d2ca51234931fe8308cf73b18ffc8690e8bfd53cd650" />
+            <img class="image_16" referrerpolicy="no-referrer" src="/images/ai/55.jpg" />
             <div class="image-text_18 flex-row justify-between">
-              <img class="thumbnail_23" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPngf29a19a5f1ea049e35b7ab1afe5e89f57e5bafbe55f69ea600057830657788f6" />
+              <img class="thumbnail_23" referrerpolicy="no-referrer"
+                src="https://lanhu-oss-proxy.lanhuapp.com/SketchPngf29a19a5f1ea049e35b7ab1afe5e89f57e5bafbe55f69ea600057830657788f6" />
               <span class="text-group_24">内容创作</span>
             </div>
-            <img class="image_17" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng3426aa4546c0dde66812d2ca51234931fe8308cf73b18ffc8690e8bfd53cd650" />
+            <img class="image_17" referrerpolicy="no-referrer" src="/images/ai/55.jpg" />
             <div class="image-text_19 flex-row justify-between">
-              <img class="thumbnail_24" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng947744ed7d3342960c7fd6f0ec1e4e7dbc45b0333c9527e6f729d01364eacc44" />
+              <img class="thumbnail_24" referrerpolicy="no-referrer"
+                src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng947744ed7d3342960c7fd6f0ec1e4e7dbc45b0333c9527e6f729d01364eacc44" />
               <span class="text-group_25">互动体验</span>
             </div>
-            <img class="image_18" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng3426aa4546c0dde66812d2ca51234931fe8308cf73b18ffc8690e8bfd53cd650" />
+            <img class="image_18" referrerpolicy="no-referrer" src="/images/ai/55.jpg" />
           </div>
           <div class="group_23 flex-col">
             <div class="section_2 flex-row">
@@ -139,12 +153,14 @@
             </div>
             <div class="section_3 flex-row justify-between">
               <div class="image-text_20 flex-row justify-between">
-                <img class="thumbnail_25" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng36400ca1db866102585133601e1ce755c391054588a4f836a964e5d7ff91cb64" />
+                <img class="thumbnail_25" referrerpolicy="no-referrer"
+                  src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng36400ca1db866102585133601e1ce755c391054588a4f836a964e5d7ff91cb64" />
                 <span class="text-group_27">积分不足，需消耗29智点</span>
               </div>
               <div class="group_24 flex-row">
                 <div class="image-text_21 flex-row justify-between">
-                  <img class="thumbnail_26" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng8c408105a9fd19d2ed517d26c3972819e5802316449362c24f8fa8609583f1cf" />
+                  <img class="thumbnail_26" referrerpolicy="no-referrer"
+                    src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng8c408105a9fd19d2ed517d26c3972819e5802316449362c24f8fa8609583f1cf" />
                   <span class="text-group_28">立即体验</span>
                 </div>
               </div>
@@ -159,12 +175,14 @@
             </div>
             <div class="section_5 flex-row justify-between">
               <div class="image-text_22 flex-row justify-between">
-                <img class="thumbnail_27" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy-lanhuapp.com/SketchPng36400ca1db866102585133601e1ce755c391054588a4f836a964e5d7ff91cb64" />
+                <img class="thumbnail_27" referrerpolicy="no-referrer"
+                  src="https://lanhu-oss-proxy-lanhuapp.com/SketchPng36400ca1db866102585133601e1ce755c391054588a4f836a964e5d7ff91cb64" />
                 <span class="text-group_30">积分不足，需消耗29智点</span>
               </div>
               <div class="box_16 flex-row">
                 <div class="image-text_23 flex-row justify-between">
-                  <img class="thumbnail_28" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng8c408105a9fd19d2ed517d26c3972819e5802316449362c24f8fa8609583f1cf" />
+                  <img class="thumbnail_28" referrerpolicy="no-referrer"
+                    src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng8c408105a9fd19d2ed517d26c3972819e5802316449362c24f8fa8609583f1cf" />
                   <span class="text-group_31">立即体验</span>
                 </div>
               </div>
@@ -179,12 +197,14 @@
             </div>
             <div class="block_9 flex-row justify-between">
               <div class="image-text_24 flex-row justify-between">
-                <img class="thumbnail_29" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng36400ca1db866102585133601e1ce755c391054588a4f836a964e5d7ff91cb64" />
+                <img class="thumbnail_29" referrerpolicy="no-referrer"
+                  src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng36400ca1db866102585133601e1ce755c391054588a4f836a964e5d7ff91cb64" />
                 <span class="text-group_33">积分不足，需消耗29智点</span>
               </div>
               <div class="box_17 flex-row">
                 <div class="image-text_25 flex-row justify-between">
-                  <img class="thumbnail_30" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng8c408105a9fd19d2ed517d26c3972819e5802316449362c24f8fa8609583f1cf" />
+                  <img class="thumbnail_30" referrerpolicy="no-referrer"
+                    src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng8c408105a9fd19d2ed517d26c3972819e5802316449362c24f8fa8609583f1cf" />
                   <span class="text-group_34">立即体验</span>
                 </div>
               </div>
@@ -192,7 +212,8 @@
           </div>
         </div>
         <div class="image-text_26 flex-row justify-between">
-          <img class="thumbnail_31" referrerpolicy="no-referrer" src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng98fec207ddd7f0f1fccb9d85da504a1cc78a07a7e8eed372b207ad92352a54f6" />
+          <img class="thumbnail_31" referrerpolicy="no-referrer"
+            src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng98fec207ddd7f0f1fccb9d85da504a1cc78a07a7e8eed372b207ad92352a54f6" />
           <span class="text-group_35">在线编程</span>
         </div>
         <span class="text_44">AI知识科普</span>
@@ -302,7 +323,7 @@ function setBlockIcon(el: Element, title: string, isSelected: boolean) {
   const base = ICON_MAP[title]
   if (!img || !base) return
   const idx = isSelected ? '2' : '1'
-  const src = `./AI体验切图_8.7/${base}${idx}.png`
+  const src = `/images/ai/AI体验切图_8.7/${base}${idx}.png`
   if (img.getAttribute('src') !== src) img.setAttribute('src', src)
 }
 
@@ -399,19 +420,21 @@ onMounted(() => {
 </script>
 
 <style>
-
 body * {
   box-sizing: border-box;
   flex-shrink: 0;
 }
+
 body {
   font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
     Arial, PingFang SC-Light, Microsoft YaHei;
 }
+
 input {
   background-color: transparent;
   border: 0;
 }
+
 button {
   margin: 0;
   padding: 0;
@@ -423,30 +446,60 @@ body * {
 button:active {
   opacity: 0.6;
 }
+
 .flex-col {
   display: flex;
   flex-direction: column;
 }
 
 /* 交互增强 */
-  .clickable { cursor: pointer; }
+.clickable {
-  .clickable:active { opacity: 0.85; }
+  cursor: pointer;
-  .clickable:focus { outline: 2px solid #1677ff33; outline-offset: 2px; }
+}
+
+.clickable:active {
+  opacity: 0.85;
+}
+
+.clickable:focus {
+  outline: 2px solid #1677ff33;
+  outline-offset: 2px;
+}
 
 /* 选中高亮（用于返回后保持所选项） */
 /* 仅用于左侧导航项容器，保持内部布局不变 */
-  .selected { position: relative; z-index: 0; }
+.selected {
-  .selected::before { content: ""; position: absolute; left: -16px; top: -16px; width: 216px; height: 55px; background-color: #e6f4ff; border-radius: 8px; z-index: -1; pointer-events: none; }
+  position: relative;
-  .selected span { color: #0088d1 !important; }
+  z-index: 0;
+}
+
+.selected::before {
+  content: "";
+  position: absolute;
+  left: -16px;
+  top: -16px;
+  width: 216px;
+  height: 55px;
+  background-color: #e6f4ff;
+  border-radius: 8px;
+  z-index: -1;
+  pointer-events: none;
+}
+
+.selected span {
+  color: #0088d1 !important;
+}
 
 .flex-row {
   display: flex;
   flex-direction: row;
 }
+
 .justify-start {
   display: flex;
   justify-content: flex-start;
 }
+
 .justify-center {
   display: flex;
   justify-content: center;
@@ -456,26 +509,32 @@ body * {
   display: flex;
   justify-content: flex-end;
 }
+
 .justify-evenly {
   display: flex;
   justify-content: space-evenly;
 }
+
 .justify-around {
   display: flex;
   justify-content: space-around;
 }
+
 .justify-between {
   display: flex;
   justify-content: space-between;
 }
+
 .align-start {
   display: flex;
   align-items: flex-start;
 }
+
 .align-center {
   display: flex;
   align-items: center;
 }
+
 .align-end {
   display: flex;
   align-items: flex-end;
@@ -510,15 +569,7 @@ body * {
   width: 1920px;
 }
 
-  .box_1 {
+
-    position: relative;
-    width: 1920px;
-    height: 70px;
-    background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng6e7499038fe50878492d829d9775b9aa2d5a385bae4c040e1ffdffdfa031d668)
-      0px 0px no-repeat;
-    background-size: 1920px 85px;
-    justify-content: flex-center;
-  }
 
 .image_1 {
   width: 72px;
@@ -623,17 +674,6 @@ body * {
   margin: 0 50px 0 48px;
 }
 
-  .image-wrapper_1 {
-    height: 18px;
-    background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPnga2a271e1fd4f68df58a9c29bfc854f269f7a46449157ef1bac4bbdfb386289b3) -13px -11px
-      no-repeat;
-    background-size: 68px 44px;
-    width: 42px;
-    position: absolute;
-    left: 574px;
-    top: -9px;
-  }
-  
 .image_2 {
   width: 22px;
   height: 7px;
@@ -657,13 +697,11 @@ body * {
 }
 
 .text_7 {
-    background-image: linear-gradient(
+  background-image: linear-gradient(127deg,
-      127deg,
       rgba(0, 136, 209, 1) 0,
       rgba(5, 168, 255, 1) 0,
       rgba(33, 175, 255, 1) 40.723124%,
-      rgba(45, 203, 255, 1) 100%
+      rgba(45, 203, 255, 1) 100%);
-    );
   width: 53px;
   height: 24px;
   overflow-wrap: break-word;
@@ -777,14 +815,7 @@ body * {
   margin: 23px 0 0 4px;
 }
 
-  .text-wrapper_1 {
+
-    height: 42px;
-    background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng816dde71014cc227c5487772a7d73ac8ab83788c300a3363fa808f12cc878085) -13px -11px
-      no-repeat;
-    background-size: 138px 68px;
-    width: 112px;
-    margin: 14px 30px 0 32px;
-  }
 
 .text_12 {
   width: 78px;
@@ -809,7 +840,8 @@ body * {
 }
 
 .text-wrapper_2 {
-    background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/4edb4ed8f4594262b5d675054c9c2370_mergeImage.png);
+  background-image: url('/images/ai/66.png');
+  background-size: cover;
   width: 1920px;
   height: 163px;
 }
@@ -825,7 +857,7 @@ body * {
   text-align: center;
   white-space: nowrap;
   line-height: 39px;
-    margin: 51px 0 0 911px;
+  margin: 51px 0 0 811px;
 }
 
 .text_14 {
@@ -839,7 +871,7 @@ body * {
   text-align: center;
   white-space: nowrap;
   line-height: 20px;
-    margin: 12px 0 41px 892px;
+  margin: 12px 0 41px 792px;
 }
 
 .group_3 {
@@ -911,8 +943,7 @@ body * {
 
 .group_4 {
   height: 1px;
-    background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng9684aa1475e8e2e79c97665cb6797c0a8bb2a668d53573a6740309d63a55d747)
+  background: url('/images/ai/11.jpg') 0px -1px no-repeat;
-      0px -1px no-repeat;
   background-size: 1128px 2px;
   width: 1128px;
   margin: 16px 0 0 442px;
@@ -1093,7 +1124,7 @@ body * {
 }
 
 .group_7 {
-    background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/41886867a5384fa98576b7905c1014d7_mergeImage.png);
+  background-image: url('/images/ai/77.png');
   width: 360px;
   height: 168px;
 }
@@ -1153,8 +1184,7 @@ body * {
 .group_9 {
   width: 96px;
   height: 32px;
-    background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPnged8b25415874c457c6c4d31ad43ad70a712319bacf25c7e2205752efda03fb71)
+  background: url('/images/ai/22.jpg') 100% no-repeat;
-      100% no-repeat;
   background-size: 100% 100%;
 }
 
@@ -1193,7 +1223,7 @@ body * {
 }
 
 .block_4 {
-    background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/ff9bdafe703042f592dba542d3eacd9c_mergeImage.png);
+  background-image: url('/images/ai/77.jpg');
   width: 360px;
   height: 168px;
 }
@@ -1264,8 +1294,7 @@ body * {
 .box_9 {
   width: 96px;
   height: 32px;
-    background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng0cf1192b36f3c646e739744c4b38768e74e2c28fd0c2e3c40814f396d05dd375)
+  background: url('/images/ai/44.jpg') 100% no-repeat;
-      100% no-repeat;
   background-size: 100% 100%;
 }
 
@@ -1304,7 +1333,7 @@ body * {
 }
 
 .block_6 {
-    background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/99b56dbf175140adb9b4e5fcb2f5696f_mergeImage.png);
+  background-image: url('/images/ai/77.png');
   width: 360px;
   height: 168px;
 }
@@ -1375,8 +1404,7 @@ body * {
 .group_10 {
   width: 96px;
   height: 32px;
-    background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng0cf1192b36f3c646e739744c4b38768e74e2c28fd0c2e3c40814f396d05dd375)
+  background: url('/images/ai/88.jpg') 100% no-repeat;
-      100% no-repeat;
   background-size: 100% 100%;
 }
 
@@ -1595,7 +1623,7 @@ body * {
 }
 
 .group_15 {
-    background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/736e73816d3d47ed99bff37a9791c0e5_mergeImage.png);
+  background-image: url('/images/ai/77.png');
   width: 360px;
   height: 168px;
 }
@@ -1655,8 +1683,7 @@ body * {
 .group_17 {
   width: 96px;
   height: 32px;
-    background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPnged8b25415874c457c6c4d31ad43ad70a712319bacf25c7e2205752efda03fb71)
+  background: url('/images/ai/22.jpg') 100% no-repeat;
-      100% no-repeat;
   background-size: 100% 100%;
 }
 
@@ -1695,7 +1722,7 @@ body * {
 }
 
 .box_11 {
-    background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/2c7487ceb8bc4db9992d6da0332ce875_mergeImage.png);
+  background-image: url('/images/ai/77.jpg');
   width: 360px;
   height: 168px;
 }
@@ -1755,8 +1782,7 @@ body * {
 .group_19 {
   width: 96px;
   height: 32px;
-    background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPnged8b25415874c457c6c4d31ad43ad70a712319bacf25c7e2205752efda03fb71)
+  background: url('/images/ai/22.jpg') 100% no-repeat;
-      100% no-repeat;
   background-size: 100% 100%;
 }
 
@@ -1795,7 +1821,7 @@ body * {
 }
 
 .box_13 {
-    background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/1dbb432c79e5456d916caf86d7158ba0_mergeImage.png);
+  background-image: url('/images/ai/77.png');
   width: 360px;
   height: 168px;
 }
@@ -1855,8 +1881,7 @@ body * {
 .box_15 {
   width: 96px;
   height: 32px;
-    background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPnged8b25415874c457c6c4d31ad43ad70a712319bacf25c7e2205752efda03fb71)
+  background: url('/images/ai/22.jpg') 100% no-repeat;
-      100% no-repeat;
   background-size: 100% 100%;
 }
 
@@ -2005,7 +2030,7 @@ body * {
 }
 
 .section_2 {
-    background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/f5af572a54b146efb63b1ea017fb900e_mergeImage.png);
+  background-image: url('/images/ai/77.png');
   width: 360px;
   height: 168px;
 }
@@ -2076,8 +2101,7 @@ body * {
 .group_24 {
   width: 96px;
   height: 32px;
-    background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng0cf1192b36f3c646e739744c4b38768e74e2c28fd0c2e3c40814f396d05dd375)
+  background: url('/images/ai/44.jpg') 100% no-repeat;
-      100% no-repeat;
   background-size: 100% 100%;
 }
 
@@ -2116,7 +2140,7 @@ body * {
 }
 
 .section_4 {
-    background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/373b86920c824014b952c3673c3b7001_mergeImage.png);
+  background-image: url('/images/ai/77.png');
   width: 360px;
   height: 168px;
 }
@@ -2187,8 +2211,7 @@ body * {
 .box_16 {
   width: 96px;
   height: 32px;
-    background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng0cf1192b36f3c646e739744c4b38768e74e2c28fd0c2e3c40814f396d05dd375)
+  background: url('/images/ai/88.jpg') 100% no-repeat;
-      100% no-repeat;
   background-size: 100% 100%;
 }
 
@@ -2227,7 +2250,7 @@ body * {
 }
 
 .block_8 {
-    background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/5badbd71396a4767a08fe94ef31d2cd6_mergeImage.png);
+  background-image: url('/images/ai/77.png');
   width: 360px;
   height: 168px;
 }
@@ -2298,8 +2321,7 @@ body * {
 .box_17 {
   width: 96px;
   height: 32px;
-    background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng0cf1192b36f3c646e739744c4b38768e74e2c28fd0c2e3c40814f396d05dd375)
+  background: url('/images/ai/88.jpg') 100% no-repeat;
-      100% no-repeat;
   background-size: 100% 100%;
 }
 
@@ -2382,7 +2404,7 @@ body * {
 }
 
 .box_19 {
-    background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/ee0b26f1cf2447b8bebea25919cec506_mergeImage.png);
+  background-image: url('/images/ai/99.png');
   width: 337px;
   height: 168px;
 }
@@ -2461,7 +2483,7 @@ body * {
 }
 
 .group_28 {
-    background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/618d56e5b893486dbb134f5fe9d78a7d_mergeImage.png);
+  background-image: url('/images/ai/111.png');
   width: 337px;
   height: 168px;
 }
@@ -2540,7 +2562,7 @@ body * {
 }
 
 .group_29 {
-    background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/c84d011b327b45359eb943d138bc068c_mergeImage.png);
+  background-image: url('/images/ai/112.png');
   width: 337px;
   height: 168px;
 }
@@ -2619,7 +2641,7 @@ body * {
 }
 
 .block_10 {
-    background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/7dea9e414f2e41b58214a08298831d30_mergeImage.png);
+  background-image: url('/images/ai/113.png');
   width: 337px;
   height: 168px;
 }
@@ -2691,8 +2713,7 @@ body * {
 .section_6 {
   width: 1920px;
   height: 225px;
-    background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng1a840a0a6a91d4e9dbd409007c68a12039978f551728d58ec84418c47a3e68e5)
+  background: url('/images/ai/114.jpg') 100% no-repeat;
-      100% no-repeat;
   background-size: 100% 100%;
   margin: 1725px 0 0 -1920px;
 }
@@ -2792,6 +2813,4 @@ body * {
   line-height: 18px;
   margin-top: 25px;
 }
-  
-
 </style>

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" />
+                                  <img src="/public/images/courses/video.png" alt="视频" width="14" height="14">
-                                    <path d="M6 5l6 3-6 3V5z" fill="currentColor" />
-                                  </svg>
                                 </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">
+                                  <img src="/images/courses/download.png" alt="资料" width="14" height="14">
-                                    <path d="M8 1v10M4 7l4 4 4-4M2 14h12" stroke="currentColor" stroke-width="1.5"
-                                      fill="none" />
-                                  </svg>
                                 </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">
+                                  <img src="/images/courses/homework.png" alt="作业" width="14" height="14">
-                                    <path d="M12 1l3 3-8 8-4 1 1-4 8-8z" stroke="currentColor" stroke-width="1.5"
-                                      fill="none" />
-                                  </svg>
                                 </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">
+                                  <img src="/images/courses/examination.png" alt="考试" width="14" height="14">
-                                    <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>
                                 </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;
+  width: 18px !important;
-  height: 18px;
+  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;
+  width: 14px;
-  height: 16px;
+  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,12 +35,10 @@
                 <div class="video-player enrolled">
                   <div class="video-container">
                     <!-- CKPlayer 容器 -->
-                    <div
+                    <div v-if="currentVideoUrl" id="ckplayer_container" class="ckplayer-container">
-                      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">
@@ -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
+                <LearningProgressStats :course-progress="videoProgress" :homework-progress="exerciseProgress"
-                  :course-progress="videoProgress"
+                  :exam-progress="examProgress" :completed-items="completedLessons" :total-items="totalSections" />
-                  :homework-progress="exerciseProgress"
-                  :exam-progress="examProgress"
-                  :completed-items="completedLessons"
-                  :total-items="totalSections"
-                />
               </div>
 
               <!-- 课程章节列表 -->
@@ -247,7 +240,8 @@
                     <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">
@@ -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)" 
+                                <button v-if="isVideoLesson(section)" class="lesson-action-btn video-btn"
-                                        class="lesson-action-btn video-btn" 
                                   @click.stop="handleVideoPlay(section)">
-                                  <svg width="12" height="12" viewBox="0 0 16 16">
+                                  <img src="/public/images/courses/video-enroll.png" alt="视频" width="14" height="14">
-                                    <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>
                                 </button>
                                 <!-- 下载图标 - 可点击 -->
-                                <button v-else-if="isResourceLesson(section)" 
+                                <button v-else-if="isResourceLesson(section)" class="lesson-action-btn download-btn"
-                                        class="lesson-action-btn download-btn" 
                                   @click.stop="handleDownload(section)">
-                                  <svg width="12" height="12" viewBox="0 0 16 16">
+                                  <img src="/public/images/courses/download-enroll.png" alt="资料" width="14" height="14">
-                                    <path d="M8 1v10M4 7l4 4 4-4M2 14h12" stroke="currentColor" stroke-width="1.5" fill="none"/>
-                                  </svg>
                                 </button>
                                 <!-- 编辑图标（作业） - 可点击 -->
-                                <button v-else-if="isHomeworkLesson(section)" 
+                                <button v-else-if="isHomeworkLesson(section)" class="lesson-action-btn edit-btn"
-                                        class="lesson-action-btn edit-btn" 
                                   @click.stop="handleHomework(section)">
-                                  <svg width="12" height="12" viewBox="0 0 16 16">
+                                  <img src="/public/images/courses/homework-enroll.png" alt="作业" width="14" height="14">
-                                    <path d="M12 1l3 3-8 8-4 1 1-4 8-8z" stroke="currentColor" stroke-width="1.5" fill="none"/>
-                                  </svg>
                                 </button>
                                 <!-- 考试图标 - 可点击 -->
-                                <button v-else-if="isExamLesson(section)" 
+                                <button v-else-if="isExamLesson(section)" class="lesson-action-btn exam-btn"
-                                        class="lesson-action-btn exam-btn" 
                                   @click.stop="handleExam(section)">
-                                  <svg width="12" height="12" viewBox="0 0 16 16">
+                                  <img src="/public/images/courses/examination-enroll.png" alt="考试" width="14"
-                                    <rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.5" fill="none"/>
+                                    height="14">
-                                    <path d="M6 6h4M6 8h4M6 10h2" stroke="currentColor" stroke-width="1.5"/>
-                                  </svg>
                                 </button>
                                 <!-- 完成状态图标 - 彩色显示 -->
                                 <!-- <span v-if="section.completed" class="completion-icon">
@@ -387,11 +369,7 @@
   </div>
 
   <!-- 笔记弹窗 -->
-  <NotesModal
+  <NotesModal :visible="showNotesModal" @close="closeNotesModal" @save="saveNote" />
-    :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;
+  background: #fff !important;
-  color: #fa8c16;
+  color: #C0C0C0 !important;
-  border: 1px solid #ffd591;
+  border: 1px solid #E1E1E1;
 }
 
 .badge-exam {
-  background: #fff1f0;
+  background: #fff !important;
-  color: #f5222d;
+  color: #C0C0C0 !important;
-  border: 1px solid #ffa39e;
+  border: 1px solid #E1E1E1;
 }
 
 .badge-default {
-  background: #f0f0f0;
+  background: #fff;
-  color: #666;
+  color: #C0C0C0;
-  border: 1px solid #d9d9d9;
+  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;
+  background: #E2F5FF;
-  color: #0088d1;
+  color: #0088D1;
-  border-color: #91d5ff;
+  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;
+  width: 96px;
-  height: 26px;
+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;
+  bottom: 5px;
-  right: 0;
+  right: 20px;
   color: white;
   background: #0088D1;
-  width: 36px;
+  width: 32px;
-  height: 36px;
+  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; */
+  width: 334px;
-  height: 206px;
+height: 209px;
   overflow: hidden;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   flex-shrink: 0;
 }
 
 .course-image img {
-  /* width: 334px; */
+  width: 334px;
-  /* height: 206px; */
+  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'