完善信息概览静态页面

src/baseComponents/Pagination.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="page_pagination" v-if="!(hidePagination)">
+        <!-- background layout="sizes, prev, pager, next"  -->
+        <el-pagination 
+        :hide-on-single-page="props.hidesinglePage"
+        :current-page="props.currentPage" 
+        :page-size="props.pageSize" 
+        :page-sizes="[20, 50, 100]" 
+        background layout="prev, pager, next" 
+        :total="Number(props.totalNum)" 
+        @current-change="(val)=>emit('paginationChange',{type:'currentPage',val})" 
+        @size-change="(val)=>emit('paginationChange',{type:'pageSize',val})" />
+    </div>
+</template>
+
+
+<script setup lang="ts">
+const props = defineProps({
+    hidesinglePage:{
+        type:Boolean,
+    },
+    hidePagination:{
+        type:Boolean,
+        default:false
+    },
+    currentPage:{
+        type:Number,
+        default:1
+    },
+    pageSize:{
+        type:Number,
+        default:20
+    },
+    totalNum:{
+        type:Number,
+        default:0
+    },
+})
+
+const emit = defineEmits(['paginationChange'])
+
+
+
+</script>
+
+
+
+
+<style lang="scss" scoped>
+
+</style>

src/components/FollowCard.vue

@@ -1,7 +1,7 @@
 <template>
-    <ul class="audit_list_container">
+    <ul class="follow_card">
         <li 
-            v-for="(item, index) in auditList" 
+            v-for="(item, index) in cardList" 
             :key="item.id"
             class="audit_card"
         >
@@ -18,6 +18,7 @@
                             {{ tag }}
                         </el-tag>
                     </template>
+                    <span v-if="item.taskType" class="task_type">{{item.taskType}}</span>
                     
                 </div>
                 <!-- 右侧操作信息 -->
@@ -37,6 +38,7 @@
                 {{ item.bottomDesc }}
             </div>
         </li>
+      
     </ul>
 </template>
 
