09ec61e315
This commit adds the '名人堂' (Hall of Fame) feature and removes the Element Plus dependency. - feat(content): Add Hall of Fame section with a new content collection, homepage component, and detail pages. - refactor(join-us): Rewrite the 'Join Us' form to remove Element Plus, using native elements and Reka UI. The form is temporarily disabled. - feat(ui): Display cover images on News and Events cards. - chore: Integrate Umami for web analytics. - fix: Correct minor text issues, including graduation year in the footer.
45 lines
1.7 KiB
Vue
45 lines
1.7 KiB
Vue
<template>
|
|
<div>
|
|
<section class="py-20 px-4">
|
|
<div class="container mx-auto max-w-6xl">
|
|
<!-- 内容渲染器 -->
|
|
<div class="prose prose-invert prose-lg max-w-none">
|
|
<ContentRenderer :value="person ?? {}">
|
|
<template #empty>
|
|
<div class="text-center py-12">
|
|
<p class="text-gray-400 text-xl">内容加载中...</p>
|
|
</div>
|
|
</template>
|
|
</ContentRenderer>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- 媒体展示区域 -->
|
|
<section class="py-20 px-4">
|
|
<div class="mt-16 container mx-auto max-w-6xl">
|
|
<h2 class="text-3xl font-orbitron font-bold mb-8 text-center">图集</h2>
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
|
<div v-for="i in person?.gallery" :key="i" class="group relative overflow-hidden rounded-xl cursor-pointer">
|
|
<img :src="i" :alt="`游戏截图 ${i}`"
|
|
class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110" />
|
|
<div
|
|
class="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-all duration-300 flex items-center justify-center">
|
|
<Icon name="mdi:like" class="w-12 h-12 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const route = useRoute()
|
|
const { data: person } = await useAsyncData('hall-of-fames-detail', () =>
|
|
queryCollection('hallOfFames')
|
|
.path(`/hall-of-fames/${route.params.slug}`)
|
|
.first()
|
|
)
|
|
</script>
|
|
|
|
<style></style> |