|
|
|
@ -1,18 +1,15 @@ |
|
|
|
<template> |
|
|
|
<div class="login-container"> |
|
|
|
<el-form ref="loginForm" |
|
|
|
style="margin-left: 60%; padding: 10% 0 0 10%; width:40%; height:calc(100vh);" |
|
|
|
:model="loginForm" |
|
|
|
:rules="loginRules" |
|
|
|
class="login-form" |
|
|
|
autocomplete="on" |
|
|
|
label-position="left"> |
|
|
|
<div class="title-container" |
|
|
|
style="padding-right: 20%"> |
|
|
|
<h2 class="title">苏州赛思维物业服务评估咨询有限公司</h2> |
|
|
|
<div class="title-container"> |
|
|
|
<h2 class="title">苏州赛思维<br/>物业服务评估咨询有限公司</h2> |
|
|
|
</div> |
|
|
|
<el-form-item prop="cid" |
|
|
|
style="width: 80%"> |
|
|
|
<el-form-item prop="cid" style="width: 80%;margin-left:10%;"> |
|
|
|
<el-select v-model="loginForm.pid" |
|
|
|
style="width: 96%; " |
|
|
|
filterable |
|
|
|
@ -23,8 +20,7 @@ |
|
|
|
:value="item.cid" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="userid" |
|
|
|
style="width: 80%"> |
|
|
|
<el-form-item prop="userid" style="width: 80%;margin-left:10%;"> |
|
|
|
<el-input ref="userid" |
|
|
|
v-model="loginForm.userid" |
|
|
|
placeholder="用户名" |
|
|
|
@ -41,8 +37,7 @@ |
|
|
|
content="Caps lock is On" |
|
|
|
placement="right" |
|
|
|
manual> |
|
|
|
<el-form-item prop="password" |
|
|
|
style="width: 80%"> |
|
|
|
<el-form-item prop="password" style="width: 80%;margin-left:10%;"> |
|
|
|
<el-input :key="passwordType" |
|
|
|
ref="password" |
|
|
|
v-model="loginForm.password" |
|
|
|
@ -63,7 +58,7 @@ |
|
|
|
</el-tooltip> |
|
|
|
<el-button :loading="loading" |
|
|
|
type="primary" |
|
|
|
style="background: linear-gradient(360deg, #0767C2 0%, #50A6FB 100%); width:80%; height: 8%; border-radius: 36px; margin-top: 4%" |
|
|
|
class="login-button" |
|
|
|
@click.native.prevent="handleLogin"> |
|
|
|
<span v-if="!loading">登 录</span> |
|
|
|
<span v-else>登 录 中...</span> |
|
|
|
@ -207,14 +202,12 @@ $cursor: #fff; |
|
|
|
color: $cursor; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* reset element-ui css */ |
|
|
|
.login-container { |
|
|
|
.el-input { |
|
|
|
display: inline-block; |
|
|
|
height: 47px; |
|
|
|
width: 85%; |
|
|
|
|
|
|
|
input { |
|
|
|
background: transparent; |
|
|
|
border: 0px; |
|
|
|
@ -224,7 +217,6 @@ $cursor: #fff; |
|
|
|
color: #248af0; |
|
|
|
height: 47px; |
|
|
|
caret-color: #248af0; |
|
|
|
|
|
|
|
&:-webkit-autofill { |
|
|
|
box-shadow: 0 0 0px 1000px $bg inset !important; |
|
|
|
-webkit-text-fill-color: #248af0 !important; |
|
|
|
@ -234,9 +226,8 @@ $cursor: #fff; |
|
|
|
.el-input--suffix { |
|
|
|
width: 104%; |
|
|
|
} |
|
|
|
|
|
|
|
.el-form-item { |
|
|
|
border-bottom: 1px solid #248af0; |
|
|
|
border-bottom: 1px solid #95B6F1; |
|
|
|
color: #1467ff; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -246,39 +237,51 @@ $cursor: #fff; |
|
|
|
$bg: #fff; |
|
|
|
$dark_gray: #889aa4; |
|
|
|
$light_gray: #eee; |
|
|
|
|
|
|
|
.login-container { |
|
|
|
min-height: 100%; |
|
|
|
width: 100%; |
|
|
|
background-color: $bg; |
|
|
|
overflow: hidden; |
|
|
|
background-image: url('../../assets/imgs/login_bg.png'); |
|
|
|
background-size: 60% 100%; |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
position: relative; |
|
|
|
.login-form { |
|
|
|
position: relative; |
|
|
|
width: 400px; |
|
|
|
position: absolute; |
|
|
|
right: 248px; |
|
|
|
top: 0; |
|
|
|
bottom: 0; |
|
|
|
width: 500px; |
|
|
|
height: 66%; |
|
|
|
min-height: 550px; |
|
|
|
max-width: 100%; |
|
|
|
padding: 100px 35px 0; |
|
|
|
margin: 0 auto; |
|
|
|
margin: auto; |
|
|
|
overflow: hidden; |
|
|
|
background: #fff; |
|
|
|
} |
|
|
|
.login-button { |
|
|
|
background: linear-gradient(360deg, #0767C2 0%, #50A6FB 100%); |
|
|
|
width:80%; |
|
|
|
margin-left:10%; |
|
|
|
height: 8%; |
|
|
|
border-radius: 36px; |
|
|
|
margin-top: 4% |
|
|
|
} |
|
|
|
.tips { |
|
|
|
font-size: 16px; |
|
|
|
color: #fff; |
|
|
|
margin-bottom: 10px; |
|
|
|
|
|
|
|
span { |
|
|
|
&:first-of-type { |
|
|
|
margin-right: 16px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.title-container { |
|
|
|
position: relative; |
|
|
|
.title { |
|
|
|
background: linear-gradient(180deg, #399cff 0%, #0969c4 100%); |
|
|
|
background: linear-gradient(180deg, #1467FF 0%, #5F97FF 100%); |
|
|
|
background-clip: text; |
|
|
|
color: transparent; |
|
|
|
margin: 0px auto 40px auto; |
|
|
|
@ -286,7 +289,6 @@ $light_gray: #eee; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.show-pwd { |
|
|
|
position: absolute; |
|
|
|
right: 10px; |
|
|
|
@ -296,7 +298,6 @@ $light_gray: #eee; |
|
|
|
cursor: pointer; |
|
|
|
user-select: none; |
|
|
|
} |
|
|
|
|
|
|
|
.thirdparty-button { |
|
|
|
position: absolute; |
|
|
|
right: 0; |
|
|
|
|
