<template>
  <div class="news-container">
    <div class="news-detail">
      <div class="detail-title">{{title}}</div>
      <div class="detail-description">摘要：{{description}} &nbsp&nbsp&nbsp&nbsp 时间：{{time}}</div>
      <div class="detail-content" v-html="content"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: '',
      description: '',
      content: '',
      time: ''
    }
  },
  mounted() {
    const { title, description, content, time } = this.$route.query
    this.title = title
    this.description = description
    this.content = content
    this.time = time
  },
}
</script>
<style scoped lang="less">
.news-container {
  width: 100%;
  height: 100%;
  background: #ccc;
  overflow: hidden;
  .news-detail {
    width: 55%;
    margin: 50px auto 50px auto;
    height: calc(100% - 100px);
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: blue;
    box-shadow: 4px 2px #cccccc;
    .detail-title {
      height: 40px;
      line-height: 40px;
      font-size: 30px;
      font-weight: 600;
      text-align: center;
      border-bottom: soild #333;
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
      box-sizing: content-box;
      margin-top: 10px;
    }
    .detail-description {
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      text-align: center;
      border-bottom: 1px solid #ccc;
      margin-top: 10px;
      margin-bottom: 5px;
    }
  }
}
</style>
