usoft-town/components/news/detail.vue

<template>
  <div class="detail">
    <div class="top">
      <p v-text="listData.NC_TITLE">1</p>
      <span class="icon_new" v-text="listData.NC_READNUM">1</span>
      <span v-text="formatDate(listData.NC_PUBLISHDATE, 'yyyy-MM-dd hh:mm:ss')">1</span>
    </div>
    <div class="content" v-html="listData.NC_CONTENT"/>
  </div>
</template>

<script>
  import {formatDate} from '@/utils/date.js'
  export default {
    name: 'DetailView',
    computed: {
      listData () {
        return this.$store.state.news.detail.data.data
      }
    },
    methods: {
      // 格式化时间
      formatDate (row) {
        let date = new Date(row)
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      }
    }
  }
</script>

<style type="text/scss" lang="scss">
.detail{
  background: #fff;
  .top{
    padding:0 40px;
    padding-top:42px;
    height:146px;
    border-bottom:1px solid #f1f1f1;
    p{
      font-size: 30px;
      color:#1e1e1e;
      margin-bottom:30px;
      width:98%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    span{
      font-size: 14px;
      color:#a0a0a0;
      margin-right:25px;
      &.icon_new:before{
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 10px;
        vertical-align: middle;
        background: url(/icon/new.png) no-repeat 0 2px;
      }
    }
  }
  .content{
    padding:42px 40px;
    line-height: 25px;
    font-size: 14px;
    color: #626262;
    p{
      font-size: 14px;
      color: #626262;
      text-indent: 2em;
      margin: 32px 0;
    }
  }
}
</style>