TEAMModelOS/TEAMModelOS.SmartClass/ClientApp/view/smart-class/NoticeDetails.vue

<template>
  <div class="details-container">
    <div class="notice-header">
      <p class="title">
      <span class="content-title">关于开展2019年高新区智慧课堂第二次研讨活动的通知</span></p>
      <p class="sub">2019-04-11&nbsp;&nbsp;&nbsp;月月研讨&nbsp;&nbsp;&nbsp;点击量：96</p>
    </div>
    <div class="content" v-html="noticeContent">

    </div>
    <Button type="primary" @click="backList">返回列表</Button>
  </div>
</template>
<script>
    import noticeDetails from '@/static/noticeDetails.json'
  export default {
    components: {
    },
    data() {
      return {
        reviewAcList: [],
        attachmentsList: [],
        noticeContent: {}
      }
    },

    created() {
      this.$Spin.show();

      this.noticeContent = noticeDetails.data.content;
    },
    methods: {
      backList() {
        this.$router.go(-1);
      }

    },
    mounted() {
       setTimeout(() => {
          this.$Spin.hide();
       }, 500);
    }
  }
</script>
<style scoped>
  html, body, #app {
    height: 100% !important;
    user-select: none;
  }

  .main-content {
    background: rgb(248,248,248) !important;
  }

  .center-row {
    display:flex;
    flex-direction:row;
  }

  .center-col {
    display:flex;
    flex-direction:column;
  }


  .details-container {
    position:relative;
    width: 1200px;
    margin: 100px auto;
    padding:36px 30px 30px;
    background:#fff;
    display: flex;
    flex-direction: column;
  }

  .notice-header {
    text-align:center;
  }

    .notice-header .content-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 600px;
      display: inline-block;
      font-size: 20px;
      color: #222;
    }

    .notice-header .sub {
      font-size: 14px;
      color: #999;
      padding-top: 12px;
      padding-bottom: 10px;
      margin-bottom: 24px;
      border-bottom: 1px solid #f6f6f6;
    }

    .details-container .ivu-btn {
      width:150px;
      margin:10px auto;
    }
 

</style>