Mamalizz
119 lines
4.4 KiB
Vue
119 lines
4.4 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="space-y-[1.25rem] bg-gray-50 p-4 sticky top-44 w-full lg:w-3/12 transition-all border border-gray-300 rounded-xl"
|
||
>
|
||
<div
|
||
class="flex items-center justify-between w-full text-gray-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-gray-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>
|
||
|
||
<NuxtLink :to="{ name: nextPage.name }">
|
||
<Button
|
||
start-icon="bi:arrow-right"
|
||
class="w-full rounded-full"
|
||
>
|
||
{{ nextPage.label }}
|
||
</Button>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<ProductsSlider title="دیگران این محصولات را هم خریدهاند" />
|
||
</main>
|
||
<div class="w-full flex-col flex">
|
||
<ServiceHighlights />
|
||
<Footer />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped></style>
|