From b90f013b5aad874aa1068cab243af4a2fcfaac5f Mon Sep 17 00:00:00 2001
From: mayiming <1627832236@qq.com>
Date: Sun, 2 Nov 2025 23:52:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=AF=BE=E7=A8=8B=E6=A1=88?=
 =?UTF-8?q?=E4=BE=8Bweb=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/CaseResources.vue | 1964 +++++++++++--------------------
 1 file changed, 694 insertions(+), 1270 deletions(-)

diff --git a/web/src/views/CaseResources.vue b/web/src/views/CaseResources.vue
index 9a883f3b..61a828e8 100644
--- a/web/src/views/CaseResources.vue
+++ b/web/src/views/CaseResources.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <!-- 公共顶部公共顶部横幅 -->
+    <!-- 公共顶部横幅 -->
     <div class="banner">
       <h1>云端课堂 线上课程</h1>
     </div>
@@ -16,26 +16,23 @@
       </div>
     </div>
 
-    <!-- 内容区域 -->
+    <!-- ==================== 内容区域 ==================== -->
     <div class="content-container">
-      <!-- 线上课程内容 -->
+
+      <!-- ==================== 线上课程列表 ==================== -->
       <div v-if="activeTab === 'online' && !selectedCourse">
         <h2 class="section-title">线上课程</h2>
 
-        <!-- 首次加载状态 -->
         <div v-if="loadingInit" class="loading">加载中...</div>
+        <div v-if="errorMsg" class="error-msg">暂无数据</div>
 
-        <!-- 错误提示 -->
-        <div v-if="errorMsg" class="error-msg">{{ errorMsg }}</div>
-
-        <!-- 课程列表核心区域 -->
         <div v-if="!loadingInit && !errorMsg">
-          <!-- 初始状态：只显示3个课程 + 更多按钮 -->
+          <!-- 初始3门 -->
           <div v-if="!showFullCourseList">
             <div class="courses-grid">
               <div
                 class="course-card"
-                v-for="(course, index) in initCourses"
+                v-for="course in initCourses"
                 :key="course.id"
                 @click="selectCourse(course)"
                 style="cursor: pointer"
@@ -45,23 +42,18 @@
                 </div>
                 <div class="course-info">
                   <div class="course-subtitle" v-if="course.subtitle">{{ course.subtitle }}</div>
-                  <div class="indicator-dot"></div>
+
                   <p class="course-title">{{ course.title }}</p>
                 </div>
               </div>
             </div>
-
-            <!-- 更多课程按钮（总课程数>3时显示） -->
             <div v-if="totalCount > 3" class="more-btn-container">
-              <button class="more-btn" @click="toggleFullCourseList">
-                更多线上课程
-              </button>
+              <button class="more-btn" @click="toggleFullCourseList">更多线上课程</button>
             </div>
           </div>
 
-          <!-- 展开状态：完整列表 + 搜索框 + 分页 -->
+          <!-- 完整列表 + 搜索 + 分页 -->
           <div v-else>
-            <!-- 搜索框 -->
             <div class="course-search-section">
               <input
                 type="text"
@@ -70,19 +62,14 @@
                 v-model="searchKeyword"
                 @keyup.enter="handleCourseSearch"
               />
-              <button class="course-search-btn" @click="handleCourseSearch">
-                搜索
-              </button>
+              <button class="course-search-btn" @click="handleCourseSearch">搜索</button>
             </div>
-
-            <!-- 总课程数提示 -->
             <div class="course-count">共 {{ totalCount }} 门课程（搜索关键词：{{ searchKeyword || '无' }}）</div>
 
-            <!-- 课程列表 -->
             <div class="courses-grid">
               <div
                 class="course-card"
-                v-for="(course, index) in onlineCourses"
+                v-for="course in onlineCourses"
                 :key="course.id"
                 @click="selectCourse(course)"
                 style="cursor: pointer"
@@ -98,35 +85,24 @@
               </div>
             </div>
 
-            <!-- 无课程提示 -->
             <div v-if="onlineCourses.length === 0" class="no-course">暂无匹配的课程</div>
 
-            <!-- 分页控制 -->
             <div class="pagination-container">
-              <button
-                v-if="hasMore && !loadingMore"
-                class="load-more-btn"
-                @click="loadNextPage"
-              >
-                加载更多
-              </button>
+              <button v-if="!loadingMore && hasMore" class="load-more-btn" @click="loadNextPage">加载更多</button>
               <div v-if="loadingMore" class="loading-more">加载中...</div>
               <div v-if="!hasMore && onlineCourses.length > 0" class="no-more">没有更多课程了</div>
             </div>
 
-            <!-- 收起按钮 -->
             <div class="collapse-btn-container">
-              <button class="collapse-btn" @click="toggleFullCourseList">
-                收起课程列表
-              </button>
+              <button class="collapse-btn" @click="toggleFullCourseList">收起课程列表</button>
             </div>
           </div>
         </div>
       </div>
 
-      <!-- 线上课程详情页 -->
+      <!-- ==================== 线上课程详情 ==================== -->
       <div v-if="activeTab === 'online' && selectedCourse">
-        <button class="back-button" @click="handleBackToList">← 返回课程列表</button>
+        <button class="back-button" @click="handleBackToList">返回课程列表</button>
 
         <h1 class="course-detail-title">{{ selectedCourse.title }}</h1>
         <p class="course-detail-subtitle">{{ selectedCourse.subtitle }}</p>
@@ -137,92 +113,135 @@
           </div>
           <div class="course-intro">
             <h2>课程介绍</h2>
-            <p class="intro-text">
-              {{ selectedCourse.intro }}
-            </p>
-            <a href="#" class="course-link">请点击这里，访问精品慕课</a>
+            <p class="intro-text">{{ selectedCourse.intro }}</p>
           </div>
         </div>
 
+        <!-- 详情标签 -->
         <div class="course-tabs">
-          <div
-            class="tab-item"
-            :class="{ active: activeDetailTab === 'content' }"
-            @click="activeDetailTab = 'content'"
-          >
-            课程内容
-          </div>
-          <div
-            class="tab-item"
-            :class="{ active: activeDetailTab === 'resource' }"
-            @click="activeDetailTab = 'resource'"
-          >
-            拓展资源
-          </div>
-          <div
-            class="tab-item"
-            :class="{ active: activeDetailTab === 'activity' }"
-            @click="activeDetailTab = 'activity'"
-          >
-            学生活动
-          </div>
-          <div
-            class="tab-item"
-            :class="{ active: activeDetailTab === 'team' }"
-            @click="activeDetailTab = 'team'"
-          >
-            教学团队
-          </div>
+          <div class="tab-item" :class="{ active: activeDetailTab === 'content' }" @click="setActiveTab('content')">课程内容</div>
+          <div class="tab-item" :class="{ active: activeDetailTab === 'resource' }" @click="setActiveTab('resource')">拓展资源</div>
+          <div class="tab-item" :class="{ active: activeDetailTab === 'activity' }" @click="setActiveTab('activity')">学生活动</div>
+          <div class="tab-item" :class="{ active: activeDetailTab === 'team' }" @click="setActiveTab('team')">教学团队</div>
         </div>
 
         <div class="tab-content">
+          <!-- 课程内容 -->
           <div v-if="activeDetailTab === 'content'">
             <div class="course-chapters">
