94 lines
3.2 KiB
Vue
94 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
const activeStep = ref(0);
|
|
|
|
const steps = [
|
|
{ num: '1', title: '选择产品', desc: '海量精选产品，满足多元定制需求', image: '/01步骤-选择产品.png' },
|
|
{ num: '2', title: '上传设计', desc: '可视化编辑器，轻松实现创意落地', image: '/02步骤-上传设计.png' },
|
|
{ num: '3', title: '在线销售', desc: '一键开通店铺，多渠道触达目标客群', image: '/03步骤-在线销售.png' },
|
|
{ num: '4', title: '生产配送', desc: '智能化柔性生产，快速响应全球配送', image: '/04步骤-生产配送.png' },
|
|
];
|
|
|
|
const selectStep = (idx: number) => {
|
|
activeStep.value = idx;
|
|
};
|
|
|
|
let timer: ReturnType<typeof setInterval> | null = null;
|
|
|
|
const startAutoPlay = () => {
|
|
stopAutoPlay();
|
|
timer = setInterval(() => {
|
|
activeStep.value = (activeStep.value + 1) % steps.length;
|
|
}, 3000);
|
|
};
|
|
|
|
const stopAutoPlay = () => {
|
|
if (timer) {
|
|
clearInterval(timer);
|
|
timer = null;
|
|
}
|
|
};
|
|
|
|
const pauseAutoPlay = () => {
|
|
stopAutoPlay();
|
|
};
|
|
|
|
const resumeAutoPlay = () => {
|
|
startAutoPlay();
|
|
};
|
|
|
|
onMounted(startAutoPlay);
|
|
onUnmounted(stopAutoPlay);
|
|
</script>
|
|
|
|
<template>
|
|
<section class="w-full flex flex-col gap-8 lg:gap-10 items-center p-6 lg:p-10">
|
|
<div class="text-2xl md:text-4xl lg:text-6xl text-center">4 步开始你的按需定制生意</div>
|
|
|
|
<div class="flex flex-col lg:flex-row gap-5 w-full max-w-7xl items-stretch">
|
|
<div class="flex flex-row lg:flex-col gap-3 lg:gap-10 lg:p-5 lg:w-5/12 overflow-x-auto lg:overflow-visible justify-center"
|
|
@mouseenter="pauseAutoPlay"
|
|
@mouseleave="resumeAutoPlay"
|
|
>
|
|
<div
|
|
v-for="(step, idx) in steps"
|
|
:key="idx"
|
|
class="flex-shrink-0 flex flex-col gap-2 lg:gap-5 cursor-pointer group min-w-[140px] lg:min-w-0"
|
|
@click="selectStep(idx)"
|
|
@mouseenter="activeStep = idx"
|
|
>
|
|
<p class="text-xl lg:text-3xl font-bold">{{ step.num }} {{ step.title }}</p>
|
|
<p class="hidden lg:block indent-10 text-gray-500 text-xl">{{ step.desc }}</p>
|
|
<div class="h-0.5 w-full rounded-full bg-gray-200 overflow-hidden">
|
|
<div
|
|
class="h-full rounded-full transition-all duration-500"
|
|
:class="activeStep === idx ? 'w-1/2 bg-primary' : 'w-0 bg-primary'"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div class="hidden lg:flex items-center pt-6">
|
|
<button class="text-xl lg:text-2xl text-white bg-primary rounded-lg px-10 lg:px-14 py-3 lg:py-4 hover:opacity-90 transition-opacity">
|
|
立即开始
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-hidden rounded-xl relative">
|
|
<img
|
|
v-for="(step, idx) in steps"
|
|
:key="'img-' + idx"
|
|
:src="step.image"
|
|
:alt="step.title"
|
|
class="w-full h-full object-contain transition-opacity duration-500 absolute inset-0"
|
|
:class="activeStep === idx ? 'opacity-100' : 'opacity-0 pointer-events-none'"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex lg:hidden">
|
|
<button class="text-xl text-white bg-primary rounded-lg px-10 py-3 hover:opacity-90 transition-opacity">
|
|
立即开始
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</template>
|