heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated

Browse Source
This commit is contained in:
marzban-dev
2025-02-02 21:19:16 +03:30
parent a1248828de
commit 65ea8b3808
1 changed files with 79 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/BlogPost.vue
+79 -81
View File
@@ -3,12 +3,11 @@
// types
type Props = {
id: number;
tag: string;
date: string;
comments: number;
title: string;
description: string;
link: string;
variant?: "sm" | "lg";
image: string,
}
@@ -23,96 +22,95 @@ const {} = toRefs(props);
</script>
<template>
<div
:class="variant === 'lg' ? 'rounded-150 overflow-hidden' : ''"
class="group max-h-[700px] h-[700px] relative"
>
<Tag
v-if="variant === 'lg'"
class="bg-success-500 absolute left-10 top-10 z-20"
>
اسپیکر
</Tag>
<NuxtLink :to="`/article/${id}`">
<div
v-if="variant === 'sm'"
class="h-[350px] rounded-150 overflow-hidden relative"
:class="variant === 'lg' ? 'h-[600px] rounded-150 overflow-hidden' : 'h-fit'"
class="group w-full relative"
>
<Tag
class="bg-success-500 absolute z-20 left-6 top-6"
v-if="variant === 'lg'"
class="bg-success-500 absolute left-10 top-10 z-20"
>
اسپیکر
</Tag>
<div
v-if="variant === 'sm'"
class="h-[350px] rounded-150 overflow-hidden relative"
>
<Tag
class="bg-success-500 absolute z-20 left-6 top-6"
>
اسپیکر
</Tag>
<img
:src="image"
class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
alt=""
/>
</div>
<div
:class="variant === 'lg' ? 'absolute px-10' : 'invert mt-8'"
class="bottom-10 flex flex-col gap-6 z-20"
>
<div class="flex items-center gap-6">
<div class="flex items-center gap-2">
<Icon
name="ci:comment"
size="18"
class="**:stroke-white"
/>
<span class="typo-p-sm text-white">
۰ نظر
</span>
</div>
<div class="flex items-center gap-2">
<Icon
name="ci:calendar"
size="18"
class="**:stroke-white"
/>
<span class="typo-p-sm text-white">
۳۱ مهر ۱۴۰۳
</span>
</div>
</div>
<div class="flex gap-4 flex-col">
<span
:class="variant === 'lg' ? 'typo-h-5' : 'typo-h-6'"
class="text-white"
>
{{ title }}
</span>
<p
:class="variant === 'lg' ? 'typo-h-4' : 'typo-h-6 text-slate-500'"
class="typo-p-md text-white text-justify"
v-html="description"
/>
</div>
<NuxtLink :to="`/article/${id}`" class="underline text-white typo-p-md">
بیشتر بخوانید...
</NuxtLink>
</div>
<img
v-if="variant === 'lg'"
:src="image"
class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
alt=""
/>
<div
v-if="variant === 'lg'"
class="w-full h-full bg-linear-to-t from-black to-transparent absolute inset-0 z-15"
/>
</div>
<div
:class="variant === 'lg' ? 'absolute px-10' : 'invert mt-8'"
class="bottom-10 flex flex-col gap-6 z-20"
>
<div class="flex items-center gap-6">
<div class="flex items-center gap-2">
<Icon
name="ci:comment"
size="18"
class="**:stroke-white"
/>
<span class="typo-p-sm text-white">
۰ نظر
</span>
</div>
<div class="flex items-center gap-2">
<Icon
name="ci:calendar"
size="18"
class="**:stroke-white"
/>
<span class="typo-p-sm text-white">
۳۱ مهر ۱۴۰۳
</span>
</div>
</div>
<div class="flex gap-4 flex-col">
<span
:class="variant === 'lg' ? 'typo-h-4' : 'typo-h-6'"
class="text-white"
>
برسی آیفون ۱۶ پرومکس
</span>
<p
:class="variant === 'lg' ? 'typo-h-4' : 'typo-h-6 text-slate-500'"
class="typo-p-md text-white text-justify"
>
نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
کتابهای زیادی در شصت و سه درصد گذشته.
</p>
</div>
<span class="underline text-white typo-p-md">
بیشتر بخوانید...
</span>
</div>
<img
v-if="variant === 'lg'"
:src="image"
class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
alt=""
/>
<div
v-if="variant === 'lg'"
class="w-full h-full bg-linear-to-t from-black to-transparent absolute inset-0 z-15"
/>
</div>
</NuxtLink>
</template>