55 lines
1.3 KiB
Vue
55 lines
1.3 KiB
Vue
<script setup lang="ts">
|
||
const config = useAppConfig()
|
||
|
||
useHead({
|
||
titleTemplate: (chunk?) => {
|
||
return chunk === config.title.short
|
||
? config.title.full
|
||
: `${chunk} – ${config.title.short}`
|
||
},
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div
|
||
id="ender-layout"
|
||
class="d-flex flex-column align-items-center pt-sm-5 h-100"
|
||
>
|
||
<AClientOnly appear render="xs" mode="out-in">
|
||
<SwipeControls />
|
||
</AClientOnly>
|
||
|
||
<NuxtLayout
|
||
name="card"
|
||
class="animate__animated-sm animate__delay-1-5s animate__fadeInDown"
|
||
>
|
||
<template #footer>
|
||
<AClientOnly
|
||
appear
|
||
render="xs"
|
||
mode="in-out"
|
||
enter="animate__animated animate__delay-1s animate__fadeIn"
|
||
leave="animate__animated animate__fadeOut"
|
||
>
|
||
<Flooter opaque />
|
||
</AClientOnly>
|
||
</template>
|
||
</NuxtLayout>
|
||
</div>
|
||
|
||
<ClientOnly>
|
||
<template #fallback> </template>
|
||
<Portal layout="#ender-layout" animate randomize fade />
|
||
</ClientOnly>
|
||
|
||
<AClientOnly
|
||
appear
|
||
render="sm-up"
|
||
mode="out-in"
|
||
enter="animate__animated animate__delay-1s animate__fadeInUpBig animate__slow"
|
||
leave="animate__animated animate__fadeOutDown"
|
||
>
|
||
<Flooter class="floaty mb-2 px-2" />
|
||
</AClientOnly>
|
||
</template>
|