mohadese namavar
65 lines
1.9 KiB
Vue
65 lines
1.9 KiB
Vue
<template>
|
|
<div class="compare-product">
|
|
<template v-if="ids.length > 1">
|
|
<Button icon="isax isax-close-circle5" severity="secondary" text rounded @click="remove" />
|
|
</template>
|
|
<img :src="coverImage" :alt="title">
|
|
<h2>{{ title }}</h2>
|
|
<span>{{ numberFormat(price) }} <small>{{ $t('priceUnit') }}</small></span>
|
|
<Button :label="$t('addToCart')" @click="handleClick" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps(['data'])
|
|
const { coverImage, title, price, _id: id } = props.data
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const ids = route.params.ids.split('-')
|
|
const remove = () => {
|
|
const temp = ids.filter((item) => item != id)
|
|
router.push('/compare/' + temp.join('-'))
|
|
}
|
|
|
|
const handleClick = () => { }
|
|
|
|
const numberFormat = (number) =>
|
|
new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.compare-product {
|
|
@apply relative flex flex-col items-center gap-4 w-[10.7rem] h-[16.6rem] lg:w-[28.1rem] lg:h-[25.6rem] pb-[1.7rem];
|
|
|
|
&>button.p-button-icon-only {
|
|
@apply absolute left-0 -top-4 p-0 text-[1.4em] lg:text-[1.6em] #{!important};
|
|
}
|
|
|
|
img {
|
|
@apply w-20 h-20 lg:w-[12.5rem] lg:h-[12.5rem];
|
|
}
|
|
|
|
&>h2 {
|
|
@apply w-[8.4rem] lg:w-[18.8rem] text-center text-zinc-800 text-sm lg:text-lg font-medium font-vazir mt-2.5 mb-0.5;
|
|
@apply truncate;
|
|
}
|
|
|
|
|
|
&>span {
|
|
@apply text-zinc-800 text-sm lg:text-lg font-medium font-vazir;
|
|
|
|
small {
|
|
@apply text-zinc-800 text-[0.7em] lg:text-[0.8em] font-medium font-vazir;
|
|
}
|
|
}
|
|
|
|
&>button:last-child {
|
|
@apply w-[6.4rem] h-[2.1rem] p-0 lg:w-[9.8rem] lg:h-12 shrink-0;
|
|
|
|
.p-button-label {
|
|
@apply text-white text-xs lg:text-base font-bold font-iran-sans;
|
|
}
|
|
}
|
|
}
|
|
</style> |