mohadese namavar
64 lines
1.7 KiB
Vue
64 lines
1.7 KiB
Vue
<template>
|
|
<article>
|
|
<router-link :to="'/blog?category=' + category.link">
|
|
{{ category.name }}
|
|
</router-link>
|
|
<h1>{{ title }}</h1>
|
|
<span>{{ $t('author') }}: {{ userID.firstName }} {{ userID.lastName }}</span>
|
|
<div>
|
|
<i class="isax isax-calendar-1"></i>
|
|
<span>{{ new Date(createdAt).toLocaleString('fa') }}</span>
|
|
</div>
|
|
<img :src="coverImage" :alt="title" />
|
|
<div v-html="content" />
|
|
</article>
|
|
</template>
|
|
|
|
<script setup>
|
|
const data = inject('data')
|
|
const { category, userID, createdAt, coverImage, title, content } = data.post
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.blog-post>section>article {
|
|
@apply w-full max-lg:container max-w-[64.6rem] flex flex-col max-lg:px-6;
|
|
|
|
&>a {
|
|
@apply text-primary-600 font-vazir w-max hover:underline;
|
|
@apply text-xs lg:text-2xl lg:leading-[2.7rem] mt-3 lg:mt-0;
|
|
}
|
|
|
|
&>h1 {
|
|
@apply text-[#404040] font-bold font-vazir;
|
|
@apply text-base lg:text-3xl mt-2 lg:mt-6;
|
|
}
|
|
|
|
&>span {
|
|
@apply text-[#BFBFBF] font-normal font-vazir;
|
|
@apply text-sm lg:text-xl lg:leading-9 mt-[1.1rem] lg:mt-8;
|
|
}
|
|
|
|
&>div:first-of-type {
|
|
@apply flex items-center gap-1.5 lg:gap-2 text-[#BFBFBF] mt-2;
|
|
|
|
&>span {
|
|
@apply font-normal font-vazir;
|
|
@apply text-sm lg:text-xl;
|
|
}
|
|
|
|
i {
|
|
@apply text-[1.4em] lg:text-2xl;
|
|
}
|
|
}
|
|
|
|
&>img {
|
|
@apply w-full bg-zinc-300 order-first lg:order-none lg:mt-6;
|
|
}
|
|
|
|
&>div:last-of-type {
|
|
@apply text-[#595959] font-vazir mt-9 lg:mt-12 text-justify;
|
|
@apply text-sm leading-6 lg:text-xl lg:leading-9;
|
|
}
|
|
}
|
|
</style>
|