mohadese namavar
52 lines
1.3 KiB
Vue
52 lines
1.3 KiB
Vue
<template>
|
|
<div class="notification-item" :class="{ 'unread': !read }">
|
|
<h2>{{ title }} </h2>
|
|
<div>
|
|
<span>{{ new Date(createdAt).toLocaleTimeString('fa-IR') }}</span>
|
|
<i />
|
|
<span>{{ new Date(createdAt).toLocaleDateString('fa-IR') }}</span>
|
|
</div>
|
|
<p v-html="content"></p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps(['data'])
|
|
const { title, content, createdAt, read } = props.data
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.notification-item {
|
|
@apply w-full h-[5.8rem] lg:h-[6.4rem] font-vazir rounded-[0.6rem] bg-[#FAFAFA];
|
|
@apply flex flex-wrap items-center justify-between gap-y-2 p-6 lg:gap-2.5;
|
|
|
|
h2 {
|
|
@apply text-[#333333] text-xs lg:text-base lg:font-bold lg:w-full truncate;
|
|
}
|
|
|
|
p {
|
|
@apply text-neutral-600 text-xs lg:text-base leading-loose truncate w-full lg:w-max;
|
|
}
|
|
|
|
div {
|
|
@apply flex items-center gap-1.5 lg:gap-3 lg:order-last;
|
|
|
|
span {
|
|
@apply text-zinc-500 text-[0.6em] lg:text-base font-medium whitespace-nowrap;
|
|
}
|
|
|
|
i {
|
|
@apply w-2 h-2 bg-neutral-200 rounded-full;
|
|
}
|
|
}
|
|
|
|
&.unread {
|
|
@apply shadow-[0px_0px_7px_#0000001a] bg-white;
|
|
|
|
h2 {
|
|
@apply font-bold;
|
|
}
|
|
}
|
|
}
|
|
</style>
|