src/views/message/messageList.vue

@@ -26,27 +26,71 @@
 
 
 
-    <div class="down">
-
+      <div class="down">
+        
+        <div class="down-add">
+          <el-row :gutter="24">
+          <el-col :span="22" class="down-title"> <i class="el-icon-tickets">消息列表</i> </el-col>
+          <el-col :span="2"> <el-button>添加</el-button> </el-col>
+          </el-row>
+        </div>
+        
+        <div class="down-table">
+          <el-table :data="tableData" border style="width: 100%" class="messagetable">
+            <el-table-column
+              prop="id"
+              label="ID"
+              >
+            </el-table-column>
+            <el-table-column
+              prop="messageTitle"
+              label="消息标题"
+              >
+            </el-table-column>
+            <el-table-column
+              prop="messageTitle"
+              label="消息标题"
+              >
+            </el-table-column>
+            <el-table-column
+              prop="phoneNumber"
+              label="手机号"
+              >
+            </el-table-column>
+            <el-table-column
+              prop="publishTime"
+              label="发布时间"
+              >
+            </el-table-column>
+            <el-table-column
+              prop="operate"
+              label="操作">
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="bottom-page"><el-pagination background layout="prev, pager, next" :total="1"></el-pagination></div>
+        <span class="bottom-number">共{{ 0 }}条 </span>
+      </div>
+     
     </div>
-  </div>
+
+
+
 </template>
 
 <script>
-// 使用 Mock
-var Mock = require('mockjs')
-var data = Mock.mock({
-    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
-    'list|1-10': [{
-        // 属性 id 是一个自增数，起始值为 1，每次增 1
-        'id|+1': 1
-    }]
-})
-// 输出结果
-console.log(JSON.stringify(data, null, 4))
+export default {
+    data() {
+      return {
+        tableData: []
+      }
+    }
+  }
 </script>
 
-<style scoped >
+<style scoped>
 .up {
   width: 96%;
   height: 150px;
@@ -81,15 +125,40 @@ console.log(JSON.stringify(data, null, 4))
 
 }
 
-.anniu {
-  margin-top: 20px;
-  margin-left: 20px;
+
+.down{
+  margin-top: 40px;
+}
+.down-add{
+  padding: 10px;
+  border:1px solid #ccc ; 
+  border-radius: 2px
+}
+.down-title{
+  padding-top: 10px;
+  color: #303133;
+}
+.down-table{
+  margin-top: 15px;
+  text-align: center;
 }
-.right-up{
-  float: right;
-  padding-right: 15px;
-} 
 
+.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
+    word-break: break-word;
+    /* background-color: #f8f8f9; */
+    color: #515a6e;
+    height: 40px;
+    font-size: 13px;
+    text-align: center;
+}
+.bottom-number{
+  padding-top: 5px;
+  color: #303133;
+  float: right;
+}
+.bottom-page{
+  float:right;
+}
 /**
 自适应
 */
@@ -100,7 +169,4 @@ console.log(JSON.stringify(data, null, 4))
   height: 100%;
   /* background-color: #9dc3e6; */
 }
-.left-up{
-  float: left;
-}
 </style>