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
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
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>
<label
@click="deliveryData.deliveryMethod.pishtaz = true"
:class="
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 gap-2.5">
<SwitchRoot
v-model="deliveryData.deliveryMethod.pishtaz"
: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
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>
<span
class="w-full text-gray-800 text-sm lg:text-[1rem]"
class="w-full text-slate-800 text-sm lg:text-[1rem]"
>پست پیشتاز</span
>
</div>
<span class="text-gray-800 text-sm lg:text-[1rem]">
<span class="text-slate-800 text-sm lg:text-[1rem]">
۱۵۰٬۰۰۰ تومان
</span>
</div>
</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">
<SwitchRoot
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
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>
<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
>
</div>
<span class="text-gray-800 text-sm lg:text-[1rem]">
<span class="text-slate-800 text-sm lg:text-[1rem]">
۱۵۰٬۰۰۰ تومان
</span>
</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">
<SwitchRoot
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
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>
<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
>
</div>
<span class="text-gray-800 text-sm lg:text-[1rem]">
<span class="text-slate-800 text-sm lg:text-[1rem]">
۱۵۰٬۰۰۰ تومان
</span>
</label>
</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
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>
@@ -161,13 +161,10 @@ const handleSelectAddress = (address: Address) => {
<div class="h-7 flex-center col-span-full lg:hidden">
<button class="gap-2 flex-center">
<span class="text-sm font-bold text-cyan-500">
<span class="text-sm font-bold text-black">
مشاهده بیشتر
</span>
<Icon
name="bi:chevron-down"
class="**:stroke-cyan-500"
/>
<Icon name="bi:chevron-down" class="**:stroke-black" />
</button>
</div>
</div>