官网开发 0805

This commit is contained in:
eafonyang
2026-08-05 18:36:01 +08:00
parent 816281bf2d
commit c9a1d9c576
23 changed files with 1367 additions and 231 deletions
@@ -12,10 +12,11 @@ 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'
? 'flex-center order-2'
: 'flex-center order-2 md:order-1'
? 'order-2'
: 'order-2 md:order-1'
);
const textWrapClass = computed(() =>
@@ -26,19 +27,19 @@ const textWrapClass = computed(() =>
</script>
<template>
<div class="section-container py-96px grid md:grid-cols-2 gap-48px items-center">
<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 max-w-520px rounded-16px object-cover shadow-lg"
class="w-full 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" />
<img v-else :src="mediaUrl" :alt="title" class="w-full rounded-16px object-cover shadow-lg" />
</div>
<!-- 文案 -->
@@ -46,13 +47,13 @@ const textWrapClass = computed(() =>
<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">
<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="text-15px leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle" v-html="content" />
<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>