parking_h5_all/pages/roadGateSystem/roadGateSystem.scss

.parking-lock {
	height: calc(100vh - 88rpx);
	background-color: #F6F6FF;
	padding-top: 10rpx;

	&-pay {
		margin-bottom: 30rpx;
	}
	.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;
			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: #2A2A2A!important;
				font-weight: 500;
			}
			.really-money {
				color: #FA7319!important;
			}
		}
	}
	.parking-lock-pay-btn {
		width: calc(100% - 72rpx);
		margin: 0 auto;
		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: -1.0s;
  animation-delay: -1.0s;
}
 
.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.0) }
}
 
@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
.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;
}