marzban-dev
146 lines
4.8 KiB
Vue
146 lines
4.8 KiB
Vue
<script setup lang="ts">
|
|
|
|
// import
|
|
|
|
import useHomeData from "~/composables/api/home/useHomeData";
|
|
|
|
// state
|
|
|
|
const { data: homeData } = useHomeData();
|
|
|
|
const clipPathPercent = ref(49);
|
|
|
|
const activeSlideVideo = ref<"left" | "right" | "none">("none");
|
|
|
|
const draggableEl = ref<HTMLElement | null>(null);
|
|
const previewContainerEl = ref<HTMLElement | null>(null);
|
|
|
|
const { x: dragAxisX } = useDraggable(draggableEl, {
|
|
initialValue: { x: 0, y: 0 },
|
|
axis: "x"
|
|
});
|
|
|
|
// watch
|
|
|
|
watch(() => clipPathPercent.value, (newValue) => {
|
|
if (newValue > 80) {
|
|
activeSlideVideo.value = "right";
|
|
} else if (newValue < 20) {
|
|
activeSlideVideo.value = "left";
|
|
} else {
|
|
activeSlideVideo.value = "none";
|
|
}
|
|
});
|
|
|
|
watch(
|
|
() => dragAxisX.value,
|
|
(newValue) => {
|
|
const clientRect = previewContainerEl.value?.getBoundingClientRect()!;
|
|
const percent = clientRect.width / 100;
|
|
const clipPercent = (newValue - clientRect.x - 8) / percent;
|
|
if (clipPercent >= 5 && clipPercent <= 95) {
|
|
clipPathPercent.value = clipPercent;
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<div class="flex flex-col items-center gap-3 mb-16">
|
|
<span class="typo-p-md text-slate-500">مقایسه محصولات</span>
|
|
<span class="typo-h-3 text-black">
|
|
تفاوت محصلات ما را ببینید
|
|
{{ activeSlideVideo }}
|
|
</span>
|
|
</div>
|
|
<div
|
|
ref="previewContainerEl"
|
|
class="rounded-200 overflow-hidden h-[90svh] relative"
|
|
>
|
|
<Transition name="fade">
|
|
<img
|
|
v-if="activeSlideVideo !== 'right'"
|
|
:src="homeData!.difreance_section.image1"
|
|
class="select-none absolute size-full object-cover brightness-[95%]"
|
|
:alt="homeData!.difreance_section.title1"
|
|
/>
|
|
<video
|
|
v-else
|
|
autoplay
|
|
muted
|
|
src="/video/vid-3.mp4"
|
|
class="select-none absolute size-full object-cover brightness-[95%]"
|
|
/>
|
|
</Transition>
|
|
|
|
<div class="absolute size-full right-0 w-full">
|
|
<Transition name="fade">
|
|
<img
|
|
v-if="activeSlideVideo !== 'left'"
|
|
:src="homeData!.difreance_section.image2"
|
|
class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
|
|
:alt="homeData!.difreance_section.title2"
|
|
/>
|
|
<video
|
|
v-else
|
|
autoplay
|
|
muted
|
|
src="/video/vid-3.mp4"
|
|
class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
|
|
/>
|
|
</Transition>
|
|
<div
|
|
:style="{
|
|
left: `${clipPathPercent}%`,
|
|
}"
|
|
ref="draggableEl"
|
|
class="select-none w-2 h-full bg-black absolute left-0 flex items-center justify-center"
|
|
>
|
|
<div
|
|
class="cursor-grab hover:scale-115 transition-transform rounded-full absolute bg-black size-11 flex items-center justify-center"
|
|
>
|
|
<Icon
|
|
name="ci:arrows"
|
|
size="24"
|
|
class="**:stroke-white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="absolute bottom-0 p-10 w-full flex justify-between items-end"
|
|
>
|
|
<div class="flex flex-col gap-2 text-black">
|
|
<span class="typo-p-md">
|
|
{{ homeData!.difreance_section.description1 }}
|
|
</span>
|
|
<span class="typo-h-3">
|
|
{{ homeData!.difreance_section.title1 }}
|
|
</span>
|
|
</div>
|
|
<div class="flex flex-col gap-2 text-black">
|
|
<span class="typo-p-md text-end">
|
|
{{ homeData!.difreance_section.description2 }}
|
|
</span>
|
|
<span class="typo-h-3 text-end">
|
|
{{ homeData!.difreance_section.title2 }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.overlay-image {
|
|
clip-path: polygon(
|
|
v-bind('clipPathPercent + "%"') 0,
|
|
100% 0,
|
|
100% 100%,
|
|
v-bind('clipPathPercent + "%"') 100%
|
|
);
|
|
}
|
|
</style>
|