Merge pull request #54 from jumpserver/dashboard

Dashboard

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>

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'

src/views/dashboard/index.vue

@@ -1,21 +1,42 @@
 <template>
-  <h1>hello</h1>
+  <Page>
+    <el-row :gutter="20">
+      <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"><SummaryCard /></el-col>
+      <el-col :span="16"><SummaryCard /></el-col>
+      <el-col :span="4"><SummaryCard /></el-col>
+    </el-row>
+    <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'
+  name: 'Dashboard',
+  components: {
+    Page, SummaryCard
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-.dashboard {
-  &-container {
-    margin: 30px;
+  .el-row {
+    margin-bottom: 25px;
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
+
 </style>