marzban-dev
104 lines
3.9 KiB
Vue
104 lines
3.9 KiB
Vue
<script lang="ts" setup>
|
|
|
|
// import
|
|
|
|
import useGetArticle from "~/composables/api/blog/useGetArticle";
|
|
|
|
// state
|
|
|
|
const route = useRoute();
|
|
|
|
const id = route.params.id as string | undefined;
|
|
|
|
const { data: article, suspense } = useGetArticle(id);
|
|
|
|
// ssr
|
|
|
|
const response = await suspense();
|
|
|
|
if (response.isError) {
|
|
throw createError({
|
|
statusCode: 500,
|
|
statusMessage: `Error in categories page prefetch`
|
|
});
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<div class="w-full h-[80svh] rounded-3xl relative overflow-hidden">
|
|
<img class="absolute object-cover size-full" :alt="article!.title" :src="article!.cover_image" />
|
|
<div class="absolute bg-linear-to-t from-black/75 to-transparent size-full" />
|
|
<div class="absolute pl-10 right-10 bottom-10 flex flex-col gap-6">
|
|
<h1 class="typo-h-4 text-white pl-8">
|
|
{{ article!.title }}
|
|
</h1>
|
|
|
|
<div
|
|
class="typo-p-lg text-slate-200 mb-6 text-justify w-[70%]"
|
|
v-html="article!.summery"
|
|
/>
|
|
|
|
<div class="flex items-center justify-between">
|
|
|
|
|
|
<div class="flex items-center gap-4">
|
|
<div
|
|
class="w-fit pr-2 pl-5 h-[50px] rounded-full flex items-center justify-center gap-3 bg-white">
|
|
<div
|
|
class="relative flex items-center justify-center rounded-full overflow-hidden size-[35px]">
|
|
<img
|
|
class="size-full object-cover absolute"
|
|
:src="article!.author.profile_photo"
|
|
alt="article-author"
|
|
/>
|
|
</div>
|
|
<span class="typo-label-sm">
|
|
{{ article!.author.full_name }}
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white">
|
|
<span class="typo-label-sm mt-0.5">
|
|
دسته بندی موبایل
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center gap-4">
|
|
<div
|
|
class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white">
|
|
<Icon name="ci:calendar" size="24px" class="**:stroke-white" />
|
|
<span class="typo-label-sm mt-0.5">
|
|
۲۴ مهر 1403
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white">
|
|
<Icon name="ci:eye-open" size="24px" class="**:stroke-white" />
|
|
<span class="typo-label-sm mt-0.5">
|
|
{{ article!.views }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-4 mt-8">
|
|
|
|
<div
|
|
class="p-8 flex-1 text-zinc-800 flex flex-col gap-6 [&_p,ul]:text-zinc-500 [&_h1]:typo-h-4 [&_h2]:typo-h-5 [&_h3]:typo-h-6 [&_p]:typo-p-md [&_ul]:list-disc [&_ul]:typo-p-md [&_ul]:space-y-2"
|
|
v-html="article!.content"
|
|
/>
|
|
|
|
<aside class="mt-8 p-8 h-fit bg-slate-100 w-[400px] sticky top-4 rounded-3xl">
|
|
asdsa
|
|
</aside>
|
|
</div>
|
|
|
|
</div>
|
|
</template> |