40 lines
1.7 KiB
Vue
40 lines
1.7 KiB
Vue
<template>
|
|
<div
|
|
class="min-h-svh overflow-x-hidden lato-regular relative overflow-visible before:content-[''] before:absolute before:bottom-0 before:h-full before:w-full before:bg-[url(/assets/img/png/footer-flowers-2.png)] before:bg-no-repeat before:bg-bottom before:bg-contain before:z-40"
|
|
:class="
|
|
route.path === '/books/1' || route.path === '/books/2'
|
|
? 'bg-[linear-gradient(135deg,rgba(17,17,30,1)_10%,rgba(183,32,76,1)_170%)]'
|
|
: 'bg-black-50'
|
|
"
|
|
>
|
|
<div
|
|
v-if="route.path === '/'"
|
|
class="relative z-10 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[820px] after:h-[535px] after:bg-[url(/assets/img/webp/gradient.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-contain"
|
|
/>
|
|
<div
|
|
v-if="route.path === '/'"
|
|
class="relative z-20 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[1120px] after:h-[1800px] after:bg-[url(/assets/img/webp/group-flowers.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-cover"
|
|
/>
|
|
<div
|
|
v-if="route.path === '/'"
|
|
class="relative z-40 before:content-[''] before:absolute before:top-0 before:left-0 before:w-[1120px] before:h-[1000px] before:bg-[url(/assets/img/webp/hero-flowers.webp)] before:bg-no-repeat before:bg-left before:bg-contain"
|
|
/>
|
|
<UiHeader class="relative z-50" />
|
|
<UiMain class="!min-h-[1200px] text-primary relative">
|
|
<Suspense>
|
|
<slot />
|
|
</Suspense>
|
|
</UiMain>
|
|
<UiFooter />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import UiFooter from './UiFooter/UiFooter.vue'
|
|
import UiHeader from './UiHeader/UiHeader.vue'
|
|
import UiMain from './UiMain/UiMain.vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
const route = useRoute()
|
|
</script>
|