From a6e737fdaf7f068c7fcbd5102c0df50cadb3af04 Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Fri, 26 Dec 2025 22:15:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(portal):=20=E6=9B=B4=E6=96=B0=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E8=A7=86=E5=9B=BE=EF=BC=8C=E5=A2=9E=E5=8A=A0=E7=B2=BE?=
 =?UTF-8?q?=E9=80=89=E4=B8=93=E9=A2=98=E5=B1=95=E7=A4=BA=E5=92=8C=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94=E5=BC=8F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/portal/src/layout/LayoutMain.vue |  12 +-
 frontend/portal/src/views/HomeView.vue    | 192 ++++++++++------------
 frontend/portal/src/views/TopicsView.vue  | 123 +++++++++++++-
 3 files changed, 213 insertions(+), 114 deletions(-)

diff --git a/frontend/portal/src/layout/LayoutMain.vue b/frontend/portal/src/layout/LayoutMain.vue
index 21abcaa..3a7e7e4 100644
--- a/frontend/portal/src/layout/LayoutMain.vue
+++ b/frontend/portal/src/layout/LayoutMain.vue
@@ -1,10 +1,14 @@
 <template>
-  <div class="min-h-screen flex flex-col bg-slate-50">
-    <TopNavbar />
-    <main class="flex-grow pt-16">
+  <div class="min-h-screen flex flex-col bg-slate-50 relative overflow-hidden">
+    <!-- Background Decor Blobs -->
+    <div class="fixed top-[-10%] right-[-10%] w-[40%] h-[40%] bg-blue-100/40 rounded-full blur-[120px] -z-0"></div>
+    <div class="fixed bottom-[-10%] left-[-10%] w-[30%] h-[40%] bg-purple-50/50 rounded-full blur-[100px] -z-0"></div>
+    
+    <TopNavbar class="relative z-10" />
+    <main class="flex-grow pt-16 relative z-10">
       <router-view />
     </main>
-    <AppFooter />
+    <AppFooter class="relative z-10" />
   </div>
 </template>
 
diff --git a/frontend/portal/src/views/HomeView.vue b/frontend/portal/src/views/HomeView.vue
index a502374..928f1a5 100644
--- a/frontend/portal/src/views/HomeView.vue
+++ b/frontend/portal/src/views/HomeView.vue
@@ -59,113 +59,91 @@
          <!-- Main Feed (Left 9) -->
          <div class="col-span-12 lg:col-span-8 xl:col-span-9 space-y-6">
 
