7bcabb0c71
Adds a responsive header with a mobile navigation menu to improve usability on small screens. This also includes adding a new event page, updating an existing event with a schedule, and refactoring the 'Donate' CTA by inlining it on the homepage.
39 lines
1.1 KiB
Vue
39 lines
1.1 KiB
Vue
<template>
|
||
<!-- 活动模块 -->
|
||
<UPageSection title="校友活动" class="bg-gray-100">
|
||
<UPageGrid>
|
||
<div
|
||
v-for="event in events"
|
||
:key="event.id"
|
||
class="bg-white shadow rounded-xl"
|
||
>
|
||
<img
|
||
:src="event.cover"
|
||
:alt="event.title"
|
||
class="w-full aspect-[16/9] object-cover rounded-t-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>
|
||
<UButton
|
||
label="阅读详情"
|
||
:to="event.path"
|
||
trailing-icon="mdi:book-open-blank-variant-outline"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</UPageGrid>
|
||
</UPageSection>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
const { data: events } = await useAsyncData("events", () =>
|
||
queryCollection("events").order("date", "DESC").limit(3).all()
|
||
);
|
||
</script>
|
||
|
||
<style></style>
|