mohadese namavar
53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
<template>
|
|
<section v-if="similars.length > 0" class="similars">
|
|
<h2>{{ $t('productSimilars') }}</h2>
|
|
<div>
|
|
<template v-if="device == 'desktop'">
|
|
<Button v-for="(btn, i) in arrows" :key="i" v-bind="btn" />
|
|
</template>
|
|
<Swiper v-bind="swiper.similars">
|
|
<SwiperSlide v-for="(item, i) in similars" :key="i">
|
|
<ProductCard :data="item" type="action" />
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { swiper, arrows } = inject('init')
|
|
const { device } = inject('service')
|
|
const { similars } = inject('data')
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.product .similars {
|
|
@apply w-full flex flex-col items-center overflow-hidden;
|
|
|
|
&>h2 {
|
|
@apply text-[#0B1F11] text-lg lg:text-3xl font-bold font-vazir;
|
|
}
|
|
|
|
&>div {
|
|
@apply max-w-full w-full flex gap-10 h-max mt-6 lg:my-16 relative;
|
|
|
|
.swiper {
|
|
@apply w-full container h-max py-4 px-6;
|
|
|
|
.swiper-wrapper {
|
|
@apply w-max h-max;
|
|
|
|
.swiper-slide {
|
|
@apply w-max ml-[0.9rem] last:ml-0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&>button {
|
|
@apply w-10 h-10 self-center absolute text-xl p-0 bg-[#B2B2B2] border-none #{!important};
|
|
@apply first-of-type:-right-16 last-of-type:-left-16 max-lg:hidden;
|
|
}
|
|
}
|
|
}
|
|
</style>
|