<template>
|
<div class="wrap" :style="{
|
'background': `url(${$store.state.VUE_APP_CONFIG.BG_IMAGE})`,
|
'background-repeat': 'no-repeat',
|
'background-size': 'cover',
|
'background-clip': 'content-box',
|
'background-position': 'center',
|
}"
|
>
|
<div class="introduce">
|
<div v-if="$store.state.VUE_APP_CONFIG.LOGO">
|
<img :src="$store.state.VUE_APP_CONFIG.LOGO" alt="">
|
</div>
|
<h2>{{ $store.state.VUE_APP_CONFIG.COMPANY_NAME }}</h2>
|
|
</div>
|
<div class="login">
|
<h1>系统登录 / LOGIN IN</h1>
|
<h3>{{test}}</h3>
|
<div class="info-input">
|
<span><i class="el-icon-loading"></i></span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script type="text/javascript">
|
import { mapMutations } from 'vuex'
|
import { loginByLingyang } from '@/api/system/common'
|
|
export default {
|
name: 'Login',
|
|
data () {
|
return {
|
loading: true,
|
token: '',
|
companyId: 8
|
}
|
},
|
methods: {
|
...mapMutations(['setUserInfo']),
|
login () {
|
if (this.loading) {
|
return
|
}
|
if (!this.__check()) {
|
return
|
}
|
this.loading = true
|
loginByLingyang({
|
token: this.$route.query.token,
|
companyId: this.companyId,
|
})
|
.then(() => {
|
window.location.href = process.env.VUE_APP_CONTEXT_PATH
|
})
|
.catch(e => {
|
this.refreshCaptcha()
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.loading = false
|
})
|
},
|
},
|
created () {
|
this.login()
|
},
|
mounted () {
|
console.log(this.userInfo);
|
}
|
|
}
|
/**
|
*
|
|
*/
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/assets/style/variables.scss";
|
$input-gap: 30px;
|
.wrap {
|
display: flex;
|
width: 100%;
|
height: 100vh;
|
background-repeat: no-repeat;
|
background-size: cover;
|
background-clip: content-box;
|
background-position: center;
|
// 左边介绍
|
.introduce {
|
// padding-left: 10%;
|
position: relative;
|
width: 100%;
|
height: 100%;
|
box-sizing: border-box;
|
color: #fff;
|
background: rgba(0, 0, 0, 0.4);
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
div {
|
position: absolute;
|
top: 60px;
|
left: 60px;
|
width: 300px;
|
height: 60px;
|
img {
|
max-width: 100%;
|
// margin: auto;
|
height: 100%;
|
}
|
}
|
h2 {
|
align-items: center;
|
padding-left: 60px;
|
font-size:45px;
|
font-style: italic;
|
font-weight: 900;
|
margin-top: 50px;
|
}
|
// h3 {
|
// font-size: 49px;
|
// font-weight: 300;
|
// margin: 25px 0;
|
// }
|
}
|
// 右边登录
|
.login {
|
height: 100%;
|
width: 38%;
|
max-width: 560px;
|
min-width: 460px;
|
flex-shrink: 0;
|
text-align: center;
|
background: #fff;
|
padding: 0 80px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
box-sizing: border-box;
|
h1 {
|
font-size: 28px;
|
font-weight: 500;
|
}
|
.info-input {
|
margin-top: $input-gap;
|
margin-bottom: 60px;
|
::v-deep .el-input {
|
margin-top: 30px;
|
.el-input__inner {
|
height: 50px;
|
background: #F9F9F9;
|
border: 1px solid transparent;
|
&:focus {
|
border: 1px solid $primary-color;
|
}
|
}
|
}
|
}
|
// 验证码输入
|
.captcha-input {
|
display: flex;
|
margin-top: $input-gap;
|
height: 50px;
|
.el-input {
|
width: 100%;
|
margin-top: 0;
|
}
|
span, img {
|
width: 45%;
|
height: 100%;
|
flex-shrink: 0;
|
margin-left: 16px;
|
}
|
span {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: #f7f7f7;
|
border-radius: 8px;
|
}
|
}
|
.el-button {
|
height: 50px;
|
width: 100%;
|
color: #fff;
|
font-size: 16px;
|
background: linear-gradient(130deg, $primary-title-start-color 0%, $icon-background-color 100%);
|
}
|
}
|
}
|
</style>
|
