Login.vue 5.2 KB

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