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

<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');

// 媒体填满所在栏（去掉 520px 上限与栏内居中），高度按原素材比例自适应
const mediaWrapClass = computed(() =>
  mediaPosition.value === 'right'
    ? 'order-2'
    : '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-[var(--sec-py,96px)] grid md:grid-cols-2 gap-48px items-center">
    <!-- 媒体：视频优先，其次图片 -->
    <div v-if="videoUrl || mediaUrl" :class="mediaWrapClass">
      <video
        v-if="videoUrl"
        :src="videoUrl"
        class="w-full rounded-16px object-cover shadow-lg"
        autoplay
        muted
        loop
        playsinline
      />
      <img v-else :src="mediaUrl" :alt="title" class="w-full rounded-16px object-cover shadow-lg" />
    </div>

    <!-- 文案 -->
    <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="font-bold leading-tight" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
        {{ title }}
      </h2>
      <p v-if="subtitle" class="text-lg" :class="isDark ? 'text-gray-300' : 'text-gray-600 dark:text-gray-300'" :style="bodyStyle">
        {{ subtitle }}
      </p>
      <div v-if="content" class="rich-text text-15px leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle" v-html="content" />
      <SectionCta :section="section" class="mt-8px" />
    </div>
  </div>
</template>