126 lines
3.3 KiB
Vue
126 lines
3.3 KiB
Vue
|
<template>
|
||
|
|
<div class="chatcontentIn">
|
||
|
|
<div v-for="(chatContent,index) in chatContentList" :key="index" class="chatContentInClass">
|
||
|
|
<div :class="chatContent.self?'rightUser':'leftUser'">
|
||
|
|
<div class="userHeader">
|
||
|
|
<div v-if="chatContent.group" class="userName">{{ chatContent.memberName }}</div>
|
||
|
|
<div :class="chatContent.self?'userChatTime textRight':'userChatTime'">{{ formatTime(chatContent.chatTime) }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="userBubble">
|
||
|
|
<div class="userMessage">
|
||
|
|
<div class="messageText">{{ chatContent.message }}</div>
|
||
|
|
<audio :src="baseUrl+chatContent.src" style="display:none" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props:{
|
||
|
|
currentCoversition:{
|
||
|
|
type:Object,
|
||
|
|
required:true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
chatContentList:[],
|
||
|
|
baseUrl:''
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch:{
|
||
|
|
'$store.state.socket.simulationText':function (val, old) { // 仿真聊天
|
||
|
|
if (this.currentCoversition.id == val.conversationId) {
|
||
|
|
this.chatContentList.push(this.$store.state.socket.simulationText);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
console.log('VUE_VOICE_API' + process.env.VUE_VOICE_API);
|
||
|
|
this.baseUrl = process.env.VUE_VOICE_API;
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
formatTime(time) {
|
||
|
|
return /\d{2}:\d{2}:\d{2}/.exec(time)[0] || time;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.chatcontentIn{
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
display: inline-block;
|
||
|
|
overflow: auto;
|
||
|
|
padding-bottom: 20px;
|
||
|
|
}
|
||
|
|
.leftUser{
|
||
|
|
float: left;
|
||
|
|
margin-left: 10px;
|
||
|
|
margin-top: 10px;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.rightUser{
|
||
|
|
float: right;
|
||
|
|
margin-right: 10px;
|
||
|
|
margin-top: 10px;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.userHeader{margin-bottom: 2px;}
|
||
|
|
.userName{}
|
||
|
|
.userChatTime{font-size: 12px;}
|
||
|
|
.userBubble{
|
||
|
|
max-width: 300px;
|
||
|
|
font-size: 12px;
|
||
|
|
padding: 10px;
|
||
|
|
background: #ccc;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
.textRight{text-align: right;}
|
||
|
|
.userMessage{}
|
||
|
|
.messageText{}
|
||
|
|
.chatContentInClass{
|
||
|
|
display: inline-block;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
|
||
|
|
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
|
||
|
|
.chatcontentIn::-webkit-scrollbar {
|
||
|
|
width: 6px;
|
||
|
|
height: 6px;
|
||
|
|
// height: 110px;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
}
|
||
|
|
/*定义滚动条轨道 内阴影+圆角*/
|
||
|
|
.chatcontentIn::-webkit-scrollbar-track {
|
||
|
|
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||
|
|
border-radius: 10px;
|
||
|
|
background-color: #FFFFFF;;
|
||
|
|
}
|
||
|
|
/*定义滑块 内阴影+圆角*/
|
||
|
|
.chatcontentIn::-webkit-scrollbar-thumb {
|
||
|
|
border-radius: 10px;
|
||
|
|
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||
|
|
background-color: #cacaca;
|
||
|
|
}
|
||
|
|
/*滑块效果*/
|
||
|
|
.chatcontentIn::-webkit-scrollbar-thumb:hover {
|
||
|
|
border-radius: 5px;
|
||
|
|
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||
|
|
background: rgba(0,0,0,0.4);
|
||
|
|
}
|
||
|
|
/*IE滚动条颜色*/
|
||
|
|
html {
|
||
|
|
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
|
||
|
|
scrollbar-highlight-color:#000;
|
||
|
|
scrollbar-3dlight-color:#000;
|
||
|
|
scrollbar-darkshadow-color:#000;
|
||
|
|
scrollbar-Shadow-color:#adadad;/*滑块边色*/
|
||
|
|
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
|
||
|
|
scrollbar-track-color:#eeeeee;/*背景颜色*/
|
||
|
|
}
|
||
|
|
</style>
|