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 target="_blank" to="/">首页</nuxt-link></li>
							<li>></li>
							<li><nuxt-link target="_blank" 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.title}}</nuxt-link>
                </li>
              </template>
						</ul>
					</div>
        </div>
        <div class="article">
          <div class="title">教您四个小窍门轻松辨实木家具</div>
          <div class="info">
            <div class="info-item">2020-10-10</div>
            <div class="info-item">
              <span class="">观看人数：</span>
              <span class="text">1000</span>
            </div>
            <div class="info-item">
              <span>作者：</span>
              <span>李明</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="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 content = '<div><p><a href="http://www.visney.cn/" target="_blank" title="卫诗理"><strong>教您四个小窍门轻松辨实木家具</strong></a>：一看、二闻、三敲、四掂。</p><p>　　一看：看实木家具是否是整块实木打造，首先要看木纹和疤结。如一个衣柜门，外表看上去是一种花纹，那么在柜门背面相应的位置，看这个花纹变化的位置，如果对应得很好则是纯实木柜门。另外看疤结也是鉴定纯木的好方法：看好有疤痕的一面所在位置，再在另一面找是否有相应花纹。</p><p><br></p><p style="text-align: center;"><img src="http://img.visney.cn/visney-manager/image/20181015/1539584969235044317.jpg" title="1539584969235044317.jpg" alt="QQ截图20181015142729.jpg"></p><p><br></p><p>　　二闻：选实木家具打开柜门或抽屉后，要用鼻子闻一闻。纯木有自己特殊的味道，即使长期存放或涂饰后依然留有气味，而且有很多木材会保留着淡淡的味道，如松木有松脂的味道，柏木有淡香，雪松有辛辣味，杉木具有独特的气味，樟木会有很明显的樟脑味，椴木微有油臭味，红木的切口处会有浓厚的辛辣香气，胡桃木会轻微的呛鼻，很多的国产木材没有气味，人造板会有很浓的化学材料气味，如甲醛等，会很好识别。</p><p>　　三敲：实木制件用手轻敲会发出较清脆的声音，而人造板则声音低沉，包厢的木件会发出咚咚的鼓声。</p><p>　　四掂：按木材的重量分为三级：轻量级的有干燥过的泡桐木，中量级的有松木，椴木，秋木等。在我国北方把中密度的木材称为软杂木(除松木外)，重量级的除红木，花梨木，紫檀木等硬木外柞木，水曲柳和桦木及进口的柳安木均称为硬杂木，综上所述的木材家具均比刨花板、中密度纤维板的家具轻些。</p><p>　　特别要注意实木家具木材的含水率和产地。国内各地区的气候对木材含水率是有影响的，木材含水率不得高于使用地区当地平衡含水率的1%，否则木材由于胀缩大易造成榫卯分离、家具散架，还会引起翘曲。因此，要选购干燥设备和干燥工艺好的企业生产的红木家具，本地或外地生产的红木家具并不重要，关键是其含水率是否与使用地区的平衡含水率保持一致。有一句老话“实木不过长江”，就是说在南方生产的实木家具到北方后，会因为气候影响含水率，从而容易出现开裂、变形等问题，所以选购的时候要看清产地。</p><p>　　特别提醒：价格太便宜小心遇到“仿实木”</p><p>　　实木家具是指由天然木材制成的家具，这样的家具表面一般都能看到木材自然的花纹。家具制造者对于实木家具一般注意涂饰清漆或亚光漆等来突出木材的天然色泽。在北方，普通实木家具通常采用榉木、白橡木、水曲柳、榆木、楸木、橡胶木、柞木，而名贵的红木家具主要采用“花梨木、鸡翅木、紫檀木”。实木家具的市场比较混乱，经常出现以次充好、混淆树种的事情，最好还是买名牌产品，同时注意，木头的价格只能越来越高，太便宜的绝对有诈，很可能就是一种仿实木家具。所谓仿实木家具，从外观上看是实木家具，木材的自然纹理、手感及色泽都和实木家具一模一样，但实际上是实木和人造板混用的家具。</p><p><br></p></div>'
    console.log(params);
    console.log(query);
    return {
      articleContent: content
    }
  },
  head() {
    return {
     
    };
  },
  mounted() {
    
  },
};
</script>

<style lang="scss">
.news-detail {
  margin-top: 190px;
  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;
      }
    }
  }
  .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>