|
|
|
@@ -0,0 +1,545 @@ |
|
|
|
<template> |
|
|
|
<view class="box"> |
|
|
|
<view class="headbox"> |
|
|
|
<view class="tit-tiem">2021-12-18 18:00:00</view> |
|
|
|
<view class="call_record_time_one">接待时长 00:10:20 |
|
|
|
<view class="audoioyouxiao" > |
|
|
|
无效接待 |
|
|
|
</view> |
|
|
|
<!-- <view class="file-change"> |
|
|
|
<view class="file-item" |
|
|
|
:class="csdFileindex == index ? 'fileactive' : ''" v-for="(item,index) in luyinList" |
|
|
|
:key="index">录音文件{{index+1}}</view> |
|
|
|
</view> --> |
|
|
|
<view class="diangweitupian"> |
|
|
|
<image v-if="essenceis==1" style="width: 100%;height: 100%;" src="../../static/images/pike.png" mode=""></image> |
|
|
|
<image v-if="essenceis==0" style="width: 100%;height: 100%;" src="../../static/images/nopike.png" mode=""></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<scroll-view scroll-y="true" :scroll-into-view="scrollId" :scroll-top="scrollTop" |
|
|
|
class="zhuti text scroll-Y"> |
|
|
|
<!-- 聊天记录--> |
|
|
|
<view class="dialog-block" v-for="(dialog,i) in dialogList" :key="i"> |
|
|
|
<view class="text" :id="'dialog'+csdFileindex+'text'+item.bg" |
|
|
|
:class="{active: item.bg < playNow && item.ed > playNow && i==0}" |
|
|
|
v-for="(item,index) in dialog.message" :key="index" :data-speaker="item.speaker"> |
|
|
|
<view class="avatar"> |
|
|
|
<text v-if="item.speaker == 1" style="color: #60CBEC;">A</text> |
|
|
|
<text v-if="item.speaker == 2" style="color: #EC8B47;">B</text> |
|
|
|
<text v-if="item.speaker == 3" style="color: #4F861E;">C</text> |
|
|
|
<text v-if="item.speaker == 4" style="color: #9F61C8;">D</text> |
|
|
|
<text v-if="item.speaker == 5" style="color: #4980C8;">E</text> |
|
|
|
<text v-if="item.speaker == 6" style="color: #60CBEC;">F</text> |
|
|
|
<text v-if="item.speaker == 7" style="color: #EC8B47;">G</text> |
|
|
|
<text v-if="item.speaker == 8" style="color: #4F861E;">H</text> |
|
|
|
<text v-if="item.speaker == 9" style="color: #9F61C8;">I</text> |
|
|
|
</view> |
|
|
|
<view class="content"> |
|
|
|
<view @longpress="changanxiaoguo(item,index,i)" v-html="item.onebest"></view> |
|
|
|
<!-- <view class="tankuangcss" v-if="item.isshow"> |
|
|
|
<view @click="clickcopy()" |
|
|
|
style="width: 60rpx;font-size: 24rpx;text-align: center;margin-left: 24rpx;">复制 |
|
|
|
</view> |
|
|
|
<view @click="Oftenthewrongword()" |
|
|
|
style="width: 80rpx;font-size: 24rpx;text-align: center;margin-left: 22rpx;">常错词 |
|
|
|
</view> |
|
|
|
<view v-if="jiaoseshow" @click="Addtheessence()" |
|
|
|
style="width: 80rpx;font-size: 24rpx;text-align: center;margin-left: 22rpx;">加精华 |
|
|
|
</view> |
|
|
|
<view @click="clickbofang(dialog.backindex,item)" |
|
|
|
style="width: 80rpx;font-size: 24rpx;text-align: center;margin-left: 14rpx;">播放 |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</scroll-view> |
|
|
|
<view class="bottombox"> |
|
|
|
<!-- 播放块 --> |
|
|
|
<view class="audio"> |
|
|
|
<view class="audio-wrapper"> |
|
|
|
<view class="audio-number">{{format(current)}}</view> |
|
|
|
<slider class="audio-slider" @changing="[status.seeking = true,current=$event.detail.value]" @change="seek($event.detail.value)" |
|
|
|
activeColor="#E0E0E0" step="1" block-size="16" :value="current" :max="duration"></slider> |
|
|
|
<view class="audio-number">{{format(duration)}}</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="audio-control-wrapper" > |
|
|
|
<view class="audio-control" style="border: none;"> |
|
|
|
{{csdFileindex+1}}/{{luyinList.length}} |
|
|
|
</view> |
|
|
|
<view class="audio-control audio-control-prev" > |
|
|
|
<u-icon name="skip-back-left" color="#333" size="48"></u-icon> |
|
|
|
</view> |
|
|
|
<view class="audio-control audio-control-switch" @click="!status.playing?play():pausePlay()"> |
|
|
|
<image v-if="status.playing && status.waiting" style="width: 30rpx;height: 30rpx;" src="../../static/images/jiazaizhong.gif" mode=""></image> |
|
|
|
<u-icon v-else-if="status.playing==false" name="play-circle" color="#333" size="72"></u-icon> |
|
|
|
<u-icon v-else name="pause-circle" color="#333" size="72"></u-icon> |
|
|
|
|
|
|
|
</view> |
|
|
|
<view class="audio-control audio-control-next"> |
|
|
|
<u-icon name="skip-forward-right" color="#333" size="48"></u-icon> |
|
|
|
</view> |
|
|
|
<view class="audio-control" style="border: none;"> |
|
|
|
<u-icon name="list-dot" color="#333" size="52"></u-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
var util = require("../../utils/util.js"); |
|
|
|
var config = require("../../config"); |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
Aimg: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAACqVBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9/f3////9/f39/f3////////9/f3////////////9/f3////9/f39/f3////9/f3////////9/f3////9/f3////////////////9/f39/f3////////9/f39/f3////9/f39/f3////////9/f39/f3////////9/f39/f39/f3////////////////+/v7+/v7////+/v7////+/v7////+/v7+/v7////////+/v7+/v7////+/v7////+/v7////////////////////////////+/v7////+/v7////+/v7+/v7////////////+/v7////+/v7////+/v7+/v7////////+/v7////+/v7////////+/v7////////+/v7////+/v7+/v7+/v7////////+/v7+/v7////+/v7+/v7////+/v7////+/v7////+/v7////+/v7+/v7////+/v7+/v7////+/v7////+/v7////+/v7+/v7////+/v5jdC9iAAAA4nRSTlMAAQIDBAUGBwgLDA0ODxARExQVFhgbHB4fICEiIyQmJygpKy4wMTIzNDY3ODk6Oz0+P0BBQkRGR0lKTE5PUFFTVFVXWFlcXV9gYWJjZWZnaGlqa2xtbm9wcXJzdHV2d3h6e319foGBgoODh4mKiouMjI2QkZKSk5OUlpeYmZmam5ycnZ+foKGio6SmqKmpq6yur7CwsbGytba5uru8wMDBwcLCw8XGx8jJysrLzM7P0dLT1dXW1tfY2drc3N7f4OHh5Obm5+jp6uvs7vDx8vLz8/T09fX29/f4+fn6+vz8/f7+RVDt+wAAA55JREFUGBntwf9/1HMAB/DX7XYbuXWV1cyMoixfugrRGNXytW33pbVdJ83XkiMLSb4LJd/zZUi0SKT5FmGS77HUVaixnHP2+kt8vt3Zbp/3+7P3XR5+8XziP1E4uiYcrh1bjMNi6NzXumnoeX3eSOSrpHUv+zi0ogJ5qd3JLN1XuJGzwqW0sW4oclT0Im19XIqcuNdQ4D0vcnEDhdYgB2f+SbFZUHbEdkrsLYeqFko9CEVH7qJUohxqLqODO6BmLR18XwAVRQfpZDxUnExHjVBRR0eroGIZHX0AFe10tA8qdtNZIRR00VEPVLxLRzuh4jk62gIVy+joSaiI0tECqPDT0blQ4f6RDpI+KHmYDjZBzWQ6aIaibZSK+6BoOqViUOXqoER8BJSdlqJYFDm4h0LveJAD7+cUiFciJ1U/01aiGjk65zfaSF6EnE3azQEO1iAPFZuZZes45MUT3cM+emLFyNfwK3fQ8k1sFA6L0cElTzx9d1OVC/8bNG/gzY+GQaKk461gCQZr8iMHSNZD4nySv6wYj0EYFv2UhqcgcTsN70ePhtzER3+lJe6BxXP9jTctvrl1yS1jkLaNlkTbBR6IlF3dyT78sHh+oqkSlrJe/uOH1jGw4apem2I/1yLtGRo6kRZiP73t57mQxb+Z2dqRdikNtyLtBWb78Cz05bomyQH+KIGljIYaWNxxDtC72ouMgsdpZzosHhqqYDmFdraOQNpttHUfLKU0TITlKtra6IZpCu3tgMVPQx0sG2ivDqaVFDgOppk0LIbJm6C9DTB1UCAMU4SGZ2GqocAumL6jQBtMMRq2wLScAik3dMV/UWB/EQwrafgSpk6KlEJ3LIXOgGE9DQdgqKDQSdBNoNAiGL6i6SjowhSaAt1UCm2CzpOk6QTonqfQJdBdSKGkD5pKWqZCU7iHQtdB10KxWmjOpqUJmtMp9gB091LsIWiCtCyFZiHFXoZuHcW+hiZGy0vQvE2xT6DbTolKAI/R8hmA4SmKdUG3jxIhAG/QkigAZlAi6QJQTJk2AF1MGwXcRRkfgJGU2V8EHzP8wBeUqQQwllKTcCozpuFESk0AMJNSC3AxM8KYT6lpAFootRGLmLEQ6ynVCCBAqcSQ1cy4f8ghSs0HcMzvlKp+lRmvVFMqNQ6aaIoyd3Yy49vllOmuh+H4WZFIpFnTpJmjadTM1oQ1oVAgFNQENA0N9f01BIKh8OzGOU3NkbmXzwuV41/wNztgHKhu7WKTAAAAAElFTkSuQmCC", |
|
|
|
luyinList:[],//文件列表 |
|
|
|
essenceis:0,//是否加精 |
|
|
|
csdFileindex:0,//下标位置 |
|
|
|
audio: null, |
|
|
|
scrollTop: 0, |
|
|
|
scrollId:"dialog", |
|
|
|
current: 0, //当前进度(s) |
|
|
|
duration: 0, //总时长(s) |
|
|
|
startTime:0,//播放起点 |
|
|
|
playNow: 0, |
|
|
|
/**逻辑状态**/ |
|
|
|
status:{ |
|
|
|
playing:false,//只有点击控制面板和播放结束可修改此状态 |
|
|
|
seeking: false, //是否处于拖动状态 |
|
|
|
waiting: false, //等待加载数据 |
|
|
|
}, |
|
|
|
customerId:"",//客户id |
|
|
|
buildingID:'',//楼盘id |
|
|
|
debug:true, |
|
|
|
dialogList:[],//转写内容区域 |
|
|
|
}; |
|
|
|
}, |
|
|
|
onLoad: function(options) { |
|
|
|
console.log(options) |
|
|
|
this.essenceis = options.status; |
|
|
|
this.customerId = options.customerId; |
|
|
|
this.buildingID = uni.getStorageSync('buildingID').id; |
|
|
|
this.getlist() |
|
|
|
}, |
|
|
|
created() { |
|
|
|
|
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
this.audio.destroy() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
getlist(){ |
|
|
|
const parames = { |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 100, |
|
|
|
query: { |
|
|
|
customerId: this.customerId |
|
|
|
} |
|
|
|
} |
|
|
|
this.$u.post("/corpus/findByPage", parames).then(res => { |
|
|
|
if (res && res.length) { |
|
|
|
let alltime = 1; |
|
|
|
res.forEach(item => { |
|
|
|
alltime += item.recordDuration |
|
|
|
}) |
|
|
|
this.alltimeStr = this.getTime(alltime) |
|
|
|
this.luyinList = res; |
|
|
|
this.getCorpusAnalysis() |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 获取转义后的对话结果 |
|
|
|
getCorpusAnalysis(info) { |
|
|
|
this.dialogList = []; |
|
|
|
uni.request({ |
|
|
|
url: config.service.getCorpusAnalysis + '?corpusId=' + this.luyinList[this.csdFileindex].id+"&customerId="+this.customerId, //仅为示例，并非真实接口地址。 |
|
|
|
method: "GET", |
|
|
|
header: { |
|
|
|
'content-type': 'application/json', |
|
|
|
'Access-Token': uni.getStorageSync('weapp_session_login_data').token |
|
|
|
}, |
|
|
|
success: (data) => { |
|
|
|
if (data.data.code == 10000) { |
|
|
|
if (data.data.data.audioContent.length != 0) { |
|
|
|
const jsonInfo = JSON.parse(data.data.data.audioContent); |
|
|
|
this.dialogList.push({ |
|
|
|
message: jsonInfo, |
|
|
|
backindex:this.csdFileindex |
|
|
|
}); |
|
|
|
this.init(); |
|
|
|
} |
|
|
|
|
|
|
|
} else { |
|
|
|
uni.hideLoading(); |
|
|
|
uni.showModal({ |
|
|
|
title: '提示', |
|
|
|
content: '请求数据失败，请重新尝试', |
|
|
|
showCancel: false |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
getTime(time) { |
|
|
|
return util.formatSecond(time) |
|
|
|
}, |
|
|
|
init(){ |
|
|
|
if(this.audio){ |
|
|
|
this.audio.destroy(); |
|
|
|
} |
|
|
|
this.resetStatus(); |
|
|
|
this.audio = uni.createInnerAudioContext(); |
|
|
|
this.audio.obeyMuteSwitch = false; |
|
|
|
this.audio.startTime=this.startTime; |
|
|
|
this.audio.autoplay=false; |
|
|
|
this.duration=0; |
|
|
|
// this.mappedFields(); |
|
|
|
this.audio.src=this.luyinList[this.csdFileindex].recordPath; |
|
|
|
if(this.autoplay){ |
|
|
|
this.status.playing=true; |
|
|
|
} |
|
|
|
//音频进度更新事件 |
|
|
|
this.audio.onTimeUpdate(() => { |
|
|
|
if (!this.duration) { |
|
|
|
this.duration = this.audio.duration |
|
|
|
} |
|
|
|
if (!this.status.seeking) { |
|
|
|
this.current = this.audio.currentTime |
|
|
|
} |
|
|
|
this.playNow = parseInt(this.current * 1000) |
|
|
|
if (this.dialogList.length == 0) { |
|
|
|
return |
|
|
|
} else { |
|
|
|
const message = this.dialogList[0].message; |
|
|
|
for (let i = 0; i < message.length; i++) { |
|
|
|
if (Number(message[i].bg) < this.playNow && Number(message[i].ed) > this.playNow) { |
|
|
|
this.scrollId = "dialog" + this.csdFileindex + "text" + message[i].bg; |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
this.$forceUpdate() |
|
|
|
}) |
|
|
|
//音频播放事件 |
|
|
|
this.audio.onPlay(() => { |
|
|
|
this.debug && console.log('开始播放,当前播放器状态='+this.audio.paused); |
|
|
|
this.status.waiting = false; |
|
|
|
if(this.status.seeking && this.status.afterseek){ |
|
|
|
this.status.afterseek=false; |
|
|
|
this.seek(this.current); |
|
|
|
}else{ |
|
|
|
this.status.seeking=false; |
|
|
|
this.status.afterseek=false; |
|
|
|
} |
|
|
|
}) |
|
|
|
//音频暂停事件 |
|
|
|
this.audio.onPause(() => { |
|
|
|
this.debug && console.log('暂停播放,当前播放器状态='+this.audio.paused); |
|
|
|
this.status.waiting = false; |
|
|
|
if(this.status.seeking && this.status.afterseek){ |
|
|
|
this.status.afterseek=false; |
|
|
|
this.seek(this.current); |
|
|
|
}else{ |
|
|
|
this.status.seeking=false; |
|
|
|
this.status.afterseek=false; |
|
|
|
} |
|
|
|
}) |
|
|
|
this.audio.onStop(() => { |
|
|
|
this.debug && console.log('停止播放,当前播放器状态='+this.audio.paused); |
|
|
|
}) |
|
|
|
//音频等待 |
|
|
|
this.audio.onWaiting(() => { |
|
|
|
this.debug && console.log('等待音频数据,当前播放器状态='+this.audio.paused) |
|
|
|
this.status.waiting = true; |
|
|
|
if(!this.audio.paused){ |
|
|
|
this.audio.pause() |
|
|
|
} |
|
|
|
}) |
|
|
|
this.audio.onCanplay(() => { |
|
|
|
this.debug && console.log('数据准备就绪,当前播放器状态='+this.audio.paused) |
|
|
|
this.status.waiting = false; |
|
|
|
if (this.status.playing && !this.status.seeking && !this.status.afterseek) { |
|
|
|
this.play() |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
//音频完成更改进度事件 |
|
|
|
this.audio.onSeeked(() => { |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
//音频结束事件 |
|
|
|
this.audio.onEnded(() => { |
|
|
|
this.debug && console.log('播放结束,当前播放器状态='+this.audio.paused) |
|
|
|
}) |
|
|
|
|
|
|
|
this.audio.onError((err) => { |
|
|
|
this.debug && console.log('播放出错,当前播放器状态='+this.audio.paused) |
|
|
|
this.debug && console.error(err) |
|
|
|
}) |
|
|
|
}, |
|
|
|
seek(value){ |
|
|
|
if(value<=0){ |
|
|
|
value=0 |
|
|
|
} |
|
|
|
if(value>=this.duration){ |
|
|
|
value=this.duration; |
|
|
|
} |
|
|
|
this.debug && console.log('调用Seek，当前audio状态='+this.audio.paused+',value='+value); |
|
|
|
this.status.afterseek=true; |
|
|
|
this.status.seeking = true; |
|
|
|
this.status.playing=true; |
|
|
|
this.current = value; |
|
|
|
if(!this.audio.paused){//暂停事件里调用this.audio.seek |
|
|
|
this.audio.pause() |
|
|
|
}else{//已经是停止状态 必须先播放后再调用this.seek |
|
|
|
this.status.afterseek=true; |
|
|
|
if(!this.status.waiting){ |
|
|
|
this.play(); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
//点击播放按钮 |
|
|
|
play() { |
|
|
|
this.debug && console.log('调用播放，当前audio状态='+this.audio.paused); |
|
|
|
this.status.playing=true; |
|
|
|
if(this.audio.paused){ |
|
|
|
this.audio.play(); |
|
|
|
} |
|
|
|
}, |
|
|
|
pausePlay(){ |
|
|
|
this.debug && console.log('调用暂停，当前audio状态='+this.audio.paused); |
|
|
|
this.status.playing=false; |
|
|
|
if(!this.audio.paused){ |
|
|
|
this.audio.pause(); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 重置状态 |
|
|
|
resetStatus(){ |
|
|
|
this.status.playing = false; |
|
|
|
this.status.seeking=false; |
|
|
|
this.status.waiting = false; |
|
|
|
this.current = 0; |
|
|
|
}, |
|
|
|
//格式化时长 |
|
|
|
format(num) { |
|
|
|
return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 - |
|
|
|
String(Math.floor(num % 60)).length) + Math.floor(num % 60) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.box{ |
|
|
|
width: 100%; |
|
|
|
height: 100vh; |
|
|
|
display:flex; |
|
|
|
flex-direction:column; |
|
|
|
} |
|
|
|
.headbox{ |
|
|
|
width: 100%; |
|
|
|
min-height: 120rpx; |
|
|
|
border-bottom: 1px solid #E0E0E0; |
|
|
|
.tit-tiem{ |
|
|
|
font-size: 30rpx; |
|
|
|
color: #303030; |
|
|
|
padding-left: 30rpx; |
|
|
|
padding-right: 30rpx; |
|
|
|
} |
|
|
|
.call_record_time_one { |
|
|
|
padding-left: 30rpx; |
|
|
|
padding-right: 30rpx; |
|
|
|
height: 48rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: 500; |
|
|
|
color: #70798d; |
|
|
|
line-height: 48rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
position: relative; |
|
|
|
margin-top: 10rpx; |
|
|
|
.audoioyouxiao{ |
|
|
|
height: 46rpx; |
|
|
|
position: absolute; |
|
|
|
top: 0rpx; |
|
|
|
right: 120rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.diangweitupian { |
|
|
|
width: 46rpx; |
|
|
|
height: 46rpx; |
|
|
|
position: absolute; |
|
|
|
top: 0rpx; |
|
|
|
right: 30rpx; |
|
|
|
} |
|
|
|
.file-change { |
|
|
|
position: absolute; |
|
|
|
top: 50rpx; |
|
|
|
right: 0rpx; |
|
|
|
width: 184rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
border-radius: 4rpx; |
|
|
|
z-index: 99; |
|
|
|
height: auto; |
|
|
|
max-height: 600rpx; |
|
|
|
overflow: auto; |
|
|
|
} |
|
|
|
.file-item { |
|
|
|
width: 184rpx; |
|
|
|
height: 60rpx; |
|
|
|
line-height: 60rpx; |
|
|
|
text-align: center; |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: 400; |
|
|
|
color: #333333; |
|
|
|
border-bottom: 1rpx solid #E2E2E2; |
|
|
|
} |
|
|
|
.file-item:last-child { |
|
|
|
border: 0 |
|
|
|
} |
|
|
|
.fileactive { |
|
|
|
color: #008EF2 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.zhuti{ |
|
|
|
flex:1; |
|
|
|
overflow:auto; |
|
|
|
} |
|
|
|
.bottombox{ |
|
|
|
width: 100%; |
|
|
|
height: 170rpx; |
|
|
|
border-top: 1px solid #E0E0E0; |
|
|
|
} |
|
|
|
.audio { |
|
|
|
width: 100%; |
|
|
|
padding: 10rpx 0; |
|
|
|
background: #fff; |
|
|
|
.audio-wrapper { |
|
|
|
margin-top: 10rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-top: 16rpx; |
|
|
|
color: #70798D; |
|
|
|
} |
|
|
|
.audio-number { |
|
|
|
width: 120upx; |
|
|
|
font-size: 24upx; |
|
|
|
line-height: 1; |
|
|
|
color: #333; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
.audio-slider { |
|
|
|
flex: 1; |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.audio-control-wrapper { |
|
|
|
margin-top: 20upx; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
.audio-control { |
|
|
|
line-height: 1; |
|
|
|
} |
|
|
|
.audio-control-switch { |
|
|
|
margin: 0 60rpx; |
|
|
|
} |
|
|
|
.audio-control-prev{ |
|
|
|
margin: 0 50rpx; |
|
|
|
} |
|
|
|
.audio-control-next{ |
|
|
|
margin: 0 50rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.scroll-Y { |
|
|
|
font-size: 36upx; |
|
|
|
color: #999999; |
|
|
|
background: #FFFFFF; |
|
|
|
margin-top: 30upx; |
|
|
|
flex: 1; |
|
|
|
overflow-y: scroll; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.scroll-Y .text { |
|
|
|
margin: 50upx 30upx; |
|
|
|
line-height: 80upx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.scroll-Y .text[data-speaker="2"], |
|
|
|
.scroll-Y .text[data-speaker="4"], |
|
|
|
.scroll-Y .text[data-speaker="6"] { |
|
|
|
flex-direction: row-reverse; |
|
|
|
text-align: right; |
|
|
|
.content { |
|
|
|
margin-left: 0; |
|
|
|
margin-right: 30upx; |
|
|
|
background: #F6F6F6; |
|
|
|
color: #999999; |
|
|
|
} |
|
|
|
} |
|
|
|
.scroll-Y .text .avatar { |
|
|
|
width: 64upx; |
|
|
|
height: 64upx; |
|
|
|
line-height: 64upx; |
|
|
|
text-align: center; |
|
|
|
font-size: 36rpx; |
|
|
|
border-radius: 50%; |
|
|
|
background: #F2F2F2; |
|
|
|
color: #008EF2; |
|
|
|
image { |
|
|
|
width: 40upx; |
|
|
|
} |
|
|
|
} |
|
|
|
.scroll-Y .text .content { |
|
|
|
margin-left: 30upx; |
|
|
|
line-height: 60rpx; |
|
|
|
text-align: left; |
|
|
|
padding: 0 5px; |
|
|
|
background: #2BC805; |
|
|
|
border-radius: 8upx; |
|
|
|
max-width: 442rpx; |
|
|
|
color: #FFFFFF; |
|
|
|
position: relative; |
|
|
|
.tankuangcss { |
|
|
|
position: absolute; |
|
|
|
top: -140rpx; |
|
|
|
left: -120rpx; |
|
|
|
width: 308rpx; |
|
|
|
height: 130rpx; |
|
|
|
background-color: #333333; |
|
|
|
font-size: 24rpx; |
|
|
|
color: #FFFFFF; |
|
|
|
padding-top: 4rpx; |
|
|
|
padding-bottom: 4rpx; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
border-radius: 15rpx; |
|
|
|
z-index: 1000; |
|
|
|
} |
|
|
|
} |
|
|
|
.scroll-Y .text.active .content { |
|
|
|
color: #38FFF1; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.scroll-Y .text.active[data-speaker="2"] .content, |
|
|
|
.scroll-Y .text.active[data-speaker="4"] .content, |
|
|
|
.scroll-Y .text.active[data-speaker="6"] .content { |
|
|
|
color: #FF7538; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
