|
|
@@ -1,7 +1,187 @@
|
|
|
<template>
|
|
|
- <div :class="className" :style="{height:height,width:width}" >公告列表</div>
|
|
|
- </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>
|
|
|
-
|
|
|
- </script>
|
|
|
+
|
|
|
+<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>
|
zhouzenghui