<template>
|
<div :class="prefixCls" class="relative w-full h-full px-4">
|
<AppLocalePicker
|
class="absolute top-4 right-4 enter-x text-white xl:text-gray-600"
|
:showText="false"
|
/>
|
<AppDarkModeToggle class="absolute top-3 right-7 enter-x" />
|
|
<span class="-enter-x xl:hidden">
|
<AppLogo :alwaysShowTitle="true" />
|
</span>
|
|
<div class="container relative h-full py-2 mx-auto sm:px-10">
|
<div class="flex h-full">
|
<div class="hidden xl:flex xl:flex-col xl:w-6/12 min-h-full mr-4 pl-4">
|
<AppLogo class="-enter-x" />
|
<div class="my-auto">
|
<img
|
:alt="title"
|
src="../../../assets/svg/login-box-bg.svg"
|
class="w-1/2 -mt-16 -enter-x"
|
/>
|
<div class="mt-10 font-medium text-white -enter-x">
|
<span class="mt-4 text-3xl inline-block"> {{ t('sys.login.signInTitle') }}</span>
|
</div>
|
<div class="mt-5 text-md text-white font-normal dark:text-gray-500 -enter-x">
|
{{ t('sys.login.signInDesc') }}
|
</div>
|
</div>
|
</div>
|
<div class="h-full xl:h-auto flex py-5 xl:py-0 xl:my-0 w-full xl:w-6/12">
|
<div
|
class="my-auto mx-auto xl:ml-20 xl:bg-transparent px-5 py-8 sm:px-8 xl:p-4 rounded-md shadow-md xl:shadow-none w-full sm:w-3/4 lg:w-2/4 xl:w-auto enter-x relative"
|
>
|
<LoginForm />
|
<ForgetPasswordForm />
|
<RegisterForm />
|
<MobileForm />
|
<QrCodeForm />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script lang="ts">
|
import { defineComponent, computed } from 'vue';
|
|
import { AppLogo } from '/@/components/Application';
|
import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
|
import LoginForm from './LoginForm.vue';
|
import ForgetPasswordForm from './ForgetPasswordForm.vue';
|
import RegisterForm from './RegisterForm.vue';
|
import MobileForm from './MobileForm.vue';
|
import QrCodeForm from './QrCodeForm.vue';
|
|
import { useGlobSetting } from '/@/hooks/setting';
|
import { useI18n } from '/@/hooks/web/useI18n';
|
import { useDesign } from '/@/hooks/web/useDesign';
|
import { localeStore } from '/@/store/modules/locale';
|
|
export default defineComponent({
|
name: 'Login',
|
components: {
|
AppLogo,
|
LoginForm,
|
ForgetPasswordForm,
|
RegisterForm,
|
MobileForm,
|
QrCodeForm,
|
AppLocalePicker,
|
AppDarkModeToggle,
|
},
|
setup() {
|
const globSetting = useGlobSetting();
|
const { prefixCls } = useDesign('login');
|
const { t } = useI18n();
|
|
return {
|
t,
|
prefixCls,
|
title: computed(() => globSetting?.title ?? ''),
|
showLocale: localeStore.getShowPicker,
|
};
|
},
|
});
|
</script>
|
<style lang="less">
|
@prefix-cls: ~'@{namespace}-login';
|
@logo-prefix-cls: ~'@{namespace}-app-logo';
|
@countdown-prefix-cls: ~'@{namespace}-countdown-input';
|
|
html[data-theme='dark'] {
|
.@{prefix-cls} {
|
background: #293146;
|
|
&::before {
|
background-image: url(/@/assets/svg/login-bg-dark.svg);
|
}
|
|
.ant-input,
|
.ant-input-password {
|
background-color: #232a3b;
|
}
|
|
.ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
|
border: 1px solid #4a5569;
|
}
|
}
|
}
|
|
.@{prefix-cls} {
|
@media (max-width: @screen-xl) {
|
background: linear-gradient(180deg, #1c3faa, #1c3faa);
|
}
|
|
&::before {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
margin-left: -48%;
|
background-image: url(/@/assets/svg/login-bg.svg);
|
background-position: 100%;
|
background-repeat: no-repeat;
|
background-size: auto 100%;
|
content: '';
|
@media (max-width: @screen-xl) {
|
display: none;
|
}
|
}
|
|
.@{logo-prefix-cls} {
|
position: absolute;
|
top: 12px;
|
height: 30px;
|
|
&__title {
|
font-size: 16px;
|
color: #fff;
|
}
|
|
img {
|
width: 32px;
|
}
|
}
|
|
.container {
|
.@{logo-prefix-cls} {
|
display: flex;
|
width: 60%;
|
height: 80px;
|
|
&__title {
|
font-size: 24px;
|
color: #fff;
|
}
|
|
img {
|
width: 48px;
|
}
|
}
|
}
|
|
&-sign-in-way {
|
.anticon {
|
font-size: 22px;
|
color: #888;
|
cursor: pointer;
|
|
&:hover {
|
color: @primary-color;
|
}
|
}
|
}
|
|
input:not([type='checkbox']) {
|
min-width: 360px;
|
|
@media (max-width: @screen-lg) {
|
min-width: 300px;
|
}
|
|
@media (max-width: @screen-md) {
|
min-width: 280px;
|
}
|
|
@media (max-width: @screen-sm) {
|
min-width: 180px;
|
}
|
}
|
.@{countdown-prefix-cls} input {
|
min-width: unset;
|
}
|
|
.ant-divider-inner-text {
|
font-size: 12px;
|
color: @text-color-secondary;
|
}
|
}
|
</style>
|
