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

@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: 4.09333rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.8rem;
  width: 9.2rem;
  background-color: #2A2A39;
  border-radius: 0.32rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

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

.container .form-wrapper {
  margin: 0 auto;
  padding: 0.50667rem 0.4rem;
  box-sizing: border-box;
}

.container .form-wrapper .list {
  margin-bottom: 0.38667rem;
}

.container .form-wrapper .list p {
  font-size: 0.42667rem;
  color: #C6C6E9;
}

.container .form-wrapper .list .input-wrapper {
  padding: 0.26667rem 0;
  border-bottom: 1px solid #353548;
  display: flex;
  display: -moz-box;
  -ms-align-items: center;
  align-items: center;
  -ms-justify-content: space-between;
  justify-content: space-between;
}

.container .form-wrapper .list input {
  font-size: 0.37333rem;
  width: 5.6rem;
  outline: none;
  background-color: #2A2A39;
  caret-color: white;
  color: white;
}

.container .form-wrapper .list input::-webkit-input-placeholder {
  color: #4F516A;
}

.container .form-wrapper .list input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #4F516A;
}

.container .form-wrapper .list input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #4F516A;
}

.container .form-wrapper .list input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #4F516A;
}

.container .form-wrapper .button-identity-code {
  width: 2.48rem;
  height: 0.66667rem;
  line-height: 0.66667rem;
  color: #fff;
  background-image: linear-gradient(to right, #218EFF, #7727E4);
  border-radius: 0.33333rem;
  text-align: center;
}

.container .form-wrapper .button-identity-code.disable {
  background: #DBDBDB;
}

.container .rules-wrapper {
  margin-top: 0rem;
  padding: 0 0.50667rem;
}

.container .rules-wrapper .title {
  font-size: 0.4rem;
  font-weight: bold;
  margin-bottom: 0.16rem;
  color: white;
}

.container .rules-wrapper p {
  line-height: 0.53333rem;
  font-size: 0.32rem;
  color: #C6C6E9;
}

.container .button-submit {
  text-align: center;
  background: linear-gradient(to right, #218EFF, #7727E4);
  width: 4.26667rem;
  margin: 0 auto;
  color: #fff;
  height: 1.06667rem;
  line-height: 1.06667rem;
  border-radius: 0.53333rem;
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
  font-size: 0.42667rem;
}

.toast {
  position: absolute;
  width: 80%;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 0.24rem;
  color: #fff;
  text-align: center;
  line-height: 0.93333rem;
  font-size: 0.37333rem;
  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;
}

.status-mask .wrapper {
  width: 8rem;
  height: 8rem;
  border-radius: 0.10667rem;
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  margin: auto;
  background: #fff;
  display: flex;
  display: -moz-box;
  flex-direction: column;
  -ms-justify-content: center;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
}

.status-mask .pic {
  width: 4.066667rem;
  height: 4.133333rem;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.status-mask .text {
  font-size: .426667rem;
  line-height: .533333rem;
  margin-bottom: 0.26667rem;
  margin-top: -0.26667rem;
}

.status-mask .tips {
  color: #666666;
  font-size: 0.32rem;
}

.status-mask .goto-change {
  width: 3.786667rem;
  height: 1.013333rem;
  background: #39ebdf;
  border: 2px solid #333333;
  border-radius: .506667rem;
  margin-top: .48rem;
  font-size: .4rem;
  color: #333333;
  outline: none;
}

.status-mask.success .tips {
  display: none;
}

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

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

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

.status-mask.failed .tips {
  color: #f34e48;
}

#agree {
  display: none;
}

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

.agree-wrapper {
  text-align: center;
  color: white;
}

.agree-wrapper .icon {
  display: inline-block;
  position: relative;
  width: 0.37333rem;
  height: 0.37333rem;
  vertical-align: top;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #735FFE;
}

.agree-wrapper .icon:before {
  content: '';
  position: absolute;
  width: 0.16rem;
  height: 0.16rem;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
}

.agree-wrapper .agree-text {
  font-size: 0.37333rem;
}

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-box-2 .layer-content .layer-2-close {
  width: 2.8rem;
  height: 1.013333rem;
  display: block;
  position: absolute;
  bottom: .8rem;
  outline: none;
  left: .693333rem;
}

.layer-box-2 .layer-content .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;
}