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`.
67 lines
1.7 KiB
Vue
67 lines
1.7 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Hero Banner -->
|
|
<UPageHero
|
|
class="bg-cover bg-center"
|
|
style="
|
|
background-image: url("/hero-image.jpg");
|
|
background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent black */
|
|
background-blend-mode: lighten;
|
|
"
|
|
title="连接校友 · 传承精神"
|
|
description="马来西亚柔佛永平中学校友会官方网站"
|
|
:links="heroCta"
|
|
/>
|
|
|
|
<!-- News Blog Posts -->
|
|
<UPageSection title="新闻与公告">
|
|
<UBlogPosts :posts="newsPost" />
|
|
</UPageSection>
|
|
|
|
<IndexEvents />
|
|
<IndexHallOfFame />
|
|
<IndexDonate />
|
|
<IndexAbout />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type { BlogPostProps, PageCardProps } from "@nuxt/ui";
|
|
|
|
const heroCta = ref([
|
|
{
|
|
label: "立即加入我们",
|
|
to: "/join-us",
|
|
icon: "mdi:account-plus",
|
|
},
|
|
]);
|
|
|
|
// ========================================================
|
|
// 新闻模块
|
|
// ========================================================
|
|
const { data: news } = await useAsyncData("news", () =>
|
|
queryCollection("news").order("date", "DESC").limit(3).all()
|
|
);
|
|
|
|
// 将 news 数据转换成 UBlogPosts 可用格式
|
|
const newsPost = computed<BlogPostProps[]>(() =>
|
|
(news.value || []).map((n: any) => ({
|
|
title: n.title,
|
|
description: n.description,
|
|
image: n.cover,
|
|
date: n.date,
|
|
to: n.path, // ✅ 建议加路由跳转
|
|
variant: "subtle",
|
|
}))
|
|
);
|
|
|
|
// ========================================================
|
|
// 活动模块
|
|
// ========================================================
|
|
const { data: events } = await useAsyncData("events", () =>
|
|
queryCollection("events").order("date", "DESC").limit(3).all()
|
|
);
|
|
</script>
|
|
|
|
<style></style>
|