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.
31 lines
1.0 KiB
Vue
31 lines
1.0 KiB
Vue
<template>
|
|
<div>
|
|
<section id="hall-of-fame" class="py-16">
|
|
<div class="max-w-6xl mx-auto px-4">
|
|
<h3 class="text-2xl font-bold text-center text-gray-900 mb-6">名人堂</h3>
|
|
<div class="grid md:grid-cols-4 gap-6">
|
|
<div v-for="person in persons" :key="person.id" class="flex flex-col items-center cursor-pointer transition hover:scale-105 hover:drop-shadow-2xl hover:-translate-y-1" @click="jumpToPersonIntro(person.path)">
|
|
<img :src="person.photo" :alt="person.name" class="w-40 rounded-full border-primary border-4" />
|
|
<h4 class="text-lg font-bold">{{ person.name }}</h4>
|
|
<p class="text-sm text-gray-500">{{ person.title }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const { data: persons } = await useAsyncData('hall-of-fames', () =>
|
|
queryCollection('hallOfFames')
|
|
.limit(4)
|
|
.all()
|
|
)
|
|
|
|
var router = useRouter()
|
|
const jumpToPersonIntro = (path: string) => {
|
|
router.push(path)
|
|
}
|
|
</script>
|
|
|
|
<style></style> |