6473bdcc15
This commit refactors the main layout and homepage to utilize components from the Nuxt UI library, simplifying the codebase and reducing custom boilerplate. - The default layout is now built with `UPage`, `UHeader`, `UMain`, and `UFooter`. - The homepage (`pages/index.vue`) has been updated to use `UPageHero` and `UBlogPosts`. - The `IndexHero` and `IndexNews` components have been removed as their functionality is now integrated directly into the index page. - `Donate`, `Events`, and `HallOfFame` components are now wrapped with `UPageCTA` or `UPageSection`.
36 lines
1.1 KiB
Vue
36 lines
1.1 KiB
Vue
<template>
|
||
<!-- 活动模块 -->
|
||
<UPageSection title="校友活动" class="bg-gray-100">
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
<div
|
||
v-for="event in events"
|
||
:key="event.id"
|
||
class="bg-white shadow rounded-xl"
|
||
>
|
||
<img :src="event.cover" :alt="event.title" class="rounded-xl" />
|
||
<div class="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-primary text-white px-5 py-2 rounded-lg hover:opacity-90"
|
||
>阅读详情</a
|
||
> -->
|
||
<UButton label="阅读详情" :to="event.path" trailing-icon="mdi:glasses"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</UPageSection>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
const { data: events } = await useAsyncData("events", () =>
|
||
queryCollection("events").order("date", "DESC").limit(3).all()
|
||
);
|
||
</script>
|
||
|
||
<style></style>
|