diff --git a/src/views/Customer/CustomerDetail.vue b/src/views/Customer/CustomerDetail.vue
index faad74b..6f94660 100644
--- a/src/views/Customer/CustomerDetail.vue
+++ b/src/views/Customer/CustomerDetail.vue
@@ -54,95 +54,223 @@
       </el-menu>
       <!-- 历史记录 -->
       <template v-if="activeIndex == 1">
-          <div class="activeIndex1">
-              <div class="select">
-                <div v-for="(data, index) in selectList" :key="index" @click="selectTap(data, index)" class="s-items" :class="{act: index == activeindex1act}">{{ data.title }}</div>
+        <div class="activeIndex1">
+          <div class="select">
+            <div
+              v-for="(data, index) in selectList"
+              :key="index"
+              @click="selectTap(data, index)"
+              class="s-items"
+              :class="{act: index == activeindex1act}"
+            >{{ data.title }}</div>
+          </div>
+          <!-- 历史记录列表 -->
+          <div class="activeList">
+            <div class="a-items">
+              <div class="a-lside">A</div>
+              <div class="a-rside">
+                <div class="a-top">
+                  <span class="a-name">李佳佳</span>
+                  <span class="tag">首次到访</span>
+                  <span class="line">&nbsp;|&nbsp;</span>
+                  <span class="tag">未标注</span>
+                </div>
+                <div class="a-time">2022-05-20 18:00:00</div>
+                <div class="a-type">
+                  <span class="time">录音时长：90分钟</span>
+                  <span class="percent">执行率：86%</span>
+                  <span class="getcent">质检得分：75</span>
+                </div>
               </div>
-              <!-- 历史记录列表 -->
-              <div class="activeList">
-                  <div class="a-items">
-                      <div class="a-lside">
-                          A
-                      </div>
-                      <div class="a-rside">
-                          <div class="a-top">
-                              <span class="a-name">李佳佳</span>
-                              <span class="tag">首次到访</span>
-                              <span class="line">&nbsp;|&nbsp;</span>
-                              <span class="tag">未标注</span>
-                          </div>
-                          <div class="a-time">2022-05-20 18:00:00</div>
-                          <div class="a-type">
-                              <span class="time">录音时长：90分钟</span>
-                              <span class="percent">执行率：86%</span>
-                              <span class="getcent">质检得分：75</span>
-                          </div>
-                      </div>
-                      <div class="details-box">
-                          <div class="details">查看详情</div>
-                      </div>
-                  </div>
+              <div class="details-box">
+                <div class="details">查看详情</div>
               </div>
+            </div>
           </div>
+        </div>
       </template>
       <template v-if="activeIndex == 2">
-          <div class="activeIndex2">
-            <div class="baseInfo">
-                <img class="base-img" src="/img/base.png" alt="">
-                基本信息
-            </div>
+        <div class="activeIndex2">
+          <div class="baseInfo">
+            <img class="base-img" src="/img/base.png" alt />
+            基本信息
+          </div>
 
-            <div class="base-items">
-                <div class="b-lside">客户姓名</div>
-                <div class="b-rside">刘佳</div>
-            </div>
+          <div class="base-items">
+            <div class="b-lside">客户姓名</div>
+            <div class="b-rside">刘佳</div>
+          </div>
 
-            <div class="base-items">
-                <div class="b-lside">性别</div>
-                <div class="b-rside">女</div>
-            </div>
+          <div class="base-items">
+            <div class="b-lside">性别</div>
+            <div class="b-rside">女</div>
+          </div>
 
-            <div class="base-items">
-                <div class="b-lside">手机</div>
-                <div class="b-rside">17551333886</div>
-            </div>
+          <div class="base-items">
+            <div class="b-lside">手机</div>
+            <div class="b-rside">17551333886</div>
+          </div>
 
