Mamalizz
150 lines
6.2 KiB
Vue
150 lines
6.2 KiB
Vue
<script setup lang="ts">
|
||
// state
|
||
|
||
const route = useRoute();
|
||
|
||
// computed
|
||
|
||
const pageTitle = computed(() => route.meta.pageTitle);
|
||
const prevPage = computed(() => route.meta.prevPage);
|
||
const nextPage = computed(() => route.meta.nextPage);
|
||
</script>
|
||
|
||
<template>
|
||
<div
|
||
class="w-full flex flex-col-center persian-number font-iran-yekan-x"
|
||
dir="rtl"
|
||
>
|
||
<Header />
|
||
<main
|
||
class="w-full overflow-x-hidden container flex flex-col gap-[5rem]"
|
||
>
|
||
<div class="w-full flex flex-col">
|
||
<div
|
||
class="flex flex-col items-center justify-center gap-4 py-[5rem] lg:gap-0 lg:flex-row"
|
||
>
|
||
<div
|
||
class="flex items-center justify-start w-full lg:w-3/12"
|
||
>
|
||
<NuxtLink
|
||
v-if="prevPage"
|
||
:to="{ name: prevPage?.name }"
|
||
class="flex items-center gap-2 text-sm lg:text-[1rem]"
|
||
>
|
||
<Icon
|
||
name="bi:arrow-right"
|
||
class="**:stroke-cyan-400"
|
||
/>
|
||
<span class="font-bold text-cyan-400">
|
||
{{ prevPage?.label }}
|
||
</span>
|
||
</NuxtLink>
|
||
</div>
|
||
|
||
<h1
|
||
class="w-full text-center typo-h-3 lg:w-6/12 title-large"
|
||
>
|
||
{{ pageTitle }}
|
||
</h1>
|
||
|
||
<div class="hidden w-3/12 shrink-0 lg:block"> </div>
|
||
</div>
|
||
<div
|
||
class="w-full flex flex-col items-center relative justify-between gap-8 lg:gap-6 lg:flex-row lg:items-start"
|
||
>
|
||
<div class="flex flex-col w-full gap-4 lg:gap-6 lg:w-9/12">
|
||
<slot />
|
||
</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>
|
||
</div>
|
||
</div>
|
||
<ProductsSlider title="دیگران این محصولات را هم خریدهاند" />
|
||
</main>
|
||
<div class="w-full flex-col flex">
|
||
<ServiceHighlights />
|
||
<Footer />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped></style>
|