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>