-            <div class="base-items">
-                <div class="b-lside">微信账号</div>
-                <div class="b-rside">-</div>
-            </div>
-            
-            <div class="base-items">
-                <div class="b-lside">客户等级</div>
-                <div class="b-rside">A级</div>
-            </div>
-            
-            <div class="base-items">
-                <div class="b-lside">客户来源</div>
-                <div class="b-rside">其他</div>
+          <div class="base-items">
+            <div class="b-lside">微信账号</div>
+            <div class="b-rside">-</div>
+          </div>
+
+          <div class="base-items">
+            <div class="b-lside">客户等级</div>
+            <div class="b-rside">A级</div>
+          </div>
+
+          <div class="base-items">
+            <div class="b-lside">客户来源</div>
+            <div class="b-rside">其他</div>
+          </div>
+
+          <div class="base-items">
+            <div class="b-lside">资讯业务</div>
+            <div class="b-rside">一期住宅 二期住宅</div>
+          </div>
+
+          <div class="base-items">
+            <div class="b-lside">添加人</div>
+            <div class="b-rside">访客登记</div>
+          </div>
+
+          <div class="base-items">
+            <div class="b-lside">添加时间</div>
+            <div class="b-rside">-</div>
+          </div>
+
+          <div class="base-items">
+            <div class="b-lside">备注</div>
+            <div class="b-rside">-</div>
+          </div>
+        </div>
+      </template>
+      <template v-if="activeIndex == 3">
+        <div class="activeIndex2">
+          <div style="height: 8px;"></div>
+          <div class="base-items">
+            <div class="b-lside">置业需求</div>
+            <div class="b-rside">投资、养老</div>
+          </div>
+
+          <div class="base-items">
+            <div class="b-lside">意向面积</div>
+            <div class="b-rside">90～100、120～140</div>
+          </div>
+
+          <div class="base-items">
+            <div class="b-lside">预算</div>
+            <div class="b-rside">100～160万</div>
+          </div>
+
+          <div class="base-items">
+            <div class="b-lside">关注点</div>
+            <div class="b-rside">学校</div>
+          </div>
+
+          <div class="base-items">
+            <div class="b-lside">认知途径</div>
+            <div class="b-rside">广告</div>
+          </div>
+        </div>
+      </template>
+      <template v-if="activeIndex == 4">
+        <!-- 执行总览 -->
+        <div class="all-screen">
+          <div class="tops">
+            <div class="tops-title">执行总览</div>
+            <div class="p-box">
+              <div class="items" style="margin-left: 144px;">
+                <span class="p-i-titles">3</span>
+                <span style="margin-top: 6px;">到访次数</span>
+              </div>
+              <div class="items" style="margin-left: 200px;">
+                <div class="circle">
+                  <el-progress :width="56" color="#4FC78F" type="circle" :percentage="0"></el-progress>
+                </div>
+                <span style="margin-top: 6px;">销讲执行率</span>
+              </div>
+              <div class="items" style="margin-left: 200px;">
+                <span class="p-i-titles">3155</span>
+                <span style="margin-top: 6px;">接待时长(分)</span>
+              </div>
             </div>
-            
-            <div class="base-items">
-                <div class="b-lside">资讯业务</div>
-                <div class="b-rside">一期住宅  二期住宅</div>
+          </div>
+          <!-- 指标内容 -->
+          <div class="contents">
+            <div class="head">
+              <span style="margin-left: 96px;">指标</span>
+              <span style="margin-left: 582px;">执行</span>
             </div>
-            
-            <div class="base-items">
-                <div class="b-lside">添加人</div>
-                <div class="b-rside">访客登记</div>
+            <el-collapse v-model="activeName" accordion>
+              <el-collapse-item title="区位介绍" name="1">
+                <template slot="title">
+                  区位介绍
+                  <el-progress
+                    style="margin: 0 153px 0 80px;width: 363px;"
+                    color="#4FC78F"
+                    :stroke-width="16"
+                    :percentage="70"
+                  ></el-progress>
+                </template>
+                <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+                <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
+              </el-collapse-item>
+              <el-collapse-item title="品牌介绍" name="2">
+                <template slot="title">
+                  品牌介绍
+                  <el-progress
+                    style="margin: 0 153px 0 80px;width: 363px;"
+                    color="#4FC78F"
+                    :stroke-width="16"
+                    :percentage="70"
+                  ></el-progress>
+                </template>
+                <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+                <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+              </el-collapse-item>
+            </el-collapse>
+            <div style="height: 54px;"></div>
+          </div>
+        </div>
+      </template>
+
+      <template v-if="activeIndex == 5">
+        <div class="all-screen">
+          <div class="tops">
+            <div class="tops-title">执行总览</div>
+            <div class="p-box">
+              <div class="items" style="margin-left: 144px;">
+                <span class="p-i-titles">3</span>
+                <span style="margin-top: 6px;">到访次数</span>
+              </div>
+              <div class="items" style="margin-left: 200px;">
+                <div class="circle">
+                  <el-progress :width="56" color="#E51B1B" type="circle" :percentage="50"></el-progress>
+                </div>
+                <span style="margin-top: 6px;">销讲执行率</span>
+              </div>
+              <div class="items" style="margin-left: 200px;">
+                <span class="p-i-titles">3155</span>
+                <span style="margin-top: 6px;">接待时长(分)</span>
+              </div>
             </div>
