兼容定制新版

src/App.vue

@@ -54,6 +54,14 @@
 			let ueId = this.$route.query.ueId ? this.$route.query.ueId : '';//ueId-说明选择了具体的户型
 			let query = this.$route.query;
 			let brandId = this.$route.query.brandId || this.$route.query.special_ID;
+			let highColor1 = this.$route.query.highColor1 || "rgba(193, 240, 137, 1)";
+			let highColor2 = this.$route.query.highColor1 || "#89FF00";
+			let backgroundColor = this.$route.query.backgroundColor || "rgba(43, 56, 31, 1)";
+            
+            window.highColor1 = highColor1;
+            window.highColor2 = highColor2;
+            window.backgroundColor = backgroundColor;
+
 			if (brandId) { //如果存在集团id
 				$config.brandId = brandId;
 			}
@@ -94,7 +102,7 @@
 					console.warn("error" + error.message)
 				}
 			}, true)
-			
+			window.hexToRgba = this.hexToRgba;
 			// window.onerror = function(message,source,line,column,error) {
 			// };
 		},
@@ -150,7 +158,35 @@
 					// 开启websocket连接
 					util.initWebsocket();
 				}
-			}
+			},
+            hexToRgba(hex, opacity) {
+                console.warn("**hexToRgba****",hex,opacity)
+                if (!hex||!opacity){
+                    return hex
+                }
+                let RGBA;
+                if (hex.includes('#')&&hex.length==7){
+                    RGBA = "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," +
+                        parseInt("0x" + hex.slice(5, 7)) + "," + opacity + ")";
+                }else if (hex.includes('rgb(')){
+            		var values = hex
+            		  .replace(/rgb?\(/, '')
+            		  .replace(/\)/, '')
+            		  .replace(/[\s+]/g, '')
+            		  .split(',')
+            		  return `rgba(${values[0]},${values[1]},${values[2]},${opacity})`
+                }else if(hex.includes('rgba(')){
+            		var values = hex
+            		  .replace(/rgba?\(/, '')
+            		  .replace(/\)/, '')
+            		  .replace(/[\s+]/g, '')
+            		  .split(',')
+            		  return `rgba(${values[0]},${values[1]},${values[2]},${opacity})`
+            	}else{
+                    return hex
+                }
+                return RGBA
+            },
 		},
 	};
 </script>

src/components/contrastImg/contrastImg.scss

@@ -54,9 +54,9 @@
 		position: absolute;
 		top: 0rpx;
 		// left: calc(50% - 86rpx);
-		left: -43px;
+		left: -90px;
 		// transform: translateX(-50%);
-		width:86px;
+		width:180px;
 		height:100%;
 		background-color: transparent;
 		.line{
@@ -70,8 +70,8 @@
 		}
 		.block-view{
 			position: absolute;
-			width:86px;
-			height:86px;
+			width:180px;
+			height:180px;
 			top: 50%;
 			left: 50%;
 			transform: translate(-50%,-50%);

src/components/newQCCom/viewCareful/viewCareful.html

@@ -1,5 +1,5 @@
 <!-- 精细调整操作视图 -->
-<div class="careful-view">
+<div class="careful-view" :style="{'--highcolor2':highColor2}">
 	<!-- 精细调整区域 -->
 	<div class="scroll-view">
 		<div class="careful-list grid">

src/components/newQCCom/viewCareful/viewCareful.scss

@@ -27,7 +27,8 @@
 	font-family: "Verdana Bold";
 	font-weight: 700;
 	font-size: 28px;
-	color: #585858;
+	// color: var(--highcolor2);
+    color: rgba(88, 88, 88, 1);
 	.index-view{
 		// font-family: "DINCondensed-Bold";
 		font-family: "Verdana";
@@ -51,9 +52,11 @@
 	}
 }
 .item-top.active {
-	color: #ff9f40;
+	// color: #ff9f40;
+    color: var(--highcolor2);
 	.area-view{
-		color: #f5891c;
+		// color: #f5891c;
+        color: var(--highcolor2);
 	}
 }
 
