rogee/quyun-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(portal): 更新主题视图，增加精选专题展示和响应式布局

Browse Source
This commit is contained in:
Rogee
2025-12-26 22:15:28 +08:00
parent 83f725c0b2
commit a6e737fdaf
3 changed files with 213 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
frontend/portal/src/views/HomeView.vue
View File

@@ -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