修改资源案例web页面

web/src/views/CaseResources.vue

@@ -22,18 +22,16 @@
       <div v-if="activeTab === 'online' && !selectedCourse">
         <h2 class="section-title">线上课程</h2>
         <div class="courses-grid">
-          <div 
+          <div
-            class="course-card" 
+            class="course-card"
-            v-for="(course, index) in onlineCourses" 
+            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">
@@ -51,14 +49,12 @@
       <!-- 线上课程详情页 -->
       <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>
@@ -70,30 +66,30 @@
         </div>
 
         <div class="course-tabs">
-          <div 
+          <div
-            class="tab-item" 
+            class="tab-item"
-            :class="{ active: activeDetailTab === 'content' }" 
+            :class="{ active: activeDetailTab === 'content' }"
             @click="activeDetailTab = 'content'"
           >
             课程内容
           </div>
-          <div 
+          <div
-            class="tab-item" 
+            class="tab-item"
-            :class="{ active: activeDetailTab === 'resource' }" 
+            :class="{ active: activeDetailTab === 'resource' }"
             @click="activeDetailTab = 'resource'"
           >
             拓展资源
           </div>
-          <div 
+          <div
-            class="tab-item" 
+            class="tab-item"
-            :class="{ active: activeDetailTab === 'activity' }" 
+            :class="{ active: activeDetailTab === 'activity' }"
             @click="activeDetailTab = 'activity'"
           >
             学生活动
           </div>
-          <div 
+          <div
-            class="tab-item" 
+            class="tab-item"
-            :class="{ active: activeDetailTab === 'team' }" 
+            :class="{ active: activeDetailTab === 'team' }"
             @click="activeDetailTab = 'team'"
           >
             教学团队
@@ -164,10 +160,10 @@
             <option value="type">案例类型</option>
             <option value="year">年份</option>
           </select>
-          <input 
+          <input
-            type="text" 
+            type="text"
-            class="search-input" 
+            class="search-input"
-            placeholder="中华传承" 
+            placeholder="中华传承"
             v-model="searchKeyword"
             @keyup.enter="handleSearch"
           />
@@ -189,10 +185,10 @@
             </div>
           </div>
 
-          <div 
+          <div
-            class="case-item" 
+            class="case-item"
-            v-for="(caseItem, index) in filteredCases" 
+            v-for="(caseItem, index) in filteredCases"
-            :key="caseItem.id" 
+            :key="caseItem.id"
             @click="selectCase(caseItem)"
           >
             <h3 class="case-title">{{ caseItem.title }}</h3>
@@ -389,24 +385,24 @@ const cases = [
 // 筛选后的案例列表
 const filteredCases = computed(() => {
   let result = [...cases];
-  
+
   // 搜索过滤
   if (searchKeyword.value) {
     const keyword = searchKeyword.value.toLowerCase();
-    result = result.filter(item => 
+    result = result.filter(item =>
-      item.title.toLowerCase().includes(keyword) || 
+      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));
 });
@@ -562,32 +558,7 @@ body {
   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;
@@ -907,8 +878,8 @@ body {
   margin: 0 auto;
 }
 
-.markdown-content h1, 
+.markdown-content h1,
-.markdown-content h2, 
+.markdown-content h2,
 .markdown-content h3 {
   margin: 30px 0 15px;
   color: #2c3e50;
@@ -932,7 +903,7 @@ body {
   margin: 0 0 20px;
 }
 
-.markdown-content ul, 
+.markdown-content ul,
 .markdown-content ol {
   margin: 0 0 20px 20px;
   padding: 0;
@@ -951,6 +922,37 @@ body {
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 }
 
+/* 视频案例播放按钮样式（保留） */
+.video .play-button,
+.course-card:has(.video-case) .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;
+}
+
+.video .play-button:hover,
+.course-card:has(.video-case) .play-button:hover {
+  background-color: #fff;
+  transform: translate(-50%, -50%) scale(1.1);
+}
+
+.video .play-icon,
+.course-card:has(.video-case) .play-icon {
+  font-size: 1.5rem;
+  color: #e74c3c;
+  margin-left: 5px;
+}
+
 /* 响应式适配 */
 @media (max-width: 992px) {
   .courses-grid {
@@ -962,43 +964,43 @@ body {
   .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;
@@ -1010,36 +1012,36 @@ body {
   .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>
+</style>