<template name="dialogue">
	<view>
		<scroll-view class="talk-cont" scroll-y :scroll-top="scrollTop">
		  <view class="topbanner" v-if="item.pic">
			<image :src="item.pic" mode="widthFix" class="media-cover" />
		  </view>
		  <view class="talklist">
			<view v-for="(v, k) in item.text" :key="k" :class="['talk',(v.type == 3?'flex-center':''), (v.location == 2?'talk-right':'') ]" v-if="k<limit">
			  <block v-if="v.location == 1">
				<view class="avatar"><image :src="v.avatar"></image></view>
			  </block>
		
			  <view class="talk-text" v-if="v.type == 1">
				<text>{{v.words}}</text>
			  </view>
			  <view class="talk-img" v-if="v.type == 2">
				<image @click="Dever.viewPic(item.text, v.pic, 'pic')" :src="v.pic" mode="widthFix" bindload="imgLoaded" style="height:auto"></image>
			  </view>
			  <view v-if="v.type == 3" :class="['sound', playing[v.order], sign]" @click="playAudio" :data-aid="v.order"  :data-src="v.audio" ></view>
			  
			  <block v-if="v.location == 2">
				<view class="avatar"><image :src="v.avatar"></image></view>
			  </block>
			</view>
		  </view>
		  <view id="bottom"></view>
		</scroll-view>
		<view class="tapfigure-cont" v-if="pageShow" @click="talkPage">
		  <view class="tapfigure"></view>
		  点击这里
		</view>
	</view>
</template>

<script>
export default {
	name: "dialogue",
	props: {
		control : {
			type : Object,
			value : null
		},
		item : {
			type    : Object,
			value	: null
		},
		index : 0
	},
	created() {
		
	},
	mounted() {
		this.control[this.index] = this;
		this.limit = this.item.num;
		if (this.limit >= this.item.text.length){
			this.limit = this.item.text.length;
			this.pageShow = false;
		}
		for (var i in this.item.text) {
			var v = this.item.text[i];
			if (v.type == 3) {
				var aid = v.order;
				if (!this.audio[aid]) {
					var audio = uni.createInnerAudioContext()
					audio.src = v.audio;
					audio.onPause((res) => {
						this.playing[aid] = '';
					})
					audio.onEnded((res) => {
						this.stopAudio('none3', aid);
					})
					this.audio[aid] = audio;
					this.playing[aid] = '';
				}
			}
		}
	},
	data() {
		return {
			load:false,
			audio:{},
			video:{},
			sign : 'none',
			playing:{},
			limit:4,
			scrollTop: 0,
			audio_current_index: 0,
			video_current_index: 0,
			pageShow: true,
		};
	},
	methods:{
		start : function() {
			this.startAudio('play1');
		},
		stop : function() {
			this.stopAudio('none3');
		},
		
		talkPage : function() {
			this.limit = ++this.limit;
			this.pageShow = true;
			if (this.limit >= this.item.text.length){
			  this.limit = this.item.text.length;
			  this.pageShow = false;
			}
			setTimeout(() => {
				this.scrollTop = 10000000 + Math.random();
			},300)
		},
			
		playAudio : function(e) {
			this.load = true;
			for (var key in this.audio) {
				if (key == e.target.dataset.aid) {
					this.audio_current_index = key;
					if (this.playing[key]) {
						this.stopAudio('none1', key);
					} else {
						this.startAudio('play', key);
					}
				} else {
					this.stopAudio('none2', key);
				}
			}
		},
		
		startAudio : function(sign, key) {
			if (!key) {
				key = this.audio_current_index;
			}
			this.audio[key].play();
			this.playing[key] = 'playing';
			this.sign = sign;
		},
		
		stopAudio : function(sign, key) {
			if (!key) {
				key = this.audio_current_index;
			}
			this.audio[key].pause();
			this.playing[key] = '';
			this.sign = sign;
		},
	},
}
</script>

