.e-study-card {
  font-family: PingFangSC-Regular, PingFangSC, serif;
  height: 100%;

  .err-msg {
    font-size: vw(12);
    bottom: 0;
    color: #ff2020;
    height: vw(25);
    line-height: vw(25);
    padding-left: vw(16);
  }

  //实体卡输入卡密页面
  .input-code {
    height: 100%;
    background: url($baseUrl+"static/images/bg@2x.png") 0 0 no-repeat;
    background-size: 100% 100%;

    .schoolName {
      text-align: center;
      color: #fff;
      margin: auto;
      width: vw(160);
      padding: vw(24) 0;
    }

    .input-code__field {
      position: absolute;
      top: 64.6%;
      width: 88%;
      left: 0;
      right: 0;
      margin: auto;
      padding-right: vw(12);
      height: vw(44);
      line-height: vw(44);
      background: rgb(241, 243, 248);
      border-radius: vw(4);
      box-sizing: border-box;

      .van-cell {
        background-color: transparent;
      }

      .van-field {
        padding: 0;
        line-height: vw(44);
      }

      .van-field__body {
        padding-left: vw(20);
      }

      .van-field__error-message {
        line-height: vw(26);
        padding-left: vw(16);
      }


    }

    .submit {
      position: absolute;
      bottom: vw(48);
      margin: auto;
      left: 0;
      right: 0;
      width: 80%;
      opacity: .5;
      color: #408FFB;
      transition: opacity .3s;

      &.active {
        opacity: 1;
      }

    }
  }

  //卡密正确
  .valid-card {
    background-color: #f8f8f8;
    height: 100%;
    overflow: hidden;

    .container {
      height: 100%;
      margin-top: vw(13);
      background-color: #fff;
    }

    .top {
      font-size: vw(16);
      width: vw(180);
      padding: vw(20) 0 vw(12);
      text-align: center;
      color: #333;
      margin: auto;
    }

    .middle {

      color: #fff;

      .card {
        margin: auto;
        background: url($baseUrl+'static/images/card-bg.png') 0 0 no-repeat;
        background-size: 100% 100%;
        width: vw(345);
        height: vw(180);

        .valid-date {
          font-size: vw(12);
          padding: vw(12) vw(24) 0;
        }

        .money {
          font-size: vw(48);
          padding: vw(31) 0 vw(4) vw(24);
          text-shadow: 0 vw(2) vw(2) #666;
          display: flex;
          align-items: center;

          span {
            padding-left: vw(4);
            font-size: vw(24);
          }
        }

        .password {
          padding-left: vw(24);
          font-size: vw(18);
        }
      }

      .result-box {
        margin: auto;
        padding-top: vw(80);
        display: flex;
        justify-content: center;


        .result-box__valid-card {
          color: #333;
          text-align: center;

          .link {
            color: #408FFB;
            text-decoration: underline;
          }
        }

        .result-box__invalid-card--process-is-done {
          color: #E7E9ED;
          text-align: center;

          .icon {
            display: flex;
            align-items: center;
            justify-content: center;

            > span {
              padding-left: vw(10);
              color: #999;
              font-size: vw(20);
              font-weight: 600;
            }
          }

          .icon-Fail {
            font-size: vw(36);
          }

          > span {
            color: #999;
            padding-left: vw(12);
            line-height: vw(40);
            font-size: vw(20);
          }

          .res-msg {
            width: 100%;
            text-align: center;
            padding-top: vw(12);
            color: #333;
          }
        }

        .result-box__valid-card--process-is-done {
          text-align: center;
          color: #333;

          .icon {
            display: flex;
            align-items: center;
            justify-content: center;

            > span {
              padding-left: vw(10);
              color: #408FFB;
              font-size: vw(20);
              font-weight: 600;
            }
          }

          .result-box__icon-Success {
            display: inline-block;
            height: vw(55);
            width: vw(71);
            background: url($baseUrl+'static/images/study_card_success.svg') 0 0 no-repeat;
          }


        }

      }
    }

    .bottom {
      position: absolute;
      bottom: 8%;
      width: 100%;

      .van-button {
        width: vw(305);
        height: vw(44);
        margin: auto;
      }
    }
  }

  .login {
    .login__container {
      padding: vw(48) vw(35) vw(20);

      .receive-login-input {
        position: relative;

        .van-cell {
          background-color: transparent;
          line-height: vw(44);
          padding: 0;
        }

        .van-field__body {
          padding-left: vw(20);
        }

        .van-field__error-message {
          line-height: vw(26);
          padding-left: vw(16);
        }

        margin: 0 auto vw(34) auto;
        padding-right: vw(9);
        box-sizing: border-box;
        width: vw(305);
        height: vw(44);
        line-height: vw(44);
        background: rgb(241, 243, 248);
        border-radius: vw(4);

        .code-btn {
          text-align: center;
          min-width: vw(90);
          padding: 0 vw(6) 0 vw(15);
          height: vw(28);
          line-height: vw(28);
          box-sizing: border-box;
          border-left: vw(1) solid #ddd;
          color: #408FFB;
          opacity: 1;
        }


        .code-btn--disabled {
          opacity: .5;
        }
      }

      .login__container__button {
        color: rgba(64, 143, 251, 1);
        padding: vw(4) vw(0) vw(4) vw(15);
        border-left: vw(1) solid #ddd;
        opacity: .5;

        &.active {
          opacity: 1;
        }
      }

      .receive-login__text {
        color: #999;
        text-align: center;
        padding-top: vw(40);
        height: vw(70);

        .receive-login-tools {
          margin-top: vw(50);
          display: inline-block;
          position: relative;
          font-size: vw(12);

          &::before {
            position: absolute;
            left: vw(-25);
            top: vw(8);
            content: '';
            height: vw(2);
            width: vw(18);
            background: linear-gradient(90deg, transparent, #ddd);
          }

          &::after {
            position: absolute;
            right: vw(-25);
            top: vw(8);
            content: '';
            height: vw(2);
            width: vw(18);
            background: linear-gradient(270deg, transparent, #ddd);
            /* 标准的语法 */
          }
        }
      }

      .third-part-login {
        text-align: center;

        .third-part-login-tools {
          display: inline-block;
          position: relative;
          font-size: vw(12);

          &::before {
            position: absolute;
            left: vw(-115);
            top: vw(8);
            content: '';
            height: vw(1);
            width: vw(108);
            background: #ddd;
          }

          &::after {
            position: absolute;
            right: vw(-115);
            top: vw(8);
            content: '';
            height: vw(1);
            width: vw(108);
            background: #ddd;
            /* 标准的语法 */
          }
        }
      }

      .receive-login__btn {
        text-align: center;
        margin: vw(20) auto 0;
        height: vw(40);
        line-height: vw(40);
        color: #fff;
        background: rgb(79, 144, 243);
        border-radius: vw(4);
        opacity: 1;
      }

      .disabled__btn {
        opacity: .5;
      }

      .mobile-drag {
        margin: auto;
        padding-bottom: vw(20);
      }

      .mobile-drag-content {
        .e-drag {
          margin: auto;
        }
      }

      .reset-password {
        position: absolute;
        right: 0;
        bottom: vw(-28);
        height: vw(28);
        line-height: vw(28);
        color: #B3B3B3;
        text-align: right;
        font-size: vw(12);
      }

      .choice-bar {
        height: vw(36);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: vw(12);

        .left {
          color: #777;
        }

        .right {
          color: #408FFB;
        }
      }
    }
  }
}

