diff --git a/web/src/views/CaseResources.vue b/web/src/views/CaseResources.vue
index 7690be7a..9a883f3b 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>
@@ -21,26 +21,104 @@
       <!-- 线上课程内容 -->
       <div v-if="activeTab === 'online' && !selectedCourse">
         <h2 class="section-title">线上课程</h2>
-        <div class="courses-grid">
-          <div
-            class="course-card"
-            v-for="(course, index) in onlineCourses"
-            :key="index"
-            @click="selectCourse(course)"
-            style="cursor: pointer"
-          >
-            <div class="course-image">
-              <img :src="course.imageUrl" :alt="course.title" class="course-thumbnail">
-              <!-- 已删除：线上课程列表页的播放按钮 -->
-            </div>
-            <div class="course-info">
-              <div class="course-meta" v-if="index === 0">
-                <span class="meta-item">信息设计</span>
-                <span class="meta-item">Information Design</span>
-                <p class="course-host">主办：湖北 武汉理工大学</p>
+
+        <!-- 首次加载状态 -->
+        <div v-if="loadingInit" class="loading">加载中...</div>
+
+        <!-- 错误提示 -->
+        <div v-if="errorMsg" class="error-msg">{{ errorMsg }}</div>
+
+        <!-- 课程列表核心区域 -->
+        <div v-if="!loadingInit && !errorMsg">
+          <!-- 初始状态：只显示3个课程 + 更多按钮 -->
+          <div v-if="!showFullCourseList">
+            <div class="courses-grid">
+              <div
+                class="course-card"
+                v-for="(course, index) in initCourses"
+                :key="course.id"
+                @click="selectCourse(course)"
+                style="cursor: pointer"
+              >
+                <div class="course-image">
+                  <img :src="course.cover_url" :alt="course.title" class="course-thumbnail">
+                </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 class="indicator-dot"></div>
-              <p class="course-title">{{ course.title }}</p>
+            </div>
+
+            <!-- 更多课程按钮（总课程数>3时显示） -->
+            <div v-if="totalCount > 3" class="more-btn-container">
+              <button class="more-btn" @click="toggleFullCourseList">
+                更多线上课程
+              </button>
+            </div>
+          </div>
+
+          <!-- 展开状态：完整列表 + 搜索框 + 分页 -->
+          <div v-else>
+            <!-- 搜索框 -->
+            <div class="course-search-section">
+              <input
+                type="text"
+                class="course-search-input"
+                placeholder="输入关键词搜索课程..."
+                v-model="searchKeyword"
+                @keyup.enter="handleCourseSearch"
+              />
+              <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"
+                :key="course.id"
+                @click="selectCourse(course)"
+                style="cursor: pointer"
+              >
+                <div class="course-image">
+                  <img :src="course.cover_url" :alt="course.title" class="course-thumbnail">
+                </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>
+
+            <!-- 无课程提示 -->
+            <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>
+              <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>
             </div>
           </div>
         </div>
@@ -48,18 +126,19 @@
 
       <!-- 线上课程详情页 -->
       <div v-if="activeTab === 'online' && selectedCourse">
-        <button class="back-button" @click="selectedCourse = null">← 返回列表</button>
+        <button class="back-button" @click="handleBackToList">← 返回课程列表</button>
+
+        <h1 class="course-detail-title">{{ selectedCourse.title }}</h1>
+        <p class="course-detail-subtitle">{{ selectedCourse.subtitle }}</p>
 
-        <h1 class="course-title">线上课程 Online courses</h1>
         <div class="course-header">
           <div class="course-video">
-            <img :src="selectedCourse.imageUrl" :alt="selectedCourse.title" class="video-thumbnail">
-            <!-- 已删除：线上课程详情页的播放按钮 -->
+            <img :src="selectedCourse.cover_url" :alt="selectedCourse.title" class="video-thumbnail">
           </div>
           <div class="course-intro">
             <h2>课程介绍</h2>
             <p class="intro-text">
-              在社交媒体盛行的今天，信息设计已由传者中心转向受者中心。这门课程将带你深入探索用户中心的信息设计方法、信息视觉设计技巧以及如何选择恰当的信息图表类型呈现信息。
+              {{ selectedCourse.intro }}
             </p>
             <a href="#" class="course-link">请点击这里，访问精品慕课</a>
           </div>
