<template>
  <div class="app">
    <el-button id="returnBtn" @click="returnBtn">返回</el-button>
    <div class="noticeDetails">
      <div class="title">消息详情</div>
      <h3 id="noticeTitle"></h3>
      <h4 id="noticeTime"></h4>
      <div id="noticeContent"></div>
    </div>
  </div>
</template>



<style scoped>
#returnBtn{
    margin-top: 10px;
    margin-left: 10px;
}
.noticeDetails {
  width: 800px;
  height: 300px;
  /* background: red; */
  margin: 50px auto;
  border: 1px solid #ebeef5;
}
.title {
  font-size: 30px;
  font-family: PingFang SC;
  color: #333333;
  text-align: center;
  font-weight: bolder;
  margin-top: 10px;
}
#noticeTitle {
  /* font-size: 18px; */
  font-family: PingFang SC;
  color: #333333;
  margin-left: 30px;
  margin-top: 20px;
  font-weight: bolder;
}
#noticeTime {
  font-family: PingFang SC;
  margin-left: 30px;
  color: #333333;
}
#noticeContent {
  font-family: PingFang SC;
  color: #333333;
  width: 700px;
  /* background: red; */
  margin: 0 auto;
  text-indent: 2em;
}
</style>


<script>
export default {
  data() {
    return {
      noticeTitle: "",
      noticeTime: "",
      noticeContent: ""
    };
  },
  mounted() {
    //获取到当前公告的标题和时间
    this.noticeTitle = document.querySelector("#noticeTitle");
    this.noticeTime = document.querySelector("#noticeTime");
    this.noticeContent = document.querySelector("#noticeContent");
    noticeTitle.innerHTML = this.$route.query.title;
    noticeTime.innerHTML = this.$route.query.publishTime;
    noticeContent.innerHTML = this.$route.query.content;
  },
  methods:{
    //返回上一页
    returnBtn(){
        this.$router.go(-1)
    }
  }
};
</script>