-              <div class="chapter-item">
-                <div class="chapter-title">绪论</div>
-              </div>
-              <div class="chapter-item" @click="toggleChapter(1)">
-                <div class="chapter-title">1 课程导学</div>
-                <div class="chapter-arrow">{{ chapters[1].expanded ? '▲' : '▼' }}</div>
-                <div class="sub-chapters" v-if="chapters[1].expanded">
-                  <div class="sub-chapter">1.1 课程介绍与目标</div>
-                  <div class="sub-chapter">1.2 学习方法与考核方式</div>
-                </div>
-              </div>
-              <div class="chapter-item" @click="toggleChapter(2)">
-                <div class="chapter-title">2 第一章 信息设计概述</div>
-                <div class="chapter-arrow">{{ chapters[2].expanded ? '▲' : '▼' }}</div>
-                <div class="sub-chapters" v-if="chapters[2].expanded">
-                  <div class="sub-chapter">2.1 信息设计定义</div>
-                  <div class="sub-chapter">2.2 信息设计历史发展</div>
+              <div v-if="loadingChapters" class="loading">加载中...</div>
+              <div v-if="chapterError" class="error-msg">暂无数据</div>
+              <div v-if="!loadingChapters && !chapterError">
+                <div v-for="chapter in courseChapters" :key="chapter.id" class="chapter-wrapper">
+                  <div class="chapter-item" @click="toggleChapter(chapter.id)">
+                    <div class="chapter-header">
+                      <span class="chapter-title">{{ chapter.title }}</span>
+                      <span class="chapter-arrow" v-if="chapter.children?.length">
+                        {{ chapters[chapter.id]?.expanded ? '↑' : '↓' }}
+                      </span>
+                    </div>
+                  </div>
+                  <div v-if="chapters[chapter.id]?.expanded && chapter.children?.length" class="sub-chapters-container">
+                    <div v-for="sub in chapter.children.sort((a,b)=>a.sort-b.sort)" :key="sub.id" class="sub-chapter-item">
+                      <div class="sub-chapter-title">{{ sub.title }}</div>
+                      <div v-if="sub.children?.length" class="grand-children-container">
+                        <div v-for="grand in sub.children.sort((a,b)=>a.sort-b.sort)" :key="grand.id" class="grand-child-title">
+                          {{ grand.title }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
+                <div v-if="courseChapters.length === 0" class="no-course">暂无课程章节数据</div>
               </div>
             </div>
           </div>
+
+          <!-- 拓展资源 -->
           <div v-if="activeDetailTab === 'resource'">
-            <div class="resource-list">
-              <h3>课程资料</h3>
-              <ul>
-                <li>课程大纲与教学计划.pdf</li>
-                <li>信息设计案例集.zip</li>
-              </ul>
-            </div>
-          </div>
-          <div v-if="activeDetailTab === 'activity'">
-            <div class="activity-list">
-              <div class="activity-item">
-                <h3>信息设计大赛</h3>
-                <p>面向全体学员的信息设计作品比赛，优秀作品将获得证书和奖品。</p>
+            <div class="resource-section">
+              <div v-if="loadingResources" class="loading">加载中...</div>
+              <div v-if="resourceError" class="error-msg">暂无数据</div>
+              <div v-if="!loadingResources && !resourceError">
+                <div class="resource-list">
+                  <div
+                    v-for="item in resourceList"
+                    :key="item.id"
+                    class="resource-item"
+                    @click="openResource(item.resource_url)"
+                    :title="`点击下载：${getDisplayTitle(item)}`"
+                  >
+                    <span class="resource-title">{{ getDisplayTitle(item) }}</span>
+                    <span class="download-icon">Download</span>
+                  </div>
+                </div>
+                <div v-if="resourceList.length === 0" class="no-course">暂无拓展资源</div>
+                <div class="pagination-container">
+                  <button v-if="hasMoreResources && !loadingMoreResources" class="load-more-btn" @click="loadMoreResources">
+                    加载更多
+                  </button>
+                  <div v-if="loadingMoreResources" class="loading-more">加载中...</div>
+                  <div v-if="!hasMoreResources && resourceList.length > 0" class="no-more"></div>
+                </div>
               </div>
             </div>
           </div>
+
+          <!-- 学生活动 -->
+          <div v-if="activeDetailTab === 'activity'">
+            <div class="activity-section">
+              <div v-if="loadingActivities" class="loading">加载中...</div>
+              <div v-if="activityError" class="error-msg">暂无数据</div>
+              <div v-if="!loadingActivities && !activityError">
+                <div class="activity-list">
+                  <div v-for="act in activityList" :key="act.id" class="activity-item">
+                    <h3 class="activity-title">{{ act.title }}</h3>
+                    <p class="activity-content">{{ act.content }}</p>
+                    <div class="activity-time">
+                      <span class="time-label">时间：</span>
+                      {{ formatTime(act.start_time) }} — {{ formatTime(act.end_time) }}
+                    </div>
+                  </div>
+                </div>
+                <div v-if="activityList.length === 0" class="no-course">暂无学生活动</div>
+                <div class="pagination-container">
+                  <button v-if="hasMoreActivities && !loadingMoreActivities" class="load-more-btn" @click="loadMoreActivities">
+                    加载更多
+                  </button>
+                  <div v-if="loadingMoreActivities" class="loading-more">加载中...</div>
+                  <div v-if="!hasMoreActivities && activityList.length > 0" class="no-more"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 教学团队 -->
           <div v-if="activeDetailTab === 'team'">
-            <div class="team-members">
-              <div class="member-item">
-                <div class="member-photo"></div>
-                <div class="member-info">
-                  <h3>王教授 - 课程负责人</h3>
-                  <p>武汉理工大学设计学院教授，博士生导师</p>
+            <div class="team-section">
+              <div v-if="loadingTeachers" class="loading">加载中...</div>
+              <div v-if="teacherError" class="error-msg">暂无数据</div>
+              <div v-if="!loadingTeachers && !teacherError">
+                <div class="team-members">
+                  <div v-for="teacher in teacherList" :key="teacher.id" class="member-item">
+                    <div class="member-photo">
+                      <img :src="teacher.avatar" :alt="teacher.name" class="avatar-img" @error="onAvatarError">
+                    </div>
+                    <div class="member-info">
+                      <h3 class="member-name">
+                        {{ teacher.name }}
+                        <span class="member-title">{{ teacher.title }}</span>
+                      </h3>
+                      <p class="member-intro">{{ teacher.intro }}</p>
+                    </div>
+                  </div>
+                </div>
+                <div v-if="teacherList.length === 0" class="no-course">暂无教学团队信息</div>
+                <div class="pagination-container">
+                  <button v-if="hasMoreTeachers && !loadingMoreTeachers" class="load-more-btn" @click="loadMoreTeachers">
+                    加载更多
+                  </button>
+                  <div v-if="loadingMoreTeachers" class="loading-more">加载中...</div>
+                  <div v-if="!hasMoreTeachers && teacherList.length > 0" class="no-more"></div>
                 </div>
               </div>
             </div>
@@ -230,219 +249,187 @@
         </div>
       </div>
 
-      <!-- 教学案例列表页（仅显示指定字段） -->
+      <!-- ==================== 教学案例列表（每行一整行） ==================== -->
       <div v-if="activeTab === 'teaching' && !selectedCase">
         <h2 class="section-title">教学案例</h2>
-        <div class="search-section">
-          <input
-            type="text"
-            class="search-input"
-            placeholder="输入关键词搜索案例..."
-            v-model="teachingSearchKeyword"
-            @keyup.enter="handleTeachingSearch"
-          />
-          <button class="search-btn" @click="handleTeachingSearch">搜索</button>
-          <button class="video-case-btn" @click="handleTabChange('video')">视频案例</button>
-        </div>
 
-        <!-- 加载状态 -->
-        <div v-if="loadingTeaching" class="loading">加载中...</div>
+        <div v-if="caseLoading" class="loading">加载中...</div>
+        <div v-if="caseError" class="error-msg">暂无数据</div>
 
-        <!-- 错误提示 -->
-        <div v-if="teachingErrorMsg" class="error-msg">{{ teachingErrorMsg }}</div>
-
-        <!-- 案例列表 -->
-        <div v-if="!loadingTeaching && !teachingErrorMsg">
-          <div class="list-header">
-            <span>共 {{ totalTeachingCases }} 篇案例（搜索关键词：{{ teachingSearchKeyword || '无' }}）</span>
-            <div class="list-controls">
-              <span>排序：最新发布</span>
-              <span> | 每页显示：</span>
-              <select class="show-count" v-model="teachingPageSize" @change="handlePageSizeChange">
-                <option value="10">10条</option>
-                <option value="20">20条</option>
-                <option value="50">50条</option>
-              </select>
-            </div>
+        <div v-else>
+          <div class="case-search-section">
+            <input
+              type="text"
+              class="case-search-input"
+              placeholder="输入关键词搜索案例..."
+              v-model="caseKeyword"
+              @keyup.enter="searchCases"
+            />
+            <button class="case-search-btn" @click="searchCases">搜索</button>
           </div>
 
-          <div
-            class="case-item"
-            v-for="(caseItem, index) in teachingCases"
-            :key="caseItem.id"
-            @click="selectCase(caseItem)"
-          >
-            <!-- 仅显示指定字段：title, tutor_name, tutor_title, student_names, cover_url, create_time -->
-            <div class="case-header">
-              <img :src="caseItem.cover_url" :alt="caseItem.title" class="case-cover">
-              <h3 class="case-title">{{ caseItem.title }}</h3>
-            </div>
-            <div class="case-meta-info">
-              <div class="tutor-info">
-                <strong>指导教师：</strong> {{ caseItem.tutor_name }}（{{ caseItem.tutor_title }}）
-              </div>
-              <div class="student-info">
-                <strong>学生团队：</strong> {{ caseItem.student_names }}
-              </div>
-              <div class="create-time">
-                <strong>发布时间：</strong> {{ caseItem.create_time }}
-              </div>
-            </div>
-          </div>
-
-          <!-- 无案例提示 -->
-          <div v-if="teachingCases.length === 0 && !loadingTeaching" class="no-course">暂无匹配的教学案例</div>
-
-          <!-- 分页控制 -->
-          <div class="pagination-container">
-            <button
-              v-if="hasMoreTeaching && !loadingTeaching"
-              class="load-more-btn"
-              @click="loadMoreTeachingCases"
+          <!-- 每行一整行 -->
+          <div class="case-list">
+            <div
+              v-for="item in caseList"
+              :key="item.id"
+              class="case-item"
+              @click="selectCase(item)"
             >
+              <div class="case-poster">
+                <img :src="item.cover_url" :alt="item.title" class="case-thumbnail">
+              </div>
+              <div class="case-info">
+                <h3 class="case-title">{{ item.title }}</h3>
+                <div class="case-meta">
+                  <span>导师：{{ item.tutor_name }}（{{ item.tutor_title }}）</span>
+                  <span class="separator">|</span>
+                  <span v-if="item.student_names">学生：{{ item.student_names }}</span>
+                  <span class="separator">|</span>
+                  <span>发布时间：{{ formatDate(item.create_time) }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="caseList.length === 0" class="no-course">暂无匹配的教学案例</div>
+
+          <div class="pagination-container">
+            <button v-if="!caseLoadingMore && caseHasMore" class="load-more-btn" @click="loadMoreCases">
               加载更多
             </button>
-            <div v-if="loadingTeachingMore" class="loading-more">加载中...</div>
-            <div v-if="!hasMoreTeaching && teachingCases.length > 0" class="no-more">没有更多案例了</div>
+            <div v-if="caseLoadingMore" class="loading-more">加载中...</div>
+            <div v-if="!caseHasMore && caseList.length > 0" class="no-more"></div>
           </div>
         </div>
       </div>
 
-      <!-- 教学案例详情页 -->
+      <!-- ==================== 教学案例详情 ==================== -->
       <div v-if="activeTab === 'teaching' && selectedCase">
-        <button class="back-button" @click="selectedCase = null">← 返回列表</button>
+        <button class="back-button" @click="backToCaseList">返回案例列表</button>
 
-        <div class="case-detail-header">
-          <img :src="selectedCase.cover_url" :alt="selectedCase.title" class="detail-cover">
-          <h1 class="detail-title">{{ selectedCase.title }}</h1>
-        </div>
+        <h1 class="case-detail-title">{{ selectedCase.title }}</h1>
 
-        <div class="case-detail-meta">
-          <div class="detail-tutor">
-            <strong>指导教师：</strong> {{ selectedCase.tutor_name }}（{{ selectedCase.tutor_title }}）
+        <div class="case-header">
+          <div class="case-cover">
+            <img :src="selectedCase.cover_url" :alt="selectedCase.title" class="case-cover-img">
           </div>
-          <div class="detail-students">
-            <strong>学生团队：</strong> {{ selectedCase.student_names }}
-          </div>
-          <div class="detail-time">
-            <strong>发布时间：</strong> {{ selectedCase.create_time }} |
-            <strong>最后更新：</strong> {{ selectedCase.update_time }}
+          <div class="case-meta">
+            <p><strong>导师：</strong>{{ selectedCase.tutor_name }}（{{ selectedCase.tutor_title }}）</p>
+            <p v-if="selectedCase.student_names"><strong>学生：</strong>{{ selectedCase.student_names }}</p>
+            <p><strong>发布时间：</strong>{{ formatDate(selectedCase.create_time) }}</p>
+            <p><strong>更新时间：</strong>{{ formatDate(selectedCase.update_time) }}</p>
           </div>
         </div>
 
-        <div class="case-detail-content" v-html="selectedCase.content"></div>
+        <div class="case-content" v-html="selectedCase.content"></div>
       </div>
 
-      <!-- 视频案例内容（支持分页、搜索、显示完整intro、点击观看） -->
-      <div v-if="activeTab === 'video'">
+      <!-- ==================== 视频案例列表（每行一整行） ==================== -->
+      <div v-if="activeTab === 'video' && !playingVideo">
         <h2 class="section-title">视频案例</h2>
 
-        <!-- 搜索框区域 -->
-        <div class="search-section">
-          <input
-            type="text"
-            class="search-input"
-            placeholder="输入关键词搜索视频案例..."
-            v-model="videoSearchKeyword"
-            @keyup.enter="handleVideoSearch"
-          />
-          <button class="search-btn" @click="handleVideoSearch">搜索</button>
-          <button class="teaching-case-btn" @click="handleTabChange('teaching')">教学案例</button>
-        </div>
+        <div v-if="videoLoading" class="loading">加载中...</div>
+        <div v-if="videoError" class="error-msg">暂无数据</div>
 
-        <!-- 加载状态 -->
-        <div v-if="loadingVideo" class="loading">加载中...</div>
+        <div v-else>
+          <div class="video-search-section">
+            <input
+              type="text"
+              class="video-search-input"
+              placeholder="输入关键词搜索视频案例..."
+              v-model="videoKeyword"
+              @keyup.enter="searchVideos"
+            />
+            <button class="video-search-btn" @click="searchVideos">搜索</button>
+          </div>
 
-        <!-- 错误提示 -->
-        <div v-if="videoErrorMsg" class="error-msg">{{ videoErrorMsg }}</div>
-
-        <!-- 视频案例列表 -->
-        <div v-if="!loadingVideo && !videoErrorMsg">
-          <!-- 总数量提示 -->
-          <div class="course-count">共 {{ totalVideoCases }} 个视频案例（搜索关键词：{{ videoSearchKeyword || '无' }}）</div>
-
-          <!-- 视频列表（一整行布局） -->
-          <div class="video-cases-list">
+          <div class="video-list">
             <div
-              class="video-case-row"
-              v-for="(video, index) in videoCases"
-              :key="video.id"
-              @click="handleVideoPlay(video.video_url)"
+              v-for="item in videoList"
+              :key="item.id"
+              class="video-item"
+              @click="playVideo(item)"
             >
-              <div class="video-thumbnail-container">
-                <!-- 视频封面 -->
-                <img
-                  :src="video.cover_url || 'https://p11-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/883f8fd9c41041be852be422c3cd21dd.png~tplv-a9rns2rl98-resize-jpeg-v1.png'"
-                  :alt="video.title"
+              <div class="video-poster">
+                <video
+                  :src="item.video_url"
                   class="video-thumbnail"
-                >
-                <!-- 播放按钮 -->
-                <div class="play-button">
-                  <div class="play-icon">▶</div>
-                </div>
+                  muted
+                  preload="metadata"
+                  @loadeddata="onVideoLoaded"
+                ></video>
+                <div class="play-icon">Play</div>
               </div>
-
               <div class="video-info">
-                <h3 class="video-title">{{ video.title }}</h3>
-
-                <!-- 完整显示intro字段 -->
-                <div class="video-intro">
-                  {{ video.intro }}
-                </div>
-
-                <!-- 视频元信息 -->
+                <h3 class="video-title">{{ item.title }}</h3>
+                <p class="video-intro">{{ item.intro }}</p>
                 <div class="video-meta">
-                  <div class="meta-item">
-                    <strong>设计团队：</strong> {{ video.designer_names }}
-                  </div>
-                  <div class="meta-item">
-                    <strong>指导老师：</strong> {{ video.tutor_names }}
-                  </div>
-                  <div class="meta-item">
-                    <strong>发布时间：</strong> {{ video.create_time }}
-                  </div>
+                  <span>设计师：{{ item.designer_names }}</span>
+                  <span class="separator">|</span>
+                  <span>导师：{{ item.tutor_names }}</span>
+                  <span class="separator">|</span>
+                  <span>发布时间：{{ formatDate(item.create_time) }}</span>
                 </div>
               </div>
             </div>
           </div>
 
-          <!-- 无视频提示 -->
-          <div v-if="videoCases.length === 0" class="no-course">暂无匹配的视频案例</div>
+          <div v-if="videoList.length === 0" class="no-course">暂无匹配的视频案例</div>
 
-          <!-- 分页控制 -->
           <div class="pagination-container">
-            <button
-              v-if="hasMoreVideo && !loadingVideoMore"
-              class="load-more-btn"
-              @click="loadMoreVideoCases"
-            >
+            <button v-if="!videoLoadingMore && videoHasMore" class="load-more-btn" @click="loadMoreVideos">
               加载更多
             </button>
-            <div v-if="loadingVideoMore" class="loading-more">加载中...</div>
-            <div v-if="!hasMoreVideo && videoCases.length > 0" class="no-more">没有更多视频了</div>
+            <div v-if="videoLoadingMore" class="loading-more">加载中...</div>
+            <div v-if="!videoHasMore && videoList.length > 0" class="no-more"></div>
           </div>
         </div>
       </div>
+
+      <!-- ==================== 视频播放页 ==================== -->
+      <div v-if="activeTab === 'video' && playingVideo">
+        <button class="back-button" @click="backToVideoList">返回视频列表</button>
+
+        <div class="video-player-container">
+          <video
+            :src="playingVideo.video_url"
+            class="full-video"
+            controls
+            autoplay
+            @error="onVideoError"
+          ></video>
+        </div>
+
+        <div class="video-detail-info">
+          <h1 class="video-detail-title">{{ playingVideo.title }}</h1>
+          <p class="video-detail-intro">{{ playingVideo.intro }}</p>
+          <div class="video-detail-meta">
+            <p><strong>设计师：</strong>{{ playingVideo.designer_names }}</p>
+            <p><strong>导师：</strong>{{ playingVideo.tutor_names }}</p>
+            <p><strong>发布时间：</strong>{{ formatDate(playingVideo.create_time) }}</p>
+            <p><strong>更新时间：</strong>{{ formatDate(playingVideo.update_time) }}</p>
+          </div>
+        </div>
+      </div>
+
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from 'vue';
-import { marked } from 'marked';
+import { ref, onMounted } from 'vue';
 import axios from 'axios';
 
-// 导航标签状态管理
+// ==================== 全局状态 ====================
 const activeTab = ref('online');
 const selectedCourse = ref(null);
 const selectedCase = ref(null);
+const playingVideo = ref(null);
 const activeDetailTab = ref('content');
-const chapters = ref({
-  1: { expanded: false },
-  2: { expanded: true }
-});
+const chapters = ref({});
 
-// 线上课程核心状态
+// 线上课程
 const onlineCourses = ref([]);
 const initCourses = ref([]);
 const currentPage = ref(1);
@@ -455,1113 +442,550 @@ const errorMsg = ref('');
 const showFullCourseList = ref(false);
 const searchKeyword = ref('');
 
-// 教学案例核心状态
-const teachingCases = ref([]);
-const currentTeachingPage = ref(1);
-const teachingPageSize = ref(10);
-const totalTeachingCases = ref(0);
-const hasMoreTeaching = ref(true);
-const loadingTeaching = ref(false);
-const loadingTeachingMore = ref(false);
-const teachingSearchKeyword = ref('');
-const teachingErrorMsg = ref('');
+// 教学案例
+const caseList = ref([]);
+const casePage = ref(1);
+const caseSize = 20;
+const caseTotal = ref(0);
+const caseHasMore = ref(true);
+const caseLoading = ref(false);
+const caseLoadingMore = ref(false);
+const caseError = ref('');
+const caseKeyword = ref('');
 
-// 视频案例核心状态
-const videoCases = ref([]); // 视频案例列表数据
-const currentVideoPage = ref(1); // 当前页码
-const videoPageSize = ref(10); // 每页条数
-const totalVideoCases = ref(0); // 总条数
-const hasMoreVideo = ref(true); // 是否有更多数据
-const loadingVideo = ref(false); // 初始加载状态
-const loadingVideoMore = ref(false); // 加载更多状态
-const videoSearchKeyword = ref(''); // 搜索关键词
-const videoErrorMsg = ref(''); // 错误提示
+// 视频案例
+const videoList = ref([]);
+const videoPage = ref(1);
+const videoSize = 10;
+const videoTotal = ref(0);
+const videoHasMore = ref(true);
+const videoLoading = ref(false);
+const videoLoadingMore = ref(false);
+const videoError = ref('');
+const videoKeyword = ref('');
 
-// 切换顶部标签
+// 课程详情
+const courseChapters = ref([]);
+const loadingChapters = ref(false);
+const chapterError = ref('');
+const resourceList = ref([]);
+const resourcePage = ref(1);
+const resourcePageSize = 20;
+const hasMoreResources = ref(true);
+const loadingResources = ref(false);
+const loadingMoreResources = ref(false);
+const resourceError = ref('');
+const activityList = ref([]);
+const activityPage = ref(1);
+const activityPageSize = 10;
+const hasMoreActivities = ref(true);
+const loadingActivities = ref(false);
+const loadingMoreActivities = ref(false);
+const activityError = ref('');
+const teacherList = ref([]);
+const teacherPage = ref(1);
+const teacherPageSize = 10;
+const hasMoreTeachers = ref(true);
+const loadingTeachers = ref(false);
+const loadingMoreTeachers = ref(false);
+const teacherError = ref('');
+const currentCourseId = ref(null);
+
+// ==================== 工具函数 ====================
+const formatDate = (time) => (time ? time.split(' ')[0] : '');
+const formatTime = (timeStr) => (timeStr ? timeStr.split('.')[0].replace(' ', ' ') : '');
+const onAvatarError = (e) => { e.target.src = 'https://via.placeholder.com/80?text=头像'; };
+const onVideoError = (e) => { console.error('视频加载失败:', e); alert('视频加载失败'); };
+const onVideoLoaded = (e) => { e.target.currentTime = 0.1; };
+
+const getFileExtension = (url) => {
+  if (!url) return '';
+  const fileName = url.split('/').pop().split('?')[0];
+  const parts = fileName.split('.');
+  return parts.length > 1 ? parts.pop().toLowerCase() : '';
+};
+const getDisplayTitle = (item) => {
+  const ext = getFileExtension(item.resource_url);
+  return ext ? `${item.title}.${ext}` : item.title;
+};
+const openResource = (url) => { if (url) window.open(url, '_blank'); };
+
+// ==================== 统一 tab 切换 ====================
+const setActiveTab = (tab) => {
+  if (activeDetailTab.value === tab) return;
+  activeDetailTab.value = tab;
+  if (!selectedCourse.value) return;
+  const courseId = selectedCourse.value.id;
+  if (tab === 'resource' && (resourceList.value.length === 0 || currentCourseId.value !== courseId)) fetchResources(1, true);
+  if (tab === 'activity' && (activityList.value.length === 0 || currentCourseId.value !== courseId)) fetchActivities(1, true);
+  if (tab === 'team' && (teacherList.value.length === 0 || currentCourseId.value !== courseId)) fetchTeachers(1, true);
+};
+
+// ==================== 导航切换 ====================
 const handleTabChange = (tab) => {
   activeTab.value = tab;
   selectedCourse.value = null;
   selectedCase.value = null;
-
-  // 切换到教学案例时加载数据
-  if (tab === 'teaching' && teachingCases.value.length === 0) {
-    fetchTeachingCases(1, true);
-  }
-
-  // 切换到线上课程且未加载过数据时初始化
-  if (tab === 'online' && onlineCourses.value.length === 0) {
-    initOnlineCourses();
-  }
-
-  // 切换到视频案例时加载数据
-  if (tab === 'video' && videoCases.value.length === 0) {
-    fetchVideoCases(1, true);
-  }
+  playingVideo.value = null;
+  currentCourseId.value = null;
+  if (tab === 'online' && onlineCourses.value.length === 0) initOnlineCourses();
+  if (tab === 'teaching' && caseList.value.length === 0) initCases();
+  if (tab === 'video' && videoList.value.length === 0) initVideos();
 };
 
-// 初始化线上课程
+// ==================== 线上课程 ====================
 const initOnlineCourses = async () => {
   loadingInit.value = true;
-  errorMsg.value = '';
   try {
-    const res = await fetchCoursePage(1, searchKeyword.value);
+    const res = await fetchCoursePage(1, '');
     onlineCourses.value = res.list;
     totalCount.value = res.total;
     currentPage.value = 1;
     hasMore.value = currentPage.value * pageSize.value < totalCount.value;
     initCourses.value = onlineCourses.value.slice(0, 3);
-  } catch (err) {
-    errorMsg.value = '课程加载失败，请稍后重试';
-    console.error('初始化课程失败：', err);
-  } finally {
-    loadingInit.value = false;
-  }
+  } catch { errorMsg.value = '加载失败'; } finally { loadingInit.value = false; }
 };
 
-// 线上课程请求函数
 const fetchCoursePage = async (page, keyword) => {
-  const params = {
-    page: page,
-    size: pageSize.value,
-    status: 1,
-    keyword: keyword || ''
-  };
-  const response = await axios.post('http://localhost:8080/api/courses/list', params);
-  const data = response.data;
-  if (!data || typeof data.total !== 'number' || !Array.isArray(data.list)) {
-    throw new Error('课程接口返回格式异常');
-  }
+  const { data } = await axios.post('http://localhost:8080/api/courses/list', {
+    page, size: pageSize.value, status: 1, keyword: keyword || ''
+  });
+  if (!data?.list) throw new Error();
   return data;
 };
 
-// 线上课程搜索
 const handleCourseSearch = async () => {
   loadingInit.value = true;
-  errorMsg.value = '';
   try {
     const res = await fetchCoursePage(1, searchKeyword.value);
     onlineCourses.value = res.list;
     totalCount.value = res.total;
     currentPage.value = 1;
     hasMore.value = currentPage.value * pageSize.value < totalCount.value;
-  } catch (err) {
-    errorMsg.value = '搜索失败，请稍后重试';
-    console.error('课程搜索失败：', err);
-  } finally {
-    loadingInit.value = false;
-  }
+  } catch { errorMsg.value = '搜索失败'; } finally { loadingInit.value = false; }
 };
 
