diff --git a/src/assets/icons/svg/siderbar-1-active.svg b/src/assets/icons/svg/siderbar-1-active.svg
new file mode 100644
index 0000000..6885669
--- /dev/null
+++ b/src/assets/icons/svg/siderbar-1-active.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.98832 0.667969C9.12299 0.667969 8.39183 1.2273 8.11983 2.0013H2.62374C1.87774 2.0013 1.27087 2.60753 1.27087 3.35286V13.9831C1.27087 14.7284 1.87774 15.3346 2.62374 15.3346H8.64848C9.39381 15.3346 10 14.7284 10 13.9831V7.33464H12.6797C13.7751 7.33464 14.6667 6.44235 14.6667 5.34635V2.65625C14.6667 1.56025 13.7751 0.667969 12.6797 0.667969H9.98832ZM9.98702 2.0013H12.6784C13.0398 2.0013 13.3334 2.29492 13.3334 2.65625V5.34635C13.3334 5.70769 13.0404 6.0013 12.6797 6.0013H10V3.35286C10 2.91553 9.78822 2.53119 9.46488 2.28385C9.58355 2.11719 9.76835 2.0013 9.98702 2.0013ZM2.62374 3.33464L3.76697 3.33854L4.15629 4.11719C4.25229 4.31119 4.45004 4.43359 4.66671 4.43359H6.65108C6.86775 4.43359 7.06483 4.31119 7.1615 4.11719L7.54561 3.35026L8.66671 3.35286V13.9831C8.66671 13.9931 8.65848 14.0013 8.64848 14.0013L2.60421 13.9831L2.62374 3.33464ZM3.33337 6.66797V8.66797H4.66671V8.0013H5.33337V6.66797H3.33337ZM6.00004 6.66797V8.0013H6.66671V8.66797H8.00004V6.66797H6.00004ZM3.33337 9.33464V11.3346H5.33337V10.0013H4.66671V9.33464H3.33337ZM6.66671 9.33464V10.0013H6.00004V11.3346H8.00004V9.33464H6.66671Z" fill="#BC6F60"/>
+</svg>
diff --git a/src/assets/icons/svg/siderbar-1.svg b/src/assets/icons/svg/siderbar-1.svg
new file mode 100644
index 0000000..87a2ec4
--- /dev/null
+++ b/src/assets/icons/svg/siderbar-1.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.98832 0.667969C9.12299 0.667969 8.39183 1.2273 8.11983 2.0013H2.62374C1.87774 2.0013 1.27087 2.60753 1.27087 3.35286V13.9831C1.27087 14.7284 1.87774 15.3346 2.62374 15.3346H8.64848C9.39381 15.3346 10 14.7284 10 13.9831V7.33464H12.6797C13.7751 7.33464 14.6667 6.44235 14.6667 5.34635V2.65625C14.6667 1.56025 13.7751 0.667969 12.6797 0.667969H9.98832ZM9.98702 2.0013H12.6784C13.0398 2.0013 13.3334 2.29492 13.3334 2.65625V5.34635C13.3334 5.70769 13.0404 6.0013 12.6797 6.0013H10V3.35286C10 2.91553 9.78822 2.53119 9.46488 2.28385C9.58355 2.11719 9.76835 2.0013 9.98702 2.0013ZM2.62374 3.33464L3.76697 3.33854L4.15629 4.11719C4.25229 4.31119 4.45004 4.43359 4.66671 4.43359H6.65108C6.86775 4.43359 7.06483 4.31119 7.1615 4.11719L7.54561 3.35026L8.66671 3.35286V13.9831C8.66671 13.9931 8.65848 14.0013 8.64848 14.0013L2.60421 13.9831L2.62374 3.33464ZM3.33337 6.66797V8.66797H4.66671V8.0013H5.33337V6.66797H3.33337ZM6.00004 6.66797V8.0013H6.66671V8.66797H8.00004V6.66797H6.00004ZM3.33337 9.33464V11.3346H5.33337V10.0013H4.66671V9.33464H3.33337ZM6.66671 9.33464V10.0013H6.00004V11.3346H8.00004V9.33464H6.66671Z" fill="#4E5969"/>
+</svg>
diff --git a/src/assets/icons/svg/siderbar-2-active.svg b/src/assets/icons/svg/siderbar-2-active.svg
new file mode 100644
index 0000000..9dac6ae
--- /dev/null
+++ b/src/assets/icons/svg/siderbar-2-active.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3487 10.3253C12.9287 10.3153 12.4 10.2907 12.066 10.232C11.7047 10.168 11.27 10.044 10.964 9.94867C10.724 9.874 10.4627 9.94 10.2847 10.1173L8.80667 11.5867C7.78533 11.0487 6.96733 10.422 6.27467 9.72533C5.578 9.03267 4.95133 8.21467 4.41333 7.19333L5.88267 5.71467C6.06 5.53667 6.126 5.27533 6.05133 5.03533C5.95667 4.73 5.832 4.29533 5.76867 3.934C5.70933 3.6 5.68533 3.07133 5.67467 2.65133C5.666 2.288 5.37 2 5.00667 2H2.66667C2.37467 2 2 2.21867 2 2.66667C2 5.69267 3.22667 8.58267 5.31067 10.6893C7.41733 12.7733 10.3073 14 13.3333 14C13.7813 14 14 13.6253 14 13.3333V10.9933C14 10.63 13.712 10.334 13.3487 10.3253Z" fill="#BC6F60"/>
+</svg>
diff --git a/src/assets/icons/svg/siderbar-2.svg b/src/assets/icons/svg/siderbar-2.svg
new file mode 100644
index 0000000..1d5166d
--- /dev/null
+++ b/src/assets/icons/svg/siderbar-2.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3487 10.3253C12.9287 10.3153 12.4 10.2907 12.066 10.232C11.7047 10.168 11.27 10.044 10.964 9.94867C10.724 9.874 10.4627 9.94 10.2847 10.1173L8.80667 11.5867C7.78533 11.0487 6.96733 10.422 6.27467 9.72533C5.578 9.03267 4.95133 8.21467 4.41333 7.19333L5.88267 5.71467C6.06 5.53667 6.126 5.27533 6.05133 5.03533C5.95667 4.73 5.832 4.29533 5.76867 3.934C5.70933 3.6 5.68533 3.07133 5.67467 2.65133C5.666 2.288 5.37 2 5.00667 2H2.66667C2.37467 2 2 2.21867 2 2.66667C2 5.69267 3.22667 8.58267 5.31067 10.6893C7.41733 12.7733 10.3073 14 13.3333 14C13.7813 14 14 13.6253 14 13.3333V10.9933C14 10.63 13.712 10.334 13.3487 10.3253Z" fill="#4E5969"/>
+</svg>
diff --git a/src/assets/icons/svg/siderbar-3-active.svg b/src/assets/icons/svg/siderbar-3-active.svg
new file mode 100644
index 0000000..989f59e
--- /dev/null
+++ b/src/assets/icons/svg/siderbar-3-active.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.66329 3C1.92662 3 1.32996 3.59667 1.32996 4.33333V12.3333C1.32996 13.07 1.92662 13.6667 2.66329 13.6667H13.33C14.0666 13.6667 14.6633 13.07 14.6633 12.3333V4.33333C14.6633 3.59667 14.0666 3 13.33 3H2.66329ZM2.66329 4.33333H13.33V5.0013L7.99662 8.33333L2.66329 5.0013V4.33333ZM2.66329 6.33464L7.99662 9.66667L13.33 6.33464V12.3333H2.66329V6.33464Z" fill="#BC6F60"/>
+</svg>
diff --git a/src/assets/icons/svg/siderbar-3.svg b/src/assets/icons/svg/siderbar-3.svg
new file mode 100644
index 0000000..c0d13ac
--- /dev/null
+++ b/src/assets/icons/svg/siderbar-3.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.66329 3C1.92662 3 1.32996 3.59667 1.32996 4.33333V12.3333C1.32996 13.07 1.92662 13.6667 2.66329 13.6667H13.33C14.0666 13.6667 14.6633 13.07 14.6633 12.3333V4.33333C14.6633 3.59667 14.0666 3 13.33 3H2.66329ZM2.66329 4.33333H13.33V5.0013L7.99662 8.33333L2.66329 5.0013V4.33333ZM2.66329 6.33464L7.99662 9.66667L13.33 6.33464V12.3333H2.66329V6.33464Z" fill="#4E5969"/>
+</svg>
diff --git a/src/assets/icons/svg/siderbar-4-active.svg b/src/assets/icons/svg/siderbar-4-active.svg
new file mode 100644
index 0000000..68308a6
--- /dev/null
+++ b/src/assets/icons/svg/siderbar-4-active.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.99996 3.33203C1.27125 3.33203 0.666626 3.93666 0.666626 4.66536V11.332C0.666626 12.0607 1.27125 12.6654 1.99996 12.6654H10.6666C11.3953 12.6654 12 12.0607 12 11.332V9.38542L15.3333 12.0521V3.94531L12 6.61198V4.66536C12 3.93666 11.3953 3.33203 10.6666 3.33203H1.99996ZM1.99996 4.66536H10.6666V11.332H1.99996V4.66536ZM14 6.72005V9.27734L12.401 7.9987L14 6.72005Z" fill="#BC6F60"/>
+</svg>
diff --git a/src/assets/icons/svg/siderbar-4.svg b/src/assets/icons/svg/siderbar-4.svg
new file mode 100644
index 0000000..d4ea623
--- /dev/null
+++ b/src/assets/icons/svg/siderbar-4.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.99996 3.33203C1.27125 3.33203 0.666626 3.93666 0.666626 4.66536V11.332C0.666626 12.0607 1.27125 12.6654 1.99996 12.6654H10.6666C11.3953 12.6654 12 12.0607 12 11.332V9.38542L15.3333 12.0521V3.94531L12 6.61198V4.66536C12 3.93666 11.3953 3.33203 10.6666 3.33203H1.99996ZM1.99996 4.66536H10.6666V11.332H1.99996V4.66536ZM14 6.72005V9.27734L12.401 7.9987L14 6.72005Z" fill="#4E5969"/>
+</svg>
diff --git a/src/assets/icons/svg/siderbar-5-active.svg b/src/assets/icons/svg/siderbar-5-active.svg
new file mode 100644
index 0000000..29ce909
--- /dev/null
+++ b/src/assets/icons/svg/siderbar-5-active.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 2.0013H9.87733C9.602 1.22597 8.86933 0.667969 8 0.667969C7.13067 0.667969 6.398 1.22597 6.12267 2.0013H3.33333C2.59667 2.0013 2 2.59797 2 3.33464V12.668C2 13.4046 2.59667 14.0013 3.33333 14.0013H12.6667C13.4033 14.0013 14 13.4046 14 12.668V3.33464C14 2.59797 13.4033 2.0013 12.6667 2.0013ZM8 2.0013C8.368 2.0013 8.66667 2.29997 8.66667 2.66797C8.66667 3.03597 8.368 3.33464 8 3.33464C7.632 3.33464 7.33333 3.03597 7.33333 2.66797C7.33333 2.29997 7.632 2.0013 8 2.0013ZM6 11.3346H4.66667V10.0013L8.764 5.90397L10.0973 7.2373L6 11.3346ZM11.236 6.09864L10.5693 6.7653L9.236 5.43197L9.90267 4.7653C10.0327 4.6353 10.244 4.6353 10.374 4.7653L11.236 5.6273C11.366 5.75797 11.366 5.96864 11.236 6.09864ZM12.6667 12.668H3.33333V3.33464H12.6667V12.668Z" fill="#BC6F60"/>
+</svg>
diff --git a/src/assets/icons/svg/siderbar-5.svg b/src/assets/icons/svg/siderbar-5.svg
new file mode 100644
index 0000000..041faea
--- /dev/null
+++ b/src/assets/icons/svg/siderbar-5.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 2.0013H9.87733C9.602 1.22597 8.86933 0.667969 8 0.667969C7.13067 0.667969 6.398 1.22597 6.12267 2.0013H3.33333C2.59667 2.0013 2 2.59797 2 3.33464V12.668C2 13.4046 2.59667 14.0013 3.33333 14.0013H12.6667C13.4033 14.0013 14 13.4046 14 12.668V3.33464C14 2.59797 13.4033 2.0013 12.6667 2.0013ZM8 2.0013C8.368 2.0013 8.66667 2.29997 8.66667 2.66797C8.66667 3.03597 8.368 3.33464 8 3.33464C7.632 3.33464 7.33333 3.03597 7.33333 2.66797C7.33333 2.29997 7.632 2.0013 8 2.0013ZM6 11.3346H4.66667V10.0013L8.764 5.90397L10.0973 7.2373L6 11.3346ZM11.236 6.09864L10.5693 6.7653L9.236 5.43197L9.90267 4.7653C10.0327 4.6353 10.244 4.6353 10.374 4.7653L11.236 5.6273C11.366 5.75797 11.366 5.96864 11.236 6.09864ZM12.6667 12.668H3.33333V3.33464H12.6667V12.668Z" fill="#4E5969"/>
+</svg>
diff --git a/src/assets/icons/svg/siderbar-6-active.svg b/src/assets/icons/svg/siderbar-6-active.svg
new file mode 100644
index 0000000..ef26f77
--- /dev/null
+++ b/src/assets/icons/svg/siderbar-6-active.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33333 2C2.60462 2 2 2.60462 2 3.33333V12.6667C2 13.3954 2.60462 14 3.33333 14H12.6667C13.3954 14 14 13.3954 14 12.6667V3.33333C14 2.60462 13.3954 2 12.6667 2H3.33333ZM3.33333 3.33333H12.6667V4.66667H3.33333V3.33333ZM3.33333 6H12.6667V12.6667H3.33333V6ZM4.66667 7.33333V8.66667H6V7.33333H4.66667ZM7.33333 7.33333V8.66667H11.3333V7.33333H7.33333ZM4.66667 10V11.3333H6V10H4.66667ZM7.33333 10V11.3333H11.3333V10H7.33333Z" fill="#BC6F60"/>
+</svg>
diff --git a/src/assets/icons/svg/siderbar-6.svg b/src/assets/icons/svg/siderbar-6.svg
new file mode 100644
index 0000000..a929693
--- /dev/null
+++ b/src/assets/icons/svg/siderbar-6.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33333 2C2.60462 2 2 2.60462 2 3.33333V12.6667C2 13.3954 2.60462 14 3.33333 14H12.6667C13.3954 14 14 13.3954 14 12.6667V3.33333C14 2.60462 13.3954 2 12.6667 2H3.33333ZM3.33333 3.33333H12.6667V4.66667H3.33333V3.33333ZM3.33333 6H12.6667V12.6667H3.33333V6ZM4.66667 7.33333V8.66667H6V7.33333H4.66667ZM7.33333 7.33333V8.66667H11.3333V7.33333H7.33333ZM4.66667 10V11.3333H6V10H4.66667ZM7.33333 10V11.3333H11.3333V10H7.33333Z" fill="#4E5969"/>
+</svg>
diff --git a/src/assets/icons/svg/siderbar-7-active.svg b/src/assets/icons/svg/siderbar-7-active.svg
new file mode 100644
index 0000000..75d8d3d
--- /dev/null
+++ b/src/assets/icons/svg/siderbar-7-active.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.66541 2C1.93207 2 1.33988 2.6 1.33988 3.33333L1.33337 11.332C1.33337 12.0687 1.93004 12.6667 2.66671 12.6667H3.99874H4.00004V15.3333L6.66541 12.6667H13.3321C14.0654 12.6667 14.6654 12.0667 14.6654 11.3333V3.33333C14.6654 2.6 14.0654 2 13.3321 2H2.66541ZM2.66541 3.33333H13.3334V11.3333H3.99874H2.66671L2.66541 3.33333ZM4.66671 5.33333V8H6.00004L4.66671 10H6.00004L7.33337 8V7.33333V5.33333H4.66671ZM8.66671 5.33333V8H10L8.66671 10H10L11.3334 8V7.33333V5.33333H8.66671Z" fill="#BC6F60"/>
+</svg>
diff --git a/src/assets/icons/svg/siderbar-7.svg b/src/assets/icons/svg/siderbar-7.svg
new file mode 100644
index 0000000..eecfc15
--- /dev/null
+++ b/src/assets/icons/svg/siderbar-7.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.66541 2C1.93207 2 1.33988 2.6 1.33988 3.33333L1.33337 11.332C1.33337 12.0687 1.93004 12.6667 2.66671 12.6667H3.99874H4.00004V15.3333L6.66541 12.6667H13.3321C14.0654 12.6667 14.6654 12.0667 14.6654 11.3333V3.33333C14.6654 2.6 14.0654 2 13.3321 2H2.66541ZM2.66541 3.33333H13.3334V11.3333H3.99874H2.66671L2.66541 3.33333ZM4.66671 5.33333V8H6.00004L4.66671 10H6.00004L7.33337 8V7.33333V5.33333H4.66671ZM8.66671 5.33333V8H10L8.66671 10H10L11.3334 8V7.33333V5.33333H8.66671Z" fill="#4E5969"/>
+</svg>
diff --git a/src/pages/mediation-page/components/LayoutContentNew.vue b/src/pages/mediation-page/components/LayoutContentNew.vue
index baff267..bbf0911 100644
--- a/src/pages/mediation-page/components/LayoutContentNew.vue
+++ b/src/pages/mediation-page/components/LayoutContentNew.vue
@@ -437,6 +437,9 @@
             </el-timeline>
 
           </div>
