marzban-dev
117 lines
3.3 KiB
Vue
117 lines
3.3 KiB
Vue
<script setup lang="ts">
|
||
|
||
// types
|
||
|
||
type Props = {
|
||
tag: string;
|
||
date: string;
|
||
comments: number;
|
||
title: string;
|
||
description: string;
|
||
link: string;
|
||
variant?: "sm" | "lg";
|
||
}
|
||
|
||
// props
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
variant: "lg"
|
||
});
|
||
const {} = toRefs(props);
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<div
|
||
:class="variant === 'lg' ? 'rounded-150 overflow-hidden' : ''"
|
||
class="max-h-[700px] h-[700px] relative"
|
||
>
|
||
|
||
<Tag
|
||
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="/img/hero-bg.jpg"
|
||
class="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-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="/img/hero-bg.jpg"
|
||
class="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>
|
||
</template> |