mohadese namavar
54 lines
1.4 KiB
Vue
54 lines
1.4 KiB
Vue
<template>
|
|
<NuxtLayout :name="device" :config="config">
|
|
<main class="cart">
|
|
<CartTabs />
|
|
<section>
|
|
<div>
|
|
<ul v-if="cart.items.length > 0">
|
|
<li v-for="(item, i) in cart.items" :key="i">
|
|
<CartItem :data="item.product" />
|
|
</li>
|
|
</ul>
|
|
<CartTotalAside />
|
|
</div>
|
|
</section>
|
|
<CartTotalFixed v-if="device == 'mobile'" />
|
|
<CartBuyersBought />
|
|
</main>
|
|
</NuxtLayout>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
const config = reactive({ mobile: { header: false } })
|
|
const { device } = inject('service')
|
|
|
|
const cart = useCartStore()
|
|
cart.get()
|
|
|
|
provide('data', computed(() => cart.items))
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.cart {
|
|
@apply w-full flex flex-col gap-[2.6rem] pb-32 lg:gap-6 lg:pt-10;
|
|
|
|
&>section:not([class]) {
|
|
@apply w-full min-h-96 flex lg:mb-[6.4rem];
|
|
|
|
&>div {
|
|
@apply container flex flex-col items-center lg:items-start lg:flex-row gap-6;
|
|
|
|
&>ul {
|
|
@apply max-w-[67.6rem] flex flex-col border-b lg:rounded-[0.6rem] lg:border border-[#E5E5E5] grow;
|
|
|
|
&>li {
|
|
@apply p-6 lg:p-10 border-b last:border-b-0 border-[#E5E5E5];
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|