mohadese namavar
92 lines
2.8 KiB
Vue
92 lines
2.8 KiB
Vue
<template>
|
|
<section class="est-products">
|
|
<div>
|
|
<div v-for="(items, key) in { newProduct, topProduct }" :key="key">
|
|
<h2>{{ $t(key) }}</h2>
|
|
<h3>
|
|
<span>
|
|
{{ $t("toViewProducts", { title: $t(key) }) }}
|
|
</span>
|
|
<router-link to="/products">
|
|
{{ $t("clickHere") }}
|
|
</router-link>
|
|
</h3>
|
|
<div>
|
|
<template v-for="(btn, i) in btns.arrows" :key="i">
|
|
<Button v-if="device == 'desktop'" v-bind="btn" />
|
|
</template>
|
|
<Swiper v-bind="swipers[key]" :class="key">
|
|
<SwiperSlide v-for="(item, i) in items" :key="i">
|
|
<ProductCard :data="item" type="main" />
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
<HomeMostPopularThisWeek />
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { newProduct, topProduct } = inject('data')
|
|
const { swipers, btns } = inject('init')
|
|
const { device } = inject('service')
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.est-products {
|
|
@apply w-full bg-[#F6F8FA] py-6 lg:py-20 overflow-hidden;
|
|
|
|
&>div {
|
|
@apply w-full lg:container flex flex-col mx-auto;
|
|
|
|
&>div:not([class]) {
|
|
@apply flex flex-col;
|
|
|
|
&:nth-of-type(2) {
|
|
@apply order-last mt-10 lg:mt-20;
|
|
}
|
|
|
|
&>h2 {
|
|
@apply text-[#0B1F11] font-bold font-vazir mr-6 lg:mr-4;
|
|
@apply text-lg lg:text-3xl;
|
|
}
|
|
|
|
&>h3 {
|
|
@apply flex items-center gap-1.5 mt-1.5 mr-6 font-vazir;
|
|
@apply text-sm lg:text-xl lg:mt-2 lg:mr-4;
|
|
|
|
span {
|
|
@apply text-[#8C8C8C] lg:leading-9;
|
|
}
|
|
|
|
a {
|
|
@apply text-primary-600 font-bold lg:leading-[2.8rem];
|
|
}
|
|
}
|
|
|
|
&>div {
|
|
@apply flex gap-10 w-full h-max mt-2 mb-8 lg:my-16 relative;
|
|
|
|
.swiper {
|
|
@apply w-full h-max mx-0 p-2.5 lg:py-4;
|
|
|
|
.swiper-wrapper {
|
|
@apply w-max h-max;
|
|
|
|
.swiper-slide {
|
|
@apply h-max w-max rtl ml-3 lg:ml-5 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>
|