<template>
  <div class="app">
    <el-button id="returnBtn" @click="returnBtn">返回</el-button>
    <div class="noticeDetails">
      <div class="title">公告详情</div>
      <h3 id="noticeTil" >{{noticeTil}}</h3>
      <!-- <div class="noticeTitle">数字邮局正式上线，创世版首发!</div> -->
      <h4 id="noticeTim">{{noticeTim}}</h4>
      <div class="noticeContent">
        {{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>
import {moreNotice}  from "../../api/notice/notice";
export default {
  data() {
    return {
      noticeTil: "",
      noticeTim: "",
      row_ :1 ,
      noticeContent:"" ,
      
    };
  },
  mounted() {
    //获取到当前公告的标题和时间
    this.row_ = this.$route.query.id;
    console.log(this.row_);
    // this.noticeTil = document.querySelector("#noticeTil");
    // this.noticeTim = document.querySelector("#noticeTim");
    // noticeTil.innerHTML = this.$route.query.id;
    // noticeTim.innerHTML = this.$route.query.noticeTime;
    this.getmoreNotice()
  },
  methods:{
    //获取
    getmoreNotice(){
      moreNotice(this.row_).then((res)=>{
        console.log(res);
        this.noticeContent = res.data.noticeContent 
        this.noticeTil = res.data.noticeTitle
        this.noticeTim = res.data.createTime
      })
    },
    //返回上一页
    returnBtn(){
        this.$router.go(-1)
    }
  }
};
</script>