2020-07-21 15:15:28 +08:00
|
|
|
<template>
|
|
|
|
|
<div class="chatBox" :style="{'bottom':bottom+'px'}">
|
|
|
|
|
<div v-show="!minimize" class="chat-box">
|
|
|
|
|
<div class="chat-box-main">
|
|
|
|
|
<div class="chat-window">
|
|
|
|
|
<div class="chat-box-header">
|
|
|
|
|
<div class="chat-box-header-title">
|
|
|
|
|
<el-input v-if="isShow" v-model="queryMember" size="small" placeholder="请输入搜索人员">
|
|
|
|
|
<el-button slot="append" icon="el-icon-search" />
|
|
|
|
|
</el-input>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="minimality" @click="handleMinimality('min')">
|
|
|
|
|
<i class="el-icon-remove" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chat-setting" @click="handleSetting()">
|
|
|
|
|
<i class="el-icon-s-tools" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="isShow" class="chat-box-content">
|
|
|
|
|
<el-tree
|
|
|
|
|
ref="tree"
|
|
|
|
|
:data="treeData"
|
|
|
|
|
:props="defaultProps"
|
|
|
|
|
node-key="id"
|
|
|
|
|
default-expand-all
|
|
|
|
|
:filter-node-method="filterNode"
|
|
|
|
|
show-checkbox
|
|
|
|
|
style="margin: 10px;overflow-y: auto;height: 100%;margin-right: 0;"
|
|
|
|
|
@check-change="handleCheckChange"
|
|
|
|
|
>
|
|
|
|
|
<span :id="data.id" slot-scope="{ node, data }">
|
|
|
|
|
<span style="font-size: 14px">{{ data.label }}</span>
|
|
|
|
|
</span>
|
|
|
|
|
</el-tree>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else class="chat-box-content">
|
|
|
|
|
<div class="chatcontent">
|
|
|
|
|
<chat-content ref="chatContent" :chat-content-list="chatContentList" />
|
|
|
|
|
<div v-if="recordSending" class="chat_record_tip">
|
|
|
|
|
<div id="record_progress_bar" :style="'width:'+100/60*seconds+'%'" />
|
|
|
|
|
<div class="record_icon" />
|
|
|
|
|
<div class="record_tip_text">正在录音...</div>
|
|
|
|
|
<div class="record_tip_confirm" @click="stopRecording()">确定</div>
|
|
|
|
|
<div class="record_tip_cancle" @click="cancleRecording()">取消</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-07-21 19:27:32 +08:00
|
|
|
<chat-member-list ref="chatMemberList" :current-member-list="currentMemberListData" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chat-box-footer">
|
|
|
|
|
<div v-if="isShow">
|
|
|
|
|
<div class="userString">{{ userString }}</div>
|
|
|
|
|
<el-button :loading="loading" size="mini" type="primary" class="chat-box-create-coversite" @click="doCreate">创建群聊</el-button>
|
|
|
|
|
<div v-if="scriptTip" class="scriptTip">{{ scriptTip }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else>
|
|
|
|
|
<div class="chat-box-footer-tool" />
|
|
|
|
|
<!-- <el-button v-if="isButtonShow&&isCreate" size="mini" type="danger" class="chat-box-footer-quit" :loading="loading" @click="quitCoversition()">退出群聊</el-button> -->
|
|
|
|
|
<el-button v-if="isStartRecord" class="chat-box-footer-send" size="mini" type="primary" :disabled="recordSending" @click="startRecording()">发送语音</el-button>
|
|
|
|
|
<div v-if="scriptTip" class="scriptTip">{{ scriptTip }}</div>
|
|
|
|
|
</div>
|
2020-07-21 15:15:28 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="minimize" class="reminder-drag minimize-box">
|
|
|
|
|
<div class="chat-title">聊天窗口</div>
|
|
|
|
|
<div class="minimality" @click="handleMinimality('max')">
|
|
|
|
|
<i class="el-icon-circle-plus" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<chat-setting ref="chatSetting" :form="form" @setSetting="setSetting" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import ChatSetting from './chatSetting';
|
|
|
|
|
import ChatMemberList from './chatMemberList';
|
|
|
|
|
import ChatContent from './chatContent';
|
2020-07-21 19:27:32 +08:00
|
|
|
import RecordRTC from 'recordrtc';
|
|
|
|
|
// , overSimulationConversition, getAllConversition
|
|
|
|
|
import {sendSimulationConversition, startConversition} from '@/api/chat';
|
2020-07-21 15:15:28 +08:00
|
|
|
export default {
|
|
|
|
|
name:'ChatBoxDraft',
|
|
|
|
|
components:{
|
|
|
|
|
ChatSetting,
|
|
|
|
|
ChatMemberList,
|
|
|
|
|
ChatContent
|
|
|
|
|
},
|
|
|
|
|
props:{
|
|
|
|
|
isShow:{
|
|
|
|
|
type:Boolean,
|
|
|
|
|
required:true
|
|
|
|
|
},
|
|
|
|
|
treeData:{
|
2020-07-21 19:27:32 +08:00
|
|
|
type:Array,
|
2020-07-21 15:15:28 +08:00
|
|
|
required:true
|
|
|
|
|
},
|
|
|
|
|
group: {
|
|
|
|
|
type: String,
|
|
|
|
|
required: true
|
|
|
|
|
},
|
|
|
|
|
conversitionId:{
|
|
|
|
|
type: String,
|
|
|
|
|
required: true
|
|
|
|
|
},
|
|
|
|
|
currentMemberList:{
|
|
|
|
|
type:Array,
|
|
|
|
|
required: true
|
|
|
|
|
},
|
|
|
|
|
chatContentList:{
|
|
|
|
|
type:Array,
|
|
|
|
|
required: true
|
2020-07-21 19:27:32 +08:00
|
|
|
},
|
|
|
|
|
scriptTip:{
|
|
|
|
|
type:String,
|
|
|
|
|
required:true
|
|
|
|
|
},
|
|
|
|
|
isStartRecord:{
|
|
|
|
|
type:Boolean,
|
|
|
|
|
required:true
|
2020-07-21 15:15:28 +08:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
minimize:true,
|
|
|
|
|
bottom:15,
|
|
|
|
|
queryMember:'',
|
|
|
|
|
defaultProps: {
|
|
|
|
|
children: 'children',
|
|
|
|
|
label: 'label'
|
|
|
|
|
},
|
|
|
|
|
form:{
|
|
|
|
|
language:'zh',
|
|
|
|
|
sex:'1'
|
|
|
|
|
},
|
|
|
|
|
recordSending:false,
|
|
|
|
|
recorders: null,
|
|
|
|
|
seconds:0,
|
|
|
|
|
inter:null,
|
2020-07-21 19:27:32 +08:00
|
|
|
microphone:null,
|
|
|
|
|
loading:false,
|
|
|
|
|
userString:'',
|
|
|
|
|
memberIdList:[],
|
|
|
|
|
currentMemberListData:[]
|
2020-07-21 15:15:28 +08:00
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
watch:{
|
2020-07-21 19:27:32 +08:00
|
|
|
'currentMemberList':(val)=>{
|
|
|
|
|
debugger;
|
|
|
|
|
this.currentMemberListData = val;
|
|
|
|
|
},
|
2020-07-21 15:15:28 +08:00
|
|
|
'$store.state.map.mapViewLoadedCount':function(val) {
|
|
|
|
|
const object = document.querySelector('.menuButton');
|
|
|
|
|
if (object) {
|
|
|
|
|
const objectBottom = parseInt(object.style.bottom) || 0;
|
|
|
|
|
this.bottom = this.bottom + object.offsetHeight + objectBottom;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
'$store.state.training.prdType': function(val) {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
const object = document.querySelector('.menuButton');
|
|
|
|
|
if (object) {
|
|
|
|
|
const objectBottom = parseInt(object.style.bottom) || 0;
|
|
|
|
|
this.bottom = this.bottom + object.offsetHeight + objectBottom;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
queryMember(val) {
|
|
|
|
|
if (this.$refs.tree) {
|
|
|
|
|
this.$refs.tree.filter(val);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
handleSetting() {
|
|
|
|
|
this.$refs.chatSetting.doShow();
|
|
|
|
|
},
|
|
|
|
|
filterNode(value, data) {
|
|
|
|
|
return data.label.indexOf(value) !== -1;
|
|
|
|
|
},
|
|
|
|
|
handleCheckChange() {
|
|
|
|
|
const memberList = this.$refs.tree.getCheckedNodes();
|
2020-07-21 19:27:32 +08:00
|
|
|
this.userString = '';
|
|
|
|
|
this.memberIdList = [];
|
|
|
|
|
if (memberList && memberList.length) {
|
|
|
|
|
memberList.forEach(member => {
|
|
|
|
|
if (member && !(member.children) && (member.userId == '' || member.userId)) {
|
|
|
|
|
this.userString += member.memberName + ',';
|
|
|
|
|
this.memberIdList.push(member.id);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
2020-07-21 15:15:28 +08:00
|
|
|
},
|
|
|
|
|
handleMinimality(data) {
|
|
|
|
|
if (data == 'min') {
|
|
|
|
|
this.minimize = true;
|
|
|
|
|
this.$refs.chatSetting.doClose();
|
|
|
|
|
} else {
|
|
|
|
|
this.minimize = false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
setSetting(data) {
|
|
|
|
|
this.form = data;
|
|
|
|
|
},
|
2020-07-21 19:27:32 +08:00
|
|
|
// 语音录制开始
|
|
|
|
|
startRecording() {
|
|
|
|
|
this.$emit('setScriptTip', '');
|
|
|
|
|
const that = this;
|
|
|
|
|
if (!this.recordSending && !this.recorders && !this.microphone) {
|
|
|
|
|
this.$refs.chatSetting.doClose();
|
|
|
|
|
const StereoAudioRecorder = RecordRTC.StereoAudioRecorder;
|
|
|
|
|
navigator.getUserMedia(
|
|
|
|
|
{ audio: true } // 只启用音频
|
|
|
|
|
, function (stream) {
|
|
|
|
|
that.microphone = stream;
|
|
|
|
|
that.recorders = new RecordRTC(that.microphone, {
|
|
|
|
|
type: 'audio',
|
|
|
|
|
recorderType: StereoAudioRecorder,
|
|
|
|
|
numberOfAudioChannels: 1,
|
|
|
|
|
bitsPerSecond:256000,
|
|
|
|
|
desiredSampRate: 16000
|
|
|
|
|
});
|
|
|
|
|
that.recorders.startRecording();
|
|
|
|
|
that.recordSending = true;
|
|
|
|
|
that.inter = setInterval(() => {
|
|
|
|
|
if (that.seconds < 60) {
|
|
|
|
|
that.seconds++;
|
|
|
|
|
} else {
|
|
|
|
|
clearInterval(that.inter);
|
|
|
|
|
}
|
|
|
|
|
}, 1000);
|
|
|
|
|
}, function (error) {
|
|
|
|
|
switch (error.code || error.name) {
|
|
|
|
|
case 'PERMISSION_DENIED':
|
|
|
|
|
case 'PermissionDeniedError':
|
|
|
|
|
that.$message({
|
|
|
|
|
showClose: true,
|
|
|
|
|
message: '用户拒绝提供信息',
|
|
|
|
|
type: 'error'
|
|
|
|
|
});
|
|
|
|
|
break;
|
|
|
|
|
case 'NOT_SUPPORTED_ERROR':
|
|
|
|
|
case 'NotSupportedError':
|
|
|
|
|
that.$message({
|
|
|
|
|
showClose: true,
|
|
|
|
|
message: '浏览器不支持硬件设备',
|
|
|
|
|
type: 'error'
|
|
|
|
|
});
|
|
|
|
|
break;
|
|
|
|
|
case 'MANDATORY_UNSATISFIED_ERROR':
|
|
|
|
|
case 'MandatoryUnsatisfiedError':
|
|
|
|
|
that.$message({
|
|
|
|
|
showClose: true,
|
|
|
|
|
message: '无法发现指定的硬件设备',
|
|
|
|
|
type: 'error'
|
|
|
|
|
});
|
|
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
that.$message({
|
|
|
|
|
showClose: true,
|
|
|
|
|
message: '无法打开麦克风',
|
|
|
|
|
type: 'error'
|
|
|
|
|
});
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
},
|
2020-07-21 15:15:28 +08:00
|
|
|
// 停止录制
|
|
|
|
|
stopRecording() {
|
|
|
|
|
const that = this;
|
|
|
|
|
this.recorders.stopRecording(function(blobURL) {
|
|
|
|
|
const data = URL.createObjectURL(that.recorders.getBlob());
|
|
|
|
|
console.log('--------', data);
|
|
|
|
|
clearInterval(that.inter);
|
|
|
|
|
that.seconds = 0;
|
|
|
|
|
const blob = that.recorders.getBlob();
|
|
|
|
|
const fd = new FormData();
|
|
|
|
|
fd.append('file', blob);
|
|
|
|
|
sendSimulationConversition(that.group, that.conversitionId, fd)
|
|
|
|
|
.then((data) => {
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.log(error);
|
|
|
|
|
});
|
|
|
|
|
if (that.microphone) {
|
|
|
|
|
that.microphone.stop();
|
|
|
|
|
that.microphone = null;
|
|
|
|
|
that.recordSending = false;
|
|
|
|
|
that.recorders = null;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
cancleRecording() {
|
|
|
|
|
if (this.microphone) {
|
|
|
|
|
clearInterval(this.inter);
|
|
|
|
|
this.seconds = 0;
|
|
|
|
|
this.microphone.stop();
|
|
|
|
|
this.microphone = null;
|
|
|
|
|
this.recordSending = false;
|
|
|
|
|
this.recorders = null;
|
|
|
|
|
}
|
2020-07-21 19:27:32 +08:00
|
|
|
},
|
|
|
|
|
doCreate() {
|
|
|
|
|
if (this.memberIdList.length > 0) {
|
|
|
|
|
this.loading = true;
|
|
|
|
|
startConversition(this.group, this.memberIdList).then(resp => {
|
|
|
|
|
if (resp.data) {
|
|
|
|
|
// this.conversitionId = resp.data.id;
|
|
|
|
|
this.loading = false;
|
|
|
|
|
this.memberIdList = [];
|
|
|
|
|
this.userString = '';
|
|
|
|
|
}
|
|
|
|
|
}).catch(error=>{
|
|
|
|
|
this.$message.error(error.code == '3005' ? '创建会话失败:仿真会话成员忙线中！' : '创建会话失败！');
|
|
|
|
|
this.loading = false;
|
|
|
|
|
this.dialogVisible = false;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// this.createLoading = true;
|
|
|
|
|
// startConversition(this.group, this.memberIdList).then(resp => {
|
|
|
|
|
// this.conversitionId = resp.data.id;
|
|
|
|
|
// this.messageList = [];
|
|
|
|
|
// this.privateMessageList = [];
|
|
|
|
|
// this.userString = '';
|
|
|
|
|
// this.isConversitionCreator = true;
|
|
|
|
|
// this.$message.success('创建会话成功！');
|
|
|
|
|
// this.createLoading = false;
|
|
|
|
|
// }).catch((error) => {
|
|
|
|
|
// this.$message.error(error.code == '3005' ? '创建会话失败:仿真会话成员忙线中！' : '创建仿真失败！');
|
|
|
|
|
// this.createLoading = false;
|
|
|
|
|
// });
|
2020-07-21 15:15:28 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
// .chat-box-footer-quit{
|
|
|
|
|
// font-size: 12px;
|
|
|
|
|
// padding: 5px 15px;
|
|
|
|
|
// color: #fff;
|
|
|
|
|
// float: left;
|
|
|
|
|
// margin-left: 10px;
|
|
|
|
|
// margin-bottom: 10px;
|
|
|
|
|
// cursor: pointer;
|
|
|
|
|
// }
|
|
|
|
|
.chatBox{
|
|
|
|
|
width: 503px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
padding-left:5px;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom:15px;
|
|
|
|
|
z-index:9;
|
|
|
|
|
}
|
|
|
|
|
.chat-box{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 400px;
|
|
|
|
|
}
|
|
|
|
|
.chat-box-header{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-bottom: 1px #dedede solid;
|
|
|
|
|
}
|
|
|
|
|
.chat-box-header-title{
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
margin-left: 15px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
width: 70%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
.chat-box-content{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 300px;
|
|
|
|
|
border-bottom: 1px #dedede solid;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
// .chat-box-contentTip{
|
|
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
.chatcontent{
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 362px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
cursor: auto;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
2020-07-21 19:27:32 +08:00
|
|
|
.chat-box-footer{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
2020-07-21 15:15:28 +08:00
|
|
|
.chat-window{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
.chat-setting{
|
|
|
|
|
float: right;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
2020-07-21 19:27:32 +08:00
|
|
|
.chat-box-footer-tool{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 30px;
|
|
|
|
|
}
|
|
|
|
|
.chat-box-footer-send{
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
float: right;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding: 5px 15px;
|
|
|
|
|
}
|
|
|
|
|
.chat-box-create-coversite{
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
float: right;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
margin-top: 18px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding: 5px 15px;
|
|
|
|
|
}
|
2020-07-21 15:15:28 +08:00
|
|
|
.minimality {
|
|
|
|
|
float: right;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size:16px;
|
|
|
|
|
}
|
|
|
|
|
.chat-box-main{
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
left: 0;
|
|
|
|
|
height: 100%;
|
|
|
|
|
top: 0;
|
|
|
|
|
border-right: 1px #dedede solid;
|
|
|
|
|
z-index: 4;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
left:5px;
|
|
|
|
|
font-size:0;
|
|
|
|
|
}
|
|
|
|
|
// .chat-coversition{
|
|
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
// .coversition-list{
|
|
|
|
|
|
|
|
|
|
// }
|
2020-07-21 19:27:32 +08:00
|
|
|
.chat-box-footer-send.disbled{
|
|
|
|
|
cursor: no-drop;
|
|
|
|
|
}
|
2020-07-21 15:15:28 +08:00
|
|
|
|
2020-07-21 19:27:32 +08:00
|
|
|
.scriptTip{
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 260px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
background: rgb(250, 246, 3);
|
|
|
|
|
right: 7px;
|
|
|
|
|
bottom:45px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #000000;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
.scriptTip::after{
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 0;
|
|
|
|
|
height: 0;
|
|
|
|
|
border-left: 10px solid transparent;
|
|
|
|
|
border-right: 10px solid transparent;
|
|
|
|
|
border-top: 8px solid #faf603;
|
|
|
|
|
right: 16px;
|
|
|
|
|
bottom: -7px;
|
|
|
|
|
}
|
2020-07-21 15:15:28 +08:00
|
|
|
|
2020-07-21 19:27:32 +08:00
|
|
|
.userString{
|
|
|
|
|
height: 50px;
|
|
|
|
|
width: 409px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
padding: 4px 5px;
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
line-height: 135%;
|
|
|
|
|
resize: none;
|
|
|
|
|
}
|
2020-07-21 15:15:28 +08:00
|
|
|
|
|
|
|
|
// .showMembers{
|
|
|
|
|
// float: right;
|
|
|
|
|
// line-height: 40px;
|
|
|
|
|
// margin-right: 10px;
|
|
|
|
|
// cursor: pointer;
|
|
|
|
|
// font-size: 17px;
|
|
|
|
|
// }
|
|
|
|
|
#record_progress_bar{
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
background: #bbe5f5;
|
|
|
|
|
}
|
|
|
|
|
.chat_record_tip{
|
|
|
|
|
height: 28px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
background: #dfe6ee;
|
|
|
|
|
width: 100%;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
border-top: 1px #d8dce5 solid;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
.record_icon{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 8px;
|
|
|
|
|
height: 8px;
|
|
|
|
|
background: #25d825;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
left: 7px;
|
|
|
|
|
margin-right: 0px;
|
|
|
|
|
box-shadow: -1px 0px 3px #6d6d6d;
|
|
|
|
|
border: 1px #28d228 solid;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 10px;
|
|
|
|
|
}
|
|
|
|
|
.record_tip_text{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
margin-left: 3px;
|
|
|
|
|
// padding: 8px 0px 6px 0px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 8px;
|
|
|
|
|
left:20px
|
|
|
|
|
}
|
|
|
|
|
.record_tip_confirm{
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 63px;
|
|
|
|
|
padding: 3px 0px 2px 0px;
|
|
|
|
|
border: 1px #a2a5aa solid;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
width: 45px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
top: 4px;
|
|
|
|
|
background: #eeeeee;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.record_tip_cancle{
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 10px;
|
|
|
|
|
padding: 3px 0px 2px 0px;
|
|
|
|
|
border: 1px #a2a5aa solid;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
width: 45px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
top: 4px;
|
|
|
|
|
background: #eeeeee;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.minimize-box {
|
|
|
|
|
width: 97.5%;
|
|
|
|
|
height: 40px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 5px;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
z-index: 222;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
|
|
|
|
.chat-title {
|
|
|
|
|
float: left;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.minimality {
|
|
|
|
|
float: right;
|
|
|
|
|
height: 40px;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
