peko-h5/view/peko/modules/identity/css/index.scss

@function px2rem($px, $rem:75) {
  @return $px/$rem+rem;
}

@import '../../../common/css/flex.scss';

@font-face {
  font-family: 'pingfang';
  src: url('../fonts/PingFangSCRegular.ttf');
  src: url('../fonts/PingFangSCRegular.ttf') format('woff'),
    url('../fonts/PingFangSCRegular.ttf') format('truetype'),
    url('../fonts/PingFangSCRegular.ttf') format('svg');
}

html,
body {
  font-family: 'pingfang';
  background-color: #1C1B22;
}

img {
  width: 100%;
  vertical-align: top;
}

.container {
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: px2rem(307);
  margin-bottom: px2rem(60);
  padding-bottom: px2rem(60);
  width: px2rem(690);

  // background: #fff;
  background-color: #2A2A39;
  border-radius: px2rem(24);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;

  .top {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }

  .form-wrapper {
    margin: 0 auto;
    // width: px2rem(710);
    // background: #fff;
    // border-radius: 4px;
    // box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    padding: px2rem(38) px2rem(30);
    box-sizing: border-box;
    .list {
      margin-bottom: px2rem(29);

      p {
        font-size: px2rem(32);
        color: #C6C6E9;
      }

      .input-wrapper {
        padding: px2rem(20) 0;
        border-bottom: 1px solid #353548;
        @include flex();
        @include flex-align-center();
        @include flex-justify-between();
      }

      input {
        font-size: px2rem(28);
        width: px2rem(420);
        outline: none;
        background-color: #2A2A39;
        caret-color: white;
        color: white;
      }

      input::-webkit-input-placeholder {
        color: #4F516A;
      }

      input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #4F516A;
      }

      input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #4F516A;
      }

      input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #4F516A;
      }
    }

    .button-identity-code {
      width: px2rem(186);
      height: px2rem(50);
      line-height: px2rem(50);
      color: #fff;
      // background: #8776FF;
      background-image: linear-gradient(to right, #218EFF, #7727E4);
      border-radius: px2rem(25);
      text-align: center;

      &.disable {
        background: #DBDBDB;
      }
    }
  }

  .rules-wrapper {
    margin-top: px2rem(0);
    padding: 0 px2rem(38);

    .title {
      font-size: px2rem(30);
      font-weight: bold;
      margin-bottom: px2rem(12);
      color: white;
    }

    p {
      line-height: px2rem(40);
      font-size: px2rem(24);
      color: #C6C6E9;
    }
  }

  .button-submit {
    text-align: center;
    background: linear-gradient(to right, #218EFF, #7727E4);
    width: px2rem(320);
    margin: 0 auto;
    color: #fff;
    height: px2rem(80);
    line-height: px2rem(80);
    border-radius: px2rem(40);
    margin-top: px2rem(30);
    margin-bottom: px2rem(30);
    font-size: px2rem(32);
  }
}

.toast {
  position: absolute;
  width: 80%;
  background: rgba(0, 0, 0, 0.8);
  border-radius: px2rem(18);
  color: #fff;
  text-align: center;
  line-height: px2rem(70);
  font-size: px2rem(28);
  left: 50%;
  margin-left: -40%;
  bottom: 10%;
  display: none;
}

.hidden-form {
  display: none;
}

.status-mask {
  position: absolute;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  display: none;

  .wrapper {
    width: 8rem;
    height: 8rem;
    border-radius: px2rem(8);
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    margin: auto;
    background: #fff;
    @include flex();
    @include flexv();
    @include flex-justify-center();
    @include flex-align-center();
  }

  .pic {
    width: 4.066667rem;
    height: 4.133333rem;
    //background: red;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .text {
    font-size: .426667rem;
    line-height: .533333rem;
    margin-bottom: px2rem(20);
    margin-top: px2rem(-20);
  }

  .tips {
    color: #666666;
    font-size: px2rem(24);
  }

  .goto-change {
    width: 3.786667rem;
    height: 1.013333rem;
    background: rgba(57, 235, 223, 1);
    border: 2px solid rgba(51, 51, 51, 1);
    border-radius: .506667rem;
    margin-top: .48rem;
    font-size: .4rem;
    color: rgba(51, 51, 51, 1);
    outline: none;
  }

  &.success {
    .tips {
      display: none;
    }

    .pic {
      background-image: url("../images/success.png");
    }
  }

  &.have-identity {
    .pic {
      background-image: url("../images/have_identity.png");
    }
  }

  &.failed {
    .pic {
      background-image: url("../images/failed.png");
    }

    .tips {
      color: #f34e48;
    }
  }
}

#agree {
  display: none;

  &:checked {
    &+.agree-text {
      .icon {
        &:before {
          background: #735FFE;
        }
      }
    }

  }
}

.agree-wrapper {
  text-align: center;
  color: white;
  .icon {
    display: inline-block;
    position: relative;
    width: px2rem(28);
    height: px2rem(28);
    vertical-align: top;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid #735FFE;

    &:before {
      content: '';
      position: absolute;
      width: px2rem(12);
      height: px2rem(12);
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      border-radius: 50%;
      //background: red;
    }
  }

  .agree-text {
    font-size: px2rem(28);
  }
}

a {
  color: #735FFE;
}

.layer-box {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  z-index: 1001;
  display: none;
}

.layer-box-2 {
  .layer-content {
    position: fixed;
    width: 7.333333rem;
    height: 5.333333rem;
    background: url(../images/layer-bg.png) no-repeat;
    background-size: 100% 100%;
    left: 50%;
    top: 50%;
    margin-left: -3.666667rem;
    margin-top: -2.666667rem;
    padding-top: .773333rem;
    box-sizing: border-box;

    .layer-2-close {
      width: 2.8rem;
      height: 1.013333rem;
      display: block;
      position: absolute;
      bottom: .8rem;
      outline: none;
      left: .693333rem;
    }

    .goto-change-layer {
      width: 2.8rem;
      height: 1.013333rem;
      position: absolute;
      bottom: .8rem;
      outline: none;
      right: .693333rem;
    }
  }
}

.hide {
  display: none;
}

a,
a:hover,
a:active,
a:visited,
a:link,
a:focus {

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  -webkit-tap-highlight-color: transparent;

  outline: none;

  background: none;

  text-decoration: none;

}