sunjianxi
2 years ago
parent
b9a969ef12
commit
460bb4386c
17 changed files with 941 additions and 123 deletions
@ -0,0 +1,582 @@ |
||||
<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> |
||||
|
Before Width: | Height: | Size: 203 KiB After Width: | Height: | Size: 106 KiB |
Loading…
Reference in new issue