message-list

src/views/message/messageList.vue

@@ -1,8 +1,14 @@
 <template>
   <div class="right" :style="{ height: height, width: width }">
     <div class="up">
-      <div class="left-up">
+      <div>
         <div class="up-title">🔍筛选搜索</div>
+        <div class="btn">
+          <el-button plain>重置</el-button>
+          <el-button type="primary" plain>查询列表</el-button> 
+        </div>       
+      </div>
+      <div class="left-up">
         <div class="up-input-title">
           消息标题:<el-input v-model="input" class="up-input" placeholder="请输入内容"></el-input>
         </div>
@@ -14,104 +20,84 @@
         </div>
       </div>
       <div class="right-up">
-        <div class="anniu">
-          <el-button plain>重置</el-button>
-          <el-button type="primary" plain>查询列表</el-button>
-        </div>
+
       </div>
     </div>
-      <div class="down">
-        <div class="down-add">
-          <el-row :gutter="24">
+    <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>
+        </el-row>
       </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 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>
 </template>
 
 <script>
-import {getMessageList} from '../../mock/messageMock.js'
+import { getMessageList } from '../../mock/messageMock.js'
 export default {
-  
+
   props: {
-    
+
   },
   data() {
     return {
       tableData: [],
-      input:"",
-      value2:"",
-      mock:"",
-      mockMessageList:[],
+      input: "",
+      value2: "",
+      mock: "",
+      mockMessageList: [],
     }
   },
   //产生mock数据
-  
+
   mounted() {
     this.getMockMessageList();
     this.getTableList();
-    
+
   },
   beforeDestroy() {
-    
+
   },
   methods: {
     getMockMessageList() {
       var Mock = require('mockjs')
       var data = Mock.mock({
-          'list|1-10': [{
-            'id|+1': 1,
-            'messageTitle': '@EMAIL',
-            'phoneNumber':'15888888888',
-            'publishTime':'2022-05-03',
-            // 'regexp3': /\d{5,10}/
+        'list|1-10': [{
+          'id|+1': 1,
+          'messageTitle': '@EMAIL',
+          'phoneNumber': '15888888888',
+          'publishTime': '2022-05-03',
+          // 'regexp3': /\d{5,10}/
         }]
       })
       // console.log(data);
-      this.mockMessageList = data ; 
+      this.mockMessageList = data;
       // console.log( this.mockMessageList.arr);
     },
-    
+
     getTableList() {
       this.tableData = this.mockMessageList.list
     }
@@ -124,90 +110,110 @@ export default {
 <style scoped>
 .up {
   width: 96%;
-  height: 150px;
+  height: 170px;
   margin-top: 20px;
   margin-left: 2%;
   border: 1px solid #ccc;
   border-radius: 4px;
+
 }
 
 .up-title {
+  font-size: 20px;
   width: 20%;
   margin-left: 20px;
   margin-top: 20px;
+  float: left;
+}
+.btn{
+  float: right;
+  padding-right: 3%;
+  margin-top: 2.5%;
 }
-
 .up-input {
   width: 250px;
   margin-left: 15px;
 }
 
 .up-input-title {
-  margin-top: 15px;
-  margin-left: 40px;
   
+  margin-left: 40px;
+
   float: left;
 }
 
 .up-input-right {
+  margin-left: 15px;
   width: 500px;
 }
 
 .up-input-title-right {
+  width: 800px;
   margin-left: 450px;
-  margin-top: 15px;
+  
 
 }
-.left-up{
+
+.left-up {
   width: 80%;
   float: left;
-  
-
+  height: 37px;
+  margin-top: 50px;
 }
-.right-up{
-  width:16%;
+
+.right-up {
+  width: 16%;
   margin-top: 2%;
   float: right;
-  
+
 }
-.anniu{
+
+.anniu {
   padding-right: 5%;
 }
-.down{
+
+.down {
   margin-top: 40px;
 }
-.down-add{
+
+.down-add {
   padding: 10px;
   margin: 0 27px;
-  border:1px solid #ccc ; 
+  border: 1px solid #ccc;
   border-radius: 2px
 }
-.down-title{
+
+.down-title {
   padding-top: 10px;
   color: #303133;
 }
-.down-table{
+
+.down-table {
   margin-top: 15px;
   text-align: center;
   margin: 35px 27px;
 }
 
-.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;
+.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{
+
+.bottom-number {
   padding-top: 5px;
   color: #303133;
   float: right;
 }
-.bottom-page{
-  float:right;
+
+.bottom-page {
+  float: right;
 }
+
 /**
 自适应
 */