post-ui/src/views/notice/noticeList.vue

<template>
  <div class="app">
    <!-- 头部 -->
    <div class="search">
      <div class="search-head">
        <div>
          <i id="search-text" class="el-icon-search"> 筛选搜索</i>
        </div>
        <div class="search-btn">
          <el-button plain>重置</el-button>
          <el-button type="primary">查询搜索</el-button>
        </div>
      </div>
      <!-- 筛选公告标题 -->
      <div class="notice-search">
        <div class="notice-title">公告标题：</div>
        <div>
          <el-input
            class="search-input"
            v-model="input"
            placeholder="筛选公告标题"
          ></el-input>
        </div>
        <!-- 发布时间 -->
        <div class="publsh-date">发布时间：</div>
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </div>
    </div>
    <!-- 公告列表 -->
    <div class="notice-list">
      <i class="el-icon-tickets"> 公告列表</i>
      <el-button id="addBtn" size="small">添加</el-button>
    </div>
    <!-- 数据栏 -->
    <div class="data-list">
      <el-table :data="tableData" border style="width: 100%" class="data-table">
        <el-table-column prop="id" label="ID"> </el-table-column>
        <el-table-column prop="title" label="公告标题"> </el-table-column>
        <el-table-column prop="publishTime" label="发布时间"> </el-table-column>
        <el-table-column prop="operation" label="操作"> </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pageMenu">
      <div id="dataNum">共0条</div>
      <el-pagination background layout="prev, pager, next" :total="1">
      </el-pagination>
    </div>
  </div>
</template>

<style scoped>
.search {
  width: 1250px;
  height: 150px;
  /* background: #e6e6e6; */
  margin: 0 auto;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  margin-top: 30px;
}
#search-text {
  margin-top: 20px;
  margin-left: 20px;
  font-family: PingFang SC;
  font-size: 15px;
}
.search-head {
  display: flex;
  justify-content: space-between;
}
.search-btn {
  margin-top: 20px;
  margin-right: 20px;
}
.notice-search {
  display: flex;
  margin-left: 58px;
}
.notice-title {
  font-size: 13px;
  font-family: PingFang SC;
  color: #333333;
  margin-top: 8px;
  margin-right: 5px;
}
.search-input {
  width: 200px;
}
.publsh-date {
  font-size: 13px;
  font-family: PingFang SC;
  color: #333333;
  margin-left: 50px;
  margin-top: 8px;
}
.notice-list {
  width: 1250px;
  height: 50px;
  margin: 0 auto;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  margin-top: 30px;
  line-height: 17px;
  display: flex;
  justify-content: space-between;
}
.el-icon-tickets {
  margin-top: 17px;
  margin-left: 20px;
  font-family: PingFang SC;
  font-size: 15px;
}
#addBtn {
  width: 60px;
  height: 30px;
  margin-top: 10px;
  margin-right: 32px;
}
.data-list {
  width: 1250px;
  margin: 0 auto;
  margin-top: 30px;
}
.data-table {
  margin: 0 auto;
}
.pageMenu{
  width: 1351px;
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
#dataNum{
  font-size: 13px;
  font-family: PingFang SC;
  margin-top: 7px;
  margin-right: 5px;
}
</style>
  

<script>
export default {
  data() {
    return {
      input: "",
      value1: "",
      // tableData: [
      //   {
      //     id: "20206115",
      //     title: "开始",
      //     publishTime: "2023-01-14",
      //     operation: "运行",
      //   },
      //   {
      //     id: "20206115",
      //     title: "开始",
      //     publishTime: "2023-01-14",
      //     operation: "运行",
      //   },
      //   {
      //     id: "20206115",
      //     title: "开始",
      //     publishTime: "2023-01-14",
      //     operation: "运行",
      //   },
      //   {
      //     id: "20206115",
      //     title: "开始",
      //     publishTime: "2023-01-14",
      //     operation: "运行",
      //   },
      // ],
    };
  },
};
</script>