feat(app): introduce Hall of Fame section and refactor UI
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.
This commit is contained in:
45
app/pages/hall-of-fames/[slug].vue
Normal file
45
app/pages/hall-of-fames/[slug].vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user