From 65b81b5edabe9fbddab1450cd12a4db98bca06cc Mon Sep 17 00:00:00 2001
From: JACKYMYPERSON <mayimingperson_person@163.com>
Date: Sun, 26 Oct 2025 11:27:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A1=88=E4=BE=8B=E8=B5=84?=
 =?UTF-8?q?=E6=BA=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/CaseResources.vue | 1042 ++++++++++++++++++++++++++++++-
 1 file changed, 1041 insertions(+), 1 deletion(-)

diff --git a/web/src/views/CaseResources.vue b/web/src/views/CaseResources.vue
index 46ad7d4d..a1d1c94c 100644
--- a/web/src/views/CaseResources.vue
+++ b/web/src/views/CaseResources.vue
@@ -1,5 +1,1045 @@
 <template>
   <div>
-    基地概况
+    <!-- 公共顶部横幅 -->
+    <div class="banner">
+      <h1>云端课堂 线上课程</h1>
+    </div>
+
+    <!-- 导航标签区域 -->
+    <div class="tabs-container">
+      <div class="tabs-wrapper">
+        <span class="breadcrumb">案例资源</span>
+        <span class="breadcrumb-separator">→</span>
+        <div class="tab" :class="{ active: activeTab === 'online' }" @click="handleTabChange('online')">线上课程</div>
+        <div class="tab" :class="{ active: activeTab === 'teaching' }" @click="handleTabChange('teaching')">教学案例</div>
+        <div class="tab" :class="{ active: activeTab === 'video' }" @click="handleTabChange('video')">视频案例</div>
+      </div>
+    </div>
+
+    <!-- 内容区域 -->
+    <div class="content-container">
+      <!-- 线上课程内容 -->
+      <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 v-if="index === 0" class="play-button">
+                <div class="play-icon">▶</div>
+              </div>
+            </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>
+              <div class="indicator-dot"></div>
+              <p class="course-title">{{ course.title }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 线上课程详情页 -->
+      <div v-if="activeTab === 'online' && selectedCourse">
+        <button class="back-button" @click="selectedCourse = null">← 返回列表</button>
+        
+        <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">
+            <div class="play-button">
+              <div class="play-icon">▶</div>
+            </div>
+          </div>
+          <div class="course-intro">
+            <h2>课程介绍</h2>
+            <p class="intro-text">
+              在社交媒体盛行的今天，信息设计已由传者中心转向受者中心。这门课程将带你深入探索用户中心的信息设计方法、信息视觉设计技巧以及如何选择恰当的信息图表类型呈现信息。
+            </p>
+            <a href="#" class="course-link">请点击这里，访问精品慕课</a>
+          </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>
+
+        <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>
+              </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>
+            </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>
+              </div>
+            </div>
+          </div>
+        </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"
+          />
+          <button class="search-btn" @click="handleSearch">搜索</button>
+          <button class="video-case-btn" @click="handleTabChange('video')">视频案例</button>
+        </div>
+        <div class="cases-list">
+          <div class="list-header">
+            <span>检测到{{ filteredCases.length }}篇案例</span>
+            <div class="list-controls">
+              <span>排序：发表时间 |</span>
+              <a href="#" @click.prevent="sortByViews">阅读次数</a>
+              <span>显示：</span>
+              <select class="show-count" v-model="showCount" @change="handleShowCountChange">
+                <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" 
+            :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>
+            </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>
+          </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>
+
+      <!-- 视频案例内容 -->
+      <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>
+            </div>
+            <div class="course-info">
+              <div class="indicator-dot"></div>
+              <p class="course-title">{{ video.title }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { marked } from 'marked'; // 引入Markdown解析库
+
+// 导航标签状态管理
+const activeTab = ref('online');
+const selectedCourse = ref(null);
+const selectedCase = ref(null);
+const activeDetailTab = ref('content');
+const chapters = ref({
+  1: { expanded: false },
+  2: { expanded: true }
+});
+
+// 搜索与筛选状态
+const searchFilter = ref('theme');
+const searchKeyword = ref('');
+const showCount = ref('20');
+const sortType = ref('date'); // date 或 views
+
+// 切换标签页
+const handleTabChange = (tab) => {
+  activeTab.value = tab;
+  selectedCourse.value = null;
+  selectedCase.value = null;
+};
+
+// 课程相关方法
+const selectCourse = (course) => {
+  selectedCourse.value = course;
+  activeDetailTab.value = 'content';
+};
+
+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 = '';
+  }
+});
+
+// 视频案例数据
+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>
+/* 全局样式 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Helvetica Neue", Arial, sans-serif;
+  color: #333;
+  background-color: #fff;
+}
+
+/* 顶部横幅 */
+.banner {
+  background-color: #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;
+}
+
+/* 导航标签 */
+.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;
+}
+
+.tab.active {
+  color: #333;
+  border-bottom-color: #333;
+  font-weight: 500;
+}
+
+.tab:hover:not(.active) {
+  color: #333;
+}
+
+/* 内容容器 */
+.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;
+}
+
+/* 课程卡片样式 */
+.courses-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+}
+
+.course-card {
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  transition: transform 0.3s;
+}
+
+.course-card:hover {
+  transform: translateY(-5px);
+}
+
+.course-image {
+  position: relative;
+  background-color: #f0f0f0;
+  margin-bottom: 15px;
+  overflow: hidden;
+}
+
+.course-thumbnail {
+  width: 100%;
+  display: block;
+  height: auto;
+  transition: transform 0.3s;
+}
+
+.course-card:hover .course-thumbnail {
+  transform: scale(1.05);
+}
+
+.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;
+}
+
+.play-button:hover {
+  background-color: #fff;
+  transform: translate(-50%, -50%) scale(1.1);
+}
+
+.play-icon {
+  font-size: 1.5rem;
+  color: #e74c3c;
+  margin-left: 5px;
+}
+
+.course-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.course-meta {
+  margin-bottom: 10px;
+}
+
+.meta-item {
+  display: block;
+  color: #666;
+  font-size: 0.9rem;
+  margin-bottom: 5px;
+}
+
+.course-host {
+  font-size: 0.85rem;
+  color: #999;
+  margin: 10px 0 0;
+}
+
+.indicator-dot {
+  width: 8px;
+  height: 8px;
+  background-color: #ccc;
+  border-radius: 50%;
+  margin: 10px 0;
+}
+
+.course-title {
+  font-size: 1rem;
+  color: #333;
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* 课程详情页 */
+.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-page .course-title {
+  font-size: 1.8rem;
+  color: #333;
+  margin: 0 0 30px;
+  text-align: center;
+}
+
+.course-header {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 30px;
+  margin-bottom: 40px;
+}
+
+.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;
+}
+
+.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;
+}
+
+/* 教学案例样式 */
+.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;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.list-controls {
+  color: #666;
+  font-size: 0.9rem;
+}
+
+.list-controls a {
+  color: #3498db;
+  text-decoration: none;
+  margin: 0 5px;
+  cursor: pointer;
+}
+
+.list-controls a:hover {
+  text-decoration: underline;
+}
+
+.case-item {
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #eee;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  padding: 15px;
+  border-radius: 4px;
+}
+
+.case-item:hover {
+  background-color: #f9f9f9;
+}
+
+.case-title {
+  font-size: 1.2rem;
+  color: #2c3e50;
+  margin: 0 0 10px;
+  transition: color 0.3s;
+}
+
+.case-item:hover .case-title {
+  color: #3498db;
+}
+
+.case-tags {
+  margin-bottom: 10px;
+}
+
+.tag {
+  display: inline-block;
+  padding: 3px 8px;
+  background-color: #f1f1f1;
+  color: #666;
+  font-size: 0.8rem;
+  border-radius: 3px;
+  margin-right: 5px;
+  margin-bottom: 5px;
+}
+
+.case-desc {
+  font-size: 0.95rem;
+  color: #666;
+  line-height: 1.6;
+  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 {
+  line-height: 1.8;
+  color: #333;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.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 {
+  max-width: 100%;
+  height: auto;
+  margin: 20px auto;
+  display: block;
+  border-radius: 4px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+/* 响应式适配 */
+@media (max-width: 992px) {
+  .courses-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@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;
+  }
+  
+  .search-section {
+    flex-wrap: wrap;
+  }
+  
+  .search-select {
+    border-radius: 4px;
+    border-right: 1px solid #ddd;
+    margin-bottom: 10px;
+  }
+  
+  .search-input {
+    margin: 0 0 10px;
+    border-radius: 4px;
+    width: 100%;
+  }
+  
+  .search-btn, .video-case-btn {
+    border-radius: 4px;
+    flex: 1;
+    margin: 0 5px 10px;
+  }
+  
+  .list-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+}
+
+@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;
+  }
+  
+  .case-meta {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 5px;
+  }
+}
+</style>
\ No newline at end of file