tanghuan/mediate-manage-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

呼入弹窗样式优化

Browse Source
This commit is contained in:
tdg930622 2025-01-22 16:16:09 +08:00
parent c205347416
commit 5307840bc9
1 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/VoiceCallDialog.vue
View File

@ -4,7 +4,7 @@
<div v-if="zoomActive" class="cover"></div>
<div v-if="zoomActive" class="big-layout">
<div class="big-header flex-row justify-content-end">
<div class="big-header-btn bg-color-light flex-row align-items-center border-radius-4 cursor-pointer"
<div class="big-header-btn flex-row align-items-center cursor-pointer"
@click="toggleZoom">
<span class="mr-4">{{ zoomActive ? '缩小' : '放大' }}</span>
<svg-icon
@ -98,11 +98,11 @@
</div>
</div>
<!-- 小 -->
<div v-else class="small-layout flex-row justify-content-between align-items-center pl-32 pr-32">
<div class="f24 f-weight600 mr-16">{{ incomingCallPhone }}</div>
<div v-else class="small-layout flex-row justify-content-between align-items-center pl-24 pr-24">
<div class="f24 f-weight600 pr-16 mr-16 small-layout-phone">{{ incomingCallPhone }}</div>
<div class="mr-16 cursor-pointer" v-if="!answerSts" @click="handleAccept"><svg-icon icon-class="up-telephone" className="tabs-svg-phone" /></div>
<div class="mr-16 cursor-pointer" @click="handleHungUp"><svg-icon icon-class="hang-telephone" className="tabs-svg-phone" /></div>
<div class="big-header-btn bg-color-light flex-row align-items-center border-radius-4 cursor-pointer"
<div class="big-header-btn flex-row align-items-center cursor-pointer"
@click="toggleZoom">
<span class="mr-4">{{ zoomActive ? '缩小' : '放大' }}</span>
<svg-icon :icon-class="zoomActive ? `zoom-1` : 'zoom-2'" className="tabs-svg-zoom" />
@ -244,8 +244,9 @@ export default {
.big-header{
.big-header-btn{
background-color: #e4e7ed;
padding: 6px 10px;
background-color: rgba(242, 243, 245, 1);
padding: 9px 14px;
border-radius: 16px;
.tabs-svg{
width: 16px;
height: 16px;
@ -286,20 +287,27 @@ export default {
position: absolute;
top: 0;
left: 50%;
height: 56px;
height: 72px;
width: 460px;
margin-left: -230px;
.small-layout{
height: 56px;
height: 72px;
border-radius: 16px;
background-color: #dcdfe6;
background-color: #ffffff;
border: 1px solid #E5E6EB;
box-shadow: 0 8px 16px 0 rgba(0,0,0,.1);
.small-layout-phone{
line-height: 34px;
border-right: 1px solid rgba(229, 230, 235, 1);
}
.tabs-svg-phone{
width: 40px;
height: 40px;
}
.big-header-btn{
background-color: #ffffff;
padding: 6px 10px;
background-color: rgba(242, 243, 245, 1);
padding: 9px 14px;
border-radius: 16px;
.tabs-svg{
width: 16px;
height: 16px;