<script lang="ts">
import { defineComponent, reactive } from "vue";
export default defineComponent({
  name: "LoginLayout",
});
</script>

<script setup lang="ts">
import { info } from "@/config/index.ts";

const prefix = "login-layout";
</script>

<template>
  <div :class="prefix" :style="`background-image: url(${info.bgImg})`">
    <div :class="`${prefix}-form`">
      <RouterView />
    </div>
  </div>
</template>

<style lang="scss" scoped>
$prefix: "login-layout";

.#{$prefix} {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background-size: 100% auto;
  &-form {
    position: absolute;
    left: 384px;
    top: 253px;
    width: 447px;
    height: 300px;
    opacity: 1;
    background: #fff;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.16);
    border-radius: 16px;
    // border-radius: 16px 16px 16px 16px;
  }
}
.global-login-page {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
