eafonyang
32 lines
1.4 KiB
Vue
32 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import type { SectionBlock } from '~/types/site';
|
|
|
|
const props = defineProps<{ section: SectionBlock }>();
|
|
|
|
const { overline, title, subtitle, content, mediaUrl, isDark } = useSectionContent(props.section);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="section-container aspect-[2/3] md:aspect-auto md:min-h-[min(calc(92vh-64px),54vw)] grid md:grid-cols-2 gap-48px items-center">
|
|
<!-- 左侧文案 -->
|
|
<div class="flex flex-col gap-20px self-center md:min-h-[680px]">
|
|
<p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'">
|
|
{{ overline }}
|
|
</p>
|
|
<h2 class="text-3xl md:text-5xl font-bold leading-tight" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
|
|
{{ title }}
|
|
</h2>
|
|
<p v-if="subtitle" class="text-lg md:text-xl" :class="isDark ? 'text-gray-300' : 'text-gray-600 dark:text-gray-300'">
|
|
{{ subtitle }}
|
|
</p>
|
|
<div v-if="content" class="text-15px leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" v-html="content" />
|
|
<SectionCta :section="section" class="mt-8px" />
|
|
</div>
|
|
|
|
<!-- 右侧图片 -->
|
|
<div v-if="mediaUrl" class="flex-center">
|
|
<img :src="mediaUrl" :alt="title" class="w-full max-w-560px rounded-16px object-cover shadow-lg" />
|
|
</div>
|
|
</div>
|
|
</template>
|