120 lines
2.2 KiB
Vue
Executable File
120 lines
2.2 KiB
Vue
Executable File
<template>
|
|
<div>
|
|
<div class="">
|
|
|
|
<client-only>
|
|
<Vue3Lottie
|
|
v-if="show"
|
|
style="position: fixed;background-color: white;z-index: 99999"
|
|
:animation-data="anim"
|
|
:loop="true"
|
|
width="100%"
|
|
height="100%"
|
|
/>
|
|
</client-only>
|
|
|
|
<slot/>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import * as animationData from "~/assets/animation.json";
|
|
import 'vue3-lottie/dist/style.css'
|
|
export default {
|
|
data() {
|
|
return {
|
|
show:true,
|
|
anim: animationData.default, // for saving the reference to the animation
|
|
lottieOptions: { animationData: animationData.default }
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
this.show=false;
|
|
}
|
|
}
|
|
</script>
|
|
<script setup>
|
|
|
|
useHead({
|
|
title:'MindBoost',
|
|
meta:[
|
|
{
|
|
name:"viewport",
|
|
content:"width=device-width, initial-scale=1.0, viewport-fit=cover"
|
|
}
|
|
],
|
|
link:[
|
|
{
|
|
href:'https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css',
|
|
rel:'stylesheet',
|
|
},
|
|
{
|
|
href: 'favicon.svg',
|
|
rel:"icon",
|
|
type:"image/x-icon"
|
|
},
|
|
{
|
|
href: '/apple-touch-icon.png',
|
|
rel:"apple-touch-icon",
|
|
sizes:"180x180",
|
|
},
|
|
{
|
|
href: '/favicon-32x32.png',
|
|
rel:"icon",
|
|
sizes:"32x32",
|
|
type:"image/png"
|
|
},
|
|
{
|
|
href: '/favicon-16x16.png',
|
|
rel:"icon",
|
|
sizes:"16x16",
|
|
type:"image/png"
|
|
},{
|
|
href: '/site.webmanifest',
|
|
rel:"manifest",
|
|
},
|
|
// { rel: 'stylesheet', href: '../assets/css/style.css' },
|
|
],
|
|
script:[
|
|
{
|
|
src:'https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js',
|
|
},
|
|
{
|
|
src:'https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js',
|
|
}
|
|
]
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
<style>
|
|
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css";
|
|
.slide-left-enter-active,
|
|
.slide-left-leave-active,
|
|
.slide-right-enter-active,
|
|
.slide-right-leave-active {
|
|
transition: all 0.2s;
|
|
}
|
|
.slide-left-enter-from {
|
|
opacity: 0;
|
|
transform: translate(50px, 0);
|
|
}
|
|
.slide-left-leave-to {
|
|
opacity: 0;
|
|
transform: translate(-50px, 0);
|
|
}
|
|
.slide-right-enter-from {
|
|
opacity: 0;
|
|
transform: translate(-50px, 0);
|
|
}
|
|
.slide-right-leave-to {
|
|
opacity: 0;
|
|
transform: translate(50px, 0);
|
|
}
|
|
</style> |