|
|
|
<template>
|
|
|
|
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
|
|
|
|
<h3 class="title">系统登录</h3>
|
|
|
|
<el-form-item prop="account">
|
|
|
|
<el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item prop="checkPass">
|
|
|
|
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
|
|
|
|
<el-form-item style="width:100%;">
|
|
|
|
<el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
|
|
|
|
<!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
<div>
|
|
|
|
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container" id="loginForm">
|
|
|
|
<h3 class="title">系统登录</h3>
|
|
|
|
<el-form-item prop="account">
|
|
|
|
<el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item prop="checkPass">
|
|
|
|
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
|
|
|
|
<el-form-item style="width:100%;">
|
|
|
|
<el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining" :plain="true">登录</el-button>
|
|
|
|
<!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
<div class="homepage-hero-module">
|
|
|
|
<div class="video-container">
|
|
|
|
<div :style="fixStyle" class="filter"></div>
|
|
|
|
<video :style="fixStyle" autoplay loop class="fillWidth" v-on:canplay="canplay">
|
|
|
|
<source src="/static/login/New-jumbo.mp4" type="video/mp4"/>
|
|
|
|
浏览器不支持 video 标签，建议升级浏览器。
|
|
|
|
<!--<source src="/static/login/New-jumbo.webm" type="video/webm"/>-->
|
|
|
|
<!--浏览器不支持 video 标签，建议升级浏览器。-->
|
|
|
|
</video>
|
|
|
|
<div class="poster hidden" v-if="!vedioCanPlay">
|
|
|
|
<img :style="fixStyle" src="https://s2.best-wallpaper.net/wallpaper/2560x1600/1511/Airplane-passenger-airliner-flight-sea-lights-airport-evening_2560x1600.jpg" alt="">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
...
|
...
|
@@ -21,6 +37,8 @@ |
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
vedioCanPlay: true,
|
|
|
|
fixStyle: '',
|
|
|
|
logining: false,
|
|
|
|
ruleForm2: {
|
|
|
|
account: 'admin',
|
|
...
|
...
|
@@ -40,43 +58,113 @@ |
|
|
|
};
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
canplay() {
|
|
|
|
this.vedioCanPlay = true
|
|
|
|
},
|
|
|
|
handleReset2() {
|
|
|
|
this.$refs.ruleForm2.resetFields();
|
|
|
|
},
|
|
|
|
handleSubmit2(ev) {
|
|
|
|
var _this = this;
|
|
|
|
this.$refs.ruleForm2.validate((valid) => {
|
|
|
|
if (valid) {
|
|
|
|
//_this.$router.replace('/table');
|
|
|
|
this.logining = true;
|
|
|
|
//NProgress.start();
|
|
|
|
var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };
|
|
|
|
requestLogin(loginParams).then(data => {
|
|
|
|
this.logining = false;
|
|
|
|
//NProgress.done();
|
|
|
|
let { msg, code, user } = data;
|
|
|
|
if (code !== 200) {
|
|
|
|
this.$message({
|
|
|
|
message: msg,
|
|
|
|
type: 'error'
|
|
|
|
});
|
|
|
|
handleSubmit2: function (ev) {
|
|
|
|
var _this = this;
|
|
|
|
this.$refs.ruleForm2.validate((valid) => {
|
|
|
|
if (valid) {
|
|
|
|
//_this.$router.replace('/table');
|
|
|
|
this.logining = true;
|
|
|
|
//NProgress.start();
|
|
|
|
var loginParams = {username: this.ruleForm2.account, password: this.ruleForm2.checkPass};
|
|
|
|
requestLogin(loginParams).then(res => {
|
|
|
|
this.logining = false;
|
|
|
|
//NProgress.done();
|
|
|
|
let status = res.status;
|
|
|
|
let user = res.data.principal;
|
|
|
|
let loginSuccess = res.data.authenticated;
|
|
|
|
|
|
|
|
if (status !== 200) {
|
|
|
|
let msg = "登录错误";
|
|
|
|
this.$message({
|
|
|
|
message: msg,
|
|
|
|
type: "error"
|
|
|
|
});
|
|
|
|
} else if (loginSuccess) {
|
|
|
|
sessionStorage.setItem('user', JSON.stringify(user));
|
|
|
|
this.$router.push({path: '/table'});
|
|
|
|
}
|
|
|
|
}).catch(error => {
|
|
|
|
let msg = error.message;
|
|
|
|
this.$message({
|
|
|
|
message: msg,
|
|
|
|
type: "error"
|
|
|
|
});
|
|
|
|
this.logining = false;
|
|
|
|
console.log(_this);
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
console.log('error submit!!');
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted:function () {
|
|
|
|
window.onresize = () => {
|
|
|
|
const windowWidth = document.body.clientWidth
|
|
|
|
const windowHeight = document.body.clientHeight
|
|
|
|
const windowAspectRatio = windowHeight / windowWidth
|
|
|
|
let videoWidth
|
|
|
|
let videoHeight
|
|
|
|
if (windowAspectRatio < 0.5625) {
|
|
|
|
videoWidth = windowWidth
|
|
|
|
videoHeight = videoWidth * 0.5625
|
|
|
|
this.fixStyle = {
|
|
|
|
height: windowWidth * 0.5625 + 'px',
|
|
|
|
width: windowWidth + 'px',
|
|
|
|
'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
|
|
|
|
'margin-left': 'initial'
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
sessionStorage.setItem('user', JSON.stringify(user));
|
|
|
|
this.$router.push({ path: '/table' });
|
|
|
|
videoHeight = windowHeight
|
|
|
|
videoWidth = videoHeight / 0.5625
|
|
|
|
this.fixStyle = {
|
|
|
|
height: windowHeight + 'px',
|
|
|
|
width: windowHeight / 0.5625 + 'px',
|
|
|
|
'margin-left': (windowWidth - videoWidth) / 2 + 'px',
|
|
|
|
'margin-bottom': 'initial'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
console.log('error submit!!');
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
window.onresize()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
#loginForm{
|
|
|
|
filter:alpha(Opacity=90);
|
|
|
|
-moz-opacity:0.9;
|
|
|
|
opacity: 0.9;
|
|
|
|
}
|
|
|
|
.homepage-hero-module,
|
|
|
|
.video-container {
|
|
|
|
height: 100vh;
|
|
|
|
/*overflow: hidden;*/
|
|
|
|
position: absolute;
|
|
|
|
top:0px;
|
|
|
|
left: 0;
|
|
|
|
z-index: -1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.video-container .poster img,
|
|
|
|
.video-container video {
|
|
|
|
z-index: 0;
|
|
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
|
|
|
|
.video-container .filter {
|
|
|
|
z-index: 1;
|
|
|
|
position: absolute;
|
|
|
|
background: rgba(0, 0, 0, 0.4);
|
|
|
|
}
|
|
|
|
.login-container {
|
|
|
|
/*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
|
|
|
|
-webkit-border-radius: 5px;
|
...
|
...
|
|
