cd414542a9
- Expand CSS variables for primary and secondary colors to include full 50-950 scales in `main.css`. - Update components to reference specific color shades (e.g., `primary-400`, `secondary-200`) instead of generic variables. - Add dark mode background and text colors to Events, Hall of Fame, and Index sections. - Adjust image aspect ratio in the Events component.
43 lines
1.2 KiB
Vue
43 lines
1.2 KiB
Vue
<template>
|
||
<!-- 活动模块 -->
|
||
<UPageSection title="校友活动" class="bg-gray-100 dark:bg-slate-800">
|
||
<UPageGrid>
|
||
<div
|
||
v-for="event in events"
|
||
:key="event.id"
|
||
class="bg-white dark:bg-slate-700 shadow rounded-xl"
|
||
>
|
||
<img
|
||
:src="event.cover"
|
||
:alt="event.title"
|
||
class="w-full aspect-video 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 dark:text-gray-400 mb-1">
|
||
日期：{{ useChineseDateFormat(event.date) }}
|
||
</p>
|
||
<p class="text-sm text-gray-600 dark:text-gray-400 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")
|
||
.where("draft", "=", false)
|
||
.order("date", "DESC")
|
||
.limit(3)
|
||
.all()
|
||
);
|
||
</script>
|
||
|
||
<style></style>
|