优化首页待办细节

src/views/dashboard/IndexChart.vue

@@ -2,66 +2,45 @@
   <div class="page-header-index-wide">
     <a-row :gutter="24">
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="入驻物业公司数量" :total="statistical.settledNum | NumberFormat">
-          <a-tooltip slot="action">
-            <a-icon type="container" />
-          </a-tooltip>
+        <div class="statistics">
+          <div class="icon" style="color:#1890ff;"><a-icon type="home" color="#1890ff" /></div>
           <div>
-            <mini-bar :height="40" />
+            <p style="color:#666;margin-bottom:5px;">入驻物业公司数量</p>
+            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{statistical.settledNum}}
+              <span v-if="statistical.monthSettledNum > 0"><a-icon type="arrow-up" color="#1890ff" />{{ statistical.monthSettledNum }}</span></p>
           </div>
-          <template slot="footer">
-            <trend flag="up" style="margin-right: 16px;">
-              <span slot="term">月新增</span>
-              {{ statistical.monthSettledNum }}
-            </trend>
-          </template>
-        </chart-card>
+        </div>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="累计物业社区数量" :total="statistical.communityNum | NumberFormat">
-          <a-tooltip slot="action">
-            <a-icon type="line-chart" />
-          </a-tooltip>
+        <div class="statistics">
+          <div class="icon" style="color:#7262fd;"><a-icon type="team" /></div>
           <div>
-            <mini-area :height="40" />
+            <p style="color:#666;margin-bottom:5px;">累计物业社区数量</p>
+            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{statistical.communityNum}}</p>
           </div>
-          <template slot="footer">
-            <div style="height: 22px;"></div>
-          </template>
-        </chart-card>
+        </div>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="累计小区数量" :total="statistical.communityNum | NumberFormat">
-          <a-tooltip slot="action">
-            <a-icon type="bar-chart" />
-          </a-tooltip>
+        <div class="statistics">
+          <div class="icon" style="color:#ffaa00;"><a-icon type="bar-chart" /></div>
           <div>
-            <mini-bar :height="40" />
+            <p style="color:#666;margin-bottom:5px;">累计小区数量</p>
+            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{statistical.communityNum}}</p>
           </div>
-          <template slot="footer">
-            <div style="height: 22px;"></div>
-          </template>
-        </chart-card>
+        </div>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="累计业主数量" :total="statistical.ownerNum | NumberFormat">
-          <a-tooltip slot="action">
-            <a-icon type="area-chart" />
-          </a-tooltip>
+        <div class="statistics">
+          <div class="icon" style="color:#52c41a;"><a-icon type="line-chart" /></div>
           <div>
-            <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8" />
+            <p style="color:#666;margin-bottom:5px;">累计物业社区数量</p>
+            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{statistical.ownerNum}}
+              <span v-if="statistical.monthOwnerNum > 0"><a-icon type="arrow-up" color="#1890ff" />{{ statistical.monthOwnerNum }}</span></p>
           </div>
-          <template slot="footer">
-            <trend flag="up" style="margin-right: 16px;">
-              <span slot="term">月新增</span>
-              {{ statistical.monthOwnerNum }}
-            </trend>
-          </template>
-        </chart-card>
+        </div>
       </a-col>
     </a-row>
-
-    <div class="wait-box" style="margin-bottom: 15px;">
+    <div class="wait-box" style="margin-bottom: 25px;">
       <h3 class="box-title">待处理事务（入驻待审核）</h3>
       <div class="content">
         <div class="item" v-for="(item, index) in waitAuditList" :key="index">
@@ -205,7 +184,7 @@ export default {
             id: record.id,
             auditStatus: 'refuse',
           }).then((res) => {
-            that.getDataStatistics();
+            that.getDataStatistics()
           })
         },
       })
@@ -288,6 +267,37 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.page-header-index-wide {
+  padding: 16px;
+  .statistics {
+    // flex: none;
+    background: #fff;
+    width: 100%;
+    height: 90px;
+    box-sizing: border-box;
+    border: 1px solid #e0dfdf;
+    display: flex;
+    align-items: center;
+    padding-left: 20px;
+    .icon {
+      width: 60px;
+      height: 60px;
+      border-radius: 60px;
+      margin-right: 12px;
+      display: flex;
+      text-align: center;
+      align-items: center;
+      justify-content: center;
+      .anticon {
+        font-size: 50px;
+      }
+    }
+    span {
+      font-size: 14px;
+      color: #1890ff;
+    }
+  }
+}
 .map-box {
   background-color: #fff;
   padding: 20px;