diff --git a/src/assets/image/mediate/m-info-robot.png b/src/assets/image/mediate/m-info-robot.png
new file mode 100644
index 0000000..8251112
Binary files /dev/null and b/src/assets/image/mediate/m-info-robot.png differ
diff --git a/src/assets/image/mediate/m-info1.png b/src/assets/image/mediate/m-info1.png
new file mode 100644
index 0000000..065d718
Binary files /dev/null and b/src/assets/image/mediate/m-info1.png differ
diff --git a/src/assets/image/mediate/m-info2.png b/src/assets/image/mediate/m-info2.png
new file mode 100644
index 0000000..30d1876
Binary files /dev/null and b/src/assets/image/mediate/m-info2.png differ
diff --git a/src/assets/image/mediate/m-info3.png b/src/assets/image/mediate/m-info3.png
new file mode 100644
index 0000000..63012d3
Binary files /dev/null and b/src/assets/image/mediate/m-info3.png differ
diff --git a/src/assets/image/mediate/m-info4.png b/src/assets/image/mediate/m-info4.png
new file mode 100644
index 0000000..e867a7e
Binary files /dev/null and b/src/assets/image/mediate/m-info4.png differ
diff --git a/src/assets/image/mediate/m-info5.png b/src/assets/image/mediate/m-info5.png
new file mode 100644
index 0000000..dfdb068
Binary files /dev/null and b/src/assets/image/mediate/m-info5.png differ
diff --git a/src/assets/image/mediate/m-info6.png b/src/assets/image/mediate/m-info6.png
new file mode 100644
index 0000000..100a652
Binary files /dev/null and b/src/assets/image/mediate/m-info6.png differ
diff --git a/src/assets/image/mediate/m-info7.png b/src/assets/image/mediate/m-info7.png
new file mode 100644
index 0000000..9c68339
Binary files /dev/null and b/src/assets/image/mediate/m-info7.png differ
diff --git a/src/assets/image/mediate/m-left-bg.png b/src/assets/image/mediate/m-left-bg.png
new file mode 100644
index 0000000..19517c1
Binary files /dev/null and b/src/assets/image/mediate/m-left-bg.png differ
diff --git a/src/assets/image/mediate/m-phone.png b/src/assets/image/mediate/m-phone.png
new file mode 100644
index 0000000..f30883d
Binary files /dev/null and b/src/assets/image/mediate/m-phone.png differ
diff --git a/src/assets/image/mediate/m-right-bg.png b/src/assets/image/mediate/m-right-bg.png
new file mode 100644
index 0000000..b46025e
Binary files /dev/null and b/src/assets/image/mediate/m-right-bg.png differ
diff --git a/src/assets/image/mediate/m-sms.png b/src/assets/image/mediate/m-sms.png
new file mode 100644
index 0000000..4270fa8
Binary files /dev/null and b/src/assets/image/mediate/m-sms.png differ
diff --git a/src/assets/image/mediate/m-triangle.png b/src/assets/image/mediate/m-triangle.png
new file mode 100644
index 0000000..762cbe3
Binary files /dev/null and b/src/assets/image/mediate/m-triangle.png differ
diff --git a/src/assets/image/mediate/m-video.png b/src/assets/image/mediate/m-video.png
new file mode 100644
index 0000000..1f618b3
Binary files /dev/null and b/src/assets/image/mediate/m-video.png differ
diff --git a/src/components/showFile.vue b/src/components/showFile.vue
index 2f26923..064b599 100644
--- a/src/components/showFile.vue
+++ b/src/components/showFile.vue
@@ -8,8 +8,8 @@
                         <span><i class="el-icon-arrow-left f48 f-weight600 "></i></span>
                     </div>
                     <div class="show-file">
-                        <img :src="`/manage-center/minio/preview/${fileObj.url}`" />
-                        <!-- <iframe :src="`/manage-center/minio/preview/${fileObj.url}`" frameborder="0" width="100%" height="100%"></iframe> -->
+                        <img v-if="fileType == 'image'" :src="`/manage-center/minio/preview/${fileObj.url}`" />
+                        <iframe v-else :src="`/manage-center/minio/preview/${fileObj.url}`" frameborder="0" width="100%" height="100%"></iframe>
                     </div>
                     <div class="next-file text-center" @click="nextClick">
                         <span><i class="el-icon-arrow-right f48 f-weight600"></i></span>
@@ -40,6 +40,7 @@ import api from "@/services/caseManagement";
             return {
                 CurrentPosition:0,//当前位置
                 fileObj:{},
+                fileType:''
 
             };
         },
@@ -51,18 +52,25 @@ import api from "@/services/caseManagement";
                 }
             })
 
