mohadese namavar
58 lines
1.5 KiB
Vue
58 lines
1.5 KiB
Vue
<template>
|
|
<div class="header-cart-list-item">
|
|
<span>{{ quantity }}x</span>
|
|
<img :src="data.coverPath" />
|
|
<div>
|
|
<h3>{{ data.category[data.category.length - 1]?.name }}</h3>
|
|
<h2>{{ data.title }}</h2>
|
|
<span>
|
|
<b>{{ numberFormat(data.specialPrice || data.price) }} </b>
|
|
{{ $t('priceUnit') }}
|
|
</span>
|
|
</div>
|
|
<Button icon="isax isax-trash" severity="secondary" text @click="$emit('remove', data.id)" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps(['data', 'quantity'])
|
|
|
|
const numberFormat = (number) =>
|
|
new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.header-cart-list-item {
|
|
box-shadow: 0px 2px 12px #004b8226;
|
|
@apply flex p-2 pl-6 w-[26.9rem] h-[10.1rem] bg-white rounded-lg shadow border relative;
|
|
|
|
&>span {
|
|
@apply absolute left-5 top-4 text-xs font-poppins;
|
|
}
|
|
|
|
img {
|
|
@apply w-[9.2rem] h-[9.2rem] p-2;
|
|
}
|
|
|
|
div {
|
|
@apply w-max gap-1 flex flex-col py-4 font-vazir mr-6;
|
|
|
|
h3 {
|
|
@apply text-right text-neutral-400 text-[0.9em] font-medium;
|
|
}
|
|
|
|
h2 {
|
|
@apply w-[13.1rem] h-14 text-right text-zinc-800 text-[1.1em] font-bold line-clamp-2;
|
|
}
|
|
|
|
span {
|
|
@apply text-zinc-800 text-[0.9em] mt-auto;
|
|
}
|
|
}
|
|
|
|
button {
|
|
@apply w-10 h-10 mb-2 -mx-2 shrink-0 self-end text-2xl text-[#7F7F7F] rounded-full #{!important};
|
|
}
|
|
}
|
|
</style>
|