wangxiang
2 years ago
1 changed files with 270 additions and 0 deletions
@ -0,0 +1,270 @@
@@ -0,0 +1,270 @@
|
||||
<template> |
||||
<div :class="prefixCls" class="login-background-img"> |
||||
<AppLocalePicker v-if="showLocale" class="absolute top-4 right-4 enter-x xl:text-gray-600" :showText="false"/> |
||||
<AppDarkModeToggle class="absolute top-3 right-10 enter-x"/> |
||||
<div v-if="!getIsMobile" class="aui-logo"> |
||||
<div> |
||||
<h3> |
||||
<img :src="logoImg" alt=""> |
||||
</h3> |
||||
</div> |
||||
</div> |
||||
<div v-else class="aui-phone-logo"> |
||||
<img :src="logoPhoneImg" alt=""> |
||||
</div> |
||||
<header class="aui-title text-white text-center">KLAB系统</header> |
||||
<main class="aui-content"> |
||||
<div class="aui-container"> |
||||
<div class="aui-form"> |
||||
<div class="aui-image"> |
||||
<div class="aui-image-text"/> |
||||
</div> |
||||
<div class="aui-formBox"> |
||||
<div class="aui-formWell"> |
||||
<div class="aui-flex aui-form-nav"> |
||||
<div class="aui-flex-box">登录 | LOGIN</div> |
||||
</div> |
||||
<div class="aui-form-box" style="height: 150px"> |
||||
<a-form |
||||
ref="loginRef" |
||||
:model="formData" |
||||
@keypress.enter="loginHandleClick" |
||||
> |
||||
<div class="aui-account"> |
||||
<div class="aui-inputClear"> |
||||
<i class="icon icon-code"/> |
||||
<a-form-item> |
||||
<a-input v-model:value="formData.username" class="fix-auto-fill" :placeholder="t('sys.login.userName')"/> |
||||
</a-form-item> |
||||
</div> |
||||
<div class="aui-inputClear"> |
||||
<i class="icon icon-password"/> |
||||
<a-form-item> |
||||
<a-input |
||||
v-model:value="formData.password" |
||||
class="fix-auto-fill" |
||||
type="password" |
||||
:placeholder="t('sys.login.password')" |
||||
/> |
||||
</a-form-item> |
||||
</div> |
||||
</div> |
||||
</a-form> |
||||
</div> |
||||
<div class="aui-formButton"> |
||||
<div class="aui-flex"> |
||||
<a-button |
||||
:loading="loginLoading" |
||||
class="aui-link-login aui-flex-box" |
||||
type="primary" |
||||
@click="loginHandleClick" |
||||
>{{ t('sys.login.loginButton') }}</a-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</main> |
||||
<footer class="footer text-white text-center"> |
||||
<a href="#">Copyright</a> © 2021-2023 KANGLAI BIOLOGY BEAUTY |
||||
<a href="https://beian.miit.gov.cn/" target="_blank">湘ICP备20001570号-2</a> |
||||
</footer> |
||||
</div> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
import { reactive, ref, toRaw } from 'vue'; |
||||
import { useUserStore } from '/@/store/modules/user'; |
||||
import { useMessage } from '/@/hooks/web/useMessage'; |
||||
import { useI18n } from '/@/hooks/web/useI18n'; |
||||
import logoImg from '/@/assets/ssoLogin/kics/icon/logo.png'; |
||||
import logoPhoneImg from '/@/assets/images/logo.png'; |
||||
import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application'; |
||||
import { useLocaleStore } from '/@/store/modules/locale'; |
||||
import { useDesign } from '/@/hooks/web/useDesign'; |
||||
import { useAppInject } from '/@/hooks/web/useAppInject'; |
||||
|
||||
const { prefixCls } = useDesign('mini-login'); |
||||
const { notification, createMessage } = useMessage(); |
||||
const userStore = useUserStore(); |
||||
const { t } = useI18n(); |
||||
const localeStore = useLocaleStore(); |
||||
const showLocale = localeStore.getShowPicker; |
||||
|
||||
// 账号登录表单字段 |
||||
const formData = reactive<any>({ |
||||
realKey: '', |
||||
inputCode: '', |
||||
username: '', |
||||
password: '', |
||||
}); |
||||
// 手机登录表单字段 |
||||
const phoneFormData = reactive<any>({ |
||||
mobile: '', |
||||
smscode: '', |
||||
}); |
||||
const loginRef = ref(); |
||||
const loginLoading = ref<boolean>(false); |
||||
const { getIsMobile } = useAppInject(); |
||||
|
||||
async function loginHandleClick() { |
||||
await accountLogin(); |
||||
} |
||||
|
||||
async function accountLogin() { |
||||
if (!formData.username) { |
||||
createMessage.warn(t('sys.login.accountPlaceholder')); |
||||
return; |
||||
} |
||||
if (!formData.password) { |
||||
createMessage.warn(t('sys.login.passwordPlaceholder')); |
||||
return; |
||||
} |
||||
if (!formData.inputCode) { |
||||
createMessage.warn(t('sys.login.smsPlaceholder')); |
||||
return; |
||||
} |
||||
try { |
||||
loginLoading.value = true; |
||||
const userInfo = await userStore.login(toRaw({ |
||||
password: formData.password, |
||||
username: formData.username, |
||||
realKey: formData.realKey, |
||||
code: formData.inputCode, |
||||
})); |
||||
if (userInfo) { |
||||
notification.success({ |
||||
message: t('sys.login.loginSuccessTitle'), |
||||
description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.nickName}`, |
||||
duration: 3, |
||||
}); |
||||
} |
||||
} catch (error){ |
||||
formData.code=''; |
||||
formData.realKey=''; |
||||
} finally { |
||||
loginLoading.value = false; |
||||
} |
||||
} |
||||
|
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
@import '/@/assets/loginmini/style/home.less'; |
||||
@import '/@/assets/loginmini/style/base.less'; |
||||
|
||||
.login-background-img { |
||||
background-image: url(/@/assets/ssoLogin/kics/icon/login_bg.jpg); |
||||
} |
||||
|
||||
:deep(.ant-input:focus) { |
||||
box-shadow: none; |
||||
} |
||||
|
||||
.aui-link-login{ |
||||
height: 42px; |
||||
padding: 10px 15px; |
||||
font-size: 14px; |
||||
border-radius: 8px; |
||||
margin-top: 15px; |
||||
margin-bottom: 8px; |
||||
} |
||||
|
||||
.aui-phone-logo{ |
||||
position: absolute; |
||||
margin-left: 10px; |
||||
width: 60px; |
||||
top:2px; |
||||
z-index: 4; |
||||
} |
||||
|
||||
.top-3{ |
||||
top: 0.45rem; |
||||
} |
||||
|
||||
.aui-form-nav .aui-flex-box{ |
||||
color: #3EB041 !important; |
||||
} |
||||
|
||||
.aui-container { |
||||
max-width: 750px; |
||||
border-radius: 18px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.aui-title { |
||||
position: fixed; |
||||
top: 24%; |
||||
width: 100%; |
||||
font-size: 28px; |
||||
font-weight: bold; |
||||
line-height: 1.1; |
||||
user-select: none; |
||||
} |
||||
|
||||
.aui-image { |
||||
background-image: url(/@/assets/ssoLogin/kics/icon/login-ad.jpg); |
||||
} |
||||
|
||||
.footer { |
||||
position: fixed; |
||||
bottom: 9px; |
||||
width: 100%; |
||||
font-size: 17px; |
||||
font-weight: bold; |
||||
user-select: none; |
||||
a { |
||||
color: #FFFFFF; |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
<style lang="less"> |
||||
@prefix-cls: ~'@{namespace}-mini-login'; |
||||
@dark-bg: #293146; |
||||
|
||||
html[data-theme='dark'] { |
||||
.@{prefix-cls} { |
||||
background-color: @dark-bg !important; |
||||
background-image: none; |
||||
|
||||
&::before { |
||||
background-image: url(/@/assets/images/login-bg-dark.svg); |
||||
} |
||||
.aui-inputClear{ |
||||
background-color: #232a3b !important; |
||||
} |
||||
.ant-input, |
||||
.ant-input-password { |
||||
background-color: #232a3b !important; |
||||
} |
||||
|
||||
.ant-btn:not(.ant-btn-link):not(.ant-btn-primary) { |
||||
border: 1px solid #4a5569 !important; |
||||
} |
||||
|
||||
&-form { |
||||
background: @dark-bg !important; |
||||
} |
||||
|
||||
.aui-inputClear input,.aui-input-line input,.aui-choice { |
||||
color: #c9d1d9 !important; |
||||
} |
||||
|
||||
.aui-formBox{ |
||||
background-color: @dark-bg !important; |
||||
} |
||||
} |
||||
|
||||
input.fix-auto-fill, |
||||
.fix-auto-fill input { |
||||
-webkit-text-fill-color: #c9d1d9 !important; |
||||
box-shadow: inherit !important; |
||||
} |
||||
|
||||
.ant-divider-inner-text { |
||||
font-size: 12px !important; |
||||
color: @text-color-secondary !important; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue