客户画像页面优化

src/views/customer/portrait/com/SaleStatistics.vue

@@ -5,7 +5,7 @@
         <div class="money">
           {{ moneyFormat(detailsData.amount, 2) }}
         </div>
-        <div>销售额（{{ detailsData.currency || "￥" }}）</div>
+        <div style="font-size: 12px !important">销售额（{{ detailsData.currency || "￥" }}）</div>
       </div>
       <div class="right_">
         <div class="icon">
@@ -13,12 +13,12 @@
         </div>
       </div>
     </div>
-    <div class="item two">
+    <div class="item two" style="margin-left: 20px">
       <div class="left_">
         <div class="money">
           {{ moneyFormat(detailsData.profitAmount, 2) }}
         </div>
-        <div>利润额（￥）</div>
+        <div style="font-size: 12px !important">利润额（￥）</div>
       </div>
       <div class="right_">
         <div class="icon">
@@ -26,12 +26,12 @@
         </div>
       </div>
     </div>
-    <div class="item three">
+    <div class="item three" style="margin-left: 20px">
       <div class="left_">
         <div class="money">
           {{ detailsData.mailCount || 0 }}
         </div>
-        <div>往来邮件（封）</div>
+        <div style="font-size: 12px !important">往来邮件（封）</div>
       </div>
       <div class="right_">
         <div class="icon">
@@ -39,12 +39,12 @@
         </div>
       </div>
     </div>
-    <div class="item four">
+    <div class="item four" style="margin-left: 20px">
       <div class="left_">
         <div class="money">
           {{ detailsData.count || 0 }}
         </div>
-        <div>报价次数（次）</div>
+        <div style="font-size: 12px !important">报价次数（次）</div>
       </div>
       <div class="right_">
         <div class="icon">
@@ -52,12 +52,12 @@
         </div>
       </div>
     </div>
-    <div class="item five">
+    <div class="item five" style="margin-left: 20px">
       <div class="left_">
         <div class="money">
           {{ detailsData.contractCount || 0 }}
         </div>
-        <div>成交合同（单）</div>
+        <div style="font-size: 12px !important">成交合同（单）</div>
       </div>
       <div class="right_">
         <div class="icon">
@@ -79,16 +79,14 @@ let detailsData = ref({});
 const { proxy } = getCurrentInstance();
 const getData = () => {
   loading.value = true;
-  proxy
-    .post("/saleQuotation/salesStatistics", { id: props.customerId })
-    .then((res) => {
-      if (res.contractVo) {
-        detailsData.value = res.contractVo;
-      }
-      setTimeout(() => {
-        loading.value = false;
-      }, 200);
-    });
+  proxy.post("/saleQuotation/salesStatistics", { id: props.customerId }).then((res) => {
+    if (res.contractVo) {
+      detailsData.value = res.contractVo;
+    }
+    setTimeout(() => {
+      loading.value = false;
+    }, 200);
+  });
 };
 onMounted(() => {
   if (props.customerId) {
@@ -101,12 +99,12 @@ onMounted(() => {
 .details {
   // margin-top: 10px;
   display: flex;
-  justify-content: space-around;
+  // justify-content: space-around;
   .item {
     border-radius: 10px;
-    width: 13vw;
-    height: 70px;
-    padding: 10px;
+    width: calc((100% - 80px) / 5);
+    // height: 70px;
+    padding: 20px;
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
@@ -117,7 +115,8 @@ onMounted(() => {
       .money {
         font-weight: 700;
         color: #333333;
-        font-size: 15px;
+        font-size: 24px;
+        margin-bottom: 10px;
       }
     }
     .right_ {
@@ -129,7 +128,7 @@ onMounted(() => {
         }
         width: 34px;
         height: 34px;
-        margin-top: 10px;
+        // margin-top: 10px;
         border-radius: 8px;
         background-color: #ffffff;
         text-align: center;
@@ -153,4 +152,4 @@ onMounted(() => {
     background: linear-gradient(#ffebe9, #ffebe9);
   }
 }
-</style>
+</style>

src/views/customer/portrait/index.vue

@@ -7,24 +7,17 @@
             <TitleInfo :content="titleList[0]"></TitleInfo>
           </div>
           <div>
-            <CustomerInfo
-              :customerId="customerId"
-              :key="customerId"
-            ></CustomerInfo>
+            <CustomerInfo :customerId="customerId" :key="customerId"></CustomerInfo>
           </div>
         </div>
       </div>
-
       <div class="bottom bck">
         <div class="scroll">
           <div class="title-box">
             <TitleInfo :content="titleList[1]"></TitleInfo>
           </div>
           <div class="content-box">
-            <LatestProgress
-              :customerId="customerId"
-              :key="customerId"
-            ></LatestProgress>
+            <LatestProgress :customerId="customerId" :key="customerId"></LatestProgress>
           </div>
         </div>
       </div>
@@ -36,14 +29,10 @@
             <TitleInfo :content="titleList[2]"></TitleInfo>
           </div>
           <div class="content-box">
-            <SaleStatistics
-              :customerId="customerId"
-              :key="customerId"
-            ></SaleStatistics>
+            <SaleStatistics :customerId="customerId" :key="customerId"></SaleStatistics>
           </div>
         </div>
       </div>
-
       <div class="box-two bck">
         <div class="scroll">
           <div class="title-box">
@@ -54,17 +43,13 @@
           </div>
         </div>
       </div>
-
       <div class="box-three bck">
         <div class="scroll">
           <div class="title-box">
             <TitleInfo :content="titleList[4]"></TitleInfo>
           </div>
           <div class="content-box">
-            <SalesDetails
-              :customerId="customerId"
-              :key="customerId"
-            ></SalesDetails>
+            <SalesDetails :customerId="customerId" :key="customerId"></SalesDetails>
           </div>
         </div>
       </div>
@@ -94,11 +79,8 @@ onMounted(() => {
   display: flex;
   padding: 10px;
   height: calc(100vh - 120px);
-  // overflow-y: auto;
-
   .left {
     width: 400px;
-    margin-right: 10px;
     display: flex;
     flex-direction: column;
     height: calc(100vh - 120px);
@@ -113,15 +95,13 @@ onMounted(() => {
     }
   }
   .right {
+    width: calc(100% - 400px);
+    margin-left: 10px;
     flex: 1;
     display: flex;
     flex-direction: column;
     height: calc(100vh - 120px);
-    // .box-one {
-    //   padding-bottom: 10px;
-    // }
     .box-three {
-      // flex: 1;
       min-height: 200px;
     }
     .box-two {
@@ -149,4 +129,4 @@ onMounted(() => {
     overflow-y: auto;
   }
 }
-</style>
+</style>