官网开发中 0731

2026-07-31 19:02:00 +08:00
parent fda4fa8627
commit eeccdb079c
36 changed files with 1944 additions and 105 deletions
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { SectionBlock } from '~/types/site';
+
+const props = defineProps<{ section: SectionBlock }>();
+
+const { overline, title, subtitle, isDark } = 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-96px">
+    <!-- 标题区 -->
+    <div class="text-center max-w-640px mx-auto mb-48px">
+      <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="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>