<!--
 * @Author: 353810753@qq.com
 * @Date: 2023-05-17 15:46:34
 * @LastEditors: 353810753@qq.com
 * @LastEditTime: 2023-06-30 16:20:04
-->
<div class="main-view">
	<div class="music-view rows justify-center" v-if="music.title">
		<img class="icon-yinle" src="https://dm.static.elab-plus.com/miniProgram/music_icon.png" alt=""></img>
		{{music.title}}
	</div>
	<div class="to rows justify-center" @click="rotateVideo" v-if="tabIndex==0">
		<img class="convert" src="https://dm.static.elab-plus.com/miniProgram/convert1.png" alt=""></img>
	</div>
	<krpanoVideo ref="krpanoVideo" :bgUrl="bgUrl" :muted="muted"></krpanoVideo>
	<div class="voice-btn rows justify-center" @click="updateMuted">
		<span :class="[muted?'iconfont icon-jingyin':'iconfont icon-yinliang']" style="color: #ffffff;"></span>
	</div>
	<div class="slide-mask" v-if="tabIndex==0 || tabIndex==1"></div>
	<!-- 数字人大小滚动条 -->
	<div class="slide-view columns rows-between" v-if="tabIndex==0 || tabIndex==1">
		<div class="slide-tips">{{tabIndex==0?'数字人':'宠物'}}<br>大小</div>
		<div class="slide-word">放大</div>
		<el-slider
			class="rangeview"
		    v-model="value"
		    vertical
			:min="10"
			:max="100"
			:show-tooltip="false"
			@change="rangeChange"
		    >
		</el-slider>
		<div class="slide-word">缩小</div>
	</div>
	<!-- AI数字人组件 -->
	<viewAI ref="viewAI" :relationId="relationId" :amount="amount" @aiPeopleChange="aiPeopleChange" @tabChange="tabChange" @setRedBox="setRedBox" @redBox="redBox" style="z-index: 130;"></viewAI>
	<!-- <payView ref="payView"></payView> -->
	<playTips ref="playTips"></playTips>
</div>