Login.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <template>
  2. <div :class="prefixCls" class="relative w-full h-full px-4">
  3. <div class="flex items-center absolute right-4 top-4">
  4. <AppDarkModeToggle class="enter-x mr-2" v-if="!sessionTimeout" />
  5. <AppLocalePicker
  6. class="text-white enter-x xl:text-gray-600"
  7. :show-text="false"
  8. v-if="!sessionTimeout && showLocale"
  9. />
  10. </div>
  11. <span class="-enter-x xl:hidden">
  12. <AppLogo :alwaysShowTitle="true" />
  13. </span>
  14. <div class="container relative h-full py-2 mx-auto sm:px-10">
  15. <div class="flex h-full">
  16. <div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
  17. <AppLogo class="-enter-x" />
  18. <div class="my-auto">
  19. <img
  20. :alt="title"
  21. src="../../../assets/svg/login-box-bg.svg"
  22. class="w-1/2 -mt-16 -enter-x"
  23. />
  24. <div class="mt-10 font-medium text-white -enter-x">
  25. <span class="inline-block mt-4 text-3xl"> {{ t('sys.login.signInTitle') }}</span>
  26. </div>
  27. <div class="mt-5 font-normal text-white dark:text-gray-500 -enter-x">
  28. {{ t('sys.login.signInDesc') }}
  29. </div>
  30. </div>
  31. </div>
  32. <div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
  33. <div
  34. :class="`${prefixCls}-form`"
  35. 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"
  36. >
  37. <LoginForm />
  38. <ForgetPasswordForm />
  39. <RegisterForm />
  40. <MobileForm />
  41. <QrCodeForm />
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. </div>
  47. </template>
  48. <script lang="ts" setup>
  49. import { computed } from 'vue';
  50. import { AppLogo, AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
  51. import LoginForm from './LoginForm.vue';
  52. import ForgetPasswordForm from './ForgetPasswordForm.vue';
  53. import RegisterForm from './RegisterForm.vue';
  54. import MobileForm from './MobileForm.vue';
  55. import QrCodeForm from './QrCodeForm.vue';
  56. import { useGlobSetting } from '/@/hooks/setting';
  57. import { useI18n } from '/@/hooks/web/useI18n';
  58. import { useDesign } from '/@/hooks/web/useDesign';
  59. import { useLocaleStore } from '/@/store/modules/locale';
  60. defineProps({
  61. sessionTimeout: {
  62. type: Boolean,
  63. },
  64. });
  65. const globSetting = useGlobSetting();
  66. const { prefixCls } = useDesign('login');
  67. const { t } = useI18n();
  68. const localeStore = useLocaleStore();
  69. const showLocale = localeStore.getShowPicker;
  70. const title = computed(() => globSetting?.title ?? '');
  71. </script>
  72. <style lang="less">
  73. @prefix-cls: ~'@{namespace}-login';
  74. @logo-prefix-cls: ~'@{namespace}-app-logo';
  75. @countdown-prefix-cls: ~'@{namespace}-countdown-input';
  76. @dark-bg: #293146;
  77. html[data-theme='dark'] {
  78. .@{prefix-cls} {
  79. background-color: @dark-bg;
  80. &::before {
  81. background-image: url('/@/assets/svg/login-bg-dark.svg');
  82. }
  83. .ant-input,
  84. .ant-input-password {
  85. background-color: #232a3b;
  86. }
  87. .ant-btn:not(.ant-btn-link, .ant-btn-primary) {
  88. border: 1px solid #4a5569;
  89. }
  90. &-form {
  91. background: transparent !important;
  92. }
  93. .app-iconify {
  94. color: #fff;
  95. }
  96. }
  97. input.fix-auto-fill,
  98. .fix-auto-fill input {
  99. -webkit-text-fill-color: #c9d1d9 !important;
  100. box-shadow: inherit !important;
  101. }
  102. }
  103. .@{prefix-cls} {
  104. min-height: 100%;
  105. overflow: hidden;
  106. @media (max-width: @screen-xl) {
  107. background-color: #293146;
  108. .@{prefix-cls}-form {
  109. background-color: #fff;
  110. }
  111. }
  112. &::before {
  113. content: '';
  114. position: absolute;
  115. top: 0;
  116. left: 0;
  117. width: 100%;
  118. height: 100%;
  119. margin-left: -48%;
  120. background-image: url('/@/assets/svg/login-bg.svg');
  121. background-repeat: no-repeat;
  122. background-position: 100%;
  123. background-size: auto 100%;
  124. @media (max-width: @screen-xl) {
  125. display: none;
  126. }
  127. }
  128. .@{logo-prefix-cls} {
  129. position: absolute;
  130. top: 12px;
  131. height: 30px;
  132. &__title {
  133. color: #fff;
  134. font-size: 16px;
  135. }
  136. img {
  137. width: 32px;
  138. }
  139. }
  140. .container {
  141. .@{logo-prefix-cls} {
  142. display: flex;
  143. width: 60%;
  144. height: 80px;
  145. &__title {
  146. color: #fff;
  147. font-size: 24px;
  148. }
  149. img {
  150. width: 48px;
  151. }
  152. }
  153. }
  154. &-sign-in-way {
  155. .anticon {
  156. color: #888;
  157. font-size: 22px;
  158. cursor: pointer;
  159. &:hover {
  160. color: @primary-color;
  161. }
  162. }
  163. }
  164. input:not([type='checkbox']) {
  165. min-width: 360px;
  166. @media (max-width: @screen-xl) {
  167. min-width: 320px;
  168. }
  169. @media (max-width: @screen-lg) {
  170. min-width: 260px;
  171. }
  172. @media (max-width: @screen-md) {
  173. min-width: 240px;
  174. }
  175. @media (max-width: @screen-sm) {
  176. min-width: 160px;
  177. }
  178. }
  179. .@{countdown-prefix-cls} input {
  180. min-width: unset;
  181. }
  182. .ant-divider-inner-text {
  183. color: @text-color-secondary;
  184. font-size: 12px;
  185. }
  186. }
  187. </style>