mohadese namavar
60 lines
1.5 KiB
Vue
60 lines
1.5 KiB
Vue
<template>
|
|
<section class="main-categories">
|
|
<Swiper slides-per-view="auto">
|
|
<SwiperSlide v-for="(item, i) in store.items" :key="i">
|
|
<router-link :to="{ path: '/search', query: { category: item.link } }">
|
|
<img :src="item.headerImage" />
|
|
<h3>{{ $t(item.name) }}</h3>
|
|
</router-link>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const store = useCategoriesStore();
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.main-categories {
|
|
@apply w-full flex mt-12 lg:mt-[9.6rem];
|
|
|
|
.swiper {
|
|
@apply container py-2 lg:py-4 max-lg:px-4;
|
|
|
|
.swiper-wrapper {
|
|
@apply w-max mx-auto;
|
|
|
|
.swiper-slide {
|
|
@apply w-max ml-2.5 lg:ml-[1.4rem] last:ml-0;
|
|
|
|
a {
|
|
@apply flex flex-col items-center shrink-0;
|
|
@apply w-[6.3rem] gap-2.5 pb-4;
|
|
@apply lg:w-[10.8rem] lg:gap-5 lg:pb-6;
|
|
|
|
// &::before {
|
|
// @apply content-['_'] h-[5.6rem] lg:h-[10.8rem] rounded-2xl absolute bottom-0 inset-x-0 -z-10;
|
|
// @apply shadow-[3px_2px_10px_#87C29A] lg:shadow-[5px_5px_19px_0px_#87C29A,_-5px_-1px_15px_0px_#ffffffcc];
|
|
// background: linear-gradient(
|
|
// 133deg,
|
|
// #e9ecef 0%,
|
|
// white 100%
|
|
// );
|
|
// }
|
|
|
|
img {
|
|
@apply w-[4.4rem] h-[4.4rem] rounded-full lg:w-[9.1rem] lg:h-[9.1rem];
|
|
}
|
|
|
|
h3 {
|
|
@apply text-[#191919] font-medium font-vazir;
|
|
@apply text-[0.625em] lg:text-[1.1875em];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|