@@ -91,10 +94,10 @@
 .active{
 	/deep/ .el-slider__runway{
 		.el-slider__bar{
-			background-color: #FFAD5C;
+			background-color: var(--highcolor2);
 		}
 		.el-slider__button{
-			background: #FF9B0A;
+			background: var(--highcolor2);
 			border: 4px solid #fff;
 		}
 	}

src/components/newQCCom/viewCareful/viewCareful.vue

@@ -18,6 +18,9 @@
 				carefulList:[],
 				lastCareList:[],//上一次的滑块值
 				selectIndex:0,
+                highColor1:window.highColor1,
+                highColor2:window.highColor2,
+                backgroundColor:window.backgroundColor,
 			}
 		},
 		props:{
@@ -72,6 +75,34 @@
         onPageHide: function() {
         },
 		methods:{
+            hexToRgba(hex, opacity) {
+                console.warn("**hexToRgba****",hex,opacity)
+                if (!hex||!opacity){
+                    return hex
+                }
+                let RGBA;
+                if (hex.includes('#')&&hex.length==7){
+                    RGBA = "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," +
+                        parseInt("0x" + hex.slice(5, 7)) + "," + opacity + ")";
+                }else if (hex.includes('rgb(')){
+            		var values = hex
+            		  .replace(/rgb?\(/, '')
+            		  .replace(/\)/, '')
+            		  .replace(/[\s+]/g, '')
+            		  .split(',')
+            		  return `rgba(${values[0]},${values[1]},${values[2]},${opacity})`
+                }else if(hex.includes('rgba(')){
+            		var values = hex
+            		  .replace(/rgba?\(/, '')
+            		  .replace(/\)/, '')
+            		  .replace(/[\s+]/g, '')
+            		  .split(',')
+            		  return `rgba(${values[0]},${values[1]},${values[2]},${opacity})`
+            	}else{
+                    return hex
+                }
+                return RGBA
+            },
 			//初始化数据
 			initData(){
 				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;

src/components/newQCCom/viewMask/viewMask.html

@@ -1,5 +1,5 @@
 <!-- 覆盖层操作视图 -->
-<div class="mask-view" @touchmove.stop="catchTapEvent" @click.stop="catchTapEvent">
+<div class="mask-view" @touchmove.stop="catchTapEvent" @click.stop="catchTapEvent" :style="{'--backgroundColor':backgroundColor,'--backgroundColor1':hexToRgba(backgroundColor,0.6)}">
 	<!-- AI图片-轮播图 -->
 	<el-carousel v-if="aiImagesList && aiImagesList.length>0" v-show="showAIImage" class="swiper" 
 	:autoplay="false" :loop="false" ref="carousel" indicator-position="none" arrow="always"
@@ -36,10 +36,8 @@
 	<div class="indicator-view rows" v-if="aiImagesList && aiImagesList.length>1 && showAIImage">
 		<div class="indicator-item" :class="{'active': currentIndex == idx}" v-for="(item, idx) in aiImagesList" :key="idx"></div>
 	</div>
-	
-	
 	<!-- 左侧按钮  -->
-	<!-- <div class="btn-view columns" v-if="showAIImage && (aiImagesList && aiImagesList.length>0)"> -->
+	<!-- <div class="btn-view columns" v-if="showAIImage && (aiImagesList && aiImagesList.length>0)" style="top: unset;bottom: 360px;"> -->
 		<!-- 下载 -->
 		<!-- <div class="compareBtn btn1" @click.stop="save" v-if="showAIImage">
 			<img class="down" src="https://dm.static.elab-plus.com/miniProgram/iconfont/down.png" mode="widthFix"/>
@@ -51,11 +49,11 @@
 		<!-- 点赞喜欢 -->
 		<!-- <div class="likeBtn columns" @click.stop="changeAIImg" :class="{like:checked}">
 			<div class="iconfont icon-qeuren"></div>
-			喜欢
-		</div>
-	</div> -->
+			选定
+		</div> -->
+	<!-- </div> -->
     <!-- 右侧按钮  -->
-    <div class="btn-view columns" style="left: unset;right: 30px;" v-if="showAIImage && (aiImagesList && aiImagesList.length>0)">
+    <div class="btn-view columns" style="left: unset;right: 20px;" v-if="showAIImage && (aiImagesList && aiImagesList.length>0)">
     	<!-- 下载 -->
     	<div class="compareBtn btn1" @click.stop="save">
     		<img class="down" src="https://dm.static.elab-plus.com/miniProgram/iconfont/down.png" mode="widthFix"/>
@@ -65,19 +63,19 @@
     		<img class="compareIcon" src="https://dm.static.elab-plus.com/miniProgram/space1/compareAI_btn.png" mode="widthFix" />
     	</div>
     </div>
-    <div class="btn-view columns" style="left: unset;right: 30px;" v-if="showAIImage==false">
+    <div class="btn-view columns" style="left: unset;right: 20px;" v-if="showAIImage==false">
     	<!-- 切换视图-退出当前模式 -->
     	<div class="compareBtn btn1" @click.stop="showOrHideWebGl" v-if="aiImagesList && aiImagesList.length>0">
     		<img class="compareIcon" src="https://dm.static.elab-plus.com/miniProgram/space1/compareAI_btn.png" mode="widthFix" />
     	</div>
     </div>
 	<!-- 微信客服 -->
-	<!-- <div class="connect-view columns"
+	<div class="connect-view columns"
 		@click.stop="mynavigateFuc" data-jumptype="50" v-if="connectUsImg">
 		<img class="defaultHead" :src="connectUsImg" mode="widthFix"/>
-	</div> -->
+	</div>
 	<!-- 风格层主操作视图 -->
-	<div class="layout-view">
+	<div class="layout-view" :style="{background:backgroundColor}">
 		<!-- 手势区域 -->
 		<!-- <div class="signscoll-block"></div> -->
 		<!-- 精装修 -->
@@ -114,14 +112,21 @@
 					</div>
 				</div>
 			</div>
-			<div class="btn-list rows rows-between" >
-				<div class="btn AiBtn rows justify-center up1" @click.stop="aiSubmit(1)">
+			<div class="btn-list rows rows-between">
+                <div class="pinggu rows" @click="assessmentHandle">
+                    <span class="iconfont icon-jisuanqi" style="font-size: 20px;margin-right: 5px;"></span>
+                    <div class="columns">
+                        <div>计价</div>
+                        <div>评估</div>
+                    </div>
+                </div>
+				<div class="btn AiBtn rows justify-center" @click.stop="aiSubmit(1)" :style="{background:hexToRgba(highColor1,0.4)}">
 					<div class="iconfont icon-a-lujing35039 style1"></div>{{aiImagesList && aiImagesList.length>0?'继续生成':'开始设计'}}
 				</div>
 				<!-- <div class="btn houseType rows justify-center up2" @click.stop="gonext">
 					下一步
 				</div> -->
-                <div class="btn houseType rows justify-center up2" @click.stop="submit">
+                <div class="btn houseType rows justify-center" @click.stop="submit" :style="{background:hexToRgba(highColor1,0.6),'border-color':highColor1}">
                 	提交
                 </div>
 			</div>

src/components/newQCCom/viewMask/viewMask.scss

@@ -28,10 +28,10 @@
 }
 .btn-view{
 	position: absolute;
-	bottom: 620px;
-	left: 30px;
+	top: 120px;
+	left: 20px;
 	width: 72px;
-	z-index: 13;
+	z-index: 16;
 	pointer-events: auto;
 	.change-angle{
 		position: relative;
@@ -108,13 +108,23 @@
 	left:0px;
 	width: 100vw;
 	height: 600px;
-	border-radius: 40px 40px 0 0;
-	background: #fff;
+	// 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;
+    &::before {
+        content: '';
+        position: absolute;
+        top: -174px;
+        left: 0;
+        width: 100%;
+        height: 174px;
+        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--backgroundColor1) 62.82%, var(--backgroundColor) 100%, var(--backgroundColor) 100%);
+        border-radius: 8px 8px 0 0;
+    }
 	.signscoll-block{
 		position: absolute;
 		width: 90px;
@@ -157,13 +167,14 @@
 			font-family: "Verdana";
 			font-weight: 400;
 			font-size: 30px;
-			color: #4e4e4e;
+			color: rgba(255, 248, 248, 0.6);
 			margin-right:40px;
 			padding: 0px 16px;
 		}
 		.btn.active{
-			background: #343434;
-			color: #fff;
+            border-radius: 12rpx;
+            background: #fff;
+			color: #0a0a0a;
 		}
 	}
 	.aiStyleList {
@@ -203,19 +214,19 @@
 				font-weight: 400;
 				font-size: 28px;
 				text-align: center;
-				color: #4e4e4e;
+				color: rgba(255, 255, 255, 0.6);
 			}
 		}
 
 		.styleItemSelected {
 			.styleIcon {
-				border: 2px solid #ff9c38;
+				border: 2px solid #fff;
 			}
 
 			.styleTitle {
 				font-family: "Verdana Bold";
 				font-weight: 700;
-				color: #ff9f40;
+				color: #fff;
 			}
 		}
 	}
