mohadese namavar
94 lines
2.4 KiB
Vue
94 lines
2.4 KiB
Vue
<template>
|
|
<div class="comment-item">
|
|
<img :src="product.coverImage" />
|
|
<div>
|
|
<div>
|
|
<div>
|
|
<h2>{{ title }}</h2>
|
|
<span>{{ (new Date(createdAt)).toLocaleDateString('fa-IR') }}</span>
|
|
</div>
|
|
<span>{{ statuses[confirm] }}</span>
|
|
<Button v-bind="btns.options.props" @click="showOptions" />
|
|
</div>
|
|
<p>{{ content }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps(['data'])
|
|
|
|
const { id, product, title, content, createdAt, confirm } = props.data
|
|
|
|
const { statuses, btns, options } = inject('init')
|
|
|
|
const { device, dialog, menu } = inject('service')
|
|
|
|
const showOptions = (e) => {
|
|
if (device.value == 'desktop') {
|
|
menu.items = options.comment;
|
|
menu.ref.toggle(e)
|
|
} else if (device.value == 'mobile')
|
|
dialog.show(resolveComponent(''), { id })
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.comment-item {
|
|
@apply w-[21.4rem] flex gap-[1.1rem] lg:gap-[1.9rem] lg:w-full lg:h-20;
|
|
|
|
img {
|
|
@apply w-[3.8rem] h-[3.8rem] lg:w-[5rem] lg:h-[5rem];
|
|
}
|
|
|
|
&>div {
|
|
@apply flex flex-col gap-3 lg:w-full;
|
|
|
|
&>div {
|
|
@apply h-20 flex justify-between items-center pb-3 border-b border-[#F0F0F1] gap-[1.9rem];
|
|
|
|
&>div {
|
|
@apply flex flex-col gap-1.5 font-vazir;
|
|
|
|
h3 {
|
|
@apply flex items-center gap-2 text-[#019907] lg:hidden;
|
|
|
|
i {
|
|
@apply text-base;
|
|
}
|
|
|
|
small {
|
|
@apply text-[0.6em];
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
@apply text-[#333333] text-sm lg:text-base font-bold;
|
|
}
|
|
|
|
span {
|
|
@apply text-neutral-400 text-[0.7em] lg:text-sm font-medium;
|
|
}
|
|
}
|
|
|
|
&>span {
|
|
@apply text-[#019907] text-xs lg:text-base font-vazir mr-auto;
|
|
}
|
|
|
|
&>button {
|
|
@apply h-8 w-8 -ml-3 #{!important};
|
|
|
|
.p-button-icon {
|
|
@apply text-[#333333] text-lg;
|
|
}
|
|
}
|
|
}
|
|
|
|
&>p {
|
|
@apply w-[16.5rem] text-[#4C4C4C] text-xs leading-5 font-vazir lg:w-full;
|
|
}
|
|
}
|
|
}
|
|
</style>
|