6473bdcc15
This commit refactors the main layout and homepage to utilize components from the Nuxt UI library, simplifying the codebase and reducing custom boilerplate. - The default layout is now built with `UPage`, `UHeader`, `UMain`, and `UFooter`. - The homepage (`pages/index.vue`) has been updated to use `UPageHero` and `UBlogPosts`. - The `IndexHero` and `IndexNews` components have been removed as their functionality is now integrated directly into the index page. - `Donate`, `Events`, and `HallOfFame` components are now wrapped with `UPageCTA` or `UPageSection`.
34 lines
935 B
Vue
34 lines
935 B
Vue
<template>
|
|
<UPageSection title="名人堂">
|
|
<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-primary border-4"
|
|
/>
|
|
<h4 class="text-lg font-bold">{{ person.name }}</h4>
|
|
<p class="text-sm text-gray-500">{{ person.title }}</p>
|
|
</div>
|
|
</div>
|
|
</UPageSection>
|
|
</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>
|