-            // if(this.$util.getFileType(text) === 'image') {
-            //             // 如果是图片，直接显示图片
-            //             obj.iconFrontSrc = obj.previewUrl
-            //         }
+            this.getShowFileType(this.fileObj.url)
+            
         },
         methods: {
+            getShowFileType(url){
+                console.log(this.$util.getFileType(url),'v')
+                if(this.$util.getFileType(url) === 'image') {
+                    // 如果是图片，直接显示图片
+                    this.fileType = 'image'
+                }
+            },
             previousClick(){
                 let nextCurrent = this.CurrentPosition-1;
                 if(this.fileDialog.filelist[nextCurrent]!=undefined)
                 {
                     this.fileObj = this.fileDialog.filelist[nextCurrent]
                     this.CurrentPosition = nextCurrent
+
+                    this.getShowFileType(this.fileObj.url)
                 }
                 else
                 {
@@ -76,6 +84,8 @@ import api from "@/services/caseManagement";
                 {
                     this.fileObj = this.fileDialog.filelist[nextCurrent]
                     this.CurrentPosition = nextCurrent
+
+                    this.getShowFileType(this.fileObj.url)
                 }
                 else
                 {
@@ -97,7 +107,12 @@ import api from "@/services/caseManagement";
     min-height: 500px;
     .previous-file{width: 50px;margin-right: 10px; background-color: #F7F8FA;line-height: 650px;}
     .next-file{width: 50px;margin-left: 10px; background-color: #F7F8FA;line-height: 650px;}
-    .show-file{width: calc(100% - 120px);height: 700px;}
+    .show-file{
+        width: calc(100% - 120px);height: 700px;
+        text-align: center;
+    line-height: 650px;
+        img{max-height: 100%; max-width: 100%;}
+    }
     
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/case-management/components/CaseTraceDialog.vue b/src/pages/case-management/components/CaseTraceDialog.vue
index c44eb24..4f70186 100644
--- a/src/pages/case-management/components/CaseTraceDialog.vue
+++ b/src/pages/case-management/components/CaseTraceDialog.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-dialog :visible="true" width="80%" append-to-body :close-on-click-modal="false" 
+        <el-dialog :visible="true" width="80%" class="dialog-case-record" append-to-body :close-on-click-modal="false" 
             @close="handleClose()">
             
             <div class="dialog-content dialog-case-trace">
@@ -130,19 +130,46 @@ import api from "@/services/caseManagement";
     };
 </script>
 <style scoped lang="scss">
+.dialog-case-record{
+    .el-dialog .el-dialog__header{background-color: #C66A5B;}
+    .el-dialog__header{background-color: #C66A5B;}
+}
 .dialog-case-trace{
     padding: 16px 20px;
     max-height:500px
 }
 .dialog-case-trace .zd-el-tabs-custom{
-    margin-top: -75px ;
+    margin-top: -61px ;
     margin-right: 25px;
 }
 .dialog-case-trace .zd-el-tabs-custom span{
-    font-size: 18px;
+    font-size: 16px;
 }
 .dialog-case-trace .case-trace-cont
 {
     min-height: 500px;
 }
 </style>
+<style  lang="scss">
+.dialog-case-record{
+    .el-dialog .el-dialog__header {
+        background-color: #C66A5B;
+        height: 43px !important;
+        line-height: 50px !important;
+    }
+    .el-tabs__item{color: #FFFFFFB2;}
+    .zd-el-tabs-custom .el-tabs__item.is-active {
+        color: #fff !important;
+    }
+    .zd-el-tabs-custom .el-tabs__active-bar{
+        background-color: #fff !important;
+    }
+    .el-tabs__nav-wrap::after {
+        background-color: #fff;
+    }
+    .el-dialog__headerbtn .el-dialog__close{
+        color: #fff !important;
+    }
+}
+
+</style>
diff --git a/src/pages/case-management/detail/index.vue b/src/pages/case-management/detail/index.vue
index c90e3f8..0fd48b0 100644
--- a/src/pages/case-management/detail/index.vue
+++ b/src/pages/case-management/detail/index.vue
@@ -19,7 +19,7 @@
                     <div class="case-detail-label f-weight500 f16">基本信息</div>
                     <div class="case-detail-des">
                         <span><a>案件包名称：</a><a>河北幸福消费金融股份有限公司012341</a></span>
-                        <span><a>委案机构：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
+                        <span><a>委案机构：</a><a>{{baseInfo.financialOrgName}}</a></span>
                         <span><a>委案开始日期：</a><a>{{baseInfo.planStartTime}}</a></span>
                         <span><a>委案到期日期：</a><a>{{baseInfo.planStartTime}}</a></span>
                         <span><a>债务人姓名：</a><a v-for="(item,index) in baseInfo.debtorEntityList" :key="index">{{index == 0 ?'':','}}{{item.name}}</a></span>
@@ -28,6 +28,8 @@
                         <span><a>委案渠道：</a><a></a></span>
                         <span><a>身份证号：</a><a> {{ debtorEntityCardNo(baseInfo.debtorEntityList,25).cardNo }} {{ baseInfo.debtorEntityList.length > 25 ? '...':'' }}</a></span>
                         <span><a>户籍地址：</a><a v-for="(item,index) in baseInfo.debtorEntityList" :key="index">{{index == 0 ?'':','}}{{item.name}}</a></span>
+                        <span><a>案件编号：</a><a>{{baseInfo.caseNo}}</a></span>
+                        
                     </div>
                     <div class="case-detail-label f-weight500 f16">债务信息</div>
                     <div class="case-detail-des">
diff --git a/src/pages/mediation-management/index.vue b/src/pages/mediation-management/index.vue
index 11aac4a..7319992 100644
--- a/src/pages/mediation-management/index.vue
+++ b/src/pages/mediation-management/index.vue
@@ -307,7 +307,7 @@
                                             <p class="color-000">{{ scope.row.mediatorName }}</p>
                                         </span>
                                         <span  style=" text-align: right;">
-                                            <el-button size="mini" class="case-btn" @click="jumpUrl(`/case-detail?dataKey=casepack&caseId=${scope.row.id}`)">立即调解</el-button>
+                                            <el-button size="mini" class="case-btn" @click="jumpUrl(`/mediation-page?sourcePage=sourcePage&caseId=${scope.row.id}`)">立即调解</el-button>
                                         </span>
                                     </div>
                                     <div class="flex-row justify-content-between case-bg">
diff --git a/src/pages/mediation-page-old/components/LayoutContent.vue b/src/pages/mediation-page-old/components/LayoutContent.vue
new file mode 100644
index 0000000..83f2bea
--- /dev/null
+++ b/src/pages/mediation-page-old/components/LayoutContent.vue
@@ -0,0 +1,695 @@
+<template>
+    <div>
+        <div class="layout-center-wrap">
+            <!-- 左边数据 -->
+            <div class="layout-center-left-wrap">
+                <div class="layout-center-left-top">
+                    <div class="top-bg">
+                        <div class="flex-row ">
+                            <img src="@/assets/image/mediate/add.png" alt="" class="add-img">
+                            <img src="@/assets/image/mediate/text.png" alt="" class="top-bg-text">
+                        </div>
+                        <div class="flex-row justify-content-center align-items-center m-v-8">
+                            <i class="el-icon-arrow-left cursor-pointer color-fff" @click="handleChangeImg('left')"></i>
+                            <!-- <div class="" style="margin:0 65px">
+                                <img src="@/assets/image/mediate/group-img-1.png" alt="" class="group-img">
+                                <img src="@/assets/image/mediate/group-text-1.png" alt="" class="group-text">
+                            </div> -->
+                            <div class="" style="margin:0 65px">
+                                <div v-for="(item,inx) in imgArr" :key="inx" v-show="item.id === currentIndex">
+                                    <img :src="item.imgUrl" alt="" class="group-img">
+                                    <img :src="item.imgText" alt="" class="group-text">
+                                </div>
+                                
+                            </div>
+                            <i class="el-icon-arrow-right cursor-pointer color-fff" @click="handleChangeImg('right')"></i>
+                        </div>
+                        <div class="text-center">
+                            <img src="@/assets/image/mediate/decript.png" alt="">
+                        </div>
+                    </div>
+                </div>
+                <el-scrollbar class="bor">
+                    <div :style="{'height': `${leftContentHeight}px`}">
+                        <div class="left-base-info p-24" >
+                            <div class="mb-16">
+                                <div class="f16 color-text-primary mb-8">{{baseInfo.financialOrgName || '-'}}</div>
+                                <div class="f14 color-text-secondary">{{baseInfo.financialOrgCode || '-'}}</div>
+                            </div>
+                            <div class="mb-16">
+                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/case-name.png" alt="" class="icon-small">案件名称</div>
+                                <div class="f14 color-text-primary">{{baseInfo.caseName ||'-'}}</div>
+                            </div>
+                            <div class="mb-16">
+                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/case-number.png" alt="" class="icon-small">案件编号</div>
+                                <div class="f14 color-text-primary">{{baseInfo.caseNo ||'-'}}</div>
+                            </div>
+                            <div class="mb-16">
+                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/finance.png" alt="" class="icon-small">金融产品类型</div>
+                                <div class="f14 color-text-primary">{{productType ||'-'}}</div>
+                            </div>
+                            <div class="mb-16">
+                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/finance.png" alt="" class="icon-small">逾期次数</div>
+                                <div class="f14 color-text-primary">{{baseInfo.overdueTimes}}</div>
+                            </div>
+                            <div class="mb-16">
+                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/finance.png" alt="" class="icon-small">标的金额</div>
+                                <div class="f14 color-text-primary">{{baseInfo.moneyAmount ||'-'}}</div>
+                            </div>
+                            <div class="mb-16">
+                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/start-time.png" alt="" class="icon-small">计划开始时间</div>
+                                <div class="f14 color-text-primary">{{baseInfo.planStartTime ||'-'}}</div>
+                            </div>
+                            <div class="mb-16">
+                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/end-time.png" alt="" class="icon-small">计划结束时间</div>
+                                <div class="f14 color-text-primary">{{baseInfo.planEndTime ||'-'}}</div>
+                            </div>
+                            <div class="mb-16">
+                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/schedule.png" alt="" class="icon-small">案件描述</div>
+                                <div class="f14 color-text-primary">{{baseInfo.caseDescr ||'-'}}</div>
+                            </div>
+                        </div>
+                    </div>
+            </el-scrollbar> 
+
+            </div>
+            
+            <div class="layout-center-right-wrap">
+                <!-- 中间 -->
+                <div class="layout-center-right-center">
+                    <el-tabs class="zd-el-tabs-custom zd-el-tabs-custom__left_padding" v-model="activeName" @tab-click="handleClick">
+                        <el-tab-pane label="当事人" name="caseParty">
+                            <el-scrollbar class="bor">
+                            <div class="p-h-16" :style="{'height': `${centerContentHeight}px`}">
+                                <div class="pt-24">
+                                    <div class="f14">债权人</div>
+                                    <div class="center-list">
+                                        <div class="center-list-left pink-color">
+                                            <el-avatar :size="77" :src="defaultHeadUrl" class="el-avatar"></el-avatar>
+                                            <div class="f18 color-text-primary mt-16">{{baseInfo.creditorName ||'-'}}</div>
+                                            <div class="f14 color-text-primary mt-8">债权人</div>
+                                        </div>
+                                        <div class="center-list-right">
+                                            <el-row :gutter="16" class="el-row mb-16">
+                                                <el-col :span="8">
+                                                    <div class="f14">
+                                                        <div class="color-text-regular">社会统一信用代码</div>
+                                                        <div class="color-text-primary mt-8">{{baseInfo.creditorOrgCode ||'-'}}</div>
+                                                    </div>
+                                                </el-col>
+                                                <el-col :span="8">
+                                                    <div class="f14">
+                                                        <div class="color-text-regular">法人姓名</div>
+                                                        <div class="color-text-primary mt-8">{{baseInfo.creditorLegal ||'-'}}</div>
+                                                    </div>
+                                                </el-col>
+                                                <el-col :span="8">
+                                                    <div class="f14">
+                                                        <div class="color-text-regular">法人手机号</div>
+                                                        <div class="color-text-primary mt-8">{{baseInfo.creditorPhone ||'-'}}</div>
+                                                    </div>
+                                                </el-col>
+                                            </el-row>
+                                            <el-row :gutter="16" class="el-row">
+                                                <el-col :span="8">
+                                                    <div class="f14">
+                                                        <div class="color-text-regular">法人身份证号</div>
+                                                        <div class="color-text-primary mt-8">{{baseInfo.creditorIdcard ||'-'}}</div>
+                                                    </div>
+                                                </el-col>
+                                                <el-col :span="8">
+                                                    <div class="f14">
+                                                        <div class="color-text-regular">公司地址</div>
+                                                        <div class="color-text-primary mt-8">{{baseInfo.creditorAddr ||'-'}}</div>
+                                                    </div>
+                                                </el-col>
+                                                <el-col :span="8">
+                                                    <div class="f14">
+                                                        <div class="color-text-regular">邮编</div>
+                                                        <div class="color-text-primary mt-8">{{baseInfo.creditorMail ||'-'}}</div>
+                                                    </div>
+                                                </el-col>
+                                            </el-row>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                                <div class="pt-24">
+                                    <div class="f14">债务人</div>
+                                    <div v-if="obligorInfo.length>0">
+                                        <div class="center-list" v-for="(item,inx) in obligorInfo" :key="inx">
+                                            <div class="center-list-left blue-color">
+                                                <el-avatar :size="77" :src="defaultHeadUrl" class="el-avatar"></el-avatar>
+                                                <div class="f18 color-text-primary mt-16">{{item.name ||'-'}}</div>
+                                                <div class="f14 color-text-primary mt-8">债务人</div>
+                                            </div>
+                                            <div class="center-list-right">
+                                                <el-row :gutter="16" class="el-row mb-16">
+                                                    <el-col :span="12">
+                                                        <div class="f14">
+                                                            <div class="color-text-regular">身份证号码</div>
+                                                            <div class="color-text-primary mt-8">{{item.cardNo ||'-'}}</div>
+                                                        </div>
+                                                    </el-col>
+                                                    <el-col :span="12">
+                                                        <div class="f14">
+                                                            <div class="color-text-regular">手机号码</div>
+                                                            <div class="color-text-primary mt-8">{{item.phone ||'-'}}</div>
+                                                        </div>
+                                                    </el-col>
+                                                </el-row>
+                                                <el-row :gutter="16" class="el-row">
+                                                    <el-col :span="12">
+                                                        <div class="f14">
+                                                            <div class="color-text-regular">公司地址</div>
+                                                            <div class="color-text-primary mt-8">{{item.addr ||'-'}}</div>
+                                                        </div>
+                                                    </el-col>
+                                                    <el-col :span="12">
+                                                        <div class="f14">
+                                                            <div class="color-text-regular">邮编</div>
+                                                            <div class="color-text-primary mt-8">{{item.mail ||'-'}}</div>
+                                                        </div>
+                                                    </el-col>
+                                                </el-row>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <el-empty description="暂无债务人数据" v-else></el-empty>
+
+                                </div>
+                            </div>
+                            </el-scrollbar>
+                        </el-tab-pane>
+                        <el-tab-pane label="证据材料" name="materialUpload">
+                            <el-scrollbar class="bor">
+                            <div :style="{'height': `${centerContentHeight}px`}" class="p-h-16 ">
+                                <div class="p-v-16" v-if="fileList.length>0">
+                                    <upload-file :file-list="fileList" :max-count="200"
+                                                :show-file-name="true"
+                                                uploadName="材料名称"
+                                                :readOnly="true"
+                                                @handleUploadFile="handleUploadFile">
+                                    </upload-file>
+                                </div>
+                                <el-empty description="暂无证据材料" v-else></el-empty>
+                            </div>
+                            </el-scrollbar>
+                        </el-tab-pane>
+                        <el-tab-pane label="调解记录" name="mediationRecord">
+                            <el-scrollbar class="bor">
+                            <div :style="{'height': `${centerContentHeight}px`}" class="p-h-16 ">
+                                <div v-if="mediationRecord.length>0" class="p-v-16">
+                                    <div class="bg-color-light border-radius-4 p-24 mb-16" v-for="(item,inx) in mediationRecord" :key="inx">
+                                        <div class="f16 color-text-primary">{{item.createAt}}</div>
+                                        <div class="m-v-16" v-if="item.type==1">
+                                            {{item.content}}
+                                        </div>
+                                        <div class="audio_wrap m-v-16" v-else>
+                                            <audio :src="item.content.url" controls="controls" class="audio"></audio>
+                                        </div>
+                                        
+                                        <!-- <div class="color-text-primary f14"><span class="color-text-regular">备注：</span>继任人</div> -->
+                                    </div>
+                                </div>
+                                <el-empty description="暂无调解记录" v-else></el-empty>
+                            </div>
+                            </el-scrollbar>
+                        </el-tab-pane>
+                    </el-tabs>
+
+                    <div class="layout-center-right-bottom">
+                        <div class="f18 color-000">调解笔记</div>
+                        <el-input type="textarea" v-model="mediateNote" placeholder="请在这里输入调解笔记..." @change="handleChangeTextarea" class="mediate-note">
+
+                        </el-input>
+                    </div>
+                </div>
+                <!-- 右边 -->
+                <div class="layout-center-right">
+                    <div class="layout-center-right-open " v-if="!isShow">
+                        <div class="f18 color-text-primary p-16">调解话术</div>
+                        <el-scrollbar class="bor">
+                            <div :style="{'height': `${rightContentHeight}px`}">
+                                <div v-html="speechContent" class="f14 color-text-regular p-h-16" v-if="speechContent">{{speechContent}}</div>
+                                <el-empty description="暂无话术内容" v-else></el-empty>
+                            </div>
+                        </el-scrollbar> 
+                    </div>
+                    <div class="layout-center-right-stow f16 color-text-regular" v-else>
+                        <div  class="layout-center-right-stow-text">
+                            展开调解话术
+                        </div>
+                    </div>
+                    <div class="left-icon-wrap" @click="handleToggleShow" :class="isShow?'right-40':'right-350'">
+                        <!-- <i :class="['f18 el-icon-arrow-right transform-time-default', {
+                                'rotate--180': isShow
+                            }]"></i> -->
+                        <img src="@/assets/image/mediate/left.png"   alt="" v-if="isShow">
+                        <img src="@/assets/image/mediate/right.png"   alt="" v-else>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 底部 -->
+        <div class="layout-bottom">
+            <div>
+                <el-button @click="handleDownloadMediationTemplate">下载调解模板</el-button>
+                <el-button type="danger" @click="updateCaseLog(0)">调解失败</el-button>
+                <el-button type="success" @click="updateCaseLog(1)">调解成功</el-button>
+                <el-button type="primary" @click="updateCaseLog(2)">暂存</el-button>
+            </div>
+            <div>
+                <el-button @click="getFrontCaseById">上一个案件</el-button>
+                <el-button @click="getNextCaseById">下一个案件</el-button>
+                <el-button @click="handleBack">退出当前调解</el-button>
+            </div>
+
+        </div>
+    </div>
+
+</template>
+<script>
+import api from "@/services/caseManagement";
+    export default {
+        components: {
+            uploadFile: () => import('@/components/uploadFile.vue'),//上传
+        },
+        data() {
+            return {
+                currentIndex:0,
+                imgArr:[
+                    {id:0,imgUrl:require('@/assets/image/mediate/group-img-1.png'),imgText:require('@/assets/image/mediate/group-text-1.png')},
+                    {id:1,imgUrl:require('@/assets/image/mediate/group-img-2.png'),imgText:require('@/assets/image/mediate/group-text-2.png')},
+                    {id:2,imgUrl:require('@/assets/image/mediate/group-img-3.png'),imgText:require('@/assets/image/mediate/group-text-3.png')},
+                    {id:3,imgUrl:require('@/assets/image/mediate/group-img-4.png'),imgText:require('@/assets/image/mediate/group-text-4.png')},
+                ],
+                timer:null,
+                activeName:'caseParty',
+                isShow:true,
+                defaultHeadUrl:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',//默认图片
+                fileList:[],
+                mediateNote:'',//调解笔记
+                mediationRecord:[],//调解记录
+                baseInfo:{},//基本信息
+                obligorInfo:[],//债务人信息
+                caseId:'',//案件id
+                speechId:'',//话术模板id
+                speechContent:'',//话术内容
+                templateUrl:'',//调解模板url
+                financialProductsTypeOptions:[],//金融产品类型
+                productType:'',
+            };
+        },
+        computed:{
+            // 左侧
+            leftContentHeight(){
+                let oh = document.documentElement.clientHeight;
+                return oh-56-65-184-12
+            },
+
+            // 中间的内容高度
+            centerContentHeight(){
+                let oh = document.documentElement.clientHeight;
+                return oh-56-112-65-48
+            },
+            // 获取右侧滚动高度
+            rightContentHeight(){
+                let oh = document.documentElement.clientHeight;
+                return oh-56-56-65-20
+            },
+            
+        },
+        async created() {
+            await this.getDict()
+            this.startInterval()
+            this.caseId = this.$route.query.caseId
+            await this.getCaseInfoById();//获取详情
+            console.log('this.getDict()===',this.getDict())
+        },
+        beforeDestroy() {
+            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
+                clearInterval(this.timer); //关闭
+            }
+        },
+        methods: {
+            // 获取金融产品类型
+            getDict(){
+                let data = {
+                    type:'financial'
+                }
+                return api.getDict(data).then(res => {
+                    if (!res.code) {
+                        this.financialProductsTypeOptions = res;
+                    }
+                })
+            },
+            // 定时器
+            startInterval(){
+                clearInterval(this.timer);
+                this.timer = setInterval(()=>{
+                    this.currentIndex++
+                    if(this.currentIndex>this.imgArr.length-1){
+                        this.currentIndex=0
+                    }
+                },3000)
+            },
+            handleChangeImg(val){
+                if(val=='right'){
+                    this.currentIndex++
+                    if(this.currentIndex == this.imgArr.length){
+                        this.currentIndex =0
+                    }
+                }else{
+                    if(this.currentIndex == 0){
+                        this.currentIndex = this.imgArr.length
+                    }
+                    this.currentIndex--
+                }
+            },
+            handleChangeTextarea(){
+                // console.log('内容',this.mediateNote)
+                // sessionStorage.setItem('mediateNote', this.mediateNote)
+            },
+            handleClick(tab, event) {
+                
+            },
+            handleToggleShow(){
+                this.isShow = !this.isShow
+            },
+            // 获取详情
+            getCaseInfoById(){ 
+                const _that = this
+                return api.getCaseInfoById(_that.caseId).then(res => {
+                    if(!res.code){
+                        _that.detailData(res)
+                    }
+                    
+                })
+            },
+            // 详情展示内容
+            detailData(res){
+                // 证据材料
+                let caseFileEntityList = []
+                res.caseFileEntityList.forEach((item)=>{
+                    caseFileEntityList.push({name:item.name,fileName:item.name,url:item.url})
+                })
+                this.fileList = caseFileEntityList
+                // 调解记录
+                this.mediationRecord = res.logEntityList
+                // 基本信息
+                this.baseInfo = res
+                // 债务人
+                this.obligorInfo = res.debtorEntityList
+
+                // 获取话术模板id
+                this.speechId = res.tpSpeechcraftId
+                if(this.speechId){
+                    this.getTemplateById()
+                }
+                
+                // 获取调解模板url
+                if(res.caseAgreement){
+                    this.templateUrl = res.caseAgreement.url
+                }
+
+                this.caseId = res.id
+                // 获取金融产品类型
+                console.log('financialProductsTypeOptions',this.financialProductsTypeOptions)
+                let obj = this.financialProductsTypeOptions.find((item)=>{
+                    return item.code == res.productTypeId
+                })
+                this.productType = obj.codeName||'-'//获取金融产品名称
+                console.log('this.productType====',this.productType)
+            },
+            handleUploadFile(fileList){
+                console.log('fileList===',fileList)
+                fileList = JSON.parse(JSON.stringify(fileList))
+                
+                this.fileList = fileList.map((item,i) => {
+                    return {
+                        url: item.url,
+                        fileName:item.name,
+                        name:item.name
+                    }
+                })
+            },
+            // 获取话术内容
+            getTemplateById(){
+                let data={
+                    id:this.speechId
+                }
+                api.getTemplateById(data).then(res => {
+                    if (!res.code) {
+                        this.speechContent = res.content;
+                    }
+                })
+            },
+
+
+            //-------------------------------------------------------------底部按钮接口-------------------------------------------------
+            // // 调解成功或者失败
+            // handleChangeMediation(resultStatus){
+            //     if(!this.$clickThrottle()) { return }//防止重复点击 
+            //     let data={
+            //         id:this.caseId,
+            //         resultStatus:resultStatus
+            //     }
+            //     api.updateResultStatus(data).then(res => {
+
+            //         if(resultStatus==1){
+            //             this.$message({message: '调解成功', type: "success",customClass:'messageZindex'})
+            //         }else{
+            //              this.$message({message: '调解失败', type: "error",customClass:'messageZindex'})
+            //         }
+
+            //     })
+            // },
+            // 暂存2 调解成功1 失败0
+            updateCaseLog(status){
+                if(!this.$clickThrottle()) { return }//防止重复点击 
+                let data = {
+                    caseId:this.caseId,
+                    content:this.mediateNote,
+                    status:status
+                }
+                if(this.mediateNote){
+                    api.updateCaseLog(data).then(res => {
+                        
+                        if(status==0){
+                            this.$message({message: '调解失败', type: "success",customClass:'messageZindex'})
+                        }else if(status==1){
+                            this.$message({message: '调解成功', type: "success",customClass:'messageZindex'})
+                        }else{
+                            this.$message({message: '暂存成功', type: "success",customClass:'messageZindex'})
+                        }
+                        this.mediateNote = ''
+                        this.getCaseInfoById()
+                    })
+                }else{
+                    this.$message({message: '请先输入调解笔记内容', type: "warning",customClass:'messageZindex'})
+                }
+                
+            },
+
+
+            // 获取上一件案件
+            getFrontCaseById(){
+                if(!this.$clickThrottle()) { return }//防止重复点击 
+                api.getFrontCaseById({id:this.caseId}).then(res => {
+                     if(!res.code){
+                        // let caseChangeData = res
+                        this.detailData(res)
+                     }
+                })
+            },
+            // 获取下一件案件
+            getNextCaseById(){
+                if(!this.$clickThrottle()) { return }//防止重复点击 
+                api.getNextCaseById({id:this.caseId}).then(res => {
+                     if(!res.code){
+                        this.detailData(res)
+                     }
+                })
+            },
+            // 下载调解模板
+            handleDownloadMediationTemplate(){
+                if(!this.$clickThrottle()) { return }//防止重复点击 
+                // console.log('调解模板url',templateUrl)
+                if(this.templateUrl){
+                    this.handlePreview({previewUrl:"/manage-center/minio/preview/"+this.templateUrl,url:this.templateUrl})
+                }else{
+                    this.$message({message: '当前案件未存在调解模板', type: "warning",customClass:'messageZindex'})
+                }
+                
+            },
+            async handlePreview(item) {
+                try {
+                    let res = await this.$fetchApi.getMinioToken({objectName: item.url})
+                    window.open(`${item.previewUrl}?token=${res}`, '_target')
+                }catch (e) {
+                    this.$message.error(e.msg || e)
+                }
+            },
+            handleBack(){
+                // console.log('页面来源',this.$route.query.sourcePage)
+                if(this.$route.query.sourcePage == 'mediationManagement'){
+                    this.$router.push('/mediation-management')
+                }else{
+                     this.$router.push('/workbench')
+                }
+                
+            },
+            
+           
+
+
+
+
+
+
+        }
+    };
+</script>
+<style lang="scss" scoped>
+.layout-center-wrap{
+    display: flex;
+    height: calc(100% - 65px);
+}
+// 左侧
+.layout-center-left-wrap{
+    width: 320px;
+    height: 100%;
+    margin-top: 12px;
+}
+.layout-center-left-top{
+    height: 184px;
+    .top-bg{
+        width: 320px;
+        height: 100%;
+        background: url('~@//assets/image/mediate/bg.png') no-repeat ;
+        padding: 12px 16px;
+        .top-bg-text{
+            height: 16px;
+            vertical-align: middle;     
+        }
+    }
+    
+}
+.add-img{
+    width: 20px;
+    height: 20px;
+    vertical-align: middle;
+    margin-right: 3px;
+}
+.group-img{
+    position: relative;
+}
+.group-text{
+    position: absolute;
+    top:80px;
+    left:180px;
+}
+.left-base-info{
+    height: calc(100%);
+    border-right: 1px solid #E4E7ED;
+}
+.icon-small{
+    margin-right: 4px;
+    vertical-align: middle;
+}
+
+// 底部
+.layout-bottom{
+    display: flex;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-top: 1px solid #E4E7ED;
+}
+
+// 中间
+.layout-center-right-wrap{
+    width: 100%;
+    display: flex;
+}
+.layout-center-right-center{
+    flex:1;
+}
+.center-list{
+    display: flex;
+    height: 204px;
+    border: 1px solid #E4E7ED;
+    border-radius: 5px;
+    margin-top: 12px;
+    .center-list-left {
+        width: 180px;
+        height: 100%;
+        text-align: center;
+        padding: 24px 0 33px 0;
+    }
+    .center-list-right{
+        height: 100%;
+        padding: 24px 16px;
+        flex:1;
+    }
+}
+.pink-color{
+    // background:linear-gradient(101.33deg, #9170FF 0.46%, #604DFA 100%);
+    // opacity: 0.1;
+    background-color: rgba(#604DFA, 0.1);
+    
+}
+.blue-color{
+    // background: linear-gradient(101.33deg, #3CA0FA 0.46%, #2F6AF5 100%);
+    background-color: rgba(#2F6AF5, 0.1);;
+    // opacity: 0.2;
+}
+.el-row{
+    height: 70px;
+}
+
+.layout-center-right-bottom{
+    height: 112px;
+    padding: 16px 24px;
+    border-top: 1px solid #E4E7ED;
+}
+
+
+// 最右侧
+.layout-center-right{
+    border-left: 1px solid #E4E7ED;
+    height: calc(100%);
+    .layout-center-right-open{
+        width: 350px;
+    }
+    .layout-center-right-stow{
+        width: 40px;
+        .layout-center-right-stow-text{
+            height: 400px;
+            text-align: center;
+            margin: auto;
+            writing-mode: vertical-lr;
+             letter-spacing: 8px;
+        }
+    }
+    .left-icon-wrap{
+        position: absolute;
+        top: 250px;
+        width: 24px;
+        height: 24px;
+        background-color: #E4E7ED;
+        border-radius: 4px;
+        cursor: pointer;
+    }
+    .right-40{
+        right: 40px;
+    }
+    .right-350{
+        right: 350px;
+    }
+    
+}
+
+</style>
diff --git a/src/pages/mediation-page-old/index.vue b/src/pages/mediation-page-old/index.vue
new file mode 100644
index 0000000..a9e9801
--- /dev/null
+++ b/src/pages/mediation-page-old/index.vue
@@ -0,0 +1,28 @@
+<template>
+    <div class="layout-wrap">
+        <LayoutHeader />
+        <LayoutContent />
+    </div>
+</template>
+<script>
+    export default {
+        components: {
+            LayoutHeader: () => import('@/pages/layout/components/LayoutHeader'),
+            LayoutContent: () => import('./components/LayoutContent.vue'),
+        },
+        data() {
+            return {
+              
+            };
+        },
+        async created() {
+       
+        },
+        methods: {
+           
+        }
+    };
+</script>
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/pages/mediation-page/components/LayoutContent.vue b/src/pages/mediation-page/components/LayoutContent.vue
index 83f2bea..5a15718 100644
--- a/src/pages/mediation-page/components/LayoutContent.vue
+++ b/src/pages/mediation-page/components/LayoutContent.vue
@@ -1,273 +1,188 @@
 <template>
-    <div>
-        <div class="layout-center-wrap">
-            <!-- 左边数据 -->
-            <div class="layout-center-left-wrap">
-                <div class="layout-center-left-top">
-                    <div class="top-bg">
-                        <div class="flex-row ">
-                            <img src="@/assets/image/mediate/add.png" alt="" class="add-img">
-                            <img src="@/assets/image/mediate/text.png" alt="" class="top-bg-text">
-                        </div>
-                        <div class="flex-row justify-content-center align-items-center m-v-8">
-                            <i class="el-icon-arrow-left cursor-pointer color-fff" @click="handleChangeImg('left')"></i>
-                            <!-- <div class="" style="margin:0 65px">
-                                <img src="@/assets/image/mediate/group-img-1.png" alt="" class="group-img">
-                                <img src="@/assets/image/mediate/group-text-1.png" alt="" class="group-text">
-                            </div> -->
-                            <div class="" style="margin:0 65px">
-                                <div v-for="(item,inx) in imgArr" :key="inx" v-show="item.id === currentIndex">
-                                    <img :src="item.imgUrl" alt="" class="group-img">
-                                    <img :src="item.imgText" alt="" class="group-text">
-                                </div>
+    <div style=" height: 100%;">
+        <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">视频预约</span>
+
+                    <span class="case-send-btn">发起送达</span>
+                    <span class="case-send-btn">发起签章</span>
+                    <span class="case-send-btn">案件办结</span>
+
+                </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>
+            </div>
+            <!-- 中间数据 -->
+            <div class="layout-center-center-wrap flex-row justify-content-between">
+                <!-- 左边数据 -->
+                <div class="layout-center-left-wrap flex-row justify-content-between">
+                    <div class="layout-center-left1-wrap flex-column justify-content-start">
+                        <span class="left-rbobot">
+                            <img src="../../../assets/image/mediate/m-info-robot.png" />
+                        </span>
+                        <span class="separation"></span>
+                        <span class="left-img-info flex-column active">
+                            <img src="../../../assets/image/mediate/m-info1.png" />
+                            <a>案件信息</a>
+                        </span>
+                        <span class="left-img-info flex-column">
+                            <img src="../../../assets/image/mediate/m-info2.png" />
+                            <a>联系人</a>
+                        </span>
+                        <span class="left-img-info flex-column">
+                            <img src="../../../assets/image/mediate/m-info3.png" />
+                            <a>案件材料</a>
+                        </span>
+                        <span class="left-img-info flex-column">
+                            <img src="../../../assets/image/mediate/m-info4.png" />
+                            <a>还款方案</a>
+                        </span>
+                        <span class="left-img-info flex-column">
+                            <img src="../../../assets/image/mediate/m-info5.png" />
+                            <a>还款计划</a>
+                        </span>
+                        <span class="left-img-info flex-column">
+                            <img src="../../../assets/image/mediate/m-info6.png" />
+                            <a>还款凭证</a>
+                        </span>
+                    </div>
+                    <div class="layout-center-left2-wrap">
+                        <!-- 债务信息 -->
+                        <div class="case-debt-info">
+                            <!-- <div>债务信息</div> -->
+                            <div class="case-detail-label f-weight500 f18 mb-8">基本信息</div>
+                            <div class="case-detail-des flex-column">
+                                <span><a>案件包名称：</a><a>河北幸福消费金融股份有限公司012341</a></span>
+                                <span><a>委案机构：</a><a>{{baseInfo.financialOrgName}}</a></span>
+                                <span><a>委案开始日期：</a><a>{{baseInfo.planStartTime}}</a></span>
+                                <span><a>委案到期日期：</a><a>{{baseInfo.planStartTime}}</a></span>
+                                <span><a>债务人姓名：</a><a v-for="(item,index) in baseInfo.debtorEntityList" :key="index">{{index == 0 ?'':','}}{{item.name}}</a></span>
+                                <span><a>债务人手机号码：</a><a>{{ debtorEntityCardNo(baseInfo.debtorEntityList,25).phone }} {{ baseInfo.debtorEntityList.length > 25 ? '...':'' }}</a></span>
+                                <span><a>委案期限：</a><a></a></span>
+                                <span><a>委案渠道：</a><a></a></span>
+                                <span><a>身份证号：</a><a> {{ debtorEntityCardNo(baseInfo.debtorEntityList,25).cardNo }} {{ baseInfo.debtorEntityList.length > 25 ? '...':'' }}</a></span>
+                                <span><a>户籍地址：</a><a v-for="(item,index) in baseInfo.debtorEntityList" :key="index">{{index == 0 ?'':','}}{{item.name}}</a></span>
+                                <span><a>案件编号：</a><a>{{baseInfo.caseNo}}</a></span>
                                 
                             </div>
-                            <i class="el-icon-arrow-right cursor-pointer color-fff" @click="handleChangeImg('right')"></i>
-                        </div>
-                        <div class="text-center">
-                            <img src="@/assets/image/mediate/decript.png" alt="">
-                        </div>
-                    </div>
-                </div>
-                <el-scrollbar class="bor">
-                    <div :style="{'height': `${leftContentHeight}px`}">
-                        <div class="left-base-info p-24" >
-                            <div class="mb-16">
-                                <div class="f16 color-text-primary mb-8">{{baseInfo.financialOrgName || '-'}}</div>
-                                <div class="f14 color-text-secondary">{{baseInfo.financialOrgCode || '-'}}</div>
-                            </div>
-                            <div class="mb-16">
-                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/case-name.png" alt="" class="icon-small">案件名称</div>
-                                <div class="f14 color-text-primary">{{baseInfo.caseName ||'-'}}</div>
-                            </div>
-                            <div class="mb-16">
-                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/case-number.png" alt="" class="icon-small">案件编号</div>
-                                <div class="f14 color-text-primary">{{baseInfo.caseNo ||'-'}}</div>
-                            </div>
-                            <div class="mb-16">
-                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/finance.png" alt="" class="icon-small">金融产品类型</div>
-                                <div class="f14 color-text-primary">{{productType ||'-'}}</div>
-                            </div>
-                            <div class="mb-16">
-                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/finance.png" alt="" class="icon-small">逾期次数</div>
-                                <div class="f14 color-text-primary">{{baseInfo.overdueTimes}}</div>
-                            </div>
-                            <div class="mb-16">
-                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/finance.png" alt="" class="icon-small">标的金额</div>
-                                <div class="f14 color-text-primary">{{baseInfo.moneyAmount ||'-'}}</div>
-                            </div>
-                            <div class="mb-16">
-                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/start-time.png" alt="" class="icon-small">计划开始时间</div>
-                                <div class="f14 color-text-primary">{{baseInfo.planStartTime ||'-'}}</div>
-                            </div>
-                            <div class="mb-16">
-                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/end-time.png" alt="" class="icon-small">计划结束时间</div>
-                                <div class="f14 color-text-primary">{{baseInfo.planEndTime ||'-'}}</div>
-                            </div>
-                            <div class="mb-16">
-                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/schedule.png" alt="" class="icon-small">案件描述</div>
-                                <div class="f14 color-text-primary">{{baseInfo.caseDescr ||'-'}}</div>
+                            <div class="case-detail-label f-weight500 f18 mb-8 mt-8">债务信息</div>
+                            <div class="case-detail-des flex-column">
+                                <!-- <span><a>委托机构：</a><a>{{baseInfo.financialOrgName}}</a></span> -->
+                                <span><a>合同编号：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
+                                <span><a>业务流水号：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
+                                <span><a>金融产品名称：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
+                                <span><a>金融机构名称：</a><a>{{baseInfo.financialOrgName}}</a></span>
+                                <span><a>合同名称：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
+                                <span><a>委托时逾期天数：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
+                                <span><a>借款合同签署时间：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
+                                <span><a>贷款笔数：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
+                                <span><a>当前逾期金额：</a><a>{{baseInfo.moneyAmount}}</a></span>
+                                <span><a>最低还款额(减免底线)：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
+                                <span><a>账龄：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
+                                <span><a>放款金额/借款本金：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
+                                <span><a>欠款本金：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
+                                <span><a>总分期数：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
+                                <span><a>逾期期数：</a><a>{{baseInfo.overdueTimes}}</a></span>
+                                <span><a>未结清期数：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
+                                <span><a>逾期开始时间：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
+                                <span><a>还款日：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
+                                <span><a>备注：</a><a>{{baseInfo.caseDescr}}</a></span>
                             </div>
                         </div>
-                    </div>
-            </el-scrollbar> 
-
-            </div>
-            
-            <div class="layout-center-right-wrap">
-                <!-- 中间 -->
-                <div class="layout-center-right-center">
-                    <el-tabs class="zd-el-tabs-custom zd-el-tabs-custom__left_padding" v-model="activeName" @tab-click="handleClick">
-                        <el-tab-pane label="当事人" name="caseParty">
-                            <el-scrollbar class="bor">
-                            <div class="p-h-16" :style="{'height': `${centerContentHeight}px`}">
-                                <div class="pt-24">
-                                    <div class="f14">债权人</div>
-                                    <div class="center-list">
-                                        <div class="center-list-left pink-color">
-                                            <el-avatar :size="77" :src="defaultHeadUrl" class="el-avatar"></el-avatar>
-                                            <div class="f18 color-text-primary mt-16">{{baseInfo.creditorName ||'-'}}</div>
-                                            <div class="f14 color-text-primary mt-8">债权人</div>
-                                        </div>
-                                        <div class="center-list-right">
-                                            <el-row :gutter="16" class="el-row mb-16">
-                                                <el-col :span="8">
-                                                    <div class="f14">
-                                                        <div class="color-text-regular">社会统一信用代码</div>
-                                                        <div class="color-text-primary mt-8">{{baseInfo.creditorOrgCode ||'-'}}</div>
-                                                    </div>
-                                                </el-col>
-                                                <el-col :span="8">
-                                                    <div class="f14">
-                                                        <div class="color-text-regular">法人姓名</div>
-                                                        <div class="color-text-primary mt-8">{{baseInfo.creditorLegal ||'-'}}</div>
-                                                    </div>
-                                                </el-col>
-                                                <el-col :span="8">
-                                                    <div class="f14">
-                                                        <div class="color-text-regular">法人手机号</div>
-                                                        <div class="color-text-primary mt-8">{{baseInfo.creditorPhone ||'-'}}</div>
-                                                    </div>
-                                                </el-col>
-                                            </el-row>
-                                            <el-row :gutter="16" class="el-row">
-                                                <el-col :span="8">
-                                                    <div class="f14">
-                                                        <div class="color-text-regular">法人身份证号</div>
-                                                        <div class="color-text-primary mt-8">{{baseInfo.creditorIdcard ||'-'}}</div>
-                                                    </div>
-                                                </el-col>
-                                                <el-col :span="8">
-                                                    <div class="f14">
-                                                        <div class="color-text-regular">公司地址</div>
-                                                        <div class="color-text-primary mt-8">{{baseInfo.creditorAddr ||'-'}}</div>
-                                                    </div>
-                                                </el-col>
-                                                <el-col :span="8">
-                                                    <div class="f14">
-                                                        <div class="color-text-regular">邮编</div>
-                                                        <div class="color-text-primary mt-8">{{baseInfo.creditorMail ||'-'}}</div>
-                                                    </div>
-                                                </el-col>
-                                            </el-row>
-                                        </div>
-                                    </div>
-                                </div>
-
-
-                                <div class="pt-24">
-                                    <div class="f14">债务人</div>
-                                    <div v-if="obligorInfo.length>0">
-                                        <div class="center-list" v-for="(item,inx) in obligorInfo" :key="inx">
-                                            <div class="center-list-left blue-color">
-                                                <el-avatar :size="77" :src="defaultHeadUrl" class="el-avatar"></el-avatar>
-                                                <div class="f18 color-text-primary mt-16">{{item.name ||'-'}}</div>
-                                                <div class="f14 color-text-primary mt-8">债务人</div>
-                                            </div>
-                                            <div class="center-list-right">
-                                                <el-row :gutter="16" class="el-row mb-16">
-                                                    <el-col :span="12">
-                                                        <div class="f14">
-                                                            <div class="color-text-regular">身份证号码</div>
-                                                            <div class="color-text-primary mt-8">{{item.cardNo ||'-'}}</div>
-                                                        </div>
-                                                    </el-col>
-                                                    <el-col :span="12">
-                                                        <div class="f14">
-                                                            <div class="color-text-regular">手机号码</div>
-                                                            <div class="color-text-primary mt-8">{{item.phone ||'-'}}</div>
-                                                        </div>
-                                                    </el-col>
-                                                </el-row>
-                                                <el-row :gutter="16" class="el-row">
-                                                    <el-col :span="12">
-                                                        <div class="f14">
-                                                            <div class="color-text-regular">公司地址</div>
-                                                            <div class="color-text-primary mt-8">{{item.addr ||'-'}}</div>
-                                                        </div>
-                                                    </el-col>
-                                                    <el-col :span="12">
-                                                        <div class="f14">
-                                                            <div class="color-text-regular">邮编</div>
-                                                            <div class="color-text-primary mt-8">{{item.mail ||'-'}}</div>
-                                                        </div>
-                                                    </el-col>
-                                                </el-row>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <el-empty description="暂无债务人数据" v-else></el-empty>
-
-                                </div>
-                            </div>
-                            </el-scrollbar>
-                        </el-tab-pane>
-                        <el-tab-pane label="证据材料" name="materialUpload">
-                            <el-scrollbar class="bor">
-                            <div :style="{'height': `${centerContentHeight}px`}" class="p-h-16 ">
-                                <div class="p-v-16" v-if="fileList.length>0">
-                                    <upload-file :file-list="fileList" :max-count="200"
-                                                :show-file-name="true"
-                                                uploadName="材料名称"
-                                                :readOnly="true"
-                                                @handleUploadFile="handleUploadFile">
-                                    </upload-file>
-                                </div>
-                                <el-empty description="暂无证据材料" v-else></el-empty>
-                            </div>
-                            </el-scrollbar>
-                        </el-tab-pane>
-                        <el-tab-pane label="调解记录" name="mediationRecord">
-                            <el-scrollbar class="bor">
-                            <div :style="{'height': `${centerContentHeight}px`}" class="p-h-16 ">
-                                <div v-if="mediationRecord.length>0" class="p-v-16">
-                                    <div class="bg-color-light border-radius-4 p-24 mb-16" v-for="(item,inx) in mediationRecord" :key="inx">
-                                        <div class="f16 color-text-primary">{{item.createAt}}</div>
-                                        <div class="m-v-16" v-if="item.type==1">
-                                            {{item.content}}
-                                        </div>
-                                        <div class="audio_wrap m-v-16" v-else>
-                                            <audio :src="item.content.url" controls="controls" class="audio"></audio>
-                                        </div>
-                                        
-                                        <!-- <div class="color-text-primary f14"><span class="color-text-regular">备注：</span>继任人</div> -->
-                                    </div>
-                                </div>
-                                <el-empty description="暂无调解记录" v-else></el-empty>
-                            </div>
-                            </el-scrollbar>
-                        </el-tab-pane>
-                    </el-tabs>
-
-                    <div class="layout-center-right-bottom">
-                        <div class="f18 color-000">调解笔记</div>
-                        <el-input type="textarea" v-model="mediateNote" placeholder="请在这里输入调解笔记..." @change="handleChangeTextarea" class="mediate-note">
-
-                        </el-input>
+                        
                     </div>
                 </div>
                 <!-- 右边 -->
-                <div class="layout-center-right">
-                    <div class="layout-center-right-open " v-if="!isShow">
-                        <div class="f18 color-text-primary p-16">调解话术</div>
-                        <el-scrollbar class="bor">
-                            <div :style="{'height': `${rightContentHeight}px`}">
-                                <div v-html="speechContent" class="f14 color-text-regular p-h-16" v-if="speechContent">{{speechContent}}</div>
-                                <el-empty description="暂无话术内容" v-else></el-empty>
+                <div class="layout-center-right-wrap">
+                    <!-- 沟通记录 -->
+                    <div v-if="rightActive == 1" class="case-communication-record flex-column">
+                        <div class="flex-row justify-content-between">
+                            <span class="btn-communication background-color-fff f-weight500"><i class="el-icon-plus"></i>新增沟通记录</span>
+                            <div>
+                                <span class="btn-communication"><i class="el-icon-refresh"></i>刷新</span>
+                                <span class="btn-communication">已视频1</span>
+                                <span class="btn-communication">电话沟通2</span>
+                            </div>
+                        </div>
+                        <div class="flex-column case-communication-cont background-color-fff">
+                            <div class="flex-row justify-content-between">
+                                <div>
+                                    <span class="f16 f-weight500">张三 发起电话沟通</span> <span>2023-09-09 12:12:12</span>
+                                </div>
+                                <span  class="btn-communication border-E5E6EB"><i class="el-icon-edit-outline"></i> 编辑沟通记录</span>
+                            </div>
+                            <div class="case-lable">
+                                <a class="case-status0">半失联客户</a><a class="case-status0">半失联客户</a>
+                            </div>
+                            <div class="flex-row justify-content-between mt-16 background-color-F5F5F5 p-16 f16">
+                                <div>
+                                    <span>被申请人</span>
+                                    <span class="ml-8">李四</span>
+                                    <span class="ml-8">1388888888888</span>
+                                </div>
+                                <div>
+                                    <span>通话44秒</span>
+                                    <span class="ml-32 cursor-pointer"><i class="el-icon-video-play"></i> 播放录音</span>
+                                </div>
+                            </div>
+                            <div class="flex-row pt-16">
+                                <span>沟通备注：</span>
+                                <span>李四</span>
                             </div>
-                        </el-scrollbar> 
-                    </div>
-                    <div class="layout-center-right-stow f16 color-text-regular" v-else>
-                        <div  class="layout-center-right-stow-text">
-                            展开调解话术
                         </div>
                     </div>
-                    <div class="left-icon-wrap" @click="handleToggleShow" :class="isShow?'right-40':'right-350'">
-                        <!-- <i :class="['f18 el-icon-arrow-right transform-time-default', {
-                                'rotate--180': isShow
-                            }]"></i> -->
-                        <img src="@/assets/image/mediate/left.png"   alt="" v-if="isShow">
-                        <img src="@/assets/image/mediate/right.png"   alt="" v-else>
+                    <!-- 案件文书 -->
+                    <div v-if="rightActive == 2" class="case-office-record">
+                        <div class="flex-row justify-content-between background-color-fff p-16 border-radius-8">
+                            <span class="width120px f-weight500">文书类型</span>
+                            <span class="width200px f-weight500">文书</span>
+                            <span class="width120px f-weight500">是否签章</span>
+                            <span class="width120px f-weight500">是否完成签字</span>
+                            <span class="width200px f-weight500">签字人</span>
+                            <span class="width180px f-weight500">操作</span>
+                        </div>
+                        <el-scrollbar :style="'height:'+`${OfficecontentHeight}`+'px'"> 
+                            <div class="flex-row justify-content-between background-color-fff p-16 border-radius-8 mt-16">
+                                <span class="width120px">调解申请书</span>
+                                <span class="width200px">dsadasdsadada.pdf</span>
+                                <span class="width120px">未签章</span>
+                                <span class="width120px">未签字</span>
+                                <span class="width200px">--</span>
+                                <span class="width180px flex-row">
+                                    <a>预览</a>
+                                    <a>下载模板</a>
+                                    <a>上传</a>
+                                    <a>文书生成</a>
+                                </span>
+                            </div>
+                            
+                        </el-scrollbar>
+                    </div>
+                    <!-- 案件材料 -->
+                    <div v-if="rightActive == 3" class="case-materials-record">
+
+                    </div>
+                    <!-- 案件日志 -->
+                    <div v-if="rightActive == 5" class="case-log-record">
+
                     </div>
                 </div>
             </div>
+            
         </div>
 
-        <!-- 底部 -->
-        <div class="layout-bottom">
-            <div>
-                <el-button @click="handleDownloadMediationTemplate">下载调解模板</el-button>
-                <el-button type="danger" @click="updateCaseLog(0)">调解失败</el-button>
-                <el-button type="success" @click="updateCaseLog(1)">调解成功</el-button>
-                <el-button type="primary" @click="updateCaseLog(2)">暂存</el-button>
-            </div>
-            <div>
-                <el-button @click="getFrontCaseById">上一个案件</el-button>
-                <el-button @click="getNextCaseById">下一个案件</el-button>
-                <el-button @click="handleBack">退出当前调解</el-button>
-            </div>
-
-        </div>
     </div>
 
 </template>
@@ -279,28 +194,12 @@ import api from "@/services/caseManagement";
         },
         data() {
             return {
-                currentIndex:0,
-                imgArr:[
-                    {id:0,imgUrl:require('@/assets/image/mediate/group-img-1.png'),imgText:require('@/assets/image/mediate/group-text-1.png')},
-                    {id:1,imgUrl:require('@/assets/image/mediate/group-img-2.png'),imgText:require('@/assets/image/mediate/group-text-2.png')},
-                    {id:2,imgUrl:require('@/assets/image/mediate/group-img-3.png'),imgText:require('@/assets/image/mediate/group-text-3.png')},
-                    {id:3,imgUrl:require('@/assets/image/mediate/group-img-4.png'),imgText:require('@/assets/image/mediate/group-text-4.png')},
-                ],
-                timer:null,
-                activeName:'caseParty',
-                isShow:true,
-                defaultHeadUrl:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',//默认图片
+                rightActive:1,
                 fileList:[],
-                mediateNote:'',//调解笔记
                 mediationRecord:[],//调解记录
                 baseInfo:{},//基本信息
                 obligorInfo:[],//债务人信息
                 caseId:'',//案件id
-                speechId:'',//话术模板id
-                speechContent:'',//话术内容
-                templateUrl:'',//调解模板url
-                financialProductsTypeOptions:[],//金融产品类型
-                productType:'',
             };
         },
         computed:{
@@ -320,181 +219,63 @@ import api from "@/services/caseManagement";
                 let oh = document.documentElement.clientHeight;
                 return oh-56-56-65-20
             },
+            // 获取抽屉drawer的内容高度
+            OfficecontentHeight(){
+                let oh = document.documentElement.clientHeight;
+                return oh-185
+                
+            } ,
             
         },
         async created() {
-            await this.getDict()
-            this.startInterval()
             this.caseId = this.$route.query.caseId
             await this.getCaseInfoById();//获取详情
-            console.log('this.getDict()===',this.getDict())
+            
         },
         beforeDestroy() {
-            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
-                clearInterval(this.timer); //关闭
-            }
+            // if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
+            //     clearInterval(this.timer); //关闭
+            // }
         },
         methods: {
-            // 获取金融产品类型
-            getDict(){
-                let data = {
-                    type:'financial'
-                }
-                return api.getDict(data).then(res => {
-                    if (!res.code) {
-                        this.financialProductsTypeOptions = res;
+            
+           
+            debtorEntityCardNo(datalist,len){
+                let datacardno=''
+                let dataphone=''
+                datalist.forEach((item,index) =>{
+                    if(index == 0){
+                        datacardno = item.cardNo
+                        dataphone = item.phone
+                    }
+                    else{
+                        datacardno += ','+item.cardNo
+                        dataphone += ','+item.phone
                     }
                 })
-            },
-            // 定时器
-            startInterval(){
-                clearInterval(this.timer);
-                this.timer = setInterval(()=>{
-                    this.currentIndex++
-                    if(this.currentIndex>this.imgArr.length-1){
-                        this.currentIndex=0
-                    }
-                },3000)
-            },
-            handleChangeImg(val){
-                if(val=='right'){
-                    this.currentIndex++
-                    if(this.currentIndex == this.imgArr.length){
-                        this.currentIndex =0
-                    }
-                }else{
-                    if(this.currentIndex == 0){
-                        this.currentIndex = this.imgArr.length
-                    }
-                    this.currentIndex--
-                }
-            },
-            handleChangeTextarea(){
-                // console.log('内容',this.mediateNote)
-                // sessionStorage.setItem('mediateNote', this.mediateNote)
-            },
-            handleClick(tab, event) {
                 
+                return {cardNo:datacardno.substring(0,len),phone:dataphone.substring(0,len)};
             },
-            handleToggleShow(){
-                this.isShow = !this.isShow
-            },
-            // 获取详情
-            getCaseInfoById(){ 
-                const _that = this
-                return api.getCaseInfoById(_that.caseId).then(res => {
+             // 获取详情
+             getCaseInfoById(){ 
+                let _that = this
+                api.getCaseInfoById(this.caseId).then(res => {
+                    console.log(res,'res')
                     if(!res.code){
-                        _that.detailData(res)
+                        this.baseInfo=res
+                        
+                        // 材料
+                        // console.log('获取图片',res.caseFileEntityList)
+                        let caseFileEntityList = []
+                        res.caseFileEntityList.forEach((item)=>{
+                            caseFileEntityList.push({name:item.name,fileName:item.name,url:item.url})
+                        })
+                        _that.fileList = caseFileEntityList
+
                     }
                     
                 })
             },
-            // 详情展示内容
-            detailData(res){
-                // 证据材料
-                let caseFileEntityList = []
-                res.caseFileEntityList.forEach((item)=>{
-                    caseFileEntityList.push({name:item.name,fileName:item.name,url:item.url})
-                })
-                this.fileList = caseFileEntityList
-                // 调解记录
-                this.mediationRecord = res.logEntityList
-                // 基本信息
-                this.baseInfo = res
-                // 债务人
-                this.obligorInfo = res.debtorEntityList
-
-                // 获取话术模板id
-                this.speechId = res.tpSpeechcraftId
-                if(this.speechId){
-                    this.getTemplateById()
-                }
-                
-                // 获取调解模板url
-                if(res.caseAgreement){
-                    this.templateUrl = res.caseAgreement.url
-                }
-
-                this.caseId = res.id
-                // 获取金融产品类型
-                console.log('financialProductsTypeOptions',this.financialProductsTypeOptions)
-                let obj = this.financialProductsTypeOptions.find((item)=>{
-                    return item.code == res.productTypeId
-                })
-                this.productType = obj.codeName||'-'//获取金融产品名称
-                console.log('this.productType====',this.productType)
-            },
-            handleUploadFile(fileList){
-                console.log('fileList===',fileList)
-                fileList = JSON.parse(JSON.stringify(fileList))
-                
-                this.fileList = fileList.map((item,i) => {
-                    return {
-                        url: item.url,
-                        fileName:item.name,
-                        name:item.name
-                    }
-                })
-            },
-            // 获取话术内容
-            getTemplateById(){
-                let data={
-                    id:this.speechId
-                }
-                api.getTemplateById(data).then(res => {
-                    if (!res.code) {
-                        this.speechContent = res.content;
-                    }
-                })
-            },
-
-
-            //-------------------------------------------------------------底部按钮接口-------------------------------------------------
-            // // 调解成功或者失败
-            // handleChangeMediation(resultStatus){
-            //     if(!this.$clickThrottle()) { return }//防止重复点击 
-            //     let data={
-            //         id:this.caseId,
-            //         resultStatus:resultStatus
-            //     }
-            //     api.updateResultStatus(data).then(res => {
-
-            //         if(resultStatus==1){
-            //             this.$message({message: '调解成功', type: "success",customClass:'messageZindex'})
-            //         }else{
-            //              this.$message({message: '调解失败', type: "error",customClass:'messageZindex'})
-            //         }
-
-            //     })
-            // },
-            // 暂存2 调解成功1 失败0
-            updateCaseLog(status){
-                if(!this.$clickThrottle()) { return }//防止重复点击 
-                let data = {
-                    caseId:this.caseId,
-                    content:this.mediateNote,
-                    status:status
-                }
-                if(this.mediateNote){
-                    api.updateCaseLog(data).then(res => {
-                        
-                        if(status==0){
-                            this.$message({message: '调解失败', type: "success",customClass:'messageZindex'})
-                        }else if(status==1){
-                            this.$message({message: '调解成功', type: "success",customClass:'messageZindex'})
-                        }else{
-                            this.$message({message: '暂存成功', type: "success",customClass:'messageZindex'})
-                        }
-                        this.mediateNote = ''
-                        this.getCaseInfoById()
-                    })
-                }else{
-                    this.$message({message: '请先输入调解笔记内容', type: "warning",customClass:'messageZindex'})
-                }
-                
-            },
-
-
             // 获取上一件案件
             getFrontCaseById(){
                 if(!this.$clickThrottle()) { return }//防止重复点击 
@@ -534,12 +315,8 @@ import api from "@/services/caseManagement";
                 }
             },
             handleBack(){
-                // console.log('页面来源',this.$route.query.sourcePage)
-                if(this.$route.query.sourcePage == 'mediationManagement'){
-                    this.$router.push('/mediation-management')
-                }else{
-                     this.$router.push('/workbench')
-                }
+                // this.$route.query.sourcePage == 'mediationManagement'
+                this.$router.push('/mediation-management')
                 
             },
             
@@ -555,141 +332,192 @@ import api from "@/services/caseManagement";
 </script>
 <style lang="scss" scoped>
 .layout-center-wrap{
-    display: flex;
-    height: calc(100% - 65px);
-}
-// 左侧
-.layout-center-left-wrap{
-    width: 320px;
     height: 100%;
-    margin-top: 12px;
-}
-.layout-center-left-top{
-    height: 184px;
-    .top-bg{
-        width: 320px;
-        height: 100%;
-        background: url('~@//assets/image/mediate/bg.png') no-repeat ;
-        padding: 12px 16px;
-        .top-bg-text{
-            height: 16px;
-            vertical-align: middle;     
+    font-size:14px;
+    .layout-center-top-wrap{
+        font-size: 14px;
+        padding: 10px;
+        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;
         }
-    }
-    
-}
-.add-img{
-    width: 20px;
-    height: 20px;
-    vertical-align: middle;
-    margin-right: 3px;
-}
-.group-img{
-    position: relative;
-}
-.group-text{
-    position: absolute;
-    top:80px;
-    left:180px;
-}
-.left-base-info{
-    height: calc(100%);
-    border-right: 1px solid #E4E7ED;
-}
-.icon-small{
-    margin-right: 4px;
-    vertical-align: middle;
-}
-
-// 底部
-.layout-bottom{
-    display: flex;
-    justify-content: space-between;
-    padding: 12px 16px;
-    border-top: 1px solid #E4E7ED;
-}
-
-// 中间
-.layout-center-right-wrap{
-    width: 100%;
-    display: flex;
-}
-.layout-center-right-center{
-    flex:1;
-}
-.center-list{
-    display: flex;
-    height: 204px;
-    border: 1px solid #E4E7ED;
-    border-radius: 5px;
-    margin-top: 12px;
-    .center-list-left {
-        width: 180px;
-        height: 100%;
-        text-align: center;
-        padding: 24px 0 33px 0;
-    }
-    .center-list-right{
-        height: 100%;
-        padding: 24px 16px;
-        flex:1;
-    }
-}
-.pink-color{
-    // background:linear-gradient(101.33deg, #9170FF 0.46%, #604DFA 100%);
-    // opacity: 0.1;
-    background-color: rgba(#604DFA, 0.1);
-    
-}
-.blue-color{
-    // background: linear-gradient(101.33deg, #3CA0FA 0.46%, #2F6AF5 100%);
-    background-color: rgba(#2F6AF5, 0.1);;
-    // opacity: 0.2;
-}
-.el-row{
-    height: 70px;
-}
-
-.layout-center-right-bottom{
-    height: 112px;
-    padding: 16px 24px;
-    border-top: 1px solid #E4E7ED;
-}
-
-
-// 最右侧
-.layout-center-right{
-    border-left: 1px solid #E4E7ED;
-    height: calc(100%);
-    .layout-center-right-open{
-        width: 350px;
-    }
-    .layout-center-right-stow{
-        width: 40px;
-        .layout-center-right-stow-text{
-            height: 400px;
-            text-align: center;
-            margin: auto;
-            writing-mode: vertical-lr;
-             letter-spacing: 8px;
+        .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 ;
+            }
+            span{
+                margin-left: 20px;
+                cursor: pointer;
+            }
+            .case-send-btn{
+                border:solid 1px #E5E6EB;
+                height: 35px;
+                padding: 7px 10px 0px 10px;
+                border-radius: 8px;
+                
+            }
+        }
+        .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;
+            }
+        }
+        
     }
-    .left-icon-wrap{
-        position: absolute;
-        top: 250px;
-        width: 24px;
-        height: 24px;
-        background-color: #E4E7ED;
-        border-radius: 4px;
-        cursor: pointer;
-    }
-    .right-40{
-        right: 40px;
-    }
-    .right-350{
-        right: 350px;
+
+    .layout-center-center-wrap{
+
+        height: 100%;
+        
+        .background-color-fff{
+            background-color: #fff;
+        }
+        .background-color-F5F5F5{
+            background-color: #F5F5F5;
+        }
+        .border-E5E6EB{border:solid 1px #E5E6EB;}
+
+        .layout-center-left-wrap{
+            background: url('~@/assets/image/mediate/m-left-bg.png') no-repeat ;
+            background-size: 100% 100%;
+            width: 540px;
+            height: 100%;
+
+            .layout-center-left1-wrap{
+                width: 80px;
+                height: 100%;
+                text-align: center;
+                .left-rbobot{
+                    width: 100%;
+                    height: 80px;
+                    text-align: center;
+                    margin: 30px 0 0 0;
+                    img{width:64px;}
+                }
+                .separation{
+                    width: 50px;
+                    margin:15px 0 0 15px;
+                    border-bottom: solid 1px #dedfe4;
+                }
+                .left-img-info{
+                    margin-top: 15px;
+                    width: 100%;
+                    font-size: 12px;
+                    cursor: pointer;
+                    img{width: 48px;margin-left: 15px;}
+                    a{margin-top: 5px;}
+                }
+
+                .left-img-info.active {
+                    background: url('~@/assets/image/mediate/m-triangle.png') no-repeat ;
+                    background-size: 15px 30px;
+                    background-position: 68px 10px;
+                }
+            }
+            .layout-center-left2-wrap{
+                width: 460px;
+                height: 100%;
+                background-color: #fff;
+                border-radius: 15px 0px 0px 0px;
+                padding: 20px 30px;
+                .case-detail-des{
+                    border:solid 1px #E5E6EB;
+                    padding: 10px 15px;
+                    border-radius: 8px;
+                    font-size: 14px;
+                    span{
+                        margin:3px 0;
+                        padding: 3px 10px;
+
+                        // a:first-child{width: 120px;display: inline-block;text-align: right;}
+                    }
+                    span:nth-child(even) {
+                        background-color: #F7F8FA;
+                    }
+                    
+                }
+                .case-detail-des{
+
+                }
+            }
+
+
+        }
+
+        .layout-center-right-wrap{
+            background: url('~@/assets/image/mediate/m-right-bg.png') no-repeat ;
+            background-size: 100% 100%;
+            width: calc(100% - 540px);
+            height: 100%;
+            padding: 30px;
+
+            .case-communication-record{
+                .btn-communication{
+                    padding:5px 15px;
+                    border-radius: 8px;
+                    cursor: pointer;
+                }
+                .case-communication-cont{
+                    // background: ;
+                    padding: 20px;
+                    border-radius: 8px;
+                    margin-top: 15px;
+                }
+            }
+
+            .case-office-record{
+                .width120px{width: 140px;}
+                .width180px{width: 220px;}
+                .width200px{width: calc(50% - 320px);}
+                span a{color: #C66A5B; margin-right: 13px;}
+                span a:last-child{margin-right: 0;}
+            }
+
+        }
+
     }
     
+    
 }
 
+
 </style>
diff --git a/src/pages/mediation-page/index.vue b/src/pages/mediation-page/index.vue
index a9e9801..3a78b3c 100644
--- a/src/pages/mediation-page/index.vue
+++ b/src/pages/mediation-page/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="layout-wrap">
-        <LayoutHeader />
+        <!-- <LayoutHeader /> -->
         <LayoutContent />
     </div>
 </template>
diff --git a/src/router/index.js b/src/router/index.js
index c2261f4..ff36279 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -107,7 +107,7 @@ const routes = [
         path: "/event-tracing",
         name: "/event-tracing",
         component: () => import("@/pages/event-tracing"),
-        meta: { title: "调解管理", icon: 'menu-mediat-management' },
+        meta: { title: "事项追踪", icon: 'menu-mediat-management' },
       },