added mobile style

This commit is contained in:
Mamalizz
2025-04-08 23:29:41 +03:30
parent 8e609eed78
commit f9da506668
+20 -12
View File
@@ -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>