<template>
  <div class="detail">
    <p class="name">{{ detail.title }}</p>
    <div class="time">
      <img src="@/assets/notice/time_icon.png" alt="" />
      <p>发布时间：</p>
      <p>{{ detail.createTime }}</p>
    </div>
    <div class="divider"></div>
    <div class="content" v-html="detail.content">{{ detail.content }}</div>
  </div>
</template>

<script>
import { getDetail } from "@/api/noticeservice";
export default {
  data() {
    return {
      id: null,
      detail: {},
    };
  },
  methods: {
    init() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      getDetail({ id: this.id }).then((res) => {
        this.$toast.clear();
        this.detail = res.data;
      });
    },
  },
  created() {
    this.id = this.$route.query.id;
    if (this.id) {
      this.init();
    }
  },
};
</script>

<style lang="stylus" scoped>
.detail {
  height calc(100vh - 60px)
  overflow-y auto;
  padding 30px;
  background #fff;

  .name {
    font-size: 36px;
    font-weight: 600;
    color: #333333;
    line-height: 50px;
  }

  .time {
    margin-top 40px;
    display flex;
    align-items center

    img {
      width 24px;
      height 24px;
      margin-right 10px;
    }

    p {
      font-size: 24px;
      color: #666666;
    }
  }

  .divider {
    margin-top 30px;
    width 100%;
    height 1px;
    background #eee
  }

  .content {
    margin-top 30px;
    font-size: 28px;
    font-weight: 400;
    color: #333333;
    line-height: 40px;
  }
}
</style>
