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.
582 lines
16 KiB
582 lines
16 KiB
<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>
|
|
|