heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated

Browse Source
This commit is contained in:
marzban-dev
2025-01-28 00:26:14 +03:30
parent 91dbe5aeaa
commit 93c92809ed
1 changed files with 35 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/home/Preview.vue
+35 -20
View File
@@ -1,6 +1,13 @@
<script setup lang="ts">
// import
import useHomeData from "~/composables/api/home/useHomeData";
// state
const { data: homeData } = useHomeData();
const clipPathPercent = ref(49);
const draggableEl = ref<HTMLElement | null>(null);
@@ -29,56 +36,64 @@ watch(
<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"
>تفاوت محصول را ببینید در اینجا</span
>
<span class="typo-p-md text-slate-500">مقایسه محصولات</span>
<span class="typo-h-3 text-black">
تفاوت محصلات ما را ببینید
</span>
</div>
<div
ref="previewContainerEl"
class="rounded-200 overflow-hidden h-[90svh] relative"
>
<img
src="/img/hero-bg.jpg"
class="select-none absolute size-full object-cover"
alt=""
:src="homeData!.difreance_section.image1"
class="select-none absolute size-full object-cover brightness-[95%]"
:alt="homeData!.difreance_section.title1"
/>
<div class="absolute size-full right-0 w-full">
<img
src="/img/hero-bg.jpg"
class="overlay-image select-none absolute object-cover size-full hue-rotate-200 brightness-35"
alt=""
:src="homeData!.difreance_section.image2"
class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
:alt="homeData!.difreance_section.title2"
/>
<div
:style="{
left: `${clipPathPercent}%`,
}"
ref="draggableEl"
class="select-none w-2 h-full bg-white absolute left-0 flex items-center justify-center"
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-white size-11 flex items-center justify-center"
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-black"
class="**:stroke-white"
/>
</div>
</div>
</div>
<div
class="absolute bottom-0 p-10 w-full flex justify-between items-end bg-linear-to-t from-black/55 to-transparent"
class="absolute bottom-0 p-10 w-full flex justify-between items-end"
>
<div class="flex flex-col gap-2 text-white">
<span class="typo-p-md">رنگ محصول</span>
<span class="typo-h-3">نارنجی</span>
<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 justify-start gap-2 text-white">
<span class="typo-p-md">رنگ محصول</span>
<span class="typo-h-3">سفید</span>
<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>