123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215 |
- <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('sys.login.signInTitle') }}</span>
- </div>
- <div class="mt-5 font-normal text-white text-md dark:text-gray-500 -enter-x">
- {{ t('sys.login.signInDesc') }}
- </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 } 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 { useLocaleStore } from '/@/store/modules/locale';
- defineProps({
- sessionTimeout: {
- type: Boolean,
- },
- });
- const globSetting = useGlobSetting();
- const { prefixCls } = useDesign('login');
- const { t } = useI18n();
- const localeStore = useLocaleStore();
- const showLocale = localeStore.getShowPicker;
- const title = computed(() => globSetting?.title ?? '');
- </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;
- 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-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>
|