7bcabb0c71
Adds a responsive header with a mobile navigation menu to improve usability on small screens. This also includes adding a new event page, updating an existing event with a schedule, and refactoring the 'Donate' CTA by inlining it on the homepage.
90 lines
2.3 KiB
Vue
90 lines
2.3 KiB
Vue
<template>
|
||
<UPage>
|
||
<UHeader>
|
||
<template #left>
|
||
<NuxtLink to="/">
|
||
<div class="flex gap-4 items-center">
|
||
<img class="inline h-12 w-auto" src="/Logo.svg" alt="YPHS Alumni" />
|
||
<h1
|
||
class="inline text-xl font-bold text-gray-900 hover:text-primary"
|
||
>
|
||
永平中学校友会
|
||
</h1>
|
||
</div>
|
||
</NuxtLink>
|
||
</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>
|
||
|
||
<template #body>
|
||
<UNavigationMenu
|
||
:items="items"
|
||
orientation="vertical"
|
||
class="-mx-2.5"
|
||
/>
|
||
</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>
|