Login.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <template>
  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 overflow-x-hidden overflow-y-auto`"
  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
  31. class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px overflow-x-hidden overflow-y-auto"
  32. >
  33. <!-- 右上角的主题、语言选择 -->
  34. <div
  35. class="flex items-center justify-between at-2xl:justify-end at-xl:justify-end"
  36. style="color: var(--el-text-color-primary);"
  37. >
  38. <div class="flex items-center at-2xl:hidden at-xl:hidden">
  39. <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
  40. <span class="text-20px font-bold" >{{ underlineToHump(appStore.getTitle) }}</span>
  41. </div>
  42. <div class="flex items-center justify-end space-x-10px h-48px">
  43. <ThemeSwitch />
  44. <LocaleDropdown />
  45. </div>
  46. </div>
  47. <!-- 右边的登录界面 -->
  48. <Transition appear enter-active-class="animate__animated animate__bounceInRight">
  49. <div
  50. class="m-auto h-[calc(100%-60px)] 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"
  51. >
  52. <!-- 账号登录 -->
  53. <LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
  54. <!-- 手机登录 -->
  55. <MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
  56. <!-- 二维码登录 -->
  57. <QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
  58. <!-- 注册 -->
  59. <RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
  60. <!-- 三方登录 -->
  61. <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
  62. <!-- 忘记密码 -->
  63. <ForgetPasswordForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
  64. </div>
  65. </Transition>
  66. </div>
  67. </div>
  68. </div>
  69. </template>
  70. <script lang="ts" setup>
  71. import { underlineToHump } from '@/utils'
  72. import { useDesign } from '@/hooks/web/useDesign'
  73. import { useAppStore } from '@/store/modules/app'
  74. import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
  75. import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
  76. import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue, ForgetPasswordForm } from './components'
  77. defineOptions({ name: 'Login' })
  78. const { t } = useI18n()
  79. const appStore = useAppStore()
  80. const { getPrefixCls } = useDesign()
  81. const prefixCls = getPrefixCls('login')
  82. </script>
  83. <style lang="scss" scoped>
  84. $prefix-cls: #{$namespace}-login;
  85. .#{$prefix-cls} {
  86. overflow: auto;
  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>
  103. <style lang="scss">
  104. .dark .login-form {
  105. .el-divider__text {
  106. background-color: var(--login-bg-color);
  107. }
  108. .el-card {
  109. background-color: var(--login-bg-color);
  110. }
  111. }
  112. </style>