eafonyang
54 lines
2.1 KiB
Vue
54 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import type { SectionBlock } from '~/types/site';
|
|
|
|
const props = defineProps<{ section: SectionBlock }>();
|
|
|
|
const { overline, title, subtitle, config, isEn, isDark } = useSectionContent(props.section);
|
|
|
|
const steps = computed(() => config.value.steps ?? []);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="section-container py-96px">
|
|
<!-- 标题区 -->
|
|
<div class="text-center max-w-640px mx-auto mb-64px">
|
|
<p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'">
|
|
{{ overline }}
|
|
</p>
|
|
<h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
|
|
{{ title }}
|
|
</h2>
|
|
<p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
|
|
{{ subtitle }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 步骤叙事 -->
|
|
<div class="flex flex-col gap-64px max-w-960px mx-auto">
|
|
<div
|
|
v-for="(step, idx) in steps"
|
|
:key="idx"
|
|
class="grid md:grid-cols-2 gap-32px items-center"
|
|
>
|
|
<!-- 文案 -->
|
|
<div class="flex flex-col gap-12px" :class="idx % 2 === 1 ? 'md:order-2' : ''">
|
|
<span class="text-4xl font-bold opacity-20" :class="isDark ? 'text-white' : 'text-gray-900'">
|
|
{{ String(idx + 1).padStart(2, '0') }}
|
|
</span>
|
|
<h3 class="text-xl font-semibold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
|
|
{{ isEn ? step.title_en : step.title_zh }}
|
|
</h3>
|
|
<p class="text-15px leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
|
|
{{ isEn ? step.desc_en : step.desc_zh }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 配图 -->
|
|
<div v-if="step.image_url" :class="idx % 2 === 1 ? 'md:order-1' : ''">
|
|
<img :src="step.image_url" :alt="isEn ? step.title_en : step.title_zh" class="w-full rounded-16px object-cover shadow-md" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|