new changes

This commit is contained in:
Mamalizz
2025-02-02 18:00:29 +03:30
parent c59ce6c75b
commit 60a04b35d5
+20 -23
View File
@@ -60,96 +60,96 @@ const handleSelectAddress = (address: Address) => {
</div> </div>
<div <div
class="flex flex-col items-center w-full gap-4 p-4 border border-gray-300 rounded-xl bg-gray-50" class="flex flex-col items-center w-full gap-4 p-4 border border-slate-200 rounded-xl bg-slate-50"
> >
<span <span
class="flex items-center justify-start w-full lg:text-[1.125rem] font-semibold text-gray-900" class="flex items-center justify-start w-full lg:text-[1.125rem] font-semibold text-slate-900"
> >
زمان و شیوه ارسال شیوه ارسال
</span> </span>
<label <label
@click="deliveryData.deliveryMethod.pishtaz = true" @click="deliveryData.deliveryMethod.pishtaz = true"
:class=" :class="
deliveryData.deliveryMethod.pishtaz deliveryData.deliveryMethod.pishtaz
? 'ring-cyan-500 ring-offset-2 ring-2' ? 'ring-black ring-offset-2 ring-2'
: '' : ''
" "
class="flex flex-col select-none w-full gap-2 p-3 transition-all border cursor-pointer delivery-option focus-within:ring-2 ring-cyan-500 ring-offset-2 focus-within:border-cyan-500 rounded-100 border-gray-300 bg-gray-50" class="flex flex-col select-none w-full gap-2 p-3 transition-all border cursor-pointer delivery-option focus-within:ring-2 ring-black ring-offset-2 focus-within:border-black rounded-100 border-slate-200 bg-slate-50"
> >
<div class="flex items-center justify-between w-full"> <div class="flex items-center justify-between w-full">
<div class="flex items-center gap-2.5"> <div class="flex items-center gap-2.5">
<SwitchRoot <SwitchRoot
v-model="deliveryData.deliveryMethod.pishtaz" v-model="deliveryData.deliveryMethod.pishtaz"
:defaultValue="false" :defaultValue="false"
class="w-[3rem] h-[1.8rem] shrink-0 flex data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-cyan-500 border border-slate-300 data-[state=checked]:border-cyan-800/20 rounded-full relative transition-all focus-within:outline-none" class="w-[3rem] h-[1.8rem] shrink-0 flex data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-black border border-slate-200 data-[state=checked]:border-black/20 rounded-full relative transition-all focus-within:outline-none"
> >
<SwitchThumb <SwitchThumb
class="size-6 my-auto bg-white text-sm ms-1 flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:-translate-x-[68%]" class="size-6 my-auto bg-white text-sm ms-1 flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:-translate-x-[68%]"
/> />
</SwitchRoot> </SwitchRoot>
<span <span
class="w-full text-gray-800 text-sm lg:text-[1rem]" class="w-full text-slate-800 text-sm lg:text-[1rem]"
>پست پیشتاز</span >پست پیشتاز</span
> >
</div> </div>
<span class="text-gray-800 text-sm lg:text-[1rem]"> <span class="text-slate-800 text-sm lg:text-[1rem]">
۱۵۰٬۰۰۰ تومان ۱۵۰٬۰۰۰ تومان
</span> </span>
</div> </div>
</label> </label>
<label <label
class="flex items-center opacity-50 select-none pointer-events-none justify-between w-full p-3 transition-all border cursor-pointer delivery-option focus-within:ring-2 ring-cyan-500 ring-offset-2 focus-within:border-cyan-500 rounded-100 border-gray-300 bg-gray-50" class="flex items-center opacity-50 select-none pointer-events-none justify-between w-full p-3 transition-all border cursor-pointer delivery-option focus-within:ring-2 ring-black ring-offset-2 focus-within:border-black rounded-100 border-slate-200 bg-slate-50"
> >
<div class="flex items-center gap-2.5"> <div class="flex items-center gap-2.5">
<SwitchRoot <SwitchRoot
v-model="deliveryData.deliveryMethod.tipax" v-model="deliveryData.deliveryMethod.tipax"
class="w-[3rem] h-[1.8rem] shrink-0 flex data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-cyan-500 border border-slate-300 data-[state=checked]:border-cyan-800/20 rounded-full relative transition-all focus-within:outline-none" class="w-[3rem] h-[1.8rem] shrink-0 flex data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-black border border-slate-200 data-[state=checked]:border-black/20 rounded-full relative transition-all focus-within:outline-none"
> >
<SwitchThumb <SwitchThumb
class="size-6 my-auto bg-white text-sm ms-1 flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:-translate-x-[68%]" class="size-6 my-auto bg-white text-sm ms-1 flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:-translate-x-[68%]"
/> />
</SwitchRoot> </SwitchRoot>
<span class="w-full text-gray-800 text-sm lg:text-[1rem]" <span class="w-full text-slate-800 text-sm lg:text-[1rem]"
>تیپاکس</span >تیپاکس</span
> >
</div> </div>
<span class="text-gray-800 text-sm lg:text-[1rem]"> <span class="text-slate-800 text-sm lg:text-[1rem]">
۱۵۰٬۰۰۰ تومان ۱۵۰٬۰۰۰ تومان
</span> </span>
</label> </label>
<label <label
class="flex items-center opacity-50 select-none pointer-events-none justify-between w-full p-3 transition-all border cursor-pointer delivery-option focus-within:ring-2 ring-cyan-500 ring-offset-2 focus-within:border-cyan-500 rounded-100 border-gray-300 bg-gray-50" class="flex items-center opacity-50 select-none pointer-events-none justify-between w-full p-3 transition-all border cursor-pointer delivery-option focus-within:ring-2 ring-black ring-offset-2 focus-within:border-black rounded-100 border-slate-200 bg-slate-50"
> >
<div class="flex items-center gap-2.5"> <div class="flex items-center gap-2.5">
<SwitchRoot <SwitchRoot
v-model="deliveryData.deliveryMethod.peyk" v-model="deliveryData.deliveryMethod.peyk"
class="w-[3rem] h-[1.8rem] shrink-0 flex data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-cyan-500 border border-slate-300 data-[state=checked]:border-cyan-800/20 rounded-full relative transition-all focus-within:outline-none" class="w-[3rem] h-[1.8rem] shrink-0 flex data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-black border border-slate-200 data-[state=checked]:border-black/20 rounded-full relative transition-all focus-within:outline-none"
> >
<SwitchThumb <SwitchThumb
class="size-6 my-auto bg-white text-sm ms-1 flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:-translate-x-[68%]" class="size-6 my-auto bg-white text-sm ms-1 flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:-translate-x-[68%]"
/> />
</SwitchRoot> </SwitchRoot>
<span class="w-full text-gray-800 text-sm lg:text-[1rem]" <span class="w-full text-slate-800 text-sm lg:text-[1rem]"
>ارسال با پیک (فقط ارسال درون شهری شیراز)</span >ارسال با پیک (فقط ارسال درون شهری شیراز)</span
> >
</div> </div>
<span class="text-gray-800 text-sm lg:text-[1rem]"> <span class="text-slate-800 text-sm lg:text-[1rem]">
۱۵۰٬۰۰۰ تومان ۱۵۰٬۰۰۰ تومان
</span> </span>
</label> </label>
</div> </div>
<div <div
class="flex flex-col items-center w-full gap-4 p-4 border lg:gap-6 border-gray-300 rounded-xl bg-gray-50" class="flex flex-col items-center w-full gap-4 p-4 border lg:gap-6 border-slate-200 rounded-xl bg-slate-50"
> >
<span <span
class="flex items-center justify-start w-full lg:text-[1.125rem] font-semibold text-gray-900" class="flex items-center justify-start w-full lg:text-[1.125rem] font-semibold text-slate-900"
> >
خلاصه سفارش خلاصه سفارش
</span> </span>
@@ -161,13 +161,10 @@ const handleSelectAddress = (address: Address) => {
<div class="h-7 flex-center col-span-full lg:hidden"> <div class="h-7 flex-center col-span-full lg:hidden">
<button class="gap-2 flex-center"> <button class="gap-2 flex-center">
<span class="text-sm font-bold text-cyan-500"> <span class="text-sm font-bold text-black">
مشاهده بیشتر مشاهده بیشتر
</span> </span>
<Icon <Icon name="bi:chevron-down" class="**:stroke-black" />
name="bi:chevron-down"
class="**:stroke-cyan-500"
/>
</button> </button>
</div> </div>
</div> </div>