官网开发 0804

www/app/components/section/SectionRenderer.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import type { CSSProperties } from 'vue';
 import type { SectionBlock, SectionLayout } from '~/types/site';
+import { resolveAssetUrl } from '~/utils/resolveAssetUrl';
 import LayoutHeroSplit from './layouts/LayoutHeroSplit.vue';
 import LayoutFullBanner from './layouts/LayoutFullBanner.vue';
 import LayoutFeatureGrid from './layouts/LayoutFeatureGrid.vue';
@@ -46,26 +48,57 @@ const bgStyle = computed(() => {
 
 const hasBgImage = computed(() => props.section.bg_type === 'image' && !!props.section.bg_value);
 const hasBgVideo = computed(() => props.section.bg_type === 'video' && !!props.section.bg_value);
+// 背景图/视频资源地址（支持 /uploads/... 相对路径）
+const bgMediaUrl = computed(() => resolveAssetUrl(props.section.bg_value));
+
+// 区块宽度百分比（config.width_percent）：占视口宽度比例并居中，
+// 未配置或 100 时全宽；md 以下始终全宽（见模板 class）
+const sectionWidthStyle = computed<CSSProperties>(() => {
+  const w = Number(props.section.config?.width_percent);
+  return { '--sec-w': w > 0 && w < 100 ? `${w}%` : '100%' } as CSSProperties;
+});
+
+// 背景图/视频显示模式（config.bg_fit）：cover 铺满（默认）/ contain 完整显示 / auto 原尺寸
+const bgFit = computed<'cover' | 'contain' | 'auto'>(() => {
+  const f = props.section.config?.bg_fit;
+  return f === 'contain' || f === 'auto' ? f : 'cover';
+});
+
+const bgImageClass = computed(() =>
+  ({
+    cover: 'absolute inset-0 bg-cover bg-center',
+    contain: 'absolute inset-0 bg-contain bg-center bg-no-repeat',
+    auto: 'absolute inset-0 bg-auto bg-center bg-no-repeat'
+  })[bgFit.value]
+);
+
+const bgVideoClass = computed(() =>
+  ({
+    cover: 'absolute inset-0 w-full h-full object-cover',
+    contain: 'absolute inset-0 w-full h-full object-contain',
+    auto: 'absolute inset-0 w-full h-full object-none'
+  })[bgFit.value]
+);
 </script>
 
 <template>
   <section
-    class="relative overflow-hidden"
+    class="relative overflow-hidden md:w-[var(--sec-w)] md:mx-auto"
     :class="isDark ? 'bg-gray-950 text-white' : 'bg-white text-gray-900 dark:bg-dark-900 dark:text-white'"
-    :style="bgStyle"
+    :style="[bgStyle, sectionWidthStyle]"
   >
-    <!-- 背景图 -->
+    <!-- 背景图：显示模式由 config.bg_fit 控制（默认铺满） -->
     <div
       v-if="hasBgImage"
-      class="absolute inset-0 bg-cover bg-center"
-      :style="{ backgroundImage: `url(${section.bg_value})` }"
+      :class="bgImageClass"
+      :style="{ backgroundImage: `url(${bgMediaUrl})` }"
     />
 
-    <!-- 背景视频 -->
+    <!-- 背景视频：显示模式由 config.bg_fit 控制（默认铺满） -->
     <video
       v-if="hasBgVideo"
-      :src="section.bg_value"
-      class="absolute inset-0 w-full h-full object-cover"
+      :src="bgMediaUrl"
+      :class="bgVideoClass"
       autoplay
       muted
       loop