zhongde-website/pages/news/newsView/_id.vue

<template>
	<section class="cotainer">
    <div class="news-detail w1200">
      <div class="news-left">
        <div class="breadcrumb">
          <div class="breadcrumb-list">
						<ul>
							<li><nuxt-link to="/">首页</nuxt-link></li>
							<li>></li>
							<li><nuxt-link to="/news">新闻中心</nuxt-link></li>
							<li>></li>
              <template v-for="(item,index) in $store.state.newsNav">
                <li class="breadcrumb-active" v-if="item.id == $route.query.cateId" :key="index">
                  <nuxt-link :to="{name: 'news', query: {cateId: item.id}}">{{item.type}}</nuxt-link>
                </li>
              </template>
						</ul>
					</div>
        </div>
        <div class="article">
          <div class="title">{{ news.articleTitle }}</div>
          <div class="info">
            <div class="info-item">{{ news.createTime }}</div>
            <div class="info-item">
              <span class="">观看人数：</span>
              <span class="text">{{ news.readSize }}</span>
            </div>
            <div class="info-item">
              <span>作者：</span>
              <span>{{ news.articleAuthor }}</span>
            </div>
            <div class="info-item">
              <span>分享</span>
              <div class="bdsharebuttonbox share">
                <img class="icon" src="~/assets/images/news/icon_wechat.png" data-cmd="weixin" alt="" srcset="" title="分享到微信" />
                <img class="icon" src="~/assets/images/news/icon_qq.png" data-cmd="sqq" alt="" srcset="" title="分享到QQ好友" />
                <img class="icon" src="~/assets/images/news/icon_sina.png" data-cmd="tsina" alt="" srcset="" title="分享到新浪微博" />
  							<!-- <a href="#" data-cmd="tsina" title="分享到新浪微博">微博</a> -->
                <!-- <img class="icon" src="~/assets/images/news/icon_wechat.png" data-cmd="weixin" alt="" srcset="">
                <img class="icon" src="~/assets/images/news/icon_qq.png" data-cmd="sqq" alt="" srcset="">
                <img class="icon" src="~/assets/images/news/icon_sina.png" data-cmd="tsina" alt="" srcset=""> -->
              </div>
            </div>
          </div>
          <article>
            <div v-html="news.articleContent"></div>
          </article>
        </div>
      </div>
      <div class="news-hot new-right">
        <div class="news-hot-title">
          热门文章
        </div>
        <div class="hot-list">
          <template v-for="(item, index) in articleList">
            <div class="hot-item" v-if="index < 3" :key="index">
              <div class="hot-title">
                <nuxt-link :to="{name: 'news-newsView-id', params: { id: item.id }, query: {cateId: item.typeId } }">
                  {{ item.articleTitle }}
                </nuxt-link>
              </div>
              <div class="hot-info">
                <span class="time">{{ item.createTime }}</span>
                <span class="views">观看人数：{{ item.readSize }}</span>
              </div>
            </div>
          </template>
        </div>
        <div class="hot-top-style"></div>
      </div>
    </div>
	</section>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
    };
  },
  
  async asyncData({ params, query, store }) {
    const { data: { data: news} } = await axios(`${store.state.wordpressAPI}/official-api/article/get/${params.id}`);
    const { data: { data: article }} = await axios(`${store.state.wordpressAPI}/official-api/article`, {
      params: {
        page: 1
      }
    });
    const articleList = article.entityList || []; 
    return {
      news,
      articleList
    }
  },
  head() {
    return {
     
    };
  },
  created() {
  },
  mounted() {
    this.$nextTick(function (){
      window._bd_share_config = {
        "common": {
          "bdSnsKey": {},
          "bdText": "",
          "bdMini": "1",
          "bdMiniList": ["qzone", "tsina", "weixin", "sqq", "duitang", "hx", "fx", "youdao", "sdo", "qingbiji", "people", "xinhua", "mail", "isohu", "yaolan", "wealink", "ty", "iguba", "fbook", "twi", "linkedin", "h163", "evernotecn", "copy", "print"],
          "bdPic": "",
          "bdStyle": "2",
          "bdSize": "32"
        },
        "share": {}
      };
      const s = document.createElement('script');
      s.type = 'text/javascript';
      s.src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5);
      document.body.appendChild(s);
    });
    this.loadRead();
  },
  methods: {
    async loadRead() {
      const { data } = await axios.post(`${this.$store.state.wordpressAPI}/official-api/article/read/${this.$route.params.id}`);
    }
  }
};
</script>

<style lang="scss">
.news-detail {
  margin-top: 118px;
  display: flex;
  .news-left {
    flex: 1;
  }
  .breadcrumb-list {
    font-size: 15px;
    ul {
      display: flex;
      li {
        margin-right: 10px;
        color: #535F72;
        a {
          color: #535F72;
        }
      }
    }
    .breadcrumb-active {
      a {
        font-size: 15px;
        font-weight: 500;
        color: #2D71FA;
        line-height: 21px;
      }
    }
  }

  .el-breadcrumb {
    font-size: 15px;
  }
  .article {
    margin: 32px auto 200px;
    .title {
      font-size: 32px;
      font-weight: 600;
      color: #262626;
      line-height: 45px;
    }
    .info {
      margin-top: 30px;
      font-size: 15px;
      font-weight: 400;
      color: #535F72;
      .info-item {
        margin-right: 42px;
        .share {
          margin-left: 32px;
          font-size: 0;
          .icon {
            margin-right: 44px;
            width: 27px;
            height: 24px;
          }
          a {
    		    font-size: 12px;
          }
        }
      }
    }
    article {
      color: #333330;
      margin-top: 34px;
      p {
        font-size: 16px;
        font-weight: 400;
        color: #333330;
        line-height: 32px;
        letter-spacing: 1px;
      }
      img {
        max-width: 850px;
      }
    }
  }
  .info {
    display: flex;
    align-items: center;
    .info-item {
      display: flex;
      align-items: center;
    }
  }
  .new-right {
    position: relative;
    width: 290px;
    border-radius: 4px;
    padding: 30px 15px 40px;
    max-height: 450px;
    margin-left: 60px;
    border: 1px solid #F1F1F1;
    overflow: hidden;
    .hot-top-style {
      position: absolute;
      top: 0;
      left: 0;
      height: 8px;
      width: 100%;
      background: #236AFA;
      border-radius: 4px 4px 0px 0px;
    }
    .news-hot-title {
      font-size: 26px;
      font-weight: 400;
      color: #262626;
      line-height: 37px;
    }
    .hot-item {
      margin-top: 18px;
      padding-top: 30px;
      border-top: 1px solid #F1F1F1;
      .hot-title {
        font-size: 14px;
        font-weight: 400;
        color: #262626;
        line-height: 20px;
        letter-spacing: 1px;
        font-family: PingFangSC-Regular, sans-serif;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .hot-info {
        font-size: 10px;
        font-weight: 400;
        color: #ABABAB;
        line-height: 14px;
        margin-top: 4px;
        .time {
          margin-right: 48px;
        }
      }
    }
  }
}
</style>