|
|
|
@ -1,10 +1,16 @@ |
|
|
|
|
|
|
|
<template> |
|
|
|
<div class="site-wrapper site-page--login"> |
|
|
|
<div class="site-content__wrapper"> |
|
|
|
<div class="site-content"> |
|
|
|
<div class="login-main"> |
|
|
|
<div style="display: flex;height: 100vh"> |
|
|
|
<div class="login-bg"></div> |
|
|
|
<div style="width: 20%"> |
|
|
|
<div style="height: 27vh;"> |
|
|
|
<div style="text-align: right;padding: 0px 40px"> |
|
|
|
<img width="50%" height="72" style="object-fit: contain" src="~@/assets/img/ckp.png"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="padding: 10px 40px"> |
|
|
|
<h3 class="login-title">用户登陆</h3> |
|
|
|
|
|
|
|
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon> |
|
|
|
<el-form-item prop="userName"> |
|
|
|
<el-input v-model="dataForm.userName" placeholder="帐号"></el-input> |
|
|
|
@ -13,13 +19,14 @@ |
|
|
|
<el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button> |
|
|
|
<el-button style="width: 100%" type="primary" @click="dataFormSubmit()">登录</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
@ -116,95 +123,28 @@ import { getUUID } from '@/utils' |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.site-wrapper.site-page--login { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
background-color: rgba(38, 50, 56, 0); |
|
|
|
overflow: hidden; |
|
|
|
&:before { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
z-index: -1; |
|
|
|
width: 80%; |
|
|
|
height: 100%; |
|
|
|
content: ""; |
|
|
|
background-image: url(~@/assets/img/login_bg.jpg); |
|
|
|
background-size: cover; |
|
|
|
} |
|
|
|
.site-content__wrapper { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
padding: 0; |
|
|
|
margin: 0; |
|
|
|
overflow-x: hidden; |
|
|
|
overflow-y: auto; |
|
|
|
background-color: transparent; |
|
|
|
} |
|
|
|
.site-content { |
|
|
|
min-height: 100%; |
|
|
|
padding: 15% 500px 30px 30px; |
|
|
|
} |
|
|
|
.brand-info { |
|
|
|
margin: 220px 100px 0 90px; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
.brand-info__text { |
|
|
|
margin: 0 0 22px 0; |
|
|
|
font-size: 48px; |
|
|
|
font-weight: 400; |
|
|
|
text-transform : uppercase; |
|
|
|
} |
|
|
|
.brand-info__intro { |
|
|
|
margin: 10px 0; |
|
|
|
font-size: 16px; |
|
|
|
line-height: 1.58; |
|
|
|
opacity: .6; |
|
|
|
} |
|
|
|
.login-main { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
right: 0; |
|
|
|
padding: 15% 60px 180px; |
|
|
|
width: 350px; |
|
|
|
min-height: 100%; |
|
|
|
background-color: #fff; |
|
|
|
} |
|
|
|
.login-title { |
|
|
|
font-size: 30px; |
|
|
|
} |
|
|
|
.login-captcha { |
|
|
|
overflow: hidden; |
|
|
|
> img { |
|
|
|
width: 100%; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
.login-btn-submit { |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
} |
|
|
|
.login-main .el-input__inner{ |
|
|
|
margin-top: 10px; |
|
|
|
height: 45px; |
|
|
|
} |
|
|
|
.el-button--medium { |
|
|
|
margin-top: 0px; |
|
|
|
padding: 5px 11px; |
|
|
|
font-size: 16px; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
.el-form-item { |
|
|
|
margin-bottom: 5px; |
|
|
|
} |
|
|
|
.site-wrapper.site-page--login { |
|
|
|
.login-title { |
|
|
|
font-size: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.login-main .el-input__inner{ |
|
|
|
margin-top: 10px; |
|
|
|
height: 45px; |
|
|
|
} |
|
|
|
.el-button--medium { |
|
|
|
margin-top: 0px; |
|
|
|
padding: 5px 11px; |
|
|
|
font-size: 16px; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
.el-form-item { |
|
|
|
margin-bottom: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
.login-bg{ |
|
|
|
background-image: url(~@/assets/img/login_bg.jpg); |
|
|
|
background-size: cover; |
|
|
|
width: 80%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|