added mobile style
This commit is contained in:
@@ -165,12 +165,14 @@ const handleSubmit = (withValidation: boolean) => {
|
|||||||
|
|
||||||
<div class="flex flex-col gap-6">
|
<div class="flex flex-col gap-6">
|
||||||
<div
|
<div
|
||||||
class="w-full flex items-center justify-between border p-6 rounded-xl border-slate-200"
|
class="w-full flex flex-col lg:flex-row items-center max-lg:gap-5 lg:justify-between border p-6 rounded-xl border-slate-200"
|
||||||
>
|
>
|
||||||
<div class="flex items-center justify-start gap-5 w-8/12">
|
<div
|
||||||
|
class="flex items-center justify-start gap-5 w-full lg:w-8/12"
|
||||||
|
>
|
||||||
<div class="relative shrink-0 rounded-full flex-center">
|
<div class="relative shrink-0 rounded-full flex-center">
|
||||||
<Avatar
|
<Avatar
|
||||||
class="!size-32"
|
class="!size-20 lg:!size-32"
|
||||||
:src="account!.profile_photo"
|
:src="account!.profile_photo"
|
||||||
:alt="
|
:alt="
|
||||||
account?.first_name && account?.last_name
|
account?.first_name && account?.last_name
|
||||||
@@ -188,41 +190,47 @@ const handleSubmit = (withValidation: boolean) => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col gap-3">
|
<div class="flex flex-col gap-2 lg:gap-3">
|
||||||
<span class="typo-sub-h-lg"
|
<span class="typo-sub-h-md lg:typo-sub-h-lg"
|
||||||
>{{ account?.first_name }}
|
>{{ account?.first_name }}
|
||||||
{{ account?.last_name }}</span
|
{{ account?.last_name }}</span
|
||||||
>
|
>
|
||||||
<span class="typo-sub-h-sm font-light text-slate-600">
|
<span
|
||||||
|
class="typo-sub-h-xs lg:typo-sub-h-sm font-light text-slate-600 leading-[200%]"
|
||||||
|
>
|
||||||
با اولین خریدتون هوش مصنوعی وبسایتمون واستون یک
|
با اولین خریدتون هوش مصنوعی وبسایتمون واستون یک
|
||||||
بایوگرافی درست میکنه :)
|
بایوگرافی درست میکنه :)
|
||||||
</span>
|
</span>
|
||||||
<div
|
<div
|
||||||
class="flex-center border border-yellow-500 pe-3.5 ps-1 w-max rounded-full"
|
class="flex-center border border-yellow-500 pe-3.5 ps-1 w-max rounded-full"
|
||||||
>
|
>
|
||||||
<div class="rounded-full p-2">
|
<div class="rounded-full p-1.5 lg:p-2">
|
||||||
<Icon
|
<Icon
|
||||||
name="bi:patch-check"
|
name="bi:patch-check"
|
||||||
class="**:fill-yellow-400"
|
class="**:fill-yellow-400"
|
||||||
size="20"
|
size="20"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<span class="text-xs text-yellow-500"
|
<span class="text-[10px] lg:text-xs text-yellow-500"
|
||||||
>جزو ۳ مشتری برتر</span
|
>جزو ۳ مشتری برتر</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col items-start gap-3 w-4/12">
|
<div class="flex flex-col items-start gap-3 w-full lg:w-4/12">
|
||||||
<span class="typo-sub-h-lg">لقب های شما</span>
|
<span class="typo-sub-h-md lg:typo-sub-h-lg"
|
||||||
|
>لقب های شما</span
|
||||||
|
>
|
||||||
<span class="flex w-full flex-wrap gap-2">
|
<span class="flex w-full flex-wrap gap-2">
|
||||||
<span
|
<span
|
||||||
v-for="(alise, index) in alises"
|
v-for="(alise, index) in alises"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="flex-center bg-slate-50 border border-slate-200 py-2 px-3 w-max rounded-full"
|
class="flex-center bg-slate-50 border border-slate-200 py-1.5 lg:py-2 px-3 w-max rounded-full"
|
||||||
>
|
>
|
||||||
<span class="text-xs text-black">{{ alise }}</span>
|
<span class="text-[10px] lg:text-xs text-black">{{
|
||||||
|
alise
|
||||||
|
}}</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user