40 lines
1.3 KiB
Vue
40 lines
1.3 KiB
Vue
<template>
|
|
<div v-if="backdrop" class="relative h-[calc(100svh-6rem)] max-h-[calc(100svh-6rem)] w-full overflow-hidden">
|
|
<NuxtPicture
|
|
loading="lazy"
|
|
class="w-full h-full object-cover object-center"
|
|
:src="baseUrl + backdrop.url"
|
|
:imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
|
|
/>
|
|
|
|
<img v-if="logo" class="absolute p-4 max-sm:w-full sm:h-40 bottom-5" :src="baseUrl + logo.url" />
|
|
<img v-else class="absolute p-4 max-sm:w-full sm:h-40 bottom-5" src="/favicon.png" />
|
|
|
|
<img
|
|
class="absolute h-5 w-5 left-1/2 -translate-y-1/2 bottom-5 text-gray-400 p-2 box-content rounded-full bg-white cursor-pointer"
|
|
src="/chevrons-down.svg"
|
|
@click="scroll()"
|
|
/>
|
|
</div>
|
|
<Header />
|
|
<slot />
|
|
<Footer />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import provideGlobal from "../composables/provideGlobal";
|
|
import type Homepage from "../types/single/homepage";
|
|
|
|
const runtimeConfig = useRuntimeConfig();
|
|
const baseUrl = runtimeConfig.public.strapi.url;
|
|
const { findOne } = useStrapi();
|
|
|
|
const { logo } = await provideGlobal();
|
|
|
|
const { data: homepage } = await useAsyncData("homepage", () => findOne<Homepage>("homepage"));
|
|
const { backdrop } = homepage.value?.data ?? {};
|
|
|
|
function scroll() {
|
|
window.scrollTo({ top: window.innerHeight - 96, behavior: "smooth" });
|
|
}
|
|
</script>
|