mohadese namavar
85 lines
2.8 KiB
Vue
85 lines
2.8 KiB
Vue
<template>
|
|
<section class="popular-categories">
|
|
<div>
|
|
<h2>{{ $t("popularCategories") }}</h2>
|
|
<div>
|
|
<ul>
|
|
<li v-for="({ link, headerImage, name }, i) in topCategory" :key="i">
|
|
<router-link :to="{ path: '/search', query: { category: link } }">
|
|
<div>
|
|
<!-- <span :style="style(bg)"></span> -->
|
|
<img :src="headerImage" />
|
|
</div>
|
|
<h3>{{ name }}</h3>
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { topCategory } = inject('data')
|
|
|
|
const bg = reactive({ from: '#E1FFEB', to: '#D8E7FA' })
|
|
const style = (bg) => `background: linear-gradient(143.73deg, ${bg.from} 5.62%, ${bg.to} 99.35%)`
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.popular-categories {
|
|
@apply w-full flex justify-center mt-16 lg:mt-[10.8rem];
|
|
|
|
&>div {
|
|
@apply container flex flex-col items-center gap-10 lg:gap-16 w-full;
|
|
|
|
h2 {
|
|
@apply text-[#0B1F11] text-xl lg:text-3xl font-bold font-vazir;
|
|
}
|
|
|
|
&>div {
|
|
@apply overflow-x-auto w-full rtl;
|
|
|
|
&::-webkit-scrollbar {
|
|
@apply hidden;
|
|
}
|
|
|
|
ul {
|
|
@apply rtl grid grid-rows-2 grid-flow-col justify-items-center gap-[1.9rem] w-max mx-auto lg:gap-0 lg:gap-y-8;
|
|
|
|
li {
|
|
@apply justify-self-center;
|
|
a {
|
|
@apply m-auto flex flex-col items-center;
|
|
@apply w-[4.6rem] h-[6rem] justify-between;
|
|
@apply lg:w-[16.2rem] lg:h-[15.6rem] lg:gap-[0.6rem];
|
|
|
|
div {
|
|
@apply flex relative h-full w-full xl:pt-2.5;
|
|
|
|
// span {
|
|
// @apply rounded-full -z-10;
|
|
// @apply w-[4.3rem] h-[4.3rem];
|
|
// @apply lg:w-[11.8rem] lg:h-[11.8rem];
|
|
// }
|
|
|
|
img {
|
|
@apply m-auto object-contain absolute left-1/2 -translate-x-1/2;
|
|
@apply w-[3.6rem] h-[3rem];
|
|
@apply lg:w-[11.8rem] lg:h-[11.8rem];
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
@apply text-[#191919] font-bold font-vazir;
|
|
@apply text-[0.7em] lg:text-[1.2em] truncate w-full text-center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|