skl-www/src/views/details.vue

<template>
  <div class="details">
    <breadcrumb ref="breadcrumb"></breadcrumb>
    <div ref="detailsHome" class="detailsHome" v-if="contentsItem">
      <img class="thumbnail" v-if="isshow" :src="contentsItem.thumbnail">
      <h3 class="title">{{ contentsItem.title }}</h3>
      <h4 class="title" v-if="contentsItem && contentsItem.curtTitle">{{ contentsItem.curtTitle }}</h4>
      <!-- <span class="describe">{{ contentsItem.describe }}</span> -->
      <span class="date">发表时间: {{ contentsItem.date | dates }}<span class="visit">访问量: {{ contentsItem.visit }}</span></span>
      <div class="content" v-html="contentsItem.content"></div>
      <div v-if="contentsItem && contentsItem.annex">
        <a v-for="(item, index) in contentsItem.annex" :key="index" :href="item.url" :download="item.url" target="view_window">下载附件：{{ item.name }}<br/></a>
      </div>
    </div>
    <el-divider class="divider" v-else>暂无数据</el-divider>
  </div>
</template>

<script>
import moment from 'moment';
import breadcrumb from '../components/breadcrumb/index.vue';
import { mapState, mapActions } from 'vuex';
export default {
  name: 'detailsHome',
  components: {
    breadcrumb
  },
  computed: {
    ...mapState(['contentsItem']),
    isshow() {
      if (this.contentsItem.bind.includes('012')) return true;
      return false;
    }
  },
  data() {
    return {
      id: ''
    };
  },
  async mounted() {
    this.id = this.$route.params.id;
    const type = this.$route.query.type;
    if (type) {
      await this.imgNewsFetch({ id: this.id });
      return;
    }
    await this.contentsFetch({ id: this.id });
    this.$refs.detailsHome.scrollIntoView(true);
  },
  methods: {
    ...mapActions(['contentsFetch', 'imgNewsFetch'])
  },
  filters: {
    dates(e) {
      return moment(e).format('YYYY-MM-DD');
    }
  }
};
</script>
<style lang="scss" scoped>
.details {
  width: 60%;
  margin: 0 auto;
}
.detailsHome {
  width: 100%;
  background-color: #f5f9ff;
  padding: 0 5%;
  padding-top: 3%;
  margin-top: 2%;
  .thumbnail {
    width: 20%;
    display: block;
    margin: 5% auto;
  }
  .title, .describe, .content, .date {
    width: 100%;
    text-align: center;
  }
  .describe, .date {
    display: block;
    color: #999;
    line-height: 2em;
    .visit {
      margin-left: 30px;
    }
  }
  .date {
    border-bottom: 1px solid #004ef5;
    margin-bottom: 5%;
    padding-bottom: 10px;
  }
  .content {
    text-align: left;
    white-space: pre-wrap;
    word-wrap: break-word;
    ::v-deep iframe {
      width: 70%;
      height: 500px;
      display: block;
      margin: 0 auto;
    }
  }
}
</style>