消息列表

src/views/message/messageList.vue

@@ -4,7 +4,6 @@
       <div class="up-title">🔍筛选搜索</div>
       <div class="up-input-title">
         消息标题:<el-input v-model="input" class="up-input" placeholder="请输入内容"></el-input>
-
       </div>
       
       <div class="up-input-title-right">
@@ -17,25 +16,74 @@
         <el-button plain>重置</el-button>
         <el-button type="primary" plain>查询列表</el-button>
       </div>
-    </div>
 
 
+      <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>
 
-    <div class="down">
-      <i class="el-icon-s-order"></i>消息列表</div>
-      
-      <el-button>默认按钮</el-button>
-      
 
-    </div>
 </template>
 
 <script>
-
+export default {
+    data() {
+      return {
+        tableData: []
+      }
+    }
+  }
 </script>
 
-<style scoped >
+<style scoped>
 .up {
   width: 96%;
   height: 150px;
@@ -67,18 +115,41 @@
   margin-top: 15px;
   
 }
-.anniu{ 
-  
+
+
+.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;
 }
 
-.el-col {
-    border-radius: 4px;
-  }
-  
-  .grid-content {
-    border-radius: 4px;
-    min-height: 36px;
-  }
+.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;
+}
 
 /**
 自适应