From c19e8974928012edc19a508e4a8acdda90dbf05c Mon Sep 17 00:00:00 2001
From: Bai <bugatti_it@163.com>
Date: Fri, 15 May 2020 13:30:10 +0800
Subject: [PATCH 1/2] [Update] Dashboard (1)

---
 src/views/dashboard/index.vue | 54 ++++++++++++++++++++++++++++++-----
 1 file changed, 47 insertions(+), 7 deletions(-)

diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index c79eb4f5e..b1377420a 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,21 +1,61 @@
 <template>
-  <h1>hello</h1>
+  <Page>
+    <el-row :gutter="20">
+      <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
+      <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
+      <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
+      <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+      <el-col :span="16"><div class="grid-content bg-purple" /></el-col>
+      <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+    </el-row>
+    <el-row type="flex" class="row-bg" justify="space-between">
+      <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
+      <el-col :span="6"><div class="grid-content bg-purple-light" /></el-col>
+      <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
+    </el-row>
+  </Page>
 </template>
 
 <script>
+import { Page } from '@/layout/components'
+
 export default {
-  name: 'Dashboard'
+  name: 'Dashboard',
+  components: {
+    Page
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .dashboard {
-  &-container {
-    margin: 30px;
+  .el-row {
+    margin-bottom: 20px;
+    min-height: 10px;
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
+  .el-col {
+    border-radius: 4px;
+    background-color: #000;
+  }
+  .bg-purple {
+    background: #000;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .bg-purple-light {
+    background: #000;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #000;
   }
 }
 </style>

From ad18663a39c6ef264e20ec9f3f537055874b880e Mon Sep 17 00:00:00 2001
From: Bai <bugatti_it@163.com>
Date: Mon, 18 May 2020 12:02:19 +0800
Subject: [PATCH 2/2] [Update] Dashboard (2)

---
 src/components/SummaryCard/index.vue | 25 ++++++++++++++
 src/components/index.js              |  1 +
 src/views/dashboard/index.vue        | 49 +++++++++-------------------
 3 files changed, 41 insertions(+), 34 deletions(-)
 create mode 100644 src/components/SummaryCard/index.vue

diff --git a/src/components/SummaryCard/index.vue b/src/components/SummaryCard/index.vue
new file mode 100644
index 000000000..f32436979
--- /dev/null
+++ b/src/components/SummaryCard/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <el-card>
+    <div slot="header">
+      <span>卡片名称</span>
+      <span class="pull-right">卡片标签</span>
+    </div>
+    <div>
+      <span>卡片内容</span>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'SummaryCard',
+  props: {
+  }
+}
+</script>
+
+<style scoped>
+  .pull-right {
+    float: right!important;
+  }
+</style>
diff --git a/src/components/index.js b/src/components/index.js
index bbe16c10c..00b65eca4 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -19,3 +19,4 @@ export { default as TreeTable } from './TreeTable'
 export { default as IBox } from './IBox'
 export { default as QuickActions } from './QuickActions'
 export { default as Switcher } from './Swicher'
+export { default as SummaryCard } from './SummaryCard'
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index b1377420a..8584b25a7 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,61 +1,42 @@
 <template>
   <Page>
     <el-row :gutter="20">
-      <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
-      <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
-      <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
-      <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
+      <el-col :span="6"><SummaryCard /></el-col>
+      <el-col :span="6"><SummaryCard /></el-col>
+      <el-col :span="6"><SummaryCard /></el-col>
+      <el-col :span="6"><SummaryCard /></el-col>
     </el-row>
     <el-row :gutter="20">
-      <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
-      <el-col :span="16"><div class="grid-content bg-purple" /></el-col>
-      <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+      <el-col :span="4"><SummaryCard /></el-col>
+      <el-col :span="16"><SummaryCard /></el-col>
+      <el-col :span="4"><SummaryCard /></el-col>
     </el-row>
-    <el-row type="flex" class="row-bg" justify="space-between">
-      <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
-      <el-col :span="6"><div class="grid-content bg-purple-light" /></el-col>
-      <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
+    <el-row :gutter="20">
+      <el-col :span="8"><SummaryCard /></el-col>
+      <el-col :span="8"><SummaryCard /></el-col>
+      <el-col :span="8"><SummaryCard /></el-col>
     </el-row>
   </Page>
 </template>
 
 <script>
 import { Page } from '@/layout/components'
+import { SummaryCard } from '@/components'
 
 export default {
   name: 'Dashboard',
   components: {
-    Page
+    Page, SummaryCard
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.dashboard {
   .el-row {
-    margin-bottom: 20px;
-    min-height: 10px;
+    margin-bottom: 25px;
     &:last-child {
       margin-bottom: 0;
     }
   }
-  .el-col {
-    border-radius: 4px;
-    background-color: #000;
-  }
-  .bg-purple {
-    background: #000;
-  }
-  .grid-content {
-    border-radius: 4px;
-    min-height: 36px;
-  }
-  .bg-purple-light {
-    background: #000;
-  }
-  .row-bg {
-    padding: 10px 0;
-    background-color: #000;
-  }
-}
+
 </style>