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

<div class="bookingSheet">
    <!-- <shareOption @afterUserHandle="afterShareOptionHandle" @optionChange="optionChange" :showShareOptions="showShareOptions"></shareOption> -->
    <mynavbar :barData='navbar'/>
	<!-- <authview id="authView" :showPhoneModel="showPhoneModel"></authview> -->
    <div class="contentBox">
        <!-- 图片区域 -->
        <div class="picArea">
            <div class="master-pic" v-if="tabData[tabIndex] && tabData[tabIndex].hardboundEffect.length>0">
				<el-carousel :autoplay="false" :loop="false" :indicator-dots="false"
					@change="swiperChangeImg" class="master-pic-swiper" 
					:current="currImgIdx" ref="carousel">
                    <el-carousel-item v-for="(img,s) in tabData[tabIndex].hardboundEffect" :key="s" :item-id="s" class="master-pic-img">
                        <img @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend" class="master-pic-img" :src="img" mode="aspectFill" />
						<div class="lookHouseView rows justify-center" v-if="tabIndex==0 && (!shareUserId || shareUserId==userId)" @click="toMode">
							<img class="icon-ai" src="https://dm.static.elab-plus.com/miniProgram/iconfont/icon-ai.png" mode="widthFix"/>
							查看户型
						</div>
                        <!-- <c-img class="master-pic-img" :style="'background-color:#fff'" :src="img" mode="aspectFill"></c-img> -->
                    </el-carousel-item>
                </el-carousel>
				<div class="indicator-view rows" v-if="tabData[tabIndex].hardboundEffect && tabData[tabIndex].hardboundEffect.length > 1">
					<div class="indicator-item" :class="{'active': currImgIdx == idx}" 
					v-for="(item, idx) in tabData[tabIndex].hardboundEffect" :key="idx"></div>
				</div>
            </div>
            <div class="tabList rows flex-start">
				<div @click="changeTab(index)" class="tab-item columns" :class="{'tabActive': tabIndex == index}" 
					v-for="(tab,index) in tabData" :key="index" >
					<img class="tab-img" :src="tab.imgUrl" mode="aspectFill" />
					<div class="tab-info rows rows-between">
						<div class="eslipe">{{tab.name || '-'}}</div>
						<div class="eslipe" v-if="tab.area">{{tab.area || '-'}}㎡</div>
					</div>
				</div>
            </div>
        </div>
        <!-- 提交信息区域 -->
        <div class="booking-info" :style="{'color':tabIndex==0?'#000':'#fff'}" v-if="layoutStruct">
			<div class="left-line line"></div>
			<div class="right-line line"></div>
            <div class="writingBox rows">
                <img class="writing-img" :src="layoutStruct.houseImg || plotHeadDeafultImg" />
                <div class="wiriting-right" >
                    <div class="font40 wiriting-text">{{shareUserId&&shareUserId!=userId?'':'我的'}}私人定制</div>
                    <div class="font52 wiriting-text">{{layoutStruct.houseName || ''}}</div>
                </div>
            </div>
            <!-- 文字信息区域 -->
            <div class="info-bar">
				<div class="info-item" v-if="layoutStruct.expand && layoutStruct.expand.landNo">
				    <div class="info-item-label">地块</div>
				    <div class="info-item-value">{{layoutStruct.expand.landNo || '-'}}</div>
				</div>
				<div class="info-item" v-if="layoutStruct.expand && layoutStruct.expand.landArea">
				    <div class="info-item-label">地块面积<span class="textAbout">约</span></div>
				    <div class="info-item-value">{{layoutStruct.expand.landArea || '-'}}</div>
				</div>
				<div class="info-item" v-if="layoutStruct.expand && layoutStruct.expand.buildingAreaPreference">
				    <div class="info-item-label">建筑面积<span class="textAbout">约</span></div>
				    <div class="info-item-value">{{layoutStruct.expand.buildingAreaPreference+'m²' || '-'}}</div>
				</div>
				<div class="info-item" v-if="layoutStruct.expand && layoutStruct.expand.layer">
				    <div class="info-item-label">层数</div>
				    <pre class="info-item-value">{{layoutStruct.expand.layer.replace(/&|·/g,'\n') || '-'}}</pre>
				</div>
				<div class="info-item" v-if="layoutStruct.expand && layoutStruct.expand.structureName">
				    <div class="info-item-label">结构</div>
				    <pre class="info-item-value">{{layoutStruct.expand.structureName || '-'}}</pre>
				</div>
				<div class="info-item" v-if="layoutStruct.expand && layoutStruct.expand.scenery">
				    <div class="info-item-label">地形地势</div>
				    <pre class="info-item-value">{{layoutStruct.expand.scenery || '-'}}</pre>
				</div>
				<div class="info-item" v-if="layoutStruct.expand && layoutStruct.expand.landDescription">
				    <div class="info-item-label">景观</div>
				    <pre class="info-item-value">{{layoutStruct.expand.landDescription.replace(/&|·/g,'\n') || '-'}}</pre>
				</div>
				<div class="info-item" v-if="layoutStruct.expand && layoutStruct.expand.structureDescription">
				    <div class="info-item-label">空间特质</div>
				    <pre class="info-item-value">{{layoutStruct.expand.structureDescription.replace(/&|·/g,'\n') || '-'}}</pre>
				</div>
                <div class="info-item">
                    <div class="info-item-label">户型</div>
                    <div class="info-item-value eslipe">{{form.layoutName || '-'}}</div>
                </div>
                <div class="info-item">
                    <div class="info-item-label">定制空间面积<span class="textAbout">约</span></div>
                    <div class="info-item-value">
						<div v-for="(floor,index) in layoutStruct.layoutStruct" :key="index">
							{{floor.layoutArea?(floor.floor +"F:" + floor.layoutArea+'m²'):'-'}}
						</div>
					</div>
                </div>
                <!-- <div class="info-item">
                    <div class="info-item-label">家庭结构</div>
                    <div class="info-item-value">{{layoutStruct.spaceName || '-'}}</div>
                </div> -->
                <div class="info-item" v-if="form.style">
                    <div class="info-item-label">风格偏好</div>
                    <div class="info-item-value">{{form.style || '-'}}</div>
                </div>
            </div>
        </div>
		<!-- 底部按钮 -->
		<div class="bottom-view columns justify-center">
			<div class="bottom-title" :style="{'color':tabIndex==0?'#1A1A1A':'#fff'}">
				- 分享我的梦想家 -
			</div>
			<div class="bottom-tips" :style="{'color':tabIndex==0?'#1A1A1A':'#fff'}">
				分享好友可获得私定高额优惠
			</div>
			<div class="rows rows-between">
				<div class="bottom-btn btn-qw rows justify-center" @click="navigateFuc">
				    加企微 · 定制服务
				</div>
				<div class="bottom-btn btn-share rows justify-center" @click="optionChange(true)">
					<i class="iconfont icon-Shared" style="color: #ffffff;font-size:32rem;margin-right:20rem;"></i>
				    立即分享
				</div>
			</div>
		    
		</div>
		<!-- 高斯背景图 -->
		<div class="swiper-img-gs-mh" v-if="gsImage" >
			<img class="img" mode="aspectFill" :src="gsImage" />
		</div>
		
    </div>
	
	<!-- 添加企微弹出层 -->
    <!-- <div class="f-popup-bom-container" @click.stop.prevent="showPopup=false" v-show="showPopup">
		<div class="f-popup-view">
            <img class="closeIcon" @click="showPopup = false;" src="https://dm.static.elab-plus.com/mini-program/closeIcon.png" mode="widthFix" />
			<scroll-view scroll-y="true" class="f-popup-bom" @click.stop.prevent="catchEvent" :enhanced="true" :show-scrollbar="false">
                <img mode="widthFix" :show-menu-by-longpress="true" class="qrCode" :src="enterpriseWechat" />
            </scroll-view>
		</div>
	</div> -->
</div>