mohadese namavar
57 lines
1.6 KiB
Vue
57 lines
1.6 KiB
Vue
<template>
|
|
<section class="compare-product-list">
|
|
<ul>
|
|
<template v-for="(product, i) in items" :key="i">
|
|
<li v-if="i > 0">
|
|
<span></span>
|
|
</li>
|
|
<li>
|
|
<CompareProductCard :data="product" />
|
|
</li>
|
|
</template>
|
|
<li v-if="ids.length < (device == 'mobile' ? 2 : 3)">
|
|
<Button :label="$t('selectProduct')" outlined @click="handleCLick" />
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { data: items } = inject('data')
|
|
const { device, dialog } = inject('service')
|
|
const route = useRoute()
|
|
const ids = route.params.ids.split('-')
|
|
|
|
const handleCLick = () => {
|
|
dialog.show(resolveComponent('CompareDialogSelection'))
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.compare-product-list {
|
|
@apply w-full max-w-[112.3rem] mx-auto pt-[3.3rem] lg:pt-[4.4rem];
|
|
|
|
ul {
|
|
@apply flex gap-3 lg:border-b justify-center lg:justify-start;
|
|
|
|
li {
|
|
&:last-child:has(.p-button-outlined) {
|
|
@apply flex justify-center items-center w-[10.7rem] h-[16.6rem] lg:w-[28.1rem] lg:h-[25.6rem];
|
|
|
|
button {
|
|
@apply w-[6.2rem] h-[2.6rem] lg:w-[8.1rem] lg:h-[3.3rem];
|
|
|
|
span {
|
|
@apply text-xs font-bold font-vazir lg:text-base lg:font-iran-sans
|
|
}
|
|
}
|
|
}
|
|
|
|
&:has(>span) {
|
|
@apply self-stretch w-px bg-neutral-200;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |