首页微调

src/views/dashboard/admin/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dashboard-editor-container">
+  <div v-loading="listLoading" class="dashboard-editor-container">
     <el-row :gutter="22" style="min-height: calc(100vh - 84px);">
       <el-col :xs="24" :sm="24" :lg="12">
         <div class="chart-wrapper">
@@ -103,6 +103,7 @@ export default {
   },
   data() {
     return {
+      listLoading: true,
       isRequest: false,
       isOrderRequest: false,
       isSaleRequest: false,
@@ -136,10 +137,14 @@ export default {
   },
   methods: {
     fetchData() {
+      this.listLoading = true
       this.handleGetReceivable()
       this.handleGetHomepageOrder()
       this.handleGetHomepageSale()
       this.handleGetHomepageCommodity()
+      setTimeout(function() {
+        this.listLoading = false
+      }, 5000)
     },
     handleGetReceivable() {
       getReceivable(this.Receivable).then(response => {
@@ -148,7 +153,7 @@ export default {
         const receob = { name: '已收金额', value: response.data.amountReceived }
         const receob1 = { name: '未收金额', value: response.data.uncollected }
         this.ReceivableData = [receob, receob1]
-        console.log(this.ReceivableData)
+        this.listLoading = false
       })
     },
     handleGetHomepageOrder() {
@@ -159,6 +164,7 @@ export default {
         const order1 = { name: '未收款订单', value: response.data.uncollected }
         const order2 = { name: '部分收款订单', value: response.data.portion }
         this.OrderData = [order, order1, order2]
+        this.listLoading = false
       })
     },
     handleGetHomepageSale() {
@@ -166,12 +172,14 @@ export default {
         this.isSaleRequest = true
         this.monthData = response.data.month
         this.payTotalFeeData = response.data.payTotalFee
+        this.listLoading = false
       })
     },
     handleGetHomepageCommodity() {
       getHomepageCommodity(this.Commodity).then(response => {
         this.isGoodRequest = true
         this.goodsList = response.data
+        this.listLoading = false
       })
     },
     numFormat(num) {
@@ -186,14 +194,7 @@ export default {
 .dashboard-editor-container {
   padding: 22px;
   min-height: calc(100vh - 84px);
-  background-color: rgba(43, 67, 94, 1);
   position: relative;
-  .github-corner {
-    position: absolute;
-    top: 0px;
-    border: 0;
-    right: 0;
-  }
   .chart-wrapper {
     background: #fff;
     padding: 0 16px 0;
@@ -201,6 +202,8 @@ export default {
     height: 475px;
     border-radius: 10px;
     position: relative;
+    -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 0 3px 0 rgba(0,0,0,0.04);
+    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 0 3px 0 rgba(0,0,0,0.04);
     .chartText{
       width: 130px;
       height: 140px;