mohadese namavar
67 lines
1.7 KiB
Vue
67 lines
1.7 KiB
Vue
<template>
|
|
<div class="product-comment-item">
|
|
<div>
|
|
<span>{{ point }}</span>
|
|
<span>{{ role || $t('buyer') }}</span>
|
|
<span>
|
|
{{
|
|
new Date(createdAt).toLocaleDateString('fa', {
|
|
month: 'long', year: 'numeric', day: 'numeric'
|
|
})
|
|
}}
|
|
</span>
|
|
<span>{{ userID?.firstName }} {{ userID?.lastName }}</span>
|
|
</div>
|
|
<p>{{ content }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps(['data'])
|
|
const { point, role, createdAt, userID, content } = props.data
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.product-comment-item {
|
|
@apply w-full max-w-[47.9rem] xl:h-[8.3rem] flex flex-col border-b border-[#E5E5E5];
|
|
@apply pb-4 lg:pb-8;
|
|
@apply gap-4 lg:gap-6;
|
|
|
|
div {
|
|
@apply flex gap-4 items-center;
|
|
|
|
span:nth-child(-n + 2) {
|
|
@apply flex items-center justify-center pt-0.5 rounded font-iran-sans;
|
|
@apply text-sm md:text-base xl:text-[1.1em];
|
|
@apply h-7 lg:h-[2.2rem];
|
|
@apply px-3 lg:px-4;
|
|
}
|
|
|
|
span:nth-child(1) {
|
|
@apply bg-[#019907] text-white;
|
|
}
|
|
|
|
span:nth-child(2) {
|
|
@apply bg-[#F2F2F2] text-[#999999] -mr-2;
|
|
}
|
|
|
|
span:nth-child(n + 3) {
|
|
@apply text-[#B2B2B2] font-vazir;
|
|
@apply text-[0.7em] lg:text-lg;
|
|
}
|
|
|
|
span:nth-child(4) {
|
|
@apply relative flex items-center gap-1.5 lg:gap-4;
|
|
|
|
&::before {
|
|
@apply content-['_'] w-1.5 h-1.5 bg-neutral-200 rounded-full;
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
@apply w-full text-[#7F7F7F] font-vazir text-lg leading-[2.3rem];
|
|
}
|
|
}
|
|
</style>
|