6de61c24b2
- 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.
34 lines
958 B
Vue
34 lines
958 B
Vue
<template>
|
|
<UPageSection title="名人堂">
|
|
<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-400 border-4"
|
|
/>
|
|
<h4 class="text-lg font-bold">{{ person.name }}</h4>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">{{ person.title }}</p>
|
|
</div>
|
|
</div>
|
|
</UPageSection>
|
|
</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>
|