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

12
frontend/portal/src/layout/LayoutMain.vue
View File

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

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

123
frontend/portal/src/views/TopicsView.vue
View File

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