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

Add skeleton for categories section

Browse Source
This commit is contained in:
marzban-dev
2026-06-03 20:07:19 +03:30
parent 0567593edd
commit c1d08496c9
1 changed files with 88 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/home/Categories.vue
+88 -68
View File
@@ -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>
</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
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"
:style="{
filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4))',
@@ -52,80 +56,96 @@ const onSlideChange = (swiper: SwiperClass) => {
fetch-priority="low"
src="/img/heymlz/heymlz-category-seat.gif"
/>
<Swiper
:loop="true"
:centered-slides="true"
:slides-per-view="1.5"
@swiper="onSwiper"
@slideChange="onSlideChange"
:modules="[EffectCoverflow]"
:effect="'coverflow'"
:coverflowEffect="{
rotate: 10,
stretch: -100,
depth: 200,
modifier: 1,
slideShadows: true,
}"
:breakpoints="{
320: {
coverflowEffect: {
stretch: -50,
<ClientOnly>
<Swiper
:loop="true"
:centered-slides="true"
:slides-per-view="1.5"
@swiper="onSwiper"
@slideChange="onSlideChange"
:modules="[EffectCoverflow]"
:effect="'coverflow'"
:coverflowEffect="{
rotate: 10,
stretch: -100,
depth: 200,
modifier: 1,
slideShadows: true,
}"
:breakpoints="{
320: {
coverflowEffect: {
stretch: -50,
},
slidesPerView: 1.75,
centeredSlides: true,
},
slidesPerView: 1.75,
centeredSlides: true,
},
640: {
coverflowEffect: {
stretch: -100,
640: {
coverflowEffect: {
stretch: -100,
},
centeredSlides: true,
slidesPerView: 2.65,
},
centeredSlides: true,
slidesPerView: 2.65,
},
1024: {
coverflowEffect: {
stretch: -100,
1024: {
coverflowEffect: {
stretch: -100,
},
centeredSlides: true,
slidesPerView: 3.65,
},
centeredSlides: true,
slidesPerView: 3.65,
},
2000: {
coverflowEffect: {
stretch: -100,
2000: {
coverflowEffect: {
stretch: -100,
},
centeredSlides: true,
slidesPerView: 4,
},
centeredSlides: true,
slidesPerView: 4,
},
3000: {
coverflowEffect: {
stretch: -100,
3000: {
coverflowEffect: {
stretch: -100,
},
centeredSlides: true,
slidesPerView: 6,
},
centeredSlides: true,
slidesPerView: 6,
},
}"
>
<SwiperSlide
ref="slideElement"
v-for="(slide, index) in slides"
:key="slide.id"
}"
>
<CategoryCard
dark-layer
:id="slide.id"
:slug="slide.slug"
:category="slide.name"
:video="slide.video ?? ''"
:picture="slide.image ?? ''"
:count="slide.product_count"
:isActive="activeIndex === index"
description="توضیحات دسته بندی"
/>
</SwiperSlide>
</Swiper>
<SwiperSlide
ref="slideElement"
v-for="(slide, index) in slides"
:key="slide.id"
>
<CategoryCard
dark-layer
:id="slide.id"
:slug="slide.slug"
:category="slide.name"
:video="slide.video ?? ''"
:picture="slide.image ?? ''"
: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
v-if="!swiper_instance?.isBeginning"
v-if="swiper_instance && !swiper_instance?.isBeginning"
@click="swiper_instance?.slidePrev()"
:style="{
right: `calc(50% - ${slideWidth / 2}px - 20px)`,
@@ -139,7 +159,7 @@ const onSlideChange = (swiper: SwiperClass) => {
</div>
<div
v-if="!swiper_instance?.isEnd"
v-if="swiper_instance && !swiper_instance?.isEnd"
@click="swiper_instance?.slideNext()"
:style="{
left: `calc(50% - ${slideWidth / 2}px - 20px)`,