|
|
@ -1,13 +1,5 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div class="wrap"> |
|
|
|
<div class="wrap"> |
|
|
|
<div class="shapes"> |
|
|
|
|
|
|
|
<img class="shape1" src="@/assets/img/shapes/shape1.png" alt=""> |
|
|
|
|
|
|
|
<img class="shape2" src="@/assets/img/shapes/shape2.png" alt=""> |
|
|
|
|
|
|
|
<img class="shape3" src="@/assets/img/shapes/shape3.png" alt=""> |
|
|
|
|
|
|
|
<img class="shape4" src="@/assets/img/shapes/shape4.png" alt=""> |
|
|
|
|
|
|
|
<img class="shape5" src="@/assets/img/shapes/shape5.png" alt=""> |
|
|
|
|
|
|
|
<img class="shape6" src="@/assets/img/shapes/shape6.png" alt=""> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="login"> |
|
|
|
<div class="login"> |
|
|
|
<div class="form"> |
|
|
|
<div class="form"> |
|
|
|
<h6 class="title">欢迎使用请登录</h6> |
|
|
|
<h6 class="title">欢迎使用请登录</h6> |
|
|
@ -117,6 +109,7 @@ export default { |
|
|
|
this.$refs.login.validate(valid => { |
|
|
|
this.$refs.login.validate(valid => { |
|
|
|
if (valid) { |
|
|
|
if (valid) { |
|
|
|
this.login(this.form).then(() => { |
|
|
|
this.login(this.form).then(() => { |
|
|
|
|
|
|
|
window.opener && window.opener.location.reload() // 刷新官网 |
|
|
|
let redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : '/index' |
|
|
|
let redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : '/index' |
|
|
|
this.$router.replace(redirect) |
|
|
|
this.$router.replace(redirect) |
|
|
|
}).catch(res => { |
|
|
|
}).catch(res => { |
|
|
@ -204,157 +197,131 @@ export default { |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
<style scoped lang="scss"> |
|
|
|
.wrap { |
|
|
|
.wrap { |
|
|
|
min-height: 100%; |
|
|
|
min-height: 100%; |
|
|
|
background-color: #F3F6FA; |
|
|
|
background-color: #F3F6FA; |
|
|
|
overflow: hidden; |
|
|
|
.login{ |
|
|
|
.shapes{ |
|
|
|
min-height: calc(100vh - 70px); |
|
|
|
img{ |
|
|
|
padding-top: calc((100vh - 611px) / 2); |
|
|
|
position: absolute; |
|
|
|
background: url(../../../assets/img/shapes/shape1.png) (0 123px)/auto no-repeat, |
|
|
|
} |
|
|
|
url(../../../assets/img/shapes/shape2.png) (35px 238px)/auto no-repeat, |
|
|
|
} |
|
|
|
url(../../../assets/img/shapes/shape3.png) (0 485px)/auto no-repeat, |
|
|
|
.shape1{ |
|
|
|
url(../../../assets/img/shapes/shape4.png) (right 50%)/auto no-repeat, |
|
|
|
top: 123px; |
|
|
|
url(../../../assets/img/shapes/shape5.png) (right 80%)/auto no-repeat, |
|
|
|
} |
|
|
|
url(../../../assets/img/shapes/shape6.png) (right bottom)/auto no-repeat; |
|
|
|
.shape2{ |
|
|
|
.form{ |
|
|
|
top: 238px; |
|
|
|
|
|
|
|
left: 35px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.shape3{ |
|
|
|
|
|
|
|
top: 485px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.shape4{ |
|
|
|
|
|
|
|
bottom: 285px; |
|
|
|
|
|
|
|
right: 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.shape5{ |
|
|
|
|
|
|
|
bottom: 145px; |
|
|
|
|
|
|
|
right: 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.shape6{ |
|
|
|
|
|
|
|
bottom: 0; |
|
|
|
|
|
|
|
right: 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.login{ |
|
|
|
|
|
|
|
z-index: 4; |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
|
|
|
|
top: 48%; |
|
|
|
|
|
|
|
left: 50%; |
|
|
|
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
|
|
|
width: 436px; |
|
|
|
width: 436px; |
|
|
|
.form{ |
|
|
|
padding: 38px 38px 60px; |
|
|
|
padding: 38px 38px 60px; |
|
|
|
margin: 0 auto 0; |
|
|
|
border-radius: 6px; |
|
|
|
border-radius: 6px; |
|
|
|
background-color: #fff; |
|
|
|
background-color: #fff; |
|
|
|
.title{ |
|
|
|
.title{ |
|
|
|
margin-bottom: 25px; |
|
|
|
margin-bottom: 25px; |
|
|
|
font-size: 26px; |
|
|
|
font-size: 26px; |
|
|
|
color: #0B1D30; |
|
|
|
color: #0B1D30; |
|
|
|
letter-spacing: 4px; |
|
|
|
letter-spacing: 4px; |
|
|
|
} |
|
|
|
} |
|
|
|
.tab{ |
|
|
|
.tab{ |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 24px; |
|
|
|
margin-bottom: 24px; |
|
|
|
border-bottom: 2px solid #E1E6F2; |
|
|
|
border-bottom: 2px solid #E1E6F2; |
|
|
|
li{ |
|
|
|
li{ |
|
|
|
padding: 18px 0; |
|
|
|
padding: 18px 0; |
|
|
|
margin-bottom: -1px; |
|
|
|
margin-bottom: -1px; |
|
|
|
font-size: 18px; |
|
|
|
font-size: 18px; |
|
|
|
color: #555; |
|
|
|
color: #555; |
|
|
|
cursor: pointer; |
|
|
|
cursor: pointer; |
|
|
|
border-bottom: 4px solid transparent; |
|
|
|
border-bottom: 4px solid transparent; |
|
|
|
&:first-child{ |
|
|
|
&:first-child{ |
|
|
|
margin-right: 50px; |
|
|
|
margin-right: 50px; |
|
|
|
} |
|
|
|
} |
|
|
|
&.active{ |
|
|
|
&.active{ |
|
|
|
color: #006EFF;; |
|
|
|
color: #006EFF;; |
|
|
|
border-bottom-color: #006EFF; |
|
|
|
border-bottom-color: #006EFF; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.label{ |
|
|
|
} |
|
|
|
margin-bottom: 10px; |
|
|
|
.label{ |
|
|
|
color: #105CB2; |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
color: #105CB2; |
|
|
|
/deep/.el-form-item{ |
|
|
|
} |
|
|
|
margin-bottom: 20px; |
|
|
|
/deep/.el-form-item{ |
|
|
|
} |
|
|
|
margin-bottom: 20px; |
|
|
|
/deep/.el-input__inner{ |
|
|
|
} |
|
|
|
position: relative; |
|
|
|
/deep/.el-input__inner{ |
|
|
|
height: 52px; |
|
|
|
position: relative; |
|
|
|
padding: 0 20px 0 34px; |
|
|
|
height: 52px; |
|
|
|
line-height: 50px; |
|
|
|
padding: 0 20px 0 34px; |
|
|
|
background-color: #FBFBFB; |
|
|
|
line-height: 50px; |
|
|
|
border: 1px solid #E1E6F2; |
|
|
|
background-color: #FBFBFB; |
|
|
|
border-radius: 4px !important; |
|
|
|
border: 1px solid #E1E6F2; |
|
|
|
} |
|
|
|
border-radius: 4px !important; |
|
|
|
.account,.password,.code{ |
|
|
|
} |
|
|
|
z-index: 1; |
|
|
|
.account,.password,.code{ |
|
|
|
position: absolute; |
|
|
|
z-index: 1; |
|
|
|
top: 17px; |
|
|
|
position: absolute; |
|
|
|
left: 11px; |
|
|
|
top: 17px; |
|
|
|
width: 18px; |
|
|
|
left: 11px; |
|
|
|
height: 18px; |
|
|
|
width: 18px; |
|
|
|
background: url(../../../assets/img/login/account.png) 0 0/100% 100% no-repeat; |
|
|
|
height: 18px; |
|
|
|
} |
|
|
|
background: url(../../../assets/img/login/account.png) 0 0/100% 100% no-repeat; |
|
|
|
.password{ |
|
|
|
} |
|
|
|
top: 18px; |
|
|
|
.password{ |
|
|
|
background-image: url(../../../assets/img/login/password.png); |
|
|
|
top: 18px; |
|
|
|
} |
|
|
|
background-image: url(../../../assets/img/login/password.png); |
|
|
|
.code{ |
|
|
|
} |
|
|
|
top: 18px; |
|
|
|
.code{ |
|
|
|
background-image: url(../../../assets/img/login/code.png); |
|
|
|
top: 18px; |
|
|
|
} |
|
|
|
background-image: url(../../../assets/img/login/code.png); |
|
|
|
.ver-img{ |
|
|
|
} |
|
|
|
position: absolute; |
|
|
|
.ver-img{ |
|
|
|
top: 1px; |
|
|
|
position: absolute; |
|
|
|
right: 1px; |
|
|
|
top: 1px; |
|
|
|
} |
|
|
|
right: 1px; |
|
|
|
/deep/.el-form-item__error{ |
|
|
|
} |
|
|
|
top: 105%; |
|
|
|
/deep/.el-form-item__error{ |
|
|
|
left: auto; |
|
|
|
top: 105%; |
|
|
|
right: 0; |
|
|
|
left: auto; |
|
|
|
color: #FFA94E; |
|
|
|
right: 0; |
|
|
|
} |
|
|
|
color: #FFA94E; |
|
|
|
.submit{ |
|
|
|
} |
|
|
|
width: 100%; |
|
|
|
.submit{ |
|
|
|
height: 48px; |
|
|
|
width: 100%; |
|
|
|
margin-top: 30px; |
|
|
|
height: 48px; |
|
|
|
line-height: 48px; |
|
|
|
margin-top: 30px; |
|
|
|
padding: 0; |
|
|
|
line-height: 48px; |
|
|
|
font-size: 20px; |
|
|
|
padding: 0; |
|
|
|
background-color: $main-color; |
|
|
|
font-size: 20px; |
|
|
|
border-radius: 4px; |
|
|
|
background-color: $main-color; |
|
|
|
border: 0; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
border: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.footer{ |
|
|
|
} |
|
|
|
z-index: 3; |
|
|
|
.copyright{ |
|
|
|
position: fixed; |
|
|
|
padding: 18px 0; |
|
|
|
bottom: 0; |
|
|
|
font-size: 12px; |
|
|
|
left: 0; |
|
|
|
text-align: center; |
|
|
|
width: 100%; |
|
|
|
background-color: #F3F6FA; |
|
|
|
} |
|
|
|
a{ |
|
|
|
.copyright{ |
|
|
|
color:#B1B4B8; |
|
|
|
padding: 18px 0; |
|
|
|
|
|
|
|
font-size: 12px; |
|
|
|
font-size: 12px; |
|
|
|
text-align: center; |
|
|
|
&:hover{ |
|
|
|
background-color: #F3F6FA; |
|
|
|
opacity: .8; |
|
|
|
a{ |
|
|
|
|
|
|
|
color:#B1B4B8; |
|
|
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
|
|
&:hover{ |
|
|
|
|
|
|
|
opacity: .8; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.tips { |
|
|
|
} |
|
|
|
margin: 0 0 10px 5px; |
|
|
|
.tips { |
|
|
|
font-size: 14px; |
|
|
|
margin: 0 0 10px 5px; |
|
|
|
text-align: center; |
|
|
|
font-size: 14px; |
|
|
|
color: #666; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
color: #666; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
@media (max-height: 680px) { |
|
|
|
|
|
|
|
.wrap .login { |
|
|
|
|
|
|
|
padding: 40px 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |