71 lines
2.8 KiB
Vue
71 lines
2.8 KiB
Vue
<template>
|
||
<section class="page-section block animate-slide-down">
|
||
<div class="max-w-6xl mx-auto pt-32 px-6 pb-20">
|
||
<div class="mb-16 text-center">
|
||
<h2 class="font-serif text-5xl italic text-white mb-6">专栏</h2>
|
||
<p class="text-art-muted max-w-lg mx-auto mb-8">系列文章集合，系统性地学习。</p>
|
||
</div>
|
||
|
||
<!-- Loading state -->
|
||
<div v-if="loading" class="flex justify-center items-center h-64">
|
||
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-art-accent"></div>
|
||
</div>
|
||
|
||
<!-- Columns Grid -->
|
||
<div v-else class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<div
|
||
v-for="column in columns"
|
||
:key="column.id"
|
||
class="group relative overflow-hidden rounded-xl border border-white/5 bg-white/5 aspect-[16/9] cursor-pointer"
|
||
@click="router.push(`/columns/${column.id}`)"
|
||
>
|
||
<!-- Cover Image -->
|
||
<div
|
||
v-if="column.cover"
|
||
class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105"
|
||
:style="{ backgroundImage: `url(${column.cover})` }"
|
||
>
|
||
<div class="absolute inset-0 bg-black/60 group-hover:bg-black/50 transition-colors duration-500"></div>
|
||
</div>
|
||
<div v-else class="absolute inset-0 bg-gradient-to-br from-white/5 to-white/10 group-hover:from-white/10 group-hover:to-white/20 transition-colors"></div>
|
||
|
||
<!-- Content -->
|
||
<div class="absolute inset-0 p-8 flex flex-col justify-end">
|
||
<h3 class="text-3xl font-serif text-white mb-3 group-hover:text-art-accent transition-colors">{{ column.name }}</h3>
|
||
<p class="text-art-muted leading-relaxed line-clamp-2">{{ column.description || '暂无描述' }}</p>
|
||
<div class="mt-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform translate-y-2 group-hover:translate-y-0">
|
||
<span class="text-xs font-bold tracking-widest uppercase text-white border-b border-art-accent pb-1">查看详情</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="!loading && columns.length === 0" class="text-center py-20 text-art-muted">
|
||
暂无专栏
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { fetchColumns, Column } from '../services/api'
|
||
|
||
const router = useRouter()
|
||
const columns = ref<Column[]>([])
|
||
const loading = ref(true)
|
||
|
||
onMounted(async () => {
|
||
try {
|
||
const data = await fetchColumns()
|
||
// Filter active columns
|
||
columns.value = data.filter(c => c.isActive === 1)
|
||
} catch (error) {
|
||
console.error('Failed to fetch columns:', error)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
})
|
||
</script>
|