34 lines
1.1 KiB
Vue
34 lines
1.1 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-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> |