优化

src/views/saleManage/contact/components/drawer.vue

@@ -17,20 +17,33 @@
 
     <div class="ele-body" style="height: 100%">
       <div style="width: calc(100% - 350px); height: 100%">
-        <headerTitle title="摘要卡片" style="margin-top: 15px"></headerTitle>
+        <!-- <headerTitle title="摘要卡片" style="margin-top: 15px"></headerTitle> -->
 
         <div class="card">
-          <span
-            >销售订单总额：
-            {{ contactCountData.totalAmountSaleOrder }}
-          </span>
-          <span>
-            退货单总额： {{ contactCountData.totalAmountSaleOrderRecord }}</span
-          >
-          <span>回款总额： {{ contactCountData.totalAmountReturn }}</span>
-          <span> 退款总额： {{ contactCountData.totalAmountRecord }}</span>
-          <span
-            >待回款总额： {{ contactCountData.totalAmountTreatReturn }}</span
+          <div
+            >
+            <span> 销售订单总额</span>
+            <span class="value">{{ contactCountData.totalAmountSaleOrder }}
+            &nbsp;&nbsp;元
+            </span>
+           
+         
+          </div>
+          <div>
+            <span> 退货单总额</span>
+            <span class="value">{{ contactCountData.totalAmountSaleOrderRecord }} 
+              &nbsp;&nbsp;元</span>
+            </div >
+          <div>   
+            <span> 回款总额</span>
+            <span class="value">{{ contactCountData.totalAmountReturn }}&nbsp;&nbsp;元</span></div>
+          <div>
+            <span> 退款总额</span>
+            <span class="value">{{ contactCountData.totalAmountRecord }}&nbsp;&nbsp;元</span></div>
+          <div
+            >
+            <span> 待回款总额</span>
+            <span class="value">{{ contactCountData.totalAmountTreatReturn }}&nbsp;&nbsp;元</span></div
           >
         </div>
         <el-tabs v-model="activeName" style="height: calc(100% - 124px)">
@@ -315,9 +328,23 @@ export default {
   display: flex;
   padding: 15px;
   font-size: 16px;
-  span {
-    flex: 1;
-  }
+  >div{
+    flex:1;
+    margin:0px 20px ;
+    background: #1890ff;
+    color:#fff;
+    display: flex;
+    flex-direction:column;
+    align-items: center;
+    justify-content: center;
+    padding: 12px;
+    border-radius: 10px;
+    .value{
+      margin-top:8px
+    }
+   
+   }
+ 
 }
 .title {
   span {

src/views/saleManage/saleOrder/components/drawer.vue

@@ -14,26 +14,49 @@
     <headerTitle title="摘要卡片" style="margin-top: 15px"></headerTitle>
 
     <div class="card">
-      <span>订单数量：
-        {{ orderNoCountData.saleOrderNumber }}
-      </span>
-      <span>订单总金额：
-        {{ orderNoCountData.totalAmountSaleOrder }}
-      </span>
-      <span>应收款：
-        {{ orderNoCountData.receivable }}
-      </span>
-      <span>发货数量：
-        {{ orderNoCountData.sendNumber }}
+      <div>
+        <span> 订单数量</span>
+        <span class="value"
+          >{{ orderNoCountData.saleOrderNumber }}
+          &nbsp;&nbsp;元
+        </span>
+      </div>
+      <div>
+        <span> 订单总金额</span>
+        <span class="value"
+          >{{ orderNoCountData.totalAmountSaleOrder }}
+          &nbsp;&nbsp;元
+        </span>
+      </div>
+      <div>
+        <span> 应收款</span>
+        <span class="value"
+          >{{ orderNoCountData.receivable }}
+          &nbsp;&nbsp;元
+        </span>
+      </div>
+      <div>
+        <span> 发货数量</span>
+        <span class="value"
+          >{{ orderNoCountData.sendNumber }}
+          &nbsp;&nbsp;元
+        </span>
+      </div>
+      <div>
+        <span> 退货数量</span>
+        <span class="value"
+          >{{ orderNoCountData.returnNumber }}
+          &nbsp;&nbsp;元
+        </span>
+      </div>
+      <div>
+        <span> 退货金额</span>
+        <span class="value"
+          >{{ orderNoCountData.returnAmount }}
+          &nbsp;&nbsp;元
+        </span>
+      </div>
 
-      </span>
-      <span>退货数量：
-        {{ orderNoCountData.returnNumber }}
-
-      </span>
-      <span> 退货金额：
-        {{ orderNoCountData.returnAmount }}
-      </span>
       <!-- <span>预计结单日期：</span> -->
     </div>
     <div class="ele-body" style="height: calc(100% - 124px)">
@@ -229,4 +252,24 @@ export default {
     color: #40a9ff;
   }
 }
+.card {
+  display: flex;
+  padding: 15px;
+  font-size: 16px;
+  > div {
+    flex: 1;
+    margin: 0px 20px;
+    background: #1890ff;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 12px;
+    border-radius: 10px;
+    .value {
+      margin-top: 8px;
+    }
+  }
+}
 </style>