@import '@/assets/bundle.scss';

 

.auth-index {
  .auth-content {
    position: fixed;
    left: 0;
    right: 0;
    top: 10%;
    .app-icon {
      @extend %flex-center;
      flex-flow: column;
      padding-bottom: 10%;
      &-img{
        width: 120rpx;
        height: 120rpx;
        border-radius: 20rpx;
        border: 1rpx solid $border2;
      }
    }
    // .logo{
    //   width: 350rpx;
    //   height: 350rpx;
    //   // margin-top: 100rpx;
    // }

    .wxLogin,.account-but{
      border-radius: 10px;
      height: 90rpx;
      color: #fff !important;
      font-size: 30rpx;
      text-align: center;
      line-height: 90rpx;
    }

    .wxLogin{
      background-color: #4EB331;
    }

    .account-but{
      background-color: #5fc3ce;
      margin-top:20px
    }
    
    .app-title {
      font-size: 32rpx;
      font-weight: 600;
      color: $text1;
      margin-top: 20rpx;
    }
    .auth-btn-group {
      // @extend %pd20;
      padding: 40rpx;
      // @extend %flex-center;
      button {
        height: 90rpx;
        background: $maincolor;
        color: white;
        font-size: 30rpx;
        @extend %flex-center;
      }
      div {
        height: 90rpx;
        // background: $maincolor;
        color: $primary;
        font-size: 28rpx;
        @extend %flex-center;
      }
     
    }

    // 账号密码登录
    .account{
      padding-top: 20rpx;
      padding-bottom: 80rpx;
      padding-left: 160rpx;
      padding-right:160rpx;
      // padding:80rpx 160rpx;
      // border: 1rpx solid red;
      box-sizing: border-box;
      text-align: center;
      font-size: 30rpx;
     
      &-title{
        // border:1rpx solid red;
        margin-bottom: 30rpx;
        font-weight: bold;
        color:#021d1d;
      }
      &-box{
        border-bottom:1rpx solid #aaa;
        text-align: left;
        padding: 20rpx;
      }
      &-button{
        border-radius: 10px;
        margin-top:40rpx;
        height: 90rpx;
        background: $maincolor;
        color: white;
        font-size: 30rpx;
        @extend %flex-center;
      }
    }
  }

  .info {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 60rpx;
    color: rgb(126, 126, 126);
    font-size: 28rpx;
  }


  .auth-footer {
    position: fixed;
    bottom: 5%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 28rpx;
    color: $text3;
    // #ifndef MP-WEIXIN
    font-size: 36rpx;
    // #endif
    .span {
      color: $maincolor;
    }
  }
  
// #ifdef APP-PLUS || APP
  // 绑定手机号的弹框
  // .modal{
  //   position:relative;
  //   &-border{
  //     // position: absolute;
  //     // bottom: 0;
  //     // width:100vw;
  //     height:40vh;
  //     background:#fff;
  //     padding: 10px;
  //     border-top-left-radius: 10px;
  //     border-top-right-radius: 10px;
  //     box-shadow: 0px 0px 5px #ccc
  //   }
  //   .title{
  //     text-align: center;
  //     font-size: 28px;
  //   }
  //   .description-text{
  //     text-align: center;
  //     margin:10px auto;
  //     color: rgb(162, 161, 161);
  //     width: fit-content;
  //     font-size: 14px;
  //   }
  //   .error-text{
  //     // color:rgb(255, 0, 0);
  //     width: 28px;
  //     height: 28px;
  //     // border:1px solid red;
  //     position: absolute;
  //     right:40px;
  //     top:100px;
  //   }
  //   .input-border{
  //     margin-top:20px;
  //     text-align: center;
  //     // border:1px solid #eee;
  //     height:30px;
  //     line-height: 30px;
  //   }
  //   .input{
  //     font-size: 20px !important;
  //   }
  //   .but-bind,.but-cancel{
  //     margin-top: 20px;
  //   }
  // }
  // #endif

  // #ifdef MP-WEIXIN || APP-PLUS || MP-KUAISHOU
  .box{
    width:100vw;
    height: 100vh;
    background-color: rgba(96, 96, 96, 0.2);
    .content{
      width: 750rpx;
      box-sizing: border-box;
      background-color: #fff;
      // height: 70%;
      position: fixed;
      left: 0;
      bottom: 0;
      border-top-right-radius: 40rpx;
      border-top-left-radius: 40rpx;
      padding: 30rpx;
    }

    .modal-border{
      height:40vh;
      background:#fff;
      padding: 10px;
    }
  
    .title{
      text-align: center;
      font-size: 28px;
    }

    .description-text{
      text-align: center;
      margin:10px auto;
      color: rgb(162, 161, 161);
      width: fit-content;
      font-size: 14px;
    }

    .error-text{
      // color:rgb(255, 0, 0);
      width: 28px;
      height: 28px;
      // border:1px solid red;
      position: absolute;
      right:40px;
      top:100px;
    }

    .input-border{
      margin-top:20px;
      text-align: center;
      // border:1px solid #eee;
      height:30px;
      line-height: 30px;
    }

    .input{
      font-size: 20px !important;
    }

    .but-bind,.but-cancel{
      margin-top: 20px;
    }

    .title{
      font-weight: bold;
      font-size: 30rpx;
    }
    .text{
      font-size: 28rpx;
      color: rgb(69, 69, 69);
      margin: 10px;
    }
    .userAgree,.privacyAgree{
      color:#4EB331;
      font-size: 30rpx;
    }
    .bottom{
      display: flex;
      justify-content: space-around;
      margin-top: 40rpx;
      width: 100%;
    }
    .refuse,.agree{
      width: 260rpx;
      font-size: 30rpx;
      border-radius: 40rpx;
    }
    .refuse{
      color: #4EB331 !important;
      background: #ffffff;
      border: 1rpx solid #4EB331;
      
    }
    .agree{
      color: #fff !important;
      background: #4EB331;
    }
  }
  // #endif
}