perf[style]: refine dashboard style in mobile (#2060)

Author: PanJiaChen

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()

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) {

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,61 +88,94 @@ 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;
       padding: 16px;
       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>

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',

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()

src/views/dashboard/admin/index.vue

@@ -115,4 +115,10 @@ export default {
     margin-bottom: 32px;
   }
 }
+
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
 </style>