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-05-23 08:42:58 +03:30
parent 284a0e3788
commit 6fc96e2da8
1 changed files with 69 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/BlogPost.vue
+69 -71
View File
@@ -29,85 +29,83 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
</script>
<template>
<div>
<NuxtLink
:to="`/article/${slug}`"
:class="variant === 'lg' ? 'aspect-square rounded-150 overflow-hidden' : 'h-fit'"
class="group w-full relative block"
<NuxtLink
:to="`/article/${slug}`"
:class="variant === 'lg' ? 'aspect-square rounded-150 overflow-hidden' : 'h-fit'"
class="group w-full relative block"
>
<Tag
v-if="variant === 'lg'"
class="bg-slate-950 absolute left-6 top-6 z-20"
>
<Tag
v-if="variant === 'lg'"
class="bg-slate-950 absolute left-6 top-6 z-20"
>
{{ category.name }}
</Tag>
<div
v-if="variant === 'sm'"
class="aspect-square w-full rounded-150 overflow-hidden relative"
>
<Tag class="bg-slate-950 absolute z-20 left-4 sm:left-6 top-4 sm:top-6 max-sm:text-xs">
{{ category.name }}
</Tag>
<div
v-if="variant === 'sm'"
class="aspect-square w-full rounded-150 overflow-hidden relative"
>
<Tag class="bg-slate-950 absolute z-20 left-4 sm:left-6 top-4 sm:top-6 max-sm:text-xs">
{{ category.name }}
</Tag>
<NuxtImg
: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-6' : 'invert mt-6'"
class="bottom-6 lg:bottom-8 flex flex-col gap-4 z-20"
>
<div class="flex items-center gap-4 lg:gap-6">
<div class="flex items-center gap-2">
<Icon
name="ci:comment"
class="**:stroke-white size-3 md:size-3.5"
/>
<span class="typo-p-xs md:typo-p-sm text-white"> ۰ نظر </span>
</div>
<div class="flex items-center gap-2">
<Icon
name="ci:calendar"
class="**:stroke-white size-3 md:size-3.5"
/>
<span class="typo-p-xs md:typo-p-sm text-white">
{{ createdAt }}
</span>
</div>
</div>
<div class="flex gap-4 flex-col">
<span
:class="variant === 'lg' ? 'line-clamp-2' : ''"
class="text-base md:text-lg font-medium lg:typo-h-6 text-white"
>
{{ title }}
</span>
<p
v-if="variant === 'sm'"
class="text-white typo-p-xs max-sm:!leading-[175%] sm:typo-p-sm md:typo-p-md line-clamp-3"
>
تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو
در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها
</p>
</div>
</div>
<NuxtImg
v-if="variant === 'lg'"
:src="image"
class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
alt=""
/>
</div>
<div
v-if="variant === 'lg'"
class="w-full h-full bg-linear-to-t from-black to-transparent absolute inset-0 z-15"
/>
</NuxtLink>
</div>
<div
:class="variant === 'lg' ? 'absolute px-6' : 'invert mt-6'"
class="bottom-6 lg:bottom-8 flex flex-col gap-4 z-20"
>
<div class="flex items-center gap-4 lg:gap-6">
<div class="flex items-center gap-2">
<Icon
name="ci:comment"
class="**:stroke-white size-3 md:size-3.5"
/>
<span class="typo-p-xs md:typo-p-sm text-white"> ۰ نظر </span>
</div>
<div class="flex items-center gap-2">
<Icon
name="ci:calendar"
class="**:stroke-white size-3 md:size-3.5"
/>
<span class="typo-p-xs md:typo-p-sm text-white">
{{ createdAt }}
</span>
</div>
</div>
<div class="flex gap-4 flex-col">
<span
:class="variant === 'lg' ? 'line-clamp-2' : ''"
class="text-base md:text-lg font-medium lg:typo-h-6 text-white"
>
{{ title }}
</span>
<p
v-if="variant === 'sm'"
class="text-white typo-p-xs max-sm:!leading-[175%] sm:typo-p-sm md:typo-p-md line-clamp-3"
>
تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در
زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها
</p>
</div>
</div>
<NuxtImg
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"
/>
</NuxtLink>
</template>