253 lines
18 KiB
Vue
253 lines
18 KiB
Vue
<template>
|
||
<div class="mx-auto max-w-screen-xl py-8">
|
||
<!-- Hero Banner -->
|
||
<div class="relative w-full h-[400px] rounded-2xl overflow-hidden bg-slate-900 mb-8 group">
|
||
<!-- Mock Carousel Image -->
|
||
<img
|
||
src="https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
|
||
class="w-full h-full object-cover opacity-80 transition-transform duration-700 group-hover:scale-105"
|
||
alt="Banner">
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
|
||
<div class="absolute bottom-0 left-0 p-10 max-w-2xl text-white">
|
||
<div class="inline-block px-3 py-1 bg-red-600 text-white text-xs font-bold rounded mb-3">置顶推荐</div>
|
||
<h2 class="text-4xl font-bold mb-4 leading-tight">京剧《霸王别姬》全本实录：程派艺术的巅峰演绎</h2>
|
||
<p class="text-lg text-slate-200 line-clamp-2">梅兰芳大师经典之作，高清修复版独家上线。感受国粹魅力，重温梨园风华。</p>
|
||
</div>
|
||
<!-- Arrows (Always visible as per spec) -->
|
||
<button
|
||
class="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-black/30 hover:bg-black/50 text-white rounded-full flex items-center justify-center backdrop-blur-sm transition-all"><i
|
||
class="pi pi-chevron-left text-xl"></i></button>
|
||
<button
|
||
class="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-black/30 hover:bg-black/50 text-white rounded-full flex items-center justify-center backdrop-blur-sm transition-all"><i
|
||
class="pi pi-chevron-right text-xl"></i></button>
|
||
<!-- Indicators -->
|
||
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-white"></span>
|
||
<span class="w-2 h-2 rounded-full bg-white/50"></span>
|
||
<span class="w-2 h-2 rounded-full bg-white/50"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Filter Bar -->
|
||
<div class="mb-8">
|
||
<div class="flex items-center gap-8 border-b border-slate-200 pb-4 mb-4">
|
||
<button
|
||
class="text-lg font-bold text-primary-600 border-b-2 border-primary-600 -mb-4.5 pb-4 px-2">推荐</button>
|
||
<button
|
||
class="text-lg font-medium text-slate-500 hover:text-slate-800 -mb-4.5 pb-4 px-2 transition-colors">最新</button>
|
||
<button
|
||
class="text-lg font-medium text-slate-500 hover:text-slate-800 -mb-4.5 pb-4 px-2 transition-colors">热门</button>
|
||
</div>
|
||
<!-- Tags -->
|
||
<div class="flex flex-wrap gap-3">
|
||
<button class="px-4 py-1.5 rounded-full bg-slate-900 text-white text-sm font-medium">全部</button>
|
||
<button
|
||
class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors">京剧</button>
|
||
<button
|
||
class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors">昆曲</button>
|
||
<button
|
||
class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors">越剧</button>
|
||
<button
|
||
class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors">名家名段</button>
|
||
<button
|
||
class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors">戏曲教学</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Layout: Grid 9:3 -->
|
||
<div class="grid grid-cols-12 gap-8">
|
||
<!-- 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-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
|
||
class="px-8 py-3 bg-white border border-slate-200 rounded-full text-slate-600 hover:bg-slate-50 hover:text-primary-600 font-medium transition-all shadow-sm">
|
||
点击加载更多内容
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sidebar (Right 3) -->
|
||
<div class="hidden lg:block lg:col-span-4 xl:col-span-3 space-y-6">
|
||
<!-- Announcement -->
|
||
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5">
|
||
<h3 class="font-bold text-slate-900 mb-4 flex items-center gap-2">
|
||
<i class="pi pi-megaphone text-orange-500"></i> 公告
|
||
</h3>
|
||
<ul class="space-y-3 text-sm text-slate-600">
|
||
<li class="line-clamp-1 hover:text-primary-600 cursor-pointer">• 关于调整创作者收益结算周期的通知</li>
|
||
<li class="line-clamp-1 hover:text-primary-600 cursor-pointer">• “国粹传承”戏曲短视频大赛开启！</li>
|
||
<li class="line-clamp-1 hover:text-primary-600 cursor-pointer">• 平台系统维护升级公告 (12.30)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Recommended Tenants -->
|
||
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5">
|
||
<h3 class="font-bold text-slate-900 mb-4">推荐名家</h3>
|
||
<div class="space-y-4">
|
||
<div class="flex items-center gap-3">
|
||
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Master1" class="w-10 h-10 rounded-full">
|
||
<div class="flex-1 min-w-0">
|
||
<div class="font-bold text-slate-900 text-sm truncate">梅派传人小林</div>
|
||
<div class="text-xs text-slate-500 truncate">粉丝 12.5万</div>
|
||
</div>
|
||
<button
|
||
class="px-3 py-1 bg-primary-50 text-primary-600 text-xs font-bold rounded-full hover:bg-primary-100">关注</button>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Master2" class="w-10 h-10 rounded-full">
|
||
<div class="flex-1 min-w-0">
|
||
<div class="font-bold text-slate-900 text-sm truncate">豫剧李大师</div>
|
||
<div class="text-xs text-slate-500 truncate">粉丝 8.9万</div>
|
||
</div>
|
||
<button
|
||
class="px-3 py-1 bg-primary-50 text-primary-600 text-xs font-bold rounded-full hover:bg-primary-100">关注</button>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Master3" class="w-10 h-10 rounded-full">
|
||
<div class="flex-1 min-w-0">
|
||
<div class="font-bold text-slate-900 text-sm truncate">越剧小生阿强</div>
|
||
<div class="text-xs text-slate-500 truncate">粉丝 5.2万</div>
|
||
</div>
|
||
<button class="px-3 py-1 bg-slate-100 text-slate-400 text-xs font-bold rounded-full">已关注</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Trending List -->
|
||
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5">
|
||
<h3 class="font-bold text-slate-900 mb-4 flex items-center gap-2">
|
||
<i class="pi pi-chart-line text-red-500"></i> 本周热门
|
||
</h3>
|
||
<ul class="space-y-4">
|
||
<li class="flex gap-3 items-start">
|
||
<span class="text-red-500 font-bold italic text-lg w-4">1</span>
|
||
<div class="flex-1">
|
||
<h4
|
||
class="text-sm font-medium text-slate-800 line-clamp-2 hover:text-primary-600 cursor-pointer">
|
||
《智取威虎山》选段：今日痛饮庆功酒</h4>
|
||
<span class="text-xs text-slate-400 mt-1 block">15.2万 阅读</span>
|
||
</div>
|
||
</li>
|
||
<li class="flex gap-3 items-start">
|
||
<span class="text-orange-500 font-bold italic text-lg w-4">2</span>
|
||
<div class="flex-1">
|
||
<h4
|
||
class="text-sm font-medium text-slate-800 line-clamp-2 hover:text-primary-600 cursor-pointer">
|
||
【深度解析】京剧脸谱颜色的含义</h4>
|
||
<span class="text-xs text-slate-400 mt-1 block">9.8万 阅读</span>
|
||
</div>
|
||
</li>
|
||
<li class="flex gap-3 items-start">
|
||
<span class="text-yellow-500 font-bold italic text-lg w-4">3</span>
|
||
<div class="flex-1">
|
||
<h4
|
||
class="text-sm font-medium text-slate-800 line-clamp-2 hover:text-primary-600 cursor-pointer">
|
||
黄梅戏《女驸马》全场高清</h4>
|
||
<span class="text-xs text-slate-400 mt-1 block">7.5万 阅读</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Ad / Promo -->
|
||
<div class="rounded-xl overflow-hidden shadow-sm">
|
||
<img
|
||
src="https://images.unsplash.com/photo-1557683316-973673baf926?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
|
||
class="w-full h-40 object-cover">
|
||
<div class="bg-white p-3 flex justify-between items-center">
|
||
<span class="text-xs text-slate-400 border border-slate-200 px-1 rounded">广告</span>
|
||
<span class="text-sm font-medium text-slate-700">戏曲周边商城上线啦</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|