bdlg-planner-front/src/LoginPage.vue

<template>
  <c-header title="BDLG Planner" titleTo="/planner" />
  <div class="login-container">
    <login class="login-box" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import login from "./views/Login.vue";
import cHeader from "@/components/Utils/Header.vue";

export default defineComponent({
  components: { login, cHeader },
});
</script>
<style scoped>
.login-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 3.5rem);
}
.login-box {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  padding: 8px 24px 16px;
  min-width: 95%;
}
@media (min-width: 600px) {
  .login-box {
    padding: 8px 32px 16px;
    min-width: 420px;
  }
  .login-container {
    max-height: 500px;
  }
}
</style>