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

<div class="map" style="position: absolute;width: 100%;height: 100vh;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 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" 
	@curSpaceChange="curSpaceChange"></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>
	<!-- <div id="labels"></div> -->
	<!-- 左侧操作区域 -->
	<!-- <left-operate-comp @operateHandle="operateHandle"></left-operate-comp> -->
</div>