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>
@@ -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"
>
<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
v-if="!cartImageIsLoading"
v-else
class="size-[4rem] lg:size-[12rem] aspect-square shrink-0 rounded-xl border border-slate-200 overflow-hidden"
>
<NuxtImg
@@ -129,10 +133,6 @@ watch(
alt="product"
/>
</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 items-center justify-between gap-3">
@@ -142,7 +142,7 @@ watch(
<div class="w-max flex-center gap-2">
<div
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 }}
تخفیف
@@ -164,7 +164,7 @@ watch(
{{ data.product.title }}
</NuxtLink>
<div class="flex items-center justify-start gap-1.5">
<div class="flex items-center justify-start flex-wrap gap-1.5">
<div
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"
@@ -182,7 +182,7 @@ watch(
v-if="data.product.product_attributes.length > 0"
v-for="(variant, index) in data.product.product_attributes"
: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 }}
</span>
@@ -305,7 +305,7 @@ watch(
<div class="flex flex-col items-end">
<span
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 }}
</span>
@@ -315,7 +315,7 @@ watch(
>
تخفیف ویژه: {{ data.special_discount_amount }}
</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 }}
</span>
</div>