616 lines
19 KiB
Vue
616 lines
19 KiB
Vue
|
<template>
|
||
|
|
<!-- v-quickMenuDrag -->
|
||
|
|
<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-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 v-show="currentCoversition.all==undefined?true&&isShow:currentCoversition.all&&isShow" class="chat-createGroup" @click="handleCreateGroup()">
|
||
|
|
<i class="el-icon-plus" style="font-weight: bolder;" />
|
||
|
|
</div>
|
||
|
|
<div class="chat-setting" @click="handleSetting()">
|
||
|
|
<i class="el-icon-s-tools" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="chat-box-content">
|
||
|
|
<el-tree
|
||
|
|
ref="tree"
|
||
|
|
:data="treeData"
|
||
|
|
:props="defaultProps"
|
||
|
|
default-expand-all
|
||
|
|
show-checkbox
|
||
|
|
:filter-node-method="filterNode"
|
||
|
|
style="margin: 10px;overflow-y: auto;height: 100%;"
|
||
|
|
@node-click="handleNodeClick"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="chat-box-footer">
|
||
|
|
<el-button size="mini" type="primary" class="chat-box-footer-create" :loading="createLoading" @click="createCoversition()">创建群聊</el-button>
|
||
|
|
</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" />
|
||
|
|
<chat-tooltip :group="group" @getCoversitionList="getCoversitionList" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import ChatSetting from './chatSetting';
|
||
|
|
import ChatTooltip from './chatTooltip';
|
||
|
|
import RecordRTC from 'recordrtc';
|
||
|
|
import {uploadAudioFileNew, quitCoversition} from '@/api/chat';
|
||
|
|
import { getSessionStorage } from '@/utils/auth';
|
||
|
|
export default {
|
||
|
|
name: 'ChatBox',
|
||
|
|
components:{
|
||
|
|
ChatSetting,
|
||
|
|
ChatTooltip
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
group: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
userRole: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
minimize:true,
|
||
|
|
bottom:15,
|
||
|
|
recordSending:false,
|
||
|
|
currentCoversition:{},
|
||
|
|
seconds:0,
|
||
|
|
inter:null,
|
||
|
|
recorders: null,
|
||
|
|
microphone:null,
|
||
|
|
isHasCoversition:false,
|
||
|
|
createLoading:false,
|
||
|
|
form:{
|
||
|
|
language:'zh',
|
||
|
|
sex:'1'
|
||
|
|
},
|
||
|
|
headerTitle:'',
|
||
|
|
treeData: [],
|
||
|
|
defaultProps: {
|
||
|
|
children: 'children',
|
||
|
|
label: 'label'
|
||
|
|
},
|
||
|
|
queryMember: '',
|
||
|
|
activeTrains: [],
|
||
|
|
firstClick: true,
|
||
|
|
memberData: {},
|
||
|
|
simulationUsers: {}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed:{
|
||
|
|
isShow() {
|
||
|
|
return this.userRole != 'ADMIN' && this.userRole != 'AUDIENCE' && !this.isHasCoversition;
|
||
|
|
},
|
||
|
|
isButtonShow() {
|
||
|
|
return this.userRole != 'ADMIN' && this.userRole != 'AUDIENCE' && this.isHasCoversition;
|
||
|
|
},
|
||
|
|
project() {
|
||
|
|
return getSessionStorage('project');
|
||
|
|
},
|
||
|
|
IsAnswering() {
|
||
|
|
return !(this.$route.path.includes('refereeJsxtDisplay'));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch:{
|
||
|
|
queryMember(val) {
|
||
|
|
this.$refs.tree.filter(val);
|
||
|
|
},
|
||
|
|
'$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.map.activeTrainListUpdate': function (val) {
|
||
|
|
this.activeTrains = [];
|
||
|
|
const activeTrainList = this.$store.state.map.activeTrainList;
|
||
|
|
if (activeTrainList && activeTrainList.length) {
|
||
|
|
activeTrainList.forEach(train => {
|
||
|
|
this.activeTrains.push(train.groupNumber);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
this.$refs.tree.filter(this.queryMember);
|
||
|
|
},
|
||
|
|
'$store.state.training.simulationUserList': function(val) {
|
||
|
|
this.simulationUsers = {};
|
||
|
|
if (val && val.length) {
|
||
|
|
val.forEach(user => {
|
||
|
|
this.simulationUsers[user.userId] = user;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'$store.state.training.memberList': function (val) {
|
||
|
|
if (val && val.length) {
|
||
|
|
this.memberData = this.$store.state.training.memberData;
|
||
|
|
const dispatcherList = [];
|
||
|
|
const electricDispatcherList = [];
|
||
|
|
const depotDispatcherList = [];
|
||
|
|
const stationSupervisorList = [];
|
||
|
|
const driverList = [];
|
||
|
|
const maintainerList = [];
|
||
|
|
val.forEach(item => {
|
||
|
|
const device = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
|
||
|
|
switch (item.role) {
|
||
|
|
case 'DISPATCHER':
|
||
|
|
this.memberData[item.id].label = '行调' + (dispatcherList.length + 1);
|
||
|
|
dispatcherList.push(this.memberData[item.id]);
|
||
|
|
break;
|
||
|
|
case 'ELECTRIC_DISPATCHER':
|
||
|
|
electricDispatcherList.push(this.memberData[item.id]);
|
||
|
|
break;
|
||
|
|
case 'DEPOT_DISPATCHER':
|
||
|
|
depotDispatcherList.push(this.memberData[item.id]);
|
||
|
|
break;
|
||
|
|
case 'STATION_SUPERVISOR':
|
||
|
|
this.memberData[item.id].label = '值班员-' + device.name;
|
||
|
|
stationSupervisorList.push(this.memberData[item.id]);
|
||
|
|
break;
|
||
|
|
case 'DRIVER':
|
||
|
|
this.memberData[item.id].label = '司机-列车' + item.deviceCode;
|
||
|
|
driverList.push(this.memberData[item.id]);
|
||
|
|
break;
|
||
|
|
case 'MAINTAINER':
|
||
|
|
this.memberData[item.id].label = '通号' + (maintainerList.length + 1);
|
||
|
|
maintainerList.push(this.memberData[item.id]);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.treeData = [{
|
||
|
|
label: '行调',
|
||
|
|
id: 'dispatcher',
|
||
|
|
type: 'role',
|
||
|
|
children: dispatcherList
|
||
|
|
}, {
|
||
|
|
label: '车站值班员',
|
||
|
|
id: 'stationSupervisor',
|
||
|
|
type: 'role',
|
||
|
|
children: stationSupervisorList
|
||
|
|
}, {
|
||
|
|
label: '司机',
|
||
|
|
id: 'driver',
|
||
|
|
type: 'role',
|
||
|
|
children: driverList
|
||
|
|
}, {
|
||
|
|
label: '通号',
|
||
|
|
id: 'maintainer',
|
||
|
|
type: 'role',
|
||
|
|
children: maintainerList
|
||
|
|
}];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.initPage();
|
||
|
|
this.firstClick = true;
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
async initPage() {
|
||
|
|
},
|
||
|
|
handleMinimality(data) {
|
||
|
|
if (data == 'min') {
|
||
|
|
this.minimize = true;
|
||
|
|
this.$refs.chatSetting.doClose();
|
||
|
|
} else {
|
||
|
|
this.firstClick && this.$nextTick(() => {
|
||
|
|
this.$refs.tree.filter(this.queryMember);
|
||
|
|
this.firstClick = false;
|
||
|
|
});
|
||
|
|
this.minimize = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setSetting(data) {
|
||
|
|
this.form = data;
|
||
|
|
},
|
||
|
|
getCoversitionList() {
|
||
|
|
this.$refs.chatCoversitionList.initPage(false);
|
||
|
|
},
|
||
|
|
setCurrentCoversition(coversition) {
|
||
|
|
if (coversition && coversition.id) {
|
||
|
|
this.currentCoversition = coversition;
|
||
|
|
this.headerTitle = coversition.name;
|
||
|
|
} else {
|
||
|
|
this.headerTitle = '';
|
||
|
|
}
|
||
|
|
if (this.recordSending) {
|
||
|
|
this.cancleRecording();
|
||
|
|
}
|
||
|
|
this.$refs.chatContent.scrollTop();
|
||
|
|
},
|
||
|
|
setHeadTitle(headerTitle) {
|
||
|
|
this.headerTitle = headerTitle;
|
||
|
|
},
|
||
|
|
hideAddCoversition() {
|
||
|
|
this.isHasCoversition = true;
|
||
|
|
},
|
||
|
|
createCoversition() {
|
||
|
|
const memberList = this.$refs.tree.getCheckedNodes();
|
||
|
|
let userString = '';
|
||
|
|
if (memberList && memberList.length) {
|
||
|
|
memberList.forEach(member => {
|
||
|
|
if (member.userId) {
|
||
|
|
userString += this.simulationUsers[member.userId].nickName;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
this.createLoading = true;
|
||
|
|
this.$confirm(`您将创建与${userString}的会话`, this.$t('global.tips'), {
|
||
|
|
confirmButtonText: this.$t('global.confirm'),
|
||
|
|
cancelButtonText: this.$t('global.cancel'),
|
||
|
|
type: 'warning'
|
||
|
|
}).then(() => {
|
||
|
|
this.createLoading = false;
|
||
|
|
}).catch(() => {
|
||
|
|
this.createLoading = false;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
addCoversition({data, headerTitle}) {
|
||
|
|
this.$refs.chatCoversitionList.addCoversition(data);
|
||
|
|
this.isHasCoversition = true;
|
||
|
|
this.currentCoversition = {id:data.id, all:data.all};
|
||
|
|
this.headerTitle = headerTitle;
|
||
|
|
},
|
||
|
|
// 语音录制开始
|
||
|
|
startRecording() {
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
cancleRecording() {
|
||
|
|
if (this.microphone) {
|
||
|
|
clearInterval(this.inter);
|
||
|
|
this.seconds = 0;
|
||
|
|
this.microphone.stop();
|
||
|
|
this.microphone = null;
|
||
|
|
this.recordSending = false;
|
||
|
|
this.recorders = null;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 停止录制
|
||
|
|
stopRecording() {
|
||
|
|
const that = this;
|
||
|
|
this.recorders.stopRecording(function(blobURL) {
|
||
|
|
clearInterval(that.inter);
|
||
|
|
that.seconds = 0;
|
||
|
|
const blob = that.recorders.getBlob();
|
||
|
|
const fd = new FormData();
|
||
|
|
fd.append('file', blob);
|
||
|
|
uploadAudioFileNew(that.group, that.form.language, that.form.sex, that.currentCoversition.id, fd)
|
||
|
|
.then((data) => {
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.log(error);
|
||
|
|
});
|
||
|
|
if (that.microphone) {
|
||
|
|
that.microphone.stop();
|
||
|
|
that.microphone = null;
|
||
|
|
that.recordSending = false;
|
||
|
|
that.recorders = null;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
changeCoversition(data) {
|
||
|
|
this.$refs.chatCoversitionList.changeCoversitionOther(data);
|
||
|
|
},
|
||
|
|
handleSetting() {
|
||
|
|
this.$refs.chatSetting.doShow();
|
||
|
|
},
|
||
|
|
handleCreateGroup() {
|
||
|
|
this.$refs.createGroup.doShow();
|
||
|
|
},
|
||
|
|
handleNodeClick() {
|
||
|
|
|
||
|
|
},
|
||
|
|
filterNode(value, data) {
|
||
|
|
let flag = false;
|
||
|
|
if (this.memberData[data.id] && this.memberData[data.id].nickName) {
|
||
|
|
flag = this.memberData[data.id].nickName.indexOf(value) !== -1;
|
||
|
|
}
|
||
|
|
let driverNoShow = true;
|
||
|
|
if (data.role && data.role === 'DRIVER' && !this.activeTrains.includes(data.deviceCode)) {
|
||
|
|
driverNoShow = false;
|
||
|
|
}
|
||
|
|
return (data.label.indexOf(value) !== -1 || flag) && driverNoShow;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.chatBox{
|
||
|
|
width: 503px;
|
||
|
|
height: 400px;
|
||
|
|
position: absolute;
|
||
|
|
padding-left:5px;
|
||
|
|
left: 0;
|
||
|
|
bottom:28px;
|
||
|
|
z-index:9;
|
||
|
|
}
|
||
|
|
.chat-box{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.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: 5px;
|
||
|
|
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{
|
||
|
|
|
||
|
|
}
|
||
|
|
.chat-box-footer{
|
||
|
|
display: inline-block;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.chat-window{
|
||
|
|
display: inline-block;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.chat-setting{
|
||
|
|
float: right;
|
||
|
|
line-height: 40px;
|
||
|
|
margin-right: 10px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
.chat-createGroup{
|
||
|
|
float: right;
|
||
|
|
line-height: 40px;
|
||
|
|
margin-right: 10px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 16px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.chat-box-footer-tool{
|
||
|
|
width: 100%;
|
||
|
|
height: 30px;
|
||
|
|
}
|
||
|
|
.chat-box-footer-send{
|
||
|
|
background: #36a2fd;
|
||
|
|
width: 65px;
|
||
|
|
font-size: 12px;
|
||
|
|
padding: 5px 0px 4px 0px;
|
||
|
|
text-align: center;
|
||
|
|
border-radius: 3px;
|
||
|
|
color: #fff;
|
||
|
|
float: right;
|
||
|
|
margin-right: 10px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.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{
|
||
|
|
|
||
|
|
}
|
||
|
|
.chat-box-footer-create{
|
||
|
|
width: 65px;
|
||
|
|
font-size: 12px;
|
||
|
|
padding: 5px 0px 4px 0px;
|
||
|
|
text-align: center;
|
||
|
|
border-radius: 3px;
|
||
|
|
color: #fff;
|
||
|
|
float: right;
|
||
|
|
margin-right: 10px;
|
||
|
|
margin-top: 10px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
.chat-box-footer-send.disbled{
|
||
|
|
cursor: no-drop;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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>
|