798 lines
30 KiB
HTML
798 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<base th:href="${#request.getContextPath() + '/'}">
|
|
<title th:text="${systemTitle}"></title>
|
|
<meta charset="utf-8">
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
<link rel="icon" type="image/svg" href="assets/favicon.svg"/>
|
|
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
|
|
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css?v=3" media="all">
|
|
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css?v=3" media="all">
|
|
<link rel="stylesheet" href="assets/css/supersized.css?v=3">
|
|
<link rel="stylesheet" href="assets/layuiadmin/style/login.css?v=3" media="all">
|
|
<style>[v-cloak] {display: none;}</style>
|
|
<style th:if="${customLoginForm ne null}" th:utext="${customLoginForm.formCss}"></style>
|
|
<style th:if="${customLoginForm eq null and pageParams.loginBoxPosition eq 'left'}">
|
|
@media screen and (max-width: 1920px) {
|
|
.layadmin-user-login-main {
|
|
right: 68%;
|
|
}
|
|
}
|
|
@media screen and (max-width: 1366px) {
|
|
.layadmin-user-login-main {
|
|
right: 62%;
|
|
}
|
|
}
|
|
</style>
|
|
<style th:if="${customLoginForm ne null and pageParams.loginBoxPosition eq 'left'}" th:utext="${customLoginForm.formLeftCss}"></style>
|
|
<style th:if="${customLoginForm eq null and pageParams.loginBoxPosition eq 'center'}">
|
|
.layadmin-user-login-main {
|
|
left: 50%;
|
|
margin-left: -200px;
|
|
}
|
|
</style>
|
|
<style th:if="${customLoginForm ne null and pageParams.loginBoxPosition eq 'center'}" th:utext="${customLoginForm.formCenterCss}"></style>
|
|
<style th:if="${customLoginForm ne null and pageParams.loginBoxPosition eq 'default'}" th:utext="${customLoginForm.formRightCss}"></style>
|
|
</head>
|
|
|
|
<style>
|
|
#app {
|
|
position: relative;
|
|
/*display: flex;*/
|
|
/*flex-direction: column;*/
|
|
/*width: 100%;*/
|
|
/*height: 100vh;*/
|
|
}
|
|
|
|
.layadmin-user-login-main {
|
|
margin-right: 0;
|
|
margin-top: unset;
|
|
}
|
|
|
|
.nav {
|
|
position: relative;
|
|
/*position: absolute;*/
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 auto;
|
|
/* position: relative; */
|
|
}
|
|
|
|
.sign {
|
|
display: flex;
|
|
/* position: absolute; */
|
|
width: 500px;
|
|
height: 80px;
|
|
}
|
|
|
|
.sign h2 {
|
|
width: 180px;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
text-align: center;
|
|
/* padding: auto 20px auto 50px; */
|
|
font-size: 36px;
|
|
margin: auto 20px auto 50px;
|
|
}
|
|
|
|
.sign p {
|
|
width: 180px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
font-size: 14px;
|
|
margin: auto 0;
|
|
/* height: 20px; */
|
|
padding: 0 25px;
|
|
border-left: 2px solid rgba(0, 0, 0, .2);
|
|
}
|
|
|
|
.go-page {
|
|
display: flex;
|
|
justify-content: end;
|
|
/* position: absolute; */
|
|
width: 260px;
|
|
height: 80px;
|
|
/* border: 2px solid red; */
|
|
font-size: 16px;
|
|
/* right: 0; */
|
|
}
|
|
|
|
.go-page #register {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
margin: auto 0;
|
|
margin-right: 20px;
|
|
padding: 0 20px;
|
|
border-radius: 20px;
|
|
/* border: none; */
|
|
background-color: rgba(255, 255, 255, .4);
|
|
color: #42210B;
|
|
}
|
|
|
|
.go-page #back-homepage {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
margin: auto 0;
|
|
margin-right: 40px;
|
|
padding: 0 20px;
|
|
border-radius: 20px;
|
|
border: none;
|
|
/* background-color: rgba(255, 255, 255, .3); */
|
|
background-color: #42210B;
|
|
color: #FFF;
|
|
}
|
|
|
|
#register:hover {
|
|
background-color: #42210B;
|
|
color: #FFF;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#back-homepage:hover {
|
|
background-color: #332817;
|
|
color: #FFF;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
#loginBox {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
/*position: relative;*/
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(0,160px);
|
|
/*margin-top: -250px;*/
|
|
flex-direction: column;
|
|
width: 400px;
|
|
height: 500px;
|
|
/*margin-top: 150px;*/
|
|
background-color: #fff;
|
|
border-radius: 15px;
|
|
box-shadow: 0 12px 12px rgba(0,0,0,.5),0 -12px -12px rgba(0,0,0,.5);
|
|
}
|
|
|
|
#loginBox .btnlist {
|
|
display: flex;
|
|
flex-direction: row;
|
|
/*display: none;*/
|
|
width: 330px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
margin: 20px auto;
|
|
/* border: 1px solid red; */
|
|
}
|
|
#loginBox #change {
|
|
display: none;
|
|
width: 330px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
#loginBox #change h3 {
|
|
width: 80px;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
/* margin-right: 30px; */
|
|
border: none;
|
|
/*border-bottom: 5px solid #fda633;*/
|
|
background-color: transparent;
|
|
cursor: pointer;
|
|
}
|
|
#loginBox #change span {
|
|
display: block;
|
|
width: 40px;
|
|
height: 5px;
|
|
margin-left: 15px;
|
|
background-color: #fda633;
|
|
}
|
|
|
|
#loginBox .btnlist button {
|
|
font-size: 18px;
|
|
margin-right: 30px;
|
|
border: none;
|
|
/*border-bottom: 5px solid #fda633;*/
|
|
margin-bottom: 5px;
|
|
background-color: transparent;
|
|
cursor: pointer;
|
|
}
|
|
#loginBox .btnlist div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
}
|
|
#loginBox .btnlist div:first-child span {
|
|
display: block;
|
|
width: 40px;
|
|
height: 5px;
|
|
margin-left: 15px;
|
|
background-color: #fda633;
|
|
|
|
}
|
|
#loginBox .btnlist div:last-child span {
|
|
display: none;
|
|
width: 40px;
|
|
height: 5px;
|
|
margin-left: 20px;
|
|
background-color: #fda633;
|
|
|
|
}
|
|
.forget-username-password {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
line-height: 18px;
|
|
color: #6d6d6d;
|
|
}
|
|
#rememberPassword a:hover {
|
|
color: #0080ff;
|
|
}
|
|
.login-btn {
|
|
margin: 80px auto 20px auto;
|
|
background-color: #fda633;
|
|
}
|
|
|
|
.go {
|
|
/*display: flex;*/
|
|
/*justify-content: space-between;*/
|
|
/*align-content: center;*/
|
|
height: 20px;
|
|
line-height: 20px;
|
|
margin: 15px auto;
|
|
text-align: end;
|
|
}
|
|
|
|
.go p {
|
|
height: 20px;
|
|
line-height: 20px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.go p a {
|
|
color: #1d8eff;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.go p a:hover {
|
|
color: #0080ff;
|
|
}
|
|
|
|
.change-password #goLogin {
|
|
float: right;
|
|
font-size: 14px;
|
|
font-weight: 200;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.change-password #goLogin:hover {
|
|
font-weight: 500;
|
|
color: #0080ff;
|
|
}
|
|
.bixuan {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
/* align-content: center;
|
|
flex-wrap: wrap;
|
|
align-content: center; */
|
|
position: relative;
|
|
height: 38px;
|
|
line-height: 38px;
|
|
}
|
|
#loginBox .denglu .yzmtx1 {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
width: 100%;
|
|
height: 38px;
|
|
line-height: 38px;
|
|
border: 1px solid #D2D2D2!important;
|
|
}
|
|
#loginBox .denglu .yzmtx1 input {
|
|
position: absolute;
|
|
right: 0;
|
|
width: 322px;
|
|
height: 38px;
|
|
font-size: 14px;
|
|
background-color: #FFF;
|
|
color: #666666;
|
|
border: none;
|
|
}
|
|
#loginBox .denglu .yzmbox1 {
|
|
width: 100%;
|
|
height: 38px;
|
|
line-height: 38px;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: #D2D2D2!important;
|
|
border-radius: 2px;
|
|
font-size: 14px;
|
|
background-color: #FAFAFA;
|
|
color: #666666;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.sign a {
|
|
width: 260px;
|
|
height: 46px;
|
|
margin-left: 50px;
|
|
margin-top: 17px;
|
|
}
|
|
.sign a img{
|
|
width: 260px;
|
|
height: 46px;
|
|
}
|
|
#loginBox .change-password {
|
|
display: none;
|
|
}
|
|
#loginBox .change-password ul li {
|
|
display: block;
|
|
position: relative;
|
|
height: 38px;
|
|
margin-bottom: 20px;
|
|
}
|
|
#loginBox .change-password ul li input {
|
|
position: absolute;
|
|
right: 0;
|
|
width: 322px;
|
|
height: 38px;
|
|
font-size: 14px;
|
|
background-color: #FFF;
|
|
color: #666666;
|
|
border: none;
|
|
}
|
|
|
|
#loginBox .change-password ul li {
|
|
position: relative;
|
|
border: 1px solid #D2D2D2!important;
|
|
}
|
|
#loginBox .change-password .yzmbox {
|
|
width: 100%;
|
|
height: 38px;
|
|
line-height: 38px;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: #D2D2D2!important;
|
|
border-radius: 2px;
|
|
font-size: 14px;
|
|
background-color: #FAFAFA;
|
|
color: #666666;
|
|
text-align: center;
|
|
}
|
|
#loginBox .denglu .yzmbox1:hover,
|
|
#loginBox .change-password .yzmbox:hover {
|
|
cursor: pointer;
|
|
/*color: #333;*/
|
|
font-weight: 550;
|
|
-webkit-box-shadow: 0 0 10px #0CC;
|
|
-moz-box-shadow: 0 0 10px #0CC;
|
|
box-shadow: 0 0 10px #0CC;
|
|
}
|
|
#confirmNewPassword {
|
|
display: block;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
margin: 50px auto 20px auto;
|
|
font-size: 16px;
|
|
border-radius: 2px;
|
|
background-color: #fda633;
|
|
color: #FFF;
|
|
}
|
|
/*#loginBox #loginFormBox #loginForm .layui-form-item:focus {*/
|
|
/* border: 1px solid #fa911e;*/
|
|
/*}*/
|
|
/*#password:focus {*/
|
|
/* border: 1px solid #fa911e;*/
|
|
/*}*/
|
|
</style>
|
|
|
|
<body>
|
|
<div id="app" v-cloak>
|
|
<div v-cloak th:if="${customLoginForm ne null}" th:utext="${customLoginForm.formHtml}"></div>
|
|
<div v-cloak th:if="${customLoginForm eq null}">
|
|
<div class="nav">
|
|
<div class="sign">
|
|
<a>
|
|
<img src="assets/images/headicon1.png" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="go-page">
|
|
<a id="register" th:href="${ HomeServerUrl + 'Register.html'}">注册</a>
|
|
<a id="back-homepage" th:href="${ HomeServerUrl }">返回首页</a>
|
|
</div>
|
|
</div>
|
|
<div id="loginBox" class="layadmin-user-login-main">
|
|
<div class="btnlist">
|
|
<div>
|
|
<button id="zhanghaomima" @click="loginTypeChange('zhanghaomima')">账号密码</button>
|
|
<span class="span1"></span>
|
|
</div>
|
|
<div>
|
|
<button id="yzmlongin" @click="loginTypeChange('yanzhengma')">验证码登录</button>
|
|
<span class="span2"></span>
|
|
</div>
|
|
|
|
</div>
|
|
<div id="change">
|
|
<h3 id="changeCode">修改密码</h3>
|
|
<span></span>
|
|
</div>
|
|
<div class="layadmin-user-login-box layadmin-user-login-header">
|
|
<img class="system-logo" :src="'route/file/download/true/'+ pageParams.systemLogo" v-if="pageParams.systemLogo">
|
|
<div :class="{'system-logo-title': pageParams.systemLogo}">
|
|
<h2 :style="{'font-size': (pageParams.systemTitleSize ? pageParams.systemTitleSize : 26) +'px'}">{{pageParams.systemTitle}}</h2>
|
|
<p :style="{'font-size': (pageParams.systemSubTitleSize ? pageParams.systemSubTitleSize : 16) +'px'}">{{pageParams.systemSubTitle}}</p>
|
|
</div>
|
|
</div>
|
|
<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">
|
|
<input type="hidden" name="referToken" v-model="formData.referToken"/>
|
|
<div class="layui-form-item">
|
|
<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">
|
|
</div>
|
|
<div class="layui-form-item mima" id="passwordBox" v-if="loginType === 'zhanghaomima'">
|
|
<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">
|
|
</div>
|
|
<div class="yzmbox1" @click="getLoginVerificationCode" v-if="loginType === 'yanzhengma'">
|
|
<span id="yzm11">点击获取验证码</span>
|
|
</div>
|
|
<div class="yzmtx1" v-if="loginType === 'yanzhengma'">
|
|
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="inputyzm11"></label>
|
|
<input type="text" v-model="formData.code" name="code" placeholder="请输入验证码" lay-verify="code" id="inputyzm11">
|
|
</div>
|
|
<div class="layui-form-item" id="verificationCodeBox" v-if="loginType === 'zhanghaomima' && pageParams.verificationCode == 'true'" >
|
|
<!-- 验证码 -->
|
|
<div class="layui-row">
|
|
<div class="layui-col-xs7">
|
|
<label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="verificationCode"></label>
|
|
<input type="text" v-model="formData.verificationCode" id="verificationCode" name="verificationCode" lay-verify="verificationCode" placeholder="图形验证码" class="layui-input">
|
|
</div>
|
|
<div class="layui-col-xs5">
|
|
<div style="margin-left: 10px;">
|
|
<img src="oauth/verification-code/png" class="layadmin-user-login-codeimg" @click="refreshVerificationCode($event)">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item remember-password login-btn-up bixuan" id="rememberPassword">
|
|
<input type="checkbox" v-model="formData.remember" name="remember" lay-skin="primary" title="记住密码" lay-filter="rememberFilter">
|
|
<a href="javascript:void(0)" class="forget-username-password" id="goChangePassword">忘记密码?</a>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<button type="submit" class="layui-btn layui-btn-fluid login-btn" lay-submit>登 录</button>
|
|
</div>
|
|
<div class="go">
|
|
<p>没有账号？<a th:href="${ HomeServerUrl + 'Register.html'}">立即注册</a></p>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- 修改密码 -->
|
|
<form class="change-password">
|
|
<ul>
|
|
<li class="zhanghao">
|
|
<label class="layadmin-user-login-icon layui-icon layui-icon-username" for="username"></label>
|
|
<input type="text" placeholder="手机号" id="phone">
|
|
</li>
|
|
<li class="yzmbox">
|
|
<span id="yzm" @click="getLoginVerificationCode2">点击获取验证码</span>
|
|
</li>
|
|
<li class="yzmtx">
|
|
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label>
|
|
<input type="text" placeholder="请输入验证码" id="inputyzm">
|
|
</li>
|
|
<li class="newPassword1">
|
|
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label>
|
|
<input type="text" placeholder="请输入新密码(8~16位)" id="newPassword">
|
|
</li>
|
|
|
|
</ul>
|
|
<a id="confirmNewPassword" href="javascript:void(0)" @click="confirmNewPassword">确定</a>
|
|
<a id="goLogin" href="javascript:void(0)">去登录</a>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="layui-trans layadmin-user-login-footer footer-text">
|
|
<p v-if="pageParams.copyRightYear"><span>{{'© '+ pageParams.copyRightYear +' '}}</span><a href="javascript:void(0);" v-if="pageParams.copyleft">{{pageParams.copyleft}}</a></p>
|
|
<p v-if="pageParams.officialUrl">
|
|
<span><a :href="pageParams.officialUrl" target="_blank">前往官网</a></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="assets/js/vue.min.js"></script>
|
|
<script type="text/javascript" src="assets/layuiadmin/layui/layui.js"></script>
|
|
<script type="text/javascript" th:inline="javascript">
|
|
layui.config({
|
|
base: 'assets/layuiadmin/'
|
|
}).extend({
|
|
index: 'lib/index'
|
|
}).use(['index', 'form', 'cookie', 'md5', 'dialog', 'base64', 'supersized', 'common', 'ftukey', 'restajax'], function () {
|
|
var $ = layui.$;
|
|
var form = layui.form;
|
|
var layer = layui.layer;
|
|
var cookie = layui.cookie;
|
|
var md5 = layui.md5;
|
|
var base64 = layui.base64;
|
|
var restAjax = layui.restajax;
|
|
var dialog = layui.dialog;
|
|
|
|
var pageParams = [[${pageParams}]];
|
|
new Vue({
|
|
el: '#app',
|
|
data: {
|
|
pageParams: pageParams,
|
|
loginType: 'zhanghaomima',
|
|
activeAction: pageParams.loginFormAction,
|
|
formData: {
|
|
referToken: pageParams.referToken,
|
|
verificationCode: '',
|
|
username: pageParams.loginUsername,
|
|
password: '',
|
|
remember: false
|
|
}
|
|
},
|
|
methods: {
|
|
confirmNewPassword: function() {
|
|
var password = md5(md5(md5($('#newPassword').val())));
|
|
var data = {
|
|
"newPassword": password,
|
|
"phone": $('#phone').val(),
|
|
"verificationCode": $('#inputyzm').val()
|
|
};
|
|
var loadLayerIndex;
|
|
restAjax.put(restAjax.path('app/user/forget-phone-password', []), data, null, function(code, data) {
|
|
layer.msg("密码修改成功");
|
|
|
|
let btnList = document.querySelector('.btnlist')
|
|
let change = document.querySelector('#change')
|
|
let dengLu = document.querySelector('.denglu')
|
|
let changePassword = document.querySelector('.change-password')
|
|
btnList.style.display = 'block'
|
|
change.style.display = 'none'
|
|
dengLu.style.display = 'block'
|
|
changePassword.style.display = 'none'
|
|
}, function(code, data) {
|
|
dialog.msg(data.msg);
|
|
}, function() {
|
|
loadLayerIndex = dialog.msg('正在提交修改信息...', {icon: 16, time: 0, shade: 0.3});
|
|
}, function() {
|
|
dialog.close(loadLayerIndex);
|
|
});
|
|
},
|
|
getLoginVerificationCode2: function() {
|
|
let phoneVal = $("#phone").val();
|
|
if (!phoneVal) {
|
|
layer.msg("手机号不能为空");
|
|
return;
|
|
}
|
|
$.ajax({
|
|
type: "GET",
|
|
dataType: 'json',
|
|
url: "api/verify/code/send" + phoneVal,
|
|
success: function (msg) {
|
|
layer.msg("验证码已发送");
|
|
},
|
|
error: function (data) {
|
|
console.log(data);
|
|
if (data.responseJSON.msg) {
|
|
layer.msg(data.responseJSON.msg);
|
|
}else{
|
|
layer.msg("验证码发送失败");
|
|
}
|
|
}
|
|
});
|
|
},
|
|
getLoginVerificationCode: function() {
|
|
let phoneVal = $("#username").val();
|
|
if (!phoneVal) {
|
|
layer.msg("用户名不能为空");
|
|
return;
|
|
}
|
|
$.ajax({
|
|
type: "GET",
|
|
dataType: 'json',
|
|
url: "api/verify/code/send/" + phoneVal,
|
|
success: function (msg) {
|
|
layer.msg("验证码已发送");
|
|
},
|
|
error: function (data) {
|
|
if (data.responseJSON.msg) {
|
|
layer.msg(data.responseJSON.msg);
|
|
}else{
|
|
layer.msg("验证码发送失败");
|
|
}
|
|
}
|
|
});
|
|
},
|
|
showErrorMessage: function() {
|
|
var self = this;
|
|
if(self.pageParams.errorMessage) {
|
|
layer.msg(self.pageParams.errorMessage);
|
|
}
|
|
},
|
|
initBackground: function() {
|
|
var self = this;
|
|
var loginBackgroundImages = self.pageParams.loginBackgroundImages;
|
|
var photos = [];
|
|
if(loginBackgroundImages) {
|
|
var loginBackgroundImageArray = loginBackgroundImages.split(',');
|
|
for(var i = 0, item = loginBackgroundImageArray[i]; item = loginBackgroundImageArray[i++];) {
|
|
photos.push({
|
|
image: 'route/file/download/true/'+ item
|
|
})
|
|
}
|
|
} else {
|
|
for(var i = 1; i <= 9; i++) {
|
|
photos.push({
|
|
image: 'assets/images/backgrounds/'+ i +'.jpg'
|
|
})
|
|
}
|
|
}
|
|
$.supersized({
|
|
slide_interval : 4000, // Length between transitions
|
|
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
|
|
transition_speed : 1000, // Speed of transition
|
|
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
|
|
// Size & Position
|
|
min_width : 0, // Min width allowed (in pixels)
|
|
min_height : 0, // Min height allowed (in pixels)
|
|
vertical_center : 1, // Vertically center background
|
|
horizontal_center : 1, // Horizontally center background
|
|
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
|
|
fit_portrait : 1, // Portrait images will not exceed browser height
|
|
fit_landscape : 0, // Landscape images will not exceed browser width
|
|
// Components
|
|
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
|
|
slides : photos
|
|
});
|
|
},
|
|
// 刷新验证码
|
|
refreshVerificationCode: function(event) {
|
|
event.target.src = event.target.src + '?t='+ new Date().getTime();
|
|
},
|
|
// 记住我
|
|
rememberMe: function() {
|
|
var self = this;
|
|
var rememberMe = cookie.getCookie('rememberMe');
|
|
if(rememberMe) {
|
|
var rememberMes = base64.decode(rememberMe).split('_$WG$_');
|
|
self.formData.username = rememberMes[0];
|
|
self.formData.password = rememberMes[1];
|
|
self.formData.remember = true;
|
|
}
|
|
self.$nextTick(function() {
|
|
form.render();
|
|
});
|
|
},
|
|
// 提交表单
|
|
submitForm: function() {
|
|
var self = this;
|
|
if(self.formData.remember) {
|
|
cookie.setCookie('rememberMe', base64.encode(self.formData.username +'_$WG$_'+ self.formData.password), 30);
|
|
} else {
|
|
cookie.setCookie('rememberMe', '', 0);
|
|
}
|
|
layer.msg('正在登录，请稍后...', {icon: 16, shade: 0.1, time: 0});
|
|
self.formData.password = md5(md5(md5(self.formData.password)));
|
|
self.$nextTick(function() {
|
|
$('#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() {
|
|
var self = this;
|
|
self.showErrorMessage();
|
|
self.initBackground();
|
|
self.rememberMe();
|
|
// 复选框勾选事件
|
|
form.on('checkbox(rememberFilter)', function(data) {
|
|
self.formData.remember = data.elem.checked;
|
|
});
|
|
// 保单验证
|
|
form.verify({
|
|
username: function(value, item) {
|
|
if(!value){
|
|
return '用户名不能为空';
|
|
}
|
|
},
|
|
password: function(value, item) {
|
|
if(!value) {
|
|
return '密码不能为空';
|
|
}
|
|
},
|
|
code: function(value, item) {
|
|
if(!value) {
|
|
return '验证码不能为空';
|
|
}
|
|
},
|
|
verificationCode: function(value, item) {
|
|
if(!value) {
|
|
return '验证码不能为空';
|
|
}
|
|
}
|
|
});
|
|
}
|
|
})
|
|
|
|
// 切换账号密码登录和验证码登录
|
|
let loginForm = document.querySelector("#loginForm");
|
|
let mima = document.querySelector(".mima")
|
|
let yzmbox1 = document.querySelector('.yzmbox1')
|
|
let yzmtx1 = document.querySelector(".yzmtx1")
|
|
let bixuan = document.querySelector('.bixuan')
|
|
let zhanghaomima = document.querySelector('#zhanghaomima')
|
|
let yzmlongin = document.querySelector('#yzmlongin')
|
|
let span1 = document.querySelector('.span1')
|
|
let span2 = document.querySelector('.span2')
|
|
|
|
// // 账号密码登录
|
|
document.querySelector('#zhanghaomima').addEventListener('click', function () {
|
|
// alert(11)
|
|
zhanghaomima.style.fontWeight = 700
|
|
// zhanghaomima.style.borderBottom = '5px solid #fda633'
|
|
span1.style.display = 'block'
|
|
span2.style.display = 'none'
|
|
yzmlongin.style.fontWeight = 400
|
|
yzmlongin.style.borderBottom = '0'
|
|
bixuan.style.display = 'block'
|
|
})
|
|
// 验证码登录
|
|
document.querySelector('#yzmlongin').addEventListener('click', function () {
|
|
yzmlongin.style.fontWeight = 700
|
|
// yzmlongin.style.borderBottom = '5px solid #fda633'
|
|
span1.style.display = 'none'
|
|
span2.style.display = 'block'
|
|
zhanghaomima.style.fontWeight = 400
|
|
zhanghaomima.style.borderBottom = '0'
|
|
bixuan.style.display = 'none'
|
|
})
|
|
|
|
// 点击 忘记密码 去登录 切换div
|
|
let goChangePassword = document.querySelector('#goChangePassword')
|
|
let btnList = document.querySelector('.btnlist')
|
|
let change = document.querySelector('#change')
|
|
let dengLu = document.querySelector('.denglu')
|
|
let changePassword = document.querySelector('.change-password')
|
|
|
|
// let goLogin = document.querySelector('#goLogin')
|
|
|
|
// 忘记密码
|
|
document.querySelector('#goChangePassword').addEventListener('click', function () {
|
|
btnList.style.display = 'none'
|
|
change.style.display = 'block'
|
|
dengLu.style.display = 'none'
|
|
changePassword.style.display = 'block'
|
|
})
|
|
|
|
// 去登录
|
|
document.querySelector('#goLogin').addEventListener('click', function () {
|
|
btnList.style.display = 'flex'
|
|
change.style.display = 'none'
|
|
dengLu.style.display = 'block'
|
|
changePassword.style.display = 'none'
|
|
})
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |