调整样式

This commit is contained in:
zyy 2020-09-24 17:55:06 +08:00
parent a5b954c017
commit 8a28526fe1

View File

@ -57,17 +57,27 @@
:user-role="userRole"
@changeMessageList="changeMessageList"
/>
<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>
<div class="chat-box-footer">
<div v-if="!conversitionId">
<div style="width: 400px;font-size: 14px;line-height: 38px; padding-left: 10px;">{{ userString }}</div>
<el-button size="mini" type="primary" class="chat-box-footer-create" :loading="createLoading" @click="createCoversition()">电话图标(绿色)</el-button>
<el-button size="mini" type="primary" class="chat-box-footer-create" :loading="createLoading" @click="createCoversition()">
<i class="el-icon-phone" />
</el-button>
</div>
<div v-else>
<el-button v-if="isButtonShow && !commonConversation" size="mini" type="danger" class="chat-box-footer-quit" :loading="quitLoading" @click="quitConversition()">电话图标(红色)</el-button>
<el-button v-if="isButtonShow && !commonConversation" class="chat-box-footer-send" size="mini" type="primary" :disabled="recordSending" @click="startRecording()">麦克风图标</el-button>
<el-button v-if="isButtonShow && !commonConversation" size="mini" type="danger" class="chat-box-footer-create chat-box-footer-quit" :loading="quitLoading" @click="quitConversition()">
<i class="el-icon-phone" />
</el-button>
<el-button v-if="isButtonShow && !commonConversation" class="chat-box-footer-create chat-box-footer-send" :class="{'active': recordSending}" size="mini" type="primary" :disabled="recordSending" @click="startRecording()"><i class="el-icon-mic" /></el-button>
</div>
</div>
</template>
<template v-else>
@ -821,7 +831,7 @@ export default {
.chat-box-content1{
height: 200px;
position: relative;
border-top: 1px #dedede solid;
border-top: 1px #9a9a9a solid;
margin-top: 8px;
}
@ -830,7 +840,7 @@ export default {
width: 100%;
height: 38px;
position: relative;
border-top: 1px solid #ccc;
border-top: 1px solid #afafaf;
}
.chat-setting{
float: right;
@ -851,30 +861,6 @@ export default {
width: 100%;
height: 17px;
}
.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;
}
.chat-box-footer-quit{
width: 65px;
font-size: 12px;
padding: 5px 0px 4px 0px;
text-align: center;
border-radius: 3px;
color: #fff;
margin-left: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.minimality {
float: right;
line-height: 40px;
@ -896,18 +882,32 @@ export default {
// font-size:0;
}
.chat-box-footer-create{
width: 65px;
font-size: 12px;
padding: 5px 0px 4px 0px;
font-size: 16px;
text-align: center;
border-radius: 3px;
color: #fff;
position: absolute;
right: 5px;
top: 9px;
// margin-right: 10px;
// margin-top: 10px;
top: 4px;
line-height: 30px;
cursor: pointer;
width: 30px;
height: 30px;
border-radius: 50%;
background: green;
display: flex;
justify-content: center;
align-items: center;
}
.chat-box-footer-quit{
background: red;
}
.chat-box-footer-send{
background: #ccc;
right: 45px;
cursor: pointer;
&.active{
background: green;
}
}
.showMembers{
float: right;