parking_h5_all/pages/geomagnetismLock/geomagnetismLock.scss

.parking-lock {
  height: calc(100vh - 88rpx);
  background-color: #f6f6ff;
  padding-top: 50rpx;
  .parking-lock-title {
    font-size: 46rpx;
    color: #292929;
    text-align: center;
    padding-top: 31rpx;
    line-height: 65rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }
  .parking-lock-tips {
    width: calc(100% - 72rpx);
    font-size: 30rpx;
    color: #777777;
    text-align: center;
    margin: 10rpx auto;
    line-height: 47rpx;
  }
  .parking-lock-info {
    width: calc(100% - 72rpx);
    margin: 30rpx auto;
    background-color: #fff;
    border-radius: 15rpx;
    padding: 39rpx 41rpx;
    .parking-lock-info-item {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;

      &:last-child {
        margin-bottom: 0;
      }
      
      view {
        font-size: 28rpx;
        &:first-child {
          width: 30%;
          color: #2a2a2a;
          font-weight: 500;
        }
        &:last-child {
          color: #6e6e6e;
        }
      }
      .weight {
        color: #f00 !important;
        font-weight: 500;
				font-size: 34rpx;
      }
      .really-money {
        color: #fa7319 !important;
      }
    }
  }
  .parking-lock-pay-btn {
    width: calc(100% - 72rpx);
    margin: 0 auto 30rpx;
    button {
      width: 100%;
      height: 100rpx;
      line-height: 100rpx;
      background-color: #008cff;
      border: none;
      color: #fff;
      box-shadow: 0px 7px 13px 0px rgba(16, 153, 250, 0.31);
      font-size: 28rpx;
      font-weight: 500;
    }
  }
  .parking-lock-begin-box {
    width: 441rpx;
    height: 441rpx;
    line-height: 441rpx;
    background: #31a2ff;
    background: linear-gradient(270deg, rgba(49, 162, 255, 0.1) 20%, rgba(49, 162, 255, 1) 100%);
    border-radius: 50%;
    text-align: center;
    margin: 0 auto;
    // animation: spin 3s linear infinite;
    .parking-lock-begin-bg {
      display: inline-block;
      width: 420rpx;
      height: 420rpx;
      line-height: 420rpx;
      vertical-align: middle;
      border: solid 12rpx #fff;
      background: linear-gradient(346deg, #008cff 0%, #95cfff 100%);
      border-radius: 50%;
      image {
        width: 194rpx;
        height: 239rpx;
        vertical-align: middle;
      }
    }
  }
  .parking-lock-begin-info {
    text-align: center;
    font-size: 50rpx;
    color: #008cff;
    margin-top: 57rpx;
  }
  .parking-lock-loading-box {
    width: 441rpx;
    height: 441rpx;
    line-height: 441rpx;
    background: #31a2ff;
    background: linear-gradient(0deg, rgba(49, 162, 255, 0.1) 20%, rgba(49, 162, 255, 1) 100%);
    border-radius: 50%;
    text-align: center;
    margin: 0 auto;
    animation: spin 3s linear infinite;
    .parking-lock-loading-bg {
      display: inline-block;
      width: 420rpx;
      height: 420rpx;
      line-height: 420rpx;
      vertical-align: middle;
      border: solid 12rpx #fff;
      background: linear-gradient(346deg, #008cff 0%, #95cfff 100%);
      border-radius: 50%;
      image {
        width: 194rpx;
        height: 239rpx;
        vertical-align: middle;
      }
    }
  }
  .parking-lock-loading-info {
    text-align: center;
    font-size: 50rpx;
    color: #008cff;
    margin-top: 57rpx;
  }
  .parking-lock-success {
    .parking-lock-success-box {
      width: 441rpx;
      height: 441rpx;
      margin: 0 auto;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .parking-lock-success-info {
      color: #4ccd8a;
      font-size: 50rpx;
      text-align: center;
      margin: 56rpx 0 202rpx;
    }
    .parking-lock-success-button {
      width: calc(100% - 80rpx);
      margin: 0 auto;
      button {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        background-color: #008cff;
        font-size: 28rpx;
        color: #fff;
      }
    }
  }
}
.pay-way {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 34rpx);
  border-top: solid 1px #979797;
  margin: 23rpx auto;
  padding: 38rpx 86rpx;
  .pay-way-item {
    text-align: center;
    font-size: 30rpx;
    color: #5f5f5f;
    image {
      width: 143rpx;
      height: 143rpx;
    }
  }
}
.pay-way-close-btn {
  width: calc(100% - 34rpx);
  margin: 0 auto 68rpx;
  border: none;
  background-color: #3397fa;
  color: #fff;
  border-radius: 10rpx;
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(200deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(359deg);
  }
}
.loadingSelect {
  text-align: center;
  margin-top: 20rpx;
}
.spinner {
  margin: auto;
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 10px;
}

.spinner > view {
  background-color: #6495ed;
  height: 100%;
  width: 10rpx;
  margin-right: 2rpx;
  display: inline-block;

  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}

@keyframes stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}
.new-plate-number {
  margin-bottom: 70rpx;
}
.message-input-wrap {
  margin: 0 -40rpx;
}
.message-input-wrap /deep/ .u-input ~ uni-view:last-of-type .u-char-item {
  background-color: #e8ffe8;
}
.really-license-txt {
  color: #008cff;
}
.really-license-txt1 {
  color: #008cff;
  margin: 20rpx;
}
.popup-vehicleNo-title {
  font-size: 48rpx;
  text-align: center;
  padding-top: 20rpx;
}
.popup-vehicleNo-center {
  width: 95%;
  height: 2rpx;
  border-top: solid rgb(146, 146, 146) 2rpx;
  margin: 30rpx 20rpx 50rpx 20rpx;
}
.popup-vehicleNo-select {
  text-align: center;
  color: #777777;
}
.vehicleNo-btn {
  display: flex;
  margin: 40rpx 0;
}
.parking-lock-pay-attention {
  margin: 50rpx;
  line-height: 48rpx;
  color: #777777;
}