官网开发 0810

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

@@ -12,6 +12,19 @@ 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');
 
+// 分栏比例（config.split_ratio）：媒体栏宽占比，档位 30/40/50/60/70，默认 50（五五等分）；移动端单列不受影响
+const splitRatio = computed(() => {
+  const v = Number((props.section.config as Record<string, unknown> | null)?.split_ratio);
+  return [30, 40, 50, 60, 70].includes(v) ? v : 50;
+});
+
+// 栅格轨道随媒体位置：媒体在左 = 首轨为媒体栏，媒体在右 = 次轨为媒体栏（完整字面量供 UnoCSS 提取）
+const gridClass = computed(() =>
+  mediaPosition.value === 'right'
+    ? 'md:grid-cols-[minmax(0,1fr)_var(--split-media,50%)]'
+    : 'md:grid-cols-[var(--split-media,50%)_minmax(0,1fr)]'
+);
+
 // 媒体填满所在栏（去掉 520px 上限与栏内居中），高度按原素材比例自适应
 const mediaWrapClass = computed(() =>
   mediaPosition.value === 'right'
@@ -27,7 +40,11 @@ const textWrapClass = computed(() =>
 </script>
 
 <template>
-  <div class="section-container py-[var(--sec-py,96px)] grid md:grid-cols-2 gap-48px items-center">
+  <div
+    class="section-container py-[var(--sec-py,96px)] grid gap-48px items-center"
+    :class="gridClass"
+    :style="{ '--split-media': `${splitRatio}%` }"
+  >
     <!-- 媒体：视频优先，其次图片 -->
     <div v-if="videoUrl || mediaUrl" :class="mediaWrapClass">
       <video