66 lines
1.5 KiB
Vue
66 lines
1.5 KiB
Vue
<template>
|
|
<TheNavbar></TheNavbar>
|
|
<TheTwoColumnsLayout
|
|
:left-column-class="'col-md-8 bg-vue'"
|
|
:right-column-class="'col-md-4'"
|
|
:fullsize="true"
|
|
>
|
|
<template #leftCol>
|
|
<div class="mt-5 text-center">
|
|
<div class="display-1 my-5">Billibox</div>
|
|
<div class="display-4 my-5">Die kleine Welt alter Fotoapparate</div>
|
|
<div class="my-5 offset-4 col-4">
|
|
<img src="~@fortawesome/fontawesome-pro/svgs/duotone/camera.svg" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<template #rightCol>
|
|
<transition
|
|
enter-active-class="animate__animated animate__bounceInRight"
|
|
leave-active-class="animate__animated animate__bounceOutRight"
|
|
mode="out-in"
|
|
>
|
|
<component
|
|
:is="componentName"
|
|
@changeComponent="changeComponent"
|
|
></component>
|
|
</transition>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</TheTwoColumnsLayout>
|
|
</template>
|
|
|
|
<script>
|
|
import TheTwoColumnsLayout from "@/layouts/TheTwoColumnsLayout";
|
|
import RegisterUser from "@/components/auth/RegisterUser";
|
|
import LoginUser from "@/components/auth/LoginUser";
|
|
import TheNavbar from "@/components/TheNavbar";
|
|
|
|
export default {
|
|
name: "HomePage",
|
|
components: {
|
|
TheNavbar,
|
|
TheTwoColumnsLayout,
|
|
RegisterUser,
|
|
LoginUser
|
|
},
|
|
data() {
|
|
return {
|
|
componentName: "RegisterUser"
|
|
}
|
|
},
|
|
methods: {
|
|
changeComponent(handler) {
|
|
this.componentName = handler.componentName
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
svg { color: white}
|
|
</style> |