boursecu_user/src/views/login/index.vue

<template>
  <div class="login-page flex items-center justify-center">
    <!--    <PhoneVerify/>-->
    <div class="fixed top-0 right-0 left-0 h-1/3 w-screen flex">
      <img :src="img_topGradiant" alt="" class="absolute z-10 w-screen h-full object-cover">
      <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none">
    </div>
    <div class="fixed bottom-0 right-0 left-0 h-1/3 w-screen">
      <img :src="img_bottomGradiant" alt="" class="absolute z-10 w-screen h-full object-cover">
      <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none">
    </div>
    <div class="z-1000 w-full p-5">
<!--      <transition mode="out-in" name="fade">-->
        <Login v-if="!enterType" @register="setEnterType"/>
        <Register v-else @register="setEnterType"/>
<!--      </transition>-->
    </div>
  </div>
</template>

<script lang="ts" setup>

import Login from "@/views/login/components/Login.vue";
import Register from "@/views/login/components/Register.vue";
import { onMounted, ref } from 'vue'
import img_topGradiant from './assets/img/gr_top_white.svg'
import img_bottomGradiant from './assets/img/gr_bottom_white.svg'
import img_pattern from './assets/img/pattern.svg'
import router from '@/router'

const enterType = ref<boolean>(false)

function setEnterType(val: boolean) {
  enterType.value = val
}

onMounted(() => {
  if (router.currentRoute.value.query.id)
    enterType.value = true
})


</script>


<style scoped>
.login-page {
  min-height: calc(100vh - var(--app-credit-footer-offset, 28px));
}
</style>