6f181d3f22
This commit introduces the foundational structure for the new admin dashboard. - Utilizes @nuxt/ui to build the dashboard layout, including a collapsible sidebar and navigation. - Adds initial pages for the dashboard, news, events, and hall of fame management. - Implements a composable `useDashboardSidebarLinks` for managing sidebar navigation. - Refactors the default layout by integrating the header and footer directly. - Swaps the primary and secondary theme colors across the application.
32 lines
1.1 KiB
Vue
32 lines
1.1 KiB
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">
|
||
<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>
|
||
</div>
|
||
</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> |