96 lines
3.8 KiB
Vue
96 lines
3.8 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import type { SectionBlock } from '~/types/site';
|
|||
|
|
import { resolveAssetUrl } from '~/utils/resolveAssetUrl';
|
|||
|
|
|
|||
|
|
const props = defineProps<{ section: SectionBlock }>();
|
|||
|
|
|
|||
|
|
const { overline, title, subtitle, config, isEn, isDark, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);
|
|||
|
|
|
|||
|
|
// 轮播素材（config.marquee_items）：media_zh/_en 以语言后缀结尾，不命中数据层 resolveAssetUrls，需手动解析相对路径；最多 5 个
|
|||
|
|
const items = computed(() => {
|
|||
|
|
const raw = (config.value.marquee_items ?? []) as Array<{ type?: string; media_zh?: string; media_en?: string; link?: string }>;
|
|||
|
|
return raw
|
|||
|
|
.slice(0, 5)
|
|||
|
|
.map(it => {
|
|||
|
|
const src = (isEn.value ? it.media_en || it.media_zh : it.media_zh || it.media_en) || '';
|
|||
|
|
return { type: it.type === 'video' ? 'video' : 'image', url: resolveAssetUrl(src), link: (it.link || '').trim() };
|
|||
|
|
})
|
|||
|
|
.filter(it => !!it.url);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 点击素材：若配置了跳转链接则新窗口打开
|
|||
|
|
function handleItemClick(item: { link?: string }) {
|
|||
|
|
if (item.link) window.open(item.link, '_blank', 'noopener');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 切换间隔（config.marquee_interval，秒）：默认 3s，限制 1-60
|
|||
|
|
const interval = computed(() => {
|
|||
|
|
const v = Number(config.value.marquee_interval);
|
|||
|
|
return Number.isFinite(v) && v >= 1 ? Math.min(v, 60) : 3;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const current = ref(0);
|
|||
|
|
|
|||
|
|
let timer: ReturnType<typeof setInterval> | null = null;
|
|||
|
|
function stopTimer() {
|
|||
|
|
if (timer) {
|
|||
|
|
clearInterval(timer);
|
|||
|
|
timer = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 素材/间隔变化时重启计时器，并收敛下标防越界
|
|||
|
|
function startTimer() {
|
|||
|
|
stopTimer();
|
|||
|
|
if (current.value >= items.value.length) current.value = 0;
|
|||
|
|
if (items.value.length < 2) return;
|
|||
|
|
timer = setInterval(() => {
|
|||
|
|
current.value = (current.value + 1) % items.value.length;
|
|||
|
|
}, interval.value * 1000);
|
|||
|
|
}
|
|||
|
|
watch([items, interval], startTimer, { immediate: true });
|
|||
|
|
onBeforeUnmount(stopTimer);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="section-container py-[var(--sec-py,96px)]">
|
|||
|
|
<!-- 标题区 -->
|
|||
|
|
<div v-if="overline || title || subtitle" class="text-center max-w-640px mx-auto mb-56px">
|
|||
|
|
<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 font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
|
|||
|
|
{{ title }}
|
|||
|
|
</h2>
|
|||
|
|
<p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle">
|
|||
|
|
{{ subtitle }}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 轮播容器：淡入淡出切换 -->
|
|||
|
|
<div v-if="items.length" class="relative overflow-hidden rounded-16px bg-gray-100 dark:bg-gray-800 aspect-16/9">
|
|||
|
|
<div
|
|||
|
|
v-for="(item, idx) in items"
|
|||
|
|
:key="idx"
|
|||
|
|
class="absolute inset-0 transition-opacity duration-500"
|
|||
|
|
:class="[idx === current ? 'opacity-100' : 'opacity-0 pointer-events-none', item.link ? 'cursor-pointer' : '']"
|
|||
|
|
@click="handleItemClick(item)"
|
|||
|
|
>
|
|||
|
|
<video v-if="item.type === 'video'" :src="item.url" class="w-full h-full object-cover" autoplay muted loop playsinline preload="metadata" />
|
|||
|
|
<img v-else :src="item.url" :alt="title" class="w-full h-full object-cover" loading="lazy" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 指示点（可点击切换） -->
|
|||
|
|
<div v-if="items.length > 1" class="absolute bottom-16px left-0 right-0 flex justify-center gap-8px">
|
|||
|
|
<button
|
|||
|
|
v-for="(item, idx) in items"
|
|||
|
|
:key="idx"
|
|||
|
|
type="button"
|
|||
|
|
class="h-8px rounded-full transition-all"
|
|||
|
|
:class="idx === current ? 'w-24px bg-white' : 'w-8px bg-white/50'"
|
|||
|
|
@click="current = idx"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|