<template>
|
<div :class="prefixCls" class="relative w-full h-full px-4">
|
<AppLocalePicker
|
class="absolute text-white top-4 right-4 enter-x xl:text-gray-600"
|
:showText="false"
|
v-if="!sessionTimeout && showLocale"
|
/>
|
<AppDarkModeToggle class="absolute top-3 right-7 enter-x" v-if="!sessionTimeout" />
|
|
<!-- <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 min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
|
<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="inline-block mt-4 text-3xl"> {{ t('鸿鹄仓储管理WMS系统') }}</span>
|
</div>
|
<div class="mt-5 font-normal text-white text-md dark:text-gray-500 -enter-x">
|
{{ t('未来可见 数字化智造平台') }}
|
</div>
|
</div>
|
</div>
|
<div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
|
<div
|
:class="`${prefixCls}-form`"
|
class="relative w-full px-5 py-8 mx-auto my-auto rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
|
>
|
<LoginForm />
|
<ForgetPasswordForm />
|
<!-- <RegisterForm />
|
<MobileForm />
|
<QrCodeForm /> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { computed, getCurrentInstance } from 'vue';
|
import { AppLogo, AppLocalePicker } from '/@/components/Application';
|
import LoginForm from './LoginForm.vue';
|
import ForgetPasswordForm from './ForgetPasswordForm.vue';
|
import { useGlobSetting } from '/@/hooks/setting';
|
import { useI18n } from '/@/hooks/web/useI18n';
|
import { useDesign } from '/@/hooks/web/useDesign';
|
import { useLocaleStore } from '/@/store/modules/locale';
|
|
defineProps({
|
sessionTimeout: {
|
type: Boolean,
|
},
|
});
|
const { appContext } = getCurrentInstance();
|
const globSetting = useGlobSetting();
|
const { prefixCls } = useDesign('login');
|
const { t } = useI18n();
|
const localeStore = useLocaleStore();
|
const showLocale = localeStore.getShowPicker;
|
const title = computed(() => globSetting?.title ?? '');
|
const name = appContext.config.globalProperties.name;
|
</script>
|
<style lang="less">
|
@prefix-cls: ~'@{namespace}-login';
|
@logo-prefix-cls: ~'@{namespace}-app-logo';
|
@countdown-prefix-cls: ~'@{namespace}-countdown-input';
|
@dark-bg: #293146;
|
|
html[data-theme='dark'] {
|
.@{prefix-cls} {
|
background-color: @dark-bg;
|
|
&::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;
|
}
|
|
&-form {
|
background: transparent !important;
|
}
|
|
.app-iconify {
|
color: #fff;
|
}
|
}
|
|
input.fix-auto-fill,
|
.fix-auto-fill input {
|
-webkit-text-fill-color: #c9d1d9 !important;
|
box-shadow: inherit !important;
|
}
|
}
|
|
.@{prefix-cls} {
|
min-height: 100%;
|
overflow: hidden;
|
|
@media (max-width: @screen-xl) {
|
background-color: #293146;
|
|
.@{prefix-cls}-form {
|
background-color: #fff;
|
}
|
}
|
|
&::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;
|
top: 69px;
|
height: 30px;
|
|
&__title {
|
// font-size: 16px;
|
color: #fff;
|
}
|
img {
|
width: 32px;
|
}
|
}
|
.container {
|
.@{logo-prefix-cls} {
|
display: flex;
|
// width: 60%;
|
width: 20%;
|
height: 80px;
|
flex-direction: column;
|
justify-content: center;
|
// align-items: flex-start;
|
|
&__title {
|
// font-size: 24px;
|
// color: #fff;
|
color: red;
|
text-shadow: 1px 1px 1px #fff;
|
}
|
|
img {
|
width: 280px; //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-xl) {
|
min-width: 320px;
|
}
|
|
@media (max-width: @screen-lg) {
|
min-width: 260px;
|
}
|
|
@media (max-width: @screen-md) {
|
min-width: 240px;
|
}
|
|
@media (max-width: @screen-sm) {
|
min-width: 160px;
|
}
|
}
|
|
.@{countdown-prefix-cls} input {
|
min-width: unset;
|
}
|
|
.ant-divider-inner-text {
|
font-size: 12px;
|
color: @text-color-secondary;
|
}
|
}
|
</style>
|
