h5-webgl-program/src/components/newQCCom/viewPlot/viewPlot.scss

.plot-view{
	position: relative;
	width: auto;
	box-sizing: border-box;
	z-index: 12;
	padding-top: 0px;
	.title{
		font-family: "Verdana Bold";
		font-weight: 700;
		font-size: 32px;
		color: #000;
		margin-bottom: 30px;
	}
	.close{
		position: absolute;
		right: -50px;
		top: -40px;
		width: 30px;
		height: 30px;
		color: rgba(0, 0, 0, 0.22);
		font-size: 30px;
		padding: 60px;
		z-index: 99;
	}
}
.swiper-view{
	position: relative;
	width: 100%;
	height: 98px;
	// top:926px;
	overflow-x: auto;
	overflow-y: hidden;
	margin-bottom: 30px;
	z-index: 9;
	box-sizing: border-box;
	.tab-content{
		position: absolute;
		box-sizing: border-box;
	}
	.tab-item{
		// width:190px;
		width:max-content;
		font-family: "Verdana";
		font-weight: 400;
		font-size: 0px;
		color: rgba(69, 69, 69, 0.6);
		text-align:center;
		box-sizing: border-box;
		margin-right: 10px;
		border: 2px solid transparent;
		border-radius: 12px;
		padding: 12px;
		height: 98px;
		&.tabActive{
			border-color: #ffbd3e;
			background: rgba(253, 191, 71, 0.08);
			// box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
		}
		&:first-child{
			margin-left: 0px;
		}
		&:last-child{
			margin-right: 0px;
		}
		.tab-img{
			width: 84px;
			height: 84px;
			object-fit: cover;
			margin-bottom: 14px;
			border-radius: 50%;
			border: transparent 4px solid;
			box-sizing: border-box;
		}
		.tab-title{
			font-family: "Verdana";
			font-weight: 400;
			font-size: 28px;
			color: rgba(29, 29, 29, 0.7);
		}
		.tab-text{
			font-family: "Verdana";
			font-weight: 400;
			font-size: 22px;
			color: rgba(132, 132, 132, 1);
		}
		&.tabActive .tab-title{
			font-family: "Verdana Bold";
			font-weight: 700;
			color: #ffa700;
		}
		&.tabActive .tab-img{
			border-color: rgba(249, 135, 15, 1);
		}
	}
}  
.plot-content{
	position: relative;
	width: 100%;
	height: 320px;
	overflow-x: auto;
	.content{
		position: absolute;
		.item{
			position: relative;
			width:222px;
			box-sizing: border-box;
			margin-right: 10px;
			.img{
				width: 222px;
				height: 222px;
				margin-bottom: 30px;
			}
			.text{
				width: 100%;
				font-family: "Verdana";
				font-weight: 400;
				font-size: 26px;
				color: #414141;
			}
			.gou{
				position: absolute;
				top: 10px;
				right: 20px;
				width: 40px;
				height: 40px;
				font-size: 20px;
				border-radius: 50%;
				background: #ff870f;
				border: 2px solid #fff;
				color:#fff;
				opacity: 0;
			}
			&.active .gou{
				opacity: 1;
			}
			&.active .text{
				font-family: "Verdana Bold";
				font-weight: 700;
				color: #ffa700;
			}
		}
	}
}
.btn-list{
	position: fixed;
	left: 140px;
	bottom: 0px;
	padding-bottom: 30px;
	width: 470px;
	z-index: 15;
	background-color: rgba(255, 255, 255, 1);
	box-sizing: border-box;
}
.btn{
	height: 100px;
	border-radius: 50px;
	backdrop-filter:blur(40px);
	--webkit-backdrop-filter: blur(40px);
	font-family: "Verdana Bold";
	font-weight: 700;
	font-size: 32px;
	color: #272727;
	box-sizing: border-box;
}
.up{
	width: 690px;
	box-shadow: 0 6px 20px #f2980233;
}
.up2{
	color: rgba(255, 255, 255, 1);
	background-image:linear-gradient(124deg, rgba(245, 201, 82, 1) 0%, rgba(239, 149, 57, 1) 100%);
}