mohadese namavar
152 lines
4.2 KiB
Vue
152 lines
4.2 KiB
Vue
<template>
|
|
<div class="compare-selection">
|
|
<div>
|
|
<h2>{{ $t('selectProductCompare') }}</h2>
|
|
<Button icon="isax isax-close-circle" severity='secondary' rounded text @click="dialog.close()" />
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<i class="isax isax-search-normal-1" />
|
|
<input v-model="query" :placeholder="$t('searchInPorducts')" />
|
|
</div>
|
|
<div>
|
|
<span>{{ $t('topProductToCompare') }}</span>
|
|
<span>{{ $t('commodity') }} {{ count }}</span>
|
|
</div>
|
|
<div>
|
|
<ul>
|
|
<li v-for="(product, i) in store.items" :key="i" @click="add(product.id)">
|
|
<ProductCard :data="product" type="main" />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const dialog = inject('dialogRef')
|
|
|
|
const query = ref()
|
|
const count = ref(759)
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const store = useProductsStore()
|
|
const ids = route.params.ids.split('-')
|
|
store.compareSearch(ids)
|
|
watch(query, (v) => store.compareSearch(ids, v))
|
|
const add = (id) => {
|
|
if (!ids.includes(id)){
|
|
dialog.value.close()
|
|
router.push(`/compare/${[...ids, id].join('-')}`)
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.compare-selection {
|
|
@apply w-full lg:w-[64.8rem] lg:h-[53.2rem] bg-white rounded-t-[0.6rem] lg:rounded-[0.6rem] flex flex-col lg:pb-[4.9rem];
|
|
|
|
&>div:nth-of-type(1) {
|
|
@apply flex justify-between items-center gap-3 p-6 lg:p-8 pb-6 border lg:border-b-2 border-[#E5E5E5];
|
|
|
|
h2 {
|
|
@apply text-zinc-800 text-sm lg:text-xl font-bold font-vazir;
|
|
}
|
|
|
|
button {
|
|
@apply -m-3;
|
|
|
|
.p-button-icon {
|
|
@apply text-[1.4em] lg:text-3xl text-[#B2B2B2];
|
|
}
|
|
}
|
|
}
|
|
|
|
&>div:nth-of-type(2) {
|
|
@apply w-full flex flex-col p-6 pt-8 lg:p-10 lg:pb-0 gap-6;
|
|
|
|
&>div:nth-of-type(1) {
|
|
@apply w-full h-[3.4rem] bg-[#FAFAFA] rounded-[0.6rem] flex items-center pr-4;
|
|
|
|
i {
|
|
@apply text-lg;
|
|
}
|
|
|
|
input {
|
|
@apply h-full px-2 bg-transparent grow outline-none;
|
|
|
|
&::placeholder {
|
|
@apply text-neutral-400 text-xs lg:text-lg font-vazir;
|
|
}
|
|
}
|
|
}
|
|
|
|
&>div:nth-of-type(2) {
|
|
@apply w-full flex justify-between items-center;
|
|
|
|
span {
|
|
@apply text-[#7F7F7F] text-xs lg:text-base font-medium font-vazir;
|
|
}
|
|
|
|
}
|
|
|
|
&>div:nth-of-type(3) {
|
|
@apply overflow-y-auto h-[23.8rem] lg:h-[34.4rem] w-full;
|
|
|
|
&>ul {
|
|
@apply w-full grid lg:grid-cols-2 lg:gap-6 h-max;
|
|
|
|
li {
|
|
@apply cursor-pointer;
|
|
|
|
a {
|
|
@apply pointer-events-none;
|
|
}
|
|
|
|
.product-card {
|
|
@apply lg:w-[28.8rem] lg:h-[32.3rem];
|
|
}
|
|
|
|
@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-4;
|
|
|
|
.p-button-icon {
|
|
@apply text-xl;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style> |