feat: 修改合同概况样式

src/assets/css/common.scss

@@ -488,7 +488,9 @@ verticalAlign
 .m-3 {
   margin: 1rem;
 }
-
+.mb-3 {
+  margin-bottom: 1rem;
+}
 .mt-3,
 .my-3 {
   margin-top: 1rem;

src/pages/Contract/Content/Summary/components/Content/index.tsx

@@ -35,8 +35,8 @@ interface iContentProps {
   data: iContentData
   type: 'expenditure' | 'income'
 }
-const Content:React.FC<iContentProps> = ({ data, type }) => {
-  const pieConfig:PieConfig = {
+const Content: React.FC<iContentProps> = ({ data, type }) => {
+  const pieConfig: PieConfig = {
     data: data.pieData,
     autoFit: true,
     padding: 40,
@@ -75,7 +75,7 @@ const Content:React.FC<iContentProps> = ({ data, type }) => {
     yAxis: {
       value: {
         label: {
-          formatter:(val) => `${val} 元`
+          formatter: (val) => `${val} 元`
         }
       },
       count: {
@@ -134,7 +134,7 @@ const Content:React.FC<iContentProps> = ({ data, type }) => {
   }
 
   return (
-    <div className="pi-flex-column pi-justify-between">
+    <div className="pi-flex-column ">
       <div className="card-body card-border">
         <h5 className="card-title">{type === 'expenditure' ? '收入' : '支出'}合同结算进度</h5>
         <div className="mb-0">
@@ -145,20 +145,20 @@ const Content:React.FC<iContentProps> = ({ data, type }) => {
               </div>
             </Tooltip>
             <Tooltip title={type === 'expenditure' ? '未回款：￥' + data.totalPaidPriceShow : '未支付：￥' + data.totalReturnPriceShow}>
-              <div className="progress-bar pi-bg-gray" style={{ width: ((1 - data.progress) * 100) + '%'  }} >
+              <div className="progress-bar pi-bg-gray" style={{ width: ((1 - data.progress) * 100) + '%' }} >
                 {((1 - data.progress) * 100)}%
               </div>
             </Tooltip>
           </div>
         </div>
       </div>
-      <div className="pi-justify-between">
+      <div className="pi-justify-between mb-3 mt-3">
         <div className="pi-flex-sub pi-mg-right-15 card-border pi-mg-right-15">
           <Pie {...pieConfig} />
         </div>
         <div className="pi-flex-sub pi-mg-left-15 pi-mg-left-15">
           <div className="pi-flex-column pi-justify-between">
-            <div className="card-body card-border pi-flex-column">
+            <div className="card-body card-border pi-flex-column pi-justify-between">
               <h5 className="card-title">{formatMoney(data.totalContractPrice)}</h5>
               <span className="pi-text-center">{type === 'expenditure' ? '收入' : '支出'}合同金额</span>
             </div>
@@ -167,7 +167,7 @@ const Content:React.FC<iContentProps> = ({ data, type }) => {
               <span className="pi-text-center">{type === 'expenditure' ? '未回款' : '未支付'}</span>
             </div>
             <div className="card-body card-border pi-flex-column">
-              <h5 className="card-title">{formatMoney(type === 'expenditure' ? data.totalPaidPriceShow: data.totalReturnPriceShow)}</h5>
+              <h5 className="card-title">{formatMoney(type === 'expenditure' ? data.totalPaidPriceShow : data.totalReturnPriceShow)}</h5>
               <span className="pi-text-center">{type === 'expenditure' ? '已回款' : '已支付'}</span>
             </div>
           </div>