h5-webgl-program/src/pages/webgl_rxdz_role/webgl_rxdz_role.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="bg1"></div>
		<div class="bg2"></div>
		<div class="role-info" v-if="roleList && roleList.length>0">{{roleList[currImgIdx].text}}</div>
        <!-- 角色图片轮播区域 -->
        <div class="master-pic" v-if="roleList && roleList.length>0">
        	<el-carousel :autoplay="false" :loop="false" :indicator-dots="false"
        		@change="swiperChangeImg" class="master-pic-swiper" arrow="always"
        		:current="currImgIdx" ref="carousel" indicator-position="none">
                <el-carousel-item v-for="(item,s) in roleList" :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>
		<!-- 大类 -->
		<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 class="tab-right-line"></div>
				</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-view rows justify-center" @click="toMode" :class="{'active': allSelect}">
			确定个人偏好
		</div>
    </div>
</div>