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`.
75 lines
2.1 KiB
Vue
75 lines
2.1 KiB
Vue
<template>
|
||
<UPage>
|
||
<UHeader>
|
||
<template #left>
|
||
<img class="inline h-12 w-auto" src="/Logo.svg" alt="YPHS Alumni" />
|
||
<h1 class="inline text-xl font-bold text-gray-900">
|
||
<a href="/" class="ml-4 hover:text-primary">永平中学校友会</a>
|
||
</h1>
|
||
</template>
|
||
<template #right>
|
||
<nav class="space-x-6 hidden md:flex items-center">
|
||
<UNavigationMenu :items="items" />
|
||
<a
|
||
href="/join-us"
|
||
class="inline-flex items-center gap-2 bg-primary text-white px-4 py-2 rounded-xl shadow hover:opacity-90"
|
||
>
|
||
加入
|
||
<Icon name="mdi:account-plus" class="w-5 h-5" />
|
||
</a>
|
||
</nav>
|
||
</template>
|
||
</UHeader>
|
||
<UMain>
|
||
<slot />
|
||
</UMain>
|
||
<UFooter>
|
||
<template #left>
|
||
<p>© 2025 永平中学校友会. 保留所有权利.</p>
|
||
</template>
|
||
|
||
<template #default>
|
||
<p class="mt-1">
|
||
Powered by:
|
||
<a
|
||
href="https://tootaio.com"
|
||
target="_blank"
|
||
class="font-semibold hover:underline"
|
||
style="color: #e24545"
|
||
>
|
||
Tootaio Studio
|
||
</a>
|
||
<span class="mt-1 text-sm"
|
||
>2018 级毕业学长（麦祖奕）</span
|
||
>
|
||
</p>
|
||
</template>
|
||
|
||
<template #right>
|
||
<a href="#">
|
||
<Icon name="mdi-facebook" />
|
||
</a>
|
||
<a href="#">
|
||
<Icon name="mdi-instagram" />
|
||
</a>
|
||
<a href="#">
|
||
<Icon name="mdi-gmail" />
|
||
</a>
|
||
</template>
|
||
</UFooter>
|
||
</UPage>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { NavigationMenuItem } from "@nuxt/ui";
|
||
|
||
const route = useRoute();
|
||
|
||
const items = computed<NavigationMenuItem[]>(() => [
|
||
{ label: "新闻", to: "#news", active: route.path.startsWith("#news") },
|
||
{ label: "活动", to: "#events", active: route.path.startsWith("#events") },
|
||
{ label: "捐赠", to: "#donate", active: route.path.startsWith("#donate") },
|
||
{ label: "关于", to: "#about", active: route.path.startsWith("#about") },
|
||
]);
|
||
</script>
|