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

initial commit

Browse Source
This commit is contained in:
xiaomai
2025-10-01 16:52:52 +08:00
commit e93b931288
35 changed files with 12784 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
app/components/AppFooter.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<!-- 页脚 -->
<footer class="bg-gray-900 text-gray-300 py-6">
<div class="max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center">
<!-- 左侧版权信息 -->
<div class="text-center md:text-left">
<p>© 2025 永平中学校友会. 保留所有权利.</p>
</div>
<div class="">
<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 text-gray-400">18 级毕业学长（麦祖奕）</span>
</p>
</div>
<!-- 右侧社交链接 -->
<div class="flex space-x-4 mt-3 md:mt-0">
<a href="#">
<Icon name="mdi-facebook" />
</a>
<a href="#">
<Icon name="mdi-instagram" />
</a>
<a href="#">
<Icon name="mdi-gmail" />
</a>
</div>
</div>
</footer>
</template>
<script lang="ts" setup>
</script>
<style></style>

25
app/components/AppHeader.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<!-- 导航栏 -->
<header class="bg-white shadow-md sticky top-0 z-50">
<div class="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
<div>
<img class="inline w-16" src="/Logo.svg" alt="YPHS Alumni">
<h1 class="inline text-xl font-bold text-gray-900">
<a href="/" class="ml-4 hover:text-secondary">永平中学校友会</a>
</h1>
</div>
<nav class="space-x-6 hidden md:flex items-center">
<a href="#news" class="hover:text-secondary">新闻</a>
<a href="#events" class="hover:text-secondary">活动</a>
<a href="#donate" class="hover:text-secondary">捐赠</a>
<a href="#about" class="hover:text-secondary">关于</a>
<a href="/join-us"
class="inline-flex items-center gap-2 bg-secondary text-white px-4 py-2 rounded-xl shadow hover:opacity-90">
加入
<Icon name="mdi:account-plus" class="w-5 h-5" />
</a>
</nav>
</div>
</header>
</template>

17
app/components/index/About.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<div>
<!-- 关于我们 -->
<section id="about" class="max-w-6xl mx-auto py-16 px-4">
<h3 class="text-2xl font-bold text-gray-900 mb-4">关于校友会</h3>
<p class="text-gray-700 leading-relaxed">
永平中学校友会成立的宗旨是连接全球校友，传承母校精神，支持在校学生成长。我们定期举办活动，推动交流与合作，并积极回馈母校。
</p>
</section>
</div>
</template>
<script lang="ts" setup>
</script>
<style></style>

16
app/components/index/Donate.vue Normal file
View File

@@ -0,0 +1,16 @@
<template>
<div>
<!-- 捐赠模块 -->
<section id="donate" class="py-16 text-center bg-[var(--color-primary)]">
<h3 class="text-2xl font-bold text-gray-900 mb-4">支持与捐赠</h3>
<p class="max-w-2xl mx-auto text-gray-700 mb-6">您的捐赠将用于奖学金、校园建设及校友活动发展。感谢您对母校的支持！</p>
<a href="#" class="bg-[var(--color-secondary)] text-white px-8 py-3 rounded-xl shadow hover:opacity-90">立即捐赠</a>
</section>
</div>
</template>
<script lang="ts" setup>
</script>
<style></style>

29
app/components/index/Events.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<div>
<!-- 活动模块 -->
<section id="events" class="bg-gray-100 py-16">
<div class="max-w-6xl mx-auto px-4">
<h3 class="text-2xl font-bold text-gray-900 mb-6">校友活动</h3>
<div class="grid md:grid-cols-3 gap-6">
<div v-for="event in events" :key="event.id" class="bg-white shadow rounded-xl p-6">
<h4 class="font-semibold text-lg mb-2">{{ event.title }}</h4>
<p class="text-sm text-gray-600 mb-1">日期：{{ useChineseDateFormat(event.date) }}</p>
<p class="text-sm text-gray-600 mb-4">地点：{{ event.location }}</p>
<a :href="event.path" class="bg-secondary text-white px-5 py-2 rounded-lg hover:opacity-90">阅读详情</a>
</div>
</div>
</div>
</section>
</div>
</template>
<script lang="ts" setup>
const { data: events } = await useAsyncData('events', () =>
queryCollection('events')
.order("date", "DESC")
.limit(3)
.all()
)
</script>
<style></style>

35
app/components/index/Hero.vue Normal file
View File

@@ -0,0 +1,35 @@
<template>
<div>
<!-- Hero Banner -->
<section class="relative bg-primary py-32 md:py-48 lg:py-64 text-center bg-cover bg-center"
style="background-image: url('http://img.tootaio.com/i/2025/10/01/nu13l1.jpg');">
<!-- 遮罩 -->
<div class="absolute inset-0 bg-black/40"></div>
<!-- 内容 -->
<div class="relative z-10 max-w-3xl mx-auto px-4">
<h2 class="text-3xl md:text-5xl font-extrabold text-white drop-shadow-lg">
连接校友 · 传承精神
</h2>
<p class="mt-4 text-lg text-gray-100">
马来西亚柔佛永平中学校友会官方网站
</p>
<div class="mt-6 space-x-4">
<a href="/join-us" class="bg-secondary text-white px-6 py-3 rounded-xl shadow hover:opacity-90">
立即加入我们
</a>
<a href="#donate"
class="bg-white border-2 border-secondary text-secondary px-6 py-3 rounded-xl hover:bg-secondary hover:text-white">
支持捐赠
</a>
</div>
</div>
</section>
</div>
</template>
<script lang="ts" setup>
</script>
<style></style>

34
app/components/index/News.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div>
<!-- 新闻公告 -->
<section id="news" class="max-w-6xl mx-auto py-16 px-4">
<h2 class="text-2xl font-bold text-gray-900 mb-6">最新新闻与公告</h2>
<div class="grid md:grid-cols-3 gap-6">
<article v-for="n in news" :key="n.id" @click="jumpToNewsDetail(n.stem)"
class="bg-white rounded-xl shadow p-5 cursor-pointer transition transform hover:-translate-y-1 hover:scale-105 hover:shadow-xl duration-300 ease-in-out">
<h3 class="font-semibold mb-2">{{ n.title }}</h3>
<div class="px-1 w-max bg-primary/25 border-primary border-2 rounded-xl text-secondary text-sm mb-2">{{
useChineseDateFormat(n.date) }}</div>
<p class="text-sm text-gray-600">{{ n.description }}</p>
</article>
</div>
</section>
</div>
</template>
<script lang="ts" setup>
const { data: news } = await useAsyncData('news', () =>
queryCollection('news')
.order("date", "DESC")
.limit(3)
.all()
)
const router = useRouter();
const jumpToNewsDetail = (newsPath: string) => {
router.push(newsPath);
}
</script>
<style></style>