nuxtProject/pages/news/_id.vue

<template>
  <div class="client-details-page">

    <!-- 详情页 -->
    <div class="client-details-box">

      <!--行业资讯详情-->
      <div class="client-details-wrap">
        <h1>{{infoData.title}}</h1>
        <p class="details-visits-box"><span style="margin-right:10px;">发布时间：</span><span>{{infoData.startTime}}</span><i type="eyes"></i><span>{{infoData.visits}}</span>
        </p>
        <div class="client-content-box" v-html="infoData.content"></div>
        <!--    关键字    -->
        <div class="client-link-json" v-if="linkJson.length">
          <span>关键词：</span>
          <a :href="item.url" v-for="item in linkJson">{{item.text}}</a>
        </div>
        <div class="client-details-pagination">
          <a v-show="infoData.lastId" :href="`${baseUrl}/news/${infoData.lastId}`">
            <span class="mta-hidden-xs" @click.prevent="changeNews(infoData.lastId)" :title="'上一篇：'+infoData.lastName">上一篇：{{infoData.lastName}}</span>
            <span class="mta-hidden-sm details-phone-btn" @click.prevent="changeNews(infoData.lastId)">上一篇</span>
          </a>
          <a v-show="infoData.nextId" :href="`${baseUrl}/news/${infoData.nextId}`">
            <span class="mta-hidden-xs" @click.prevent="changeNews(infoData.nextId)" :title="'下一篇：'+infoData.nextName">下一篇：{{infoData.nextName}}</span>
            <span class="mta-hidden-sm details-phone-btn" @click.prevent="changeNews(infoData.lastId)">下一篇</span>
          </a>
        </div>
      </div>

      <!-- 最新新闻 -->
      <div class="latest-news-box mta-hidden-xs">
        <h4>近期推荐</h4>
        <ul class="latest-news-list">
          <li v-for="(item, index) in newestData" :key="index">
            <a :href="`${baseUrl}/news/${item.code}`">
             <span> {{changeDate(item.startTime)}} </span> <span @click.prevent="changeNews(item.code)" :title="item.title">{{item.title}}</span>
            </a>
          </li>
        </ul>
      </div>

    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';

  export default {
    name:     'news_id',
    layout:   'templateB',

    async asyncData({ params, $axios, store }) {
      // 设置选中菜单
      store.commit('setActiveNav', '/news');
      try {
        const url = '/home/news/info';
        const opt = {
          code: params.id,
        };
        const res = await $axios.post(url, opt);
        const url2 = '/home/news/newest';
        const res2 = await $axios.post(url2);
        const linkJson = res.data.data['linkJson'] ? JSON.parse(res.data.data['linkJson']) : [];

        return {
          infoData:   res.data.data,
          newestData: res2.data.data.data,
          linkJson
        };
      } catch (e) {
        return {};
      }
    },
    head(){
      return {
        title: this.infoData.title,
        meta: [
          {
            hid: this.infoData.keyword,
            name: 'description',
            content: this.infoData.intro
          }
        ],
      }
    },
    computed: {
      baseUrl() {
        return this.getBaseUrl;
      },
      ...mapGetters(['getBaseUrl']),
    },
    methods:  {
      changeDate(myDate) {
        const result = new Date(myDate);
        const curMonth = (result.getMonth()+1).toString().padStart(2,'0');
        const curDay = result.getDate().toString().padStart(2,'0');
        return `${curMonth}-${curDay}`
      },
      changeNews(id) {
        this.$router.push({ name: 'news-id', params: { id } });
      },
    },
  };
</script>
<style lang="scss" scoped>
.client-link-json {
  margin-bottom: 10px;

  span {
    color: #333;
    display: inline-block;
    margin-left: 10px;
    font-weight: 800;
    font-size: 14px;
  }

  a {
    color: #00b96b;
    display: inline-block;
    margin-right: 10px;
    font-weight: 400;
    font-size: 14px;
  }

}

.client-details-page div.latest-news-box {
  h4 {
    border-left: 3px solid #00b96b;
    padding-left: 10px;
  }
}

i[type='eyes'] {
  background-image: url("~static/gangweiIcon/z147.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.client-details-page .client-details-wrap .client-details-pagination a {
  color: #2C3E50;

  &:hover {
    color: #00b96b;
  }

  @media (max-width: 768px) {
    color: #2C3E50;
    border-color: #2C3E50;
  }
}
</style>