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>