h5-webgl-program/src/components/newQCCom/viewMask/viewMask.html

<!-- 覆盖层操作视图 -->
<div class="mask-view" @touchmove.stop="catchTapEvent" @click.stop="catchTapEvent">
	<!-- 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"
    :interval="interval" :duration="duration"
	@change="swiperChangeImg" :initial-index="currentIndex">
		<el-carousel-item v-for="(item,index1) in aiImagesList" :key="index1" >
            <!-- <img @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend" style="width:100%;height:100%;object-fit: cover;" mode="aspectFill" :src="item.image"></image> -->
            <!-- <el-image 
            	@touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend"
            	@click="previewAction"
                style="width:100%;height:100%;cursor:none;"
                :src="item.image"
            	fit='cover'
                >
            </el-image> -->
            <div @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend" style="width: 100%;height:100%">
               <contrastImg c-style="width:100%;height:100%;overflow: hidden;" type="2" :leftSrc="item.image"></contrastImg> 
            </div>
            
		</el-carousel-item>
	</el-carousel>
    <!-- <mt-swipe v-if="aiImagesList && aiImagesList.length>0" v-show="showAIImage" class="swiper"
     :continuous="false" ref="carousel" :showIndicators="false" 
    :speed="duration" :auto="0"
    @change="swiperChangeImg" :defaultIndex="currentIndex">
    	<mt-swipe-item v-for="(item,index1) in aiImagesList" :key="index1" >
    		
            <div @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend" style="width: 100%;height:100%">
               <contrastImg c-style="width:100%;height:100%;overflow: hidden;" type="2" :leftSrc="item.image"></contrastImg> 
            </div>
            
    	</mt-swipe-item>
    </mt-swipe> -->
	<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="compareBtn btn1" @click.stop="save" v-if="showAIImage">
			<img class="down" src="https://dm.static.elab-plus.com/miniProgram/iconfont/down.png" mode="widthFix"/>
		</div> -->
		<!-- 切换视图-退出当前模式 -->
		<!-- <div class="compareBtn btn1" @click.stop="showOrHideWebGl">
			<img class="compareIcon" src="https://dm.static.elab-plus.com/miniProgram/space1/compareAI_btn.png" mode="widthFix" />
		</div> -->
		<!-- 点赞喜欢 -->
		<!-- <div class="likeBtn columns" @click.stop="changeAIImg" :class="{like:checked}">
			<div class="iconfont icon-qeuren"></div>
			喜欢
		</div>
	</div> -->
    <!-- 右侧按钮  -->
    <div class="btn-view columns" style="left: unset;right: 30px;" 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"/>
    	</div>
    	<!-- 切换视图-退出当前模式 -->
    	<div class="compareBtn btn1" @click.stop="showOrHideWebGl">
    		<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="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"
		@click.stop="mynavigateFuc" data-jumptype="50" v-if="connectUsImg">
		<img class="defaultHead" :src="connectUsImg" mode="widthFix"/>
	</div> -->
	<!-- 风格层主操作视图 -->
	<div class="layout-view">
		<!-- 手势区域 -->
		<!-- <div class="signscoll-block"></div> -->
		<!-- 精装修 -->
		<div class="aiEdit">
			<!-- tab视图 -->
			<!-- <div class="tab-view rows">
				<div class='left btn rows justify-center' :class="{active:modelType==2}" @click="changeModel(2)">精准设计</div>
				<div class='right btn rows justify-center' :class="{active:modelType==1}" @click="changeModel(1)">创意设计</div>
			</div> -->
			<div class="tab-view">
				<div class="content rows">
					<div class="btn rows justify-center" v-for="(item, idx) in datalist" @click="changeSpace(item)"
					:class="{active:spaceObj.spaceId==item.spaceId}" :key="idx">{{item.text}}</div>
				</div>
			</div>
			<div class="aiStyleList rows">
				<div class="styleItem" v-for="(item, idx) in styleList" :key="idx" :id="'styleItem'+idx"
				@click.stop="selectStyle(idx)" :class="{'styleItemSelected':curStyleIndex==idx}">
					<img class="styleIcon" :src="item.imgUrl+'?imageMogr2/auto-orient/thumbnail/200x200/blur/1x0/quality/75'" mode="aspectFill"></image>
					<span class="styleTitle">{{item.styleName}}</span>
				</div>
			</div>
			<!-- 主题 -->
			<div class="section4">
				<div class="items">
					<div :class="['item', themeIndex==idx ? 'item_sel columns': 'columns']" v-for="(item, idx) in themeList"
						:key="idx" @click="selectAction(item,'theme',idx)">
						<div class="def-view" v-if="idx==0"></div>
						<div class="color-view rows" v-else>
							<div class="left" :style="{'background':item.leftColor}"></div>
							<div class="right" :style="{'background':item.rightColor}"></div>
						</div>
						<div>{{item.text}}</div>
					</div>
				</div>
			</div>
			<div class="btn-list rows rows-between" >
				<div class="btn AiBtn rows justify-center up1" @click.stop="aiSubmit(1)">
					<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>
			</div>
		</div>
	</div>
	<div class="loadData" v-show="myloading">
		<img src="https://dm.static.elab-plus.com/miniProgram/loading.gif" alt="" />
		<div class="loadingMsg">{{loadingMsg}}</div>
	</div>
</div>