update front

This commit is contained in:
Parsa Nazer
2026-05-14 16:25:09 +03:30
7 changed files with 49 additions and 56 deletions
@@ -324,8 +324,8 @@ watch(
:to="{ name: nextPage?.name, query: { gw: nextPage?.query } }" :to="{ name: nextPage?.name, query: { gw: nextPage?.query } }"
> >
<Button <Button
start-icon="arrow-right" start-icon="ci:arrow-right"
class="w-full rounded-100" class="w-full rounded-100 py-2 lg:typo-p-sm"
variant="primary" variant="primary"
> >
{{ nextPage?.label }} {{ nextPage?.label }}
+13 -13
View File
@@ -59,7 +59,7 @@ const handleDeleteFromCart = () => {
}, },
}); });
}, },
} },
); );
}; };
@@ -106,9 +106,9 @@ watch(
}, },
}); });
}, },
} },
); );
} },
); );
</script> </script>
@@ -117,8 +117,12 @@ watch(
class="flex flex-col items-center w-full gap-4 p-4 border lg:flex-row border-slate-200 rounded-xl bg-slate-50 overflow-hidden relative" class="flex flex-col items-center w-full gap-4 p-4 border lg:flex-row border-slate-200 rounded-xl bg-slate-50 overflow-hidden relative"
> >
<div class="flex items-start justify-start w-full gap-2.5 lg:gap-4"> <div class="flex items-start justify-start w-full gap-2.5 lg:gap-4">
<Skeleton
v-if="cartImageIsLoading"
class="size-[4rem] lg:!size-[12rem] aspect-square shrink-0 !rounded-xl border border-slate-200"
/>
<div <div
v-if="!cartImageIsLoading" v-else
class="size-[4rem] lg:size-[12rem] aspect-square shrink-0 rounded-xl border border-slate-200 overflow-hidden" class="size-[4rem] lg:size-[12rem] aspect-square shrink-0 rounded-xl border border-slate-200 overflow-hidden"
> >
<NuxtImg <NuxtImg
@@ -129,10 +133,6 @@ watch(
alt="product" alt="product"
/> />
</div> </div>
<Skeleton
v-else
class="!size-[12rem] aspect-square shrink-0 !rounded-xl border border-slate-200"
/>
<div class="flex flex-col w-full gap-3 lg:gap-4"> <div class="flex flex-col w-full gap-3 lg:gap-4">
<div class="flex items-center justify-between gap-3"> <div class="flex items-center justify-between gap-3">
@@ -142,7 +142,7 @@ watch(
<div class="w-max flex-center gap-2"> <div class="w-max flex-center gap-2">
<div <div
v-if="data.discount > 0" v-if="data.discount > 0"
class="text-white bg-blue-500 px-3 lg:px-4 py-1.5 lg:py-2 text-[10px] lg:text-xs rounded-full flex items-center gap-1" class="text-white whitespace-pre bg-blue-500 px-3 lg:px-4 py-1.5 lg:py-2 text-[8px] lg:text-xs rounded-full flex items-center gap-1"
> >
{{ data.discount_amount }} {{ data.discount_amount }}
تخفیف تخفیف
@@ -164,7 +164,7 @@ watch(
{{ data.product.title }} {{ data.product.title }}
</NuxtLink> </NuxtLink>
<div class="flex items-center justify-start gap-1.5"> <div class="flex items-center justify-start flex-wrap gap-1.5">
<div <div
v-if="!!data.product.color" v-if="!!data.product.color"
class="px-3 py-1 rounded-full border border-slate-200 text-xs lg:text-sm flex-center gap-1.5" class="px-3 py-1 rounded-full border border-slate-200 text-xs lg:text-sm flex-center gap-1.5"
@@ -182,7 +182,7 @@ watch(
v-if="data.product.product_attributes.length > 0" v-if="data.product.product_attributes.length > 0"
v-for="(variant, index) in data.product.product_attributes" v-for="(variant, index) in data.product.product_attributes"
:index="index" :index="index"
class="px-3 py-1 rounded-full border border-slate-200 text-xs lg:text-sm" class="px-3 py-1 whitespace-pre rounded-full border border-slate-200 text-xs lg:text-sm"
> >
{{ variant.value }} {{ variant.value }}
</span> </span>
@@ -305,7 +305,7 @@ watch(
<div class="flex flex-col items-end"> <div class="flex flex-col items-end">
<span <span
v-if="data.discount > 0" v-if="data.discount > 0"
class="typo-p-xs relative flex-center w-fit line-through text-slate-400" class="text-[10px] lg:typo-p-xs relative flex-center w-fit line-through text-slate-400"
> >
{{ data.price }} {{ data.price }}
</span> </span>
@@ -315,7 +315,7 @@ watch(
> >
تخفیف ویژه: {{ data.special_discount_amount }} تخفیف ویژه: {{ data.special_discount_amount }}
</span> </span>
<span class="typo-p-md relative flex-center w-fit font-medium"> <span class="typo-p-sm lg:typo-p-md relative flex-center w-fit font-medium">
{{ data.final_price }} {{ data.final_price }}
</span> </span>
</div> </div>
@@ -54,8 +54,7 @@ const handleSubmit = () => {
> >
<template #trigger> <template #trigger>
<Button <Button
class="rounded-full shrink-0 whitespace-pre" class="rounded-full shrink-0 whitespace-pre max-lg:text-[10px]! max-lg:py-1"
end-icon="ci:bi-trash"
size="md" size="md"
> >
حذف همه حذف همه
+28 -34
View File
@@ -50,50 +50,44 @@ const isShow = computed({
class="bg-black/50 backdrop-blur-sm data-[state=open]:animate-overlay-show fixed inset-0 z-999" class="bg-black/50 backdrop-blur-sm data-[state=open]:animate-overlay-show fixed inset-0 z-999"
/> />
<div <DialogContent
class="fixed inset-0 w-full h-svh z-9999 flex-center" class="fixed inset-0 z-9999 flex items-start justify-center overflow-y-auto overscroll-contain data-[state=open]:animate-content-show focus:outline-none"
v-if="isShow" style="touch-action: pan-y"
> >
<div <div
:class="contectClass" :class="contectClass"
class="overflow-y-auto max-h-svh absolute left-[50%] py-10 w-fit max-w-[50rem] translate-x-[-50%]" class="relative w-fit max-w-[50rem] my-auto py-10"
> >
<DialogContent <div
class="data-[state=open]:animate-content-show text-black font-iran-yekan-x focus:outline-none z-[100]" class="rounded-2xl bg-white text-black font-iran-yekan-x shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]"
> >
<div <div
class="rounded-2xl bg-white shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]" class="w-full flex items-center px-6 justify-between py-[1.5rem] border-b border-slate-200"
> >
<div <DialogClose
class="w-full flex items-center px-6 justify-between py-[1.5rem] border-b border-slate-200" class="inline-flex size-8 items-center justify-center transition-all rounded-full bg-gray-50 border border-slate-200 hover:border-black focus:outline-none"
aria-label="Close"
> >
<DialogClose <Icon
class="inline-flex size-8 items-center justify-center transition-all rounded-full bg-gray-50 border border-slate-200 hover:border-black focus:outline-none" name="ci:bi-x-lg"
aria-label="Close" class="**:fill-black"
> />
<Icon </DialogClose>
name="ci:bi-x-lg" <DialogTitle class="typo-sub-h-md lg:typo-sub-h-xl font-semibold flex items-center gap-3">
class="**:fill-black" {{ title }}
/> <Icon
</DialogClose> v-if="!!icon"
<DialogTitle :name="icon"
class="typo-sub-h-md lg:typo-sub-h-xl font-semibold flex items-center gap-3" :size="iconSize"
> />
{{ title }} </DialogTitle>
<Icon
v-if="!!icon"
:name="icon"
:size="iconSize"
/>
</DialogTitle>
</div>
<div class="w-full px-6">
<slot name="content" />
</div>
</div> </div>
</DialogContent> <div class="w-full px-6">
<slot name="content" />
</div>
</div>
</div> </div>
</div> </DialogContent>
</DialogPortal> </DialogPortal>
</DialogRoot> </DialogRoot>
</template> </template>
@@ -124,7 +124,7 @@ const resetAvatarFile = async () => {
</button> </button>
</div> </div>
<div class="w-full flex-center gap-4 max-w-[500px] flex-wrap"> <!-- <div class="w-full flex-center gap-4 max-w-[500px] flex-wrap">
<button <button
class="size-6 lg:size-8 rounded-full bg-orange-100 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3" class="size-6 lg:size-8 rounded-full bg-orange-100 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/> />
@@ -140,7 +140,7 @@ const resetAvatarFile = async () => {
<button <button
class="size-6 lg:size-8 rounded-full bg-amber-800 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3" class="size-6 lg:size-8 rounded-full bg-amber-800 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/> />
</div> </div> -->
<div class="w-full flex-col-center gap-5"> <div class="w-full flex-col-center gap-5">
<Avatar <Avatar
+2 -2
View File
@@ -40,7 +40,7 @@ const hasCartItem = computed(() => !!cart.value && cart.value.items.length! > 0)
class="flex items-center gap-2 text-sm lg:text-[1rem] font-medium" class="flex items-center gap-2 text-sm lg:text-[1rem] font-medium"
> >
<Icon <Icon
name="ci:bi-arrow-right" name="ci:arrow-right"
class="**:stroke-blue-500" class="**:stroke-blue-500"
/> />
<span class="text-blue-500"> <span class="text-blue-500">
@@ -49,7 +49,7 @@ const hasCartItem = computed(() => !!cart.value && cart.value.items.length! > 0)
</NuxtLink> </NuxtLink>
</div> </div>
<h1 class="w-full text-center lg:w-6/12 typo-h-5 lg:typo-h-4"> <h1 v-if="pageTitle" class="w-full text-center lg:w-6/12 typo-h-5 lg:typo-h-4">
{{ pageTitle }} {{ pageTitle }}
</h1> </h1>
+1 -1
View File
@@ -29,7 +29,7 @@ const hasCartItem = computed(() => !!cart.value && cart.value.items.length! > 0)
<div class="w-full flex flex-col gap-4 lg:gap-6"> <div class="w-full flex flex-col gap-4 lg:gap-6">
<div <div
v-if="hasCartItem" v-if="hasCartItem"
class="flex items-center justify-between w-full gap-3 px-4 py-4 rounded-xl bg-slate-50 border border-slate-200" class="flex items-center justify-between w-full gap-3 px-4 py-2 lg:py-4 rounded-xl bg-slate-50 border border-slate-200"
> >
<Skeleton <Skeleton
v-if="cartIsLoading" v-if="cartIsLoading"