audio/admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

官网开发中 0803

Browse Source
This commit is contained in:
eafonyang
2026-08-03 19:09:03 +08:00
parent eeccdb079c
commit f37b6451ef
36 changed files with 1906 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/app/components/section/layouts/LayoutHeroSplit.vue
+46 -17
View File
@@ -3,28 +3,57 @@ import type { SectionBlock } from '~/types/site';
const props = defineProps<{ section: SectionBlock }>();
const { overline, title, subtitle, content, mediaUrl, isDark } = useSectionContent(props.section);
const { overline, title, subtitle, content, mediaUrl, isDark, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);
// 九宫格文案位置（config.text_position，默认左中）：top/middle/bottom + left/center/right
const textPosition = computed(() => (props.section.config as Record<string, string> | null)?.text_position ?? 'middle_left');
// 垂直对齐（flex-col 主轴）：top->start / middle->center / bottom->end
const vAlign = computed(() => ({
top: 'justify-start',
middle: 'justify-center',
bottom: 'justify-end'
} as Record<string, string>)[textPosition.value.split('_')[0] ?? ''] ?? 'justify-center');
// 水平对齐（flex-col 交叉轴）：left->start / center->center / right->end
const hAlign = computed(() => ({
left: 'items-start',
center: 'items-center',
right: 'items-end'
} as Record<string, string>)[textPosition.value.split('_')[1] ?? ''] ?? 'items-start');
// 水平内边距：左列贴左、右列贴右、中列居中留白
const hPad = computed(() => ({
left: 'md:pl-128px md:pr-96px',
center: 'md:px-64px',
right: 'md:pl-96px md:pr-128px'
} as Record<string, string>)[textPosition.value.split('_')[1] ?? ''] ?? 'md:px-64px');
</script>
<template>
<div class="section-container aspect-[2/3] md:aspect-auto md:min-h-[min(calc(92vh-64px),54vw)] grid md:grid-cols-2 gap-48px items-center">
<!-- 左侧文案 -->
<div class="flex flex-col gap-20px self-center md:min-h-[680px]">
<p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'">
{{ overline }}
</p>
<h2 class="text-3xl md:text-5xl font-bold leading-tight" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
{{ title }}
</h2>
<p v-if="subtitle" class="text-lg md:text-xl" :class="isDark ? 'text-gray-300' : 'text-gray-600 dark:text-gray-300'">
{{ subtitle }}
</p>
<div v-if="content" class="text-15px leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" v-html="content" />
<SectionCta :section="section" class="mt-8px" />
<div class="relative aspect-[2/3] md:aspect-auto md:min-h-[max(680px,min(calc(92vh-64px),54vw))] grid gap-48px px-16px md:px-0">
<!-- 文案块：移动端文档流；桌面端全宽绝对定位 + 九宫格对齐 -->
<div
class="relative z-10 flex flex-col gap-20px py-64px md:py-64px md:absolute md:inset-0"
:class="[vAlign, hAlign, hPad]"
>
<div class="flex flex-col gap-20px max-w-560px">
<p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
{{ overline }}
</p>
<h2 class="text-3xl md:text-5xl 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 md:text-xl" :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" />
<SectionCta :section="section" class="mt-8px" />
</div>
</div>
<!-- 右侧图片 -->
<div v-if="mediaUrl" class="flex-center">
<!-- 图片：移动端文档流；桌面端占右侧一半 -->
<div v-if="mediaUrl" class="flex-center md:absolute md:top-0 md:right-0 md:bottom-0 md:w-1/2">
<img :src="mediaUrl" :alt="title" class="w-full max-w-560px rounded-16px object-cover shadow-lg" />
</div>
</div>