| 提交 | 用户 | age | ||
| 2f6253 | 1 | <template> |
| ec9478 | 2 | <div :class="prefixCls" class="relative w-full h-full px-4"> |
| V | 3 | <AppLocalePicker |
| 4 | class="absolute top-4 right-4 enter-x text-white xl:text-gray-600" | |
| 5 | :showText="false" | |
| 6 | /> | |
| 2f6253 | 7 | |
| ec9478 | 8 | <span class="-enter-x xl:hidden"> |
| V | 9 | <AppLogo :alwaysShowTitle="true" /> |
| 10 | </span> | |
| c8021e | 11 | |
| 7e564c | 12 | <div class="container relative h-full py-2 mx-auto sm:px-10"> |
| ec9478 | 13 | <div class="flex h-full"> |
| V | 14 | <div class="hidden xl:flex xl:flex-col xl:w-6/12 min-h-full mr-4 pl-4"> |
| 15 | <AppLogo class="-enter-x" /> | |
| 16 | <div class="my-auto"> | |
| 17 | <img | |
| 18 | :alt="title" | |
| 19 | src="../../../assets/svg/login-box-bg.svg" | |
| 20 | class="w-1/2 -mt-16 -enter-x" | |
| 21 | /> | |
| 22 | <div class="mt-10 font-medium text-white -enter-x"> | |
| 23 | <span class="mt-4 text-3xl inline-block"> {{ t('sys.login.signInTitle') }}</span> | |
| 24 | </div> | |
| 25 | <div class="mt-5 text-md text-white font-normal dark:text-gray-500 -enter-x"> | |
| 26 | {{ t('sys.login.signInDesc') }} | |
| 27 | </div> | |
| 28 | </div> | |
| 29 | </div> | |
| 30 | <div class="h-full xl:h-auto flex py-5 xl:py-0 xl:my-0 w-full xl:w-6/12"> | |
| 31 | <div | |
| 32 | class="my-auto mx-auto xl:ml-20 bg-white xl:bg-transparent px-5 py-8 sm:px-8 xl:p-0 rounded-md shadow-md xl:shadow-none w-full sm:w-3/4 lg:w-2/4 xl:w-auto enter-x relative" | |
| 33 | > | |
| a09a0e | 34 | <LoginForm /> |
| V | 35 | <ForgetPasswordForm /> |
| 36 | <RegisterForm /> | |
| 37 | <MobileForm /> | |
| 38 | <QrCodeForm /> | |
| ec9478 | 39 | </div> |
| 2f6253 | 40 | </div> |
| 陈 | 41 | </div> |
| 42 | </div> | |
| 43 | </div> | |
| 44 | </template> | |
| 45 | <script lang="ts"> | |
| ec9478 | 46 | import { defineComponent, computed } from 'vue'; |
| c8021e | 47 | |
| ec9478 | 48 | import { AppLogo } from '/@/components/Application'; |
| e5f8ce | 49 | import { AppLocalePicker } from '/@/components/Application'; |
| ec9478 | 50 | import LoginForm from './LoginForm.vue'; |
| V | 51 | import ForgetPasswordForm from './ForgetPasswordForm.vue'; |
| 52 | import RegisterForm from './RegisterForm.vue'; | |
| 53 | import MobileForm from './MobileForm.vue'; | |
| 54 | import QrCodeForm from './QrCodeForm.vue'; | |
| c8021e | 55 | |
| f6cef1 | 56 | import { useGlobSetting } from '/@/hooks/setting'; |
| e5f8ce | 57 | import { useI18n } from '/@/hooks/web/useI18n'; |
| ec9478 | 58 | import { useDesign } from '/@/hooks/web/useDesign'; |
| f6cef1 | 59 | import { localeStore } from '/@/store/modules/locale'; |
| 968f79 | 60 | |
| 2f6253 | 61 | export default defineComponent({ |
| ec9478 | 62 | name: 'Login', |
| c8021e | 63 | components: { |
| ec9478 | 64 | AppLogo, |
| V | 65 | LoginForm, |
| 66 | ForgetPasswordForm, | |
| 67 | RegisterForm, | |
| 68 | MobileForm, | |
| 69 | QrCodeForm, | |
| e5f8ce | 70 | AppLocalePicker, |
| c8021e | 71 | }, |
| 2f6253 | 72 | setup() { |
| 737b1b | 73 | const globSetting = useGlobSetting(); |
| ec9478 | 74 | const { prefixCls } = useDesign('login'); |
| 962f90 | 75 | const { t } = useI18n(); |
| 2f6253 | 76 | |
| 陈 | 77 | return { |
| 8882d4 | 78 | t, |
| ec9478 | 79 | prefixCls, |
| V | 80 | title: computed(() => globSetting?.title ?? ''), |
| f6cef1 | 81 | showLocale: localeStore.getShowPicker, |
| 2f6253 | 82 | }; |
| 陈 | 83 | }, |
| 84 | }); | |
| 85 | </script> | |
| 190112 | 86 | <style lang="less"> |
| ec9478 | 87 | @prefix-cls: ~'@{namespace}-login'; |
| V | 88 | @logo-prefix-cls: ~'@{namespace}-app-logo'; |
| 89 | @countdown-prefix-cls: ~'@{namespace}-countdown-input'; | |
| 03b602 | 90 | |
| ec9478 | 91 | .@{prefix-cls} { |
| V | 92 | @media (max-width: @screen-xl) { |
| 93 | background: linear-gradient(180deg, #1c3faa, #1c3faa); | |
| 2f6253 | 94 | } |
| 陈 | 95 | |
| ec9478 | 96 | &::before { |
| V | 97 | position: absolute; |
| 98 | top: 0; | |
| 99 | left: 0; | |
| 100 | width: 100%; | |
| 101 | height: 100%; | |
| 102 | margin-left: -48%; | |
| 103 | background-image: url(/@/assets/svg/login-bg.svg); | |
| 104 | background-position: 100%; | |
| 105 | background-repeat: no-repeat; | |
| 106 | background-size: auto 100%; | |
| 107 | content: ''; | |
| 108 | @media (max-width: @screen-xl) { | |
| 109 | display: none; | |
| 110 | } | |
| 111 | } | |
| 03b602 | 112 | |
| ec9478 | 113 | .@{logo-prefix-cls} { |
| V | 114 | position: absolute; |
| 115 | top: 12px; | |
| 116 | height: 30px; | |
| 117 | ||
| 118 | &__title { | |
| 119 | font-size: 16px; | |
| 120 | color: #fff; | |
| 6392b7 | 121 | } |
| V | 122 | |
| ec9478 | 123 | img { |
| V | 124 | width: 32px; |
| 125 | } | |
| 126 | } | |
| 127 | ||
| 128 | .container { | |
| 129 | .@{logo-prefix-cls} { | |
| 03b602 | 130 | display: flex; |
| ec9478 | 131 | width: 60%; |
| V | 132 | height: 80px; |
| 737b1b | 133 | |
| ec9478 | 134 | &__title { |
| V | 135 | font-size: 24px; |
| 136 | color: #fff; | |
| 03b602 | 137 | } |
| N | 138 | |
| ec9478 | 139 | img { |
| V | 140 | width: 48px; |
| 03b602 | 141 | } |
| N | 142 | } |
| 2f6253 | 143 | } |
| ec9478 | 144 | |
| V | 145 | &-sign-in-way { |
| 146 | .anticon { | |
| 147 | font-size: 22px; | |
| 148 | color: #888; | |
| 149 | cursor: pointer; | |
| 150 | ||
| 151 | &:hover { | |
| 152 | color: @primary-color; | |
| 153 | } | |
| 154 | } | |
| 155 | } | |
| 156 | ||
| 157 | input:not([type='checkbox']) { | |
| 158 | min-width: 360px; | |
| a84586 | 159 | |
| V | 160 | @media (max-width: @screen-lg) { |
| 161 | min-width: 300px; | |
| 162 | } | |
| 163 | ||
| 164 | @media (max-width: @screen-md) { | |
| 165 | min-width: 280px; | |
| 166 | } | |
| 167 | ||
| ec9478 | 168 | @media (max-width: @screen-sm) { |
| 7b4fcd | 169 | min-width: 180px; |
| ec9478 | 170 | } |
| V | 171 | } |
| 172 | .@{countdown-prefix-cls} input { | |
| 173 | min-width: unset; | |
| 174 | } | |
| 175 | ||
| 176 | .ant-divider-inner-text { | |
| 177 | font-size: 12px; | |
| 178 | color: @text-color-secondary; | |
| 179 | } | |
| 2f6253 | 180 | } |
| 陈 | 181 | </style> |