-// 线上课程加载更多
 const loadNextPage = async () => {
   if (loadingMore.value || !hasMore.value) return;
   loadingMore.value = true;
   try {
-    const nextPage = currentPage.value + 1;
-    const res = await fetchCoursePage(nextPage, searchKeyword.value);
-    onlineCourses.value = [...onlineCourses.value, ...res.list];
-    currentPage.value = nextPage;
+    const res = await fetchCoursePage(currentPage.value + 1, searchKeyword.value);
+    onlineCourses.value.push(...res.list);
+    currentPage.value++;
     hasMore.value = currentPage.value * pageSize.value < totalCount.value;
-  } catch (err) {
-    errorMsg.value = '加载下一页失败，请重试';
-    console.error('加载下一页失败：', err);
-  } finally {
-    loadingMore.value = false;
-  }
+  } catch { errorMsg.value = '加载失败'; } finally { loadingMore.value = false; }
 };
 
-// 切换线上课程列表展开/收起
 const toggleFullCourseList = () => {
   showFullCourseList.value = !showFullCourseList.value;
-  if (showFullCourseList.value && searchKeyword.value) {
-    handleCourseSearch();
-  }
+  if (showFullCourseList.value && searchKeyword.value) handleCourseSearch();
 };
 
-// 教学案例请求函数
-const fetchTeachingCases = async (page, isReset = false) => {
-  if (isReset) {
-    loadingTeaching.value = true;
-  } else {
-    loadingTeachingMore.value = true;
-  }
-  teachingErrorMsg.value = '';
-
+// ==================== 教学案例 ====================
+const initCases = async () => {
+  caseLoading.value = true;
+  caseError.value = '';
   try {
-    const params = {
-      page: page,
-      size: teachingPageSize.value,
-      keyword: teachingSearchKeyword.value || '',
-      sort: 0
-    };
-
-    const response = await axios.post(
-      'http://localhost:8080/api/teaching-cases/list',
-      params
-    );
-    const data = response.data;
-
-    if (!data || typeof data.total !== 'number' || !Array.isArray(data.list)) {
-      throw new Error('教学案例接口返回格式异常');
-    }
-
-    if (isReset) {
-      teachingCases.value = data.list;
-    } else {
-      teachingCases.value = [...teachingCases.value, ...data.list];
-    }
-
-    totalTeachingCases.value = data.total;
-    currentTeachingPage.value = page;
-    hasMoreTeaching.value = currentTeachingPage.value * teachingPageSize.value < totalTeachingCases.value;
-
-  } catch (err) {
-    teachingErrorMsg.value = isReset ? '案例加载失败，请稍后重试' : '加载更多失败，请重试';
-    console.error('教学案例请求失败：', err);
-  } finally {
-    loadingTeaching.value = false;
-    loadingTeachingMore.value = false;
-  }
+    const res = await fetchCasePage(1, caseKeyword.value);
+    caseList.value = res.list;
+    caseTotal.value = res.total;
+    casePage.value = 1;
+    caseHasMore.value = casePage.value * caseSize < caseTotal.value;
+  } catch { caseError.value = '加载失败'; } finally { caseLoading.value = false; }
 };
 
