feat(portal): implement structural content detail page with opera specific features and paywall
This commit is contained in:
@@ -1,10 +1,219 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Placeholder for Content Detail View -->
|
||||
<div class="bg-white p-8 rounded-xl shadow-sm border border-slate-100 mx-auto max-w-screen-xl my-8 text-center">
|
||||
<h1 class="text-2xl font-bold mb-4">Content Detail Page</h1>
|
||||
<p class="text-slate-500">ID: {{ $route.params.id }}</p>
|
||||
<p class="text-slate-400 mt-2">(Implementation pending based on PAGE_CONTENT_DETAIL.md)</p>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 py-8 items-start">
|
||||
|
||||
<!-- Main Content (Left 9) -->
|
||||
<div class="lg:col-span-9 space-y-6">
|
||||
<!-- Article Body -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-8 md:p-12 relative overflow-hidden">
|
||||
<!-- Header -->
|
||||
<div class="mb-8 border-b border-slate-100 pb-8">
|
||||
<div class="flex items-start justify-between gap-4 mb-4">
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-slate-900 leading-tight">
|
||||
<span class="text-primary-600 mr-2 text-2xl align-middle">[京剧]</span>
|
||||
《锁麟囊》春秋亭 · 二六
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<!-- Opera Meta -->
|
||||
<div class="flex flex-wrap gap-3 mb-6">
|
||||
<span class="px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-sm font-bold">行当: 青衣</span>
|
||||
<span class="px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-sm font-bold">定调: F大调</span>
|
||||
<span class="px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-sm font-bold">板式: 二六</span>
|
||||
</div>
|
||||
|
||||
<!-- Author & Tools -->
|
||||
<div class="flex items-center justify-between">
|
||||
<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 border border-slate-200">
|
||||
<div>
|
||||
<div class="font-bold text-slate-900 text-sm">梅派传人小林 <i class="pi pi-check-circle text-blue-500 text-xs"></i></div>
|
||||
<div class="text-xs text-slate-400">发布于 2025-12-24</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button @click="fontSize++" class="w-9 h-9 flex items-center justify-center rounded hover:bg-slate-100 text-slate-600" title="放大字体"><i class="pi pi-plus" style="font-size: 0.8rem"></i>A</button>
|
||||
<button @click="fontSize--" class="w-9 h-9 flex items-center justify-center rounded hover:bg-slate-100 text-slate-600" title="缩小字体"><i class="pi pi-minus" style="font-size: 0.8rem"></i>A</button>
|
||||
<div class="w-px h-4 bg-slate-200 mx-1"></div>
|
||||
<button class="w-9 h-9 flex items-center justify-center rounded hover:bg-slate-100 text-slate-600"><i class="pi pi-share-alt"></i></button>
|
||||
<button class="w-9 h-9 flex items-center justify-center rounded hover:bg-slate-100 text-slate-600"><i class="pi pi-bookmark"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Render -->
|
||||
<div class="prose prose-slate max-w-none text-slate-800" :style="{ fontSize: fontSize + 'px' }">
|
||||
<!-- Video Player (Trial) -->
|
||||
<div class="not-prose mb-8 rounded-xl overflow-hidden bg-black relative group aspect-video">
|
||||
<div class="absolute inset-0 flex items-center justify-center text-white" v-if="!isPlaying">
|
||||
<button @click="isPlaying = true" class="w-16 h-16 bg-white/20 hover:bg-white/30 backdrop-blur rounded-full flex items-center justify-center transition-all">
|
||||
<i class="pi pi-play text-3xl ml-1"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Mock Video UI -->
|
||||
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent flex items-center gap-4 text-white">
|
||||
<button class="text-white hover:text-primary-400"><i class="pi pi-play-circle text-2xl"></i></button>
|
||||
<div class="flex-1 h-1.5 bg-white/30 rounded-full relative overflow-hidden group/bar cursor-pointer">
|
||||
<!-- Trial Segment (Highlight) -->
|
||||
<div class="absolute top-0 left-0 h-full bg-primary-500 w-[30%]"></div>
|
||||
<!-- Locked Segment -->
|
||||
<div class="absolute top-0 right-0 h-full bg-slate-500/50 w-[70%] flex items-center justify-center">
|
||||
<i class="pi pi-lock text-[10px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs font-mono">01:30 / 05:00</span>
|
||||
</div>
|
||||
<!-- Paywall Overlay -->
|
||||
<div v-if="showPaywall" class="absolute inset-0 bg-black/80 backdrop-blur-sm flex flex-col items-center justify-center text-center p-8 z-20">
|
||||
<h3 class="text-white text-xl font-bold mb-2">试看已结束</h3>
|
||||
<p class="text-slate-300 text-sm mb-6">购买后可观看完整内容 (包含高清视频 + 完整剧本)</p>
|
||||
<button class="px-8 py-3 bg-primary-600 text-white rounded-full font-bold hover:bg-primary-700 shadow-lg shadow-primary-900/50 transition-transform hover:scale-105 active:scale-95">
|
||||
¥ 9.90 立即解锁
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>（白）听薛良一语，一似那金钟猛撞。</p>
|
||||
<p>（唱）春秋亭外风雨暴，何处悲声破寂寥。</p>
|
||||
|
||||
<!-- Script Block -->
|
||||
<div class="pl-6 border-l-4 border-primary-200 bg-slate-50 p-4 rounded-r-lg my-6 not-prose">
|
||||
<div class="flex gap-2">
|
||||
<span class="font-bold text-slate-900 flex-shrink-0">薛湘灵：</span>
|
||||
<span class="text-slate-700 leading-relaxed">
|
||||
隔帘只见一花轿，想必是新婚渡鹊桥。<br>
|
||||
吉日良辰当欢笑，为什么被珠泪抛？<br>
|
||||
此时却又明白了，<br>
|
||||
(白) 世上何尝尽富豪。<br>
|
||||
(唱) 也有饥寒悲怀抱，也有失意痛哭嚎啕。<br>
|
||||
轿内的人儿，命薄如纸，<br>
|
||||
苦煞了严亲，累煞了做娘的。
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Aria Block -->
|
||||
<div class="flex items-center gap-4 p-4 border border-purple-100 bg-purple-50 rounded-xl my-6 not-prose cursor-pointer hover:bg-purple-100 transition-colors">
|
||||
<div class="w-12 h-12 rounded-full bg-purple-600 text-white flex items-center justify-center flex-shrink-0 shadow-sm"><i class="pi pi-play"></i></div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-bold text-slate-900 truncate">名家示范：流水板式要点</div>
|
||||
<div class="text-xs text-purple-600 flex gap-2 mt-1 font-mono">
|
||||
<span class="bg-white px-1.5 rounded border border-purple-200">Key: F</span>
|
||||
<span class="bg-white px-1.5 rounded border border-purple-200">Beat: 1/4</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs text-slate-500 font-mono">00:45</span>
|
||||
</div>
|
||||
|
||||
<p>在这里，程派独特的“嗽音”运用得淋漓尽致，表现了湘灵对贫富无常的深刻感悟...</p>
|
||||
|
||||
<!-- Paywall Mask for Text -->
|
||||
<div class="relative mt-8 pt-20 pb-8 text-center" v-if="!isPurchased">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-white/90 to-white z-10"></div>
|
||||
<div class="relative z-20">
|
||||
<button class="px-10 py-3.5 bg-primary-600 text-white rounded-full font-bold text-lg hover:bg-primary-700 shadow-xl shadow-primary-100 transition-transform hover:scale-105 active:scale-95 flex items-center gap-2 mx-auto">
|
||||
<i class="pi pi-lock"></i> 购买解锁全文 ¥ 9.90
|
||||
</button>
|
||||
<p class="text-xs text-slate-400 mt-3">支持微信 / 支付宝</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Comments Section -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-xl font-bold text-slate-900">全部评论 (24)</h2>
|
||||
<div class="flex text-sm font-bold text-slate-400">
|
||||
<button class="text-slate-900 mr-4">最新</button>
|
||||
<button class="hover:text-slate-900">热门</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4 mb-8">
|
||||
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=User" class="w-10 h-10 rounded-full bg-slate-100">
|
||||
<div class="flex-1">
|
||||
<textarea rows="2" class="w-full p-3 rounded-lg border border-slate-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-100 outline-none resize-none transition-colors" placeholder="写下你的想法..."></textarea>
|
||||
<div class="flex justify-end mt-2">
|
||||
<button class="px-6 py-2 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 text-sm">发布</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div v-for="i in 3" :key="i" class="flex gap-4">
|
||||
<img :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${i}`" class="w-10 h-10 rounded-full bg-slate-100">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-bold text-slate-900 text-sm">戏迷_{{ i*92 }}</span>
|
||||
<span class="text-xs text-slate-400">1小时前</span>
|
||||
</div>
|
||||
<p class="text-slate-700 text-sm leading-relaxed mb-2">这段唱腔真是经典，张火丁老师的演绎太有味道了，反复听了十几遍！</p>
|
||||
<div class="flex gap-4 text-xs text-slate-500">
|
||||
<button class="hover:text-primary-600 flex items-center gap-1"><i class="pi pi-thumbs-up"></i> 12</button>
|
||||
<button class="hover:text-primary-600">回复</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar (Right 3) - Sticky -->
|
||||
<div class="lg:col-span-3 space-y-6 sticky top-24 h-fit">
|
||||
<!-- Author Card -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-6 text-center">
|
||||
<div class="w-20 h-20 rounded-full border-4 border-slate-50 mx-auto -mt-10 mb-4 bg-white shadow-sm overflow-hidden">
|
||||
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Master1" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<h3 class="font-bold text-slate-900 text-lg">梅派传人小林</h3>
|
||||
<p class="text-xs text-slate-500 mt-1 mb-4">专注京剧程派艺术传承与推广</p>
|
||||
<div class="flex justify-center gap-4 text-sm font-bold text-slate-900 mb-6">
|
||||
<div>125 <span class="text-xs text-slate-400 font-normal block">内容</span></div>
|
||||
<div>1.2w <span class="text-xs text-slate-400 font-normal block">关注</span></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<button class="py-2 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 shadow-sm shadow-primary-200">关注</button>
|
||||
<button class="py-2 border border-slate-200 text-slate-700 rounded-lg font-bold hover:bg-slate-50">私信</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TOC -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
|
||||
<h3 class="font-bold text-slate-900 mb-4">目录</h3>
|
||||
<div class="space-y-3 text-sm relative">
|
||||
<!-- Active Line -->
|
||||
<div class="absolute left-0 top-2 bottom-2 w-0.5 bg-slate-100"></div>
|
||||
|
||||
<a href="#" class="block pl-4 border-l-2 border-primary-600 text-primary-600 font-bold -ml-[1px]">唱段背景介绍</a>
|
||||
<a href="#" class="block pl-4 border-l-2 border-transparent text-slate-600 hover:text-slate-900 hover:border-slate-300">发音技巧解析</a>
|
||||
<a href="#" class="block pl-4 border-l-2 border-transparent text-slate-600 hover:text-slate-900 hover:border-slate-300">逐句示范 (00:45)</a>
|
||||
<a href="#" class="block pl-4 border-l-2 border-transparent text-slate-600 hover:text-slate-900 hover:border-slate-300">完整伴奏下载</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Related -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
|
||||
<h3 class="font-bold text-slate-900 mb-4">相关推荐</h3>
|
||||
<div class="space-y-4">
|
||||
<div v-for="i in 3" :key="i" class="flex gap-3 group cursor-pointer">
|
||||
<img src="https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" class="w-20 h-14 object-cover rounded bg-slate-100 flex-shrink-0">
|
||||
<div>
|
||||
<h4 class="text-sm font-bold text-slate-900 line-clamp-2 group-hover:text-primary-600 leading-snug">程派《荒山泪》夜织选段</h4>
|
||||
<span class="text-xs text-slate-400 mt-1 block">8.5k 阅读</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const fontSize = ref(18); // Default 18px
|
||||
const isPlaying = ref(false);
|
||||
const showPaywall = ref(true); // Simulate trial ended
|
||||
const isPurchased = ref(false); // Simulate paid content
|
||||
</script>
|
||||
Reference in New Issue
Block a user