Add skeleton for categories section
This commit is contained in:
marzban-dev
@@ -42,8 +42,12 @@ const onSlideChange = (swiper: SwiperClass) => {
|
|||||||
<span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4 min-[2000px]:typo-h-2"> دسته بندی ها </span>
|
<span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4 min-[2000px]:typo-h-2"> دسته بندی ها </span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-full mt-44 lg:mt-64 relative">
|
<div
|
||||||
|
class="w-full relative"
|
||||||
|
:class="swiper_instance ? 'mt-44 lg:mt-64' : 'mt-24'"
|
||||||
|
>
|
||||||
<NuxtImg
|
<NuxtImg
|
||||||
|
v-if="swiper_instance"
|
||||||
class="aspect-square w-[210px] sm:w-[240px] md:w-[300px] lg:w-[350px] 2xl:w-[420px] translate-y-[-136px] sm:translate-y-[-156px] md:translate-y-[-195px] lg:translate-y-[-228px] 2xl:translate-y-[-273px] absolute left-1/2 -translate-x-1/2 z-10"
|
class="aspect-square w-[210px] sm:w-[240px] md:w-[300px] lg:w-[350px] 2xl:w-[420px] translate-y-[-136px] sm:translate-y-[-156px] md:translate-y-[-195px] lg:translate-y-[-228px] 2xl:translate-y-[-273px] absolute left-1/2 -translate-x-1/2 z-10"
|
||||||
:style="{
|
:style="{
|
||||||
filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4))',
|
filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4))',
|
||||||
@@ -52,80 +56,96 @@ const onSlideChange = (swiper: SwiperClass) => {
|
|||||||
fetch-priority="low"
|
fetch-priority="low"
|
||||||
src="/img/heymlz/heymlz-category-seat.gif"
|
src="/img/heymlz/heymlz-category-seat.gif"
|
||||||
/>
|
/>
|
||||||
<Swiper
|
|
||||||
:loop="true"
|
<ClientOnly>
|
||||||
:centered-slides="true"
|
<Swiper
|
||||||
:slides-per-view="1.5"
|
:loop="true"
|
||||||
@swiper="onSwiper"
|
:centered-slides="true"
|
||||||
@slideChange="onSlideChange"
|
:slides-per-view="1.5"
|
||||||
:modules="[EffectCoverflow]"
|
@swiper="onSwiper"
|
||||||
:effect="'coverflow'"
|
@slideChange="onSlideChange"
|
||||||
:coverflowEffect="{
|
:modules="[EffectCoverflow]"
|
||||||
rotate: 10,
|
:effect="'coverflow'"
|
||||||
stretch: -100,
|
:coverflowEffect="{
|
||||||
depth: 200,
|
rotate: 10,
|
||||||
modifier: 1,
|
stretch: -100,
|
||||||
slideShadows: true,
|
depth: 200,
|
||||||
}"
|
modifier: 1,
|
||||||
:breakpoints="{
|
slideShadows: true,
|
||||||
320: {
|
}"
|
||||||
coverflowEffect: {
|
:breakpoints="{
|
||||||
stretch: -50,
|
320: {
|
||||||
|
coverflowEffect: {
|
||||||
|
stretch: -50,
|
||||||
|
},
|
||||||
|
slidesPerView: 1.75,
|
||||||
|
centeredSlides: true,
|
||||||
},
|
},
|
||||||
slidesPerView: 1.75,
|
640: {
|
||||||
centeredSlides: true,
|
coverflowEffect: {
|
||||||
},
|
stretch: -100,
|
||||||
640: {
|
},
|
||||||
coverflowEffect: {
|
centeredSlides: true,
|
||||||
stretch: -100,
|
slidesPerView: 2.65,
|
||||||
},
|
},
|
||||||
centeredSlides: true,
|
1024: {
|
||||||
slidesPerView: 2.65,
|
coverflowEffect: {
|
||||||
},
|
stretch: -100,
|
||||||
1024: {
|
},
|
||||||
coverflowEffect: {
|
centeredSlides: true,
|
||||||
stretch: -100,
|
slidesPerView: 3.65,
|
||||||
},
|
},
|
||||||
centeredSlides: true,
|
2000: {
|
||||||
slidesPerView: 3.65,
|
coverflowEffect: {
|
||||||
},
|
stretch: -100,
|
||||||
2000: {
|
},
|
||||||
coverflowEffect: {
|
centeredSlides: true,
|
||||||
stretch: -100,
|
slidesPerView: 4,
|
||||||
},
|
},
|
||||||
centeredSlides: true,
|
3000: {
|
||||||
slidesPerView: 4,
|
coverflowEffect: {
|
||||||
},
|
stretch: -100,
|
||||||
3000: {
|
},
|
||||||
coverflowEffect: {
|
centeredSlides: true,
|
||||||
stretch: -100,
|
slidesPerView: 6,
|
||||||
},
|
},
|
||||||
centeredSlides: true,
|
}"
|
||||||
slidesPerView: 6,
|
|
||||||
},
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<SwiperSlide
|
|
||||||
ref="slideElement"
|
|
||||||
v-for="(slide, index) in slides"
|
|
||||||
:key="slide.id"
|
|
||||||
>
|
>
|
||||||
<CategoryCard
|
<SwiperSlide
|
||||||
dark-layer
|
ref="slideElement"
|
||||||
:id="slide.id"
|
v-for="(slide, index) in slides"
|
||||||
:slug="slide.slug"
|
:key="slide.id"
|
||||||
:category="slide.name"
|
>
|
||||||
:video="slide.video ?? ''"
|
<CategoryCard
|
||||||
:picture="slide.image ?? ''"
|
dark-layer
|
||||||
:count="slide.product_count"
|
:id="slide.id"
|
||||||
:isActive="activeIndex === index"
|
:slug="slide.slug"
|
||||||
description="توضیحات دسته بندی"
|
:category="slide.name"
|
||||||
/>
|
:video="slide.video ?? ''"
|
||||||
</SwiperSlide>
|
:picture="slide.image ?? ''"
|
||||||
</Swiper>
|
:count="slide.product_count"
|
||||||
|
:isActive="activeIndex === index"
|
||||||
|
description="توضیحات دسته بندی"
|
||||||
|
/>
|
||||||
|
</SwiperSlide>
|
||||||
|
</Swiper>
|
||||||
|
|
||||||
|
<template #fallback>
|
||||||
|
<div
|
||||||
|
class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 min-[3000px]:grid-cols-6 gap-12 lg:gap-20 px-12 lg:px-20"
|
||||||
|
>
|
||||||
|
<div class="w-full aspect-square bg-neutral-800/75 rounded-150"></div>
|
||||||
|
<div class="w-full aspect-square bg-neutral-800/75 rounded-150"></div>
|
||||||
|
<div class="w-full aspect-square bg-neutral-800/75 rounded-150 max-md:hidden"></div>
|
||||||
|
<div class="w-full aspect-square bg-neutral-800/75 rounded-150 max-xl:hidden"></div>
|
||||||
|
<div class="w-full aspect-square bg-neutral-800/75 rounded-150 max-[3000px]:hidden"></div>
|
||||||
|
<div class="w-full aspect-square bg-neutral-800/75 rounded-150 max-[3000px]:hidden"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ClientOnly>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-if="!swiper_instance?.isBeginning"
|
v-if="swiper_instance && !swiper_instance?.isBeginning"
|
||||||
@click="swiper_instance?.slidePrev()"
|
@click="swiper_instance?.slidePrev()"
|
||||||
:style="{
|
:style="{
|
||||||
right: `calc(50% - ${slideWidth / 2}px - 20px)`,
|
right: `calc(50% - ${slideWidth / 2}px - 20px)`,
|
||||||
@@ -139,7 +159,7 @@ const onSlideChange = (swiper: SwiperClass) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-if="!swiper_instance?.isEnd"
|
v-if="swiper_instance && !swiper_instance?.isEnd"
|
||||||
@click="swiper_instance?.slideNext()"
|
@click="swiper_instance?.slideNext()"
|
||||||
:style="{
|
:style="{
|
||||||
left: `calc(50% - ${slideWidth / 2}px - 20px)`,
|
left: `calc(50% - ${slideWidth / 2}px - 20px)`,
|
||||||
|
|||||||
Reference in New Issue
Block a user