h5-webgl-program/src/components/newBottomCom/viewMask/viewMask.scss

.mask-view{
	position: absolute;
	bottom:0rem;
	width:100vw; 
	height:100vh;
	box-sizing: border-box;
	z-index: 12;
	font-family: "Verdana Bold";
	font-size: 0rem;
	background: transparent;
	pointer-events: none;
}
// .pointer-auto{
// 	pointer-events: auto;
// }
.swiper{
	position: relative;
	width: 100%;
	height:calc(100vh - 408rem);
	z-index: 12;
	pointer-events: auto;
}
/deep/.el-carousel__container{
	height:calc(100vh - 408rem);
}
.btn-view{
	position: absolute;
	bottom: 620rem;
	left: 30rem;
	width: 72rem;
	z-index: 13;
	pointer-events: auto;
	.change-angle{
		position: relative;
		width: 72rem;
		height: 160rem;
		border-radius: 36rem;
		padding:20rem 10rem;
		background: rgba(0, 0, 0, 0.5);
		box-sizing: border-box;
		font-family: "Verdana Bold";
		font-weight: 700;
		font-size: 24rem;
		color: #fff;
		text-align: center;
		justify-content:unset;
		z-index: 13;
		.camera{
			width: 43.07rem;
			height: 49.22rem;
		}
		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: 72rem;
		height: 72rem;
	}
	.likeBtn{
		width: 72rem;
		height: 132rem;
		border-radius: 36rem;
		padding:30rem 10rem;
		background: rgba(0, 0, 0, 0.5);
		box-sizing: border-box;
		font-family: "Verdana Bold";
		font-weight: 700;
		font-size: 26rem;
		color: #fff;
		text-align: center;
		justify-content:unset;
		z-index: 13;
		pointer-events: auto;
	}
	.like{
		background: rgba(249, 193, 102, 0.5);
	}
	.btn1{
		margin-bottom:20rem;
	}
	.compareIcon {
		width: 42rem;
		height: 44rem;
	}
	.down{
		width: 40rem;
		height: 39rem;
	}
}

