You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
583 lines
16 KiB
583 lines
16 KiB
2 years ago
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<title>${app.appName}</title>
|
||
|
|
<#include "/include/head-file.ftl"/>
|
||
|
|
<link rel="stylesheet" type="text/css" href="${base}/static/plugins/TextInputEffects/css/normalize.css" />
|
||
|
|
<link rel="stylesheet" type="text/css" href="${base}/static/plugins/TextInputEffects/css/set1.css" />
|
||
|
|
<style>
|
||
|
|
[v-cloak]{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="custom-body">
|
||
|
|
<div id="app" v-cloak>
|
||
|
|
<!--大容器开始-->
|
||
|
|
<div class="class-1" @keydown.13='login'>
|
||
|
|
|
||
|
|
<!--大容器开始-->
|
||
|
|
<div class="class-2" style="position: absolute">
|
||
|
|
<!--大容器开始-->
|
||
|
|
<div class="class-3" style="position: relative">
|
||
|
|
<!--图片开始-->
|
||
|
|
<img
|
||
|
|
src="${base}/static/images/login-banner.png"
|
||
|
|
class="class-4" />
|
||
|
|
|
||
|
|
<!--图片结束-->
|
||
|
|
</div>
|
||
|
|
<!--大容器结束-->
|
||
|
|
<!--大容器开始-->
|
||
|
|
<div class="class-5">
|
||
|
|
<!--小容器开始-->
|
||
|
|
<div class="class-6" >
|
||
|
|
<!--文本开始-->
|
||
|
|
<div class="class-7" style="position: relative">
|
||
|
|
<div>登录</div>
|
||
|
|
</div>
|
||
|
|
<!--文本结束-->
|
||
|
|
<!--小容器开始-->
|
||
|
|
<el-form :model="form" ref="form" :rules="rules">
|
||
|
|
<div class="class-8" >
|
||
|
|
<el-form-item prop="managerName">
|
||
|
|
<span class="input input--hoshi">
|
||
|
|
<input v-model="form.managerName" class="input__field input__field--hoshi" type="text" id="input-name" />
|
||
|
|
<label class="input__label input__label--hoshi input__label--hoshi-color-1" for="input-name">
|
||
|
|
<span class="input__label-content input__label-content--hoshi">账号</span>
|
||
|
|
</label>
|
||
|
|
</span>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<!--小容器结束-->
|
||
|
|
<!--小容器开始-->
|
||
|
|
<div class="class-13" >
|
||
|
|
<!--文本开始-->
|
||
|
|
<el-form-item prop="managerPassword">
|
||
|
|
<span class="input input--hoshi">
|
||
|
|
<input v-model="form.managerPassword" class="input__field input__field--hoshi" type="password" id="input-password" />
|
||
|
|
<label class="input__label input__label--hoshi input__label--hoshi-color-1" for="input-password">
|
||
|
|
<span class="input__label-content input__label-content--hoshi">密码</span>
|
||
|
|
</label>
|
||
|
|
</span>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<!--小容器结束-->
|
||
|
|
<!--小容器开始-->
|
||
|
|
|
||
|
|
<!--小容器结束-->
|
||
|
|
|
||
|
|
<!--小容器开始-->
|
||
|
|
<div class="class-25" >
|
||
|
|
</div>
|
||
|
|
<!--小容器结束-->
|
||
|
|
<!--按钮开始-->
|
||
|
|
<el-button @click="login" type="primary" :loading="loading"
|
||
|
|
class="class-26" style="width: 100%;height: 40px">
|
||
|
|
{{loading?'登录中':'登录'}}
|
||
|
|
</el-button>
|
||
|
|
<!--按钮结束-->
|
||
|
|
<!--小容器开始-->
|
||
|
|
<div class="class-27" >
|
||
|
|
<el-checkbox v-model="form.rememberMe">记住我</el-checkbox>
|
||
|
|
<!--文本结束-->
|
||
|
|
</div>
|
||
|
|
</el-form>
|
||
|
|
<!--小容器结束-->
|
||
|
|
</div>
|
||
|
|
<!--小容器结束-->
|
||
|
|
</div>
|
||
|
|
<!--大容器结束-->
|
||
|
|
</div>
|
||
|
|
<!--大容器结束-->
|
||
|
|
</div>
|
||
|
|
<!--大容器结束-->
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<script src="${base}/static/plugins/TextInputEffects/js/classie.js"></script>
|
||
|
|
<script>
|
||
|
|
var app = new Vue({
|
||
|
|
el: '#app',
|
||
|
|
watch:{
|
||
|
|
|
||
|
|
},
|
||
|
|
data: function () {
|
||
|
|
return {
|
||
|
|
base: ms.base,
|
||
|
|
loading: false,
|
||
|
|
form: {
|
||
|
|
managerName: '',
|
||
|
|
managerPassword: '',
|
||
|
|
rememberMe: true,
|
||
|
|
},
|
||
|
|
rules: {
|
||
|
|
managerName: [
|
||
|
|
{required: true, message: '请输入账号', trigger: 'blur'},
|
||
|
|
{min: 1, max: 30, message: '长度不能超过30个字符', trigger: 'change'}
|
||
|
|
],
|
||
|
|
managerPassword: [
|
||
|
|
{required: true, message: '请输入密码', trigger: 'blur'},
|
||
|
|
{min: 1, max: 30, message: '长度不能超过30个字符', trigger: 'change'}
|
||
|
|
],
|
||
|
|
},
|
||
|
|
|
||
|
|
verifCode: ms.manager + "/code.do?t=" + new Date().getTime()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
//登录
|
||
|
|
login:function () {
|
||
|
|
var that = this;
|
||
|
|
that.$refs.form.validate(function(valid){
|
||
|
|
if (valid) {
|
||
|
|
that.loading = true;
|
||
|
|
ms.http.post(ms.manager + "/login.do", {
|
||
|
|
managerName:that.form.managerName,
|
||
|
|
managerPassword:that.form.managerPassword,
|
||
|
|
rememberMe:that.form.rememberMe
|
||
|
|
}).then(function (res) {
|
||
|
|
if(res.result){
|
||
|
|
// location.href= ms.manager + "/index.do";
|
||
|
|
ms.util.openSystemUrl("/index.do");
|
||
|
|
}else {
|
||
|
|
that.$notify({
|
||
|
|
title: '失败',
|
||
|
|
message: res.msg,
|
||
|
|
type: 'error'
|
||
|
|
});
|
||
|
|
that.code();
|
||
|
|
that.loading = false;
|
||
|
|
}
|
||
|
|
}).catch(function () {
|
||
|
|
that.loading = false;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//获取验证码
|
||
|
|
code:function(){
|
||
|
|
this.verifCode = ms.web + "/code.do?t=" + new Date().getTime();
|
||
|
|
},
|
||
|
|
//初始
|
||
|
|
initial:function(){
|
||
|
|
this.form.managerName = localStorage.getItem('managerName');
|
||
|
|
this.form.managerPassword = localStorage.getItem('managerPassword');
|
||
|
|
top.location != self.location?(top.location = self.location):'';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created:function(){
|
||
|
|
this.code();
|
||
|
|
this.initial();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
(function() {
|
||
|
|
// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
|
||
|
|
if (!String.prototype.trim) {
|
||
|
|
(function() {
|
||
|
|
// Make sure we trim BOM and NBSP
|
||
|
|
var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
|
||
|
|
String.prototype.trim = function() {
|
||
|
|
return this.replace(rtrim, '');
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
}
|
||
|
|
|
||
|
|
[].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
|
||
|
|
// in case the input is already filled..
|
||
|
|
if( inputEl.value.trim() !== '' ) {
|
||
|
|
classie.add( inputEl.parentNode, 'input--filled' );
|
||
|
|
}
|
||
|
|
|
||
|
|
// events:
|
||
|
|
inputEl.addEventListener( 'focus', onInputFocus );
|
||
|
|
inputEl.addEventListener( 'blur', onInputBlur );
|
||
|
|
} );
|
||
|
|
|
||
|
|
function onInputFocus( ev ) {
|
||
|
|
classie.add( ev.target.parentNode, 'input--filled' );
|
||
|
|
}
|
||
|
|
|
||
|
|
function onInputBlur( ev ) {
|
||
|
|
if( ev.target.value.trim() === '' ) {
|
||
|
|
classie.remove( ev.target.parentNode, 'input--filled' );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.el-form-item{
|
||
|
|
margin-bottom: 0px;
|
||
|
|
}
|
||
|
|
.el-form-item__content{
|
||
|
|
line-height: initial;
|
||
|
|
}
|
||
|
|
.custom-body {
|
||
|
|
}
|
||
|
|
.class-1
|
||
|
|
{
|
||
|
|
color:#333333;
|
||
|
|
background-image:url(${base}/static/images/login-bg.jpg);
|
||
|
|
outline:none;
|
||
|
|
outline-offset:-1px;
|
||
|
|
background-size:cover;
|
||
|
|
background-position:center;
|
||
|
|
height:100%;
|
||
|
|
max-width:100%;
|
||
|
|
align-items:center;
|
||
|
|
flex-direction:row;
|
||
|
|
display:flex;
|
||
|
|
justify-content:center;
|
||
|
|
animation-duration:1s;
|
||
|
|
width:100%;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
}
|
||
|
|
.class-2
|
||
|
|
{
|
||
|
|
box-shadow:0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
|
|
color:#333333;
|
||
|
|
outline:none;
|
||
|
|
outline-offset:-1px;
|
||
|
|
height:540px;
|
||
|
|
max-width:100%;
|
||
|
|
background-color:rgba(255, 255, 255, 1);
|
||
|
|
flex-direction:row;
|
||
|
|
display:flex;
|
||
|
|
animation-duration:1s;
|
||
|
|
border-radius:12px;
|
||
|
|
width:1000px;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
}
|
||
|
|
.class-3
|
||
|
|
{
|
||
|
|
color:#333333;
|
||
|
|
outline:none;
|
||
|
|
outline-offset:-1px;
|
||
|
|
height:100%;
|
||
|
|
max-width:100%;
|
||
|
|
align-items:flex-start;
|
||
|
|
flex-direction:row;
|
||
|
|
display:flex;
|
||
|
|
justify-content:flex-start;
|
||
|
|
animation-duration:1s;
|
||
|
|
width:460px;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
}
|
||
|
|
.class-4
|
||
|
|
{
|
||
|
|
height:100%;
|
||
|
|
animation-duration:1s;
|
||
|
|
width:100%;
|
||
|
|
}
|
||
|
|
.class-5
|
||
|
|
{
|
||
|
|
color:#333333;
|
||
|
|
outline:none;
|
||
|
|
padding-bottom:20px;
|
||
|
|
outline-offset:-1px;
|
||
|
|
flex:1;
|
||
|
|
padding-top:20px;
|
||
|
|
height:100%;
|
||
|
|
max-width:100%;
|
||
|
|
align-items:center;
|
||
|
|
flex-direction:column;
|
||
|
|
display:flex;
|
||
|
|
justify-content:flex-start;
|
||
|
|
animation-duration:1s;
|
||
|
|
width:200px;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
}
|
||
|
|
.class-6
|
||
|
|
{
|
||
|
|
color:#333333;
|
||
|
|
outline:none;
|
||
|
|
outline-offset:-1px;
|
||
|
|
max-width:100%;
|
||
|
|
flex-direction:column;
|
||
|
|
display:flex;
|
||
|
|
animation-duration:1s;
|
||
|
|
width:330px;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
margin-top:20px;
|
||
|
|
}
|
||
|
|
.class-7
|
||
|
|
{
|
||
|
|
color:#333333;
|
||
|
|
word-wrap:break-word;
|
||
|
|
display:inline-block;
|
||
|
|
animation-duration:1s;
|
||
|
|
font-size:36px;
|
||
|
|
line-height:1.4;
|
||
|
|
margin-bottom:20px;
|
||
|
|
}
|
||
|
|
.class-8
|
||
|
|
{
|
||
|
|
color:#333333;
|
||
|
|
outline:none;
|
||
|
|
outline-offset:-1px;
|
||
|
|
height:80px;
|
||
|
|
max-width:100%;
|
||
|
|
flex-direction:column;
|
||
|
|
display:flex;
|
||
|
|
justify-content:flex-end;
|
||
|
|
animation-duration:1s;
|
||
|
|
width:100%;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
}
|
||
|
|
.class-9
|
||
|
|
{
|
||
|
|
color:#BBBBBB;
|
||
|
|
word-wrap:break-word;
|
||
|
|
display:inline-block;
|
||
|
|
animation-duration:1s;
|
||
|
|
font-size:12px;
|
||
|
|
line-height:1.4;
|
||
|
|
}
|
||
|
|
.class-10
|
||
|
|
{
|
||
|
|
color:#333333;
|
||
|
|
outline:none;
|
||
|
|
outline-offset:-1px;
|
||
|
|
height:40px;
|
||
|
|
max-width:100%;
|
||
|
|
align-items:center;
|
||
|
|
flex-direction:row;
|
||
|
|
display:flex;
|
||
|
|
animation-duration:1s;
|
||
|
|
width:100%;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
}
|
||
|
|
.class-11
|
||
|
|
{
|
||
|
|
color:#333333;
|
||
|
|
word-wrap:break-word;
|
||
|
|
display:inline-block;
|
||
|
|
animation-duration:1s;
|
||
|
|
font-size:14px;
|
||
|
|
line-height:1.4;
|
||
|
|
}
|
||
|
|
.class-12
|
||
|
|
{
|
||
|
|
margin-right:auto;
|
||
|
|
animation-duration:1s;
|
||
|
|
background-color:#eee;
|
||
|
|
border-radius:1px;
|
||
|
|
width:100%;
|
||
|
|
height:1px;
|
||
|
|
margin-left:auto;
|
||
|
|
}
|
||
|
|
.class-13
|
||
|
|
{
|
||
|
|
color:#333333;
|
||
|
|
outline:none;
|
||
|
|
outline-offset:-1px;
|
||
|
|
height:80px;
|
||
|
|
max-width:100%;
|
||
|
|
flex-direction:column;
|
||
|
|
display:flex;
|
||
|
|
justify-content:flex-end;
|
||
|
|
animation-duration:1s;
|
||
|
|
width:100%;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
}
|
||
|
|
.class-14
|
||
|
|
{
|
||
|
|
color:#BBBBBB;
|
||
|
|
word-wrap:break-word;
|
||
|
|
padding-bottom:10px;
|
||
|
|
display:inline-block;
|
||
|
|
animation-duration:1s;
|
||
|
|
font-size:14px;
|
||
|
|
line-height:1.4;
|
||
|
|
}
|
||
|
|
.class-15
|
||
|
|
{
|
||
|
|
margin-right:auto;
|
||
|
|
animation-duration:1s;
|
||
|
|
background-color:#eee;
|
||
|
|
border-radius:1px;
|
||
|
|
width:100%;
|
||
|
|
height:1px;
|
||
|
|
margin-left:auto;
|
||
|
|
}
|
||
|
|
.class-16
|
||
|
|
{
|
||
|
|
color:#333333;
|
||
|
|
outline:none;
|
||
|
|
outline-offset:-1px;
|
||
|
|
height:80px;
|
||
|
|
max-width:100%;
|
||
|
|
align-items:flex-end;
|
||
|
|
flex-direction:row;
|
||
|
|
display:flex;
|
||
|
|
justify-content:flex-start;
|
||
|
|
animation-duration:1s;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
}
|
||
|
|
.class-17
|
||
|
|
{
|
||
|
|
color:#333333;
|
||
|
|
outline:none;
|
||
|
|
outline-offset:-1px;
|
||
|
|
flex:1;
|
||
|
|
height:80px;
|
||
|
|
max-width:100%;
|
||
|
|
flex-direction:column;
|
||
|
|
display:flex;
|
||
|
|
justify-content:flex-end;
|
||
|
|
animation-duration:1s;
|
||
|
|
width:200px;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
}
|
||
|
|
.class-18
|
||
|
|
{
|
||
|
|
color:#BBBBBB;
|
||
|
|
word-wrap:break-word;
|
||
|
|
display:inline-block;
|
||
|
|
animation-duration:1s;
|
||
|
|
font-size:14px;
|
||
|
|
line-height:1.4;
|
||
|
|
margin-bottom:10px;
|
||
|
|
}
|
||
|
|
.class-19
|
||
|
|
{
|
||
|
|
margin-right:auto;
|
||
|
|
animation-duration:1s;
|
||
|
|
background-color:#eee;
|
||
|
|
border-radius:1px;
|
||
|
|
width:100%;
|
||
|
|
height:1px;
|
||
|
|
margin-left:auto;
|
||
|
|
}
|
||
|
|
.class-20
|
||
|
|
{
|
||
|
|
cursor:pointer;
|
||
|
|
color:#333333;
|
||
|
|
margin-right:10px;
|
||
|
|
outline-offset:-1px;
|
||
|
|
height:40px;
|
||
|
|
max-width:100%;
|
||
|
|
align-items:center;
|
||
|
|
flex-direction:row;
|
||
|
|
display:flex;
|
||
|
|
justify-content:center;
|
||
|
|
margin-left:10px;
|
||
|
|
animation-duration:1s;
|
||
|
|
width:88px;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
margin-bottom: 0.85em;
|
||
|
|
}
|
||
|
|
.class-21
|
||
|
|
{
|
||
|
|
color:#333333;
|
||
|
|
outline:none;
|
||
|
|
outline-offset:-1px;
|
||
|
|
max-width:100%;
|
||
|
|
align-items:flex-end;
|
||
|
|
flex-direction:column;
|
||
|
|
display:flex;
|
||
|
|
justify-content:flex-end;
|
||
|
|
animation-duration:1s;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
margin-bottom: 0.85em;
|
||
|
|
}
|
||
|
|
.class-22
|
||
|
|
{
|
||
|
|
color:#333333;
|
||
|
|
outline:none;
|
||
|
|
outline-offset:-1px;
|
||
|
|
max-width:100%;
|
||
|
|
flex-direction:column;
|
||
|
|
display:flex;
|
||
|
|
animation-duration:1s;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
}
|
||
|
|
.class-23
|
||
|
|
{
|
||
|
|
color:#BBBBBB;
|
||
|
|
word-wrap:break-word;
|
||
|
|
display:inline-block;
|
||
|
|
animation-duration:1s;
|
||
|
|
font-size:12px;
|
||
|
|
line-height:1.4;
|
||
|
|
}
|
||
|
|
.class-24
|
||
|
|
{
|
||
|
|
cursor:pointer;
|
||
|
|
color:#0099FF;
|
||
|
|
word-wrap:break-word;
|
||
|
|
display:inline-block;
|
||
|
|
animation-duration:1s;
|
||
|
|
font-size:12px;
|
||
|
|
line-height:1.4;
|
||
|
|
}
|
||
|
|
.class-25
|
||
|
|
{
|
||
|
|
color:#333333;
|
||
|
|
outline:none;
|
||
|
|
outline-offset:-1px;
|
||
|
|
height:40px;
|
||
|
|
max-width:100%;
|
||
|
|
flex-direction:row;
|
||
|
|
display:flex;
|
||
|
|
animation-duration:1s;
|
||
|
|
width:100px;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
}
|
||
|
|
.class-26
|
||
|
|
{
|
||
|
|
background-color:#0099ff;
|
||
|
|
}
|
||
|
|
.class-27
|
||
|
|
{
|
||
|
|
color:#333333;
|
||
|
|
outline:none;
|
||
|
|
outline-offset:-1px;
|
||
|
|
max-width:100%;
|
||
|
|
align-items:center;
|
||
|
|
flex-direction:row;
|
||
|
|
display:flex;
|
||
|
|
animation-duration:1s;
|
||
|
|
width:100px;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
margin-top:20px;
|
||
|
|
}
|
||
|
|
.class-28
|
||
|
|
{
|
||
|
|
color:#333333;
|
||
|
|
outline:1px dashed hsla(0, 0%, 66.7%, .7);
|
||
|
|
outline-offset:-1px;
|
||
|
|
height:14px;
|
||
|
|
max-width:100%;
|
||
|
|
flex-direction:row;
|
||
|
|
display:flex;
|
||
|
|
animation-duration:1s;
|
||
|
|
width:14px;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
}
|
||
|
|
.class-29
|
||
|
|
{
|
||
|
|
color:#999999;
|
||
|
|
word-wrap:break-word;
|
||
|
|
display:inline-block;
|
||
|
|
margin-left:10px;
|
||
|
|
animation-duration:1s;
|
||
|
|
font-size:14px;
|
||
|
|
line-height:1.4;
|
||
|
|
}
|
||
|
|
@media (max-width: 768px){
|
||
|
|
}
|
||
|
|
.input__label--hoshi::before{
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 1px;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100% - 10px);
|
||
|
|
border-bottom: 1px solid #B9C1CA;
|
||
|
|
}
|
||
|
|
</style>
|