added new components

This commit is contained in:
Mamalizz
2025-03-13 01:37:51 +03:30
parent 2ee4e664f2
commit efa3694596
+4 -83
View File
@@ -7,7 +7,6 @@ const route = useRoute();
const pageTitle = computed(() => route.meta.pageTitle);
const prevPage = computed(() => route.meta.prevPage);
const nextPage = computed(() => route.meta.nextPage);
</script>
<template>
@@ -17,7 +16,7 @@ const nextPage = computed(() => route.meta.nextPage);
>
<Header />
<main
class="w-full overflow-x-hidden container flex flex-col gap-[5rem]"
class="w-full overflow-x-hidden container flex flex-col gap-[5rem] max-w-[80vw]"
>
<div class="w-full flex flex-col">
<div
@@ -35,7 +34,7 @@ const nextPage = computed(() => route.meta.nextPage);
name="bi:arrow-right"
class="**:stroke-cyan-400"
/>
<span class="font-bold text-cyan-400">
<span class="text-cyan-400">
{{ prevPage?.label }}
</span>
</NuxtLink>
@@ -58,90 +57,12 @@ const nextPage = computed(() => route.meta.nextPage);
<NuxtPage />
</div>
<div
class="flex flex-col bg-slate-50 sticky top-44 w-full lg:w-3/12 transition-all border border-slate-200 rounded-xl"
>
<div
class="w-full flex items-center justify-between p-5 border-b border-slate-200"
>
<span class="typo-sub-h-xl text-black"
>فاکتور خرید</span
>
<Icon
name="ci:cart"
class="**:stroke-black"
size="24"
/>
</div>
<div class="flex flex-col p-5 gap-[1rem]">
<div
class="flex items-center justify-between w-full text-slate-800"
>
<span class="max-w-1/2 text-sm lg:text-[1rem]">
جمع سبد خرید:
</span>
<span class="max-w-1/2 text-sm lg:text-[1rem]">
۳,۲۹۱,۰۰۰ تومان
</span>
</div>
<div
class="flex items-center justify-between w-full text-status-error-primary"
>
<span class="max-w-1/2 text-sm lg:text-[1rem]">
تخفیف:
</span>
<span class="max-w-1/2 text-sm lg:text-[1rem]">
۹۰۰,۰۰۰ تومان
</span>
</div>
<div
class="flex items-center justify-between w-full text-slate-900"
>
<span class="max-w-1/2 text-sm lg:text-[1rem]">
جمع کل:
</span>
<span class="max-w-1/2 text-sm lg:text-[1rem]">
۲,۳۹۱,۰۰۰ تومان
</span>
</div>
<label
v-if="route.name == 'cart-checkout'"
class="flex items-center w-full group gap-2 p-3 text-sm transition-all border text-slate-600 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-cyan-500 bg-slate-50 border-slate-200 rounded-100"
>
<input
type="text"
placeholder="کد تخفیف"
class="w-full border-none focus:border-none focus:outline-none placeholder:text-slate-600 h-[22px]"
/>
<button
class="ring ring-offset-[-4px] active:ring-offset-2 transition-all duration-75 font-bold text-cyan-500 rounded-50"
>
ثبت
</button>
</label>
<NuxtLink :to="{ name: nextPage?.name }">
<Button
start-icon="bi:arrow-right"
class="w-full rounded-full mt-2"
>
{{ nextPage?.label }}
</Button>
</NuxtLink>
</div>
</div>
<CartSummary />
</div>
</div>
<ProductsSlider title="دیگران این محصولات را هم خریده‌اند" />
</main>
<div class="w-full flex-col flex">
<div class="w-full flex-col flex mt-20">
<ServiceHighlights />
<Footer />
</div>