mohadese namavar
61 lines
1.7 KiB
Vue
61 lines
1.7 KiB
Vue
<template>
|
|
<div class="most-popular-this-week">
|
|
<h2>{{ $t("mostPopularsThisWeek") }}</h2>
|
|
<router-link to="/">
|
|
<span>{{ $t("show") }}</span>
|
|
<i class="isax isax-arrow-left" />
|
|
</router-link>
|
|
<ul>
|
|
<li v-for="(brand, i) in topBrand" :key="i">
|
|
<router-link :to="{ path: '/search', query: { brand: brand.link } }">
|
|
<img :src="brand.logo" :alt="brand.title" />
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { topBrand } = inject('data')
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.most-popular-this-week {
|
|
background: linear-gradient(270deg, #6ea89a 0%, #597c74 100%);
|
|
@apply container flex flex-wrap-reverse items-center rounded-lg;
|
|
@apply w-auto p-3 gap-1.5 mx-6 max-w-[97.1rem] min-h-[5.6rem];
|
|
@apply min-[445px]:justify-center sm:flex-row sm:mx-2 sm:gap-4;
|
|
@apply lg:h-[7.6rem] lg:px-7 lg:gap-[1.6rem] xl:px-[4.4rem];
|
|
|
|
h2 {
|
|
@apply text-white font-bold font-vazir whitespace-nowrap;
|
|
@apply text-xl lg:text-3xl;
|
|
}
|
|
|
|
&>a {
|
|
@apply w-[5.1rem] h-7 flex justify-center items-center gap-1.5 rounded bg-white px-2.5 py-[0.3rem] order-first;
|
|
@apply lg:w-32 lg:h-[2.6rem] lg:gap-3 lg:px-[0.9rem] text-[#549887] min-[445px]:order-none;
|
|
|
|
span {
|
|
@apply text-[0.7em] lg:text-[1.2em] font-medium font-iran-sans;
|
|
}
|
|
|
|
i {
|
|
@apply text-lg lg:text-2xl;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
@apply flex gap-[1.4rem] lg:gap-[2.6rem] items-center mb-1.5 sm:mb-0 md:mr-auto;
|
|
|
|
li {
|
|
@apply h-max py-px;
|
|
|
|
img {
|
|
@apply object-contain w-14 h-6 lg:w-12 lg:h-12;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|