+          <div class="right-wrap-side">
+            <SidebarTool :caseId="caseId" />
+          </div>
         </div>
 
       </div>
@@ -561,6 +564,7 @@ export default {
     cassWrit: () => import('./cassWrit'),//
     caseVideoReservationDialog: () => import('./caseVideoReservationDialog'),//
     portraitPerson: () => import('./portraitPerson.vue'),//人物画像
+    SidebarTool: () => import('./SidebarTool'),
 
     singleofficeWritPopover: () => import('./singleofficeWritPopover.vue'),//发起签字
     singleofficeSealPopover: () => import('./singleofficeSealPopover.vue'),//发起签章
@@ -1010,7 +1014,7 @@ export default {
       }
 
       .right-wrap-right{
-        width: calc(100% - 367px);
+        width: calc(100% - 367px - 40px);
         .timeline-layout{
           .timeline-layout-w{
             width: calc(50% - 8px);
@@ -1040,6 +1044,12 @@ export default {
         }
       }
 
+      .right-wrap-side{
+        width: 40px;
+        height: 100%;
+        background-color: #EEF1FE;
+      }
+
       //.case-communication-record {
       //  .btn-communication {
       //    padding: 5px 15px;
diff --git a/src/pages/mediation-page/components/SidebarTool.vue b/src/pages/mediation-page/components/SidebarTool.vue
new file mode 100644
index 0000000..2677967
--- /dev/null
+++ b/src/pages/mediation-page/components/SidebarTool.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="sidebar-tab">
+    <div class="tab-content p-16" v-if="rightActive">
+      <div v-if="rightActive === 1">
+        <div class="tab-content-title f16 f-weight600 pb-8">触达记录</div>
+        <el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
+
+        </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'">
+
+        </el-scrollbar>
+      </div>
+    </div>
+    <el-tooltip
+        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"
+           :class="rightActive === 1 ?'active':''">
+        <svg-icon :icon-class="rightActive === 1 ? `siderbar-1-active` : 'siderbar-1'" className="tabs-svg" />
+      </div>
+    </el-tooltip>
+    <el-tooltip
+        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"
+           :class="rightActive === 2 ?'active':''">
+        <svg-icon :icon-class="rightActive === 2 ? `siderbar-2-active` : 'siderbar-2'" className="tabs-svg" />
+      </div>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+import caseManagement from "@/services/caseManagement";
+export default {
+  name: "SidebarTool",
+  components: {
+    uploadFile: () => import('@/components/uploadFile.vue'),//上传
+  },
+  props: {
+    caseId: {
+      type: String,
+      default: () => {
+        return ''
+      },
+    },
+
+  },
+  data(){
+    return{
+      rightActive: 0
+    }
+  },
+  computed: {
+    contentHeight() {
+      let oh = document.documentElement.clientHeight;
+      return oh - 57 - 63
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.sidebar-tab{
+  width: 40px;
+  .tab-content{
+    position: absolute;
+    top: 57px;
+    right: 40px;
+    width: 260px;
+    background-color: #ffffff;
+    border-left: 1px solid #E5E6EB;
+  }
+
+  .tab-icon{
+    width: 100%;
+    height: 40px;
+    .tabs-svg{
+      width: 18px;
+      height: 18px;
+    }
+  }
+  .active {
+    background-color: #ffffff;
+  }
+}
+</style>
\ No newline at end of file