首页

src/api/mock/courses.ts

@@ -7,7 +7,7 @@ export const mockCourses = [
   {
     id: 1,
     name: "暑期名师领学，提高班级教学质量！高效冲分指南",
-    cover: "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
+    cover: "images/home/1.png",
     categoryId: 1,
     price: "99.00",
     school: "名师工作室",

src/api/request.ts

@@ -20,7 +20,8 @@ const showMessage = (message: string, type: 'success' | 'error' | 'warning' | 'i
 
   // 临时使用alert，实际项目中应该替换为UI库的消息组件
   if (type === 'error') {
-    alert(`错误: ${message}`)
+    // alert(`错误: ${message}`)
+    console.error(`错误: ${message}`)
   }
 }
 

src/components/layout/AppHeader.vue

@@ -445,9 +445,9 @@ onUnmounted(() => {
   transition: all 0.2s;
 }
 
-.search-box:hover {
+/* .search-box:hover {
   background: #eeeeee;
-}
+} */
 
 .search-icon {
   max-width: 18px;

src/data/mockCourses.ts

@@ -6,7 +6,7 @@ export const mockCourses: Course[] = [
     "id": 1,
     "title": "暑期名师领学，提高班级教学质量！高效冲分指南",
     "description": "本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。",
-    "thumbnail": "https://lanhu-oss-proxy.lanhuapp.com/SketchPng8772d4ad1b8a119933c290df89c1d46e062df72ae405e889f1ddcfbe4e11c91d",
+    "thumbnail": "/images/home/1.png",
     "price": 99,
     "originalPrice": 199,
     "currency": "CNY",
@@ -47,7 +47,7 @@ export const mockCourses: Course[] = [
     "id": 2,
     "title": "暑期名师领学，提高班级教学质量！高效冲分指南",
     "description": "本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。",
-    "thumbnail": "https://lanhu-oss-proxy.lanhuapp.com/SketchPnga1957310d225f55ef8df00a464930dc3aeb381291c365f8b6cfd14b1b8df36c5",
+    "thumbnail": "/images/home/2.png",
     "price": 99,
     "originalPrice": 199,
     "currency": "CNY",
@@ -88,7 +88,7 @@ export const mockCourses: Course[] = [
     "id": 3,
     "title": "暑期名师领学，提高班级教学质量！高效冲分指南",
     "description": "本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。",
-    "thumbnail": "https://lanhu-oss-proxy.lanhuapp.com/SketchPngce3ac86149858eaab4f638c8426f8909b93db21391857eae93ae36dc15beebe0",
+    "thumbnail": "/images/home/3.png",
     "price": 99,
     "originalPrice": 199,
     "currency": "CNY",
@@ -129,7 +129,7 @@ export const mockCourses: Course[] = [
     "id": 4,
     "title": "暑期名师领学，提高班级教学质量！高效冲分指南",
     "description": "本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。",
-    "thumbnail": "https://lanhu-oss-proxy.lanhuapp.com/SketchPng03a62f729fe0d78bdb4e9fb3c6ef11e029e9d25f904d6d7f7aeacea40e455759",
+    "thumbnail": "/images/home/4.png",
     "price": 99,
     "originalPrice": 199,
     "currency": "CNY",
@@ -626,7 +626,7 @@ export const getCourseById = (id: number): Course | undefined => {
 
 // 获取热门课程（前5个）
 export const getPopularCourses = (): Course[] => {
-  return mockCourses.slice(0, 5)
+  return mockCourses.slice(0, 4)
 }
 
 // 根据分类筛选课程

src/views/Home.vue

@@ -3,6 +3,11 @@
     <!-- 主横幅区域 -->
     <section class="hero-banner">
       <img :src="bannerImage" :alt="bannerAlt" class="banner-image" />
+      <div class="hero-content">
+        <h2>中小学教师人工智能素养<span>提升</span>在线学习平台</h2>
+        <p>为教师量身定制，帮助教师快速掌握AI技术、教学应用与伦理规范，赋能智慧课堂</p>
+        <button>立即学习</button>
+      </div>
     </section>
 
     <!-- 数据统计区域 -->
@@ -16,8 +21,8 @@
             <div class="stat-number">1000 +</div>
             <div class="stat-label">{{ t('home.stats.learningVideos') }}</div>
           </div>
-          <div class="line"></div>
         </div>
+        <div class="line"></div>
         <div class="stat-item">
           <div class="stat-icon">
             <img src="/top/顶部icon2.png" alt="名师专家" />
@@ -26,8 +31,8 @@
             <div class="stat-number">109 +</div>
             <div class="stat-label">{{ t('home.stats.expertTeachers') }}</div>
           </div>
-          <div class="line"></div>
         </div>
+        <div class="line"></div>
         <div class="stat-item">
           <div class="stat-icon">
             <img src="/top/顶部icon3.png" alt="培训教材" />
@@ -36,8 +41,8 @@
             <div class="stat-number">3549 +</div>
             <div class="stat-label">{{ t('home.stats.trainingMaterials') }}</div>
           </div>
-          <div class="line"></div>
         </div>
+        <div class="line"></div>
         <div class="stat-item">
           <div class="stat-icon">
             <img src="/top/顶部icon4.png" alt="资源素材" />
@@ -46,9 +51,9 @@
             <div class="stat-number">6532 +</div>
             <div class="stat-label">{{ t('home.stats.resourceMaterials') }}</div>
           </div>
-          <div class="line"></div>
 
         </div>
+        <div class="line"></div>
         <div class="stat-item">
           <div class="stat-icon">
             <img src="/top/顶部icon5.png" alt="在线实验" />
@@ -67,7 +72,7 @@
       <div class="container">
         <div class="section-header">
           <div class="section-title-group">
-            <img src="/images/热门好课.png" alt="热门好课" class="section-title-image" />
+            <span class="section-title-text">热门好课</span>
             <div class="section-subtitle">{{ t('home.popularCourses.subtitle') }}</div>
           </div>
           <n-button text type="primary" class="view-all-btn" @click="$router.push('/courses')">
@@ -84,9 +89,9 @@
               <h3 class="course-title">{{ course.title }}</h3>
               <div class="course-meta">
                 <span class="course-students">{{ course.studentsCount }}{{ t('home.popularCourses.studentsEnrolled')
-                  }}</span>
+                }}</span>
                 <button class="enroll-btn" @click="handleEnrollCourse(course.id)">{{ t('home.popularCourses.enroll')
-                  }}</button>
+                }}</button>
               </div>
             </div>
           </div>
@@ -99,7 +104,7 @@
       <div class="container">
         <div class="section-header">
           <div class="section-title-group">
-            <img src="/images/专题训练.png" alt="专题训练" class="section-title-image" />
+            <span class="section-title-text">专题训练</span>
             <div class="section-subtitle">{{ t('home.specialTraining.subtitle') }}</div>
           </div>
           <n-button text type="primary" class="view-all-btn" @click="$router.push('/special-training')">
@@ -142,7 +147,7 @@
       <div class="container">
         <div class="section-header">
           <div class="section-title-group">
-            <img src="/images/学习路径.png" alt="学习路径" class="section-title-image" />
+            <span class="section-title-text">学习路径</span>
             <div class="section-subtitle">{{ t('home.learningPaths.subtitle') }}</div>
           </div>
           <n-button text type="primary" class="view-all-btn" @click="$router.push('/learning-paths')">
@@ -199,15 +204,15 @@
       <div class="container">
         <div class="section-header">
           <div class="section-title-group">
-            <img src="/images/精选评论.png" alt="精选活动" class="section-title-image" />
+            <span class="section-title-text">精选活动</span>
             <div class="section-subtitle">SELECTED EVENTS</div>
           </div>
-          <span>查看全部 > </span>
+          <span class="view-all-btn">查看全部 > </span>
         </div>
         <div class="activities-grid">
           <div class="activity-left">
             <div class="activity-left-content">
-              <div class="activity-title">
+              <div class="activity-title-name">
                 <h3 class="activity-name">2025AI算法挑战活动大赛</h3>
                 <span class="activity-detailed">查看详情></span>
               </div>
@@ -224,6 +229,8 @@
           </div>
           <div class="activity-right">
             <img src="/images/activity/activity2.png" alt="">
+            <h3 class="activity-title-img">算法挑战</h3>
+            <img src="/images/activity/right.png" class="activity-right-img" alt="">
           </div>
         </div>
       </div>
@@ -244,7 +251,7 @@
       <div class="container">
         <div class="section-header">
           <div class="section-title-group">
-            <img src="/images/学习路径.png" alt="AI智能体验" class="section-title-image" />
+            <span class="section-title-text">AI智能体验</span>
             <div class="section-subtitle">FEATURED REVIEWS</div>
           </div>
         </div>
@@ -269,7 +276,7 @@
       <div class="container">
         <div class="section-header">
           <div class="section-title-group">
-            <img src="/images/精选评论.png" alt="精选评论" class="section-title-image" />
+            <span class="section-title-text">精选评论</span>
             <div class="section-subtitle">{{ t('home.featuredReviews.subtitle') }}</div>
           </div>
         </div>
@@ -288,14 +295,165 @@
       <div class="container">
         <div class="section-header">
           <div class="section-title-group">
-            <img src="/images/精选评论.png" alt="精选评论" class="section-title-image" />
+            <span class="section-title-text">精选评论</span>
             <div class="section-subtitle">{{ t('home.featuredReviews.subtitle') }}</div>
           </div>
         </div>
         <div class="reviews-grid">
-          <div class="featured-review" v-for="review in featuredReviews" :key="review.id">
+          <div class="content-comments" style="--t:20s">
-            <img :src="review.avatar" class="featured-img" :alt="review.name">
+            <div>
-            <span class="featured-content">{{ review.content }}</span>
+              <span>
+                <img src="/images/activity/6.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络</span>
+              </span>
+              <span>
+                <img src="/images/activity/7.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学</span>
+              </span>
+              <span>
+                <img src="/images/activity/8.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学习，调整语言模</span>
+              </span>
+            </div>
+
+            <div>
+              <span>
+                <img src="/images/activity/6.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络</span>
+              </span>
+              <span>
+                <img src="/images/activity/7.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学</span>
+              </span>
+              <span>
+                <img src="/images/activity/8.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学习，调整语言模</span>
+              </span>
+            </div>
+          </div>
+          <div class="content-comments" style="--t:40s">
+            <div>
+              <span>
+                <img src="/images/activity/9.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学</span>
+              </span>
+              <span>
+                <img src="/images/activity/10.png" alt="" class="avatar-img">
+                <span>通过机器学习</span>
+              </span>
+              <span>
+                <img src="/images/activity/11.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学习，调整语言模型和任务格式实</span>
+              </span>
+            </div>
+
+            <div>
+              <span>
+                <img src="/images/activity/9.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学</span>
+              </span>
+              <span>
+                <img src="/images/activity/10.png" alt="" class="avatar-img">
+                <span>通过机器学习</span>
+              </span>
+              <span>
+                <img src="/images/activity/11.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学习，调整语言模型和任务格式实</span>
+              </span>
+            </div>
+          </div>
+          <div class="content-comments" style="--t:30s">
+            <div>
+              <span>
+                <img src="/images/activity/12.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络</span>
+              </span>
+              <span>
+                <img src="/images/activity/7.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学</span>
+              </span>
+              <span>
+                <img src="/images/activity/8.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学习，调整语言模</span>
+              </span>
+            </div>
+
+            <div>
+              <span>
+                <img src="/images/activity/12.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络</span>
+              </span>
+              <span>
+                <img src="/images/activity/7.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学</span>
+              </span>
+              <span>
+                <img src="/images/activity/8.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学习，调整语言模</span>
+              </span>
+            </div>
+          </div>
+          <div class="content-comments" style="--t:10s">
+            <div>
+              <span>
+                <img src="/images/activity/6.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络</span>
+              </span>
+              <span>
+                <img src="/images/activity/7.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学</span>
+              </span>
+              <span>
+                <img src="/images/activity/8.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学习，调整语言模</span>
+              </span>
+            </div>
+
+            <div>
+              <span>
+                <img src="/images/activity/6.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络</span>
+              </span>
+              <span>
+                <img src="/images/activity/7.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学</span>
+              </span>
+              <span>
+                <img src="/images/activity/8.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学习，调整语言模</span>
+              </span>
+            </div>
+          </div>
+          <div class="content-comments" style="--t:20s">
+            <div>
+              <span>
+                <img src="/images/activity/6.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络</span>
+              </span>
+              <span>
+                <img src="/images/activity/7.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学</span>
+              </span>
+              <span>
+                <img src="/images/activity/8.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学习，调整语言模</span>
+              </span>
+            </div>
+
+            <div>
+              <span>
+                <img src="/images/activity/6.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络</span>
+              </span>
+              <span>
+                <img src="/images/activity/7.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学</span>
+              </span>
+              <span>
+                <img src="/images/activity/8.png" alt="" class="avatar-img">
+                <span>通过机器学习、人工神经网络的结构化学习，调整语言模</span>
+              </span>
+            </div>
           </div>
         </div>
       </div>
@@ -306,16 +464,16 @@
       <div class="container">
         <div class="section-header">
           <div class="section-title-group">
-            <h2 class="section-title">合作伙伴</h2>
+            <h2 class="section-title-text">合作伙伴</h2>
             <div class="section-subtitle">PARTNER</div>
           </div>
         </div>
         <div class="partners-grid">
           <div class="partner-item" v-for="partner in partners" :key="partner.id">
-              <div class="logo-circle">
+            <div class="logo-circle">
-                <img :src="partner.logo" :alt="partner.name">
+              <img :src="partner.logo" :alt="partner.name">
-              </div>
+            </div>
-              <div class="partner-name">{{ partner.name }}</div>
+            <div class="partner-name">{{ partner.name }}</div>
           </div>
         </div>
       </div>
@@ -530,6 +688,13 @@ const featuredReviews = computed(() => [
     avatar: '/opinion/opioion2.png',
     content: t('home.reviewsData.reviewer2.content')
   },
+  {
+    id: 3,
+    name: t('home.reviewsData.reviewer3.name'),
+    title: t('home.reviewsData.reviewer3.title'),
+    avatar: '/opinion/opioion3.png',
+    content: t('home.reviewsData.reviewer3.content')
+  },
   {
     id: 3,
     name: t('home.reviewsData.reviewer3.name'),
@@ -583,7 +748,7 @@ onMounted(async () => {
   display: flex;
   flex-direction: column;
   gap: 15px;
-  
+
   z-index: 1000;
 }
 
@@ -636,7 +801,7 @@ onMounted(async () => {
 
 /* 合作伙伴部分 */
 .partners-section {
-  padding: 60px 0 40px 0;
+  padding: 60px 0 60px 0;
   background-image: url('/images/partners/partners-bg.png');
   background-size: cover;
   background-position: center;
@@ -655,17 +820,20 @@ onMounted(async () => {
 .partner-item {
   display: flex;
   flex-direction: row;
+  justify-content: center;
   align-items: center;
-  width: 100%;
+  /* width: 100%; */
-  max-width: 300px;
+  width: 454px;
+  height: 154px;
   background-color: #fff;
   padding: 15px;
   border-radius: 5px;
+  gap: 10px;
 }
 
 .logo-circle {
-  width: 60px;
+  width: 100px;
-  height: 60px;
+  height: 100px;
   border-radius: 50%;
   background: white;
   display: flex;
@@ -683,8 +851,8 @@ onMounted(async () => {
 }
 
 .partner-name {
-  font-size: 18px;
+  font-size: 30px;
-  color: #333;
+  color: #292C2E;
   font-weight: 500;
   text-align: center;
 }
@@ -712,6 +880,51 @@ onMounted(async () => {
   align-items: center;
 }
 
+.hero-content {
+  width: 100%;
+  position: absolute;
+  left: 50%;
+  top: 54%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  z-index: 1;
+}
+
+.hero-content h2 {
+  width: 100%;
+  font-size: 58px;
+  font-weight: 700;
+  color: #000F3D;
+}
+
+.hero-content h2 span {
+  color: #39A8E8;
+  font-weight: 700;
+}
+
+.hero-content p {
+  color: #031642;
+  font-size: 22px;
+  font-weight: 540;
+  margin-bottom: 11px;
+}
+
+.hero-content button {
+  margin-top: 56px;
+  background: linear-gradient(to right, #6EC9FE, #0A8ED7);
+  border: none;
+  color: white;
+  padding: 14px 40px;
+  font-size: 20px;
+  border-radius: 30px;
+  cursor: pointer;
+  transition: opacity 0.3s ease;
+  font-weight: 600;
+  letter-spacing: 4px;
+  box-shadow: #0E92D9 0px 20px 30px -10px;
+}
+
+
 .banner-image {
   width: 100%;
   height: auto;
@@ -786,7 +999,6 @@ onMounted(async () => {
 
 /* 数据统计区域 */
 .stats-section {
-  width: 1920px;
   height: 187px;
   background: #F2FBFF;
   display: flex;
@@ -807,7 +1019,7 @@ onMounted(async () => {
   gap: 24px;
   margin-top: 40px;
   width: 100%;
-  max-width: 1200px;
+  max-width: 1420px;
   margin-left: auto;
   margin-right: auto;
 }
@@ -881,22 +1093,22 @@ onMounted(async () => {
 
 /* 广告区域样式 */
 .advertisement-section {
+  margin: auto;
   padding: 40px 0;
   background: white;
 }
 
 .ad-container {
   width: 100%;
-  max-width: 1200px;
+  max-width: 1420px;
   margin: 0 auto;
   text-align: center;
 }
 
 .ad-image {
   width: 100%;
-  max-width: 1200px;
   height: auto;
-  border-radius: 8px;
+  border-radius: 6px;
   transition: all 0.3s ease;
 }
 
@@ -936,9 +1148,9 @@ onMounted(async () => {
 .stats-grid {
   display: flex;
   align-items: center;
-  width: 100%;
+  width: 1420px;
   margin: 0 auto;
-  padding: 0 247px;
+  padding: 0;
 }
 
 .stat-item {
@@ -946,21 +1158,24 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   gap: 20px;
-  padding: 0 45px 0 25px;
+  padding: 0;
+}
+
+/* 第一个 */
+/* .stat-item:first-child {
+  margin-left: 0;
 }
 
 .stat-item:last-child {
   border-right: none;
-}
+  padding-right: 0;
-
+} */
-.stat-item:last-child {
-  border-right: none;
-}
 
 .line {
   width: 1px;
   height: 50px;
   background: #D0E8F5;
+  margin: 0 65px;
 }
 
 .stat-icon {
@@ -982,7 +1197,7 @@ onMounted(async () => {
 
 
 .stat-content {
-  text-align: left;
+  text-align: right;
   flex: 1;
 }
 
@@ -1033,13 +1248,13 @@ onMounted(async () => {
 
 /* 通用样式 */
 .container {
-  width: 100%;
+  width: 1420px !important;
-  max-width: 1400px;
+  margin: 0 auto !important;
-  margin: 0 auto;
+  padding: 0;
-  padding: 0 24px;
 }
 
 .section-header {
+  max-width: 1420px;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
@@ -1069,6 +1284,15 @@ onMounted(async () => {
   margin-bottom: 4px;
 }
 
+.section-title-text {
+  height: 32px;
+  line-height: 32px;
+  font-size: 30px;
+  color: #333;
+  margin-bottom: 6px;
+  display: inline-block;
+}
+
 .section-subtitle {
   font-size: 24px;
   color: #C0C0C0;
@@ -1080,7 +1304,7 @@ onMounted(async () => {
 }
 
 .view-all-btn {
-  font-size: 24px;
+  font-size: 18px;
   color: #999;
   padding: 0;
   height: auto;
@@ -1103,7 +1327,7 @@ onMounted(async () => {
 
 .courses-grid {
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   width: 100%;
 }
@@ -1128,16 +1352,16 @@ onMounted(async () => {
 
 .course-image {
   position: relative;
-  width: 268px;
+  /* width: 268px; */
-  height: 160px;
+  height: 206px;
   overflow: hidden;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   flex-shrink: 0;
 }
 
 .course-image img {
-  width: 268px;
+  /* width: 334px; */
-  height: 160px;
+  /* height: 206px; */
   object-fit: cover;
 }
 
@@ -1183,13 +1407,13 @@ onMounted(async () => {
 }
 
 .enroll-btn {
-  background: #1890ff;
+  background: white;
-  color: #FFFFFF;
+  border: 1px solid #0088D1;
-  border: none;
+  color: #0088D1;
   min-width: 59px;
   height: 25px;
   padding: 0 12px;
-  border-radius: 12px;
+  border-radius: 4px;
   font-size: 12px;
   font-weight: 400;
   line-height: 17px;
@@ -1209,11 +1433,11 @@ onMounted(async () => {
 
 .join-btn {
   background: #FFFFFF;
-  color: #1890ff;
+  color: #0088D1;
-  border: 1px solid #1890ff;
+  border: 1px solid #0088D1;
   width: 59px;
   height: 25px;
-  border-radius: 12px;
+  border-radius: 5px;
   font-size: 12px;
   font-weight: 400;
   line-height: 17px;
@@ -1245,9 +1469,9 @@ onMounted(async () => {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
-  max-width: 1400px;
+  max-width: 1420px;
   margin: 0 auto;
-  padding: 0 24px;
+  padding: 0;
 }
 
 .training-card {
@@ -1265,13 +1489,13 @@ onMounted(async () => {
 
 .training-image {
   position: relative;
-  width: 334px;
+  width: 100%;
-  height: 212px;
+  /* height: 212px; */
   overflow: hidden;
 }
 
 .training-image img {
-  width: 334px;
+  width: 100%;
   height: 212px;
   object-fit: cover;
 }
@@ -1288,7 +1512,7 @@ onMounted(async () => {
 
 .training-title-row {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   /* 让标题和标签顶部对齐 */
   gap: 8px;
   justify-content: flex-start;
@@ -1323,7 +1547,7 @@ onMounted(async () => {
 }
 
 .training-tag {
-  background: #1890ff;
+  background: #5BA0FF;
   color: #FFFFFF;
   font-size: 14px;
   font-weight: 400;
@@ -1374,7 +1598,7 @@ onMounted(async () => {
 
 /* 学习路径 */
 .learning-paths {
-  padding: 80px 0;
+  padding: 20px 0;
   background: white;
   width: 100%;
   min-height: 859px;
@@ -1454,10 +1678,10 @@ onMounted(async () => {
 }
 
 .detail-link {
-  color: #1890ff;
+  color: #0088D1;
   cursor: pointer;
   margin-left: 5px;
-  font-size: 14px;
+  font-size: 16px;
 }
 
 .detail-link:hover {
@@ -1559,7 +1783,7 @@ onMounted(async () => {
   margin-bottom: 20px;
   line-height: 1.5;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   word-wrap: break-word;
   word-break: break-word;
   hyphens: auto;
@@ -1606,43 +1830,79 @@ onMounted(async () => {
   background-size: cover;
   background-position: center;
   width: 100%;
-  height: auto;
+  height: 758px;
 }
 
 .reviews-grid {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
-  justify-content: center;
+  justify-content: space-between;
-  gap: 20px;
-  margin-top: 30px;
-}
-
-.review-card:hover {
-  transform: translateY(-2px);
-}
-
-.featured-review {
-  display: flex;
   align-items: center;
-  background-color: white;
+  height: 500px;
-  border-radius: 30px;
-  padding: 5px;
-  margin: 10px;
-  border: 2px solid #D8E5EA;
 }
 
-.featured-img {
+.avatar-img {
-  border-radius: 50%;
+  width: 43px;
-  width: 40px;
+  height: 43px;
-  height: 40px;
+  border-right: 50%;
-  margin-right: 10px;
 }
 
-.featured-content {
+.content-comments {
-  margin: 0;
+  position: relative;
-  font-size: 16px;
+  display: flex;
+  width: 1420px;
+  /* overflow: hidden; */
+}
+
+.content-comments div {
   white-space: nowrap;
-  /* 内容保持在一行 */
+  animation: animate var(--t) linear infinite;
+}
+
+.content-comments div:nth-child(2) {
+  animation: animate2 var(--t) linear infinite;
+  animation-delay: calc(var(--t) / -2);
+}
+
+@keyframes animate {
+  from {
+    transform: translate(100%);
+  }
+
+  to {
+    transform: translate(-100%);
+  }
+}
+
+@keyframes animate2 {
+  from {
+    transform: translate(0);
+  }
+
+  to {
+    transform: translate(-200%);
+  }
+}
+
+.content-comments div span {
+  display: inline-flex;
+  align-items: center;
+  /* margin: 10px; */
+  line-height: 1.5em;
+  background-color: #fff;
+  color: #999999;
+  font-size: 18px;
+  padding: 6px 8px;
+  border-radius: 340px;
+  border: 1.5px solid #D5E2E8;
+  text-align: center;
+  margin-right: 200px;
+}
+
+.content-comments div span span {
+  border: none;
+  padding: 5px 10px;
+  margin-right: 5px;
 }
 
 .review-avatar {
@@ -1725,16 +1985,18 @@ onMounted(async () => {
   display: flex;
   justify-content: space-between;
   margin-top: 32px;
+  gap: 20px;
 }
 
 .activity-left {
   padding-left: 30px;
-  width: 1145px;
+  width: 1182px;
-  height: 307px;
+  height: 404px;
   background: white;
   border-radius: 5px;
   display: flex;
   justify-content: space-between;
+  gap: 50px;
 }
 
 .activity-left-content {
@@ -1742,7 +2004,7 @@ onMounted(async () => {
   position: relative;
 }
 
-.activity-title {
+.activity-title-name {
   padding: 25px 0 25px 0;
   display: flex;
   justify-content: space-between;
@@ -1750,8 +2012,8 @@ onMounted(async () => {
 }
 
 .activity-name {
-  font-weight: 600;
+  /* font-weight: 600; */
-  font-size: 22px;
+  font-size: 26px;
 }
 
 .activity-detailed {
@@ -1760,20 +2022,38 @@ onMounted(async () => {
 }
 
 .activity-description {
-  font-size: 17px;
+  font-size: 20px;
   color: #52565D;
 }
 
 .activity-left-img {
-  width: 336px;
+  width: 442px;
   height: 100%;
   border-radius: 5px;
 }
 
 .activity-right {
-  width: 170px;
+  width: 223px;
-  height: 307px;
+  height: 404px;
   border-radius: 5px;
+  position: relative;
+}
+
+.activity-right .activity-title-img {
+  position: absolute;
+  top: 60px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 54px;
+  color: #1380BF;
+  width: 119px;
+  height: 150px;
+}
+
+.activity-right .activity-right-img {
+  position: absolute;
+  left: 56px;
+  bottom: 16%;
 }
 
 .activity-btn {
@@ -1901,44 +2181,6 @@ div {
 
 /* 响应式设计 */
 
-/* 超大屏幕 (≥1400px) */
-@media (min-width: 1400px) {
-  .banner-content {
-    padding: 0 32px;
-  }
-
-  .container {
-    padding: 0 32px;
-    max-width: 1400px;
-    margin: 0 auto;
-  }
-
-  .courses-grid {
-    grid-template-columns: repeat(5, 1fr);
-    gap: 24px;
-  }
-
-  .training-grid {
-    grid-template-columns: repeat(4, 1fr);
-    gap: 28px;
-  }
-
-  .paths-grid {
-    grid-template-columns: repeat(3, 1fr);
-    gap: 28px;
-  }
-
-  .reviews-grid {
-    grid-template-columns: repeat(3, 1fr);
-    gap: 48px;
-  }
-
-  .ai-cards-grid {
-    grid-template-columns: repeat(4, 1fr);
-    gap: 28px;
-  }
-}
-
 /* 大屏幕 (1200px-1399px) */
 @media (max-width: 1399px) and (min-width: 1200px) {
   .container {