调整样式
This commit is contained in:
parent
a5b954c017
commit
8a28526fe1
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user