-            <!-- Card Variant 1: Single Image (Right) -->
-            <router-link to="/contents/1"
-               class="block bg-white rounded-xl shadow-sm border border-slate-100 p-5 hover:shadow-md transition-shadow group">
-               <div class="flex gap-6">
-                  <div class="flex-1 min-w-0">
-                     <div class="flex items-center gap-2 mb-2">
-                        <span
-                           class="px-1.5 py-0.5 rounded text-xs font-medium bg-red-50 text-red-600 border border-red-100">置顶</span>
-                        <span class="text-xs text-slate-500 border border-slate-200 px-1 rounded">[京剧]</span>
-                     </div>
-                     <h3
-                        class="text-lg font-bold text-slate-900 mb-2 leading-snug group-hover:text-primary-600 transition-colors">
-                        《锁麟囊》选段：春秋亭外风雨暴 (张火丁亲授版)</h3>
-                     <p class="text-base text-slate-500 line-clamp-2 mb-4 leading-relaxed">
-                        张火丁教授亲自讲解程派发音技巧，深度剖析《锁麟囊》中春秋亭一折的唱腔设计与情感表达。包含完整示范与逐句拆解。</p>
-                     <div class="flex items-center justify-between">
-                        <div class="flex items-center gap-3 text-sm text-slate-500">
-                           <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Zhang"
-                              class="w-6 h-6 rounded-full">
-                           <span>张火丁工作室</span>
-                           <span class="w-1 h-1 bg-slate-300 rounded-full"></span>
-                           <span>行当：青衣</span>
-                           <span class="w-1 h-1 bg-slate-300 rounded-full"></span>
-                           <span>2小时前</span>
-                        </div>
-                        <div class="flex items-center gap-4">
-                           <span class="text-sm text-slate-400"><i class="pi pi-eye mr-1"></i> 1.2万</span>
-                           <span class="text-lg font-bold text-red-600">¥ 9.90</span>
-                        </div>
-                     </div>
-                  </div>
-                  <div
-                     class="w-[240px] h-[135px] flex-shrink-0 rounded-lg overflow-hidden relative bg-slate-100 hidden sm:block">
-                     <img
-                        src="https://images.unsplash.com/photo-1576014131795-d44019d02374?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
-                        class="w-full h-full object-cover">
-                     <div class="absolute inset-0 bg-black/20 flex items-center justify-center">
-                        <i class="pi pi-play-circle text-4xl text-white opacity-80"></i>
-                     </div>
-                     <span
-                        class="absolute bottom-2 right-2 px-1.5 py-0.5 bg-black/60 text-white text-xs rounded">15:30</span>
-                  </div>
-               </div>
-            </router-link>
-
-            <!-- Card Variant 2: No Image (Text Only) -->
-            <div
-               class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 hover:shadow-md transition-all hover:border-primary-100 cursor-pointer active:scale-[0.99] group">
-               <div class="flex items-center gap-2 mb-2">
-                  <span
-                     class="px-1.5 py-0.5 rounded text-xs font-medium bg-green-50 text-green-600 border border-green-100">限免</span>
-                  <span class="text-xs text-slate-500 border border-slate-200 px-1 rounded">[昆曲]</span>
-               </div>
-               <h3 class="text-lg font-bold text-slate-900 mb-3 group-hover:text-primary-600 transition-colors">
-                  浅谈昆曲《牡丹亭》中的水磨腔艺术特点</h3>
-               <p class="text-base text-slate-500 line-clamp-3 mb-4 leading-relaxed">
-                  昆曲之所以被称为“百戏之祖”，其细腻婉转的水磨腔功不可没。本文将从发音、吐字、行腔三个维度，带您领略昆曲的声韵之美。对于初学者来说，掌握“字头、字腹、字尾”的处理是关键...</p>
-               <div class="flex items-center justify-between">
-                  <div class="flex items-center gap-3 text-sm text-slate-500">
-                     <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Li" class="w-6 h-6 rounded-full">
-                     <span>梨园小生</span>
-                     <span class="w-1 h-1 bg-slate-300 rounded-full"></span>
-                     <span>昨天</span>
-                  </div>
-                  <div class="flex items-center gap-2">
-                     <span class="text-xs text-slate-400 line-through">¥ 5.00</span>
-                     <span
-                        class="text-sm font-bold text-green-600 border border-green-200 px-2 py-0.5 rounded">限时免费</span>
-                  </div>
-               </div>
-            </div>
-
-            <!-- Card Variant 3: 3 Images -->
-            <div
-               class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 hover:shadow-md transition-all hover:border-primary-100 cursor-pointer active:scale-[0.99] group">
-               <h3 class="text-lg font-bold text-slate-900 mb-3 group-hover:text-primary-600 transition-colors">[图集]
-                  2024 新年京剧晚会后台探班：名角云集</h3>
-               <div class="grid grid-cols-3 gap-2 mb-4">
-                  <div class="aspect-[4/3] rounded-lg overflow-hidden bg-slate-100">
-                     <img
-                        src="https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
-                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
-                  </div>
-                  <div class="aspect-[4/3] rounded-lg overflow-hidden bg-slate-100">
-                     <img
-                        src="https://images.unsplash.com/photo-1533174072545-e8d4aa97edf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
-                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
-                  </div>
-                  <div class="aspect-[4/3] rounded-lg overflow-hidden bg-slate-100 relative">
-                     <img
-                        src="https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
-                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
-                     <div class="absolute bottom-2 right-2 px-1.5 py-0.5 bg-black/60 text-white text-xs rounded">+9
-                     </div>
-                  </div>
-               </div>
-               <div class="flex items-center justify-between">
-                  <div class="flex items-center gap-3 text-sm text-slate-500">
-                     <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Photo" class="w-6 h-6 rounded-full">
-                     <span>戏曲摄影师老王</span>
-                     <span class="w-1 h-1 bg-slate-300 rounded-full"></span>
-                     <span>3天前</span>
-                  </div>
-                  <span class="text-sm text-slate-400"><i class="pi pi-eye mr-1"></i> 8.5k</span>
-               </div>
-            </div>
-
+                      <!-- Card Variant 1: Single Image (Right) -->
+                      <router-link to="/contents/1"
+                         class="block bg-white rounded-2xl shadow-sm border border-slate-100 p-6 hover:shadow-xl hover:border-primary-100 transition-all duration-300 group cursor-pointer active:scale-[0.99]">
+                         <div class="flex gap-8">
+                            <div class="flex-1 min-w-0 flex flex-col">
+                               <div class="flex items-center gap-3 mb-3">
+                                  <span class="px-2 py-0.5 rounded text-xs font-bold bg-red-600 text-white">置顶</span>
+                                  <span class="text-xs font-bold text-red-700 bg-red-50 border border-red-100 px-2 py-0.5 rounded-full">京剧</span>
+                               </div>
+                               <h3 class="text-xl font-bold text-slate-900 mb-3 leading-snug group-hover:text-primary-600 transition-colors">《锁麟囊》选段：春秋亭外风雨暴 (张火丁亲授版)</h3>
+                               <p class="text-base text-slate-500 line-clamp-2 mb-6 leading-relaxed">张火丁教授亲自讲解程派发音技巧，深度剖析《锁麟囊》中春秋亭一折的唱腔设计与情感表达。</p>
+                               <div class="mt-auto flex items-center justify-between">
+                                  <div class="flex items-center gap-3 text-sm text-slate-500">
+                                     <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Zhang" class="w-7 h-7 rounded-full ring-2 ring-white">
+                                     <span class="font-medium text-slate-700">张火丁工作室</span>
+                                     <span class="text-slate-300">|</span>
+                                     <span>青衣</span>
+                                  </div>
+                                  <div class="flex items-center gap-4">
+                                     <span class="text-sm text-slate-400 font-medium"><i class="pi pi-eye mr-1"></i> 1.2万</span>
+                                     <span class="text-xl font-bold text-red-600">¥ 9.90</span>
+                                  </div>
+                               </div>
+                            </div>
+                            <div class="w-[280px] h-[157px] flex-shrink-0 rounded-xl overflow-hidden relative bg-slate-100 hidden sm:block shadow-inner">
+                               <img src="https://images.unsplash.com/photo-1576014131795-d44019d02374?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
+                               <div class="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors"></div>
+                               <div class="absolute inset-0 flex items-center justify-center">
+                                  <i class="pi pi-play-circle text-5xl text-white opacity-0 group-hover:opacity-100 transition-all scale-75 group-hover:scale-100 drop-shadow-lg"></i>
+                               </div>
+                               <span class="absolute bottom-3 right-3 px-2 py-1 bg-black/70 backdrop-blur-sm text-white text-xs font-bold rounded-lg">15:30</span>
+                            </div>
+                         </div>
+                      </router-link>
+            
+                      <!-- Card Variant 2: No Image (Text Only) -->
+                      <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 hover:shadow-xl hover:border-primary-100 transition-all duration-300 cursor-pointer active:scale-[0.99] group">
+                         <div class="flex items-center gap-3 mb-3">
+                            <span class="px-2 py-0.5 rounded text-xs font-bold bg-green-500 text-white">限免</span>
+                            <span class="text-xs font-bold text-teal-700 bg-teal-50 border border-teal-100 px-2 py-0.5 rounded-full">昆曲</span>
+                         </div>
+                         <h3 class="text-xl font-bold text-slate-900 mb-3 group-hover:text-primary-600 transition-colors">浅谈昆曲《牡丹亭》中的水磨腔艺术特点</h3>
+                         <p class="text-base text-slate-500 line-clamp-3 mb-6 leading-relaxed">昆曲之所以被称为“百戏之祖”，其细腻婉转的水磨腔功不可没。本文将从发音、吐字、行腔三个维度，带您领略昆曲的声韵之美...</p>
+                         <div class="flex items-center justify-between">
+                            <div class="flex items-center gap-3 text-sm text-slate-500">
+                               <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Li" class="w-7 h-7 rounded-full ring-2 ring-white">
+                               <span class="font-medium text-slate-700">梨园小生</span>
+                               <span class="text-slate-300">|</span>
+                               <span>昨天</span>
+                            </div>
+                            <div class="flex items-center gap-3">
+                               <span class="text-sm text-slate-400 line-through">¥ 5.00</span>
+                               <span class="px-3 py-1 bg-green-50 text-green-600 text-sm font-bold rounded-lg border border-green-100">限时免费</span>
+                            </div>
+                         </div>
+                      </div>
+            
+                      <!-- Card Variant 3: 3 Images -->
+                      <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 hover:shadow-xl hover:border-primary-100 transition-all duration-300 cursor-pointer active:scale-[0.99] group">
+                         <div class="flex items-center gap-2 mb-3">
+                            <span class="text-xs font-bold text-purple-700 bg-purple-50 border border-purple-100 px-2 py-0.5 rounded-full">图集</span>
+                         </div>
+                         <h3 class="text-xl font-bold text-slate-900 mb-4 group-hover:text-primary-600 transition-colors">2024 新年京剧晚会后台探班：名角云集</h3>
+                         <div class="grid grid-cols-3 gap-3 mb-6">
+                            <div class="aspect-[4/3] rounded-xl overflow-hidden bg-slate-100 shadow-inner">
+                               <img src="https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
+                            </div>
+                            <div class="aspect-[4/3] rounded-xl overflow-hidden bg-slate-100 shadow-inner">
+                               <img src="https://images.unsplash.com/photo-1533174072545-e8d4aa97edf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
+                            </div>
+                            <div class="aspect-[4/3] rounded-xl overflow-hidden bg-slate-100 relative shadow-inner">
+                               <img src="https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
+                               <div class="absolute inset-0 bg-black/40 flex items-center justify-center text-white font-bold text-lg">+9</div>
+                            </div>
+                         </div>
+                         <div class="flex items-center justify-between">
+                            <div class="flex items-center gap-3 text-sm text-slate-500">
+                               <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Photo" class="w-7 h-7 rounded-full ring-2 ring-white">
+                               <span class="font-medium text-slate-700">戏曲摄影师老王</span>
+                               <span class="text-slate-300">|</span>
+                               <span>3天前</span>
+                            </div>
+                            <span class="text-sm text-slate-400 font-medium"><i class="pi pi-eye mr-1"></i> 8.5k</span>
+                         </div>
+                      </div>
             <!-- Load More -->
             <div class="pt-4 text-center">
                <button
