Kingsmai/yphsalumni.org
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): adopt Nuxt UI components for homepage and layout

Browse Source 
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`.
This commit is contained in:
xiaomai
2025-10-23 09:16:59 +08:00
parent e7f2bc2c47
commit 6473bdcc15
10 changed files with 188 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
app/components/index/HallOfFame.vue
View File

@@ -1,31 +1,33 @@
<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-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 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>
</section>
</div>
</div>
</UPageSection>
</template>
<script lang="ts" setup>
const { data: persons } = await useAsyncData('hall-of-fames', () =>
queryCollection('hallOfFames')
.limit(4)
.all()
)
const { data: persons } = await useAsyncData("hall-of-fames", () =>
queryCollection("hallOfFames").limit(4).all()
);
var router = useRouter()
var router = useRouter();
const jumpToPersonIntro = (path: string) => {
router.push(path)
}
router.push(path);
};
</script>
<style></style>
<style></style>