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 2024-12-31 16:48:48 +08:00
parent 29d6b89210
commit d20aae3c16
4 changed files with 83 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/image/ai-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 813 B

BIN
src/assets/image/logo-tjs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

4
src/assets/style/common.scss
View File

@ -247,6 +247,10 @@ html{
@include basePadding(0, $size16);
}
.pl-22{
padding-left: $size22;
}
.p-h-22{
@include basePadding(0, $size22)
}

168
src/pages/mediation-page/components/LayoutContentNew.vue
View File

@ -3,26 +3,60 @@
<div class="layout-center-wrap flex-column">
<!-- 上部数据 -->
<div class="layout-center-top-wrap flex-row justify-content-between">
<div class="flex-row justify-content-between top-case-btn-left">
<el-button @click="handleBack">退出当前调解</el-button>
<el-button @click="getFrontCaseById">上一个</el-button>
<el-button @click="getNextCaseById">下一个</el-button>
<span class="ipphoneimg"> IP电话</span>
<span class="smsimg">发送短信</span>
<span class="videoimg" @click="VideoDialog={caseId:caseId}">视频预约</span>
<div class="top-wrap-title flex-row justify-content-between"></div>
<div class="top-wrap-btn-left flex-row justify-content-between">
<div class="flex-row justify-content-between align-items-center">
<el-button icon="el-icon-arrow-left" circle></el-button>
<div class="ml-16 mr-16 flex-row justify-content-between align-items-center">
<div class="mr-8 f16">程机票</div>
<div class="mr-8">
<el-tag size="small" type="warning">四川成都</el-tag>
</div>
<div class="mr-8 f16 color-FF7D00"><i class="el-icon-warning"></i></div>
<div class="f16 color-165DFF"><i class="el-icon-success"></i></div>
</div>
<el-button icon="el-icon-arrow-right" circle></el-button>
</div>
<span class="case-send-btn">发起送达</span>
<span class="case-send-btn">发起签章</span>
<span class="case-send-btn">案件办结</span>
<el-button type="warning" icon="el-icon-message" circle></el-button>
<div class="wrap-btn-left-dial pl-22 pr-24 f14 flex-row justify-content-between">
<div class="mr-24 flex-row justify-content-between align-items-center">
<div class="mr-8 f16 color-F53F3F"><i class="el-icon-video-pause"></i></div>
<div class="mr-8">暂停拨打</div>
<div class="mr-8 f12 color-000">01:00</div>
<div class="mr-8 f20"><i class="el-icon-phone-outline"></i></div>
<div class="mr-8 f20"><i class="el-icon-microphone"></i></div>
<div class="mr-8 ai-logo-img"></div>
</div>
<div class="flex-row justify-content-between align-items-center f14">
<div class="flex-row justify-content-between align-items-center mr-24">
<div class="mr-8 f16"><i class="el-icon-s-operation"></i></div>
<div>队列 <span class="color-000">200</span></div>
</div>
<div class="mr-24">已拨打 <span class="color-000">200</span></div>
<div class="mr-24">已接通 <span class="color-000">200</span></div>
<div>未接通 <span class="color-000">200</span></div>
</div>
</div>
</div>
<div class="flex-row justify-content-between top-case-btn-right">
<span :class="rightActive == 1 ?'active':''" @click="rightActive = 1">沟通记录</span>
<span :class="rightActive == 2 ?'active':''" @click="rightActive = 2">案件文书</span>
<span :class="rightActive == 3 ?'active':''" @click="rightActive = 3">案件材料</span>
<span :class="rightActive == 4 ?'active':''" @click="rightActive = 4">备注</span>
<span :class="rightActive == 5 ?'active':''" @click="rightActive = 5">日志</span>
<div class="flex-row justify-content-between">
<el-button icon="el-icon-setting" circle></el-button>
<el-button icon="el-icon-switch-button" circle></el-button>
</div>
<!-- <div class="flex-row justify-content-between top-case-btn-left">-->
<!-- <el-button @click="handleBack">退出当前调解</el-button>-->
<!-- <el-button @click="getFrontCaseById">上一个</el-button>-->
<!-- <el-button @click="getNextCaseById">下一个</el-button>-->
<!-- <span class="ipphoneimg"> IP电话</span>-->
<!-- <span class="smsimg">发送短信</span>-->
<!-- <span class="videoimg" @click="VideoDialog={caseId:caseId}">视频预约</span>-->
<!-- <span class="case-send-btn">发起送达</span>-->
<!-- <span class="case-send-btn">发起签章</span>-->
<!-- <span class="case-send-btn">案件办结</span>-->
<!-- </div>-->
</div>
<!-- 中间数据 -->
<div class="layout-center-center-wrap flex-row justify-content-between">
@ -35,7 +69,7 @@
<span class="separation"></span>
<!-- <span class="left-img-info flex-column" :class="leftActive == 1 ?'active':''" @mouseenter="leftActive = 1">-->
<!-- <img src="../../../assets/image/mediate/m-info1.png"/>-->
<!-- <a>案件信息</a>-->
<!-- <a>基本信息</a>-->
<!-- </span>-->
<!-- <span class="left-img-info flex-column" :class="leftActive == 2 ?'active':''" @mouseenter="leftActive = 2">-->
<!-- <img src="../../../assets/image/mediate/m-info2.png"/>-->
@ -60,7 +94,7 @@
<span class="left-img-info flex-column" :class="leftActive == 1 ?'active':''" @click="leftActive = 1">
<img src="../../../assets/image/mediate/m-info1.png"/>
<a>案件信息</a>
<a>基本信息</a>
</span>
<span class="left-img-info flex-column" :class="leftActive == 2 ?'active':''" @click="leftActive = 2">
<img src="../../../assets/image/mediate/m-info2.png"/>
@ -505,7 +539,6 @@ export default {
{pattern: /^[1-9]\d*$/, message: '只能输入正整数', trigger: ['blur', 'change']}
],
},
};
},
computed: {
@ -537,7 +570,6 @@ export default {
async created() {
this.caseId = this.$route.query.caseId
await this.getCaseInfoById();//获取详情
},
beforeDestroy() {
// if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
@ -646,83 +678,42 @@ export default {
font-size: 14px;
.layout-center-top-wrap {
font-size: 14px;
padding: 10px;
padding: 8px 16px;
border-bottom: solid 1px #E5E6EB;
.ipphoneimg {
background: url('~@/assets/image/mediate/m-phone.png') no-repeat;
background-size: 24px;
background-position: 5px 5px;
width: 100px;
height: 35px;
padding: 7px 5px 5px 35px;
.top-wrap-title{
width: 223px;
height: 32px;
background: url('~@/assets/image/logo-tjs.png');
background-size: 100%,100%;
margin-top: 4px;
}
.smsimg {
background: url('~@/assets/image/mediate/m-sms.png') no-repeat;
background-size: 24px;
background-position: 5px 5px;
width: 110px;
height: 35px;
padding: 7px 5px 5px 35px;
}
.videoimg {
background: url('~@/assets/image/mediate/m-video.png') no-repeat;
background-size: 24px;
background-position: 5px 5px;
width: 110px;
height: 35px;
padding: 7px 5px 5px 35px;
}
.top-case-btn-left {
padding-top: 5px;
.el-button {
height: 35px;
padding: 10px 20px;
background-color: #F2F3F5;
.top-wrap-btn-left{
width: 55%;
min-width: 1034px;
.wrap-btn-left-dial{
background-color: #FFF2F0;
border-radius: 20px;
.ai-logo-img{
width: 29px;
height: 29px;
background: url('~@/assets/image/ai-logo.png') no-repeat;
background-size: 100%,100%;
}
}
span {
margin-left: 20px;
cursor: pointer;
.color-FF7D00{
color: #FF7D00;
}
.case-send-btn {
border: solid 1px #E5E6EB;
height: 35px;
padding: 7px 10px 0px 10px;
border-radius: 8px;
.color-165DFF{
color: #165DFF;
}
.color-F53F3F{
color: #F53F3F;
}
}
.top-case-btn-right {
background-color: #F2F3F5;
padding: 7px 20px;
border-radius: 8px;
span {
padding: 5px 30px;
border-radius: 8px;
margin: 0 3px;
font-weight: 500;
cursor: pointer;
}
.active {
background-color: #fff;
}
span:hover {
background-color: #fff;
}
}
}
.layout-center-center-wrap {
@ -931,6 +922,5 @@ export default {
}
}
</style>