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="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">
          <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() {
    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);
    })
  },
};
</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, 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>