@import "~@/assets/style/public.scss";
html{font-size:16px;} 
.login-page {
  // 底层背景
  width: 100%;
  height: 100%;
  background-image: url(./login-img/bg2x.png) ;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  .logo {
    img {
      width: 18rem;
      height: 2.5rem;
      position: absolute;
      top: 2.2rem;
      left: 2.5rem;
      z-index: 999;
    }
  }
  // 登录表单
  .form-group {
    width: 100rem;
    height: 50rem;
    background-image: url(./login-img/formbg2x.png);
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
        .el-input-group__prepend{
          background-color: transparent !important;
            
        }

    // 表单整体
    .el-card {
      position: relative;
      left: 65.5rem;
      top: 6.5rem;
      width: 32.8rem;
      background: none;
      border: none;
      .login-title {
          text-align: center;
          transform: translateX(-2.3rem);
          font-size:2rem;
          font-family:Microsoft YaHei;
          font-weight:400;
          color:rgba(53,175,247,1);
          margin-bottom: 5rem;
      }
      .el-card__body {
        padding: 0;
      }
      .el-form-item {
        margin-bottom: 2.5rem;
      }
      .el-input__inner {
        height: 3rem;
        text-indent: 2.7rem;
        transform: translateX(-4.25rem);
        background-color: rgba(255, 255, 255, 0.1) !important;
        border-color: #ccc;
        border-radius: 4px;
      }
    }

    // 输入框左边的图表区域缩窄
    .el-input-group__prepend {
      padding: 0px 1.4rem;
      border: none;
      background: none;
    }
    // 小图标
    .icon_img{
      width:1.5rem;
      height:1.5rem;
      vertical-align:middle;
    }

    .login-btn {
      width: 28rem;
      height: 2.5rem;
      color: white;
      background: #35AFF8;
      border-radius: 20px;
      margin-top: 3.8rem;
      font-family:Microsoft YaHei;
      font-weight:400;
    }
    
    // 验证码框
    .authCode-input {
      width: 20rem ;
    }
    // 验证码图片
    .login-code {
      width: 11.5rem ;
      height: 3rem ;
      float: right;
      margin-right: 1.7rem;
    }
  }
  // 记住密码
  .el-checkbox__inner{
    border-radius: 50%;

  }
  .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    border-radius: 50%;
    background-color:#35AFF8;
    border-color: #35AFF8;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
  color:  #606266;
}
.el-checkbox__inner:hover {
  border-color: #35AFF8;
}
.el-checkbox__input.is-focus .el-checkbox__inner{
  border-color: #35AFF8;
}
.el-checkbox {
  color: #606266;
}


.lFooter{
  width: 100%;
  font-size:12px;
  font-family:Microsoft YaHei;
  color:rgba(255,255,255,0.75);
  position: absolute;
  bottom: 1.2rem;
  text-align:center;
}



  // 帮助按钮
  .button-help {
    width: 30rem;
    margin-top: 2rem;
  }
  .user-btn {
    @extend %flex-center-col;
    @extend %unable-select;
    padding: 10px 0px;
    border-radius: 4px;
    &:hover {
      background-color: $color-bg;
      i {
        color: $color-text-normal;
      }
      span {
        color: $color-text-normal;
      }
    }
    i {
      font-size: 36px;
      color: $color-text-sub;
    }
    span {
      font-size: 12px;
      margin-top: 10px;
      color: $color-text-sub;
    }
  }
}
  @media only screen and (min-width: 300px) and (max-width: 1600px) {
    html {
      font-size: 12px !important;
      
    }
    .login-btn {
      line-height: 0.7rem;
    }
  }
  @media only screen and (min-width: 1600px) {
    html {
      font-size: 13px !important;
    }
    .login-btn {
      line-height: 0.7rem;
    }

  }
  

  @media only screen and (min-width: 1680px) {
    html {
      font-size: 14px !important;
    }
  }
  