eafonyang
47 lines
1.6 KiB
Vue
47 lines
1.6 KiB
Vue
<script setup lang="ts">
|
||
import type { SectionBlock } from '~/types/site';
|
||
|
||
const props = defineProps<{ section: SectionBlock }>();
|
||
|
||
const { overline, title, subtitle, isDark, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);
|
||
|
||
// 判断是否为可嵌入的 iframe 视频（YouTube / Bilibili）
|
||
const isEmbed = computed(() => /youtube\.com|youtu\.be|bilibili\.com|player\.bilibili\.com/.test(props.section.video_url));
|
||
</script>
|
||
|
||
<template>
|
||
<div class="section-container py-[var(--sec-py,96px)]">
|
||
<!-- 标题区 -->
|
||
<div class="text-center max-w-640px mx-auto mb-48px">
|
||
<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="max-w-960px mx-auto rounded-16px overflow-hidden shadow-xl bg-black aspect-16/9">
|
||
<iframe
|
||
v-if="isEmbed"
|
||
:src="section.video_url"
|
||
class="w-full h-full"
|
||
frameborder="0"
|
||
allowfullscreen
|
||
scrolling="no"
|
||
/>
|
||
<video
|
||
v-else-if="section.video_url"
|
||
:src="section.video_url"
|
||
class="w-full h-full object-cover"
|
||
controls
|
||
playsinline
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|