|
|
|
@ -1,16 +1,16 @@ |
|
|
|
<template> |
|
|
|
<div :class="prefixCls" class="login-background-img"> |
|
|
|
<AppLocalePicker class="absolute top-4 right-4 enter-x xl:text-gray-600" :showText="false"/> |
|
|
|
<AppLocalePicker class="absolute top-4 right-4 enter-x xl:text-gray-600" :showText="false" /> |
|
|
|
<AppDarkModeToggle class="absolute top-3 right-7 enter-x" /> |
|
|
|
<div class="aui-logo" v-if="!getIsMobile"> |
|
|
|
<div> |
|
|
|
<h3> |
|
|
|
<img :src="logoImg" alt="jeecg" /> |
|
|
|
<!-- <img :src="logoImg" alt="jeecg" />--> |
|
|
|
</h3> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-else class="aui-phone-logo"> |
|
|
|
<img :src="logoImg" alt="jeecg" /> |
|
|
|
<!-- <img :src="logoImg" alt="jeecg" />--> |
|
|
|
</div> |
|
|
|
<div v-show="type === 'login'"> |
|
|
|
<div class="aui-content"> |
|
|
|
@ -18,7 +18,7 @@ |
|
|
|
<div class="aui-form"> |
|
|
|
<div class="aui-image"> |
|
|
|
<div class="aui-image-text"> |
|
|
|
<img :src="adTextImg" /> |
|
|
|
<!-- <img :src="adTextImg" />--> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="aui-formBox"> |
|
|
|
@ -27,9 +27,9 @@ |
|
|
|
<div class="aui-flex-box" :class="activeIndex === 'accountLogin' ? 'activeNav on' : ''" @click="loginClick('accountLogin')" |
|
|
|
>{{ t('sys.login.signInFormTitle') }} |
|
|
|
</div> |
|
|
|
<div class="aui-flex-box" :class="activeIndex === 'phoneLogin' ? 'activeNav on' : ''" @click="loginClick('phoneLogin')" |
|
|
|
>{{ t('sys.login.mobileSignInFormTitle') }} |
|
|
|
</div> |
|
|
|
<!-- <div class="aui-flex-box" :class="activeIndex === 'phoneLogin' ? 'activeNav on' : ''" @click="loginClick('phoneLogin')"--> |
|
|
|
<!-- >{{ t('sys.login.mobileSignInFormTitle') }}--> |
|
|
|
<!-- </div>--> |
|
|
|
</div> |
|
|
|
<div class="aui-form-box" style="height: 180px"> |
|
|
|
<a-form ref="loginRef" :model="formData" v-if="activeIndex === 'accountLogin'" @keyup.enter.native="loginHandleClick"> |
|
|
|
@ -63,9 +63,9 @@ |
|
|
|
<span style="margin-left: 5px">{{ t('sys.login.rememberMe') }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="aui-forget"> |
|
|
|
<a @click="forgetHandelClick"> {{ t('sys.login.forgetPassword') }}</a> |
|
|
|
</div> |
|
|
|
<!-- <div class="aui-forget">--> |
|
|
|
<!-- <a @click="forgetHandelClick"> {{ t('sys.login.forgetPassword') }}</a>--> |
|
|
|
<!-- </div>--> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a-form> |
|
|
|
@ -89,45 +89,48 @@ |
|
|
|
<div class="aui-formButton"> |
|
|
|
<div class="aui-flex"> |
|
|
|
<a-button :loading="loginLoading" class="aui-link-login" type="primary" @click="loginHandleClick"> |
|
|
|
{{ t('sys.login.loginButton') }}</a-button> |
|
|
|
</div> |
|
|
|
<div class="aui-flex"> |
|
|
|
<a class="aui-linek-code aui-flex-box" @click="codeHandleClick">{{ t('sys.login.qrSignInFormTitle') }}</a> |
|
|
|
</div> |
|
|
|
<div class="aui-flex"> |
|
|
|
<a class="aui-linek-code aui-flex-box" @click="registerHandleClick">{{ t('sys.login.registerButton') }}</a> |
|
|
|
{{ t('sys.login.loginButton') }}</a-button |
|
|
|
> |
|
|
|
</div> |
|
|
|
<!-- 注册及二维码登录 --> |
|
|
|
<!-- <div class="aui-flex">--> |
|
|
|
<!-- <a class="aui-linek-code aui-flex-box" @click="codeHandleClick">{{ t('sys.login.qrSignInFormTitle') }}</a>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- <div class="aui-flex">--> |
|
|
|
<!-- <a class="aui-linek-code aui-flex-box" @click="registerHandleClick">{{ t('sys.login.registerButton') }}</a>--> |
|
|
|
<!-- </div>--> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<a-form @keyup.enter.native="loginHandleClick"> |
|
|
|
<div class="aui-flex aui-third-text"> |
|
|
|
<div class="aui-flex-box aui-third-border"> |
|
|
|
<span>{{ t('sys.login.otherSignIn') }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="aui-flex" :class="`${prefixCls}-sign-in-way`"> |
|
|
|
<div class="aui-flex-box"> |
|
|
|
<div class="aui-third-login"> |
|
|
|
<a title="github" @click="onThirdLogin('github')"><GithubFilled /></a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="aui-flex-box"> |
|
|
|
<div class="aui-third-login"> |
|
|
|
<a title="企业微信" @click="onThirdLogin('wechat_enterprise')"><icon-font class="item-icon" type="icon-qiyeweixin3" /></a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="aui-flex-box"> |
|
|
|
<div class="aui-third-login"> |
|
|
|
<a title="钉钉" @click="onThirdLogin('dingtalk')"><DingtalkCircleFilled /></a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="aui-flex-box"> |
|
|
|
<div class="aui-third-login"> |
|
|
|
<a title="微信" @click="onThirdLogin('wechat_open')"><WechatFilled /></a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a-form> |
|
|
|
<!-- 其他登录方式 --> |
|
|
|
<!-- <a-form @keyup.enter.native="loginHandleClick">--> |
|
|
|
<!-- <div class="aui-flex aui-third-text">--> |
|
|
|
<!-- <div class="aui-flex-box aui-third-border">--> |
|
|
|
<!-- <span>{{ t('sys.login.otherSignIn') }}</span>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- <div class="aui-flex" :class="`${prefixCls}-sign-in-way`">--> |
|
|
|
<!-- <div class="aui-flex-box">--> |
|
|
|
<!-- <div class="aui-third-login">--> |
|
|
|
<!-- <a title="github" @click="onThirdLogin('github')"><GithubFilled /></a>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- <div class="aui-flex-box">--> |
|
|
|
<!-- <div class="aui-third-login">--> |
|
|
|
<!-- <a title="企业微信" @click="onThirdLogin('wechat_enterprise')"><icon-font class="item-icon" type="icon-qiyeweixin3" /></a>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- <div class="aui-flex-box">--> |
|
|
|
<!-- <div class="aui-third-login">--> |
|
|
|
<!-- <a title="钉钉" @click="onThirdLogin('dingtalk')"><DingtalkCircleFilled /></a>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- <div class="aui-flex-box">--> |
|
|
|
<!-- <div class="aui-third-login">--> |
|
|
|
<!-- <a title="微信" @click="onThirdLogin('wechat_open')"><WechatFilled /></a>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- </a-form>--> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -143,8 +146,8 @@ |
|
|
|
<MiniCodelogin ref="codeRef" @go-back="goBack" @success="handleSuccess" /> |
|
|
|
</div> |
|
|
|
<!-- 第三方登录相关弹框 --> |
|
|
|
<ThirdModal ref="thirdModalRef"></ThirdModal> |
|
|
|
|
|
|
|
<ThirdModal ref="thirdModalRef" /> |
|
|
|
|
|
|
|
<!-- 图片验证码弹窗 --> |
|
|
|
<CaptchaModal @register="captchaRegisterModal" @ok="getLoginCode" /> |
|
|
|
</div> |
|
|
|
@ -166,12 +169,12 @@ |
|
|
|
import adTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.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"; |
|
|
|
import { useDesign } from '/@/hooks/web/useDesign'; |
|
|
|
import { useAppInject } from '/@/hooks/web/useAppInject'; |
|
|
|
import { GithubFilled, WechatFilled, DingtalkCircleFilled, createFromIconfontCN } from '@ant-design/icons-vue'; |
|
|
|
import CaptchaModal from '@/components/jeecg/captcha/CaptchaModal.vue'; |
|
|
|
import { useModal } from "@/components/Modal"; |
|
|
|
import { ExceptionEnum } from "@/enums/exceptionEnum"; |
|
|
|
import { useModal } from '@/components/Modal'; |
|
|
|
import { ExceptionEnum } from '@/enums/exceptionEnum'; |
|
|
|
|
|
|
|
const IconFont = createFromIconfontCN({ |
|
|
|
scriptUrl: '//at.alicdn.com/t/font_2316098_umqusozousr.js', |
|
|
|
@ -194,8 +197,8 @@ |
|
|
|
//账号登录表单字段 |
|
|
|
const formData = reactive<any>({ |
|
|
|
inputCode: '', |
|
|
|
username: 'admin', |
|
|
|
password: '123456', |
|
|
|
username: '', |
|
|
|
password: '', |
|
|
|
}); |
|
|
|
//手机登录表单字段 |
|
|
|
const phoneFormData = reactive<any>({ |
|
|
|
@ -343,8 +346,8 @@ |
|
|
|
return; |
|
|
|
} |
|
|
|
//update-begin---author:wangshuai---date:2024-04-18---for:【QQYUN-9005】同一个IP，1分钟超过5次短信，则提示需要验证码--- |
|
|
|
const result = await getCaptcha({ mobile: phoneFormData.mobile, smsmode: SmsEnum.FORGET_PASSWORD }).catch((res) =>{ |
|
|
|
if(res.code === ExceptionEnum.PHONE_SMS_FAIL_CODE){ |
|
|
|
const result = await getCaptcha({ mobile: phoneFormData.mobile, smsmode: SmsEnum.FORGET_PASSWORD }).catch((res) => { |
|
|
|
if (res.code === ExceptionEnum.PHONE_SMS_FAIL_CODE) { |
|
|
|
openCaptchaModal(true, {}); |
|
|
|
} |
|
|
|
}); |
|
|
|
@ -399,7 +402,7 @@ |
|
|
|
*/ |
|
|
|
function handleSuccess(value) { |
|
|
|
Object.assign(formData, value); |
|
|
|
Object.assign(phoneFormData, { mobile: "", smscode: "" }); |
|
|
|
Object.assign(phoneFormData, { mobile: '', smscode: '' }); |
|
|
|
type.value = 'login'; |
|
|
|
activeIndex.value = 'accountLogin'; |
|
|
|
handleChangeCheckCode(); |
|
|
|
@ -460,11 +463,11 @@ |
|
|
|
color: #aaa !important; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.jeecg-dark-switch){ |
|
|
|
position:absolute; |
|
|
|
:deep(.jeecg-dark-switch) { |
|
|
|
position: absolute; |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
.aui-link-login{ |
|
|
|
.aui-link-login { |
|
|
|
height: 42px; |
|
|
|
padding: 10px 15px; |
|
|
|
font-size: 14px; |
|
|
|
@ -474,100 +477,103 @@ |
|
|
|
flex: 1; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
.aui-phone-logo{ |
|
|
|
.aui-phone-logo { |
|
|
|
position: absolute; |
|
|
|
margin-left: 10px; |
|
|
|
width: 60px; |
|
|
|
top:2px; |
|
|
|
top: 2px; |
|
|
|
z-index: 4; |
|
|
|
} |
|
|
|
.top-3{ |
|
|
|
.top-3 { |
|
|
|
top: 0.45rem; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
<style lang="less"> |
|
|
|
@prefix-cls: ~'@{namespace}-mini-login'; |
|
|
|
@dark-bg: #293146; |
|
|
|
@prefix-cls: ~'@{namespace}-mini-login'; |
|
|
|
@dark-bg: #293146; |
|
|
|
|
|
|
|
html[data-theme='dark'] { |
|
|
|
.@{prefix-cls} { |
|
|
|
background-color: @dark-bg !important; |
|
|
|
background-image: none; |
|
|
|
html[data-theme='dark'] { |
|
|
|
.@{prefix-cls} { |
|
|
|
background-color: @dark-bg !important; |
|
|
|
background-image: none; |
|
|
|
|
|
|
|
&::before { |
|
|
|
background-image: url(/@/assets/svg/login-bg-dark.svg); |
|
|
|
} |
|
|
|
.aui-inputClear{ |
|
|
|
background-color: #232a3b !important; |
|
|
|
} |
|
|
|
.ant-input, |
|
|
|
.ant-input-password { |
|
|
|
background-color: #232a3b !important; |
|
|
|
} |
|
|
|
&::before { |
|
|
|
background-image: url(/@/assets/svg/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; |
|
|
|
} |
|
|
|
.ant-btn:not(.ant-btn-link):not(.ant-btn-primary) { |
|
|
|
border: 1px solid #4a5569 !important; |
|
|
|
} |
|
|
|
|
|
|
|
&-form { |
|
|
|
background: @dark-bg !important; |
|
|
|
} |
|
|
|
&-form { |
|
|
|
background: @dark-bg !important; |
|
|
|
} |
|
|
|
|
|
|
|
.app-iconify { |
|
|
|
color: #fff !important; |
|
|
|
} |
|
|
|
.aui-inputClear input,.aui-input-line input,.aui-choice{ |
|
|
|
color: #c9d1d9 !important; |
|
|
|
} |
|
|
|
.app-iconify { |
|
|
|
color: #fff !important; |
|
|
|
} |
|
|
|
.aui-inputClear input, |
|
|
|
.aui-input-line input, |
|
|
|
.aui-choice { |
|
|
|
color: #c9d1d9 !important; |
|
|
|
} |
|
|
|
|
|
|
|
.aui-formBox{ |
|
|
|
background-color: @dark-bg !important; |
|
|
|
} |
|
|
|
.aui-third-text span{ |
|
|
|
background-color: @dark-bg !important; |
|
|
|
} |
|
|
|
.aui-form-nav .aui-flex-box{ |
|
|
|
color: #c9d1d9 !important; |
|
|
|
} |
|
|
|
.aui-formBox { |
|
|
|
background-color: @dark-bg !important; |
|
|
|
} |
|
|
|
.aui-third-text span { |
|
|
|
background-color: @dark-bg !important; |
|
|
|
} |
|
|
|
.aui-form-nav .aui-flex-box { |
|
|
|
color: #c9d1d9 !important; |
|
|
|
} |
|
|
|
|
|
|
|
.aui-formButton .aui-linek-code{ |
|
|
|
background: @dark-bg !important; |
|
|
|
color: white !important; |
|
|
|
} |
|
|
|
.aui-code-line{ |
|
|
|
border-left: none !important; |
|
|
|
} |
|
|
|
.ant-checkbox-inner,.aui-success h3{ |
|
|
|
border-color: #c9d1d9; |
|
|
|
} |
|
|
|
//update-begin---author:wangshuai ---date:20230828 for：【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------ |
|
|
|
&-sign-in-way { |
|
|
|
.anticon { |
|
|
|
font-size: 22px !important; |
|
|
|
color: #888 !important; |
|
|
|
cursor: pointer !important; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
color: @primary-color !important; |
|
|
|
.aui-formButton .aui-linek-code { |
|
|
|
background: @dark-bg !important; |
|
|
|
color: white !important; |
|
|
|
} |
|
|
|
.aui-code-line { |
|
|
|
border-left: none !important; |
|
|
|
} |
|
|
|
.ant-checkbox-inner, |
|
|
|
.aui-success h3 { |
|
|
|
border-color: #c9d1d9; |
|
|
|
} |
|
|
|
//update-begin---author:wangshuai ---date:20230828 for：【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------ |
|
|
|
&-sign-in-way { |
|
|
|
.anticon { |
|
|
|
font-size: 22px !important; |
|
|
|
color: #888 !important; |
|
|
|
cursor: pointer !important; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
color: @primary-color !important; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
//update-end---author:wangshuai ---date:20230828 for：【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------ |
|
|
|
} |
|
|
|
//update-end---author:wangshuai ---date:20230828 for：【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------ |
|
|
|
} |
|
|
|
|
|
|
|
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; |
|
|
|
} |
|
|
|
.aui-third-login a{ |
|
|
|
background: transparent; |
|
|
|
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; |
|
|
|
} |
|
|
|
.aui-third-login a { |
|
|
|
background: transparent; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
tanzs
1 month ago