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

.mask-view{
	position: absolute;
	bottom:0px;
	width:100vw; 
	height:100vh;
	box-sizing: border-box;
	z-index: 12;
	font-family: "Verdana Bold";
	font-size: 0px;
	background: transparent;
	pointer-events: none;
}
// .pointer-auto{
// 	pointer-events: auto;
// }
.swiper{
	position: relative;
	width: 100%;
	height:calc(100vh - 600px + 40px);
	z-index: 12;
	pointer-events: auto;
	/deep/.el-image__preview{
		cursor: none;
	}
}
/deep/.el-carousel__container{
	height:calc(100vh - 600px + 40px);
}
.btn-view{
	position: absolute;
	bottom: 620px;
	left: 30px;
	width: 72px;
	z-index: 13;
	pointer-events: auto;
	.change-angle{
		position: relative;
		width: 72px;
		height: 160px;
		border-radius: 36px;
		padding:20px 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;
		.camera{
			width: 43.07px;
			height: 49.22px;
		}
		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;
	}
}

.layout-view{
	position: absolute;
	bottom:0px;
	left:0px;
	width: 100vw;
	height: 600px;
	border-radius: 40px 40px 0 0;
	background: #fff;
	box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.12);
	z-index: 15;
	padding:0px 30px;
	box-sizing: border-box;
	pointer-events: auto;
	.signscoll-block{
		position: absolute;
		width: 90px;
		height: 10px;
		border-radius: 5px;
		background: #707070;
		opacity: 0.6;
		top: 10px;
		left:330px;
	}
}
.grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);;
	grid-row-gap: 20px;
	grid-column-gap:50px;
}
.aiEdit {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	// align-items: center;
	margin-top:30px;
	.tab-view{
		margin-bottom: 30px;
		.btn{
			width: 148px;
			height: 56px;
			border-radius: 16px;
			background: transparent;
			font-family: "Verdana";
			font-weight: 400;
			font-size: 30px;
			color: #4e4e4e;
			margin-right:40px;
		}
		.btn.active{
			background: #343434;
			color: #fff;
		}
	}
	.aiStyleList {
		width: 720px;
		margin-bottom: 30px;
		overflow-x: auto;
		.styleItem:first-child {
			// margin-left: 30px;
		}

		.styleItem:last-child {
			margin-right: 0px;
		}

		.styleItem {
			width: 120px;
			height: 168px;
			margin-right: 30px;
			// height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			.styleIcon {
				width: 120px;
				height: 120px;
				background: #5c5c5c;
				border-radius: 12px;
				border: 2px solid #fff;
				box-sizing: border-box;
				object-fit: cover;
			}

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

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

			.styleTitle {
				font-family: "Verdana Bold";
				font-weight: 700;
				color: #ff9f40;
			}
		}
	}
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}
	.section4 {
		width: 720px;
		display: flex;
		align-items: center;
		overflow-x: auto;
		.items {
			display: flex;
			align-items: center;
	
			.item {
				width: 140px;
				height: 100px;
				border-radius: 12px;
				background: rgba(243, 243, 243, 1);
				font-family: "Verdana";
				font-weight: 400;
				font-size: 24px;
				text-align: center;
				color: #4e4e4e;
				// margin-right: 10px;
				margin-right: 16px;
	
				padding: 10px 20px;
				border: 2px solid transparent;
				box-sizing: border-box;
				white-space: nowrap;
				.def-view{
					width: 40px;
					height: 40px;
					border-radius: 50%;
					background: conic-gradient(from 90.00deg at 50.00% 50.00%, #ea3333 0%, #ffc350 13.54%, #eded5e 29.06%, #8ad960 45.32%, #72b3a7 59.55%, #4f7aed 75%, #9f5bed 88.67%, #ef6d6d 100%);
				}
				.color-view{
					margin-bottom: 6px;
					.left{
						width: 50px;
						height: 40px;
						border-radius: 8px 0 0 8px;
					}
					.right{
						width: 50px;
						height: 40px;
						border-radius: 0 8px 8px 0;
					}
				}
			}
	
			.item_sel {
				background: rgba(247, 211, 116, 0.15);
				border-color: #FDAD56;
				color: #fcac56;
			}
			.item:last-child {
				margin-right: 0px;
			}
		}
	}
	
}
.btn-list{
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin-top:30px;
	.btn{
		height: 88px;
		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;
	}
	.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: 320px;
		margin-left: -14px;
		box-shadow: 0 6px 20px #f2980233;
	}
	.style1{
		margin-right:17px;
	}
	.AiBtn{
		width: 320px;
		margin-right: -14px;
		box-shadow: 0 6px 20px #f2980233;
	}
}
.connect-view{
	position: absolute;
	width: 139px;
	height: 184px;
	background: transparent;
	bottom: 605px;
	right:24px; 
	box-sizing: border-box;
	z-index: 13;
	pointer-events: auto;
	.defaultHead{
		width: 139px;
		height: 184px;
	}
}
.indicator-view{
	position: absolute;
	z-index: 12;
	bottom: 620px;
	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;
		}
	}
}
.loading_more {
	position: absolute;
	width: 100%;
	z-index: 12;
	bottom: 640px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 25;
	color:#fff;
	font-size:28px;
	.loading_img {
		width: 40px;
		height: 40px;
		margin-right: 10px;

		-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: 40px;
	}

}
.loadData{
    min-width:200px;
    height:150px;
    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:18px;
    img{
        width:90px;
		margin-top: 10px;
    }
    .loadingMsg{
        color: rgba(255, 255, 255, 0.83);
        margin: 10px;
		margin-top: 0px;
    }
}
.dialog{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: auto;
	margin: 0;
	.main{
		margin-top: 35vh;
		width: 80%;
		position: relative;
		margin: 0 auto 50px;
		background: #FFF;
		border-radius: 2px;
		box-shadow: 0 1px 3px rgba(0,0,0,.3);
		box-sizing: border-box;
	}
	    
}