fix: convert apps/website from submodule to regular directory
This commit is contained in:
@@ -0,0 +1,77 @@
|
||||
<script setup lang="ts">
|
||||
const activeFeature = ref(0);
|
||||
|
||||
const features = [
|
||||
{ title: '设计工具', desc: '轻松设计,快速定制', image: '/设计工具.png' },
|
||||
{ title: '自动化履约', desc: '从生产到配送,全程无忧,准时交付', image: '/自动化履约.png' },
|
||||
{ title: '全球配送', desc: '全球20+国家本土工厂', image: '/全球配送.png' },
|
||||
{ title: '店铺集成', desc: '与Shopify、Amazon等平台无缝对接', image: '/店铺集成.png' },
|
||||
];
|
||||
|
||||
const selectFeature = (idx: number) => {
|
||||
activeFeature.value = idx;
|
||||
};
|
||||
|
||||
let timer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
const startAutoPlay = () => {
|
||||
stopAutoPlay();
|
||||
timer = setInterval(() => {
|
||||
activeFeature.value = (activeFeature.value + 1) % features.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-5xl text-center">用强大功能,开启盈利快车道</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 justify-start lg:justify-between gap-3 lg:gap-0 overflow-x-auto lg:overflow-visible"
|
||||
@mouseenter="pauseAutoPlay"
|
||||
@mouseleave="resumeAutoPlay"
|
||||
>
|
||||
<div
|
||||
v-for="(feat, idx) in features"
|
||||
:key="idx"
|
||||
@click="selectFeature(idx)"
|
||||
@mouseenter="activeFeature = idx"
|
||||
class="flex-shrink-0 flex flex-col justify-center gap-2 lg:gap-5 pl-4 lg:pl-5 w-40 lg:w-100 h-20 lg:h-38 rounded-lg cursor-pointer transition-colors duration-300"
|
||||
:class="activeFeature === idx ? 'bg-primary text-white' : 'bg-inkreach-homepage-2'"
|
||||
>
|
||||
<p class="text-xl lg:text-4xl">{{ feat.title }}</p>
|
||||
<p class="text-sm lg:text-base indent-1">{{ feat.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-hidden rounded-xl relative">
|
||||
<img
|
||||
v-for="(feat, idx) in features"
|
||||
:key="'feat-img-' + idx"
|
||||
:src="feat.image"
|
||||
:alt="feat.title"
|
||||
class="w-full h-full object-contain transition-opacity duration-500 absolute inset-0"
|
||||
:class="activeFeature === idx ? 'opacity-100' : 'opacity-0 pointer-events-none'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
Reference in New Issue
Block a user