diff --git a/src/router/index.js b/src/router/index.js
index feef8a2f4aeccdf3a6eb66d62ca33425dee1d4f2..b91b4c05b267513a5429dcc6ca4c9f4e6045aa0c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -66,7 +66,11 @@ const routes = [
         name: 'log',
         component: () => import('../views/LogView.vue')
       },
-
+      {
+        path: '/Layout/notice',
+        name: 'notice',
+        component: () => import('../views/NoticeView.vue')
+      },
     ]
   },
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 06fdc688ebc0c07c9cf4124b3766a5a098a13cfe..9279a5bd7c6ef2620c621f5ff44f3490d25ce596 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,7 +1,27 @@
 <template>
   <div>
     <div>精确到秒的魔法</div>
+    <el-collapse v-model="activeName" accordion>
+      <el-collapse-item title="一致性 Consistency" name="1">
+        <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+        <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
+      </el-collapse-item>
+      <el-collapse-item title="反馈 Feedback" name="2">
+        <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+        <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+      </el-collapse-item>
+      <el-collapse-item title="效率 Efficiency" name="3">
+        <div>简化流程：设计简洁直观的操作流程；</div>
+        <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+        <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+      </el-collapse-item>
+      <el-collapse-item title="可控 Controllability" name="4">
+        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+      </el-collapse-item>
+    </el-collapse>
   </div>
+
 </template>
 
 <script>
diff --git a/src/views/LayoutView.vue b/src/views/LayoutView.vue
index e96861ee274b7f71537cc093d099678450e12116..ed5905cd9155bc78c3dcc753e07d3991a11538d8 100644
--- a/src/views/LayoutView.vue
+++ b/src/views/LayoutView.vue
@@ -52,6 +52,7 @@
               <el-menu-item index="/Layout/hotel">酒店预定</el-menu-item>
               <el-menu-item index="/Layout/reserve">预定管理</el-menu-item>
               <el-menu-item index="/Layout/log" v-if="user.role === 'admin'">操作日志</el-menu-item>
+              <el-menu-item index="/Layout/notice">系统公告</el-menu-item>
             </el-menu-item-group>
           </el-submenu>
         </el-menu>
diff --git a/src/views/NoticeView.vue b/src/views/NoticeView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ccca49202fac585b36c0877901314b6b7e7ffab3
--- /dev/null
+++ b/src/views/NoticeView.vue
@@ -0,0 +1,219 @@
+<template>
+  <div>
+
+    <div style="margin-bottom:15px">
+    <el-input v-model="params.name" style="width: 200px" placeholder="请输入公告名称"></el-input>
+    <el-input v-model="params.time" style="width: 200px; margin-left:5px" placeholder="请输入公告时间"></el-input>
+    <el-button type="warning" style="margin-left: 10px;" @click="findBySearch()">查询</el-button>
+    <el-button type="danger" style="margin-left: 10px;" @click="reset()">清空</el-button>
+    <el-button type="primary" style="margin-left: 10px;" @click="add()">新增</el-button>
+    </div>
+
+    <div>
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="name" label="公告名称" width="180"></el-table-column>
+        <el-table-column prop="content" label="公告内容"></el-table-column>
+        <el-table-column prop="time" label="公告时间"></el-table-column>
+        <el-table-column label="操作">
+
+          <template v-slot="scope">
+
+            <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
+
+
+               <el-popconfirm title="确定删除吗？" @confirm="del(scope.row.id)">
+                <el-button slot="reference" type="danger" style="margin-left: 5px" >删除</el-button>
+               </el-popconfirm>
+
+
+
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div style="margin-top: 10px">
+      <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="params.pageNum"
+          :page-sizes="[5, 10, 15, 20]"
+          :page-size="params.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total">
+      </el-pagination>
+    </div>
+
+    <div>
+      <el-dialog title="请填写信息" :visible.sync="dialogFormVisible" width="30%">
+        <el-form :model="form">
+          <el-form-item label="公告名称" label-width="15%">
+            <el-input v-model="form.name"  autocomplete="off" style="width: 90%"></el-input>
+          </el-form-item>
+
+          <el-form-item label="公告内容" label-width="15%">
+            <el-input v-model="form.content" type="textarea" autocomplete="off" style="width: 90%"></el-input>
+          </el-form-item>
+
+
+
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+          <el-button @click="submit()" type="primary">确 定</el-button>
+        </div>
+      </el-dialog>
+    </div>
+
+  </div>
+
+
+</template>
+
+<script>
+import request from "@/utils/request";
+
+
+export default {
+
+  data() {
+    return {
+      tableData: [],
+      form: {},
+      params: {
+        pageNum: 1,
+        pageSize: 5,
+        name: '',
+        time:'',
+      },
+      total: 0,
+      dialogFormVisible: false
+    }
+  },
+
+  //页面加载的时候在此函数做一些事情
+  created() {
+    this.findBySearch()
+  },
+
+  //方法
+  methods:{
+
+
+    findBySearch() {
+      request.get("/notice/search",{
+         params: this.params //携带params里的参数
+      }).then(res => {
+        if (res.code === '0'){
+            this.tableData = res.data.list;
+            this.total = res.data.total;
+        }else{
+
+        }
+      })
+    },
+
+    add(){
+      this.form = {};//新增之前先把值清空
+      this.dialogFormVisible = true;
+    },
+
+    reset(){
+      this.params = {
+        name: '',
+        time: '',
+        pageNum: 1,
+        pageSize: 5,
+
+      }
+      this.findBySearch()
+    },
+
+    handleSizeChange(pageSize){
+    this.params.pageSize = pageSize;
+    this.findBySearch()
+    },
+
+    handleCurrentChange(pageNum){
+    this.params.pageNum = pageNum;
+    this.findBySearch()
+    },
+
+    submit() {
+      request.post("/notice/save",this.form).then(res =>{
+        if(res.code === '0'){
+          this.$message({
+            message: '操作成功',
+            type: 'success'
+          });
+          this.dialogFormVisible = false
+          this.findBySearch();
+        }else{
+          this.$message({
+            message: res.msg,
+            type: 'error'
+          });
+        }
+      })
+    },
+
+    edit(obj){
+      this.form = obj;
+      this.dialogFormVisible = true;
+    },
+
+    del(id){
+      request.delete("/notice/deleteById/"+id).then(res => {
+        if (res.code === '0'){
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          });
+          this.findBySearch();
+        }else{
+
+        }
+      })
+
+    }
+
+
+
+
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</script>
\ No newline at end of file