diff --git a/frontend/portal/src/views/TopicsView.vue b/frontend/portal/src/views/TopicsView.vue
index be89fcd..859a33b 100644
--- a/frontend/portal/src/views/TopicsView.vue
+++ b/frontend/portal/src/views/TopicsView.vue
@@ -1,6 +1,123 @@
 <template>
-  <div class="mx-auto max-w-screen-xl my-8 p-8 bg-white rounded-xl shadow-sm">
-    <h1 class="text-2xl font-bold mb-4">Topics</h1>
-    <p class="text-slate-400">(Topic list)</p>
+  <div class="mx-auto max-w-screen-xl py-8 min-h-screen px-4 sm:px-6 lg:px-8">
+    <div class="flex items-center justify-between mb-8">
+       <h1 class="text-2xl font-bold text-slate-900">精选专题</h1>
+       <div class="text-sm text-slate-500">共 {{ topics.length }} 个专题</div>
+    </div>
+
+    <!-- 1. Hero Topic -->
+    <div class="relative w-full h-[400px] rounded-2xl overflow-hidden mb-12 group cursor-pointer shadow-lg" @click="$router.push(`/explore?topic=${topics[0].id}`)">
+       <img :src="topics[0].cover" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
+       <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent"></div>
+       <div class="absolute bottom-0 left-0 p-10 max-w-3xl text-white">
+          <div class="flex items-center gap-3 mb-4">
+             <span class="px-3 py-1 bg-red-600 text-white text-xs font-bold rounded uppercase tracking-wider">本周主打</span>
+             <span class="text-sm font-medium opacity-80"># {{ topics[0].tag }}</span>
+          </div>
+          <h2 class="text-4xl font-bold mb-4 leading-tight">{{ topics[0].title }}</h2>
+          <p class="text-lg text-slate-200 line-clamp-2 mb-6 opacity-90">{{ topics[0].desc }}</p>
+          <div class="flex items-center gap-4">
+             <div class="flex -space-x-2">
+                <img v-for="i in 3" :key="i" :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${topics[0].id + i}`" class="w-8 h-8 rounded-full border-2 border-white/20 bg-white/10 backdrop-blur-sm">
+             </div>
+             <span class="text-sm font-medium">收录 {{ topics[0].count }} 篇精选内容 <i class="pi pi-arrow-right ml-1 text-xs"></i></span>
+          </div>
+       </div>
+    </div>
+
+    <!-- 2. Masonry-like Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+       <div v-for="(topic, idx) in topics.slice(1)" :key="topic.id" 
+            class="group bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden hover:shadow-xl transition-all cursor-pointer flex flex-col"
+            :class="{ 'lg:col-span-2 flex-row': idx === 0 }"
+            @click="$router.push(`/explore?topic=${topic.id}`)"
+       >
+          <!-- Cover -->
+          <div class="relative overflow-hidden" :class="idx === 0 ? 'w-1/2' : 'h-48'">
+             <img :src="topic.cover" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
+             <div class="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors"></div>
+             <div class="absolute top-4 left-4">
+                <span class="px-2 py-1 bg-white/90 backdrop-blur text-slate-800 text-xs font-bold rounded shadow-sm"># {{ topic.tag }}</span>
+             </div>
+          </div>
+          
+          <!-- Info -->
+          <div class="p-6 flex flex-col flex-1" :class="idx === 0 ? 'w-1/2 justify-center' : ''">
+             <div class="flex items-center justify-between mb-3 text-xs text-slate-400">
+                <span>更新于 {{ topic.date }}</span>
+                <span>{{ topic.count }} 篇内容</span>
+             </div>
+             <h3 class="text-xl font-bold text-slate-900 mb-3 group-hover:text-primary-600 transition-colors line-clamp-2">{{ topic.title }}</h3>
+             <p class="text-slate-500 text-sm leading-relaxed line-clamp-2 mb-6 flex-1">{{ topic.desc }}</p>
+             
+             <!-- Preview Thumbs (For large cards) -->
+             <div v-if="idx === 0" class="flex gap-2 mt-auto">
+                <div v-for="n in 3" :key="n" class="w-12 h-8 rounded bg-slate-100 overflow-hidden">
+                   <img :src="`https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60`" class="w-full h-full object-cover opacity-80">
+                </div>
+             </div>
+             
+             <!-- Footer (For small cards) -->
+             <div v-else class="flex items-center justify-between pt-4 border-t border-slate-50 mt-auto">
+                 <div class="flex -space-x-2">
+                    <img v-for="n in 2" :key="n" :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${topic.id + n}`" class="w-6 h-6 rounded-full border border-white bg-slate-50">
+                 </div>
+                 <span class="text-primary-600 text-sm font-bold group-hover:translate-x-1 transition-transform">浏览专题 <i class="pi pi-angle-right"></i></span>
+             </div>
+          </div>
+       </div>
+    </div>
   </div>
 </template>