-            
-            <div class="base-items">
-                <div class="b-lside">添加时间</div>
-                <div class="b-rside">-</div>
+          </div>
+          <!-- 列表 -->
+          <div class="p-content">
+            <div class="p-items">
+              <span class="p-i-lside">红包</span>
+              
+              <span class="p-i-rside">1次</span>
             </div>
-            
-            <div class="base-items">
-                <div class="b-lside">备注</div>
-                <div class="b-rside">-</div>
+            <div class="p-items">
+              <span class="p-i-lside">收红包</span>
+              <span class="p-i-rside">1次</span>
             </div>
-
           </div>
+        </div>
       </template>
     </div>
   </div>
@@ -154,37 +282,38 @@ export default {
     return {
       activeIndex: "1", // 大的tab
       activeindex1act: 0, // 筛选条件下标
-      selectList: [ // 选中
-          {
-              title: '全部',
-              id: '',
-          },
-          {
-              title: '接待记录',
-              id: '1',
-          },
-          {
-              title: '通话记录',
-              id: '2',
-          },
-          {
-              title: '跟进记录',
-              id: '3',
-          },
-      ]
+      selectList: [
+        // 选中
+        {
+          title: "全部",
+          id: ""
+        },
+        {
+          title: "接待记录",
+          id: "1"
+        },
+        {
+          title: "通话记录",
+          id: "2"
+        },
+        {
+          title: "跟进记录",
+          id: "3"
+        }
+      ],
+      activeName: 1 // 折叠面板选中项
     };
   },
   methods: {
     // 历史记录筛选
     handleSelect(key, keyPath) {
       console.log(key, keyPath);
-      this.activeIndex = key
+      this.activeIndex = key;
     },
-    
+
     // 筛选历史记录类型
     selectTap(data, index) {
-        this.activeindex1act = index
-
+      this.activeindex1act = index;
     }
   }
 };
