官网开发 0804

This commit is contained in:
eafonyang
2026-08-04 19:18:35 +08:00
parent f37b6451ef
commit 816281bf2d
31 changed files with 1177 additions and 543 deletions
@@ -12,7 +12,7 @@ const features = computed(() => config.value.features ?? []);
<div class="section-container py-96px">
<!-- 标题区 -->
<div class="text-center max-w-640px mx-auto mb-56px">
<p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
<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="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
@@ -8,7 +8,7 @@ const { overline, title, subtitle, content, overlineStyle, titleStyle, bodyStyle
<template>
<div class="section-container py-120px flex-col-center text-center max-w-800px">
<p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="section.theme === 'dark' ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
<p v-if="overline" class="text-14px font-semibold tracking-widest uppercase" :class="section.theme === 'dark' ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
{{ overline }}
</p>
<h2 class="mt-16px text-3xl md:text-5xl font-bold leading-tight" :class="section.theme === 'dark' ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
@@ -12,7 +12,7 @@ const images = computed(() => config.value.images ?? []);
<div class="section-container py-96px">
<!-- 标题区 -->
<div class="text-center max-w-640px mx-auto mb-56px">
<p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
<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="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
@@ -38,7 +38,7 @@ const hPad = computed(() => ({
: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">
<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-5xl font-bold leading-tight" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
@@ -12,7 +12,7 @@ const steps = computed(() => config.value.steps ?? []);
<div class="section-container py-96px">
<!-- 标题区 -->
<div class="text-center max-w-640px mx-auto mb-64px">
<p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
<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="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
@@ -35,7 +35,7 @@ function needToggle(group: SpecGroup): boolean {
<div class="section-container py-96px">
<!-- 标题区 -->
<div class="text-center max-w-640px mx-auto mb-56px">
<p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
<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="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
@@ -1,21 +1,49 @@
<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');
const mediaWrapClass = computed(() =>
mediaPosition.value === 'right'
? 'flex-center order-2'
: 'flex-center 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-96px grid md:grid-cols-2 gap-48px items-center">
<!-- 图片 -->
<div v-if="mediaUrl" class="flex-center order-2 md:order-1">
<img :src="mediaUrl" :alt="title" class="w-full max-w-520px rounded-16px object-cover shadow-lg" />
<!-- 媒体视频优先其次图片 -->
<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"
autoplay
muted
loop
playsinline
/>
<img v-else :src="mediaUrl" :alt="title" class="w-full max-w-520px rounded-16px object-cover shadow-lg" />
</div>
<!-- 文案 -->
<div class="flex flex-col gap-20px order-1 md:order-2">
<p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
<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="text-3xl md:text-4xl font-bold leading-tight" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
@@ -12,7 +12,7 @@ const stats = computed(() => config.value.stats ?? []);
<div class="section-container py-96px">
<!-- 标题区 -->
<div class="text-center max-w-640px mx-auto mb-64px">
<p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
<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="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
@@ -13,7 +13,7 @@ const isEmbed = computed(() => /youtube\.com|youtu\.be|bilibili\.com|player\.bil
<div class="section-container py-96px">
<!-- 标题区 -->
<div class="text-center max-w-640px mx-auto mb-48px">
<p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
<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="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">