29 lines
1015 B
Vue
29 lines
1015 B
Vue
<template>
|
||
<div>
|
||
<!-- 活动模块 -->
|
||
<section id="events" class="bg-gray-100 py-16">
|
||
<div class="max-w-6xl mx-auto px-4">
|
||
<h3 class="text-2xl font-bold text-gray-900 mb-6">校友活动</h3>
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
<div v-for="event in events" :key="event.id" class="bg-white shadow rounded-xl p-6">
|
||
<h4 class="font-semibold text-lg mb-2">{{ event.title }}</h4>
|
||
<p class="text-sm text-gray-600 mb-1">日期：{{ useChineseDateFormat(event.date) }}</p>
|
||
<p class="text-sm text-gray-600 mb-4">地点：{{ event.location }}</p>
|
||
<a :href="event.path" class="bg-secondary text-white px-5 py-2 rounded-lg hover:opacity-90">阅读详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
const { data: events } = await useAsyncData('events', () =>
|
||
queryCollection('events')
|
||
.order("date", "DESC")
|
||
.limit(3)
|
||
.all()
|
||
)
|
||
</script>
|
||
|
||
<style></style> |