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

Merge branch 'main' of https://github.com/Byeto-Company/hossein_por_shop

Browse Source
This commit is contained in:
Mamalizz
2025-04-16 20:14:51 +03:30
parent b3d4b60d6f 6800d74c5d
commit f3260756c6
5 changed files with 65 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/Brands.vue
+25 -25
View File
@@ -24,7 +24,7 @@ const {} = toRefs(props);
</div>
<div class="-rotate-z-2 z-20">
<div
class="bg-blue-500 flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee-reverse h-[90px] sm:h-[140px]"
class="bg-black flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee-reverse h-[90px] sm:h-[140px]"
>
<template v-for="i in 10">
<div class="text-[30px] lg:text-[40px] text-white whitespace-nowrap font-semibold opacity-85">
@@ -46,32 +46,32 @@ const {} = toRefs(props);
class="bg-slate-100/70 flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee h-[90px] sm:h-[140px]"
>
<template v-for="i in 1">
<NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px]" />
</template>
<template v-for="i in 1">
<NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px]" />
</template>
</div>
</div>
frontend/components/home/Categories.vue
+2 -2
View File
@@ -27,13 +27,13 @@ const onSwiper = (swiper: SwiperClass) => {
<span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4">
دسته بندی ها
</span>
<p
<!-- <p
class="text-slate-300 text-center max-w-[750px] typo-p-sm md:typo-p-lg xl:typo-p-xl"
>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و
با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
و مجله در ستون و سطرآنچنان که
</p>
</p> -->
</div>
</div>
frontend/components/home/Preview.vue
+24 -22
View File
@@ -75,9 +75,9 @@ watch(
<div class="container mb-40 lg:mb-80 mt-20">
<div>
<div class="flex flex-col items-center gap-3 mb-10 lg:mb-16">
<span class="typo-p-sm md:typo-p-md text-slate-500"
>مقایسه محصولات</span
>
<span class="typo-p-sm md:typo-p-md text-slate-500">
مقایسه محصولات
</span>
<span class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-black">
تفاوت محصلات ما را ببینید
</span>
@@ -92,8 +92,8 @@ watch(
:src="homeData!.difreance_section.image1"
:class="
showHeymlzAnimation
? 'brightness-35'
: 'brightness-[95%]'
? 'brightness-50 blur-md'
: 'brightness-[95%] blur-[0px]'
"
class="select-none absolute size-full object-cover transition-[filter] duration-250"
:alt="homeData!.difreance_section.title1"
@@ -119,8 +119,8 @@ watch(
:src="homeData!.difreance_section.image2"
:class="
showHeymlzAnimation
? 'brightness-35'
: 'brightness-[95%]'
? 'brightness-50 blur-md'
: 'brightness-[95%] blur-[0px]'
"
class="overlay-image select-none absolute object-cover size-full transition-[filter] duration-250"
:alt="homeData!.difreance_section.title2"
@@ -136,15 +136,17 @@ watch(
/>
</Transition>
<NuxtImg
v-if="showHeymlzAnimation"
src="/img/heymlz/heymlz-pulling.gif"
class="size-[250px] sm:size-[400px] absolute translate-x-[-62px] sm:translate-x-[-107px] z-10 top-[50%] -translate-y-1/2"
:style="{
left: `${clipPathPercent}%`,
filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.3))',
}"
/>
<Transition name="fade" :duration="250">
<NuxtImg
v-if="showHeymlzAnimation"
src="/img/heymlz/heymlz-pulling.gif"
class="size-[250px] sm:size-[400px] absolute translate-x-[-62px] sm:translate-x-[-107px] z-10 top-[50%] -translate-y-1/2"
:style="{
left: `${clipPathPercent}%`,
filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.3))',
}"
/>
</Transition>
<div
:style="{
@@ -154,21 +156,20 @@ watch(
activeSlideVideo !== 'none' ? 'opacity-10' : '',
showHeymlzAnimation ? 'bg-neutral-200' : 'bg-black',
]"
class="select-none w-2 h-full absolute left-0 flex items-center justify-center transition-opacity duration-250"
class="select-none w-[5px] sm:w-2 h-full absolute left-0 flex items-center justify-center transition-opacity duration-250"
>
<div
ref="draggableEl"
:class="
showHeymlzAnimation
? 'bg-neutral-300'
? 'bg-neutral-200'
: 'bg-black'
"
class="cursor-grab hover:scale-115 transition-transform rounded-full absolute size-11 flex items-center justify-center"
class="touch-none cursor-grab hover:scale-115 transition-transform rounded-full absolute size-9 sm:size-11 flex items-center justify-center"
>
<Icon
name="ci:arrows"
size="24"
class="transition-all"
class="transition-all size-5 sm:size-6"
:class="
showHeymlzAnimation
? '**:stroke-black'
@@ -180,7 +181,8 @@ watch(
</div>
<div
class="absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end"
:class="showHeymlzAnimation ? 'opacity-0' : 'opacity-100'"
class="absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end transition-opacity"
>
<div
class="flex flex-col gap-2 text-black transition-opacity"