<style>
.topbanner{
  width: 750rpx;
}
.media-cover{
  width: 100%;
  display: block;
}
.talklist{
  padding-bottom: 138rpx;
}
.talk {
  padding: 0 31rpx;
  display: flex;
  margin-top: 40rpx;
  align-items: flex-start;
}
.talk.talk-right{
  justify-content: flex-end;
}
.talk .avatar{
  width: 80rpx;
  height: 80rpx;
  flex-shrink: 0;
  border-radius: 50%;
  margin-right: 20rpx;
}
.talk.talk-right .avatar{
  margin: 0 0 0 20rpx;
}
.talk.flex-center{
  align-items: center;
}
.talk .avatar image{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.talk .sound{
  position: relative;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALgAAABSCAYAAADn7B4jAAAACXBIWXMAAC4jAAAuIwF4pT92AAAGAGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMDQtMDNUMTY6MzY6NDMrMDg6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTktMDQtMDNUMTY6MzY6NDMrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTA0LTAzVDE2OjM2OjQzKzA4OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmMzZDk3ZGUxLWY4ZDQtNGQ1Mi04YThmLTVmZDIxNTUyMGE1NyIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjU3YmVjMjIzLWM0ZGQtZDY0Zi1iNWI0LTE3OTQ3OTE4YjNmMCIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOmE4NjdkMmQ3LThjYjYtNGFlZC1hMzJjLWQ5ZGU2Y2ViZWZlMiIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YTg2N2QyZDctOGNiNi00YWVkLWEzMmMtZDlkZTZjZWJlZmUyIiBzdEV2dDp3aGVuPSIyMDE5LTA0LTAzVDE2OjM2OjQzKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YzNkOTdkZTEtZjhkNC00ZDUyLThhOGYtNWZkMjE1NTIwYTU3IiBzdEV2dDp3aGVuPSIyMDE5LTA0LTAzVDE2OjM2OjQzKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4WvzC2AAAEWUlEQVR4nO3dsW8bZRyH8eccfChxbHwmF1HcSAFlDbokXWEsYkC0QP6KglSGFqg6MFGRAYRUiY2BkYYmEh3ZEYKAMmQjQ6zUAV/kO8WxCLacY7AtVYGEnH1O7Vffz2ifTr/hiXX3nvKeFUURIqZ6BmBjY6Ofc9jAMnAdWAKKQLrvyURO1wQeAxvAGvAAaJw8aGlpqR14H94F7hUKhbl8Pk8mkyGdTmNZVp+nFTldFEXpZrM5W6/XZ8MwfKdarX4CfAR8d/LYXgMfA750HOeG67pks9k+xhWJx7IsbNvGtm0cx2FqamrO9/3VIAjuAzeBVvfYXgO/Nz09fWNmZiaJeUX6ks1mmZycJJ1Ov1epVP4Cbne/S/VwvmXHcW4Vi8XkJhTpk2VZFItFHMe5RfueEIgf+LPAF67rkkr18rchMjipVArXdQE+p734ETvw5UKhUNQ1twyrbDZLoVC4TOdXPG7g1/L5fOJDiSSp0+g1iB/4lUwmk/A4IskaHx8HeAXiB34pndYzHBlunUYvQfzAbT3EkWE3NjYGkIXelglFRoYCF6MpcDGaAhejKXAxmgIXoylwMZoCF6MpcDGaAhejKXAxmgIXoylwMZoCF6MpcDGaAhejKXAxmgIXoylwMVqcwF/P5XIDG0RkEM4TuAV8DHzf2TVIZGT83+abGeAb4I35+fm0bdsXMJJIcs4K/GXgEVD0PG+886/4IiPltEuUq8CvwAue5+UUt4yqk4FbtPdWfgjgeZ6juGWUPXmJkgG+Bl4FLM/znlPcMuq6gc/RfpnPMfD8wsKCrf2/xQTdwL+ifVM5vri4aGn/QTFF92f6TdqvZKPVap1+tMiI6QZ+BLwGfLq5uRmFYfj0JhJJ0MkL7bvA1e3t7aO9vb2nMY9Iov7rTvIHYLZcLu+USqWLnkckUactlfwJvOT7/lqpVOLo6OgiZxJJzFlrgRHwtu/7729tbR3v7+9f1EwiiTnPYvd94MrOzk5td3d30POIJOq8T3N+A170fX+Qs4gkLs7jysPj4+OBDSIyCHoeL0ZT4GI0BS5GU+BiNAUuRlPgYjQFLkZT4GI0BS5GU+BiNAUuRlPgYjQFLkZT4GI0BS5GU+BiNAUuRlPgYjQFLkZT4GI0BS5GU+BitLiBN6IoGsggIknpNPo3xA98r9lsJj6QSJI6jf4B8QP/pV6vJz6QSJI6jf4M8QNf1+b4Muw6ja5D/MC/rVarj2u1WsIjiSSjVqtRrVZ3gQfQw00mcNP3fb3LR4ZOq9Wis0HsB7Rb7WmZcDUIgpVyuazIZWi0Wi3K5TJBEKwAq93Pz3pX/VnuVCoVGo3Gbdd1yeVyyUwp0oODgwN83ycMwxXgzpPf9Rp4C/gwDMOfwjD8zHGcuXw+z8TEBLZto5fIyiBFUUSz2eTw8JAwDAmC4Hfar6BfO3lsr4F3PQQeBUHwVhAE14EF4DIw2ed5Rc7SAMrAj7RXS9Y7n/2LpSeTYrJ/AI9jC5GZQxHpAAAAAElFTkSuQmCC) no-repeat;
  width: 184rpx;
  height: 82rpx;
  background-size: 184rpx 82rpx;
}
.talk .sound:before{
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAABHNCSVQICAgIfAhkiAAAA55JREFUWIXtmE2IHEUUx/+venQRJeBCILuCiPEQiUpyMCAJOawEjUEMImuUXJTtqWLWTDzEgJDDEARBRXEkO101u0hgQRkwKuRD0ewhKB7MQdxoLn4cVNZLJisq4s5MPw/pGWpeJuxMplsI7Dv1e+//Xv2muqu6eoA1W7M1u7GNsh6gVCrlxsfHTzPzUa31F4PWqyygfBsbGysx8y4AJyqVyl2D1mcKWK1WJwC8nLjrlVIf1mq1mwfpkSlgHMfHxBhb6vV6aZAemQIyswbQ8GNEdNhau6nfHqkBOucOOecqzNxZeMaYcwAOCGkA4LV++6ayiqMoepyIPgKgmPltY8yLft5aexLAHj/GzJuNMd+v1nvoGXTObSGi99q9iOigc+55X9NqtYq4+la/0E//oQGZeR7ArSJWttbe2fYLhcJPAN4VpU/VarUgE0Dn3O5yubwugTkIMTsJ8Ct+gIjKQrN+eXl5R+qAURQ9yswfj4yMWAAwxpwFUOghfXZubm687eTz+e8AXPAFzLw9VcAoih4iohMAbgKwr1KpbAMArfUsMy8IedBoNPYJoLO+T0TbUgO01t5PRKcA3NIpVkp7ktdlDRHt6hpMqa8F8MZUAGdnZ+8BcAbA7SLVuUWjo6MLAP4S+Qd8h4h+FPk7UgFstVrz12i2oX0xOTm5AuCiyI/5TrPZ/F3k5Q++PsAgCPYD+K1H6pLvMHNd5Id+EfQFODU19QOA3QAuC6DzXTREo6KUh6LDAItEa73IzHsA/OOFj7cvkmPUvaLsF9/J5XIbRP6P1AABwBjzFTM/CaDBzJ8aY063c/V6fQLAbb6emb8Vvly1vR6b6wdMID9h5r1E9LQ3MAF4SWqJqGvfi+P4QSGRq/oqyw0KmEB2Zo6ZqVqtThHRhJC1ms3m+36AiB4W/nmsYkMfFqy1jzDzsR6p+enp6c624pzbDOA+XxDH8ZeZAxLRG7jy6vPtT6XUET/AzEWhuUxE51brnwbgfgB/i/CBMAx/bTszMzN3A3hOaD7QWstTUPqA+Xz+G2Z+BkAMAET0ptb6uK8JgqAMMctKqXf66Z/ah7tz7hCAjWEYFoios0FbazWASMjPaK0f+18Be1kURTuJ6HN0z14LwFat9WI/PTL97CQiC3FrmfmtfuGAjAGVUtNIns3EFldWVo5cS9+zR7pI3RaG4QKAVxP3klLqiWKx+O8gPTL/82hpaalERJ8B2BuG4c9Zj7dmN5z9BzMCOMpyv91+AAAAAElFTkSuQmCC) no-repeat;
  background-size: 40rpx 40rpx;
  content: "";
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  top: 21rpx;
  left: 29rpx;
}
.talk .sound.playing:before{
  background: url(data:image/gif;base64,[encoded data, 6108 characters]) no-repeat;
  background-size: 40rpx 40rpx;
}
.talk.talk-right .sound{
  background-image: url(data:image/png;base64,[encoded data, 4144 characters]);
}
.talk.talk-right .sound:before{
  left: auto;
  right: 29rpx;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAABHNCSVQICAgIfAhkiAAAA7lJREFUWIXtmEtoXGUUx3/nTidFopQohUJ0oXbRZjKhUF2IIthaNPMwWklwJpUiiBVKBUV3Il0UxNeiPioFUZDOTDQibSaTKsFSRBFaF9rkTiu0IkJaoWBBHPpI5jsuMknu90XMneQObvJfzf+ce+b78b3vhVWtalX/KVluYa6ceECE1y62r0+dfOjkTJRQQXnLKXp6pOdOEY4COzprl/dHzGSp6R7sHdu4tsOsPQ0kGyGjHjtKKf9EtGizaroHO0zbARbgADwxfBAdkq2mAAcrySTIi054GjF7ImSy1BSgGvMGELNiovuK6bPfLgSQfKXrw/xo98tRAIaeg7lj3T0S05+d4koh42eCsXwl8Q7KS4BR5fFS1i+vBDB0D4qn+5zQtOK9EAwMjiZ2N+AAPBFK+UpiS8sBn/txaxzhSSf8STEz8es83FjP7QrvOc+0oxxpOWDt0tUHgY5gTI2+G/TG1A8Atzil0yqsaC6GAjQi91twyGTpsao/5/sriQ0Cu9w6UfaWUv7XLQcU4R7bm2+Cvk15Cmd1o5woZPyPEBSgf3zrunx5c6olgCh3W95w2kor2xeVeLw1BwcQv37tM8Q7mqskHo0eEDqDRmJ6wcoKPc7zf8/UmD/6Gj33CBAX5ctcOXlf1IDrgqYu+oeTv8NywtnhAf/GvBXZHcjeJGIqs6dSdIBLyd7wlT9tK9YcBjqMmuO7jnVtXOqPowJUywm3Ovnb3AKBTo3JkntkWMArQRNT2eDkL1lO2dz/eaIt4N0pgcKU1HXR1rQsQEWmLF8Xa1ULnHFKbl7Tzrb550W/d/JXPPF6j/RVz0cCKDir1uPeoDWq44tqDK/M/1YOB1JXVb10IT0xEabtkEMsp4JO1bP2PTX1IaBul7AtV0k8C1DMVk8BQ8wefTtL2YkfwrUbdoiNWEMkaHdupCsx54f6frmIUnTrRDk0WO7aDiDe9T3iaV8p7X8VFi404My1Td8Bl63GPbGuWmvgVaDmlMZV5CBAIXX+r0KqerwZuNCAwwPDddAvnPAz+dHkXXPm06z/u2BDAzVk8SUickAA8eR9JxQXjHXlKmQmP0b0YMMaVXLFtP/TSgCbeu3MVxIjKNlgTEWfL6WrC6tUkfxY1yHUu1DMTL69ErimAXPl5CYRM4l9tZpGzMPWi1OEauqoK2UnzqnIm044jnqH/7UgAjV9Fs/UdD8QnFdGPfZGh2SracDhAf+GidWfoLHtCLzeqs8esMzbzFDvud9U2QmMT7Wvb+nHo1Wt6v/WP2pmOXPtCwkQAAAAAElFTkSuQmCC);
}
.talk.talk-right .sound.playing:before{
  background-image: url(data:image/png;base64,[encoded data, 7100 characters]);
}
.talk .talk-text{
  position: relative;
  background-color: #fff;
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  padding: 20rpx 25rpx;
  display: flex;
  max-width: 470rpx;
  box-sizing: border-box;
  overflow: visible;
  min-height: 80rpx;
  margin-left: 10rpx;
  text-align: justify;
}
.talk.talk-right .talk-text{
  background-color: #95EC69;
  margin-right: 10rpx;
  border: 0;
}
.talk .talk-text:after{
  content: "";
  display: block;
  position: absolute;
  left: -10rpx;
  top: 31rpx;
  width: 10rpx;
  height: 17rpx;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAARCAYAAADkIz3lAAACAGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczpleGlmRVg9Imh0dHA6Ly9jaXBhLmpwL2V4aWYvMS4wLyIKICAgIHhtbG5zOmF1eD0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC9hdXgvIgogICB0aWZmOkltYWdlTGVuZ3RoPSI4MCIKICAgdGlmZjpJbWFnZVdpZHRoPSIzNjAiCiAgIGV4aWZFWDpMZW5zTW9kZWw9IiIKICAgYXV4OkxlbnM9IiIvPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PlIPUkoAAAGDaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP5pSlGFQQ0ODhEWDRj9AcmlQyoJqUIOsFn35I/DH4z0lpDVoDQqiln4N9RfUGjQHQVEE0dLSXNRS8jovAyPyXu49n/u95xzOPRes0ayS020DkMsXtXAo4JqLzbsan7DJtNOHP67o6nRkPErd8X6LxbTXXjNXfb9/R8tSUlfA0iQ8qqhaUXhCeGqlqJq8JdyhZOJLwifCHk0KFL4x9USVn01OV/nTZC0aDoK1TdiV/sWJX6xktJywvBx3LltSfuoxX+JI5mcjYrtldaETJkQAF5OMEcTHIH7ZfXgZol9O1Ikf+I6foSCxiuwqZTSWSZOhiEfUkmRPik2JnpSZpWz2/29f9dTwUDW7IwD2R8N47YHGTahsGMbHgWFUDqHhAc7ztfjCPoy8ib5R09x74FyD04ualtiGs3XovFfjWvxbapBlTaXg5RhaY9B+Bc0L1Z793HN0B9FV+apL2NmFXvF3Ln4BftRn8WL5+esAAAAJcEhZcwAACxMAAAsTAQCanBgAAAEVSURBVCiRjdExSgNBGMXx/9ssYlQUkUUTIQvBNjCb3k4iFt7EWrD3AlZ2Fh4gFvECdpGZEVLkADlBIE0gSzI2CRp3jb76x7zHN/CPeO8vo00ghCDn3F0Ioaff0GAw2J3NZs+SrlqtVrUUWmubkl6BU2PMfqVSoVDtnOtI+gBOVgj4giEEWWtvgS6AMeZwhQC02pPn+RNwDhwYY3a+I4DYe3+W5/kLsACOsizbiqLiMWLgEWgC1Xa7Lan8ENFkMrkGPMB8Pi9Fa/He3zvnFuPxOJRlrcdaeyGpV6/Xt2u12tpDhUH9fv84juP3JEnSRqOxecbyj7uj0ShMp9Ni9c9Ya28kPaRpGm2ES5xJevvLATAcDvc+AZnQeujfOTcEAAAAAElFTkSuQmCC);
  background-size: 10rpx 17rpx;
}
.talk.talk-right .talk-text:after{
  left: auto;
  right: -10rpx;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAARCAYAAADkIz3lAAACAGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczpleGlmRVg9Imh0dHA6Ly9jaXBhLmpwL2V4aWYvMS4wLyIKICAgIHhtbG5zOmF1eD0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC9hdXgvIgogICB0aWZmOkltYWdlTGVuZ3RoPSI4MCIKICAgdGlmZjpJbWFnZVdpZHRoPSIzNjAiCiAgIGV4aWZFWDpMZW5zTW9kZWw9IiIKICAgYXV4OkxlbnM9IiIvPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PlIPUkoAAAGDaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP5pSlGFQQ0ODhEWDRj9AcmlQyoJqUIOsFn35I/DH4z0lpDVoDQqiln4N9RfUGjQHQVEE0dLSXNRS8jovAyPyXu49n/u95xzOPRes0ayS020DkMsXtXAo4JqLzbsan7DJtNOHP67o6nRkPErd8X6LxbTXXjNXfb9/R8tSUlfA0iQ8qqhaUXhCeGqlqJq8JdyhZOJLwifCHk0KFL4x9USVn01OV/nTZC0aDoK1TdiV/sWJX6xktJywvBx3LltSfuoxX+JI5mcjYrtldaETJkQAF5OMEcTHIH7ZfXgZol9O1Ikf+I6foSCxiuwqZTSWSZOhiEfUkmRPik2JnpSZpWz2/29f9dTwUDW7IwD2R8N47YHGTahsGMbHgWFUDqHhAc7ztfjCPoy8ib5R09x74FyD04ualtiGs3XovFfjWvxbapBlTaXg5RhaY9B+Bc0L1Z793HN0B9FV+apL2NmFXvF3Ln4BftRn8WL5+esAAAAJcEhZcwAACxMAAAsTAQCanBgAAAD6SURBVCiRjY8xSgNBFEDfXxMwxlQGt8wZREQPINpYeYrdSQrvoIVoI4SdbTyDjZ1YWnqAFCLaiIYJYooNuEnGQleG7K7rawbmv3mfIRqqVf6Bh2df4mGwUS1Ca+7JfWSCXpX4c0o/MurKWqRIlMiEduHuOZ2l20f+5VtR0aVTX6o/aRPuVokAyxZuIhOc/LXaxSLcrYwne2VFV91MWo3rWvmcT7EMEDzmEpYVE4ERyCCZNne66/qhqPgB1EAuVFufi2Ah/+t3AEQOu219lkl8v/xlDLzKjAPl68fFNVlxAtwm0+aW8uOclBVTgeNwLT51V+Xoj4L90qHDFyZYTyDDm8hQAAAAAElFTkSuQmCC);
}