@@ -46,12 +48,13 @@ interface AuditItm {
     id:string | number,
     headerTitleList:Array<string>,
     headerTags:Array<string>,
+    taskType:string,
     middleDesc:Array<string>,
     bottomDesc:string,
 }
 
 const props = defineProps({
-    auditList:{
+    cardList:{
         type:Array<AuditItm>,
         required:true
     },
@@ -63,7 +66,7 @@ const props = defineProps({
 
 
 <style lang="scss" scoped>
-.audit_list_container {
+.follow_card {
     display: flex;
     flex-direction: column;
     gap: 16px;
@@ -98,6 +101,15 @@ const props = defineProps({
                     border-radius: 4px;
                     color: #2E64FA;
                 }
+                .task_type{
+                    font-size: 12px;
+                    font-weight: 400;
+                    color:#fff;
+                    line-height: 17px;
+                    padding:4px 8px;
+                    background: #2E64FA;
+                    border-radius: 4px;
+                }
             }
             .header_right{
                 display: flex;
@@ -127,7 +139,7 @@ const props = defineProps({
     }
 }
 
-.audit_list_container{
+.follow_card{
     .audit_card{
         padding: 12px 16px;
         .header_left {

src/styles/page.scss

@@ -55,3 +55,23 @@
       display: none;              // Chrome, Safari, Opera
   }
 }
+
+
+
+.no_data_bg{
+    width: 100%;
+    height: 100%;
+    min-height: 360px;
+    background: url('@/assets/bg/zanwushuju.png');
+    background-repeat: no-repeat;
+    background-position: 50% 108px;
+    background-size: 360px auto;
+    color:#999;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    font-size: 14px;
+    span{
+        margin-top: 290px;
+    }
+}

src/views/customerFollowUp/index.vue

@@ -67,7 +67,7 @@
             @close="CloseAuditDialog">
             <TabSearch :tabList="tabList" :defaultTabKey="defaultAuditStatus" tab-type="box" />
             
-            <FollowCard  :auditList="finalAuditRenderData"></FollowCard>
+            <FollowCard  :cardList="finalAuditRenderData"></FollowCard>
           
             <template #close>
                 <el-button @click="CloseAuditDialog" class="button_background" >关闭</el-button>
@@ -114,7 +114,7 @@
 
             <!-- 日志列表 -->
             <div>
-                <FollowCard class="log_list_container"  :auditList="finalOperationLogRenderData">
+                <FollowCard class="log_list_container"  :cardList="finalOperationLogRenderData">
                     <template #operation><i></i></template>
                 </FollowCard>
 

src/views/myCustomer/myCustomerDetail/customerStatusOverview/index.vue

@@ -1,124 +1,115 @@
 <template>
     <div class="message_overview">
         <!-- 左侧：产品概览与最新状态 -->
-        <div class="left_panel">
+        <div class="left_panel hide_scrollbar">
             <div class="product_summary">
-                <div class="summary_title">跟进产品总数 6</div>
+                <div class="summary_title">跟进产品总数 {{ followUpProductSummary.total }}</div>
                 <div class="summary_tags">
-                    <span>线索建立 2</span>
-                    <span>方案演示 1</span>
-                    <span>试用测试 1</span>
-                    <span>赢单 1</span>
+                    <span v-for="(item,index) in followUpProductSummary.differentStatusNum" :key="index"> {{item.name}} {{item.num}}</span>
                 </div>
             </div>
             
             <div class="product_list">
-                <!-- 模拟列表项：选中状态 -->
-                <div class="list_item active">
-                    <div class="item_title">大数据精准教学</div>
-                    <div class="item_info">跟进状态：试用测试</div>
-                    <div class="item_info">联系人：张三 (校长)</div>
-                    <div class="item_info">上次跟进时间：26-08-12 8:00</div>
-                    <div class="item_info">跟进次数：6次</div>
-                </div>
-                <!-- 模拟列表项：普通状态 -->
-                <div class="list_item">
-                    <div class="item_title">智能判分系统</div>
-                    <div class="item_info">跟进状态：试用测试</div>
-                    <div class="item_info">联系人：张三 (校长)</div>
-                </div>
-                 <div class="list_item">
-                    <div class="item_title">材料采集系统</div>
-                    <div class="item_info">跟进状态：试用测试</div>
-                </div>
+
+                <template v-for="(item,index) in productsStatus" :key="item.id" >
+                    <div class="list_item">
+                        <div class="item_title">{{item.name}}</div>
+                        <div class="item_info">跟进状态：{{item.followupStatus}}</div>
+                        <div class="item_info">联系人：{{item.concactPeople}}</div>
+                        <div class="item_info">上次跟进时间：{{item.lastFollowupTime}}</div>
+                        <div class="item_info">跟进次数：{{item.followupTimes}}</div>
+                    </div>
+                    <div v-if="index !== (productsStatus?.length - 1)" class="page_solid_line" />
+                </template>
+                
             </div>
         </div>
 
         <!-- 中间：搜索与历史流程 -->
         <div class="center_panel">
-            <SearchBlock :searchList="searchList"></SearchBlock>
-            <FollowCard style="margin-top: 16px;" :auditList="finalRenderData">
-                <template #operation="{row}">
-                    <div class="table_row_option">
-                        <span class="button_delete">取消预约</span>
-                        <span class="option_button_editor">详情</span>
-                    </div>
-                </template>
-            </FollowCard>
-            <div class="pagination_area">
-                <span>共 352 条数据</span>
-                <div class="pagination_controls">
-                    <span>20条/页</span>
-                    <span class="btn">&lt;</span>
-                    <span class="btn active">1</span>
-                    <span class="btn">2</span>
-                    <span class="btn">3</span>
-                    <span class="btn">&gt;</span>
+            <div class="page_content hide_scrollbar"> 
+                <SearchBlock :searchList="searchList"></SearchBlock>
+                <FollowCard v-if="finalRenderData?.length > 0" style="margin-top: 16px;" :cardList="finalRenderData">
+                    <template #operation="{row}">
+                        <div style="" class="table_row_option">
+                            <span class="button_delete">取消预约</span>
+                            <span class="option_button_editor">详情</span>
+                        </div>
+                    </template>
+                </FollowCard>
+                <div v-else class="no_data_bg">
+                    <span>暂无数据</span>
                 </div>
             </div>
+
+            <Pagination  :currentPage="currentPage" 
+                :pageSize="pageSize" :totalNum="totalNum"  
+                @paginationChange="handlePaginationChange" />
         </div>
 
         <!-- 右侧：待办与统计 -->
         <div class="right_panel">
             <div class="pending_appointments">
                 <div class="panel_header">预约待办 (6项)</div>
-                
-                <div class="todo_card">
-                    <div class="card_top">
-                        <span class="time">26-02-19 16:00</span>
-                        <span class="title">大数据精准教学...</span>
-                        <div class="card_actions">
-                            <span class="link">取消</span>
-                            <span class="link">详情</span>
-                        </div>
-                    </div>
-                    <div class="card_tags">
-                        <span class="tag_btn primary">预约</span>
-                        <span class="tag_btn outline">方案演示</span>
-                    </div>
-                    <div class="card_info">
-                        跟进人：张三 &nbsp; 联系人：严谨 &nbsp; 职务：校长
-                    </div>
-                    <div class="card_desc">
-                        跟进内容：跟进文案跟进文案...北京市东城区惠店西街56号...
-                    </div>
-                </div>
-
-                <div class="todo_card">
-                     <div class="card_top">
-                        <span class="time">26-02-19 16:00</span>
-                        <span class="title">大数据精准教学</span>
-                    </div>
-                    <div class="card_tags">
-                        <span class="tag_btn warning">待办</span>
-                        <span class="tag_btn outline">试用测试</span>
-                    </div>
-                     <div class="card_info">
-                        跟进人：张三 &nbsp; 联系人：严谨 &nbsp; 职务：校长
-                    </div>
-                </div>
+                <ul class="task_list hide_scrollbar">
+                    <template v-if="pendingAppointmentList?.length > 0">
+                        <li  v-for="cardItm in pendingAppointmentList" :key="cardItm.id" class="todo_card">
+                            <div class="card_top">
+                                <span class="time">{{cardItm.createTime}}</span>
+                                <span class="title one_line_ellipsis">{{cardItm.productName}}</span>
+                                <div class="table_row_option">
+                                    <span class="button_editor">详情</span>
+                                </div>
+                            </div>
+                            <div class="card_tags">
+                                <span class="task_type">{{cardItm.taskType}}</span>
+                                <span class="follow_status">{{cardItm.followStatus}}</span>
+                            </div>
+                            <div class="card_info">
+                                <span>跟进人：{{ cardItm.followPeople }}</span>
+                                <span>联系人：{{ cardItm.concactPeople }}</span>
+                                <span>职务：{{ cardItm.position }}</span>
+                            </div>
+                            <div :title="cardItm.followContent" class="card_content two_line_ellipsis">
+                                跟进内容：{{cardItm.followContent}}
+                            </div>
+                        </li>
+                    </template>
+                    <template v-else>
+                        <li class="no_data">
+                            <div class="no_data_bg">
+                                <span>暂无数据</span>
+                            </div>
+                        </li>
+                    </template>
+                </ul>
             </div>
 
             <div class="history_statistics">
                 <div class="stat_header">
                     <span>历史跟进</span>
-                    <button class="history_btn">历史跟进</button>
+                    <el-button class="button_border">历史跟进</el-button>
                 </div>
                 <div class="stat_numbers">
                     <div class="num_item">
-                        <div class="num">10</div>
+                        <div class="num">{{historyFollowData.hsitoryProductNum}}</div>
                         <div class="label">历史产品</div>
                     </div>
+                    <div class="vertical_solid"></div>
                     <div class="num_item">
-                        <div class="num">2</div>
+                        <div class="num">{{historyFollowData.historyPeopleNum}}</div>
                         <div class="label">历史人员</div>
                     </div>
+                    <div class="vertical_solid"></div>
+
                     <div class="num_item">
-                        <div class="num">8</div>
+                        <div class="num">{{historyFollowData.followTimes}}</div>
                         <div class="label">跟进次数</div>
                     </div>
+                    <div class="vertical_solid"></div>
+
                     <div class="num_item">
-                        <div class="num">8</div>
+                        <div class="num">{{historyFollowData.winnerCaseTimes}}</div>
                         <div class="label">赢单次数</div>
                     </div>
                 </div>
@@ -133,16 +124,77 @@ import SearchBlock from '@/baseComponents/SearchBlock.vue';
 import { searchList } from './searchBlock';
 import FollowCard from '@/components/FollowCard.vue';
 
-// 注意：实际开发中可能需要引入 API 获取数据
+import Pagination from '@/baseComponents/Pagination.vue';
+
+
+// 跟进产品总览
+const followUpProductSummary = ref({
+    total:6,
+    differentStatusNum:[
+        {
+            name:'线索建立',
+            num:2
+        },
+        {
+            name:'方案演示',
+            num:1
+        },
+        {
+            name:'试用测试',
+            num:1
+        },
+        {
+            name:'赢单',
+            num:1
+        },
+    ]
+})
+
+interface ProductStatusItm {
+    id:string,
+    name:string,
+    followupStatus:string,
+    concactPeople:string,
+    lastFollowupTime:string,
+    followupTimes:string
+}
+const productsStatus = ref<ProductStatusItm[]>([
+  {
+    id:'1',
+    name: '大数据精准教学',
+    followupStatus: '试用测试',
+    concactPeople: '张三（校长）',
+    lastFollowupTime: '26-08-12 8:00',
+    followupTimes: '6次',
+  },
+  {
+    id:'2',
+    name: '智能判分系统',
+    followupStatus: '试用测试',
+    concactPeople: '张三（校长）',
+    lastFollowupTime: '26-08-12 8:00',
+    followupTimes: '6次',
+  },
+  {
+    id:'3',
+    name: '材料采集系统',
+    followupStatus: '试用测试',
+    concactPeople: '张三（校长）',
+    lastFollowupTime: '26-08-12 8:00',
+    followupTimes: '6次',
+  },
+]);
 
 
-const auditList = ref([
+// 历史跟进记录
+const historyFollowRecord = ref([
     {
         id:'1',
         followUpTime: '26-02-19 19:00',
         schoolName: '北京师达学校',
         followUpProduct: '大数据精准教学',
         followUpStatus: '赢单',
+        audditStatus:'审核中',
         followUpUser: '张三',
         contactPerson: '严谨',
         jobTitle: '校长',
@@ -153,7 +205,8 @@ const auditList = ref([
         followUpTime: '26-02-19 19:00',
         schoolName: '北京师达学校',
         followUpProduct: '大数据精准教学',
-        followUpStatus: '赢单',
+        followUpStatus: '方案演示',
+        taskType:'预约',
         followUpUser: '张三',
         contactPerson: '严谨',
         jobTitle: '校长',
@@ -164,119 +217,184 @@ const auditList = ref([
         followUpTime: '26-02-19 19:00',
         schoolName: '北京师达学校',
         followUpProduct: '大数据精准教学',
-        followUpStatus: '赢单',
+        followUpStatus: '试用测试',
+        taskType:'待办',
         followUpUser: '张三',
         contactPerson: '严谨',
         jobTitle: '校长',
         followUpContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京\n文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号'
     }
 ])
-
-
 const finalRenderData = computed(()=>{
-    return auditList.value.map(item=>{
+    return   historyFollowRecord.value.map(item=>{
+
+        let headerTags = []
+        if(item.followUpStatus){
+            headerTags.push(item.followUpStatus)
+        }
+        if(item.audditStatus){
+            headerTags.push(item.audditStatus)
+        }
         return {
             headerTitleList:[
                 item.followUpTime,
                 item.schoolName,
                 item.followUpProduct
             ],
-            headerTags:[
-                item.followUpStatus,
-            ],
+            headerTags,
             middleDesc:[
                 `跟进人：${item.followUpUser}`,
                 `联系人：${item.contactPerson}`,
                 `职务：${item.jobTitle}`
             ],
+            taskType:item.taskType,
             bottomDesc:`跟进内容：${item.followUpContent}`
         }
     })
 })
+const currentPage = ref(1)
+const pageSize = ref(20)
+const totalNum = ref(0)
+const handlePaginationChange = (params)=>{
+    const {type,val} = params
+    if(type == 'currentPage'){
+        currentPage.value = val
+    }else if(type == 'pageSize'){
+        pageSize.value = val
+    }
+}
+
+// 预约待办项
+interface pendingAppointmentItm {
+    id:string,
+    createTime:string,
+    productName:string,
+    taskType:string,
+    followStatus:string,
+    followPeople:string,
+    concactPeople:string,
+    position:string,
+    followContent:string,
+}
+const pendingAppointmentList = ref<pendingAppointmentItm[]>([
+  {
+    id:'1',
+    createTime: '26-02-19 16:00',
+    productName: '大数据精准教学...',
+    taskType: '预约',
+    followStatus: '方案演示',
+    followPeople: '张三',
+    concactPeople: '严谨',
+    position: '校长',
+    followContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进xxxx...',
+  },
+  {
+    id:'2',
+    createTime: '26-02-19 16:00',
+    productName: '大数据精准教学',
+    taskType: '待办',
+    followStatus: '试用测试',
+    followPeople: '张三',
+    concactPeople: '严谨',
+    position: '校长',
+    followContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进xxxxx...',
+  },
+  {
+    id:'3',
+    createTime: '26-02-19 16:00',
+    productName: '大数据精准教学',
+    taskType: '待办',
+    followStatus: '试用测试',
+    followPeople: '张三',
+    concactPeople: '严谨',
+    position: '校长',
+    followContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进...',
+  },
+])
+
+
+// 历史跟进
+const historyFollowData = ref({
+    hsitoryProductNum:10,
+    historyPeopleNum:2,
+    followTimes:8,
+    winnerCaseTimes:8,
+})
 
 </script>
 
 <style lang="scss" scoped>
-// 定义一些基础颜色变量
-$primary-color: #1890ff;
-$text-main: #333;
-$text-secondary: #666;
-$text-light: #999;
-$border-color: #ebeef5;
-$bg-light: #f8fafc;
-
 .message_overview {
+    overflow: auto;
     display: flex;
+    align-items: flex-start;
     gap: 20px;
-    padding: 20px;
     background-color: #fff;
     font-size: 14px;
-    color: $text-main;
+    color: #333;
+
+    > * {
+        height: 100%;
+        overflow: auto;
+    }
 
     // 左侧栏样式
     .left_panel {
-        width: 240px; // 稍微加宽以容纳内容
+        width: 200px; // 稍微加宽以容纳内容
         display: flex;
         flex-direction: column;
         gap: 16px;
 
         .product_summary {
-            background: $bg-light;
-            border-radius: 8px;
-            padding: 16px;
-            border: 1px solid $border-color;
+            padding:12px;
+            background: #F8FAFE;
+            border-radius: 10px;
+            border: 1px solid #EBEEF5;
+            color: #333333;
 
             .summary_title {
-                font-weight: bold;
+                font-weight: 600;
                 font-size: 16px;
                 margin-bottom: 12px;
+                line-height: 22px;
             }
 
             .summary_tags {
-                display: flex;
-                flex-wrap: wrap;
-                gap: 8px;
-                font-size: 12px;
-                color: $text-secondary;
+                display: grid;
+                grid-template-columns: repeat(2,1fr);
+                gap:16px;
+                font-size: 14px;
+                line-height: 20px;
             }
         }
 
         .product_list {
             display: flex;
             flex-direction: column;
-            gap: 10px;
-
-            .list_item {
-                padding: 12px;
-                border: 1px solid transparent;
-                border-radius: 4px;
-                cursor: pointer;
-                transition: all 0.3s;
-
-                &:hover {
-                    background-color: #f0f7ff;
-                }
+            gap: 16px;
 
-                &.active {
-                    background-color: #e6f7ff;
-                    border-left: 4px solid $primary-color;
-                    border-radius: 0 4px 4px 0; // 调整圆角以适应左边框
-                    
-                    .item_title {
-                        color: $primary-color;
-                        font-weight: bold;
-                    }
-                }
+            padding:12px;
+            background: #F8FAFE;
+            border-radius: 10px;
+            border: 1px solid #EBEEF5;
 
+            .list_item {
+                display: flex;
+                flex-direction: column;
+                gap:4px;
                 .item_title {
-                    font-size: 15px;
-                    margin-bottom: 8px;
+                    line-height: 20px;
+                    font-weight: 600;
+                    font-size: 14px;
+                    color: #333333;
+                    margin-bottom: 4px;
                 }
 
                 .item_info {
+                    line-height: 17px;
+                    font-weight: 400;
                     font-size: 12px;
-                    color: $text-secondary;
-                    line-height: 1.6;
+                    color: #666666;
                 }
             }
         }
@@ -288,37 +406,38 @@ $bg-light: #f8fafc;
         display: flex;
         flex-direction: column;
 
-        
-        .pagination_area {
+        .page_content{
+            flex: 1 1;
+            overflow: auto;
+            padding-bottom: 10px;
             display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-top: 20px;
-            color: $text-secondary;
-            
-            .pagination_controls {
-                display: flex;
-                gap: 5px;
-                align-items: center;
-                
-                .btn {
-                    display: inline-block;
-                    min-width: 28px;
-                    height: 28px;
-                    line-height: 28px;
-                    text-align: center;
-                    border: 1px solid #d9d9d9;
-                    border-radius: 2px;
-                    cursor: pointer;
-                    
-                    &.active {
-                        background-color: $primary-color;
-                        color: #fff;
-                        border-color: $primary-color;
+            flex-direction: column;
+
+            .no_data_bg{
+                flex: 1 1;
+                background-position: 50% 20px;
+                background-size: 200px auto;
+                min-height: 150px;
+                span{
+                    margin-top: 120px;
+                }
+            }
+        }
+        :deep(.follow_card){
+            .table_row_option{
+                display: none;
+            }
+            .audit_card{
+                   &:hover{
+                    border:solid #2E64FA 1px;
+                    background-color: rgba(46, 100, 250,0.04);
+                    .table_row_option{
+                        display: flex;
                     }
                 }
             }
         }
+     
     }
 
     // 右侧栏样式
@@ -326,49 +445,160 @@ $bg-light: #f8fafc;
         width: 320px;
         display: flex;
         flex-direction: column;
-        gap: 20px;
+        justify-content: space-between;
+        gap: 16px;
 
         .pending_appointments {
+            flex:1 1;
+            overflow: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            color: #333333;
+
             .panel_header {
                 font-size: 16px;
-                font-weight: bold;
-                margin-bottom: 12px;
+                line-height: 22px;
+                font-weight: 600;
             }
+            .task_list{
+                flex:1 1;
+                display: flex;
+                flex-direction: column;
+                gap: 16px;
+                overflow: auto;
 
-            .todo_card {
-                background: #fff;
-                border: 1px solid $border-color;
-                border-radius: 8px;
-                padding: 12px;
-                margin-bottom: 12px;
-                box-shadow: 0 2px 6px rgba(0,0,0,0.02);
-
-                .card_top {
+                .todo_card {
                     display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    margin-bottom: 8px;
-                    
-                    .time { font-weight: bold; margin-right: 8px;}
-                    .title { flex: 1; font-weight: bold; }
-                    
-                    .card_actions .link {
+                    flex-direction: column;
+                    gap:8px;
+
+                    border-radius: 8px;
+                    border: 1px solid #EBEEF5;
+                    padding: 12px;
+
+                    .card_top {
+                        display: flex;
+                        justify-content: flex-start;
+                        align-items: center;
+                        gap:8px;
+                        font-weight: 600;
+                        line-height: 20px;
+                        .title{
+                            flex: 1; 
+                        }
+                        .table_row_option {
+                            display: none;
+                            width: auto;
+                            flex-shrink: 0 !important;
+                            font-weight: 400;
+                        }
+                    }
+
+                    .card_tags {
+                        display: flex;
+                        gap:10px;
                         font-size: 12px;
-                        color: $text-light;
-                        margin-left: 8px;
-                        cursor: pointer;
+                        line-height: 17px;
+
+                        >span{
+                            border-radius:4px;
+                            padding:4px 8px;
+                        }
+
+                        .task_type{
+                            color:white;
+                            background: #2E64FA;
+                        }
+                        .follow_status{
+                            background: rgba(46,100,250,0.1);
+                            color:#2E64FA;
+                        }
                     }
-                }
 
-                .card_tags {
-                    margin-bottom: 8px;
-                    .tag_btn {
-                        display: inline-block;
-                        padding: 2px 8px;
-                        border-radius: 4px;
+                    .card_info{
+                        display: flex;
+                        align-items: center;
+                        gap:11px;
                         font-size: 12px;
-                        // margin
+                        line-height: 17px;
                     }
+                    .card_content{
+                        font-size: 12px;
+                        color: #999999;
+                        line-height: 17px;
+                    }
+
+                    
+                    &:hover{
+                        border:solid #2E64FA 1px;
+                        .card_top{
+                            .table_row_option {
+                                display: flex;
+                            }
+                        }
+                    }
+
+                }
+                
+                .no_data{
+                    overflow: hidden;
+                    .no_data_bg{
+                        background-size: 200px auto;
+                        background-position: 50% 10px;
+                        span{
+                            margin-top: 110px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .history_statistics{
+            padding:16px 14px 12px 16px;
+            background: #F8FAFE;
+            border-radius: 10px;
+            border: 1px solid #EBEEF5;
+        
+            .stat_header{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                line-height: 22px;
+                font-weight: 600;
+                font-size: 16px;
+                margin-bottom: 10px;
+                .button_border{
+                    background-color: #f8fafe;
+                }
+            }
+
+            .stat_numbers{
+                display: flex;
+                gap:10px;
+                align-items: center;
+
+                .num_item{
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    color: #666666;
+
+                    .num{
+                        font-weight: 600;
+                        font-size: 16px;
+                        line-height: 24px;
+                    }
+                    .label{
+                        font-size: 14px;
+                        line-height: 20px;
+                    }
+                }
+
+                .vertical_solid{
+                    width: 1px;
+                    height: 32px;
+                    background-color: #EBEEF5;
                 }
             }
         }

src/views/myCustomer/myCustomerDetail/index.vue

@@ -34,7 +34,7 @@
                 @tabChange="HandleTabChange"
                 />
             <div class="page_solid_line" />
-            <div class="page_jg_20"></div>
+            <div class="page_jg_20" style="flex-shrink: 0 !important;"></div>
 
             <!-- 联系人详情 -->
             <ContactDetail v-if="defaultShowTab === 'contactDetails'"/>
@@ -195,5 +195,8 @@ const GetOwnerList = ()=>{
             }
         }
     }
+    .bottom_detail{
+        overflow: auto;
+    }
 }
 </style>