增加我的工作台界面

src/views/workbench/workbench.vue

@@ -1,72 +1,118 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="15">
+    <el-row :gutter="10" >
       <el-col :span="6">
-        <el-card style="width: 300px;height: 150px;background-color: #1ab394" >
-          <div style="color: white;display: flex;justify-content: center;align-items: center;">
+        <el-card class="card" >
+          <div style="color: white;">
             <h2>待办事项</h2>
           </div>
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card style="width: 300px;height: 150px;background-color: indianred" >
-          <div style="color: white;display: flex;justify-content: center;align-items: center;">
+        <el-card class="card" style="background-color: indianred" >
+          <div style="color: white">
             <h2>我的项目</h2>
           </div>
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card style="width: 300px;height: 150px;background-color:steelblue" >
-          <div style="color: white;display: flex;justify-content: center;align-items: center;">
+        <el-card class="card" style="background-color:steelblue" >
+          <div style="color: white;">
             <h2>出勤状态:上班</h2>
           </div>
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card style="width: 300px;height: 150px;background-color:steelblue" >
-          <div style="color: white;display: flex;justify-content: center;align-items: center;">
+        <el-card class="card" style="background-color:goldenrod" >
+          <div style="color: white;">
             <h2>其他事项</h2>
           </div>
         </el-card>
       </el-col>
     </el-row>
 
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <el-table
+          :data="tableData"
+          style="width: 100%">
+          <el-table-column
+            prop="date"
+            label="日期"
+            width="180">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="姓名"
+            width="180">
+          </el-table-column>
+          <el-table-column
+            prop="address"
+            label="地址">
+          </el-table-column>
+        </el-table>
+      </el-col>
+      <el-col :span="12">
+        <el-table
+          :data="tableData"
+          style="width: 100%">
+          <el-table-column
+            prop="date"
+            label="日期"
+            width="180">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="姓名"
+            width="180">
+          </el-table-column>
+          <el-table-column
+            prop="address"
+            label="地址">
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+
   </div>
 </template>
 
 <script>
 export default {
-  name: 'workbench'
+  name: 'workbench',
+  data() {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    }
+  }
 }
 </script>
 
 <style scoped>
 
-.el-row {
-  margin-bottom: 20px;
-&:last-child {
-   margin-bottom: 0;
- }
-}
-.el-col {
-  border-radius: 4px;
-}
-.bg-purple-dark {
-  background: #99a9bf;
-}
-.bg-purple {
-  background: #d3dce6;
-}
-.bg-purple-light {
-  background: #e5e9f2;
-}
-.grid-content {
-  border-radius: 4px;
-  min-height: 36px;
-}
-.row-bg {
-  padding: 10px 0;
-  background-color: #f9fafc;
+.card{
+  width: 300px;
+  height: 150px;
+  background-color: #1ab394;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 </style>