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:09 +03:30
parent c14946ddb0
commit ea97302ae1
1 changed files with 53 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/home/Categories.vue
+53 -64
View File
@@ -4,6 +4,7 @@
import { Swiper, SwiperSlide } from "swiper/vue";
import type { SwiperClass } from "swiper/react";
import useHomeData from "~/composables/api/home/useHomeData";
type Props = {}
@@ -14,30 +15,10 @@ const {} = toRefs(props);
// state
const { data: homeData } = useHomeData();
const swiper_instance = ref<SwiperClass | null>(null);
const slides = [
{
id: 0,
title: "TEST"
},
{
id: 1,
title: "TEST"
},
{
id: 2,
title: "TEST"
},
{
id: 3,
title: "TEST"
},
{
id: 4,
title: "TEST"
}
];
// methods
@@ -48,50 +29,58 @@ const onSwiper = (swiper: SwiperClass) => {
</script>
<template>
<div class="w-full my-20 relative">
<Swiper
:slides-per-view="3.65"
:space-between="20"
:slides-offset-after="125"
:slides-offset-before="125"
@swiper="onSwiper"
>
<SwiperSlide
v-for="slide in slides"
:key="slide.id"
<section class="flex flex-col gap-4 bg-black h-[110svh] mt-40 py-32">
<div class="w-full flex justify-center items-center">
<span class="text-white typo-h-4">
دسته بندی ها
</span>
</div>
<div class="w-full my-20 relative">
<Swiper
:loop="true"
:centered-slides="true"
:slides-per-view="3.65"
:space-between="20"
@swiper="onSwiper"
>
<CategoryCard
:id="slide.id"
category="یک دسته بندی تست"
picture="/img/product-1.jpg"
:count="20"
description="یک دسته بندی تستasdasd"
<SwiperSlide
v-for="slide in homeData!.sub_categories"
:key="slide.id"
>
<CategoryCard
dark-layer
:id="slide.id"
:category="slide.name"
:picture="slide.icon"
:count="slide.product_count"
description="توضیحات دسته بندی"
/>
</SwiperSlide>
</Swiper>
<div
v-if="!swiper_instance?.isBeginning"
@click="swiper_instance?.slidePrev()"
class="absolute z-20 right-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] bg-white rounded-full size-11.5 flex justify-center items-center"
>
<Icon
name="ci:arrow-right"
class="**:stroke-black"
size="24"
/>
</SwiperSlide>
</Swiper>
</div>
<div
v-if="!swiper_instance?.isBeginning"
@click="swiper_instance?.slidePrev()"
class="absolute z-20 right-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] bg-white rounded-full size-11.5 flex justify-center items-center"
>
<Icon
name="ci:arrow-right"
class="**:stroke-black"
size="24"
/>
<div
v-if="!swiper_instance?.isEnd"
@click="swiper_instance?.slideNext()"
class="absolute z-20 left-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] bg-white rounded-full size-11.5 flex justify-center items-center"
>
<Icon
name="ci:arrow-left"
class="**:stroke-black"
size="24"
/>
</div>
</div>
<div
v-if="!swiper_instance?.isEnd"
@click="swiper_instance?.slideNext()"
class="absolute z-20 left-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] bg-white rounded-full size-11.5 flex justify-center items-center"
>
<Icon
name="ci:arrow-left"
class="**:stroke-black"
size="24"
/>
</div>
</div>
</section>
</template>