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">1000</span>
            </div>
            <div class="info-item">
              <span>作者：</span>
              <span>{{ news.articleAuthor }}</span>
            </div>
            <div class="info-item">
              <span>分享</span>
              <div class="share">
                <img class="icon" src="~/assets/images/news/icon_wechat.png" alt="" srcset="">
                <img class="icon" src="~/assets/images/news/icon_qq.png" alt="" srcset="">
                <img class="icon" src="~/assets/images/news/icon_sina.png" 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">
          <div class="hot-item" v-for="(item, index) in articleList" :key="index">
            <div class="hot-title">
              <nuxt-link target="_blank" :to="{name: 'news-newsView-id', params: { id: item.id }, query: {cateId: item.cateId } }">
                {{ item.title }}
              </nuxt-link>
            </div>
            <div class="hot-info">
              <span class="time">{{ item.time }}</span>
              <span class="views">观看人数：{{ item.views}}</span>
            </div>
          </div>
        </div>
        <div class="hot-top-style"></div>
      </div>
    </div>
	</section>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      articleList: [
        {
          title: '中德智慧乔迁逻辑狗智慧乔迁智慧乔迁标题中德智 迁标题中德智迁标题中德智慧乔迁……..',
          time: '2020-6-29',
          content: '个人的何时去个人的何时去个人的何时去个人的何时去个人的何时去个人的何时去个人 的人的何时去个人的何时去…… ',
          imgUrl: require('~/assets/images/news/img.png'),
          id: '1',
          cateId: '1',
          views: 103,
        },
        {
          title: '中德智慧乔迁逻辑狗智慧乔迁智慧乔迁标题中德智 迁标题中德智迁标题中德智慧乔迁……..',
          time: '2020-6-29',
          content: '个人的何时去个人的何时去个人的何时去个人的何时去个人的何时去个人的何时去个人 的人的何时去个人的何时去…… ',
          imgUrl: require('~/assets/images/news/img.png'),
          id: '2',
          cateId: '2',
          views: 141,
        },
        {
          title: '中德智慧乔迁逻辑狗智慧乔迁智慧乔迁标题中德智 迁标题中德智迁标题中德智慧乔迁……..',
          time: '2020-6-29',
          content: '个人的何时去个人的何时去个人的何时去个人的何时去个人的何时去个人的何时去个人 的人的何时去个人的何时去…… ',
          imgUrl: require('~/assets/images/news/img.png'),
          id: '3',
          cateId: '3',
          views: 165,
        }
      ]
    };
  },
  
  async asyncData({ params, query, store }) {
    const { data: { data: news} } = await axios(`${store.state.wordpressAPI}/official-api/article/get/${params.id}`);
    return {
      news
    }
  },
  head() {
    return {
     
    };
  },
  mounted() {
    
  },
};
</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;
          }
        }
      }
    }
    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, PingFang SC;
        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>