From ebce62e8dfc6850cd87d1ee6fef571a86cbf9dbe Mon Sep 17 00:00:00 2001
From: wangshuai <464942911@qq.com>
Date: Mon, 11 Apr 2022 19:03:26 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/img/base.png                   | Bin 0 -> 388 bytes
 src/router/views/index.js             |   6 +
 src/views/Customer/CustomerDetail.vue | 442 ++++++++++++++++++++++++++
 src/views/Customer/index.vue          |   5 +-
 4 files changed, 452 insertions(+), 1 deletion(-)
 create mode 100644 public/img/base.png
 create mode 100644 src/views/Customer/CustomerDetail.vue

diff --git a/public/img/base.png b/public/img/base.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a750d0b96d1c6402a3321188e21e077039490be
GIT binary patch
literal 388
zcmV-~0ek+5P)<h;3K|Lk000e1NJLTq000~S001Be1^@s60ks%H00001b5ch_0Itp)
z=>Px$K1oDDR7gwhmoZAjKoo}mmsy1bOtD>p7ucI<XKO7)k}e8q9S@-C64c5Q*a&))
z9Ka>%mNW^74kII*!qwemf-49!?Y#HCyzieT6o%oU5aJfVKDK-2jIn@%Ab9x$Shvbt
z0p)fV`#RkKf8DlGYLsdlFpoxCSzm)u+Gj}n-YC^p*4JQ^_8HQ?{})ONBDztlNhwbO
z%yib&*>C~i()az0bN;R%obyRpmJxsp0MjAhULX;v;kn~DJWW#t{dVFwp0;hv0fbV@
z$tLhdAQ3$?#?G=VD~5c16h$*3#I=<2U|qcez5>`?DJU3Y=Xst#4FRpzEdN)oe#rMt
z0UrPyEt?iZ#68c;yPU=VyL_vvQi_%8&wPpKk&-0YtLys2vMjP~`+i+cW5FulrfH4=
i?6|IbM`H(#?fU?p8k8>{u{X{D0000<MNUMnLSTa4{iqTE

literal 0
HcmV?d00001

diff --git a/src/router/views/index.js b/src/router/views/index.js
index f7bc475..6419635 100644
--- a/src/router/views/index.js
+++ b/src/router/views/index.js
@@ -31,6 +31,12 @@ export default [{
     import(/* webpackChunkName: "page" */ '@/views/Receive/index'),
     name: '接待详情',
   },
+  {
+    path: '/Customer/CustomerDetail',
+    component: () =>
+    import(/* webpackChunkName: "page" */ '@/views/Customer/CustomerDetail'),
+    name: '客户详情',
+  },
   {
     path: '/contentManage/updateRecord/update',
     component: () => import(/* webpackChunkName: "views" */ '@/views/contentManage/updateRecord/update'),
diff --git a/src/views/Customer/CustomerDetail.vue b/src/views/Customer/CustomerDetail.vue
new file mode 100644
index 0000000..faad74b
--- /dev/null
+++ b/src/views/Customer/CustomerDetail.vue
@@ -0,0 +1,442 @@
+<template>
+  <div class="mainBox">
+    <div class="headers">
+      <div class="lside">
+        <div class="level">A</div>
+      </div>
+      <div class="rside">
+        <div class="customer-name">
+          <span class="names">先生</span>
+          <span class="tag">初次到访</span>
+        </div>
+        <div class="adviser">
+          <span>负责顾问</span>
+          <span class="trans">转交</span>
+        </div>
+      </div>
+
+      <div class="customer-bottom">
+        <div class="item">
+          <span class="tops">80%</span>
+          <span class="btms">销讲执行</span>
+        </div>
+        <div class="item">
+          <span class="tops">3次</span>
+          <span class="btms">来访次数</span>
+        </div>
+        <div class="item">
+          <span class="tops">155min</span>
+          <span class="btms">到访时长</span>
+        </div>
+        <div class="item">
+          <span class="tops">3</span>
+          <span class="btms">画像标签</span>
+        </div>
+        <div class="item">
+          <span class="tops">3</span>
+          <span class="btms">违禁触达</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="body-container">
+      <el-menu
+        :default-active="activeIndex"
+        class="el-menu-demo"
+        mode="horizontal"
+        @select="handleSelect"
+      >
+        <el-menu-item index="1">历史记录</el-menu-item>
+        <el-menu-item index="2">客户资料</el-menu-item>
+        <el-menu-item index="3">客户意向</el-menu-item>
+        <el-menu-item index="4">销讲执行</el-menu-item>
+        <el-menu-item index="5">违禁触达</el-menu-item>
+      </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>
+              <!-- 历史记录列表 -->
+              <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>
+          </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="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">-</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>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeIndex: "1", // 大的tab
+      activeindex1act: 0, // 筛选条件下标
+      selectList: [ // 选中
+          {
+              title: '全部',
+              id: '',
+          },
+          {
+              title: '接待记录',
+              id: '1',
+          },
+          {
+              title: '通话记录',
+              id: '2',
+          },
+          {
+              title: '跟进记录',
+              id: '3',
+          },
+      ]
+    };
+  },
+  methods: {
+    // 历史记录筛选
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
+      this.activeIndex = key
+    },
+    
+    // 筛选历史记录类型
+    selectTap(data, index) {
+        this.activeindex1act = index
+
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.mainBox {
+  padding: 0 28px;
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  // 顶端样式
+  .headers {
+    padding: 20px 20px 0 20px;
+    width: 100%;
+    height: 172px;
+    background: #fff;
+    display: flex;
+    flex-wrap: wrap;
+
+    .lside {
+      width: 68px;
+      flex-shrink: 0;
+      display: flex;
+      justify-items: flex-end;
+
+      .level {
+        width: 36px;
+        height: 36px;
+        border: 1px solid #e0e0e0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+      }
+    }
+
+    .rside {
+      flex-grow: 1;
+
+      .customer-name {
+        height: 36px;
+        display: flex;
+        align-items: center;
+
+        .names {
+          margin-right: 8px;
+          font-size: 16px;
+        }
+
+        .tag {
+          padding: 1px 12px;
+          text-align: center;
+          font-size: 14px;
+          background: rgba($color: #2671e2, $alpha: 0.2);
+          color: #2671e2;
+        }
+      }
+
+      .adviser {
+        margin-top: 12px;
+        font-size: 14px;
+        color: #333333;
+
+        .trans {
+          margin-left: 24px;
+          color: #2671e2;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .customer-bottom {
+      margin-left: 8px;
+      width: 100%;
+      height: 84px;
+      display: flex;
+      align-content: center;
+
+      .item {
+        padding: 0 60px;
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        .tops {
+          font-size: 16px;
+          color: #333;
+          font-weight: 500;
+          text-align: center;
+        }
+
+        .btms {
+          margin-top: 4px;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .body-container {
+    margin-top: 20px;
+    padding: 0 20px;
+    background: #fff;
+    flex-grow: 1;
+
+
+    .activeIndex1 {
+        .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-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;
+                    }
+                }
+            }
+        }
+    }
+
+    .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;
+            align-items: center;
+
+            .b-lside {
+                width: 96px;
+                flex-shrink: 0;
+                color: #585858;
+            }
+
+            .b-rside {
+                flex-grow: 1;
+            }
+        }
+    }
+  }
+}
+
+
+.el-menu-demo {
+    border-bottom: 1px solid #E0E0E0 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Customer/index.vue b/src/views/Customer/index.vue
index bd53bad..6e68903 100644
--- a/src/views/Customer/index.vue
+++ b/src/views/Customer/index.vue
@@ -350,7 +350,7 @@
         </el-table-column>
         <el-table-column label="操作" align="center" width="250" fixed="right">
           <template slot-scope="{ row }">
-            <el-button type="text" v-if="cus_index_detail">客户详情</el-button>
+            <el-button @click="toCustomer" type="text" v-if="cus_index_detail">客户详情</el-button>
             <el-button
               type="text"
               @click="Receivedetailsabout(row)"
@@ -591,6 +591,9 @@ export default {
     this.zkhousePage();
   },
   methods: {
+    toCustomer() {
+      this.$router.push('/Customer/CustomerDetail')
+    },
     // 批量转交按钮点击事件
     transfer() {
       this.dialogVisible = true;

From 4f4de228e0bd838346a6879244a8d35cd0ff0c12 Mon Sep 17 00:00:00 2001
From: wangshuai <464942911@qq.com>
Date: Tue, 12 Apr 2022 13:59:04 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E5=AE=A2=E6=88=B7?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E4=B9=9F=E4=B9=B0=E4=BD=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Customer/CustomerDetail.vue | 640 +++++++++++++++++---------
 1 file changed, 427 insertions(+), 213 deletions(-)

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