官网开发 0804

2026-08-04 19:18:35 +08:00
parent f37b6451ef
commit 816281bf2d
31 changed files with 1177 additions and 543 deletions
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { NavItem } from '~/types/site';
+import type { NavItem, Product } from '~/types/site';

 const { t, locale, locales } = useI18n();
 const localePath = useLocalePath();
@@ -60,9 +60,16 @@ function openMega() {
 function closeMega() {
  megaTimer = setTimeout(() => {
    megaOpen.value = false;
+    hoveredProduct.value = null;
  }, 120);
 }

+// Mega Menu 右侧大图预览：hover 某产品时展示其封面，默认展示第一个产品
+const hoveredProduct = ref<Product | null>(null);
+const previewProduct = computed<Product | null>(
+  () => hoveredProduct.value ?? productSeries.value.find(s => s.products?.length)?.products[0] ?? null
+);
+
 // 移动端：关闭抽屉
 function closeMobile() {
  appStore.toggleMobileMenu(false);
@@ -112,31 +119,42 @@ function closeMobile() {
                v-if="megaOpen"
                class="absolute top-64px left-50% -translate-x-50% min-w-640px bg-white/95 backdrop-blur-xl rounded-12px shadow-xl border border-gray-100 p-24px dark:bg-dark-900/95 dark:border-dark-700"
              >
-                <div class="flex gap-40px">
-                  <div v-for="series in productSeries" :key="series.id" class="min-w-200px">
-                    <p class="text-12px font-semibold text-gray-400 mb-12px uppercase tracking-wide">
-                      {{ locale === 'en' ? series.name_en : series.name_zh }}
-                    </p>
-                    <div class="flex flex-col gap-8px">
-                      <NuxtLink
-                        v-for="product in series.products"
-                        :key="product.id"
-                        :to="localePath(`/products/${product.slug}`)"
-                        class="flex items-center gap-12px p-8px rounded-8px hover:bg-gray-50 transition-colors dark:hover:bg-dark-800"
-                        @click="megaOpen = false"
-                      >
-                        <img
-                          v-if="product.cover_url"
-                          :src="product.cover_url"
-                          :alt="product.name_zh"
-                          class="w-48px h-36px object-cover rounded-6px bg-gray-100"
-                        />
-                        <span class="text-sm text-gray-800 dark:text-gray-100">
-                          {{ locale === 'en' ? product.name_en : product.name_zh }}
-                        </span>
-                      </NuxtLink>
+                <div class="flex gap-32px">
+                  <!-- 左侧：系列/产品列表 -->
+                  <div class="flex gap-40px">
+                    <div v-for="series in productSeries" :key="series.id" class="min-w-200px">
+                      <p class="text-12px font-semibold text-gray-400 mb-12px uppercase tracking-wide">
+                        {{ locale === 'en' ? series.name_en : series.name_zh }}
+                      </p>
+                      <div class="flex flex-col gap-8px">
+                        <NuxtLink
+                          v-for="product in series.products"
+                          :key="product.id"
+                          :to="localePath(`/products/${product.slug}`)"
+                          class="p-8px rounded-8px hover:bg-gray-50 transition-colors dark:hover:bg-dark-800"
+                          @click="megaOpen = false"
+                          @mouseenter="hoveredProduct = product"
+                        >
+                          <span class="text-sm text-gray-800 dark:text-gray-100">
+                            {{ locale === 'en' ? product.name_en : product.name_zh }}
+                          </span>
+                        </NuxtLink>
+                      </div>
                    </div>
                  </div>
+
+                  <!-- 右侧：hover 产品封面大图预览 -->
+                  <div v-if="previewProduct" class="w-360px shrink-0 border-l border-gray-100 pl-32px dark:border-dark-700">
+                    <img
+                      v-if="previewProduct.cover_url"
+                      :src="previewProduct.cover_url"
+                      :alt="locale === 'en' ? previewProduct.name_en : previewProduct.name_zh"
+                      class="w-full h-240px object-contain rounded-8px bg-gray-50 dark:bg-dark-800"
+                    />
+                    <p class="mt-12px text-lg font-bold text-gray-900 dark:text-gray-100">
+                      {{ locale === 'en' ? previewProduct.name_en : previewProduct.name_zh }}
+                    </p>
+                  </div>
                </div>
              </div>
            </transition>
@@ -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
@@ -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">