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

#mapDiv{
    width: 100%;
    height: 100vh;
    background-color: #fff;
}
.map {
  position: relative;  /* 作为子元素的相对定位元素 */
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#labels {
  position: absolute;  /* 把Label定位在容器内 */
  left: 0;             /* 默认定位在左上角 */
  top: 0;
  color: white;
}
#labels>div {
  position: absolute;  /* 让我们的容器决定尺寸 */
  left: 0;             /* 默认定位在左上角 */
  top: 0;
  cursor: pointer;     /* 当悬浮时，变为一个小手 */
  font-size:12px;
  user-select: none;   /* 不允许文字被选中 */
  white-space: nowrap;
  text-shadow:         
    -1px -1px 0 #000,
    0   -1px 0 #000,
    1px -1px 0 #000,
    1px  0   0 #000,
    1px  1px 0 #000,
    0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;
}
#labels>div:hover {
  color: red;
}
canvas:focus {
  outline:none;
}
canvas { width:100vw; height:calc(100vh - 200px);z-index: 10; }

#canvas_webgl{
	/* background: url(resources/images/daikanyama.jpg) no-repeat center center; */
	/* background:#6d0909;
	background-size: cover; */
	/* transition: height 1s; */
}
/* 生成截屏的画布对象 */
#canvas {
	width: 100vw;
	z-index: -1;
	position: absolute;
	left:0px;
}
.location-view{
    position: absolute;
    top: 100px;
    right: 20px;
    width: 80px;
    height: 80px;
    border-radius: 24px;
    background: radial-gradient(50.00% 50.00% at 50.00% 50.00%, #fff 0%, #f7f7f7 67.98%, #fff 100%);
    border: 2px solid #d6d6d6;
}
.area-view{
	position: absolute;
	top:10px;
	left:30px;
	width:100%;
	font-size: 24px;
	font-family: "Verdana";
	font-weight: 400;
	z-index: 301;
	.style1{
		margin-top:10px;
	}
	.style2{
		font-weight: 700;
		font-size: 28px;
	}
	.style3{
		font-size: 24px;
	}
	span{
		font-size: 28px;
	}
	.reduce{
		// width: 92px;
		height: 72px;
		border-radius: 12px;
		color: #fa9f40;
		background: rgba(250, 159, 64, 0.12);
		font-size: 24px;
		margin-right:10px;
		padding:4px 10px;
	}
}
.tran{
	transition-timing-function: linear;
	transition: height 1s;
}
.voice-mask{
	position: fixed;
	left:0px;
	top:0px;
	width: 100vw;
	height:100vh;
	z-index: 11;
	background: rgba(0, 0, 0, 0.5);
}
.canvas-view{
	position:relative;
}
.lable-view{
	position:absolute;
	width:100vw;
}
.word-view{
	position: absolute; 
	left: 0;            
	top: 0;
	user-select: none;  
	z-index: 12;
	text-align: center;
	border-radius: 5px;
}
.word{
	font-family: "Verdana";
	font-weight: 400;
	height: 40px;
	line-height: 40px;
	padding:0px 10px;
	border-radius: 20px;
	background: #fff;
	font-size:26px;
	color: #1d1d1d;
}
.number-view{
	width: 30px;
	height: 30px;
	line-height: 30px;
	background: #fff;
	color: #121212;
	font-weight: 700;
	font-size: 28px;
	font-family: "DIN Alternate Bold";
	border-radius: 30px;
}
.number-more{
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 30px;
}
.active{
	background: #faad5c;
	color: #fff;
}
.submit-btn{
	position: absolute;
	top:42px;
	right:20px;
	width: 140px;
	height: 64px;
	border-radius: 32px;
	backdrop-filter: blur(40px);
	background-color: rgba(255, 156, 56, 1);
	font-family: "Verdana Bold";
	font-weight: 700;
	font-size: 28px;
	color: #fff;
	text-align:center;
	line-height:64px;
	z-index: 302;
}
.submit-btn1{
	left:20px;
}
.voice-view{
	width: 614px;
	height: 312px;
	border-radius: 40px;
	background: #fff;
	box-shadow: 0 -6px 12px #0000001f;
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	text-align:center;
}
.voice-tips{
	font-size: 28px;
	color: rgba(36, 36, 36, 0.51);
	margin-top:12px;
}
.voice-gif{
	width: 100%;
	margin-top:56px;
}
.change-view{
	position: absolute;
	top: -100px;
	left: 50%;
	transform: translateX(-50%);
	width: 196px;
	height: 74px;
	border-radius: 20px;
	background: #3c3c3c;
	font-family: "Verdana";
	font-weight: 400;
	font-size: 28px;
	color: #fff;
}