.talk .talk-img{
  margin-left: 10rpx;
  display: flex;
  align-items: flex-end;
}
.talk .talk-img image{
  max-width: 280rpx;
  border-radius: 10rpx;
  display: block;
}
.talk.talk-right .talk-img{
  margin: 0 10rpx 0 0;
}
.talk .talk-img .icon-download{
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAABHNCSVQICAgIfAhkiAAAA/pJREFUaIHtm89LJEcUxz9d82PdZGI8eE0OA/FgbjKQf2CWDQqLMLBgnGvUSw4ecs3JHMw9BITgIQgSwoLkFmdBcjIQJZAfCAbJJJCgSDBgVmfa7sqhu9ye3mmnf9U6becDBcJUdb+v71VXvdfVBnopAsJthq8BSF+z3XalyyBjcJfIFD0t7vUljmjVUiMtwQK4hyNSB1dAB8f7iUgq2OC5UB3R4kV5veP+HYu4RhpAGSgluEZcJGACXWIIj2NsAbgfc2yaSOCSiHO8EPEmZWCE2xcLjg3qmWFFGRSWEZwQHkZMHG8PJIxgAyeEo0bDy8YCLhgwr8OIeCVkv9tG4Nhp3tRpkJAR9K2tOlC7usAH2U2Cy27LGkpT3weZCBhUJJtiFWUCnBkk+B7DsfTExcCZji/Q77+gdlBZRzmsJ7T9HlZbxrtCGV+k+gVnPZT9vOBA75Ij0LQELS8vj87Pz/98U59arfaGjnvjTE8TN7X0CtTm3VKpZACv67h2CFQKewG9IZ2F3VRcrrUpwS8jgb9NrjMrr+C7Tu4EF6C3hHrXEYBQKVVeKCgP5wUjL+GsEHkTbOQtpPPp4VxRxClrJvby2tram0G/jY6OvpZkPMDCwsLvcezyIYs4aVNiT09MTExXKpVP4o6fmpr6KeAn+/z8/MNqtfr50dFR0reHtqr9pFLSabVaj8fGxj5L63qAeXZ29n69Xn+S1vUECV49+qnX618eHx/P4eaeCbk4OTl5nKJYAJmqYICZmZlv2u32I+CfBJf5u91uz0xPTz9Nyy4XKYjw5i0sjUbju8PDw4dSyr8iWyTlnwcHB+82Go3v07YLsJTgVL0MMDc398v+/v5DKeVR2DFSyl/39vYeNJvNg7TtwdFoqaezllMzi4uLv+3s7NRt2/5xUF/btn9otVoPlpaW/tBhC65Gb2qopfi+vb39rFKpfDU5OfmOEKLvWmtZ1rebm5uNlZWVMx02uHQBWwm26VO0Tovd3d1Op9N5UqvV3hZCvOX9zTTNr1dXV99bX19/puPeLup4RI/A+2gu9VSrVbGxsfFpqVSaB+h2u180m80PUthQDOIKd6n0ChbAq5pvzPj4OFtbWx9LKa3Z2dmPTk9Pdd8S4F/cQrw/hIf5HEdces5/+PfQiQ59DSESR9M1fsHq0NddwcTnwH5ZUqwTbkOIxNHSQ1CJVpL94vwlfQ6jBglWHbMqukPA1LypCG/x/OxTljDxPai8DKp0XKIhm9KIxYAjiGG8d0U2XqfahCg8hA1Xk+EOb5OQVZYoAlQKWWB4vK2WnsA56yeqxyyc0BmGEFcZUKSN0v+fAMQYn4uPPPzk5jOefuTiQ60g4nyKZ6Fxs/MfrWMc0Q8z+jYAAAAASUVORK5CYII=) no-repeat;
  background-size: 60rpx 60rpx;
  width: 60rpx;
  height: 60rpx;
  flex-shrink: 0;
  margin: 0 25rpx;
}

.tapfigure-cont{
  position: fixed;
  left: 50%;
  bottom: 47rpx;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 26rpx;
}
.tapfigure{
  background: url(data:image/png;base64,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) no-repeat;
  background-size: 50rpx 82rpx;
  width: 50rpx;
  height: 82rpx;
  margin-bottom: 11rpx;
  animation: fadeAnimate 1s infinite;
}
.talk-cont{
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0; 
}
</style>
