<template>
  <div class="layout" v-if="article" :class="{mobile: isMobile}" >
    <h2>{{article.title}}</h2>
    <span v-if="article.date">{{new Date(Number(article.date)).format('yyyy-MM-dd')}} 发表</span>
    <span v-if="article.origin">来源： {{article.origin}}</span>
    <div v-html="article.content" class="new-content"></div>
    <br><br><br>
  </div>
</template>

<script>

export default {
  props: ['activep'],
  data () {
    return {
      isMobile: false,
      article: this.activep
    }
  }
}
</script>

<style scoped>
.layout {
  padding-bottom: 40px;
}
.layout.mobile {
  text-align: left;
}

.layout > h2 {
  font-size: 18px;
  color: #000000;
  font-weight: bold;
}

.layout > span {
  color: #989898;
  font-size: 14px;
  margin: 15px 0;
  display: block;
}

.layout > img {
  display: block;
  max-width: 100%;
}

.layout > div {
  font-size: 14px;
  line-height: 25px;
  color: #989898;
  margin-top: 25px;
}

.new-content {
  text-align: left;
}

</style>

<style>

.new-content img,
.new-content video {
  max-width: 100% !important;
}
</style>
