$dark_gray: #889aa4;
//以下为验证过的配置
//$bg: linear-gradient(to right, #12b1b7 0%,#12b1b7 50%,#dee2eb 50%,#dee2eb 100%);
$bg:#ffffff;
$tab_normal:#444444 !important;
$tab_font_size: 16px !important;
$tab_active:#12b1b7 !important;
$font_default_color:#444444;
$font_default_size:12px;
$font_color_clear:#F56C6C;
.code{
  width: 100px;
  height: 40px;
  background-color: #ef7c26;
  color: white;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  border-radius: 5px;
}

.login-container {
  min-height: 100%;
  width: 100%;
  //background: $bg;
  overflow: hidden;
  background-image: url("../../assets/defaults/login/back.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
  .login {
    width: 330px;
    height: 340px;
    position: fixed;
    left: calc(75% - 165px);
    top: calc(35% - 150px);
    //background-color: #ffffffa2;
    background-color: #d0e7f8a2;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    .header {
      width: 100%;
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px dashed #bebebe;
      .logo {
        height: 52px;
        width: 142px;
        background: url("../../assets/defaults/login/logo.png") no-repeat;
        position: fixed;
        left: calc(75% - 71px);
        top: calc(40% - 180px - 10%);
      }
      .scan-enter{
        //标题全局居中，则需要把此图片绝对定位，如果是相对居中，则注释以下三行
        position:absolute;
        right: 0px;
        top:0px;
        width:56px;
        height: 56px;
        background-repeat: no-repeat;
        border: 0;
        background-position: -4px 0px;
        cursor: pointer;
        border-radius: 0px 20px;
      }
      .scan{
        background-image: url("../../assets/defaults/login/scan.png");
      }
      .normal{
        background-image: url("../../assets/defaults/login/normal.png");
      }
      .app-name{
        min-width: 276px;
        span {
          display: block;
          font-size: 24px;
          color: $font_default_color;
          line-height: 30px;
          letter-spacing: 1px;
          font-weight: bold;
          height: 30px;
          text-align: center;
        }
      }
    }
  }
  .scan-area{
    width: 100%;
    height: 300px;
    flex-direction: column;
    display: flex;
    align-items: center;
    .scan-code{
      width: 200px;
      height: 200px;
      margin: 20px 20px 10px 20px;
    }
    .scan-message{
      line-height: 30px;
      color:$font_default_color;
      text-align: center;
      width: 100%;
    }
  }
  .tabs {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    height: 260px;
    .el-tabs {
      width: 90%;
    }
    .el-tabs__nav-scroll{
      align-items: flex-start;
      justify-content: flex-start;
      padding-left: 60px;
    }
    .el-tabs__item{
      font-size: $tab_font_size;
      color: $tab_normal;
    }
    .el-tabs__item.is-active {
      color: $tab_active;
      font-size: $tab_font_size;
    }
    .el-tabs__active-bar{
      background-color: $tab_active;
    }
    .el-tab-pane {
      width: 100%;
      height: 200px;
      .tabsItem {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        .iconfont::before{
          color: $tab_active;
          margin: 5px 5px;
        }
        span {
          margin-right: 5px;
        }
        .getcode {
          height: 37px;
          padding: 10px 10px;
          margin-right: 5px;
          color: $bg;
          background-color: $tab_active;
          border: solid 1px $tab_active;
          span {
            margin-right: 0px;
          }
        }
        .title {
          font-size: 20px;
          width: 80px;
          border-bottom: 0px;
          height: inherit;
          text-align: right;
          display: none;
        }
        .inputBox {
          width: 290px;
          border-radius: 5px;
          overflow: hidden;
          border: 1px solid #a8a8a8;
          display: flex;
          justify-content: flex-start;
          background-color: $bg;
          color: $font_default_color;
          font-size: 24px;
          margin: 0px 5px;
          input {
            color: $font_default_color;
            background: transparent;
            border: 0px;
            -webkit-appearance: none;
            border-radius: 0px;
            padding: 12px 5px 12px 15px;
            height: 35px;
            font-size: 16px;
            //&:-webkit-autofill {
            //  box-shadow: 0 0 0px 1000px $bg inset !important;
            //  -webkit-text-fill-color: $cursor !important;
            //}
          }
          .el-input__clear:before{
            color: $font_default_color;
            font-size: 20px;
          }
          .el-icon-circle-close:before{
            color: $font_color_clear;
          }
        }
        .messagecode {
          width: 170px;
          margin-right: 10px;
        }
      }
      .buttonBox {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        padding: 0px 10px;
        .el-checkbox__label{
          color:$font_default_color;
        }
        .el-link--inner{
          color: $tab_active;
        }
        button {
          width: 110px;
          height: 45px;
          font-size: 20px;
          border-radius: 6px;
          cursor: pointer;
        }
        .register {
          background-color: $bg;
          border: 1px solid $tab_active;
        }
        .loginBtn {
          background-color: $tab_active;
          color: $bg;
          border: 1px solid $tab_active;
        }
      }
    }
  }
  .selectUserLogin{
    color: #808080;
    .title{
      margin-top: 20px;
      font-size: 24px;
      text-align: center;
    }
    .apps{
      margin:10px 15px;
      display: flex;
      justify-items: center;
      justify-content: center;
      flex-wrap: wrap;
      height: 200px;

      div{
        height:80px;
        width: 80px;
        margin: 10px 10px;
        text-align: center;
        cursor: pointer;
        color:$font_default_color;
      }
      img{
        display: block;
        margin: 10px auto;
        width: 48px;
        height:48px;}
    }
  }
}
input[type="password"]::-ms-reveal{
  display:none
}