Updated
This commit is contained in:
marzban-dev
@@ -29,85 +29,83 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<NuxtLink
|
||||||
<NuxtLink
|
:to="`/article/${slug}`"
|
||||||
:to="`/article/${slug}`"
|
:class="variant === 'lg' ? 'aspect-square rounded-150 overflow-hidden' : 'h-fit'"
|
||||||
:class="variant === 'lg' ? 'aspect-square rounded-150 overflow-hidden' : 'h-fit'"
|
class="group w-full relative block"
|
||||||
class="group w-full relative block"
|
>
|
||||||
|
<Tag
|
||||||
|
v-if="variant === 'lg'"
|
||||||
|
class="bg-slate-950 absolute left-6 top-6 z-20"
|
||||||
>
|
>
|
||||||
<Tag
|
{{ category.name }}
|
||||||
v-if="variant === 'lg'"
|
</Tag>
|
||||||
class="bg-slate-950 absolute left-6 top-6 z-20"
|
|
||||||
>
|
<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 }}
|
{{ category.name }}
|
||||||
</Tag>
|
</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
|
<NuxtImg
|
||||||
v-if="variant === 'lg'"
|
|
||||||
:src="image"
|
:src="image"
|
||||||
class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
|
class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-if="variant === 'lg'"
|
:class="variant === 'lg' ? 'absolute px-6' : 'invert mt-6'"
|
||||||
class="w-full h-full bg-linear-to-t from-black to-transparent absolute inset-0 z-15"
|
class="bottom-6 lg:bottom-8 flex flex-col gap-4 z-20"
|
||||||
/>
|
>
|
||||||
</NuxtLink>
|
<div class="flex items-center gap-4 lg:gap-6">
|
||||||
</div>
|
<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>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user