From f55c0bd445b43dafccbcae7a1f32dbc78bd2e60f Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期三, 19 六月 2024 10:48:04 +0800
Subject: [PATCH] 登录更新
---
src/views/sys/login/Login.vue | 104 ++++++++++++++++++++++++---------------------------
1 files changed, 49 insertions(+), 55 deletions(-)
diff --git a/src/views/sys/login/Login.vue b/src/views/sys/login/Login.vue
index dd11c68..ac33a76 100644
--- a/src/views/sys/login/Login.vue
+++ b/src/views/sys/login/Login.vue
@@ -1,20 +1,22 @@
<template>
<div :class="prefixCls" class="relative w-full h-full px-4">
- <AppLocalePicker
- class="absolute text-white top-4 right-4 enter-x xl:text-gray-600"
- :showText="false"
- v-if="!sessionTimeout && showLocale"
- />
- <AppDarkModeToggle class="absolute top-3 right-7 enter-x" v-if="!sessionTimeout" />
+ <div class="flex items-center absolute right-4 top-4">
+ <AppDarkModeToggle class="enter-x mr-2" v-if="!sessionTimeout" />
+ <AppLocalePicker
+ class="text-white enter-x xl:text-gray-600"
+ :show-text="false"
+ v-if="!sessionTimeout && showLocale"
+ />
+ </div>
- <!-- <span class="-enter-x xl:hidden">
- <AppLogo :alwaysShowTitle="true" />
- </span> -->
+ <span class="mt-5 -enter-x xl:hidden">
+ <LoginLogo :alwaysShowTitle="false" />
+ </span>
<div class="container relative h-full py-2 mx-auto sm:px-10">
<div class="flex h-full">
<div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
- <AppLogo class="-enter-x"/>
+ <loginLogo class="-enter-x" />
<div class="my-auto">
<!-- <img
:alt="title"
@@ -22,9 +24,9 @@
class="w-1/2 -mt-16 -enter-x"
/> -->
<div class="mt-10 font-medium text-white -enter-x">
- <span class="inline-block mt-4 text-3xl"> {{ t('楦块箘浠撳偍绠＄悊WMS绯荤粺') }}</span>
+ <span class="inline-block mt-4 text-3xl"> {{ t('楦块箘鏅鸿兘鏅洪�燤ES绯荤粺') }}</span>
</div>
- <div class="mt-5 font-normal text-white text-md dark:text-gray-500 -enter-x">
+ <div class="mt-5 font-normal text-white dark:text-gray-500 -enter-x">
{{ t('鏈潵鍙 鏁板瓧鍖栨櫤閫犲钩鍙�') }}
</div>
</div>
@@ -36,9 +38,9 @@
>
<LoginForm />
<ForgetPasswordForm />
- <!-- <RegisterForm />
+ <RegisterForm />
<MobileForm />
- <QrCodeForm /> -->
+ <QrCodeForm />
</div>
</div>
</div>
@@ -46,15 +48,17 @@
</div>
</template>
<script lang="ts" setup>
+ import { AppDarkModeToggle, AppLocalePicker, AppLogo, LoginLogo } from '@/components/Application';
+ import { useGlobSetting } from '@/hooks/setting';
+ import { useDesign } from '@/hooks/web/useDesign';
+ import { useI18n } from '@/hooks/web/useI18n';
+ import { useLocaleStore } from '@/store/modules/locale';
import { computed } from 'vue';
- import { AppLogo } from '/@/components/Application';
- import { AppLocalePicker } from '/@/components/Application';
- import LoginForm from './LoginForm.vue';
import ForgetPasswordForm from './ForgetPasswordForm.vue';
- import { useGlobSetting } from '/@/hooks/setting';
- import { useI18n } from '/@/hooks/web/useI18n';
- import { useDesign } from '/@/hooks/web/useDesign';
- import { useLocaleStore } from '/@/store/modules/locale';
+ import LoginForm from './LoginForm.vue';
+ import MobileForm from './MobileForm.vue';
+ import QrCodeForm from './QrCodeForm.vue';
+ import RegisterForm from './RegisterForm.vue';
defineProps({
sessionTimeout: {
@@ -80,7 +84,7 @@
background-color: @dark-bg;
&::before {
- background-image: url(/@/assets/svg/login-bg-dark.svg);
+ background-image: url('@/assets/svg/login-bg-dark.svg');
}
.ant-input,
@@ -88,7 +92,7 @@
background-color: #232a3b;
}
- .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
+ .ant-btn:not(.ant-btn-link, .ant-btn-primary) {
border: 1px solid #4a5569;
}
@@ -99,12 +103,10 @@
.app-iconify {
color: #fff;
}
- }
- input.fix-auto-fill,
- .fix-auto-fill input {
- -webkit-text-fill-color: #c9d1d9 !important;
- box-shadow: inherit !important;
+ .ant-divider-inner-text {
+ color: @text-color-secondary;
+ }
}
}
@@ -112,6 +114,7 @@
min-height: 100%;
overflow: hidden;
+ /* stylelint-disable-next-line media-query-no-invalid */
@media (max-width: @screen-xl) {
background-color: #293146;
@@ -121,18 +124,18 @@
}
&::before {
+ content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-left: -48%;
- background-image: url(/@/assets/svg/login-bg.svg);
- background-position: 100%;
+ background-image: url('@/assets/svg/login-bg.svg');
background-repeat: no-repeat;
+ background-position: 100%;
background-size: auto 100%;
- content: '';
-
+ /* stylelint-disable-next-line media-query-no-invalid */
@media (max-width: @screen-xl) {
display: none;
}
@@ -140,45 +143,40 @@
.@{logo-prefix-cls} {
position: absolute;
- // top: 12px;
- top:69px;
+ top: 12px;
height: 30px;
&__title {
- // font-size: 16px;
color: #fff;
+ font-size: 16px;
}
+
img {
width: 32px;
}
}
+
.container {
.@{logo-prefix-cls} {
display: flex;
- // width: 60%;
- width: 20%;
+ width: 60%;
height: 80px;
- flex-direction: column;
- justify-content: center;
- // align-items: flex-start;
&__title {
- // font-size: 24px;
- // color: #fff;
- color:red;
- text-shadow: 1px 1px 1px #fff;
+ color: #fff;
+ font-size: 24px;
}
img {
- width:280px; //48px;
+ width: 220px; //48px;
}
}
}
&-sign-in-way {
.anticon {
- font-size: 22px;
color: #888;
+ font-size: 22px;
cursor: pointer;
&:hover {
@@ -186,21 +184,22 @@
}
}
}
+
input:not([type='checkbox']) {
min-width: 360px;
-
+ /* stylelint-disable-next-line media-query-no-invalid */
@media (max-width: @screen-xl) {
min-width: 320px;
}
-
+ /* stylelint-disable-next-line media-query-no-invalid */
@media (max-width: @screen-lg) {
min-width: 260px;
}
-
+ /* stylelint-disable-next-line media-query-no-invalid */
@media (max-width: @screen-md) {
min-width: 240px;
}
-
+ /* stylelint-disable-next-line media-query-no-invalid */
@media (max-width: @screen-sm) {
min-width: 160px;
}
@@ -208,11 +207,6 @@
.@{countdown-prefix-cls} input {
min-width: unset;
- }
-
- .ant-divider-inner-text {
- font-size: 12px;
- color: @text-color-secondary;
}
}
</style>
--
Gitblit v1.9.3