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