feat(个人中心): 我的消息

src/views/personalCenter/component/myMessage.vue

 <template>
   <div class="my-message">
-    我的消息
+    <div class="head">您共有<span style="color:#F96F21 ">50</span>条收藏</div>
+    <div>
+      <el-table
+        :data="myMessageData"
+        :border="false"
+        style="width: 98%"
+      >
+        <el-table-column
+          prop="date"
+          label="消息内容"
+          :show-overflow-tooltip="true"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <span style="color:#3685fc ">{{ scope.row.date }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          label="状态"
+          width="180"
+          :show-overflow-tooltip="true"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.name" type="success">已读</el-tag>
+            <el-tag v-else type="warning">未读</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="address"
+          label="类型"
+          align="center"
+        />
+        <el-table-column
+          prop="address"
+          label="发布时间"
+          width="180"
+          align="center"
+        />
+      </el-table>
+    </div>
+    <div class="pagination">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="100"
+        :page-size="6"
+        @current-change="currentChange"
+      />
+    </div>
   </div>
 </template>
 
@@ -9,7 +59,25 @@ export default {
   name: 'MyMessage',
   data() {
     return {
-
+      myMessageData: [
+        {
+          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 弄'
+        }
+      ]
     }
   },
   created() {
@@ -17,12 +85,43 @@ export default {
   mounted() {
   },
   methods: {
-
+    currentChange(data) {}
   }
 }
 </script>
 
 <style scoped lang="scss">
 .my-message{
+  padding: 20px;
+  ::v-deep .el-table th .cell {
+    justify-content: center;
+  }
+  ::v-deep .el-table td .cell {
+    text-align: center;
+  }
+  ::v-deep .el-table th {
+   border-right: none;
+  }
+  ::v-deep .el-table td {
+    border-right: none;
+  }
+  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
+    color: #fff;
+    background: #3684fc;
+  }
+  ::v-deep  .el-pagination.is-background .el-pager li {
+    background-color: #fff;
+  }
+  .pagination{
+    display: flex;
+    justify-content: center;
+    margin-top: 32px;
+  }
+  .head{
+    font-size: 16px;
+    font-weight: 400;
+    color: #292929;
+    margin-bottom: 24px;
+  }
 }
 </style>