mohadese namavar
69 lines
1.6 KiB
Vue
69 lines
1.6 KiB
Vue
<template>
|
|
<div class="product-comments">
|
|
<div>
|
|
<Button icon="isax isax-arrow-right-1" link @click="$emit('close')" />
|
|
<h2>{{ $t("commentsCount", { count: 5 }) }}</h2>
|
|
<Button icon="isax isax-document-filter" link @click="handleClick" />
|
|
</div>
|
|
<div>
|
|
<ul>
|
|
<li v-for="(item, i) in items" :key="i">
|
|
<ProductCommentItem :data="item" />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<Button :label="$t('submitComment')" icon="isax isax-message" rounded @click="handleClick" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const items = reactive([{}, {}, {}, {}, {}, {}, {}, {}, {}]);
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.product-comments {
|
|
@apply w-full bg-white rounded-t-[0.6rem] flex flex-col gap-10 relative px-6 pt-6 overflow-hidden;
|
|
|
|
&>div:nth-of-type(1) {
|
|
@apply w-full flex items-center gap-3;
|
|
|
|
&>h2 {
|
|
@apply text-[#333333] text-sm font-medium font-vazir ml-auto;
|
|
}
|
|
|
|
&>button {
|
|
@apply -mx-4 -my-3;
|
|
|
|
.p-button-icon {
|
|
@apply text-[#333333] text-[1.4em];
|
|
}
|
|
}
|
|
}
|
|
|
|
&>div:nth-of-type(2) {
|
|
@apply h-full overflow-y-auto;
|
|
|
|
&::-webkit-scrollbar {
|
|
@apply hidden;
|
|
}
|
|
|
|
&>ul {
|
|
@apply h-max flex flex-col gap-6;
|
|
}
|
|
}
|
|
|
|
&>button {
|
|
@apply absolute left-6 bottom-5 w-[8.3rem] h-12 px-[1.4rem] #{!important};
|
|
|
|
.p-button-label {
|
|
@apply text-xs font-vazir;
|
|
}
|
|
|
|
.p-button-icon {
|
|
@apply text-xl;
|
|
}
|
|
}
|
|
}
|
|
</style>
|