initial commit

app/components/index/News.vue

@@ -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>