boursecu_user/src/views/login/index.vue

<template>
  <div class="login-page-root">
    <!-- Desktop: premium split-panel -->
    <DesktopAuthShell v-show="isDesktop">
      <div class="dauth-card">
        <header v-if="!loginPage.enterType" class="dauth-card__header">
          <p class="dauth-card__eyebrow">حساب کاربری</p>
          <h2 class="dauth-card__title">ورود</h2>
          <p class="dauth-card__subtitle">برای ادامه، روش ورود خود را انتخاب کنید</p>
        </header>
        <header v-else class="dauth-card__header">
          <p class="dauth-card__eyebrow">حساب جدید</p>
          <h2 class="dauth-card__title">ثبت نام</h2>
          <p class="dauth-card__subtitle">اطلاعات خود را برای ایجاد حساب وارد کنید</p>
        </header>

        <Login v-if="!loginPage.enterType" variant="desktop" @register="loginPage.setEnterType" />
        <Register v-else variant="desktop" @register="loginPage.setEnterType" />
      </div>
    </DesktopAuthShell>

    <!-- Mobile: original layout -->
    <div v-show="!isDesktop" class="login-page flex flex-col items-center">
      <div class="login-page__content z-1000 w-full p-5">
        <Login v-if="!loginPage.enterType" @register="loginPage.setEnterType" />
        <Register v-else @register="loginPage.setEnterType" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useLoginPage } from './composables/useLoginPage'
import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
import Login from './components/Login.vue'
import Register from './components/Register.vue'
import DesktopAuthShell from './desktop/components/DesktopAuthShell.vue'

const isDesktop = useDesktopBreakpoint()
const loginPage = useLoginPage()
</script>

<style scoped>
.login-page-root {
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
}

.login-page {
  height: 100%;
  max-height: calc(100dvh - var(--app-credit-footer-offset, 28px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.login-page__content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>