@@ -151,84 +230,196 @@
         </div>
       </div>
 
-      <!-- 教学案例列表页 -->
+      <!-- 教学案例列表页（仅显示指定字段） -->
       <div v-if="activeTab === 'teaching' && !selectedCase">
         <h2 class="section-title">教学案例</h2>
         <div class="search-section">
-          <select class="search-select" v-model="searchFilter">
-            <option value="theme">主题方向</option>
-            <option value="type">案例类型</option>
-            <option value="year">年份</option>
-          </select>
           <input
             type="text"
             class="search-input"
-            placeholder="中华传承"
-            v-model="searchKeyword"
-            @keyup.enter="handleSearch"
+            placeholder="输入关键词搜索案例..."
+            v-model="teachingSearchKeyword"
+            @keyup.enter="handleTeachingSearch"
           />
-          <button class="search-btn" @click="handleSearch">搜索</button>
+          <button class="search-btn" @click="handleTeachingSearch">搜索</button>
           <button class="video-case-btn" @click="handleTabChange('video')">视频案例</button>
         </div>
-        <div class="cases-list">
+
+        <!-- 加载状态 -->
+        <div v-if="loadingTeaching" class="loading">加载中...</div>
+
+        <!-- 错误提示 -->
+        <div v-if="teachingErrorMsg" class="error-msg">{{ teachingErrorMsg }}</div>
+
+        <!-- 案例列表 -->
+        <div v-if="!loadingTeaching && !teachingErrorMsg">
           <div class="list-header">
-            <span>检测到{{ filteredCases.length }}篇案例</span>
+            <span>共 {{ totalTeachingCases }} 篇案例（搜索关键词：{{ teachingSearchKeyword || '无' }}）</span>
             <div class="list-controls">
-              <span>排序：发表时间 |</span>
-              <a href="#" @click.prevent="sortByViews">阅读次数</a>
-              <span>显示：</span>
-              <select class="show-count" v-model="showCount" @change="handleShowCountChange">
+              <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>
-                <option value="100">100条</option>
               </select>
             </div>
           </div>
 
           <div
             class="case-item"
-            v-for="(caseItem, index) in filteredCases"
+            v-for="(caseItem, index) in teachingCases"
             :key="caseItem.id"
             @click="selectCase(caseItem)"
           >
-            <h3 class="case-title">{{ caseItem.title }}</h3>
-            <div class="case-tags">
-              <span class="tag" v-for="(tag, i) in caseItem.tags" :key="i">{{ tag }}</span>
+            <!-- 仅显示指定字段：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>
-            <p class="case-desc">{{ caseItem.desc }}</p>
-            <div class="case-meta">
-              <span class="author">金金设计素材铺 发布在 {{ caseItem.link }}</span>
-              <span class="date">{{ caseItem.date }}</span>
-              <span class="stats">
-                <i class="icon">👁️</i> {{ caseItem.views }}
-                <i class="icon">💬</i> {{ caseItem.comments }}
-              </span>
+            <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"
+            >
+              加载更多
+            </button>
+            <div v-if="loadingTeachingMore" class="loading-more">加载中...</div>
+            <div v-if="!hasMoreTeaching && teachingCases.length > 0" class="no-more">没有更多案例了</div>
+          </div>
         </div>
       </div>
 
-      <!-- 教学案例详情页（Markdown展示） -->
+      <!-- 教学案例详情页 -->
       <div v-if="activeTab === 'teaching' && selectedCase">
         <button class="back-button" @click="selectedCase = null">← 返回列表</button>
-        <div class="markdown-content" v-html="renderedMarkdown"></div>
+
+        <div class="case-detail-header">
+          <img :src="selectedCase.cover_url" :alt="selectedCase.title" class="detail-cover">
+          <h1 class="detail-title">{{ selectedCase.title }}</h1>
+        </div>
+
+        <div class="case-detail-meta">
+          <div class="detail-tutor">
+            <strong>指导教师：</strong> {{ selectedCase.tutor_name }}（{{ selectedCase.tutor_title }}）
+          </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>
+        </div>
+
+        <div class="case-detail-content" v-html="selectedCase.content"></div>
       </div>
 
-      <!-- 视频案例内容 -->
+      <!-- 视频案例内容（支持分页、搜索、显示完整intro、点击观看） -->
       <div v-if="activeTab === 'video'">
         <h2 class="section-title">视频案例</h2>