-// 教学案例搜索
-const handleTeachingSearch = () => {
-  fetchTeachingCases(1, true);
+const fetchCasePage = async (page, keyword) => {
+  const { data } = await axios.post('http://localhost:8080/api/teaching-cases/list', {
+    page, size: caseSize, keyword: keyword || '', sort: 0
+  });
+  if (!data?.list || typeof data.total !== 'number') throw new Error();
+  return data;
 };
 
-// 教学案例加载更多
-const loadMoreTeachingCases = () => {
-  if (loadingTeaching.value || loadingTeachingMore.value || !hasMoreTeaching.value) return;
-  fetchTeachingCases(currentTeachingPage.value + 1, false);
-};
-
-// 教学案例每页条数变更
-const handlePageSizeChange = () => {
-  fetchTeachingCases(1, true);
-};
-
-// 视频案例请求函数
-const fetchVideoCases = async (page, isReset = false) => {
-  // 显示加载状态
-  if (isReset) {
-    loadingVideo.value = true;
-  } else {
-    loadingVideoMore.value = true;
-  }
-  videoErrorMsg.value = '';
-
+const searchCases = async () => {
+  caseLoading.value = true;
   try {
-    // 构造请求参数
-    const params = {
-      page: page,
-      size: videoPageSize.value,
-      keyword: videoSearchKeyword.value || '',
-      sort: 0
-    };
+    const res = await fetchCasePage(1, caseKeyword.value);
+    caseList.value = res.list;
+    caseTotal.value = res.total;
+    casePage.value = 1;
+    caseHasMore.value = casePage.value * caseSize < caseTotal.value;
+  } catch { caseError.value = '搜索失败'; } finally { caseLoading.value = false; }
+};
 
-    // 发送POST请求到视频案例接口
-    const response = await axios.post(
-      'http://localhost:8080/api/video-cases/list',
-      params
-    );
-    const data = response.data;
+const loadMoreCases = async () => {
+  if (caseLoadingMore.value || !caseHasMore.value) return;
+  caseLoadingMore.value = true;
+  try {
+    const res = await fetchCasePage(casePage.value + 1, caseKeyword.value);
+    caseList.value.push(...res.list);
+    casePage.value++;
+    caseHasMore.value = casePage.value * caseSize < caseTotal.value;
+  } catch { caseError.value = '加载更多失败'; } finally { caseLoadingMore.value = false; }
+};
 
-    // 验证接口返回格式
-    if (!data || typeof data.total !== 'number' || !Array.isArray(data.list)) {
-      throw new Error('视频案例接口返回格式异常');
+const selectCase = (item) => { selectedCase.value = item; };
+const backToCaseList = () => { selectedCase.value = null; };
+
+// ==================== 视频案例 ====================
+const initVideos = async () => {
+  videoLoading.value = true;
+  videoError.value = '';
+  try {
+    const res = await fetchVideoPage(1, videoKeyword.value);
+    videoList.value = res.list;
+    videoTotal.value = res.total;
+    videoPage.value = 1;
+    videoHasMore.value = videoPage.value * videoSize < videoTotal.value;
+  } catch { videoError.value = '加载失败'; } finally { videoLoading.value = false; }
+};
+
+const fetchVideoPage = async (page, keyword) => {
+  const { data } = await axios.post('http://localhost:8080/api/video-cases/list', {
+    page, size: videoSize, keyword: keyword || '', sort: 0
+  });
+  if (!data?.list || typeof data.total !== 'number') throw new Error();
+  return data;
+};
+
+const searchVideos = async () => {
+  videoLoading.value = true;
+  try {
+    const res = await fetchVideoPage(1, videoKeyword.value);
+    videoList.value = res.list;
+    videoTotal.value = res.total;
+    videoPage.value = 1;
+    videoHasMore.value = videoPage.value * videoSize < videoTotal.value;
+  } catch { videoError.value = '搜索失败'; } finally { videoLoading.value = false; }
+};
+
+const loadMoreVideos = async () => {
+  if (videoLoadingMore.value || !videoHasMore.value) return;
+  videoLoadingMore.value = true;
+  try {
+    const res = await fetchVideoPage(videoPage.value + 1, videoKeyword.value);
+    videoList.value.push(...res.list);
+    videoPage.value++;
+    videoHasMore.value = videoPage.value * videoSize < videoTotal.value;
+  } catch { videoError.value = '加载更多失败'; } finally { videoLoadingMore.value = false; }
+};
+
+const playVideo = (item) => { playingVideo.value = item; };
+const backToVideoList = () => { playingVideo.value = null; };
+
+// ==================== 课程详情 ====================
+const fetchCourseContent = async (id) => {
+  loadingChapters.value = true;
+  try {
+    const { data } = await axios.post('http://localhost:8080/api/course-content/list', { course_id: id, parent_id: 0 });
+    if (data.code === 0 && Array.isArray(data.data)) {
+      courseChapters.value = data.data.sort((a,b)=>a.sort-b.sort);
+      courseChapters.value.forEach(c => chapters.value[c.id] = { expanded: false });
     }
-
-    // 更新数据（重置或追加）
-    if (isReset) {
-      videoCases.value = data.list;
-    } else {
-      videoCases.value = [...videoCases.value, ...data.list];
-    }
-
-    // 更新分页状态
-    totalVideoCases.value = data.total;
-    currentVideoPage.value = page;
-    hasMoreVideo.value = currentVideoPage.value * videoPageSize.value < totalVideoCases.value;
-
-  } catch (err) {
-    videoErrorMsg.value = isReset ? '视频加载失败，请稍后重试' : '加载更多失败，请重试';
-    console.error('视频案例请求失败：', err);
-  } finally {
-    // 关闭加载状态
-    loadingVideo.value = false;
-    loadingVideoMore.value = false;
-  }
+  } catch { chapterError.value = '加载失败'; } finally { loadingChapters.value = false; }
 };
 
-// 视频案例搜索
-const handleVideoSearch = () => {
-  // 重置页码并重新加载数据
-  fetchVideoCases(1, true);
+const toggleChapter = (id) => {
+  if (!chapters.value[id]) chapters.value[id] = { expanded: false };
+  chapters.value[id].expanded = !chapters.value[id].expanded;
 };
 
-// 视频案例加载更多
-const loadMoreVideoCases = () => {
-  if (loadingVideo.value || loadingVideoMore.value || !hasMoreVideo.value) return;
-  fetchVideoCases(currentVideoPage.value + 1, false);
+const fetchResources = async (page = 1, reset = false) => {
+  if (reset) { resourceList.value = []; resourcePage.value = 1; hasMoreResources.value = true; resourceError.value = ''; loadingResources.value = true; }
+  else loadingMoreResources.value = true;
+  try {
+    const { data } = await axios.post('http://localhost:8080/api/course-resource/list', {
+      course_id: selectedCourse.value.id, page, page_size: resourcePageSize
+    });
+    if (!data?.list || typeof data.total !== 'number') throw new Error();
+    if (reset) resourceList.value = data.list; else resourceList.value.push(...data.list);
+    resourcePage.value = page;
+    hasMoreResources.value = page * resourcePageSize < data.total;
+    currentCourseId.value = selectedCourse.value.id;
+  } catch { resourceError.value = reset ? '加载失败' : '加载更多失败'; }
+  finally { loadingResources.value = false; loadingMoreResources.value = false; }
 };
 
-// 视频播放处理
-const handleVideoPlay = (videoUrl) => {
-  // 点击后跳转至视频播放页面（新窗口打开）
-  window.open(videoUrl, '_blank');
+const loadMoreResources = () => { if (loadingMoreResources.value || !hasMoreResources.value) return; fetchResources(resourcePage.value + 1); };
+
+const fetchActivities = async (page = 1, reset = false) => {
+  if (reset) { activityList.value = []; activityPage.value = 1; hasMoreActivities.value = true; activityError.value = ''; loadingActivities.value = true; }
+  else loadingMoreActivities.value = true;
+  try {
+    const { data } = await axios.post('http://localhost:8080/api/course-activity/list', {
+      course_id: selectedCourse.value.id, page, page_size: activityPageSize
+    });
+    if (!data || typeof data.total !== 'number' || !Array.isArray(data.list)) throw new Error();
+    if (reset) activityList.value = data.list; else activityList.value.push(...data.list);
+    activityPage.value = page;
+    hasMoreActivities.value = page * activityPageSize < data.total;
+    currentCourseId.value = selectedCourse.value.id;
+  } catch { activityError.value = reset ? '加载失败' : '加载更多失败'; }
+  finally { loadingActivities.value = false; loadingMoreActivities.value = false; }
 };
 
-// 课程详情相关方法
+const loadMoreActivities = () => { if (loadingMoreActivities.value || !hasMoreActivities.value) return; fetchActivities(activityPage.value + 1); };
+
+const fetchTeachers = async (page = 1, reset = false) => {
+  if (reset) { teacherList.value = []; teacherPage.value = 1; hasMoreTeachers.value = true; teacherError.value = ''; loadingTeachers.value = true; }
+  else loadingMoreTeachers.value = true;
+  try {
+    const { data } = await axios.post('http://localhost:8080/api/course-teacher/list', {
+      course_id: selectedCourse.value.id, page, page_size: teacherPageSize
+    });
+    if (!data || typeof data.total !== 'number' || !Array.isArray(data.list)) throw new Error();
+    if (reset) teacherList.value = data.list; else teacherList.value.push(...data.list);
+    teacherPage.value = page;
+    hasMoreTeachers.value = page * teacherPageSize < data.total;
+    currentCourseId.value = selectedCourse.value.id;
+  } catch { teacherError.value = reset ? '加载失败' : '加载更多失败'; }
+  finally { loadingTeachers.value = false; loadingMoreTeachers.value = false; }
+};
+
+const loadMoreTeachers = () => { if (loadingMoreTeachers.value || !hasMoreTeachers.value) return; fetchTeachers(teacherPage.value + 1); };
+
 const selectCourse = (course) => {
   selectedCourse.value = course;
-};
-const handleBackToList = () => {
-  selectedCourse.value = null;
-};
-const toggleChapter = (chapterId) => {
-  chapters.value[chapterId].expanded = !chapters.value[chapterId].expanded;
+  currentCourseId.value = course.id;
+  courseChapters.value = []; resourceList.value = []; activityList.value = []; teacherList.value = []; chapters.value = {};
+  fetchCourseContent(course.id);
+  activeDetailTab.value = 'content';
 };
 
-// 教学案例详情相关方法
-const selectCase = (caseItem) => {
-  selectedCase.value = caseItem;
-};
+const handleBackToList = () => { selectedCourse.value = null; currentCourseId.value = null; };
 
-// 页面挂载时初始化
+// ==================== 初始化 ====================
 onMounted(() => {
-  if (activeTab.value === 'online') {
-    initOnlineCourses();
-  } else if (activeTab.value === 'teaching') {
-    fetchTeachingCases(1, true);
-  } else if (activeTab.value === 'video') {
-    fetchVideoCases(1, true);
-  }
+  if (activeTab.value === 'online') initOnlineCourses();
 });
 </script>
 
 <style scoped>
-/* 全局样式 */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
+/* ==================== 全局样式 ==================== */
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { font-family: "Helvetica Neue", Arial, sans-serif; color: #333; background: #fff; line-height: 1.6; }
 
-body {
-  font-family: "Helvetica Neue", Arial, sans-serif;
-  color: #333;
-  background-color: #fff;
-  line-height: 1.6;
-}
-
-/* 顶部横幅 */
 .banner {
-  background-color: #e0e0e0;
+  background: #e0e0e0;
   height: 220px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 30px;
 }
+.banner h1 { font-size: 2.5rem; color: #333; font-weight: 500; }
 
-.banner h1 {
-  font-size: 2.5rem;
-  color: #333;
-  font-weight: 500;
-}
-
-/* 导航标签 */
-.tabs-container {
-  border-bottom: 1px solid #ddd;
-  padding: 0 20px;
-}
-
-.tabs-wrapper {
-  max-width: 1200px;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  padding: 15px 0;
-}
-
-.breadcrumb {
-  color: #666;
-  font-size: 1rem;
-}
-
-.breadcrumb-separator {
-  margin: 0 10px;
-  color: #999;
-}
-
+.tabs-container { border-bottom: 1px solid #ddd; padding: 0 20px; }
+.tabs-wrapper { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; padding: 15px 0; }
+.breadcrumb { color: #666; font-size: 1rem; }
+.breadcrumb-separator { margin: 0 10px; color: #999; }
 .tab {
-  margin-left: 20px;
-  padding: 5px 10px;
-  color: #666;
-  cursor: pointer;
-  font-size: 1rem;
-  border-bottom: 2px solid transparent;
-  transition: all 0.3s;
+  margin-left: 20px; padding: 5px 10px; color: #666; cursor: pointer;
+  font-size: 1rem; border-bottom: 2px solid transparent; transition: all 0.3s;
 }
+.tab.active { color: #333; border-bottom-color: #333; font-weight: 500; }
+.tab:hover:not(.active) { color: #333; }
 
-.tab.active {
-  color: #333;
-  border-bottom-color: #333;
-  font-weight: 500;
+.content-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
+.section-title { font-size: 1.8rem; color: #333; margin: 0 0 40px; text-align: center; }
+
+.loading { text-align: center; font-size: 1.2rem; color: #666; padding: 50px 0; }
+.error-msg { text-align: center; font-size: 1.2rem; padding: 50px 0; }
+
+.courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 30px; }
+.course-card { cursor: pointer; transition: transform 0.3s; }
+.course-card:hover { transform: translateY(-5px); }
+.course-image { position: relative; background: #f0f0f0; margin-bottom: 15px; overflow: hidden; }
+.course-thumbnail { width: 100%; height: 200px; object-fit: cover; transition: transform 0.3s; }
+.course-card:hover .course-thumbnail { transform: scale(1.05); }
+.course-info { display: flex; flex-direction: column; }
+.course-subtitle { font-size: 0.9rem; color: #666; margin-bottom: 8px; }
+.indicator-dot { width: 8px; height: 8px; background: #ccc; border-radius: 50%; margin: 10px 0; }
+.course-title { font-size: 1rem; color: #333; font-weight: 500; }
+
+.more-btn-container, .collapse-btn-container, .pagination-container { text-align: center; margin: 20px 0; }
+.more-btn, .collapse-btn, .load-more-btn {
+  padding: 12px 35px; background: #333; color: #fff; border: none; border-radius: 4px;
+  cursor: pointer; font-size: 1.1rem; transition: background 0.3s;
 }
+.more-btn:hover, .collapse-btn:hover, .load-more-btn:hover { background: #555; }
+.collapse-btn { background: #fff; color: #333; border: 1px solid #ddd; }
+.collapse-btn:hover { background: #f5f5f5; }
 
-.tab:hover:not(.active) {
-  color: #333;
+.course-search-section { display: flex; max-width: 600px; margin: 0 auto 25px; }
+.course-search-input { flex: 1; padding: 12px 15px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; font-size: 1rem; }
+.course-search-btn { padding: 12px 25px; background: #333; color: #fff; border: none; border-radius: 0 4px 4px 0; cursor: pointer; }
+.course-search-btn:hover { background: #555; }
+
+.course-count { text-align: center; color: #666; margin-bottom: 20px; }
+.no-course { text-align: center; color: #999; padding: 60px 0; font-size: 1.1rem; }
+
+.back-button { margin-bottom: 30px; padding: 8px 15px; background: #fff; border: 1px solid #ddd; color: #333; cursor: pointer; border-radius: 4px; }
+.back-button:hover { background: #f5f5f5; }
+
+.course-detail-title { font-size: 1.8rem; text-align: center; margin: 0 0 10px; font-weight: 600; }
+.course-detail-subtitle { font-size: 1.2rem; text-align: center; color: #666; margin: 0 0 30px; font-style: italic; }
+
+.course-header { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; margin-bottom: 40px; }
+.video-thumbnail { width: 100%; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
+.course-intro h2 { font-size: 1.5rem; margin: 0 0 20px; }
+.intro-text { font-size: 1rem; line-height: 1.8; color: #555; white-space: pre-line; }
+
+.course-tabs { display: flex; background: #f5f5f5; border-bottom: 1px solid #ddd; margin-bottom: 30px; }
+.tab-item { padding: 12px 20px; color: #666; cursor: pointer; font-size: 1rem; border-bottom: 2px solid transparent; transition: all 0.3s; }
+.tab-item.active { color: #333; border-bottom-color: #333; font-weight: 500; background: #fff; }
+
+/* ==================== 章节样式 ==================== */
+.course-chapters { margin-top: 20px; }
+.chapter-wrapper { margin-bottom: 8px; }
+.chapter-item { padding: 14px 16px; background: #fafafa; border-bottom: 1px solid #eee; border-radius: 6px; cursor: pointer; transition: background 0.2s; }
+.chapter-item:hover { background: #f5f5f5; }
+.chapter-header { display: flex; justify-content: space-between; align-items: center; }
+.chapter-title { font-size: 1rem; font-weight: 500; color: #333; }
+.chapter-arrow { color: #999; font-weight: bold; }
+.sub-chapters-container { margin: 8px 0 0; padding-left: 20px; border-left: 2px solid #e0e0e0; background: #fff; }
+.sub-chapter-item { margin: 10px 0; padding: 8px 12px; background: #f9f9f9; border-radius: 4px; border: 1px solid #f0f0f0; }
+.sub-chapter-title { font-size: 0.95rem; color: #444; position: relative; padding-left: 16px; }
+.sub-chapter-title::before { content: "└"; position: absolute; left: 0; color: #aaa; }
+.grand-children-container { margin-top: 8px; padding-left: 20px; }
+.grand-child-title { font-size: 0.9rem; color: #666; margin: 6px 0; padding-left: 16px; position: relative; }
+.grand-child-title::before { content: "•"; position: absolute; left: 0; color: #ccc; }
+
+/* ==================== 拓展资源样式 ==================== */
+.resource-section { margin-top: 20px; }
+.resource-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
+.resource-item {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 14px 18px; background: #fafafa; border: 1px solid #e0e0e0;
+  border-radius: 8px; cursor: pointer; transition: all 0.2s ease; user-select: none;
 }
-
-/* 内容容器 */
-.content-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 40px 20px;
+.resource-item:hover {
+  background: #f0f7ff; border-color: #3498db; transform: translateY(-1px);
+  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.15);
 }
-
-.section-title {
-  font-size: 1.8rem;
-  color: #333;
-  margin: 0 0 40px;
-  text-align: center;
+.resource-title {
+  font-size: 1rem; color: #2c3e50; font-weight: 500;
+  font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+  letter-spacing: 0.5px;
 }
+.download-icon { font-size: 0.85rem; color: #3498db; font-weight: 600; opacity: 0.8; }
+.resource-item:hover .download-icon { opacity: 1; color: #2980b9; }
 
-/* 加载和错误样式 */
-.loading {
-  text-align: center;
-  font-size: 1.2rem;
-  color: #666;
-  padding: 50px 0;
+/* ==================== 学生活动样式 ==================== */
+.activity-section { margin-top: 20px; }
+.activity-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; }
+.activity-item {
+  background: #fafafa; border: 1px solid #e0e0e0; border-radius: 8px;
+  padding: 18px; transition: all 0.2s ease;
 }
-
-.error-msg {
-  text-align: center;
-  font-size: 1.2rem;
-  color: #e74c3c;
-  padding: 50px 0;
+.activity-item:hover {
+  background: #f5f9ff; border-color: #3498db;
+  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.12);
 }
+.activity-title { font-size: 1.1rem; font-weight: 600; color: #2c3e50; margin: 0 0 10px; }
+.activity-content { font-size: 1rem; color: #444; line-height: 1.7; margin: 0 0 12px; white-space: pre-line; }
+.activity-time { font-size: 0.9rem; color: #7f8c8d; }
+.time-label { font-weight: 500; color: #555; }
 
-/* 课程卡片样式 */
-.courses-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 30px;
-  margin-bottom: 30px;
+/* ==================== 教学团队样式 ==================== */
+.team-section { margin-top: 20px; }
+.team-members { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
+.member-item {
+  display: flex; align-items: flex-start; background: #fafafa;
+  border: 1px solid #e0e0e0; border-radius: 8px; padding: 18px;
+  transition: all 0.2s ease;
 }
-
-.course-card {
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-  transition: transform 0.3s;
-  height: 100%;
+.member-item:hover {
+  background: #f5f9ff; border-color: #3498db;
+  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.12);
 }
-
-.course-card:hover {
-  transform: translateY(-5px);
+.member-photo {
+  flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%;
+  overflow: hidden; margin-right: 18px; background: #eee;
 }
+.avatar-img { width: 100%; height: 100%; object-fit: cover; }
+.member-info { flex: 1; }
+.member-name { font-size: 1.1rem; font-weight: 600; color: #2c3e50; margin: 0 0 6px; }
+.member-title { font-size: 0.95rem; color: #7f8c8d; font-weight: normal; margin-left: 8px; }
+.member-intro { font-size: 1rem; color: #444; line-height: 1.7; margin: 0; white-space: pre-line; }
 
-.course-image {
-  position: relative;
-  background-color: #f0f0f0;
-  margin-bottom: 15px;
-  overflow: hidden;
-}
-
-.course-thumbnail {
-  width: 100%;
-  display: block;
-  height: 200px;
-  object-fit: cover;
-  transition: transform 0.3s;
-}
-
-.course-card:hover .course-thumbnail {
-  transform: scale(1.05);
-}
-
-.course-info {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.course-subtitle {
-  font-size: 0.9rem;
-  color: #666;
-  margin-bottom: 8px;
-  line-height: 1.4;
-}
-
-.indicator-dot {
-  width: 8px;
-  height: 8px;
-  background-color: #ccc;
-  border-radius: 50%;
-  margin: 10px 0;
-}
-
-.course-title {
-  font-size: 1rem;
-  color: #333;
-  margin: 0 0 10px;
-  line-height: 1.5;
-  font-weight: 500;
-}
-
-/* 初始状态-更多按钮 */
-.more-btn-container {
-  text-align: center;
-  margin: 20px 0 40px;
-}
-
-.more-btn {
-  padding: 12px 35px;
-  background-color: #333;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 1.1rem;
-  transition: background-color 0.3s;
-}
-
-.more-btn:hover {
-  background-color: #555;
-}
-
-/* 搜索框样式 */
-.course-search-section, .search-section {
-  display: flex;
-  align-items: center;
-  margin-bottom: 25px;
-  max-width: 600px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.search-section {
-  max-width: 800px;
-}
-
-.course-search-input, .search-input {
-  flex: 1;
-  padding: 12px 15px;
-  border: 1px solid #ddd;
-  border-radius: 4px 0 0 4px;
-  font-size: 1rem;
-  outline: none;
-}
-
-.course-search-input:focus, .search-input:focus {
-  border-color: #333;
-}
-
-.course-search-btn, .search-btn {
-  padding: 12px 25px;
-  background-color: #333;
-  color: #fff;
-  border: none;
-  border-radius: 0 4px 4px 0;
-  cursor: pointer;
-  font-size: 1rem;
-  transition: background-color 0.3s;
-}
-
-.course-search-btn:hover, .search-btn:hover {
-  background-color: #555;
-}
-
-.video-case-btn, .teaching-case-btn {
-  padding: 12px 20px;
-  background-color: #fff;
-  color: #333;
-  border: 1px solid #ddd;
-  cursor: pointer;
-  margin-left: 10px;
-  border-radius: 4px;
-  transition: all 0.3s;
-}
-
-.video-case-btn:hover, .teaching-case-btn:hover {
-  background-color: #f5f5f5;
-}
-
-/* 分页相关样式 */
-.course-count {
-  font-size: 0.95rem;
-  color: #666;
-  margin-bottom: 20px;
-  text-align: center;
-}
-
-.no-course {
-  text-align: center;
-  font-size: 1.1rem;
-  color: #999;
-  padding: 60px 0;
-}
-
-.pagination-container {
-  text-align: center;
-  margin: 40px 0 20px;
-}
-
-.load-more-btn {
-  padding: 10px 30px;
-  background-color: #333;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 1rem;
-  transition: background-color 0.3s;
-}
-
-.load-more-btn:hover {
-  background-color: #555;
-}
-
-.loading-more {
-  font-size: 1rem;
-  color: #666;
-  padding: 10px 0;
-}
-
-.no-more {
-  font-size: 1rem;
-  color: #999;
-  padding: 10px 0;
-}
-
-/* 收起按钮 */
-.collapse-btn-container {
-  text-align: center;
-  margin: 30px 0 20px;
-}
-
-.collapse-btn {
-  padding: 10px 25px;
-  background-color: #fff;
-  color: #333;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 1rem;
-  transition: all 0.3s;
-}
-
-.collapse-btn:hover {
-  background-color: #f5f5f5;
-  border-color: #ccc;
-}
-
-/* 课程详情页 */
-.back-button {
-  margin: 0 0 30px;
-  padding: 8px 15px;
-  background-color: #fff;
-  border: 1px solid #ddd;
-  color: #333;
-  cursor: pointer;
-  border-radius: 4px;
-  transition: all 0.3s;
-}
-
-.back-button:hover {
-  background-color: #f5f5f5;
-}
-
-.course-detail-title {
-  font-size: 1.8rem;
-  color: #333;
-  margin: 0 0 10px;
-  text-align: center;
-  font-weight: 600;
-}
-
-.course-detail-subtitle {
-  font-size: 1.2rem;
-  color: #666;
-  text-align: center;
-  margin: 0 0 30px;
-  font-style: italic;
-}
-
-.course-header {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  gap: 30px;
-  margin-bottom: 40px;
-}
-
-.video-thumbnail {
-  width: 100%;
-  height: auto;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-}
-
-.course-intro h2 {
-  font-size: 1.5rem;
-  margin: 0 0 20px;
-}
-
-.intro-text {
-  font-size: 1rem;
-  line-height: 1.8;
-  margin: 0 0 20px;
-  color: #555;
-  white-space: pre-line;
-}
-
-.course-link {
-  color: #3498db;
-  text-decoration: none;
-  font-size: 1rem;
-  transition: color 0.3s;
-}
-
-.course-link:hover {
-  color: #2980b9;
-  text-decoration: underline;
-}
-
-/* 详情页标签样式 */
-.course-tabs {
-  display: flex;
-  background-color: #f5f5f5;
-  border-bottom: 1px solid #ddd;
-  margin-bottom: 30px;
-}
-
-.tab-item {
-  padding: 12px 20px;
-  color: #666;
-  cursor: pointer;
-  font-size: 1rem;
-  border-bottom: 2px solid transparent;
-  transition: all 0.3s;
-}
-
-.tab-item.active {
-  color: #333;
-  border-bottom-color: #333;
-  font-weight: 500;
-  background-color: #fff;
-}
-
-.tab-content {
-  padding: 20px 0;
-}
-
-/* 课程章节样式 */
-.course-chapters {
-  margin-top: 20px;
-}
-
-.chapter-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 15px 0;
-  border-bottom: 1px solid #eee;
-  cursor: pointer;
-}
-
-.chapter-item:hover {
-  background-color: #f9f9f9;
-}
-
-.chapter-title {
-  font-size: 1rem;
-  font-weight: 500;
-}
-
-.chapter-arrow {
-  color: #999;
-}
-
-.sub-chapters {
-  margin: 10px 0 0 20px;
-}
-
-.sub-chapter {
-  font-size: 0.95rem;
-  color: #666;
-  margin: 10px 0;
-  padding-left: 15px;
-  position: relative;
-}
-
-.sub-chapter::before {
-  content: "●";
-  position: absolute;
-  left: 0;
-  color: #ccc;
-}
-
-/* 教学案例样式 */
-.list-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #eee;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.list-controls {
-  color: #666;
-  font-size: 0.9rem;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.show-count {
-  padding: 5px;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-}
+/* ==================== 教学案例（每行一整行） ==================== */
+.case-search-section { display:flex; max-width:600px; margin:0 auto 30px; }
+.case-search-input { flex:1; padding:12px 15px; border:1px solid #ddd; border-radius:4px 0 0 4px; font-size:1rem; }
+.case-search-btn { padding:12px 25px; background:#333; color:#fff; border:none; border-radius:0 4px 4px 0; cursor:pointer; }
+.case-search-btn:hover { background:#555; }
 
+.case-list { display:flex; flex-direction:column; gap:20px; margin-top:20px; }
 .case-item {
-  margin-bottom: 30px;
-  padding: 20px;
-  border: 1px solid #eee;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.3s;
+  display:flex;
+  background:#fafafa;
+  border:1px solid #e0e0e0;
+  border-radius:12px;
+  overflow:hidden;
+  transition:all .3s ease;
+  cursor:pointer;
 }
-
 .case-item:hover {
-  background-color: #f9f9f9;
-  border-color: #ddd;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+  background:#f5f9ff;
+  border-color:#3498db;
+  box-shadow:0 4px 12px rgba(52,152,219,.15);
+  transform:translateY(-2px);
 }
+.case-poster { position:relative; width:280px; flex-shrink:0; background:#000; overflow:hidden; }
+.case-thumbnail { width:100%; height:160px; object-fit:cover; display:block; }
+.case-info { flex:1; padding:20px; display:flex; flex-direction:column; justify-content:center; }
+.case-title { font-size:1.15rem; font-weight:600; color:#2c3e50; margin:0 0 10px; line-height:1.4; }
+.case-meta { display:flex; flex-wrap:wrap; gap:8px; font-size:.85rem; color:#7f8c8d; }
+.case-meta .separator { color:#ccc; }
 
-.case-header {
-  display: flex;
-  align-items: flex-start;
-  gap: 20px;
-  margin-bottom: 15px;
+.case-detail-title { font-size:1.9rem; text-align:center; margin:0 0 20px; font-weight:600; }
+.case-header { display:grid; grid-template-columns:1fr 2fr; gap:30px; margin-bottom:40px; }
+.case-cover { overflow:hidden; border-radius:8px; }
+.case-cover-img { width:100%; max-height:320px; object-fit:cover; }
+.case-content { line-height:1.8; color:#333; font-size:1rem; }
+.case-content >>> p { margin-bottom:1rem; }
+.case-content >>> img { max-width:100%; height:auto; border-radius:4px; margin:1rem 0; }
+
+/* ==================== 视频案例（每行一整行） ==================== */
+.video-search-section { display:flex; max-width:600px; margin:0 auto 30px; }
+.video-search-input { flex:1; padding:12px 15px; border:1px solid #ddd; border-radius:4px 0 0 4px; font-size:1rem; }
+.video-search-btn { padding:12px 25px; background:#333; color:#fff; border:none; border-radius:0 4px 4px 0; cursor:pointer; }
+.video-search-btn:hover { background:#555; }
+
+.video-list { display:flex; flex-direction:column; gap:20px; margin-top:20px; }
+.video-item { display:flex; background:#fafafa; border:1px solid #e0e0e0; border-radius:12px; overflow:hidden; transition:all .3s ease; cursor:pointer; }
+.video-item:hover { background:#f5f9ff; border-color:#3498db; box-shadow:0 4px 12px rgba(52,152,219,.15); transform:translateY(-2px); }
+.video-poster { position:relative; width:280px; flex-shrink:0; background:#000; overflow:hidden; }
+.video-thumbnail { width:100%; height:160px; object-fit:cover; display:block; }
+.play-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; background:rgba(0,0,0,.6); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px; font-weight:bold; pointer-events:none; }
+.play-icon::before { content:"Play"; margin-left:4px; }
+.video-info { flex:1; padding:20px; display:flex; flex-direction:column; justify-content:center; }
+.video-title { font-size:1.15rem; font-weight:600; color:#2c3e50; margin:0 0 10px; line-height:1.4; }
+.video-intro { font-size:.95rem; color:#555; line-height:1.6; margin:0 0 12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
+.video-meta { display:flex; flex-wrap:wrap; gap:8px; font-size:.85rem; color:#7f8c8d; }
+.video-meta .separator { color:#ccc; }
+
+.video-player-container { max-width:1000px; margin:0 auto 30px; background:#000; border-radius:8px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.2); }
+.full-video { width:100%; max-height:560px; display:block; }
+.video-detail-info { max-width:1000px; margin:0 auto; padding:20px; background:#fafafa; border-radius:8px; border:1px solid #e0e0e0; }
+.video-detail-title { font-size:1.9rem; color:#2c3e50; margin:0 0 16px; font-weight:600; }
+.video-detail-intro { font-size:1rem; color:#444; line-height:1.8; margin:0 0 20px; white-space:pre-line; }
+.video-detail-meta p { margin:8px 0; font-size:.95rem; color:#555; }
+
+/* ==================== 响应式 ==================== */
+@media (max-width:992px) {
+  .courses-grid { grid-template-columns:repeat(2,1fr); }
+  .case-item, .video-item { flex-direction:column; }
+  .case-poster, .video-poster { width:100%; height:200px; }
+  .case-thumbnail, .video-thumbnail { height:100%; }
 }
-
-.case-cover {
-  width: 120px;
-  height: 120px;
-  object-fit: cover;
-  border-radius: 4px;
-  flex-shrink: 0;
+@media (max-width:768px) {
+  .course-header, .case-header { grid-template-columns:1fr; }
+  .course-search-section, .case-search-section, .video-search-section { flex-direction:column; }
+  .course-search-input, .case-search-input, .video-search-input,
+  .course-search-btn, .case-search-btn, .video-search-btn { border-radius:4px; width:100%; margin:5px 0; }
 }
-
-.case-title {
-  font-size: 1.3rem;
-  color: #2c3e50;
-  margin: 0;
-  line-height: 1.4;
-}
-
-/* 案例元信息样式 */
-.case-meta-info {
-  color: #666;
-  line-height: 1.8;
-}
-
-.tutor-info, .student-info, .create-time {
-  margin-bottom: 8px;
-  font-size: 0.95rem;
-}
-
-.tutor-info strong,
-.student-info strong,
-.create-time strong {
-  color: #333;
-}
-
-/* 教学案例详情页样式 */
-.case-detail-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: 30px;
-}
-
-.detail-cover {
-  width: 100%;
-  max-width: 600px;
-  height: auto;
-  border-radius: 8px;
-  margin-bottom: 20px;
-}
-
-.detail-title {
-  font-size: 2rem;
-  color: #2c3e50;
-  text-align: center;
-  margin: 0 0 15px;
-}
-
-.case-detail-meta {
-  background-color: #f9f9f9;
-  padding: 15px 20px;
-  border-radius: 8px;
-  margin-bottom: 30px;
-  line-height: 1.8;
-}
-
-.detail-tutor, .detail-students, .detail-time {
-  margin-bottom: 10px;
-}
-
-.case-detail-content {
-  color: #333;
-  line-height: 1.8;
-  font-size: 1rem;
-}
-
-.case-detail-content img {
-  max-width: 100%;
-  height: auto;
-  margin: 20px auto;
-  display: block;
-  border-radius: 4px;
-}
-
-/* 视频案例样式（一整行布局） */
-.video-cases-list {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.video-case-row {
-  display: flex;
-  background-color: #fff;
-  border: 1px solid #eee;
-  border-radius: 8px;
-  overflow: hidden;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.video-case-row:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
-  border-color: #ddd;
-}
-
-.video-thumbnail-container {
-  width: 240px;
-  height: 160px;
-  position: relative;
-  flex-shrink: 0;
-}
-
-.video-thumbnail {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-/* 视频播放按钮样式 */
-.video-thumbnail-container .play-button {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 60px;
-  height: 60px;
-  background-color: rgba(255, 255, 255, 0.8);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.3s;
-  z-index: 10;
-}
-
-.video-case-row:hover .play-button {
-  background-color: #fff;
-  transform: translate(-50%, -50%) scale(1.1);
-}
-
-.video-thumbnail-container .play-icon {
-  font-size: 1.5rem;
-  color: #e74c3c;
-  margin-left: 5px;
-}
-
-.video-info {
-  flex: 1;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-}
-
-.video-title {
-  font-size: 1.2rem;
-  color: #2c3e50;
-  margin: 0 0 15px;
-  line-height: 1.4;
-  font-weight: 500;
-}
-
-/* 完整显示intro字段 */
-.video-intro {
-  font-size: 0.95rem;
-  color: #555;
-  line-height: 1.6;
-  margin: 0 0 20px;
-  flex: 1;
-}
-
-/* 视频元信息样式 */
-.video-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  font-size: 0.85rem;
-  color: #666;
-  padding-top: 10px;
-  border-top: 1px solid #f0f0f0;
-}
-
-.meta-item {
-  display: flex;
-  align-items: center;
-}
-
-.meta-item strong {
-  color: #333;
-  margin-right: 5px;
-}
-
-/* 响应式适配 */
-@media (max-width: 992px) {
-  .courses-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .video-meta {
-    gap: 15px;
-  }
-}
-
-@media (max-width: 768px) {
-  .banner {
-    height: 180px;
-  }
-
-  .banner h1 {
-    font-size: 2rem;
-    text-align: center;
-    padding: 0 20px;
-  }
-
-  .section-title {
-    font-size: 1.5rem;
-  }
-
-  .course-header {
-    grid-template-columns: 1fr;
-  }
-
-  .course-search-section, .search-section {
-    flex-wrap: wrap;
-    max-width: 100%;
-  }
-
-  .course-search-input, .search-input {
-    border-radius: 4px;
-    width: 100%;
-    margin-bottom: 10px;
-  }
-
-  .course-search-btn, .search-btn {
-    border-radius: 4px;
-    width: 100%;
-  }
-
-  .video-case-btn, .teaching-case-btn {
-    width: 100%;
-    margin: 10px 0 0;
-  }
-
-  .list-header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .case-header {
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .case-cover {
-    width: 100%;
-    height: auto;
-    max-width: 300px;
-  }
-
-  /* 视频案例响应式调整 */
-  .video-case-row {
-    flex-direction: column;
-  }
-
-  .video-thumbnail-container {
-    width: 100%;
-    height: 200px;
-  }
-
-  .video-meta {
-    flex-direction: column;
-    gap: 5px;
-  }
-}
-
-@media (max-width: 576px) {
-  .courses-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .tabs-wrapper {
-    flex-wrap: wrap;
-  }
-
-  .tab {
-    margin: 10px 10px 0 0;
-  }
-
-  .banner {
-    height: 150px;
-  }
-
-  .banner h1 {
-    font-size: 1.7rem;
-  }
-
-  .course-tabs {
-    flex-wrap: wrap;
-  }
-
-  .tab-item {
-    flex: 1 1 auto;
-    text-align: center;
-  }
-
-  .detail-title {
-    font-size: 1.5rem;
-  }
-
-  .video-thumbnail-container {
-    height: 160px;
-  }
+@media (max-width:576px) {
+  .courses-grid { grid-template-columns:1fr; }
 }
 </style>