567c9ef9c9
Converts the website from a single-page design with anchor links to a full multi-page application. This change improves site organization, navigation, and scalability. - Adds new top-level pages: `/news`, `/events`, and `/about`. - Introduces a new section for the 40th Anniversary at `/40th-anniversary`, including a proposal sub-page. - Updates the default layout with a new navigation menu, a promotional banner, social links, and page transitions.
62 lines
2.0 KiB
Vue
62 lines
2.0 KiB
Vue
<template>
|
|
<UPage>
|
|
<UPageBody>
|
|
<UContainer>
|
|
<UPageHeader
|
|
title="关于校友会"
|
|
description="永平中学校友会成立的宗旨是连接全球校友，传承母校精神，支持在校学生成长。我们定期举办活动，推动交流与合作，并积极回馈母校。"
|
|
/>
|
|
|
|
<UPageSection
|
|
title="会徽"
|
|
description="你了解校友会会徽的含义吗"
|
|
:features="logoFeatures"
|
|
orientation="horizontal"
|
|
>
|
|
<img class="size-88" src="/Logo.svg" alt="YPHS Alumni" />
|
|
</UPageSection>
|
|
|
|
<UPageSection
|
|
title="永平中学校歌"
|
|
description="这首伴随着我们整个中学生涯的曲子，想必能勾起您不少的青春回忆吧！"
|
|
orientation="horizontal"
|
|
reverse
|
|
>
|
|
<div class="flex flex-col gap-y-8">
|
|
<img class="w-full" src="/about/校歌.webp" alt="YPHS Alumni" />
|
|
<div class="flex items-center gap-x-8">
|
|
<p>伴奏版</p>
|
|
<audio
|
|
controls
|
|
class="flex-1"
|
|
src="/about/永平中学校歌.mp3"
|
|
></audio>
|
|
</div>
|
|
<div class="flex items-center gap-x-8">
|
|
<p>咏唱版</p>
|
|
<audio
|
|
controls
|
|
class="flex-1"
|
|
src="/about/YongPing_SchoolSong_V2.mp3"
|
|
></audio>
|
|
</div>
|
|
</div>
|
|
</UPageSection>
|
|
</UContainer>
|
|
</UPageBody>
|
|
</UPage>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type { PageFeatureProps } from "@nuxt/ui";
|
|
|
|
const logoFeatures = ref<PageFeatureProps[]>([
|
|
{ title: "九轮", description: "永久随时代齿轮前进" },
|
|
{ title: "太阳九条线", description: "久久发出光芒照耀华友" },
|
|
{ title: "三个菱形", description: "代表校友、董事会及社会人士团结一致" },
|
|
{ title: "两道绿叶", description: "代表组织团结、不断茁壮成长" },
|
|
]);
|
|
</script>
|
|
|
|
<style></style>
|