|
|
|
@ -1,6 +1,11 @@ |
|
|
|
<template> |
|
|
|
<div class="login-container"> |
|
|
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left"> |
|
|
|
<el-form ref="loginForm" |
|
|
|
:model="loginForm" |
|
|
|
:rules="loginRules" |
|
|
|
class="login-form" |
|
|
|
autocomplete="on" |
|
|
|
label-position="left"> |
|
|
|
<div class="title-container"> |
|
|
|
<h3 class="title">LAPP管理平台</h3> |
|
|
|
</div> |
|
|
|
@ -8,53 +13,58 @@ |
|
|
|
<span class="svg-container"> |
|
|
|
<svg-icon icon-class="login-project" /> |
|
|
|
</span> |
|
|
|
<el-select v-model="loginForm.workshop" style="width: 92%;" filterable placeholder="请选择车间"> |
|
|
|
<el-option |
|
|
|
v-for="item in options" |
|
|
|
:key="item.pid" |
|
|
|
:label="item.descr" |
|
|
|
:value="item.pid" |
|
|
|
/> |
|
|
|
<el-select v-model="loginForm.workshop" |
|
|
|
style="width: calc(100% - 56px);" |
|
|
|
filterable |
|
|
|
placeholder="请选择车间"> |
|
|
|
<el-option v-for="item in options" |
|
|
|
:key="item.pid" |
|
|
|
:label="item.descr" |
|
|
|
:value="item.pid" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="userid"> |
|
|
|
<span class="svg-container"> |
|
|
|
<svg-icon icon-class="login-user" /> |
|
|
|
</span> |
|
|
|
<el-input |
|
|
|
ref="userid" |
|
|
|
v-model="loginForm.userid" |
|
|
|
placeholder="用户名" |
|
|
|
name="userid" |
|
|
|
type="text" |
|
|
|
tabindex="1" |
|
|
|
/> |
|
|
|
<el-input ref="userid" |
|
|
|
v-model="loginForm.userid" |
|
|
|
placeholder="用户名" |
|
|
|
name="userid" |
|
|
|
type="text" |
|
|
|
tabindex="1" /> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual> |
|
|
|
<el-tooltip v-model="capsTooltip" |
|
|
|
content="Caps lock is On" |
|
|
|
placement="right" |
|
|
|
manual> |
|
|
|
<el-form-item prop="password"> |
|
|
|
<span class="svg-container"> |
|
|
|
<svg-icon icon-class="login-password" /> |
|
|
|
</span> |
|
|
|
<el-input |
|
|
|
:key="passwordType" |
|
|
|
ref="password" |
|
|
|
v-model="loginForm.password" |
|
|
|
:type="passwordType" |
|
|
|
placeholder="密码" |
|
|
|
name="password" |
|
|
|
tabindex="2" |
|
|
|
autocomplete="on" |
|
|
|
@keyup.native="checkCapslock" |
|
|
|
@blur="capsTooltip = false" |
|
|
|
@keyup.enter.native="handleLogin" |
|
|
|
/> |
|
|
|
<span class="show-pwd" @click="showPwd"> |
|
|
|
<svg-icon :icon-class="passwordType === 'password' ? 'login-eye' : 'login-eye-open'" style="font-color:#ffffff" /> |
|
|
|
<el-input :key="passwordType" |
|
|
|
ref="password" |
|
|
|
v-model="loginForm.password" |
|
|
|
:type="passwordType" |
|
|
|
placeholder="密码" |
|
|
|
name="password" |
|
|
|
tabindex="2" |
|
|
|
autocomplete="on" |
|
|
|
@keyup.native="checkCapslock" |
|
|
|
@blur="capsTooltip = false" |
|
|
|
@keyup.enter.native="handleLogin" /> |
|
|
|
<span class="show-pwd" |
|
|
|
@click="showPwd"> |
|
|
|
<svg-icon :icon-class="passwordType === 'password' ? 'login-eye' : 'login-eye-open'" |
|
|
|
style="font-color:#ffffff" /> |
|
|
|
</span> |
|
|
|
</el-form-item> |
|
|
|
</el-tooltip> |
|
|
|
<el-button :loading="loading" type="primary" class="login-button" @click.native.prevent="handleLogin"> |
|
|
|
<el-button :loading="loading" |
|
|
|
type="primary" |
|
|
|
class="login-button" |
|
|
|
@click.native.prevent="handleLogin"> |
|
|
|
<span v-if="!loading">登 录</span> |
|
|
|
<span v-else>登 录 中...</span> |
|
|
|
</el-button> |
|
|
|
@ -63,7 +73,6 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
import { getWorkshop } from '@/api/login' |
|
|
|
import { getAllField } from '@/api/system/field' |
|
|
|
|
|
|
|
@ -84,9 +93,7 @@ export default { |
|
|
|
userid: [ |
|
|
|
{ required: true, trigger: 'blur', message: '用户名不能为空' } |
|
|
|
], |
|
|
|
password: [ |
|
|
|
{ required: true, trigger: 'blur', message: '密码不能为空' } |
|
|
|
] |
|
|
|
password: [{ required: true, trigger: 'blur', message: '密码不能为空' }] |
|
|
|
}, |
|
|
|
passwordType: 'password', |
|
|
|
capsTooltip: false, |
|
|
|
@ -98,7 +105,7 @@ export default { |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
$route: { |
|
|
|
handler: function(route) { |
|
|
|
handler: function (route) { |
|
|
|
const query = route.query |
|
|
|
if (query) { |
|
|
|
this.redirect = query.redirect |
|
|
|
@ -120,7 +127,7 @@ export default { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getPlants() { |
|
|
|
getWorkshop().then(res => { |
|
|
|
getWorkshop().then((res) => { |
|
|
|
if (res.code === 200) { |
|
|
|
this.options = res.data |
|
|
|
localStorage.setItem('workshop', JSON.stringify(this.options)) |
|
|
|
@ -129,7 +136,10 @@ export default { |
|
|
|
}, |
|
|
|
checkCapslock({ shiftKey, key } = {}) { |
|
|
|
if (key && key.length === 1) { |
|
|
|
if (shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')) { |
|
|
|
if ( |
|
|
|
(shiftKey && key >= 'a' && key <= 'z') || |
|
|
|
(!shiftKey && key >= 'A' && key <= 'Z') |
|
|
|
) { |
|
|
|
this.capsTooltip = true |
|
|
|
} else { |
|
|
|
this.capsTooltip = false |
|
|
|
@ -150,14 +160,15 @@ export default { |
|
|
|
}) |
|
|
|
}, |
|
|
|
handleLogin() { |
|
|
|
this.$refs.loginForm.validate(valid => { |
|
|
|
this.$refs.loginForm.validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
this.loading = true |
|
|
|
localStorage.removeItem('routerIndex') |
|
|
|
this.$store.dispatch('user/login', this.loginForm) |
|
|
|
this.$store |
|
|
|
.dispatch('user/login', this.loginForm) |
|
|
|
.then(() => { |
|
|
|
this.$router.push({ path: '/' }) |
|
|
|
getAllField().then(res => { |
|
|
|
getAllField().then((res) => { |
|
|
|
localStorage.removeItem('allField') |
|
|
|
localStorage.setItem('allField', JSON.stringify(res.data)) |
|
|
|
}) |
|
|
|
@ -196,19 +207,40 @@ $cursor: #fff; |
|
|
|
|
|
|
|
/* reset element-ui css */ |
|
|
|
.login-container { |
|
|
|
.svg-container { |
|
|
|
width: 54px; |
|
|
|
height: 54px; |
|
|
|
background: rgba($color: #fff, $alpha: 0.23); |
|
|
|
border-radius: 3px 0px 0px 3px; |
|
|
|
display: inline-block; |
|
|
|
text-align: center; |
|
|
|
line-height: 60px; |
|
|
|
.svg-icon { |
|
|
|
width: 1.5em; |
|
|
|
height: 1.5em; |
|
|
|
} |
|
|
|
} |
|
|
|
.el-form-item__content { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
border: 1px solid rgba($color: #fff, $alpha: 0.39); |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
.el-input { |
|
|
|
display: inline-block; |
|
|
|
height: 47px; |
|
|
|
width: 85%; |
|
|
|
width: calc(100% - 56px); |
|
|
|
input { |
|
|
|
background: transparent; |
|
|
|
border: 0px; |
|
|
|
-webkit-appearance: none; |
|
|
|
border-radius: 0px; |
|
|
|
padding: 12px 5px 12px 15px; |
|
|
|
color: #FFFFFF; |
|
|
|
height: 47px; |
|
|
|
caret-color: #FFFFFF; |
|
|
|
padding: 12px 5px 19px 20px; |
|
|
|
color: #ffffff; |
|
|
|
height: 56px; |
|
|
|
caret-color: #ffffff; |
|
|
|
border-radius: 4px; |
|
|
|
|
|
|
|
// &:-webkit-autofill { |
|
|
|
// box-shadow: 0 0 0 1000px rgba(0,76,99,0.9) inset !important; |
|
|
|
@ -218,43 +250,53 @@ $cursor: #fff; |
|
|
|
&:-webkit-autofill:hover, |
|
|
|
&:-webkit-autofill:focus, |
|
|
|
&:-webkit-autofill:active { |
|
|
|
transition-delay: 111111s; |
|
|
|
transition: color 11111s ease-out, background-color 111111s ease-out; |
|
|
|
transition-delay: 111111s; |
|
|
|
transition: color 11111s ease-out, background-color 111111s ease-out; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.el-input--suffix { |
|
|
|
width: 104%; |
|
|
|
right: 5%; |
|
|
|
} |
|
|
|
|
|
|
|
.el-select { |
|
|
|
input { |
|
|
|
padding: 12px 5px 19px 36px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.el-form-item { |
|
|
|
border-bottom: 1px solid rgba(231,250,255, 0.32); |
|
|
|
color: #FFFFFF; |
|
|
|
// border-bottom: 1px solid rgba(231, 250, 255, 0.32); |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
|
|
.login-container { |
|
|
|
min-height: 100%; |
|
|
|
width: 100%; |
|
|
|
overflow: hidden; |
|
|
|
background-image: url('../../assets/imgs/bg_login1.png'); |
|
|
|
background-size: cover; |
|
|
|
background-image: url('../../assets/imgs/bg_login2.png'); |
|
|
|
// background-size: cover; |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
.login-form { |
|
|
|
position: relative; |
|
|
|
width: 400px; |
|
|
|
max-width: 100%; |
|
|
|
padding: 0 5%; |
|
|
|
padding: 0 4%; |
|
|
|
margin: 0 auto; |
|
|
|
overflow: hidden; |
|
|
|
margin-right: 6%; |
|
|
|
width:40%; |
|
|
|
height:calc(60vh); |
|
|
|
margin-top:calc(20vh); |
|
|
|
background: rgba(0,76,99, 0.73); |
|
|
|
margin-right: 4.5%; |
|
|
|
// width: 40%; |
|
|
|
// height: calc(60vh); |
|
|
|
margin-top: calc(15vh); |
|
|
|
background: rgba(255, 255, 255, 0.12); |
|
|
|
width: 30%; |
|
|
|
height: 65vh; |
|
|
|
border-radius: 8px; |
|
|
|
border: 1px solid rgba($color: #ffffff, $alpha: 0.39); |
|
|
|
} |
|
|
|
.tips { |
|
|
|
font-size: 16px; |
|
|
|
@ -272,22 +314,30 @@ $cursor: #fff; |
|
|
|
position: relative; |
|
|
|
.title { |
|
|
|
font-size: 26px; |
|
|
|
color: #FFFFFF; |
|
|
|
margin: 10% auto 9% auto; |
|
|
|
color: #ffffff; |
|
|
|
margin: 16% auto 9% auto; |
|
|
|
text-align: center; |
|
|
|
font-weight: 700; |
|
|
|
} |
|
|
|
} |
|
|
|
.login-button { |
|
|
|
width:100%; |
|
|
|
height: 12%; |
|
|
|
color:#369bb9; |
|
|
|
font-weight: 550; |
|
|
|
background: #FFFFFF; |
|
|
|
border-radius: 36px; |
|
|
|
margin-top: 4%; |
|
|
|
border:0; |
|
|
|
} |
|
|
|
.login-button { |
|
|
|
// width: 100%; |
|
|
|
// height: 12%; |
|
|
|
// color: #369bb9; |
|
|
|
// font-weight: 550; |
|
|
|
// background: #ffffff; |
|
|
|
// border-radius: 36px; |
|
|
|
// margin-top: 4%; |
|
|
|
// border: 0; |
|
|
|
width: 380px; |
|
|
|
height: 72px; |
|
|
|
background: rgba($color: #fff, $alpha: 0.8); |
|
|
|
box-shadow: 2px 12px 20px 0px rgba(2, 10, 25, 0.16); |
|
|
|
border-radius: 8px; |
|
|
|
color: #1467ff; |
|
|
|
font-size: 1.1em; |
|
|
|
margin-top: 20px; |
|
|
|
} |
|
|
|
.show-pwd { |
|
|
|
position: absolute; |
|
|
|
right: 10px; |
|
|
|
@ -303,9 +353,9 @@ $cursor: #fff; |
|
|
|
right: 0; |
|
|
|
bottom: 6px; |
|
|
|
} |
|
|
|
/deep/ .el-select .el-input .el-select__caret { |
|
|
|
color: #FFFFFF; |
|
|
|
} |
|
|
|
/deep/ .el-select .el-input .el-select__caret { |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
@media only screen and (max-width: 470px) { |
|
|
|
.thirdparty-button { |
|
|
|
display: none; |
|
|
|
|
luanss
