部分内容
This commit is contained in:
tdg930622
parent
7b7fbc4ffa
commit
be178b1cb4
@ -930,7 +930,7 @@ export default {
|
||||
.right-wrap-side{
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
background-color: #EEF1FE;
|
||||
background-color: #F7F8FA;
|
||||
}
|
||||
|
||||
//.case-communication-record {
|
||||
|
||||
@ -4,10 +4,138 @@
|
||||
<div v-if="rightActive === 1">
|
||||
<div class="tab-content-title f16 f-weight600 pb-8">触达记录</div>
|
||||
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
|
||||
<el-timeline class="padding-2">
|
||||
<el-timeline-item timestamp="2018/4/12" placement="top" type="primary">
|
||||
<el-card shadow="never">
|
||||
<div class="mb-8">09:36 李四上传还款凭证</div>
|
||||
<div class="mb-8">09:33 李四对调解协议进行了电子签名</div>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
<el-timeline-item timestamp="2018/4/3" placement="top" type="primary">
|
||||
<el-card shadow="never">
|
||||
<div>09:27 李四浏览了案件材料信息</div>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<div v-if="rightActive === 2">
|
||||
<div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
|
||||
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
|
||||
<div class="timeline-layout pt-16">
|
||||
<div class="timeline-layout-100">
|
||||
<div class="flex-row justify-content-between">
|
||||
<div class="flex-row">
|
||||
<div>17:15:00</div>
|
||||
<div class="pl-8 pr-8">
|
||||
陈陈陈
|
||||
</div>
|
||||
<!-- 电话 -->
|
||||
<div class="text-center icon-bg icon-phone">
|
||||
<i class="callphone-icon"></i>
|
||||
</div>
|
||||
<!-- <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 1">-->
|
||||
<!-- <i v-if="itemrecord.callWay == 1" class="callphone-icon"></i>-->
|
||||
<!-- <i v-if="itemrecord.callWay == 0 && itemrecord.linkedSituation != 1" class="callbackphone-icon"></i>-->
|
||||
<!-- <i v-if="itemrecord.callWay == 0 && itemrecord.linkedSituation == 1" class="nocallphone-icon"></i>-->
|
||||
<!-- </div>-->
|
||||
<!-- 视频 -->
|
||||
<!-- <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 2">-->
|
||||
<!-- <i class="callvideo-icon"></i>-->
|
||||
<!-- </div>-->
|
||||
<!-- 微信 -->
|
||||
<!-- <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 3">-->
|
||||
<!-- <i class="callwechat-icon"></i>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<span class="cursor-pointer"><i class="ml-8 f14 el-icon-edit"></i></span>
|
||||
</div>
|
||||
<div class="timeline-layout-w-records mt-8 mb-8">
|
||||
<div class="flex-row align-items-center">
|
||||
<div>
|
||||
<span>
|
||||
陈继平 134****9447
|
||||
<el-tag class="mr-8" size="small" effect="plain">本人</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
<el-tag size="small" effect="plain">重点客户</el-tag>
|
||||
<!-- <div>-->
|
||||
<!-- <span class="pr-8" v-for="(itemperson,index) in itemrecord.linkedPersonInfo" :key="index">-->
|
||||
<!-- {{ itemperson.name}}-->
|
||||
<!-- {{ itemrecord.linkedWay == 1 ? itemperson.phone :''}}-->
|
||||
<!-- <el-tag class="mr-8" size="small" effect="plain" style="height: 22px;">{{itemperson.labelName}}</el-tag>-->
|
||||
<!-- </span>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <el-tag size="small" effect="plain" style="height: 22px;" v-if="itemrecord.mediateStatus != null">{{ materialTypeOptions.find(item => item.value == itemrecord.mediateStatus).label }}</el-tag>-->
|
||||
</div>
|
||||
|
||||
<!-- 电话 -->
|
||||
<div class="flex-row align-items-center pt-6">
|
||||
<div >通话1秒</div>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放录音</div>
|
||||
</div>
|
||||
<!-- <div v-if="itemrecord.linkedWay == 1" class="flex-row align-items-center pt-6">-->
|
||||
<!-- <div v-if="itemrecord.linkedType == 1">通话{{itemrecord.linkedDuration}}秒</div>-->
|
||||
<!-- <el-divider direction="vertical"></el-divider>-->
|
||||
<!-- <div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放录音</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- 视频 -->
|
||||
<!-- <div v-if="itemrecord.linkedWay == 2" class="flex-row align-items-center pt-6">-->
|
||||
<!-- <div>视频{{itemrecord.linkedDuration}}秒</div>-->
|
||||
<!-- <el-divider direction="vertical"></el-divider>-->
|
||||
<!-- <div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放视频</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- 微信 -->
|
||||
<!-- <div v-if="itemrecord.linkedWay == 3" class="flex-row align-items-center pt-6">-->
|
||||
<!-- <!– <div>通话44秒</div> –>-->
|
||||
<!-- <el-divider direction="vertical"></el-divider>-->
|
||||
<!-- <div class="text-center cursor-pointer">查看文件</div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div>沟通备注：<span class="color-FF7D00">111</span></div>
|
||||
</div>
|
||||
<div class="timeline-layout-100 timeline-layout-ai">
|
||||
<div class="flex-row align-items-center">
|
||||
<div class="mr-8 ai-logo-img"></div>
|
||||
<div>调解小助手帮你总结：<i class="f14 el-icon-warning-outline cursor-pointer"></i></div>
|
||||
</div>
|
||||
<div class="pt-8">
|
||||
由于提供的通话记录内容非常有限且不包含具体的人物姓名、对话主旨、相关的时间和金额信息，无法形成有效的摘要。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div v-if="rightActive === 2">
|
||||
|
||||
<div v-if="rightActive === 3">
|
||||
<div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
|
||||
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
|
||||
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div v-if="rightActive === 4">
|
||||
<div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
|
||||
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
|
||||
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div v-if="rightActive === 5">
|
||||
<div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
|
||||
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
|
||||
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div v-if="rightActive === 6">
|
||||
<div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
|
||||
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
|
||||
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div v-if="rightActive === 7">
|
||||
<div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
|
||||
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
|
||||
|
||||
@ -18,9 +146,9 @@
|
||||
popper-class="custom-tooltip"
|
||||
effect="dark"
|
||||
content="XXX"
|
||||
placement="right">
|
||||
<div class="tab-icon flex-row justify-content-center align-items-center"
|
||||
@click="rightActive === 1 ? rightActive = 0 : rightActive = 1"
|
||||
placement="left">
|
||||
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
|
||||
@click="handleToggle(1)"
|
||||
:class="rightActive === 1 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive === 1 ? `siderbar-1-active` : 'siderbar-1'" className="tabs-svg" />
|
||||
</div>
|
||||
@ -29,13 +157,68 @@
|
||||
popper-class="custom-tooltip"
|
||||
effect="dark"
|
||||
content="XXX"
|
||||
placement="right">
|
||||
<div class="tab-icon flex-row justify-content-center align-items-center"
|
||||
@click="rightActive === 2 ? rightActive = 0 : rightActive = 2"
|
||||
placement="left">
|
||||
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
|
||||
@click="handleToggle(2)"
|
||||
:class="rightActive === 2 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive === 2 ? `siderbar-2-active` : 'siderbar-2'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
popper-class="custom-tooltip"
|
||||
effect="dark"
|
||||
content="XXX"
|
||||
placement="left">
|
||||
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
|
||||
@click="handleToggle(3)"
|
||||
:class="rightActive === 3 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive === 3 ? `siderbar-3-active` : 'siderbar-3'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
popper-class="custom-tooltip"
|
||||
effect="dark"
|
||||
content="XXX"
|
||||
placement="left">
|
||||
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
|
||||
@click="handleToggle(4)"
|
||||
:class="rightActive === 4 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive === 4 ? `siderbar-4-active` : 'siderbar-4'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
popper-class="custom-tooltip"
|
||||
effect="dark"
|
||||
content="XXX"
|
||||
placement="left">
|
||||
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
|
||||
@click="handleToggle(5)"
|
||||
:class="rightActive === 5 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive === 5 ? `siderbar-5-active` : 'siderbar-5'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
popper-class="custom-tooltip"
|
||||
effect="dark"
|
||||
content="XXX"
|
||||
placement="left">
|
||||
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
|
||||
@click="handleToggle(6)"
|
||||
:class="rightActive === 6 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive === 6 ? `siderbar-6-active` : 'siderbar-6'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
popper-class="custom-tooltip"
|
||||
effect="dark"
|
||||
content="XXX"
|
||||
placement="left">
|
||||
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
|
||||
@click="handleToggle(7)"
|
||||
:class="rightActive === 7 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive === 7 ? `siderbar-7-active` : 'siderbar-7'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -57,7 +240,8 @@ export default {
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
rightActive: 0
|
||||
rightActive: 0,
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -66,17 +250,30 @@ export default {
|
||||
return oh - 57 - 63
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleToggle(val){
|
||||
if (this.rightActive === val){
|
||||
this.rightActive = 0;
|
||||
}else {
|
||||
this.rightActive = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.padding-2{
|
||||
padding: 16px 0 16px 2px !important;
|
||||
}
|
||||
|
||||
.sidebar-tab{
|
||||
width: 40px;
|
||||
.tab-content{
|
||||
position: absolute;
|
||||
top: 57px;
|
||||
right: 40px;
|
||||
width: 260px;
|
||||
width: 280px;
|
||||
background-color: #ffffff;
|
||||
border-left: 1px solid #E5E6EB;
|
||||
}
|
||||
@ -93,4 +290,66 @@ export default {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-layout{
|
||||
border-top: 1px solid #F2F3F5;
|
||||
.timeline-layout-100{
|
||||
width: 100%;
|
||||
.icon-bg{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
.callphone-icon{
|
||||
background: url('~@/assets/image/mediate/callphone.png') no-repeat;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.callbackphone-icon{
|
||||
background: url('~@/assets/image/mediate/callbackphone.png') no-repeat;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.nocallphone-icon{
|
||||
background: url('~@/assets/image/mediate/nocallbackphone.png') no-repeat;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.callvideo-icon{
|
||||
background: url('~@/assets/image/mediate/callvideo.png') no-repeat;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-video{
|
||||
background-color: #FF7D00;
|
||||
}
|
||||
.timeline-layout-w-records{
|
||||
background-color: #F5F5F5;
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px 12px 12px;
|
||||
}
|
||||
}
|
||||
.timeline-layout-ai{
|
||||
padding: 6px 16px;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(270deg, #F1F4FE 0%, #FFF2F8 100%);
|
||||
.ai-logo-img{
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
background: url('~@/assets/image/ai-logo.png') no-repeat;
|
||||
background-size: 100%,100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user