Files
yphsalumni.org/app/components/index/News.vue
xiaomai 09ec61e315 feat(app): introduce Hall of Fame section and refactor UI
This commit adds the '名人堂' (Hall of Fame) feature and removes the Element Plus dependency.

- feat(content): Add Hall of Fame section with a new content collection, homepage component, and detail pages.
- refactor(join-us): Rewrite the 'Join Us' form to remove Element Plus, using native elements and Reka UI. The form is
temporarily disabled.
- feat(ui): Display cover images on News and Events cards.
- chore: Integrate Umami for web analytics.
- fix: Correct minor text issues, including graduation year in the footer.
2025-10-03 16:23:16 +08:00

37 lines
1.2 KiB
Vue

<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-primary/10 rounded-xl shadow cursor-pointer transition transform hover:-translate-y-1 hover:scale-105 hover:shadow-xl duration-300 ease-in-out">
<img class="rounded-xl" :src="n.cover" :alt="n.title">
<div class="p-5">
<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>
</div>
</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>