数据看板样式调整

src/views/dashboard/IndexChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page-header-index-wide">
-    <a-row :gutter="24">
-      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
+    <a-row :gutter="24" :style="{ marginBottom: '16px' }">
+      <a-col :sm="24" :md="12" :xl="8" class="ant-col-padding">
         <a-card :bordered="false" class="animate__animated animate__bounceInLeft animate__slow">
           <div class="topSpan topSpanh">
             <div class="topSpanLeft topSpanLeftPad1">
@@ -22,7 +22,7 @@
           </div>
         </a-card>
       </a-col>
-      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
+      <a-col :sm="24" :md="12" :xl="8" class="ant-col-padding">
         <a-card :bordered="false" class="animate__animated animate__bounceInLeft animate__slow">
           <div class="topSpan topSpanh">
             <div class="topSpanLeft topSpanLeftPad1">
@@ -43,7 +43,7 @@
           </div>
         </a-card>
       </a-col>
-      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
+      <a-col :sm="24" :md="12" :xl="8" class="ant-col-padding">
         <a-card :bordered="false" class="animate__animated animate__bounceInLeft animate__slow">
           <div class="topSpan topSpanh">
             <div class="topSpanLeft topSpanLeftPad1">
@@ -66,8 +66,8 @@
       </a-col>
     </a-row>
 
-    <a-row :gutter="24" >
-      <a-col :span="24" :sm="24" :md="12" :xl="12">
+    <a-row :gutter="24" :style="{ marginBottom: '16px' }">
+      <a-col :span="24" :sm="24" :md="12" :xl="12" class="ant-col-padding">
         <a-card :bordered="false" :style="{ marginTop: '0px' ,height: '409px'}" class="animate__animated animate__bounceInLeft animate__slow">
           <a-row  :style="{ marginBottom: '30px'}">
             <a-col :span="6">
@@ -99,7 +99,7 @@
         </a-card>
       </a-col>
 
-      <a-col :span="24" :sm="24" :md="12" :xl="4">
+      <a-col :span="24" :sm="24" :md="12" :xl="4" class="ant-col-padding">
         <a-card :bordered="false" class="animate__animated animate__bounceInLeft animate__slow">
           <div class="total">
             <div class="topSpan topSpanHeight">
@@ -152,7 +152,7 @@
 
       </a-col>
 
-      <a-col :span="24" :sm="24" :md="12" :xl="8">
+      <a-col :span="24" :sm="24" :md="12" :xl="8" class="ant-col-padding">
         <a-card :bordered="false" :style="{ marginTop: '0px',height: '409px'}" class="animate__animated animate__bounceInLeft animate__slow">
           <p style="font-size: 14px;color: #212327;margin: 20px 0 0 20px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;">月度新增用户量对比图</p>
           <bar :dataSource="chartData.monthUserData" :yaxisText="'当月用户量'" :height="340" :barColor="barColor" :padding="barPadding"/>
@@ -160,10 +160,8 @@
       </a-col>
     </a-row>
 
-    <div style="height: 20px"></div>
-
     <a-row :gutter="24" >
-      <a-col :span="24" :sm="24" :md="12" :xl="4">
+      <a-col :span="24" :sm="24" :md="12" :xl="4" class="ant-col-padding">
         <a-card :bordered="false" :style="{ marginTop: '0px'}" class="animate__animated animate__bounceInLeft animate__slow">
           <div class="bottomSpan bottomSpanHeight">
             <div class="bottomSpanLeft">
@@ -190,14 +188,14 @@
 
       </a-col>
 
-      <a-col :span="24" :sm="24" :md="12" :xl="8">
+      <a-col :span="24" :sm="24" :md="12" :xl="8" class="ant-col-padding">
         <a-card :bordered="false" :style="{ marginTop: '0px',height: '269px' }" class="animate__animated animate__bounceInLeft animate__slow">
           <p style="font-size: 14px;color: #212327;margin: 20px 0 0 20px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;">半年度订单数据</p>
           <BaseBar :dataSource="chartData.monthOrderData" :yaxisText="'当月订单量'" :height="218" :barColor="baseBarColor" :padding="baseBarPadding"></BaseBar>
         </a-card>
       </a-col>
 
-      <a-col :span="24" :sm="24" :md="12" :xl="3">
+      <a-col :span="24" :sm="24" :md="12" :xl="3" class="ant-col-padding">
         <a-card :bordered="false" class="animate__animated animate__bounceInLeft animate__slow">
           <div class="bottomSpan bottomSpanHW">
             <div class="bottomSpannext">
@@ -216,7 +214,7 @@
         </a-card>
       </a-col>
 
-      <a-col :span="24" :sm="24" :md="12" :xl="9">
+      <a-col :span="24" :sm="24" :md="12" :xl="9" class="ant-col-padding">
         <a-card :bordered="false" :style="{ marginTop: '0px',height: '269px'}" class="animate__animated animate__bounceInLeft animate__slow">
           <div class="bottomCompany">
             <span class="title">合作企业名称</span>
@@ -400,10 +398,10 @@
             this.totalPayment.startVal=this.totalPayment.endVal;
             this.totalPayment.endVal= res.result[0];
             this.addPayment=res.result[1];
-            //1s后清除
+            //2s后清除
             setTimeout(()=>{
               this.addPayment= 0 ;
-            },1000)
+            },2000)
           }
           if (res.code === 510) {
             this.$message.warning(res.message)
@@ -417,10 +415,10 @@
             this.totalUser.startUserVal=this.totalUser.endUserVal;
             this.totalUser.endUserVal=res.result[0];
             this.addUser=res.result[1];
-            //1s后清除
+            //2s后清除
             setTimeout(()=>{
               this.addUser= 0 ;
-            },1000)
+            },2000)
           }
           if (res.code === 510) {
             this.$message.warning(res.message)
@@ -639,7 +637,6 @@
 <style lang="less" scoped>
 
   /deep/ .ant-card{
-    box-shadow: 0px 2px 8px 0px #D7DCE2;
     border-radius: 4px;
   }
 
@@ -932,8 +929,8 @@
   }
   //动画
   .animated {
-    -webkit-animation-duration: 1s;
-    animation-duration: 1s;
+    -webkit-animation-duration: 2s;
+    animation-duration: 2s;
   }
   .animate__animated {
     -webkit-animation-duration: 1.5s;
@@ -942,5 +939,9 @@
 
     }
   }
+  .ant-col-padding {
+    padding-left: 8px !important;
+    padding-right: 8px !important;
+  }
 
 </style>