.layout-view{
	position: absolute;
	bottom:0rem;
	left:0rem;
	width: 100vw;
	height: 600rem;
	border-radius: 40rem 40rem 0 0;
	background: #fff;
	box-shadow: 0 -6rem 12rem rgba(0, 0, 0, 0.12);
	z-index: 15;
	padding:0rem 60rem;
	box-sizing: border-box;
	pointer-events: auto;
	.signscoll-block{
		position: absolute;
		width: 90rem;
		height: 10rem;
		border-radius: 5rem;
		background: #707070;
		opacity: 0.6;
		top: 10rem;
		left:330rem;
	}
}
.grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);;
	grid-row-gap: 20rem;
	grid-column-gap:50rem;
}
.aiEdit {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top:60rem;
	.aiStyleList {
		width: 100%;
		// height: 220rem;
		/* background: #333; */
		flex-shrink: 0;
		// white-space: nowrap;

		.scrollViewItem {
			width: 120rem;
			height: 168rem;
			// display: inline-block;
			// margin: 0rem 10rem;
		}

		.scrollViewItem:first-child {
			// margin-left: 30rem;
		}

		.scrollViewItem:last-child {
			// margin-right: 30rem;
		}

		.styleItem {
			position: absolute;
			width: 120rem;
			// height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			.styleIcon {
				width: 120rem;
				height: 120rem;
				background: #5c5c5c;
				border-radius: 12rem;
				border: 2rem solid #fff;
				box-sizing: border-box;
			}

			.styleTitle {
				margin-top: 8rem;
				height:40rem;
				font-family: "Verdana";
				font-weight: 400;
				font-size: 28rem;
				text-align: center;
				color: #4e4e4e;
			}
		}

		.styleItemSelected {
			.styleIcon {
				border: 2rem solid #ff9c38;
			}

			.styleTitle {
				font-family: "Verdana Bold";
				font-weight: 700;
				color: #ff9f40;
			}
		}
	}

	.aiStyleList ::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}

	.aiTool {
		width: 100%;
		height: 100rem;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		/* background: red; */
		// margin: 0rem 30rem;
		margin-top: 10rem;
		padding: 0rem 30rem;
		box-sizing: border-box;
		.changeBtn {
			width: 320rem;
			height: 100rem;
			border-radius: 50rem;
			background: rgba(255, 156, 56, 0.15);
			margin-right: 30rem;
			line-height: 100rem;
			text-align: center;
			font-family: "DIN Alternate Bold";
			font-weight: 700;
			font-size: 32rem;
			color: #ff9f36;
		}

		.submitBtn {
			width: 460rem;
			border-radius: 50rem;
			background: rgba(255, 156, 56, 0.15);
			text-align: center;
			height: 100%;
			line-height: 100rem;
			font-family: "DIN Alternate Bold";
			font-weight: 700;
			font-size: 28rem;
			color: #fff;
			box-shadow: 0 6rem 20rem rgba(242, 152, 2, 0.2);
			backdrop-filter: blur(40rem);
			background-color: rgba(255, 255, 255, 0.15);
			background-image:linear-gradient(124deg, rgba(245, 201, 82, 1) 0%, rgba(239, 149, 57, 1) 100%);
		}
		.disable{
			background-color: #ccc;
			background-image: unset;
		}
		.continue{
			width: 330rem;
			background: #fab060;
		}
		.right-icon{
			width: 34rem;
			height: 34rem;
			margin-right:10rem;
		}
		.magic-icon{
			width: 40.6rem;
			height: 40.56rem;
			margin-right:10rem;
		}
	}
}
.btn-list{
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin-top:26rem;
	.btn{
		height: 100rem;
		border-radius: 50rem;
		backdrop-filter:blur(40px);
		--webkit-backdrop-filter: blur(40px);
		font-family: "Verdana Bold";
		font-weight: 700;
		font-size: 32rem;
		color: #272727;
		box-sizing: border-box;
	}
	.up1{
		color: rgba(245, 145, 39, 1);
		background-image:linear-gradient(124deg, rgba(245, 201, 82, 0.4) 0%, rgba(239, 149, 57, 0.4) 100%);
	}
	.up2{
		color: rgba(255, 255, 255, 1);
		background-image:linear-gradient(124deg, rgba(245, 201, 82, 1) 0%, rgba(239, 149, 57, 1) 100%);
	}
	
	.houseType{
		width: 320rem;
		margin-left: -14rem;
		box-shadow: 0 6rem 20rem #f2980233;
	}
	.AiBtn{
		width: 320rem;
		margin-right: -14rem;
		box-shadow: 0 6rem 20rem #f2980233;
	}
}
.connect-view{
	position: absolute;
	width: 139rem;
	height: 184rem;
	background: transparent;
	bottom: 605rem;
	right:24rem; 
	box-sizing: border-box;
	.defaultHead{
		width: 139rem;
		height: 184rem;
	}
}
.indicator-view{
	position: absolute;
	z-index: 12;
	bottom: 620rem;
	left:50%;
	transform: translateX(-50%);
	.indicator-item{
		width: 12rem;
		height: 12rem;
		background: #fff;
		opacity: 0.52;
		margin-right:6rem;
		border-radius: 50%;
		&.active{
			opacity:1;
		}
		&:last-child{
			margin-right:0rem;
		}
	}
}
.loading_more {
	position: absolute;
	width: 100%;
	z-index: 12;
	bottom: 640rem;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 25;
	color:#fff;
	font-size:28rem;
	.loading_img {
		width: 40rem;
		height: 40rem;
		margin-right: 10rem;

		-webkit-animation: rotation 1s linear infinite;
		animation: rotation 1s linear infinite;
	}

	@-webkit-keyframes rotation {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.loading_text {
		height: 40rem;
	}

}
.loadData{
    min-width:110px;
    height:110px;
    position: absolute;
    left: 50%;
    top:50%;
	z-index: 999999999999;
    transform: translate(-50%,-50%);
    background: rgba(0,0,0,0.6);
    border-radius: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
	font-size:18rem;
    img{
        width:90px;
		margin-top: 10px;
    }
    .loadingMsg{
        color: rgba(255, 255, 255, 0.83);
        margin: 10px;
		margin-top: 0px;
    }
}