heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: refactor Modal component structure, optimize cart loading states, and apply UI styling improvements across components.

Browse Source
This commit is contained in:
Mamalizz-dev
2026-05-13 13:14:27 +03:30
parent 7142ce50f1
commit 63ac850e80
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/cart/index/CartItem.vue
+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>