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:
31
app/components/index/HallOfFame.vue
Normal file
31
app/components/index/HallOfFame.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
<section id="hall-of-fame" class="py-16">
|
||||
<div class="max-w-6xl mx-auto px-4">
|
||||
<h3 class="text-2xl font-bold text-center text-gray-900 mb-6">名人堂</h3>
|
||||
<div class="grid md:grid-cols-4 gap-6">
|
||||
<div v-for="person in persons" :key="person.id" class="flex flex-col items-center cursor-pointer transition hover:scale-105 hover:drop-shadow-2xl hover:-translate-y-1" @click="jumpToPersonIntro(person.path)">
|
||||
<img :src="person.photo" :alt="person.name" class="w-40 rounded-full border-secondary border-4" />
|
||||
<h4 class="text-lg font-bold">{{ person.name }}</h4>
|
||||
<p class="text-sm text-gray-500">{{ person.title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const { data: persons } = await useAsyncData('hall-of-fames', () =>
|
||||
queryCollection('hallOfFames')
|
||||
.limit(4)
|
||||
.all()
|
||||
)
|
||||
|
||||
var router = useRouter()
|
||||
const jumpToPersonIntro = (path: string) => {
|
||||
router.push(path)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user