veterans_H5/h5_web/pages/progressiveIntegral/progressiveIntegral.scss

/* 进步积分 */
.integral {
	min-height: 100vh;
	background-color: #F2F2F2;
	&-bg {
		height: 560rpx;
		margin-top: -44px;
		background-image: url(../../static/img/progressive-integral-bg.png);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	&-content {
		// margin-top: -472rpx;
		&-header {
			text-align: center;
			font-size: 28rpx;
			color: rgba($color: #fff, $alpha: 0.5);
			position: relative;
			&-grade {
				font-size: 120rpx;
				color: #FFFFFF;
				font-weight: bold;
			}
			
			&-point {
				display: flex;
				align-items: center;
				justify-content: center;
				.point {
					width: 20rpx;
					height: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					border: solid 1px rgba($color: #fff, $alpha: 0.5);
					margin: 0 10rpx;
					view {
						width: 8rpx;
						height: 8rpx;
						border-radius: 50%;
						background-color: rgba($color: #fff, $alpha: 0.5);
					}
				}
			}
			
			&-rules {
				position: absolute;
				right: 0;
				top: 80rpx;
				width: 166rpx;
				height: 58rpx;
				line-height: 58rpx;
				background-color: rgba($color: #fff, $alpha: 0.7);
				border-top-left-radius: 29rpx;
				border-bottom-left-radius: 29rpx;
				color: #FF6900;
			}
			
			&-behavior {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: calc(100% - 124rpx);
				margin: 64rpx auto;
				.item {
					height: 60rpx;
					padding: 0 44rpx;
					background-color: rgba($color: #fff, $alpha: 0.2);
					border-radius: 30rpx;
					font-size: 40rpx;
					color: #fff;
					display: flex;
					align-items: center;
					text {
						font-size: 28rpx;
						color: #fff;
						margin-left: 10rpx;
					}
				}
			}
		}
		
		&-first {
			width: calc(100% - 60rpx);
			margin: 30rpx auto;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 32rpx 60rpx;
			text-align: center;
			color: #393939;
			font-size: 34rpx;
			&-header {
				margin-bottom: 20rpx;
			}
			&-box {
				display: flex;
				justify-content: space-between;
			}
			&-item {
				text-align: center;
				color: #393939;
				font-size: 28rpx;
				image {
					width: 94rpx;
					height: 94rpx;
					margin-top: 12rpx;
				}
			}
		}
		
		&-list {
			width: calc(100% - 60rpx);
			margin: 0 auto;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 30rpx;
			&-item {
				display: flex;
				justify-content: space-between;
				border-bottom: solid 1px #DBDBDB;
				padding: 16rpx 0;
				color: #000000;
				font-size: 28rpx;
				.left {
					view {
						&:last-child {
							color: #525252;
							font-size: 26rpx;
							margin-top: 10rpx;
						}
					}
				}
				.right {
					font-size: 42rpx;
					.reduce {
						color: #EF651F;
					}
				}
			}
		}
	}
}