修改登录页

This commit is contained in:
java_cuibaocheng@163.com 2024-04-09 16:24:15 +08:00
parent 46e743cb84
commit 40e6fcfc9e
2 changed files with 37 additions and 31 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

View File

@ -72,7 +72,6 @@
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
text-align: center; text-align: center;
/* padding: auto 20px auto 50px; */
font-size: 36px; font-size: 36px;
margin: auto 20px auto 50px; margin: auto 20px auto 50px;
} }
@ -83,11 +82,19 @@
line-height: 30px; line-height: 30px;
font-size: 14px; font-size: 14px;
margin: auto 0; margin: auto 0;
/* height: 20px; */
padding: 0 25px; padding: 0 25px;
border-left: 2px solid rgba(0, 0, 0, .2); border-left: 2px solid rgba(0, 0, 0, .2);
} }
.sign a {
width: 260px;
height: 46px;
margin-left: 50px;
margin-top: 17px;
}
.sign a img{
width: 260px;
height: 46px;
}
.go-page { .go-page {
display: flex; display: flex;
justify-content: end; justify-content: end;
@ -288,6 +295,7 @@
} }
#loginBox .denglu .yzmtx1 { #loginBox .denglu .yzmtx1 {
position: relative; position: relative;
display: none;
margin-bottom: 20px; margin-bottom: 20px;
width: 100%; width: 100%;
height: 38px; height: 38px;
@ -305,6 +313,7 @@
border: none; border: none;
} }
#loginBox .denglu .yzmbox1 { #loginBox .denglu .yzmbox1 {
display: none;
width: 100%; width: 100%;
height: 38px; height: 38px;
line-height: 38px; line-height: 38px;
@ -387,12 +396,15 @@
<body> <body>
<div id="app"> <div id="app">
<div v-cloak th:if="${customLoginForm ne null}" th:utext="${customLoginForm.formHtml}"></div> <div v-cloak th:if="${customLoginForm ne null}" th:utext="${customLoginForm.formHtml}"></div>
<!-- <div v-cloak th:if="${customLoginForm eq null}">--> <!-- <div v-cloak th:if="${customLoginForm eq null}">-->
<div v-cloak th:if="${customLoginForm eq null}"> <div v-cloak th:if="${customLoginForm eq null}">
<div class="nav"> <div class="nav">
<div class="sign"> <div class="sign">
<h2>腾狮科技</h2> <!-- <h2>腾狮科技</h2>-->
<p>AI人工智能软著申请</p> <!-- <p>AI人工智能软著申请</p>-->
<a>
<img src="assets/images/headicon1.png" alt="">
</a>
</div> </div>
<div class="go-page"> <div class="go-page">
<a id="register" th:href="${ HomeServerUrl + 'Register.html'}">注册</a> <a id="register" th:href="${ HomeServerUrl + 'Register.html'}">注册</a>
@ -402,11 +414,11 @@
<div id="loginBox" class="layadmin-user-login-main"> <div id="loginBox" class="layadmin-user-login-main">
<div class="btnlist"> <div class="btnlist">
<div> <div>
<button id="zhanghaomima" @click="loginTypeChange('zhanghaomima')">账号密码</button> <button id="zhanghaomima">账号密码</button>
<span class="span1"></span> <span class="span1"></span>
</div> </div>
<div> <div>
<button id="yzmlongin" @click="loginTypeChange('yanzhengma')">验证码登录</button> <button id="yzmlongin">验证码登录</button>
<span class="span2"></span> <span class="span2"></span>
</div> </div>
@ -423,22 +435,22 @@
</div> </div>
</div> </div>
<div id="loginFormBox" class="layadmin-user-login-box layadmin-user-login-body layui-form"> <div id="loginFormBox" class="layadmin-user-login-box layadmin-user-login-body layui-form">
<form id="loginForm" :action="activeAction" method="post" @submit.prevent="submitForm" class="denglu"> <form id="loginForm" :action="pageParams.loginFormAction" method="post" @submit.prevent="submitForm" class="denglu">
<input type="hidden" name="referToken" v-model="formData.referToken"/> <input type="hidden" name="referToken" v-model="formData.referToken"/>
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-username" for="username"></label> <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="username"></label>
<input type="text" v-model="formData.username" id="username" name="username" lay-verify="username" placeholder="用户名" class="layui-input"> <input type="text" v-model="formData.username" id="username" name="username" lay-verify="username" placeholder="用户名" class="layui-input">
</div> </div>
<div class="layui-form-item mima" id="passwordBox" v-if="loginType === 'zhanghaomima'"> <div class="layui-form-item mima" id="passwordBox" >
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label> <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label>
<input type="password" v-model="formData.password" id="password" name="password" lay-verify="password" placeholder="密码" class="layui-input"> <input type="password" v-model="formData.password" id="password" name="password" lay-verify="password" placeholder="密码" class="layui-input">
</div> </div>
<div class="yzmbox1" @click="getLoginVerificationCode" v-if="loginType === 'yanzhengma'"> <div class="yzmbox1" @click="getLoginVerificationCode">
<span id="yzm11">点击获取验证码</span> <span id="yzm11">点击获取验证码</span>
</div> </div>
<div class="yzmtx1" v-if="loginType === 'yanzhengma'"> <div class="yzmtx1">
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="inputyzm11"></label> <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label>
<input type="text" v-model="formData.code" name="code" placeholder="请输入验证码" lay-verify="code" id="inputyzm11"> <input type="text" placeholder="请输入验证码" id="inputyzm11">
</div> </div>
<div class="layui-form-item" id="verificationCodeBox" v-if="pageParams.verificationCode == 'true'" > <div class="layui-form-item" id="verificationCodeBox" v-if="pageParams.verificationCode == 'true'" >
<!-- 验证码 --> <!-- 验证码 -->
@ -523,8 +535,6 @@
el: '#app', el: '#app',
data: { data: {
pageParams: pageParams, pageParams: pageParams,
loginType: 'zhanghaomima',
activeAction: pageParams.loginFormAction,
formData: { formData: {
referToken: pageParams.referToken, referToken: pageParams.referToken,
verificationCode: '', verificationCode: '',
@ -680,15 +690,7 @@
$('#loginForm').submit(); $('#loginForm').submit();
}) })
}, },
loginTypeChange: function(type) {
if(type === 'zhanghaomima') {
this.activeAction = this.pageParams.loginFormAction;
}
if(type === 'yanzhengma') {
this.activeAction = this.pageParams.loginPhoneAction;
}
this.loginType = type;
}
}, },
mounted: function() { mounted: function() {
var self = this; var self = this;
@ -711,11 +713,6 @@
return '密码不能为空'; return '密码不能为空';
} }
}, },
code: function(value, item) {
if(!value) {
return '验证码不能为空';
}
},
verificationCode: function(value, item) { verificationCode: function(value, item) {
if(!value) { if(!value) {
return '验证码不能为空'; return '验证码不能为空';
@ -726,7 +723,6 @@
}) })
// 切换账号密码登录和验证码登录 // 切换账号密码登录和验证码登录
let loginForm = document.querySelector("#loginForm");
let mima = document.querySelector(".mima") let mima = document.querySelector(".mima")
let yzmbox1 = document.querySelector('.yzmbox1') let yzmbox1 = document.querySelector('.yzmbox1')
let yzmtx1 = document.querySelector(".yzmtx1") let yzmtx1 = document.querySelector(".yzmtx1")
@ -745,7 +741,10 @@
span2.style.display = 'none' span2.style.display = 'none'
yzmlongin.style.fontWeight = 400 yzmlongin.style.fontWeight = 400
yzmlongin.style.borderBottom = '0' yzmlongin.style.borderBottom = '0'
mima.style.display = 'block'
bixuan.style.display = 'block' bixuan.style.display = 'block'
yzmtx1.style.display = 'none'
yzmbox1.style.display = 'none'
}) })
// 验证码登录 // 验证码登录
document.querySelector('#yzmlongin').addEventListener('click', function () { document.querySelector('#yzmlongin').addEventListener('click', function () {
@ -755,7 +754,10 @@
span2.style.display = 'block' span2.style.display = 'block'
zhanghaomima.style.fontWeight = 400 zhanghaomima.style.fontWeight = 400
zhanghaomima.style.borderBottom = '0' zhanghaomima.style.borderBottom = '0'
mima.style.display = 'none'
bixuan.style.display = 'none' bixuan.style.display = 'none'
yzmtx1.style.display = 'block'
yzmbox1.style.display = 'block'
}) })
// 点击 忘记密码 去登录 切换div // 点击 忘记密码 去登录 切换div
@ -769,10 +771,14 @@
// 忘记密码 // 忘记密码
document.querySelector('#goChangePassword').addEventListener('click', function () { document.querySelector('#goChangePassword').addEventListener('click', function () {
btnList.style.display = 'none' btnList.style.display = 'none'
change.style.display = 'block' change.style.display = 'block'
dengLu.style.display = 'none' dengLu.style.display = 'none'
changePassword.style.display = 'block' changePassword.style.display = 'block'
}) })
// 去登录 // 去登录