优化

src/assets/common.css

@@ -85,151 +85,3 @@ div {
     cursor: pointer
 }
 
-
-/* 项目提示信息 */
-
-.infoWindowHtml {
-    z-index: 1000!important;
-    cursor: pointer;
-}
-.project-view-content-scroll {
-    overflow: auto;
-}
-
-.show-flex1 {
-    display: flex;
-}
-
-.align-center {
-    align-items: center;
-}
-
-.column {
-    flex-direction: column;
-}
-
-.content-center {
-    justify-content: center;
-}
-
-.content-between {
-    justify-content: space-between;
-}
-
-.content-around {
-    justify-content: space-around;
-}
-
-.content-start {
-    justify-content: flex-start;
-}
-.content-end {
-    justify-content: flex-end;
-}
-
-.cursor-pointer {
-    cursor: pointer;
-}
-
-.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-}
-
-.el-select-dropdown {
-    border-radius: 10px;
-    backdrop-filter: blur(30px);
-    background-color: rgba(149, 149, 149, 0.9);
-    border: none;
-    /*color: #fff;*/
-}
-
-.el-select-dropdown__item {
-    color: #fff;
-}
-
-.el-select-dropdown__item.hover,
-.el-select-dropdown__item:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-}
-
-.el-select-dropdown__item.selected {
-    color: var(--themeColor11);
-    font-weight: 700;
-}
-
-.el-picker-panel {
-    border-radius: 10px;
-    backdrop-filter: blur(30px);
-    background-color: rgba(149, 149, 149, 0.5);
-    border: none;
-    color: #fff;
-}
-.el-input__inner:focus.el-focus{
-    border-color: var(--themeColor11);
-}
-.popper-class-12 .danwei{
-    color: rgba(255,255,255,0.8);
-    height: 32px;
-    line-height: 32px;
-}
-
-.align-start{
-    align-items: flex-start;
-}
-
-.align-end{
-    align-items: flex-end;
-}
-
-
-.el-date-table td.end-date span, .el-date-table td.start-date span {
-    background-color: var(--themeColor11) !important;
-    color: #6E6F72;
-}
-
-.el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {
-    background-color: rgba(242, 246, 252, 0.2);
-}
-
-.el-date-table td.today span {
-    color: var(--themeColor11);
-}
-
-.el-date-table td:hover {
-    color: var(--themeColor11);
-}
-
-.el-date-table td.available:hover {
-    color:  var(--themeColor11);
-}
-
-.el-picker-panel__icon-btn{
-    color: var(--themeColor9);
-}
-
-.el-date-range-picker__content.is-left {
-    border-right: 1px solid var(--themeColor9_1);
-}
-
-.el-date-table th {
-    border-bottom: 1px solid var(--themeColor9_1);
-}
-.pp-planstatus{
-    margin-left: -15px;
-
-}
-.pp-planstatus .el-select-dropdown__item{
-   font-size: 13px;
-    padding: 0 15px;
-}
-.el-button:focus, .el-button:hover{
-	color: unset;
-	border-color: unset;
-	background-color: unset;
-	/* background-image: linear-gradient(124deg, rgba(245, 201, 82, 0.4) 0%, rgba(239, 149, 57, 0.4) 100%); */
-}
-.el-button--primary{
-	background-color: #FD9429;
-	border-color: #F5C952;
-}

src/pages/webgl_rxdz_vr/webgl_rxdz_vr.html

@@ -24,17 +24,24 @@
 		 width="100vw" 
 		:style="{'height':canvasHeight+'px'}">
 	</canvas>
+	<div class="slide-mask"></div>
 	<!-- 数字人大小滚动条 -->
-	<el-slider
-		class="rangeview"
-	    v-model="rangeValue"
-	    vertical
-		:min="10"
-		:max="100"
-		:show-tooltip="false"
-		@change="rangeChange"
-	    height="200px">
-	</el-slider>
+	<div class="slide-view columns rows-between">
+		<div class="slide-tips">数字人<br>大小</div>
+		<div class="slide-word">放大</div>
+		<el-slider
+			class="rangeview"
+		    v-model="rangeValue"
+		    vertical
+			:min="10"
+			:max="100"
+			:show-tooltip="false"
+			@change="rangeChange"
+		    >
+		</el-slider>
+		<div class="slide-word">缩小</div>
+	</div>
+	
 	<!-- AI数字人组件 -->
 	<viewAI ref="viewAI" @aiPeopleChange="aiPeopleChange" style="z-index: 13;"></viewAI>
 	<!-- 生成截屏的画布对象 -->

src/pages/webgl_rxdz_vr/webgl_rxdz_vr.scss

@@ -36,15 +36,49 @@ page {
 	width: 72px;
 	height: 72px;
 	background: rgba(0, 0, 0, 0.5);
-	right: 20px;
+	left: 20px;
 	bottom: 20px;
 	border-radius: 50%;
 }
-.rangeview{
-	position: absolute!important;
+.slide-mask{
+	position: absolute;
 	right: 0px;
-	top: 60px;
+	top: 0px;
+	width: 126px;
+	height: 750px;
+	background: linear-gradient(90.13deg, #00000000 0%, #00000080 100%);
+	z-index: 9;
+}
+.slide-view{
+	position: absolute;
+	right: 10px;
+	top: 80px;
+	width: 72px;
+	height: calc(750px - 60px - 60px);
+	z-index: 10;
+	.slide-tips{
+		font-family: "Verdana Bold";
+		font-weight: 700;
+		font-size: 24px;
+		color: #fff;
+		text-align: center;
+		margin-bottom: 20px;
+	}
+	.slide-word{
+		font-family: "Verdana";
+		font-weight: 400;
+		font-size: 24px;
+		text-align: center;
+		color: #b9ff98;
+	}
+	.rangeview{
+		right: 0px;
+		height: 472px;
+		margin-top: 10px;
+		margin-bottom: 10px;
+	}
 }
+
 // /deep/.el-slider.is-vertical .el-slider__button-wrapper{
 // 	top: 50%;
 // 	left: 50%;
@@ -56,7 +90,17 @@ page {
 	align-items: center;
 	justify-content: center;
 }
-// /deep/.el-slider__button-wrapper .el-tooltip, .el-slider__button-wrapper::after{
-// 	    position: relative;
-// 	    top: -50%;
-// }
+/deep/.el-slider__bar{
+	background-color: #B9FF98;
+}
+/deep/.el-slider__button{
+	border: 2px solid #B9FF98;
+}
+/deep/.el-slider.is-vertical .el-slider__bar{
+	width: 8px;
+	border-radius: 0 0 4px 4px;
+}
+/deep/.el-slider.is-vertical .el-slider__runway{
+	width: 8px;
+	background-color: rgba(255, 255, 255, 0.5);
+}