91 lines
5.3 KiB
PHP
91 lines
5.3 KiB
PHP
@props(['post', 'featured' => false])
|
|
|
|
<article class="{{ $featured ? 'group relative overflow-hidden rounded-3xl bg-white shadow-xl' : 'group' }}">
|
|
@if($featured)
|
|
<!-- Featured Post Card -->
|
|
<a href="{{ route('post.show', $post) }}" class="block">
|
|
<div class="aspect-[4/5] sm:aspect-[3/4] relative overflow-hidden">
|
|
@if($post->display_image)
|
|
<img src="{{ Storage::url($post->display_image) }}"
|
|
alt="{{ $post->title }}"
|
|
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
|
|
@else
|
|
<div class="w-full h-full bg-gradient-to-br from-rose-100 via-fuchsia-100 to-indigo-100 flex items-center justify-center">
|
|
<svg class="w-16 h-16 text-fuchsia-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Overlay -->
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
|
|
|
|
<!-- Content -->
|
|
<div class="absolute bottom-0 left-0 right-0 p-6 sm:p-8">
|
|
@if($post->category)
|
|
<span class="inline-block px-3 py-1 text-xs font-medium bg-white/20 backdrop-blur-md text-white rounded-full mb-3">
|
|
{{ $post->category->name }}
|
|
</span>
|
|
@endif
|
|
<h3 class="text-xl sm:text-2xl font-serif font-semibold text-white mb-2 line-clamp-2">{{ $post->title }}</h3>
|
|
<p class="text-stone-300 text-sm line-clamp-2 mb-4">{{ $post->excerpt }}</p>
|
|
<div class="flex items-center text-stone-400 text-sm">
|
|
<span>{{ $post->published_at?->format('Y年m月d日') }}</span>
|
|
<span class="mx-2">·</span>
|
|
<span>{{ $post->reading_time }} 分钟阅读</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
@else
|
|
<!-- Regular Post Card -->
|
|
<a href="{{ route('post.show', $post) }}" class="block">
|
|
<div class="aspect-square relative overflow-hidden rounded-2xl bg-stone-100 mb-4">
|
|
@if($post->display_image)
|
|
<img src="{{ Storage::url($post->display_image) }}"
|
|
alt="{{ $post->title }}"
|
|
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
|
@else
|
|
<div class="w-full h-full bg-gradient-to-br from-rose-50 via-fuchsia-50 to-indigo-50 flex items-center justify-center">
|
|
<svg class="w-12 h-12 text-fuchsia-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Gallery indicator -->
|
|
@if($post->gallery && count($post->gallery) > 1)
|
|
<div class="absolute top-3 right-3 p-2 bg-black/40 backdrop-blur-sm rounded-lg">
|
|
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Hover overlay -->
|
|
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-300"></div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
@if($post->category)
|
|
<span class="inline-block text-xs font-medium text-fuchsia-600 uppercase tracking-wider">
|
|
{{ $post->category->name }}
|
|
</span>
|
|
@endif
|
|
<h3 class="font-serif text-lg font-medium text-stone-900 line-clamp-2 group-hover:text-fuchsia-700 transition-colors">
|
|
{{ $post->title }}
|
|
</h3>
|
|
<p class="text-sm text-stone-500 line-clamp-2">{{ $post->excerpt }}</p>
|
|
<div class="flex items-center text-xs text-stone-400 pt-1">
|
|
<span>{{ $post->published_at?->format('Y/m/d') }}</span>
|
|
@if($post->views_count > 0)
|
|
<span class="mx-2">·</span>
|
|
<span>{{ number_format($post->views_count) }} 阅读</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</a>
|
|
@endif
|
|
</article>
|
|
|