h5-webgl-program/src/pages/webgl_rxdz_test1_env/webgl_rxdz_test1_env.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="master-pic" v-if="aiImagesList && aiImagesList.length>0">
        	<el-carousel :autoplay="false" :loop="false" :indicator-dots="false"
				:initial-index="currentIndex"
        		@change="swiperChangeImg" class="master-pic-swiper" arrow="always"
        		ref="carousel" indicator-position="none">
				<!-- <el-carousel-item class="master-pic-item rows justify-center">
				    <img @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend" 
					class="master-pic-img" :src="firstImg" mode="aspectFill" />
				</el-carousel-item> -->
                <el-carousel-item v-for="(item,s) in aiImagesList" :key="item.id" 
        			:item-id="item.id" class="master-pic-item rows justify-center">
                    <img @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend" 
        			class="master-pic-img" :src="item.imageUrl" mode="aspectFill" />
                </el-carousel-item>
            </el-carousel>
			<div class="indicator-view rows" v-if="aiImagesList && aiImagesList.length>1">
				<div class="indicator-item" :class="{'active': currentIndex == idx}" v-for="(item, idx) in aiImagesList" :key="idx"></div>
			</div>
			<!-- v-if="aiFlag && aiImagesList.length>0 && showAIImage" -->
            <div class="load-mask-top"></div>
			<div class="load-mask"></div>
			<div class="loading_more">
				<template v-if="!startCreate">
					<img class="leftSwiperImg"
						src="https://dm.static2.elab-plus.com/miniProgram/leftSwiperImg.png"
						mode="aspectFit"></image>
				</template>
				<template v-else>
					<img class="loading_img"
						src="https://dm.static2.elab-plus.com/aiBeauty/aiBeauty3/icon_loading_Img.png"
						mode="aspectFit" />
					<span class="loading_text" v-if="loadingMsg">{{loadingMsg}}</span>
				</template>
			</div>
        </div>
		
		<!-- 底部视图 -->
		<div class="bottom-view">
			<!-- 左侧按钮  -->
			<div class="btn-view columns" v-if="aiImagesList[currentIndex]">
				<!-- 下载 -->
				<!-- <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="likeBtn columns" @click.stop="changeAIImg" :class="{like:checked}">
					<div class="iconfont icon-qeuren"></div>
					喜欢
				</div>
			</div>
			<!-- 大类 -->
			<div class="tabList">
				<div class="tab-content rows flex-start">
					<div @click="changeTab(index)" class="tab-item columns"
						:class="{'tabActive': tabIndex == index}" 
						v-for="(tab,index) in tabData" :key="index" >
						<div class="tab-text">{{tab.fatherContent}}</div>
						<div class="tab-info rows justify-center" :class="{'select': tab.checkedIndex > -1}">
							<i class="iconfont icon-Hook-1"></i>
						</div>
					</div>
					<div class="tab-line"></div>
				</div>
			</div>
			<!-- 选项 -->
			<div class="swiper-view">
				<div class="tab-content rows flex-start">
					<div @click="changeOption(index)" class="tab-item columns"
						:class="{'tabActive': optionIndex == index}" 
						v-for="(tab,index) in options" :key="index" >
						<img class="tab-img" :src="tab.imageUrl" mode="aspectFill" />
						<div class="tab-text">{{tab.content}}</div>
					</div>
				</div>
			</div>
			<div class="question rows justify-center" v-if="tabData && tabData[tabIndex]">
				{{tabData[tabIndex].subName}}
			</div>
			<!-- 底部按钮 -->
			<div class="bottom-btn rows justify-center" @click="enterAction" :class="{'active': allSelect}">
				下一步
			</div>
		</div>
    </div>
</div>