48 lines
1.1 KiB
Vue
48 lines
1.1 KiB
Vue
<template>
|
|
<section class="cart-bought-products">
|
|
<div>
|
|
<h2>{{ $t("buyersBoughtProducts") }}</h2>
|
|
<Swiper slides-per-view="auto">
|
|
<SwiperSlide v-for="(product, i) in buyers" :key="i">
|
|
<ProductCard :data="product" mode="main" />
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
<HomeMostPopularThisWeek />
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { buyers = [] } = inject('data')
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.cart-bought-products {
|
|
@apply flex justify-center py-6 lg:py-16 bg-[#F6F8FA];
|
|
|
|
& > div {
|
|
@apply container flex flex-col gap-6 lg:gap-16;
|
|
|
|
& > h2 {
|
|
@apply text-[#333333] self-center text-lg lg:text-3xl font-bold font-vazir;
|
|
}
|
|
|
|
& > .swiper {
|
|
@apply w-full py-2 lg:py-4 ;
|
|
|
|
.swiper-wrapper {
|
|
@apply w-max;
|
|
|
|
.swiper-slide {
|
|
@apply w-max ml-3 lg:ml-5 last:ml-0;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > .home-most-popular-this-week {
|
|
@apply hidden lg:flex;
|
|
}
|
|
}
|
|
}
|
|
</style>
|