+
+<script setup>
+import { ref } from 'vue';
+
+const topics = ref([
+    {
+        id: 1,
+        title: '程派艺术赏析：幽咽婉转后的风骨',
+        desc: '程砚秋先生创立的“程派”艺术，以其独特的发音技巧和深沉的情感表达著称。本专题精选《锁麟囊》、《荒山泪》等代表剧目，带您领略程腔的无穷魅力。',
+        cover: 'https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80',
+        tag: '流派精选',
+        date: '2025-01-01',
+        count: 12
+    },
+    {
+        id: 2,
+        title: '零基础戏曲身段教学：手眼身法步',
+        desc: '戏曲表演讲究“四功五法”。本专题专为初学者打造，从最基础的云手、台步开始，由名家亲自示范，助您打好戏曲表演的基本功。',
+        cover: 'https://images.unsplash.com/photo-1533174072545-e8d4aa97edf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
+        tag: '名家教学',
+        date: '2024-12-28',
+        count: 24
+    },
+    {
+        id: 3,
+        title: '昆曲《牡丹亭》：跨越四百年的爱恋',
+        desc: '“情不知所起，一往而深。” 汤显祖笔下的杜丽娘与柳梦梅，演绎了一段传颂千古的爱情神话。本专题汇集不同版本的高清全本实录。',
+        cover: 'https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
+        tag: '经典剧目',
+        date: '2024-12-15',
+        count: 8
+    },
+    {
+        id: 4,
+        title: '京剧打击乐：锣鼓经入门',
+        desc: '锣鼓是戏曲的灵魂。本专题将带您认识单皮鼓、大锣、铙钹等打击乐器，解析常见的锣鼓经及其在表演中的作用。',
+        cover: 'https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
+        tag: '器乐知识',
+        date: '2024-12-10',
+        count: 6
+    },
+    {
+        id: 5,
+        title: '地方戏曲巡礼：秦腔的高亢与悲壮',
+        desc: '秦腔是中国最古老的剧种之一，以其粗犷豪放的风格著称。让我们走进黄土高原，感受秦腔艺术的独特魅力。',
+        cover: 'https://images.unsplash.com/photo-1557683316-973673baf926?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
+        tag: '地方戏曲',
+        date: '2024-12-05',
+        count: 15
+    }
+]);
+</script>
\ No newline at end of file