mohadese namavar
87 lines
2.5 KiB
Vue
87 lines
2.5 KiB
Vue
<template>
|
|
<section class="product-wrapper">
|
|
{{ data }}
|
|
<h2 v-if="title">{{ $t(title) }}</h2>
|
|
<div>
|
|
<SearchFilters v-if="device == 'desktop'" />
|
|
<div>
|
|
<SearchSort v-if="device == 'desktop'" />
|
|
<SearchToolbar v-if="device == 'mobile'" />
|
|
<div>
|
|
<template v-for="(product, i) in products" :key="i">
|
|
<ProductCard :data="product" />
|
|
</template>
|
|
</div>
|
|
<AppPagination :pages="pages" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { device } = inject('service')
|
|
const { products, pages } = inject('data')
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.product-wrapper {
|
|
@apply w-full flex flex-col gap-4 lg:gap-[3.8rem] lg:pt-11 px-5;
|
|
|
|
&>h2 {
|
|
@apply w-full flex justify-center lg:justify-start gap-3 lg:gap-6 items-center text-[#333333] text-base lg:text-2xl font-bold font-vazir;
|
|
|
|
&::before {
|
|
@apply lg:content-['_'] h-8 w-1.5 rounded-full bg-primary-600;
|
|
}
|
|
}
|
|
|
|
&>div {
|
|
@apply w-full flex gap-6 justify-center;
|
|
|
|
&>div {
|
|
@apply w-full container mx-0 flex flex-col gap-10;
|
|
|
|
|
|
&>div {
|
|
@apply w-full flex max-lg:flex-col lg:flex-wrap gap-3 lg:gap-[1.4rem];
|
|
|
|
@media (max-width: 1024px) {
|
|
.product-card {
|
|
@apply w-full h-[9.4rem] flex-row shadow-none border-0 rounded-none gap-4 p-0;
|
|
@apply mt-[1.1rem] border-b border-[#E5E5E5];
|
|
|
|
&>img {
|
|
@apply w-[7.4rem] h-[7.4rem] object-contain object-top self-start;
|
|
}
|
|
|
|
&>div {
|
|
@apply pb-6;
|
|
|
|
h2 {
|
|
@apply mt-0 text-[0.7em];
|
|
}
|
|
|
|
h1 {
|
|
@apply text-xs;
|
|
}
|
|
|
|
&>button {
|
|
@apply left-0 bottom-3;
|
|
|
|
.p-button-icon {
|
|
@apply text-xl;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pagination {
|
|
@apply self-center mt-auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |