<template>
  <div class="loginPage">
    <div class="login_main">
      <div class="login_left"></div>
      <div class="login_right">
        <p>欢迎登录</p>
        <el-form ref="form" class="form" size="medium" :disabled="saving">
				<el-form-item label="用户名">
					<el-input
						placeholder="请输入用户名"
						v-model="form.mobile"
						maxlength="20"
						@keyup.enter.native="next"
						auto-complete="off"
					></el-input>
				</el-form-item>

				<el-form-item label="密码">
					<el-input
						type="password"
						placeholder="请输入密码"
						v-model="form.password"
						maxlength="20"
						auto-complete="off"
						@keyup.enter.native="next"
					></el-input>
				</el-form-item>
				<el-button class="submit-btn" @click="next" :saving="saving">登录</el-button>
			</el-form>
      </div>
    </div>
  </div>
</template>

<script>
import index from './index';
export default {
	mixins: [index],

	created() {
	}
};
</script>

<style lang="stylus" scoped>
.loginPage{
  height: 100vh;
	width: 100vw;
	position: relative;
  background: #3385FF;
  &>.login_main{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1017px;
    height: 572px;
    background: #fff;
    &>div{
      width: 50%;
      height: 100%;
      display: inline-block;
    }
    &>.login_left{
      vertical-align: top;
      background: url('../../assets/images/login-bg1.png') no-repeat center;
      background-size: cover;
    }
    &>.login_right{
      border-left: 1px dashed #333;
      vertical-align: top;
      padding-left: 67px;
      box-sizing: border-box;
      &>p{
        margin-top: 64px;
        margin-bottom: 43px;
        font-size: 32px;
        font-weight: 500;
        color: #3385FF;
      }
      .el-form {
        // height:30vh;
        width: 83%;
        border-radius: 3px;
        // position: absolute;
        // right: 42px;
        // top: 45px;
        z-index: 1;

        .el-form-item {
          margin-bottom: 5px;
        }
        >>>.el-form-item__label{
          color: #9289A6;
          font-size: 16px;
          line-height 33px;
        }
        >>>.el-input {
          height: 48px;
          border-radius: 8px;
          .el-input__inner {
            // border: 0;
            // box-shadow: 0 0 0px 1000px #fefcfe inset;
            // border-radius: 0;
            // padding: 0 5px;
            height: 100%;
            border: 1px solid #B1B3CC;
            font-size: 16px;
          }
        }

        .captcha {
          position: relative;

          .value {
            position: absolute;
            bottom: 0;
            right: 0;
          }
        }

        .submit-btn {
          width: 100%;
          height: 45px;
          margin-top: 50px;
          background: #3385FF;
          border-radius: 40px;
          font-size: 18px;
          font-weight: 400;
          letter-spacing: 10px;
          color: #FFFFFF;
        }
      }
    }
  }
}

</style>