@@ -273,8 +284,8 @@
 	
 			.item_sel {
 				background: rgba(247, 211, 116, 0.15);
-				border-color: #FDAD56;
-				color: #fcac56;
+				border-color: #fff;
+				color: #fff;
 			}
 			.item:last-child {
 				margin-right: 0px;
@@ -290,13 +301,13 @@
 	margin-top:30px;
 	.btn{
 		height: 88px;
-		border-radius: 50px;
-		backdrop-filter:blur(40px);
-		--webkit-backdrop-filter: blur(40px);
+		border-radius: 12px;
+		// backdrop-filter:blur(40px);
+		// --webkit-backdrop-filter: blur(40px);
 		font-family: "Verdana Bold";
 		font-weight: 700;
 		font-size: 32px;
-		color: #272727;
+		color: #fff;
 		box-sizing: border-box;
 	}
 	.up1{
@@ -309,38 +320,44 @@
 	}
 	
 	.houseType{
-		width: 320px;
+		width: 332px;
 		margin-left: -14px;
-		box-shadow: 0 6px 20px #f2980233;
+		// box-shadow: 0 6px 20px #f2980233;
 	}
 	.style1{
-		margin-right:17px;
+		margin-right:10px;
 	}
 	.AiBtn{
-		width: 320px;
+		width: 200px;
 		margin-right: -14px;
-		box-shadow: 0 6px 20px #f2980233;
+		// box-shadow: 0 6px 20px #f2980233;
 	}
+    .pinggu{
+        font-family: "Verdana Bold";
+        font-weight: 700;
+        font-size: 30px;
+        color: #fff;
+    }
 }
 .connect-view{
 	position: absolute;
-	width: 242px;
-	height: 330px;
+	width: 114px;
+	height: 202px;
 	background: transparent;
-	bottom: 442px;
-	right:-18px; 
+	bottom: 600px;
+	right:0px; 
 	box-sizing: border-box;
-	z-index: 13;
+	z-index: 16;
 	pointer-events: auto;
 	.defaultHead{
-		width: 242px;
-		height: 330px;
+		width: 114px;
+		height: 202px;
 		// clip-path: polygon(0 0%, 100% 0, 100% 100px, 0 100px);
 	}
 }
 .indicator-view{
 	position: absolute;
-	z-index: 12;
+	z-index: 16;
 	bottom: 620px;
 	left:50%;
 	transform: translateX(-50%);
@@ -362,7 +379,6 @@
 .loading_more {
 	position: absolute;
 	width: 100%;
-	z-index: 12;
 	bottom: 640px;
 	display: flex;
 	align-items: center;
@@ -429,7 +445,6 @@
 	overflow: auto;
 	margin: 0;
 	.main{
-		margin-top: 35vh;
 		width: 80%;
 		position: relative;
 		margin: 0 auto 50px;

src/components/newQCCom/viewMask/viewMask.vue

@@ -167,12 +167,15 @@
 				// dialogVisible: false,
 				// dialogAIVisible: false,
 				datalist:[],
-				connectUsImg:'',
+				connectUsImg:'https://dm.static.elab-plus.com/miniProgram/conect-us-icon.png',
 				curSpaceId:'',
                 queryObj:null,
                 form:null,
                 interval:3000,
                 duration:500,
+                highColor1:window.highColor1,
+                highColor2:window.highColor2,
+                backgroundColor:window.backgroundColor,
 			}
 		},
 		props:{
@@ -263,7 +266,7 @@
 			if(window.innerHeight && window.screen.height){
 				this.screenHeight = Math.min(window.innerHeight,window.screen.height)
 			}
-			this.connectUsImg = 'https://dm.static.elab-plus.com/miniProgram/conentUs.png';
+			// this.connectUsImg = 'https://dm.static.elab-plus.com/miniProgram/conentUs.png';
 			let firstData = JSON.parse(getStorage('firstData'));
 			if(firstData && firstData[0]){
 				this.connectUsImg = firstData[0].selectOptionImageUrl;
@@ -296,6 +299,34 @@
             },
 		},
 		methods:{
+            hexToRgba(hex, opacity) {
+                // console.warn("**hexToRgba****",hex,opacity)
+                if (!hex||!opacity){
+                    return hex
+                }
+                let RGBA;
+                if (hex.includes('#')&&hex.length==7){
+                    RGBA = "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," +
+                        parseInt("0x" + hex.slice(5, 7)) + "," + opacity + ")";
+                }else if (hex.includes('rgb(')){
+            		var values = hex
+            		  .replace(/rgb?\(/, '')
+            		  .replace(/\)/, '')
+            		  .replace(/[\s+]/g, '')
+            		  .split(',')
+            		  return `rgba(${values[0]},${values[1]},${values[2]},${opacity})`
+                }else if(hex.includes('rgba(')){
+            		var values = hex
+            		  .replace(/rgba?\(/, '')
+            		  .replace(/\)/, '')
+            		  .replace(/[\s+]/g, '')
+            		  .split(',')
+            		  return `rgba(${values[0]},${values[1]},${values[2]},${opacity})`
+            	}else{
+                    return hex
+                }
+                return RGBA
+            },
 			//更改空间显示名称 X空间 类型 根据布局所属类型来显示
 			updataLable(){
 				let list = this.layoutList;
@@ -491,35 +522,35 @@
 			},
 		
 			//点赞喜欢
-			// changeAIImg() {
-			// 	// let lastPage = getCurrentPages()[getCurrentPages().length - 2] ? getCurrentPages()[getCurrentPages().length - 2].$vm : null;
-			// 	this.checked = !this.checked;//变更选项
-			// 	this.aiImagesList[this.currentIndex].checked = this.checked;
-			// 	console.warn("***changeAIImg***",this.checked,this.aiData)
-			// 	// if(this.aiData){//给上一个页面回传生成的数据
-			// 	// 	let space = this.aiData.find(it=>{
-			// 	// 		return it.spaceId == this.spaceObj.spaceId
-			// 	// 	})
-			// 	// 	if(space){
-			// 	// 		space.aiImagesList[this.currentIndex].checked = this.checked;
-			// 	// 	}
-			// 	// }
-			// 	if(this.checked){
-			// 		let param = {
-			// 			type: 'CLK', //埋点类型
-			// 			clkId: 'clk_2cmina_23080418', //点击ID
-			// 			clkName: 'chooseprogramme_clk', //点击前往的页面名称
-   //                      behaviorName:"点赞喜欢",
-			// 			clkParams: {
-			// 				locusName: "选定风格/视角",
-			// 				style:this.styleList[this.curStyleIndex].styleName,
-			// 				img:this.aiImagesList[this.currentIndex].image,
-   //                          locusValue:this.aiImagesList[this.currentIndex].image,
-			// 			}
-			// 		};
-			// 		util.trackRequest(param);
-			// 	}
-			// },
+			changeAIImg() {
+				// let lastPage = getCurrentPages()[getCurrentPages().length - 2] ? getCurrentPages()[getCurrentPages().length - 2].$vm : null;
+				this.checked = !this.checked;//变更选项
+				this.aiImagesList[this.currentIndex].checked = this.checked;
+				console.warn("***changeAIImg***",this.checked,this.aiData)
+				// if(this.aiData){//给上一个页面回传生成的数据
+				// 	let space = this.aiData.find(it=>{
+				// 		return it.spaceId == this.spaceObj.spaceId
+				// 	})
+				// 	if(space){
+				// 		space.aiImagesList[this.currentIndex].checked = this.checked;
+				// 	}
+				// }
+				if(this.checked){
+					let param = {
+						type: 'CLK', //埋点类型
+						clkId: 'clk_2cmina_23080418', //点击ID
+						clkName: 'chooseprogramme_clk', //点击前往的页面名称
+                        behaviorName:"点赞喜欢",
+						clkParams: {
+							locusName: "选定风格/视角",
+							style:this.styleList[this.curStyleIndex].styleName,
+							img:this.aiImagesList[this.currentIndex].image,
+                            locusValue:this.aiImagesList[this.currentIndex].image,
+						}
+					};
+					util.trackRequest(param);
+				}
+			},
 			rightScroll(){//右滑
 				if(this.currentIndex <= (this.aiImagesList.length - 1) && this.currentIndex > 0){
 					// this.currentIndex --;
@@ -1090,6 +1121,10 @@
 					this.loadingMsg = '生成中…100%';
 				}
 			},
+            //评估按钮处理
+            assessmentHandle(){
+                this.showToast("敬请期待！");
+            },
 			//返回结果处理
 			resultHandle(resultImg){
 				this.currentImg = true;
@@ -1420,7 +1455,8 @@
             			houseId:houseId,
             			id:res.single,
             		}
-                    wx.miniProgram.redirectTo({url: '/webgl/pages/webgl_rxdz_text_customize/webgl_rxdz_text_customize?id='+data.id+"&houseId="+houseId})
+                    // wx.miniProgram.redirectTo({url: '/webgl/pages/webgl_rxdz_text_customize/webgl_rxdz_text_customize?id='+data.id+"&houseId="+houseId})
+                    wx.miniProgram.redirectTo({url: '/extraPackage/pages/aiPublishPageV2/aiPublishPageV2?id='+data.id+"&houseId="+houseId})
             		// router.push({
             		// 	name: "webgl_rxdz_text_customize",
             		// 	query:data

src/components/newQCCom/viewlayout/viewlayout.html

@@ -19,13 +19,20 @@
 		</div>
 		<!-- 精细化 -->
 		<div class="btn-list rows rows-between" v-else-if="styleType==2">
-			<div class="btn houseType rows justify-center up2" @click="openLayout(3)" v-if="showX">
+            <div class="pinggu rows" :style="{'color':backgroundColor}">
+                <span class="iconfont icon-jisuanqi" style="font-size: 20px;margin-right: 5px;"></span>
+                <div class="columns">
+                    <div>计价</div>
+                    <div>评估</div>
+                </div>
+            </div>
+			<div class="btn houseType rows justify-center up2" @click="openLayout(3)" v-if="showX" :style="{'background':hexToRgba(highColor1,0.2),'color':backgroundColor}">
 				<div class="iconfont icon-huxingjianshang style1"></div>更改功能
 			</div>
 			<div class="btn houseType rows justify-center up3" @click="openLayout(3)" v-else>
 				<div class="iconfont icon-huxingjianshang style1"></div>更改功能
 			</div>
-			<div class="btn AiBtn rows justify-center up1" @click="goRoam">
+			<div class="btn AiBtn rows justify-center " @click="goRoam"  :style="{'background':hexToRgba(highColor1,0.8),'color':backgroundColor}">
 				<div class="iconfont icon-a-lujing35039 style1"></div>AI精软装
 			</div>
 		</div>

src/components/newQCCom/viewlayout/viewlayout.scss

@@ -50,9 +50,9 @@
 }
 .btn{
 	height: 100px;
-	border-radius: 50px;
-	backdrop-filter:blur(40px);
-	--webkit-backdrop-filter: blur(40px);
+	border-radius: 12px;
+	// backdrop-filter:blur(40px);
+	// --webkit-backdrop-filter: blur(40px);
 	font-family: "Verdana Bold";
 	font-weight: 700;
 	font-size: 32px;
@@ -76,13 +76,20 @@
 	background-image:linear-gradient(124deg, #ccc 0%, #ccc  100%);
 }
 .houseType{
-	width: 320px;
-	box-shadow: 0 6px 20px #f2980233;
+	// width: 320px;
+	width: 242px;
+	// box-shadow: 0 6px 20px #f2980233;
 }
 .style1{
 	margin-right:17px;
 }
 .AiBtn{
-	width: 320px;
-	box-shadow: 0 6px 20px #f2980233;
+	width: 254px;
+	// box-shadow: 0 6px 20px #f2980233;
+}
+.pinggu{
+    font-family: "Verdana Bold";
+    font-weight: 700;
+    font-size: 30px;
+    color: #fff;
 }

src/components/newQCCom/viewlayout/viewlayout.vue

@@ -43,6 +43,9 @@
 				changeRate:0.05,	//每次变化的比例
 				spaceList:[],
 				showX:false,
+                highColor1:window.highColor1,
+                highColor2:window.highColor2,
+                backgroundColor:window.backgroundColor,
 			}
 		},
 		props: {
@@ -112,6 +115,7 @@
 			// this.initRecord();
 			// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
 			// currPage.updateSpanceData = this.initSpanceData;//页面注册变更方法
+            // this.hexToRgba = window.hexToRgba;
 		},
 		// 页面被展示时执行
 		onPageShow: function() {
@@ -122,6 +126,34 @@
 			console.warn("***detached-hide***")
 		},
 		methods: {
+            hexToRgba(hex, opacity) {
+                console.warn("**hexToRgba****",hex,opacity)
+                if (!hex||!opacity){
+                    return hex
+                }
+                let RGBA;
+                if (hex.includes('#')&&hex.length==7){
+                    RGBA = "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," +
+                        parseInt("0x" + hex.slice(5, 7)) + "," + opacity + ")";
+                }else if (hex.includes('rgb(')){
+            		var values = hex
+            		  .replace(/rgb?\(/, '')
+            		  .replace(/\)/, '')
+            		  .replace(/[\s+]/g, '')
+            		  .split(',')
+            		  return `rgba(${values[0]},${values[1]},${values[2]},${opacity})`
+                }else if(hex.includes('rgba(')){
+            		var values = hex
+            		  .replace(/rgba?\(/, '')
+            		  .replace(/\)/, '')
+            		  .replace(/[\s+]/g, '')
+            		  .split(',')
+            		  return `rgba(${values[0]},${values[1]},${values[2]},${opacity})`
+            	}else{
+                    return hex
+                }
+                return RGBA
+            },
 			initSpanceData(){
 				this.carefulList = [];
 				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;

src/pages/webgl_rxdz_test_all/webgl_rxdz_test_all.html

@@ -0,0 +1,46 @@
+<div class="map" style="position: absolute;width: 100%;height: 100%;z-index: 1;">
+	<mynavbar :barData='navbar'/>
+	<!-- 提交按钮 -->
+	<!-- <div class="submit-btn" @click="submitHouse" v-if="styleType==1">提交</div> -->
+	<div class="area-view">
+		<!-- <div>总面积：{{layoutArea}}<span style="font-weight: 700;">㎡</span></div> -->
+		<div class="rows style1">
+			<div v-if="changeArea" class="reduce">
+				<div>{{changeArea < 0 ? '减少':'增加'}}</div>
+				<div class="style2" >{{Math.abs(changeArea)}}<span class="style3">㎡</span></div>
+			</div>
+			<div>
+				<div>初始面积：{{fixedArea}}<span style="font-weight: 700;">㎡</span></div>
+				<div>当前面积：{{sumArea}}<span style="font-weight: 700;">㎡</span></div>
+			</div>
+		</div>
+	</div>
+    <!-- 定位视图 -->
+    <div class="location-view rows justify-center" @click.stop="locationHandle">
+        <span class="iconfont icon-pipei" style="color: #000;font-size: 44rpx;"></span>
+    </div>
+    <div id="mapDiv" ref="webgl"></div>
+	<canvas id="glcanvas" width="100vw" height="100vh" ref="glcanvas"
+	 :style="{'height':canvasHeight+'px'}">
+		你的浏览器似乎不支持或者禁用了 HTML5 <code>&lt;canvas&gt;</code> 元素。
+	</canvas>
+	<!-- 主要操作视图 -->
+	<viewShell ref="viewShell" pageType="1" :overChange="overChange" :houseObj="curHouseObj" :floorList="floorList"
+	@curSpaceChange="curSpaceChange" @curHouseFloorChange="curHouseFloorChange"></viewShell>
+	<!-- @click="goRoam(gltf)" -->
+	<div v-show="showLables && gltf.text.length>0 && gltf.transform" v-for="(gltf,index) in lableItem" :key="index" class="word-view"
+	:style="{'transform':gltf.transform}" >
+		<div @click="selectSpaceHandle(gltf)" v-if="styleType==2" user-select="false" :class="['number-view ',(index+1)>9?'number-more':'',currentChangeSpaceId==gltf.spaceId?' active':'']">{{gltf.spaceIndex+1}}</div>
+		<div @click="selectSpaceHandle(gltf)" v-else user-select="false" class="word" :class="currentChangeSpaceId==gltf.spaceId?'active':''">{{gltf.text}}></div>
+		<!-- 更改功能按钮 -->
+		<!-- <div class="change-view rows justify-center" @click="enterPlot(gltf)" v-if="selectSpace && selectSpace.spaceId==gltf.spaceId">更改功能</div> -->
+	</div>
+    <!-- <contrastImg c-style="width: 100%;height: 500px;overflow: hidden;position: absolute;"
+        mode="aspectFill"  type="2" leftSrc="https://elab-marketing-web.oss-accelerate.aliyuncs.com/aiBeauty/1748401728858.png"
+        ></contrastImg> -->
+	<!-- <div id="labels"></div> -->
+	<!-- 左侧操作区域 -->
+	<!-- <left-operate-comp @operateHandle="operateHandle"></left-operate-comp> -->
+    <!-- 生成截屏的画布对象 -->
+    <canvas id="canvas" type="2d" :style="{'height':'200px','top':'200px'}"></canvas>
+</div>

src/pages/webgl_rxdz_test_all/webgl_rxdz_test_all.scss

@@ -0,0 +1,215 @@
+#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;
+}