-        <div class="courses-grid">
-          <div class="course-card" v-for="(video, index) in videoCases" :key="index">
-            <div class="course-image">
-              <img :src="video.imageUrl" :alt="video.title" class="course-thumbnail">
-              <div class="play-button">
-                <div class="play-icon">▶</div>
+
+        <!-- 搜索框区域 -->
+        <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="loadingVideo" class="loading">加载中...</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-case-row"
+              v-for="(video, index) in videoCases"
+              :key="video.id"
+              @click="handleVideoPlay(video.video_url)"
+            >
+              <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"
+                  class="video-thumbnail"
+                >
+                <!-- 播放按钮 -->
+                <div class="play-button">
+                  <div class="play-icon">▶</div>
+                </div>
+              </div>
+
+              <div class="video-info">
+                <h3 class="video-title">{{ video.title }}</h3>
+
+                <!-- 完整显示intro字段 -->
+                <div class="video-intro">
+                  {{ video.intro }}
+                </div>
+
+                <!-- 视频元信息 -->
+                <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>
+                </div>
               </div>
             </div>
-            <div class="course-info">
-              <div class="indicator-dot"></div>
-              <p class="course-title">{{ video.title }}</p>
-            </div>
+          </div>
+
+          <!-- 无视频提示 -->
+          <div v-if="videoCases.length === 0" class="no-course">暂无匹配的视频案例</div>
+
+          <!-- 分页控制 -->
+          <div class="pagination-container">
+            <button
+              v-if="hasMoreVideo && !loadingVideoMore"
+              class="load-more-btn"
+              @click="loadMoreVideoCases"
+            >
+              加载更多
+            </button>
+            <div v-if="loadingVideoMore" class="loading-more">加载中...</div>
+            <div v-if="!hasMoreVideo && videoCases.length > 0" class="no-more">没有更多视频了</div>
           </div>
         </div>
       </div>
@@ -237,8 +428,9 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue';
-import { marked } from 'marked'; // 引入Markdown解析库
+import { ref, computed, watch, onMounted } from 'vue';
+import { marked } from 'marked';
+import axios from 'axios';
 
 // 导航标签状态管理
 const activeTab = ref('online');
@@ -250,188 +442,301 @@ const chapters = ref({
   2: { expanded: true }
 });
 
-// 搜索与筛选状态
-const searchFilter = ref('theme');
+// 线上课程核心状态
+const onlineCourses = ref([]);
+const initCourses = ref([]);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const totalCount = ref(0);
+const hasMore = ref(true);
+const loadingInit = ref(false);
+const loadingMore = ref(false);
+const errorMsg = ref('');
+const showFullCourseList = ref(false);
 const searchKeyword = ref('');
-const showCount = ref('20');
-const sortType = ref('date'); // date 或 views
 
-// 切换标签页
+// 教学案例核心状态
+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 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 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);
+  }
 };
 
-// 课程相关方法
+// 初始化线上课程
+const initOnlineCourses = 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;
+    initCourses.value = onlineCourses.value.slice(0, 3);
+  } catch (err) {
+    errorMsg.value = '课程加载失败，请稍后重试';
+    console.error('初始化课程失败：', err);
+  } 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('课程接口返回格式异常');
+  }
+  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;
+  }
+};
+
+// 线上课程加载更多
+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;
+    hasMore.value = currentPage.value * pageSize.value < totalCount.value;
+  } catch (err) {
+    errorMsg.value = '加载下一页失败，请重试';
+    console.error('加载下一页失败：', err);
+  } finally {
+    loadingMore.value = false;
+  }
+};
+
+// 切换线上课程列表展开/收起
+const toggleFullCourseList = () => {
+  showFullCourseList.value = !showFullCourseList.value;
+  if (showFullCourseList.value && searchKeyword.value) {
+    handleCourseSearch();
+  }
+};
+
+// 教学案例请求函数
+const fetchTeachingCases = async (page, isReset = false) => {
+  if (isReset) {
+    loadingTeaching.value = true;
+  } else {
+    loadingTeachingMore.value = true;
+  }
+  teachingErrorMsg.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 handleTeachingSearch = () => {
+  fetchTeachingCases(1, true);
+};
+
+// 教学案例加载更多
+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 = '';
+
+  try {
+    // 构造请求参数
+    const params = {
+      page: page,
+      size: videoPageSize.value,
+      keyword: videoSearchKeyword.value || '',
+      sort: 0
+    };
+
+    // 发送POST请求到视频案例接口
+    const response = await axios.post(
+      'http://localhost:8080/api/video-cases/list',
+      params
+    );
+    const data = response.data;
+
+    // 验证接口返回格式
+    if (!data || typeof data.total !== 'number' || !Array.isArray(data.list)) {
+      throw new Error('视频案例接口返回格式异常');
+    }
+
+    // 更新数据（重置或追加）
+    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;
+  }
+};
+
+// 视频案例搜索
+const handleVideoSearch = () => {
+  // 重置页码并重新加载数据
+  fetchVideoCases(1, true);
+};
+
+// 视频案例加载更多
+const loadMoreVideoCases = () => {
+  if (loadingVideo.value || loadingVideoMore.value || !hasMoreVideo.value) return;
+  fetchVideoCases(currentVideoPage.value + 1, false);
+};
+
+// 视频播放处理
+const handleVideoPlay = (videoUrl) => {
+  // 点击后跳转至视频播放页面（新窗口打开）
+  window.open(videoUrl, '_blank');
+};
+
+// 课程详情相关方法
 const selectCourse = (course) => {
   selectedCourse.value = course;
-  activeDetailTab.value = 'content';
 };
