49 lines
988 B
Vue
49 lines
988 B
Vue
|
<template>
|
||
|
|
<div class="login-form-container">
|
||
|
|
<div class="login-title">
|
||
|
|
<div class="title flex-center">
|
||
|
|
<div class="logo"></div>
|
||
|
|
<div>{{ title || defaultTitle }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="sub-title" v-if="subTitle">{{ subTitle }}</div>
|
||
|
|
</div>
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
const defaultTitle = import.meta.env.VITE_APP_TITLE
|
||
|
|
defineOptions({ name: 'LoginContainer' })
|
||
|
|
defineProps({
|
||
|
|
title: String,
|
||
|
|
subTitle: String
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scope>
|
||
|
|
.login-form-container {
|
||
|
|
width: 420px;
|
||
|
|
|
||
|
|
.login-title {
|
||
|
|
margin-bottom: 30px;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 28px;
|
||
|
|
font-weight: 900;
|
||
|
|
color: #101010;
|
||
|
|
height: 60px;
|
||
|
|
.logo {
|
||
|
|
background-image: url('@/assets/logo.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
width: 48px;
|
||
|
|
height: 48px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.sub-title {
|
||
|
|
text-align: center;
|
||
|
|
color: #101010;
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|