boursecu_user/src/views/login/index.vue

<template>
  <div class="login-page-root">
    <DesktopAuthShell>
      <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">
          <h2 class="dauth-card__title">ثبت نام</h2>
        </header>

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

<script lang="ts" setup>
import { onMounted, onUnmounted } from 'vue'
import { useLoginPage } from './composables/useLoginPage'
import Login from './components/Login.vue'
import Register from './components/Register.vue'
import DesktopAuthShell from './desktop/components/DesktopAuthShell.vue'

const loginPage = useLoginPage()

onMounted(() => {
  document.documentElement.classList.add('login-page-active')
})

onUnmounted(() => {
  document.documentElement.classList.remove('login-page-active')
})
</script>

<style scoped>
.login-page-root {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
</style>

<style lang="less">
/* موبایل لاگین: تمام‌عرض — بدون فریم ۴۲۶ و حاشیه سفید دوطرف */
@media screen and (max-width: 767.98px) {
  html.login-page-active {
    body {
      display: block !important;
      justify-content: unset !important;
      background: #0b192e !important;
    }

    #app {
      display: block !important;
      width: 100% !important;
      max-width: none !important;
      background: #0b192e !important;
    }

    .desktopConfig,
    .app-main,
    .login-page-root,
    .dauth,
    .dauth--boursecu {
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      left: auto !important;
      right: auto !important;
      transform: none !important;
    }

    .desktopConfig,
    .app-main,
    .login-page-root,
    .dauth.dauth--boursecu {
      min-height: 0 !important;
      height: 100dvh !important;
      max-height: 100dvh !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      background: #0b192e !important;
    }

    .app-credit-footer--mobile,
    .app-credit-footer--login {
      display: none !important;
    }

    /* بنر نصب روی لاگین منوی پایین ندارد؛ وگرنه روی فیلد و دکمهٔ ثبت‌نام می‌نشیند */
    .pwa-install-banner {
      bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }
  }
}
</style>