-
+const handleBackToList = () => {
+  selectedCourse.value = null;
+};
 const toggleChapter = (chapterId) => {
   chapters.value[chapterId].expanded = !chapters.value[chapterId].expanded;
 };
 
-// 教学案例相关方法
+// 教学案例详情相关方法
 const selectCase = (caseItem) => {
   selectedCase.value = caseItem;
 };
 
-// 搜索功能
-const handleSearch = () => {
-  // 实际项目中可添加更复杂的搜索逻辑
-};
-
-// 排序功能
-const sortByViews = () => {
-  sortType.value = 'views';
-};
-
-// 显示数量变更
-const handleShowCountChange = () => {
-  // 实际项目中可根据需要调整分页逻辑
-};
-
-// 线上课程数据
-const onlineCourses = [
-  {
-    imageUrl: "https://p11-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/883f8fd9c41041be852be422c3cd21dd.png~tplv-a9rns2rl98-resize-jpeg-v1.png",
-    title: "制度型开放助推经济高质量发展制度型开放"
-  },
-  {
-    imageUrl: "https://p26-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/d1ca7784011a433bbeebc67af1755bf4.png~tplv-a9rns2rl98-resize-jpeg-v1.png",
-    title: "制度型开放助推经济高质量发展制度型开放"
-  },
-  {
-    imageUrl: "https://p26-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/dc057de090d743259a9f8f9285042591.png~tplv-a9rns2rl98-resize-jpeg-v1.png",
-    title: "制度型开放助推经济高质量发展制度型开放"
-  }
-];
-
-// 教学案例数据
-const cases = [
-  {
-    id: 1,
-    title: "“DGI控糖零食”摘取全国奖项，健康设计案例再“出圈”",
-    tags: ["设计通案", "品牌设计", "健康食品"],
-    desc: "武汉轻工大学艺术设计学院研究生团队在设计大赛中获奖，展现健康食品品牌创新成果...",
-    link: "https://shop113041517.taobao.com",
-    date: "2023-06-15",
-    views: 1245,
-    comments: 32,
-    markdown: `# “DGI控糖零食” 健康设计案例解析
-
-## 获奖背景
-近日，武汉轻工大学艺术设计学院研究生团队在中国绿色环保包装与安全设计创意大赛中获得全国二等奖，其参赛作品 “DGI控糖零食品牌” 以 “科学控糖，健康随行” 为核心理念，展现了 “食物与健康设计案例库” 在健康食品品牌创新与社会服务领域的最新成果。
-
-## 项目理念
-该项目依托 “湖北健康生活与康居环境设计研究中心” 科研平台及省级研究生工作站指导支持，聚焦糖尿病患者的特殊饮食需求，围绕低GI食品体系展开设计研究。
-
-![产品展示](https://via.placeholder.com/600x400?text=DGI控糖零食产品展示)
-
-## 设计亮点
-- **科学配方**：严格控制糖分与GI值，满足糖尿病患者饮食需求
-- **视觉设计**：传统元素与现代设计结合，传递健康与文化价值
-- **用户体验**：便携包装与食用场景适配，提升使用便利性
-`
-  },
-  {
-    id: 2,
-    title: "新媒体助力乡村文化建设 — 画虎村的新媒体景观",
-    tags: ["新媒体", "乡村文化", "设计通案"],
-    desc: "通过新媒体手段推广乡村文化，实现传统文化与现代传播的创新融合...",
-    link: "https://shop113041517.taobao.com",
-    date: "2021-05-10",
-    views: 876,
-    comments: 21,
-    markdown: `# 画虎村新媒体文化建设案例
-
-## 项目背景
-画虎村位于河南民权，是全国知名的“中国画虎第一村”。为推动乡村文化传播与产业升级，团队开展了新媒体助力乡村文化建设的实践项目。
-
-## 实施路径
-1. **内容创作**：打造系列短视频，展示虎画创作过程与画家故事
-2. **平台运营**：搭建抖音、微信公众号矩阵，精准触达艺术爱好者
-3. **电商融合**：开发虎画衍生品线上商城，实现文化价值变现
-
-![虎画创作](https://via.placeholder.com/600x400?text=画虎村创作现场)
-`
-  },
-  {
-    id: 3,
-    title: "传统手工艺数字化保护与传承设计研究",
-    tags: ["传统文化", "数字化设计", "五学示例"],
-    desc: "探索传统手工艺在数字时代的保护与传承新模式，通过数字化手段延续文化生命力...",
-    link: "https://shop113041517.taobao.com",
-    date: "2022-09-23",
-    views: 632,
-    comments: 15,
-    markdown: `# 传统手工艺数字化保护与传承设计研究
-
-## 研究背景
-随着现代化进程加快，许多传统手工艺面临失传风险。本项目通过数字化技术对传统手工艺进行系统性保护与创新性传承。
-
-## 技术方案
-- 3D扫描建模：实现手工艺作品的高精度数字化存档
-- AR交互展示：通过增强现实技术呈现工艺制作过程
-- 数字平台建设：搭建在线数据库与学习平台
-
-![数字化展示](https://via.placeholder.com/600x400?text=传统手工艺数字化展示)
-`
-  }
-];
-
-// 筛选后的案例列表
-const filteredCases = computed(() => {
-  let result = [...cases];
-
-  // 搜索过滤
-  if (searchKeyword.value) {
-    const keyword = searchKeyword.value.toLowerCase();
-    result = result.filter(item =>
-      item.title.toLowerCase().includes(keyword) ||
-      item.desc.toLowerCase().includes(keyword) ||
-      item.tags.some(tag => tag.toLowerCase().includes(keyword))
-    );
-  }
-
-  // 排序处理
-  if (sortType.value === 'views') {
-    result.sort((a, b) => b.views - a.views);
-  } else {
-    result.sort((a, b) => new Date(b.date) - new Date(a.date));
-  }
-
-  // 数量限制
-  return result.slice(0, parseInt(showCount.value));
-});
-
-// Markdown渲染
-const renderedMarkdown = ref('');
-watch(selectedCase, (newCase) => {
-  if (newCase && newCase.markdown) {
-    renderedMarkdown.value = marked(newCase.markdown);
-  } else {
-    renderedMarkdown.value = '';
+// 页面挂载时初始化
+onMounted(() => {
+  if (activeTab.value === 'online') {
+    initOnlineCourses();
+  } else if (activeTab.value === 'teaching') {
+    fetchTeachingCases(1, true);
+  } else if (activeTab.value === 'video') {
+    fetchVideoCases(1, true);
   }
 });
-
-// 视频案例数据
-const videoCases = [
-  {
-    imageUrl: "https://p11-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/883f8fd9c41041be852be422c3cd21dd.png~tplv-a9rns2rl98-resize-jpeg-v1.png",
-    title: "视频案例：设计思维工作坊实录"
-  },
-  {
-    imageUrl: "https://p26-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/d1ca7784011a433bbeebc67af1755bf4.png~tplv-a9rns2rl98-resize-jpeg-v1.png",
-    title: "视频案例：用户研究方法论"
-  },
-  {
-    imageUrl: "https://p26-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/dc057de090d743259a9f8f9285042591.png~tplv-a9rns2rl98-resize-jpeg-v1.png",
-    title: "视频案例：产品原型设计与测试"
-  }
-];
 </script>
 
 <style scoped>
@@ -446,6 +751,7 @@ body {
   font-family: "Helvetica Neue", Arial, sans-serif;
   color: #333;
   background-color: #fff;
+  line-height: 1.6;
 }
 
 /* 顶部横幅 */
@@ -522,11 +828,27 @@ body {
   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;
+  color: #e74c3c;
+  padding: 50px 0;
+}
+
 /* 课程卡片样式 */
 .courses-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
+  margin-bottom: 30px;
 }
 
 .course-card {
@@ -534,6 +856,7 @@ body {
   flex-direction: column;
   cursor: pointer;
   transition: transform 0.3s;
+  height: 100%;
 }
 
 .course-card:hover {
@@ -550,7 +873,8 @@ body {
 .course-thumbnail {
   width: 100%;
   display: block;
-  height: auto;
+  height: 200px;
+  object-fit: cover;
   transition: transform 0.3s;
 }
 
@@ -558,28 +882,17 @@ body {
   transform: scale(1.05);
 }
 
-/* 已删除：播放按钮相关样式 */
-
 .course-info {
   display: flex;
   flex-direction: column;
+  flex: 1;
 }
 
-.course-meta {
-  margin-bottom: 10px;
-}
-
-.meta-item {
-  display: block;
-  color: #666;
+.course-subtitle {
   font-size: 0.9rem;
-  margin-bottom: 5px;
-}
-
-.course-host {
-  font-size: 0.85rem;
-  color: #999;
-  margin: 10px 0 0;
+  color: #666;
+  margin-bottom: 8px;
+  line-height: 1.4;
 }
 
 .indicator-dot {
@@ -593,8 +906,156 @@ body {
 .course-title {
   font-size: 1rem;
   color: #333;
-  margin: 0;
+  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;
 }
 
 /* 课程详情页 */
@@ -613,11 +1074,20 @@ body {
   background-color: #f5f5f5;
 }
 
-.course-detail-page .course-title {
+.course-detail-title {
   font-size: 1.8rem;
   color: #333;
-  margin: 0 0 30px;
+  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 {
@@ -627,6 +1097,13 @@ body {
   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;
@@ -637,6 +1114,7 @@ body {
   line-height: 1.8;
   margin: 0 0 20px;
   color: #555;
+  white-space: pre-line;
 }
 
 .course-link {
@@ -726,59 +1204,6 @@ body {
 }
 
 /* 教学案例样式 */
-.search-section {
-  display: flex;
-  align-items: center;
-  margin-bottom: 30px;
-}
-
-.search-select {
-  padding: 10px 15px;
-  border: 1px solid #ddd;
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-  background-color: #fff;
-}
-
-.search-input {
-  flex: 1;
-  padding: 10px 15px;
-  border: 1px solid #ddd;
-  border-radius: 0;
-  font-size: 1rem;
-}
-
-.search-btn {
-  padding: 10px 30px;
-  background-color: #c0392b;
-  color: #fff;
-  border: none;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-.search-btn:hover {
-  background-color: #a93226;
-}
-
-.video-case-btn {
-  padding: 10px 20px;
-  background-color: #fff;
-  color: #333;
-  border: 1px solid #ddd;
-  cursor: pointer;
-  margin-left: 10px;
-  transition: all 0.3s;
-}
-
-.video-case-btn:hover {
-  background-color: #f5f5f5;
-}
-
-.cases-list {
-  margin-top: 20px;
-}
-
 .list-header {
   display: flex;
   justify-content: space-between;
@@ -786,145 +1211,166 @@ body {
   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;
 }
 
-.list-controls a {
-  color: #3498db;
-  text-decoration: none;
-  margin: 0 5px;
-  cursor: pointer;
-}
-
-.list-controls a:hover {
-  text-decoration: underline;
+.show-count {
+  padding: 5px;
+  border: 1px solid #ddd;
+  border-radius: 3px;
 }
 
 .case-item {
   margin-bottom: 30px;
-  padding-bottom: 20px;
-  border-bottom: 1px solid #eee;
+  padding: 20px;
+  border: 1px solid #eee;
+  border-radius: 8px;
   cursor: pointer;
-  transition: background-color 0.3s;
-  padding: 15px;
-  border-radius: 4px;
+  transition: all 0.3s;
 }
 
 .case-item:hover {
   background-color: #f9f9f9;
+  border-color: #ddd;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+}
+
+.case-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  margin-bottom: 15px;
+}
+
+.case-cover {
+  width: 120px;
+  height: 120px;
+  object-fit: cover;
+  border-radius: 4px;
+  flex-shrink: 0;
 }
 
 .case-title {
-  font-size: 1.2rem;
+  font-size: 1.3rem;
   color: #2c3e50;
-  margin: 0 0 10px;
-  transition: color 0.3s;
+  margin: 0;
+  line-height: 1.4;
 }
 
-.case-item:hover .case-title {
-  color: #3498db;
-}
-
-.case-tags {
-  margin-bottom: 10px;
-}
-
-.tag {
-  display: inline-block;
-  padding: 3px 8px;
-  background-color: #f1f1f1;
+/* 案例元信息样式 */
+.case-meta-info {
   color: #666;
-  font-size: 0.8rem;
-  border-radius: 3px;
-  margin-right: 5px;
-  margin-bottom: 5px;
+  line-height: 1.8;
 }
 
-.case-desc {
+.tutor-info, .student-info, .create-time {
+  margin-bottom: 8px;
   font-size: 0.95rem;
-  color: #666;
-  line-height: 1.6;
+}
+
+.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-meta {
-  font-size: 0.85rem;
-  color: #999;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.author {
-  flex: 1;
-  min-width: 200px;
-}
-
-.stats .icon {
-  margin: 0 5px;
-}
-
-/* Markdown内容样式 */
-.markdown-content {
+.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;
-  max-width: 800px;
-  margin: 0 auto;
+  line-height: 1.8;
+  font-size: 1rem;
 }
 
-.markdown-content h1,
-.markdown-content h2,
-.markdown-content h3 {
-  margin: 30px 0 15px;
-  color: #2c3e50;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 10px;
-}
-
-.markdown-content h1 {
-  font-size: 1.8rem;
-}
-
-.markdown-content h2 {
-  font-size: 1.5rem;
-}
-
-.markdown-content h3 {
-  font-size: 1.2rem;
-}
-
-.markdown-content p {
-  margin: 0 0 20px;
-}
-
-.markdown-content ul,
-.markdown-content ol {
-  margin: 0 0 20px 20px;
-  padding: 0;
-}
-
-.markdown-content li {
-  margin: 5px 0;
-}
-
-.markdown-content img {
+.case-detail-content img {
   max-width: 100%;
   height: auto;
   margin: 20px auto;
   display: block;
   border-radius: 4px;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 }
 
-/* 视频案例播放按钮样式（保留） */
-.video .play-button,
-.course-card:has(.video-case) .play-button {
+/* 视频案例样式（一整行布局） */
+.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%;
@@ -938,26 +1384,74 @@ body {
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s;
+  z-index: 10;
 }
 
-.video .play-button:hover,
-.course-card:has(.video-case) .play-button:hover {
+.video-case-row:hover .play-button {
   background-color: #fff;
   transform: translate(-50%, -50%) scale(1.1);
 }
 
-.video .play-icon,
-.course-card:has(.video-case) .play-icon {
+.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) {
@@ -979,32 +1473,56 @@ body {
     grid-template-columns: 1fr;
   }
 
-  .search-section {
+  .course-search-section, .search-section {
     flex-wrap: wrap;
+    max-width: 100%;
   }
 
-  .search-select {
+  .course-search-input, .search-input {
     border-radius: 4px;
-    border-right: 1px solid #ddd;
+    width: 100%;
     margin-bottom: 10px;
   }
 
-  .search-input {
-    margin: 0 0 10px;
+  .course-search-btn, .search-btn {
     border-radius: 4px;
     width: 100%;
   }
 
-  .search-btn, .video-case-btn {
-    border-radius: 4px;
-    flex: 1;
-    margin: 0 5px 10px;
+  .video-case-btn, .teaching-case-btn {
+    width: 100%;
+    margin: 10px 0 0;
   }
 
   .list-header {
     flex-direction: column;
     align-items: flex-start;
-    gap: 10px;
+  }
+
+  .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;
   }
 }
 
@@ -1038,10 +1556,12 @@ body {
     text-align: center;
   }
 
-  .case-meta {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 5px;
+  .detail-title {
+    font-size: 1.5rem;
+  }
+
+  .video-thumbnail-container {
+    height: 160px;
   }
 }
 </style>