| 提交 | 用户 | 时间 | ||
| 314507 | 1 | <template> |
| H | 2 | <div |
| 3 | :class="prefixCls" | |
| 4 | class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px" | |
| 5 | > | |
| 6 | <div class="relative mx-auto h-full flex"> | |
| 7 | <div | |
| 8 | :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`" | |
| 9 | > | |
| 10 | <!-- 左上角的 logo + 系统标题 --> | |
| 11 | <div class="relative flex items-center text-white"> | |
| 12 | <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" /> | |
| 13 | <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span> | |
| 14 | </div> | |
| 15 | <!-- 左边的背景图 + 欢迎语 --> | |
| 16 | <div class="h-[calc(100%-60px)] flex items-center justify-center"> | |
| 17 | <TransitionGroup | |
| 18 | appear | |
| 19 | enter-active-class="animate__animated animate__bounceInLeft" | |
| 20 | tag="div" | |
| 21 | > | |
| 22 | <img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" /> | |
| 23 | <div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div> | |
| 24 | <div key="3" class="mt-5 text-14px font-normal text-white"> | |
| 25 | {{ t('login.message') }} | |
| 26 | </div> | |
| 27 | </TransitionGroup> | |
| 28 | </div> | |
| 29 | </div> | |
| 30 | <div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px"> | |
| 31 | <!-- 右上角的主题、语言选择 --> | |
| 32 | <div | |
| 33 | class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end" | |
| 34 | > | |
| 35 | <div class="flex items-center at-2xl:hidden at-xl:hidden"> | |
| 36 | <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" /> | |
| 37 | <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span> | |
| 38 | </div> | |
| 39 | <div class="flex items-center justify-end space-x-10px"> | |
| 40 | <ThemeSwitch /> | |
| 41 | <LocaleDropdown class="dark:text-white lt-xl:text-white" /> | |
| 42 | </div> | |
| 43 | </div> | |
| 44 | <!-- 右边的登录界面 --> | |
| 45 | <Transition appear enter-active-class="animate__animated animate__bounceInRight"> | |
| 46 | <div | |
| 47 | class="m-auto h-full w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px" | |
| 48 | > | |
| 49 | <!-- 账号登录 --> | |
| 50 | <LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> | |
| 51 | <!-- 二维码登录 --> | |
| 52 | <QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> | |
| 53 | <!-- 注册 --> | |
| 54 | <!--<RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />--> | |
| 55 | <!-- 三方登录 --> | |
| 56 | <!--<SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />--> | |
| 57 | </div> | |
| 58 | </Transition> | |
| 59 | </div> | |
| 60 | </div> | |
| 61 | </div> | |
| 62 | </template> | |
| 63 | <script lang="ts" setup> | |
| 64 | import { underlineToHump } from '@/utils' | |
| 65 | ||
| 66 | import { useDesign } from '@/hooks/web/useDesign' | |
| 67 | import { useAppStore } from '@/store/modules/app' | |
| 68 | import { ThemeSwitch } from '@/layout/components/ThemeSwitch' | |
| 69 | import { LocaleDropdown } from '@/layout/components/LocaleDropdown' | |
| 70 | ||
| 71 | import { LoginForm, QrCodeForm} from './components' | |
| 72 | ||
| 73 | defineOptions({ name: 'Login' }) | |
| 74 | ||
| 75 | const { t } = useI18n() | |
| 76 | const appStore = useAppStore() | |
| 77 | const { getPrefixCls } = useDesign() | |
| 78 | const prefixCls = getPrefixCls('login') | |
| 79 | </script> | |
| 80 | ||
| 81 | <style lang="scss" scoped> | |
| 82 | $prefix-cls: #{$namespace}-login; | |
| 83 | ||
| 84 | .#{$prefix-cls} { | |
| 85 | overflow: auto; | |
| 86 | ||
| 87 | &__left { | |
| 88 | &::before { | |
| 89 | position: absolute; | |
| 90 | top: 0; | |
| 91 | left: 0; | |
| 92 | z-index: -1; | |
| 93 | width: 100%; | |
| 94 | height: 100%; | |
| 95 | background-image: url('@/assets/svgs/login-bg.svg'); | |
| 96 | background-position: center; | |
| 97 | background-repeat: no-repeat; | |
| 98 | content: ''; | |
| 99 | } | |
| 100 | } | |
| 101 | } | |
| 102 | </style> | |
