官网开发 0804

www/app/components/section/layouts/LayoutSplitContent.vue

@@ -1,21 +1,49 @@
 <script setup lang="ts">
 import type { SectionBlock } from '~/types/site';
+import { resolveAssetUrl } from '~/utils/resolveAssetUrl';
 
 const props = defineProps<{ section: SectionBlock }>();
 
 const { overline, title, subtitle, content, mediaUrl, isDark, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);
+
+// 分栏媒体视频（video_url 有值时优先渲染视频，支持 /uploads/... 相对路径）
+const videoUrl = computed(() => resolveAssetUrl(props.section.video_url));
+
+// 媒体位置（config.media_position）：left 图/视频在左（默认）/ right 在右；移动端始终文案在上
+const mediaPosition = computed(() => (props.section.config as Record<string, string> | null)?.media_position === 'right' ? 'right' : 'left');
+
+const mediaWrapClass = computed(() =>
+  mediaPosition.value === 'right'
+    ? 'flex-center order-2'
+    : 'flex-center order-2 md:order-1'
+);
+
+const textWrapClass = computed(() =>
+  mediaPosition.value === 'right'
+    ? 'flex flex-col gap-20px order-1'
+    : 'flex flex-col gap-20px order-1 md:order-2'
+);
 </script>
 
 <template>
   <div class="section-container py-96px grid md:grid-cols-2 gap-48px items-center">
-    <!-- 图片 -->
-    <div v-if="mediaUrl" class="flex-center order-2 md:order-1">
-      <img :src="mediaUrl" :alt="title" class="w-full max-w-520px rounded-16px object-cover shadow-lg" />
+    <!-- 媒体：视频优先，其次图片 -->
+    <div v-if="videoUrl || mediaUrl" :class="mediaWrapClass">
+      <video
+        v-if="videoUrl"
+        :src="videoUrl"
+        class="w-full max-w-520px rounded-16px object-cover shadow-lg"
+        autoplay
+        muted
+        loop
+        playsinline
+      />
+      <img v-else :src="mediaUrl" :alt="title" class="w-full max-w-520px rounded-16px object-cover shadow-lg" />
     </div>
 
     <!-- 文案 -->
-    <div class="flex flex-col gap-20px order-1 md:order-2">
-      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
+    <div :class="textWrapClass">
+      <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="text-3xl md:text-4xl font-bold leading-tight" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">