56 lines
1.5 KiB
Vue
56 lines
1.5 KiB
Vue
<script setup lang="ts">
|
||
import { useQuasar } from 'quasar'
|
||
|
||
const quasar = useQuasar()
|
||
|
||
useHead({
|
||
titleTemplate: (chunk) => {
|
||
return !chunk || chunk === 'Enderman' ? 'Enderman' : `${chunk} – Enderman`
|
||
},
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<NuxtLoadingIndicator color="purple" />
|
||
<div
|
||
id="ender-layout"
|
||
class="d-flex flex-column align-items-center pt-sm-5 h-100 animate__animated-sm animate__delay-1-5s animate__fadeInDown"
|
||
>
|
||
<NuxtLayout name="card">
|
||
<template #header> </template>
|
||
<template #footer>
|
||
<ClientOnly>
|
||
<template #fallback> </template>
|
||
<Transition
|
||
appear
|
||
enter-active-class="animate__animated animate__delay-1s animate__fadeIn"
|
||
leave-active-class="animate__animated animate__fadeOut"
|
||
mode="out-in"
|
||
>
|
||
<Flooter
|
||
v-if="
|
||
quasar.screen.width && quasar.screen.height && quasar.screen.xs
|
||
"
|
||
opaque
|
||
/>
|
||
</Transition>
|
||
</ClientOnly>
|
||
</template>
|
||
</NuxtLayout>
|
||
</div>
|
||
|
||
<Portal layout="#ender-layout" animate randomize fade />
|
||
|
||
<Transition
|
||
appear
|
||
enter-active-class="animate__animated animate__delay-1s animate__fadeInUpBig animate__slow"
|
||
leave-active-class="animate__animated animate__fadeOutDown"
|
||
mode="out-in"
|
||
>
|
||
<Flooter
|
||
v-if="quasar.screen.width && quasar.screen.height && !quasar.screen.xs"
|
||
class="floaty mb-2 px-2"
|
||
/>
|
||
</Transition>
|
||
</template>
|