From 7b0d527bf90a3391c17586215f3012c9855d0176 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Fri, 10 May 2019 18:39:05 +0800
Subject: [PATCH] perf[style]: refine dashboard style in mobile (#2060)

---
 .../dashboard/admin/components/BarChart.vue   |  4 +-
 .../dashboard/admin/components/LineChart.vue  |  5 ++-
 .../dashboard/admin/components/PanelGroup.vue | 39 ++++++++++++++++++-
 .../dashboard/admin/components/PieChart.vue   |  5 ++-
 .../admin/components/RaddarChart.vue          |  4 +-
 src/views/dashboard/admin/index.vue           |  6 +++
 6 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/src/views/dashboard/admin/components/BarChart.vue b/src/views/dashboard/admin/components/BarChart.vue
index fa265ef6..47e7a110 100644
--- a/src/views/dashboard/admin/components/BarChart.vue
+++ b/src/views/dashboard/admin/components/BarChart.vue
@@ -30,7 +30,9 @@ export default {
     }
   },
   mounted() {
-    this.initChart()
+    this.$nextTick(() => {
+      this.initChart()
+    })
     this.__resizeHandler = debounce(() => {
       if (this.chart) {
         this.chart.resize()
diff --git a/src/views/dashboard/admin/components/LineChart.vue b/src/views/dashboard/admin/components/LineChart.vue
index 2e05102d..d567f08d 100644
--- a/src/views/dashboard/admin/components/LineChart.vue
+++ b/src/views/dashboard/admin/components/LineChart.vue
@@ -45,7 +45,10 @@ export default {
     }
   },
   mounted() {
-    this.initChart()
+    this.$nextTick(() => {
+      this.initChart()
+    })
+
     if (this.autoResize) {
       this.__resizeHandler = debounce(() => {
         if (this.chart) {
diff --git a/src/views/dashboard/admin/components/PanelGroup.vue b/src/views/dashboard/admin/components/PanelGroup.vue
index 34a6709b..589236ed 100644
--- a/src/views/dashboard/admin/components/PanelGroup.vue
+++ b/src/views/dashboard/admin/components/PanelGroup.vue
@@ -73,9 +73,11 @@ export default {
 <style lang="scss" scoped>
 .panel-group {
   margin-top: 18px;
-  .card-panel-col{
+
+  .card-panel-col {
     margin-bottom: 32px;
   }
+
   .card-panel {
     height: 108px;
     cursor: pointer;
@@ -86,35 +88,45 @@ export default {
     background: #fff;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
+
     &:hover {
       .card-panel-icon-wrapper {
         color: #fff;
       }
+
       .icon-people {
-         background: #40c9c6;
+        background: #40c9c6;
       }
+
       .icon-message {
         background: #36a3f7;
       }
+
       .icon-money {
         background: #f4516c;
       }
+
       .icon-shopping {
         background: #34bfa3
       }
     }
+
     .icon-people {
       color: #40c9c6;
     }
+
     .icon-message {
       color: #36a3f7;
     }
+
     .icon-money {
       color: #f4516c;
     }
+
     .icon-shopping {
       color: #34bfa3
     }
+
     .card-panel-icon-wrapper {
       float: left;
       margin: 14px 0 0 14px;
@@ -122,25 +134,48 @@ export default {
       transition: all 0.38s ease-out;
       border-radius: 6px;
     }
+
     .card-panel-icon {
       float: left;
       font-size: 48px;
     }
+
     .card-panel-description {
       float: right;
       font-weight: bold;
       margin: 26px;
       margin-left: 0px;
+
       .card-panel-text {
         line-height: 18px;
         color: rgba(0, 0, 0, 0.45);
         font-size: 16px;
         margin-bottom: 12px;
       }
+
       .card-panel-num {
         font-size: 20px;
       }
     }
   }
 }
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
 </style>
diff --git a/src/views/dashboard/admin/components/PieChart.vue b/src/views/dashboard/admin/components/PieChart.vue
index ff1bc52c..d5d59ff3 100644
--- a/src/views/dashboard/admin/components/PieChart.vue
+++ b/src/views/dashboard/admin/components/PieChart.vue
@@ -28,7 +28,9 @@ export default {
     }
   },
   mounted() {
-    this.initChart()
+    this.$nextTick(() => {
+      this.initChart()
+    })
     this.__resizeHandler = debounce(() => {
       if (this.chart) {
         this.chart.resize()
@@ -58,7 +60,6 @@ export default {
           bottom: '10',
           data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
         },
-        calculable: true,
         series: [
           {
             name: 'WEEKLY WRITE ARTICLES',
diff --git a/src/views/dashboard/admin/components/RaddarChart.vue b/src/views/dashboard/admin/components/RaddarChart.vue
index de70e523..cd2257b0 100644
--- a/src/views/dashboard/admin/components/RaddarChart.vue
+++ b/src/views/dashboard/admin/components/RaddarChart.vue
@@ -30,7 +30,9 @@ export default {
     }
   },
   mounted() {
-    this.initChart()
+    this.$nextTick(() => {
+      this.initChart()
+    })
     this.__resizeHandler = debounce(() => {
       if (this.chart) {
         this.chart.resize()
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index a766f04a..8cb557be 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -115,4 +115,10 @@ export default {
     margin-bottom: 32px;
   }
 }
+
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
 </style>