eafonyang
40 lines
1.7 KiB
Vue
40 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import type { SectionBlock } from '~/types/site';
|
|
|
|
const props = defineProps<{ section: SectionBlock }>();
|
|
|
|
const { overline, title, subtitle, config, isEn, isDark, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);
|
|
|
|
const images = computed(() => config.value.images ?? []);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="section-container py-[var(--sec-py,96px)]">
|
|
<!-- 标题区 -->
|
|
<div class="text-center max-w-640px mx-auto mb-56px">
|
|
<p v-if="overline" class="text-14px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
|
|
{{ overline }}
|
|
</p>
|
|
<h2 class="mt-12px font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
|
|
{{ title }}
|
|
</h2>
|
|
<p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle">
|
|
{{ subtitle }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 图片网格 -->
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-16px">
|
|
<figure v-for="(img, idx) in images" :key="idx" class="group relative overflow-hidden rounded-12px">
|
|
<img :src="img.url" :alt="isEn ? img.caption_en : img.caption_zh" class="w-full aspect-4/3 object-cover transition-transform duration-500 group-hover:scale-105" />
|
|
<figcaption
|
|
v-if="(isEn ? img.caption_en : img.caption_zh)"
|
|
class="absolute bottom-0 left-0 right-0 px-16px py-12px text-sm text-white bg-gradient-to-t from-black/60 to-transparent"
|
|
>
|
|
{{ isEn ? img.caption_en : img.caption_zh }}
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</template>
|