diff --git a/src/components/VoiceCallDialog.vue b/src/components/VoiceCallDialog.vue
index 5bcb075..3dd4584 100644
--- a/src/components/VoiceCallDialog.vue
+++ b/src/components/VoiceCallDialog.vue
@@ -4,7 +4,7 @@
     <div v-if="zoomActive" class="cover"></div>
     <div v-if="zoomActive" class="big-layout">
       <div class="big-header flex-row justify-content-end">
-        <div class="big-header-btn bg-color-light flex-row align-items-center border-radius-4 cursor-pointer"
+        <div class="big-header-btn flex-row align-items-center cursor-pointer"
              @click="toggleZoom">
           <span class="mr-4">{{ zoomActive ? '缩小' : '放大' }}</span>
           <svg-icon
@@ -98,11 +98,11 @@
       </div>
     </div>
     <!--  小  -->
-    <div v-else class="small-layout flex-row justify-content-between align-items-center pl-32 pr-32">
-      <div class="f24 f-weight600 mr-16">{{ incomingCallPhone }}</div>
+    <div v-else class="small-layout flex-row justify-content-between align-items-center pl-24 pr-24">
+      <div class="f24 f-weight600 pr-16 mr-16 small-layout-phone">{{ incomingCallPhone }}</div>
       <div class="mr-16 cursor-pointer" v-if="!answerSts" @click="handleAccept"><svg-icon icon-class="up-telephone" className="tabs-svg-phone" /></div>
       <div class="mr-16 cursor-pointer" @click="handleHungUp"><svg-icon icon-class="hang-telephone" className="tabs-svg-phone" /></div>
-      <div class="big-header-btn bg-color-light flex-row align-items-center border-radius-4 cursor-pointer"
+      <div class="big-header-btn flex-row align-items-center cursor-pointer"
            @click="toggleZoom">
         <span class="mr-4">{{ zoomActive ? '缩小' : '放大' }}</span>
         <svg-icon :icon-class="zoomActive ? `zoom-1` : 'zoom-2'" className="tabs-svg-zoom" />
@@ -244,8 +244,9 @@ export default {
 
     .big-header{
       .big-header-btn{
-        background-color: #e4e7ed;
-        padding: 6px 10px;
+        background-color: rgba(242, 243, 245, 1);
+        padding: 9px 14px;
+        border-radius: 16px;
         .tabs-svg{
           width: 16px;
           height: 16px;
@@ -286,20 +287,27 @@ export default {
   position: absolute;
   top: 0;
   left: 50%;
-  height: 56px;
+  height: 72px;
   width: 460px;
   margin-left: -230px;
   .small-layout{
-    height: 56px;
+    height: 72px;
     border-radius: 16px;
-    background-color: #dcdfe6;
+    background-color: #ffffff;
+    border: 1px solid #E5E6EB;
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,.1);
+    .small-layout-phone{
+      line-height: 34px;
+      border-right: 1px solid rgba(229, 230, 235, 1);
+    }
     .tabs-svg-phone{
       width: 40px;
       height: 40px;
     }
     .big-header-btn{
-      background-color: #ffffff;
-      padding: 6px 10px;
+      background-color: rgba(242, 243, 245, 1);
+      padding: 9px 14px;
+      border-radius: 16px;
       .tabs-svg{
         width: 16px;
         height: 16px;