h5-webgl-program/src/pages/webgl_rxdz_test1_env/webgl_rxdz_test1_env.scss

/**newIndex.wxss**/

page {
}

.pointerEvents{
    pointer-events: none;
}
/deep/.el-carousel__container{
	height: 100%!important;
}
.contentBox{
	position: relative;
    width: 100vw;
	height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
	background-color: white;
	z-index: 2;
	.master-pic{
	    position: relative;
	    width: 100%;
	    height:880px;
	    // padding: 10px;
	    box-sizing: border-box;
	    // background-color: #171717;
		.master-pic-swiper{
			width: 100%;
			height: 100%;
		}
		.master-pic-item{
			width: 100%;
			height: 100%;
			.master-pic-img{
			    width: 100%;
			    height: 880px;
			    display: block;
				object-fit: cover;
			}
		}
	}
	.bottom-view{
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100vw;
		height: calc(100vh - 820px);
		border-radius: 40px 40px 0 0;
		background: #fff;
		padding: 30px 0px;
		box-sizing: border-box;
		z-index: 3;
	}
    .tabList{
		position: relative;
		width: 100%;
		height: 90px;
		// top:926px;
		overflow-x: auto;
		overflow-y: hidden;
		margin-bottom: 40px;
		z-index: 9;
		.tab-content{
			position: absolute;
			min-width: 100vw;
			.tab-line{
				position: absolute;
				left: 0px;
				bottom: 21px;
				width: 100%;
				height: 1px;
				background: rgba(112, 112, 112, 0.46);
				opacity: 1;
				z-index: 1;
			}
		}
        .tab-item{
			width:max-content;
            margin-right: 20px;
            font-family: "Verdana";
            font-weight: 400;
            font-size: 24px;
            color: #1d1d1d;
			text-align:center;
			padding:2px;
			box-sizing: border-box;
			margin-right: 60px;
			z-index: 2;
			&:first-child{
				margin-left: 112px;
			}
			&:last-child{
				margin-right: 0px;
			}
            
			.tab-text{
				font-family: "Verdana";
				font-weight: 400;
				font-size: 32px;
				color: rgba(39, 39, 39, 0.5);
			}
			&.tabActive .tab-text{
				font-family: "Verdana Bold";
				font-weight: 700;
				color: #272727;
			}
			.tab-info{
				position: relative;
				width: 40px;
				height: 40px;
				font-size: 20px;
				background: #d2c9ba;
				border: 2px solid #fff;
				border-radius: 50%;
				box-sizing: border-box;
				color: #fff;
				&.select {
					background: #ff870f;
				}
				i{
					font-size: 14px;
				}
			}
        }
    }
	.swiper-view{
		position: relative;
		width: 100%;
		height: 190px;
		// top:926px;
		overflow-x: auto;
		overflow-y: hidden;
		margin-bottom: 40px;
		z-index: 10;
		background-color: #fff;
		.tab-content{
			position: absolute;
		}
		.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: 20px;
			&:first-child{
				margin-left: 30px;
			}
			&:last-child{
				margin-right: 0px;
			}
		    .tab-img{
		    	width: 140px;
		    	height: 140px;
		    	object-fit: cover;
				margin-bottom: 8px;
				border-radius: 12px;
				border: transparent 2px solid;
				box-sizing: border-box;
		    }
			.tab-text{
				height: 40px;
				font-family: "Verdana";
				font-weight: 400;
				font-size: 28px;
				color: #4e4e4e;
			}
			&.tabActive .tab-text{
				font-family: "Verdana Bold";
				font-weight: 700;
				color: #f9870f;
			}
			&.tabActive .tab-img{
				border-color: rgba(249, 135, 15, 1);
			}
		}
	}
    .question{
		position: fixed;
		width: 100%;
		bottom: 178px;
		font-family: "Verdana";
		font-weight: 400;
		height: 34px;
		font-size: 24px;
		color: rgba(78, 78, 78, 0.47);
		z-index: 9;
	}
}
.bottom-btn{
    position: fixed;
    width: 652px;
    height: 88px;
    border-radius: 44px;
	left: 50px;
	bottom: 60px;
    // background-image:linear-gradient(124deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 1) 100%);
	background-color: #D6D6D6;
    box-sizing: border-box;
	z-index: 11;
	font-family: "Verdana Bold";
	font-weight: 700;
	font-size: 30px;
	color: rgba(255, 255, 255, 0.7);
	&.active{
		background-image:linear-gradient(124deg, rgba(245, 201, 82, 01) 0%, rgba(253, 148, 41, 1) 100%);
		color: #fff;
	}
}
.indicator-view{
	position: absolute;
	z-index: 12;
	bottom: 70px;
	left:50%;
	transform: translateX(-50%);
	.indicator-item{
		width: 12px;
		height: 12px;
		background: #fff;
		opacity: 0.52;
		margin-right:6px;
		border-radius: 50%;
		&.active{
			opacity:1;
		}
		&:last-child{
			margin-right:0px;
		}
	}
}
.load-mask{
	position: absolute;
	width: 100%;
	height: 158px;
	z-index: 2;
	background: linear-gradient(180.00deg, #00000000 0%, #00000066 100%);
	bottom: 20px;
}
.loading_more {
	position: absolute;
	width: 100%;
	z-index: 12;
	bottom: 86px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 25;
	color:#fff;
	font-size:28px;
	.leftSwiperImg{
		width: 234.32px;
		height: 40px;
	}
	.loading_img {
		width: 40px;
		height: 40px;
		-webkit-animation: rotation 1s linear infinite;
		animation: rotation 1s linear infinite;
	}
	.loading_text {
		height: 40px;
		margin-left: 10px;
	}
}
@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}
.btn-view{
	position: absolute;
	top: calc(-132px - 30px);
	left: 30px;
	width: 72px;
	z-index: 13;
	pointer-events: auto;
	.compareBtn {
		position: relative;
		background: rgba(0,0,0,0.2);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		pointer-events: auto;
		z-index:11;
		width: 72px;
		height: 72px;
	}
	.likeBtn{
		width: 72px;
		height: 132px;
		border-radius: 36px;
		padding:30px 10px;
		background: rgba(0, 0, 0, 0.5);
		box-sizing: border-box;
		font-family: "Verdana Bold";
		font-weight: 700;
		font-size: 24px;
		color: #fff;
		text-align: center;
		justify-content:unset;
		z-index: 13;
		pointer-events: auto;
		.icon-qeuren{
			margin-bottom:10px;
			font-size:30px;
		}
	}
	.like{
		background: rgba(249, 193, 102, 0.5);
	}
	.btn1{
		margin-bottom:20px;
	}
	.compareIcon {
		width: 42px;
		height: 44px;
	}
	.down{
		width: 40px;
		height: 39px;
	}
}
@media screen and (max-height: 750px){
	.master-pic{
		height:850px!important;
	}
	.bottom-view{
		height: calc(100vh - 790px)!important;
	}
	.question{
		bottom: 140px!important;
	}
	.bottom-btn{
		bottom: 30px!important;
	}
}