@@ -194,6 +323,7 @@ export default {
 .mainBox {
   padding: 0 28px;
   width: 100%;
+  min-width: 1200px;
   min-height: 100%;
   display: flex;
   flex-direction: column;
@@ -293,150 +423,234 @@ export default {
     background: #fff;
     flex-grow: 1;
 
-
     .activeIndex1 {
-        .select {
-            width: 100%;
-            height: 56px;
+      .select {
+        width: 100%;
+        height: 56px;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #e0e0e0;
+
+        .s-items {
+          padding: 2px 8px;
+          margin-right: 40px;
+          font-size: 14px;
+          cursor: pointer;
+          border: 1px solid #fff;
+        }
+
+        .act {
+          border-color: #2671e2;
+          color: #2671e2;
+        }
+      }
+
+      .activeList {
+        .a-items {
+          padding: 16px 0;
+          width: 100%;
+          height: 118px;
+          display: flex;
+          border-bottom: 1px solid #e0e0e0;
+
+          .a-lside {
+            margin-right: 12px;
+            flex-shrink: 0;
+            width: 36px;
+            height: 36px;
             display: flex;
+            justify-content: center;
             align-items: center;
-            border-bottom: 1px solid #E0E0E0;
+            border-radius: 50%;
+            border: 1px solid #e0e0e0;
+          }
+
+          .a-rside {
+            flex-grow: 1;
+
+            .a-top {
+              height: 36px;
+              display: flex;
+              align-items: center;
 
-            .s-items {
-                padding: 2px 8px;
-                margin-right: 40px;
+              .a-name {
+                margin-right: 24px;
+                font-size: 16px;
+              }
+
+              .tag {
                 font-size: 14px;
-                cursor: pointer;
-                border: 1px solid #fff;
+              }
             }
 
-            .act {
-                border-color: #2671E2;
-                color: #2671E2;
+            .a-time {
+              margin-top: 4px;
+              font-size: 14px;
             }
-        }
 
-        .activeList {
-            .a-items {
-                padding: 16px 0;
-                width: 100%;
-                height: 118px;
-                display: flex;
-                border-bottom: 1px solid #E0E0E0;
-                
-                .a-lside {
-                    margin-right: 12px;
-                    flex-shrink: 0;
-                    width: 36px;
-                    height: 36px;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    border-radius: 50%;
-                    border: 1px solid #E0E0E0;
-                }
-
-                .a-rside {
-                    flex-grow: 1;
-
-                    .a-top {
-                        height: 36px;
-                        display: flex;
-                        align-items: center;
-
-                        .a-name {
-                            margin-right: 24px;
-                            font-size: 16px;
-                        }
-
-                        .tag {
-                            font-size: 14px;
-                        }
-                    }
-
-                    .a-time {
-                        margin-top: 4px;
-                        font-size: 14px;
-                    }
-
-                    .a-type {
-                        margin-top: 6px;
-                        display: flex;
-                        align-items: center;
-                        font-size: 14px;
-                        
-                        .time {
-                            margin-right: 32px;
-                        }
-
-                        .percent {
-                            margin-right: 27px;
-                        }
-                    }
-                }
-
-                .details-box {
-                    margin-right: 80px;
-                    height: 100%;
-                    display: flex;
-                    align-items: center;
-
-                    .details {
-                        width: 82px;
-                        height: 30px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        color: #fff;
-                        background: #2671E2;
-                        border-radius: 2px;
-                        font-size: 14px;
-                        cursor: pointer;
-                    }
-                }
+            .a-type {
+              margin-top: 6px;
+              display: flex;
+              align-items: center;
+              font-size: 14px;
+
+              .time {
+                margin-right: 32px;
+              }
+
+              .percent {
+                margin-right: 27px;
+              }
+            }
+          }
+
+          .details-box {
+            margin-right: 80px;
+            height: 100%;
+            display: flex;
+            align-items: center;
+
+            .details {
+              width: 82px;
+              height: 30px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: #fff;
+              background: #2671e2;
+              border-radius: 2px;
+              font-size: 14px;
+              cursor: pointer;
             }
+          }
         }
+      }
     }
 
     .activeIndex2 {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .baseInfo {
+        padding: 16px 0 8px 0;
+        display: flex;
+        align-items: center;
+
+        .base-img {
+          margin-right: 2px;
+          width: 14px;
+          height: 16px;
+        }
+      }
+
+      .base-items {
+        padding: 8px 0;
         width: 100%;
         display: flex;
-        flex-direction: column;
-        
-        .baseInfo {
-            padding: 16px 0 8px 0;
-            display: flex;
-            align-items: center;
+        align-items: center;
 
-            .base-img {
-                margin-right: 2px;
-                width: 14px;
-                height: 16px;
-            }
+        .b-lside {
+          width: 96px;
+          flex-shrink: 0;
+          color: #585858;
         }
 
-        .base-items {
-            padding: 8px 0;
-            width: 100%;
-            display: flex;
-            align-items: center;
+        .b-rside {
+          flex-grow: 1;
+        }
+      }
+    }
 
-            .b-lside {
-                width: 96px;
-                flex-shrink: 0;
-                color: #585858;
-            }
+    .all-screen {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
 
-            .b-rside {
-                flex-grow: 1;
+      .tops {
+        margin: 16px 0;
+        padding: 16px 20px 0;
+        width: 100%;
+        height: 154px;
+        border: 1px solid #e0e0e0;
+
+        .tops-title {
+          font-size: 16px;
+        }
+
+        .p-box {
+          margin-top: 16px;
+          display: flex;
+          align-items: flex-end;
+
+          .items {
+            display: flex;
+            flex-direction: column;
+            .circle {
+              display: flex;
+              justify-content: center;
             }
+            .p-i-titles {
+              text-align: center;
+            }
+          }
+        }
+      }
+
+      .p-content {
+        margin-top: -16px;
+        border: 1px solid #E0E0E0;
+        border-top: none;
+
+        .p-items {
+          padding: 0 0 0 80px;
+          width: 100%;
+          height: 58px;
+          display: flex;
+          align-items: center;
+          border-bottom: 1px solid #e0e0e0;
+
+          .p-i-lside {
+            width: 43%;
+            flex-shrink: 0;
+            font-size: 16px;
+          }
+          .p-i-rside {
+            padding: 2px 23px;
+            color: #E51B1B;
+            background: rgba($color: #E51B1B, $alpha: .1);
+          }
         }
+      }
+
+      .contents {
+        border: 1px solid #e0e0e0;
+
+        .head {
+          height: 54px;
+          display: flex;
+          align-items: center;
+        }
+      }
     }
   }
 }
 
-
 .el-menu-demo {
-    border-bottom: 1px solid #E0E0E0 !important;
+  border-bottom: 1px solid #e0e0e0 !important;
+}
+</style>
+
+<style lang="scss">
+.el-collapse-item__header {
+  padding: 0 0 0 80px;
+  background-color: #f8f8f8;
+  border-bottom-color: #e0e0e0;
+}
+.el-collapse-item__arrow {
+  margin: 0;
+}
+.el-progress__text {
+  font-size: 14px;
 }
 </style>
\ No newline at end of file