jigesi/pages/index/aiControlSys/index.scss

.page{
	overflow-y: scroll;
	padding-bottom: 160rpx;
}
.topBg{
	width: 100vw;
	height: 850rpx;
	position: relative;
	z-index: 0;
}
.content{
	// height: calc(100vh - 800rpx - 160rpx - 20rpx);
	padding: 0 36rpx;
	
	.topBox{
		width: 678rpx;
		height: 120rpx;
		background: #fff;
		box-shadow: 0rpx 12rpx 56rpx -4rpx rgba(220,212,205,0.5);
		border-radius: 24rpx 24rpx 24rpx 4rpx;
		margin-top: -60rpx;
		margin-left: 50%;
		transform: translateX(-50%);
		
		z-index: 1;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.lTxt{
			.water{
				font-size: 56rpx;
				font-family: Arial-BoldMT, Arial;
				font-weight: normal;
				color: #eee;
				position: absolute;
				top: 0;
				z-index: 0;
			}
			.water1{
				position: absolute;
				top: 0;
				z-index: 0;
				height: 56rpx;
			}
			.main{
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				z-index: 1;
				margin-left: 52rpx;
				image{
					position: absolute;
					z-index: 2;
					left: -10%;
					top: -20rpx;
				}
			}
		}
		.rDes{
			margin-right: 32rpx;
			width: 132rpx;
			height: 48rpx;
			border: 1rpx solid #333333;
			
			display: flex;
			justify-content: center;
			align-items: center;
			.con{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			image{
				margin-left: 8rpx;
			}
		}
		
	}
	.label{
		font-size: 36rpx;
		font-family: PingFang-SC-Bold, PingFang-SC;
		font-weight: bold;
		color: #333333;
		margin-top: 44rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.parms{
		display: flex;
		flex-wrap: wrap;
		padding-top:32rpx;
		
		border-bottom: 1rpx solid #EAEAEA;
		padding-bottom: 46rpx;
		position: relative;
		
		
		.item{
			width: 325rpx;
			height: 96rpx;
			border-radius: 4rpx;
			border: 1rpx solid #999;
			margin-right: 18rpx;
			margin-bottom: 18rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #999999;
		}
		.item:nth-of-type(2n){
			margin-right: 0!important;
		}
		.act{
			color:#333333 ;
			border: 4rpx solid black;
			}
	}
}

.bot{
	height: 160rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.16);
	position: fixed;
	width: 100%;
	bottom: 0;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	padding: 0 40rpx;
	.left{
		display: flex;
		align-items: center;
		.price{
			font-size: 42rpx;
			font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			color: #333333;
		}
		image{
			width: 23rpx;
			height: 12rpx;
			margin-left: 16rpx;
		}
	}
	.right{
		width: 282rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		border: 2rpx solid #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		
		font-size: 32rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #333333;
		margin-right: 96rpx;
		
	}
	
}

.rule{
			position: fixed;
			width: 96rpx;
			height: 96rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 24rpx -8rpx rgba(0,0,0,0.28);
			border: 2rpx solid #FFFFFF;
			right: 36rpx;
			bottom: 216rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			image{
				width: 32rpx;
				height: 32rpx;
				margin-bottom: 8rpx;
			}
			.txt{
				font-size: 16rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #333333;
			}
		}
		
		
		
		.topBar{
				height: 112rpx;
				background: #F9F9F9;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					width: 10%;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
				}
				
				.cen{
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}
				
				.close{
					width: 24rpx;
					height: 24rpx;
					color: #666666;
					width: 10%;
					display: flex;
					align-items: center;
					justify-content: center;
				height: 100%;
				}
			}
			
		.pupopCon{
			padding: 48rpx 32rpx;
			.item{
				margin-bottom: 30rpx;
				.top{
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;
					.name{
						font-size: 32rpx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #666666;
					}
					.info{
						font-size: 32rpx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #333333;
					}
				}
				.bottom{
					display: flex;
					justify-content: space-between;
					padding-left: 24rpx;
					margin-bottom: 30rpx;
					margin-top: 30rpx;
					.name{
						font-size: 32rpx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #666666;
					}
					.info{
						font-size: 32rpx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #333333;
					}
				}
			}
			
		}	
		
		.aginInvite{
			// width: 168rpx;
			
			height: 52rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			border: 1rpx solid #333333;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 24rpx;
		}
		
		
		.sel{
			position: relative;
			image{
				position: absolute;
				right: 24rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}