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);
}
.change-angle{
	position: absolute;
	width: 72rem;
	height: 160rem;
	left:30rem;
	bottom:478rem;
	border-radius: 12rem;
	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;
}
.btn-view{
	position: absolute;
	bottom: 478rem;
	right: 30rem;
	width: 72rem;
	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: 72rem;
		height: 72rem;
	}
	.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: 448rem;
	border-radius: 40rem 40rem 0 0;
	background: #fff;
	box-shadow: 0 -6rem 12rem rgba(0, 0, 0, 0.12);
	z-index: 15;
	padding:0rem 30rem;
	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;
	}
}

.aiEdit {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top:60rem;
	.aiStyleList {
		width: 100%;
		height: 240rem;
		/* background: #333; */
		flex-shrink: 0;
		white-space: nowrap;

		.scrollViewItem {
			width: 152rem;
			height: 100%;
			display: inline-block;
			margin: 0rem 10rem;
		}

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

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

		.styleItem {
			position: absolute;
			width: 144rem;
			// height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			/* background: red; */
			.styleIcon {
				width: 144rem;
				height: 144rem;
				background: #5c5c5c;
				border-radius: 12rem;
				border: 2rem solid #fff;
			}

			.styleTitle {
				margin-top: 20rem;
				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;
		}
	}
}
.indicator-view{
	position: absolute;
	z-index: 12;
	bottom: 468rem;
	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: 498rem;
	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;
    }
}