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