6de61c24b2
- Expand CSS variables for primary and secondary colors to include full 50-950 scales in `main.css`. - Update components to reference specific color shades (e.g., `primary-400`, `secondary-200`) instead of generic variables. - Add dark mode background and text colors to Events, Hall of Fame, and Index sections. - Adjust image aspect ratio in the Events component.
86 lines
2.3 KiB
Vue
86 lines
2.3 KiB
Vue
<template>
|
|
<UPage>
|
|
<!-- Hero Banner -->
|
|
<UPageHero
|
|
:class="heroClass"
|
|
:style="heroStyle"
|
|
title="连接校友 · 传承精神"
|
|
description="马来西亚柔佛永平中学校友会官方网站"
|
|
:links="heroCta"
|
|
/>
|
|
|
|
<!-- News Blog Posts -->
|
|
<UPageSection title="新闻与公告">
|
|
<UBlogPosts :posts="newsPost" />
|
|
</UPageSection>
|
|
|
|
<IndexEvents />
|
|
<IndexHallOfFame />
|
|
|
|
<!-- 捐赠模块 -->
|
|
<UPageCTA
|
|
class="bg-secondary-200 dark:bg-secondary-900"
|
|
title="支持与捐赠（功能暂未开放）"
|
|
description="您的捐赠将用于奖学金、校园建设及校友活动发展。感谢您对母校的支持！"
|
|
:links="donationLinks"
|
|
/>
|
|
</UPage>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type { BlogPostProps } from "@nuxt/ui";
|
|
|
|
useSeoMeta({
|
|
title: "首页",
|
|
});
|
|
|
|
const colorMode = useColorMode()
|
|
const heroClass = 'bg-cover bg-center'
|
|
const heroStyle = computed(() => ({
|
|
backgroundImage: colorMode.value === 'dark'
|
|
? 'url("https://img.yphsalumni.org/i/2025/11/28/qzxrpq.png")'
|
|
: 'url("https://img.yphsalumni.org/i/2025/11/28/qk9fe8.png")',
|
|
backgroundPositionY: '-40px',
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundColor: colorMode.value === 'dark'
|
|
? 'rgba(0, 0, 0, 0.5)'
|
|
: 'rgba(255, 255, 255, 0.5)',
|
|
backgroundBlendMode: colorMode.value === 'dark' ? 'darken' : 'lighten'
|
|
}))
|
|
|
|
const heroCta = ref([
|
|
{
|
|
label: "立即加入我们",
|
|
to: "/join-us",
|
|
icon: "mdi:account-plus",
|
|
"data-umami-event": "Join Us Btn Click",
|
|
},
|
|
]);
|
|
|
|
// ========================================================
|
|
// 新闻模块
|
|
// ========================================================
|
|
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 donationLinks = ref([{ label: "立即捐赠", icon: "mdi:cash" }]);
|
|
</script>
|
|
|
|
<style></style>
|