dl_site_nuxt/pages/article-page/_id.vue

<template>
  <!-- 新闻详情 -->
  <div class="article-page-info">
    <div class="info-top">
      <h2 class="article-page-title">{{ detais.title }}</h2>
      <p class="article-page-date">{{ detais.createTime }}</p>
    </div>

    <div class="article-page-content">
      <div class="rich-text" v-html="detais.content"></div>
      <ContactFooter />
      <div class="guide" :style="{'justify-content': prevarticle ? 'space-between' : 'flex-end'}">
        <nuxt-link :to="`/article-page/${prevarticle.id}`" v-if="prevarticle">
          {{ $t('common.prev') }}: {{ prevarticle.title }}
        </nuxt-link>

        <nuxt-link :to="`/article-page/${nextarticle.id}`" v-if="nextarticle">
          {{ $t('common.next') }}: {{ nextarticle.title }}
        </nuxt-link>
      </div>
    </div>

    <!-- <div class="related-article-page mb-4">
      <div class="pretty-header">
        <h2>{{ $t('article.relatedarticle') }}</h2>
      </div>
      <nuxt-link 
        class="article-page-related-item box_shadow" 
        to="/" 
        v-for="item in 6" 
        :key="item"
      >
        <p class="text-ellipsis">he Importance Of Regular Maintenance For Your Flatbed Trailer</p>
        <span>- Oct 25, 2024-</span>
      </nuxt-link>
    </div> -->

    <div class="related-products" v-if="relatedProductList.length">
      <div class="pretty-header">
        <h2>{{ $t('news.relatedProducts') }}</h2>
      </div>
      <b-carousel
        class="mt-3"
        id="carousel-1"
        :interval="4000"
        controls
        indicators
      >
        <b-carousel-slide v-for="item in relatedProductList" :key="item">
          <template v-slot:img>
            <ul class="row justify-content-around pl-0">
              <li class="col-6 col-md-4 mb-4" v-for="son in item" :key="son.id">
                <article class="product-card box_shadow">
                    <nuxt-link :to="`/products/${son.id}?catgId=${son.catgId}&maxCatgId=${son.maxCatgId}`">
                      <b-img 
                        :src="son.mainPic" 
                        fluid 
                        :alt="son.title"
                      >
                      </b-img>
                      <div class="product-card-content">
                        <h4>{{ son.title }}</h4>
                        <div v-html="son.content"></div>
                        <!-- <p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
                        <p>{{ $t('common.dimension') }}: 6800x2490x3668</p>
                        <p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p> -->
                      </div>
                    </nuxt-link>
                  </article>
              </li>
            </ul>
          </template>
        </b-carousel-slide>
      </b-carousel>
    </div>
  </div>
</template>

<script>
export default {
  name: 'article-page-info',
  data() {
    return {
      
    }
  },
  async asyncData({$axios, params }) {
    let {
      data:{ 
        busiProdNew:detais,
        next:nextarticle,
        previous:prevarticle,
        randomList
      }
    } = await $axios.get(`/web/prodNewsInfo?id=${params.id}`)
    const chunkSize = 3;
    const relatedProductList = [];
    for (let i = 0; i < randomList.length; i += chunkSize) {
      relatedProductList.push(randomList.slice(i, i + chunkSize));
    }
    
    return {
      detais,
      nextarticle,
      prevarticle,
      relatedProductList
    }
  },
  head() {
    return {
      title: this.detais.title,
      meta: [
        {
          hid: 'keywords',
          name: 'keywords',
          content: this.detais.prodKeyword
        },
        {
          hid: 'description',
          name: 'description',
          content: this.detais.prodDescription
        }
      ]
    }
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
.article-page-info {
  .info-top {
    padding-bottom: .5rem;
    border-bottom: 1px solid #d8dde1;
    .article-page-title {
      margin: 1.5625rem 0;
      margin-bottom: .9375rem;
      color: #444444;
      text-align: center;
      font-size: 1.5rem;
    }
    .article-page-date {
      color: #9e9e9e;
      text-align: center;
      font-size: .875rem;
    }
  }
  .article-page-content {
    margin-bottom: 2.6875rem;
    .guide {
      padding-top: .625rem;
      display: flex;
      align-items: center;
      color: #515760;
      border-top: 1px solid #d8dde1;
      font-size: .875rem;
    }
  }
  .related-article-page {
    .news-related-item {
      padding: 1.125rem 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #d8dde1;
      font-size: .875rem;
      p {
        flex: 1;
        color: #444444;
        -webkit-line-clamp: 1;
      }
      span {
        color: #9e9e9e;
      }
    }
  }
  .related-products {
    #carousel-1 {
      @mixin controls {
        width: 2.875rem;
        height: 2.875rem;
        background-color: #7f7f7f;
        background-size:  1.25rem;
      }
      ::v-deep .carousel-control-prev-icon {
        @include controls;
      }
      ::v-deep .carousel-control-next-icon {
        @include controls;
      }
    }
    .product-card {
      border: 1px solid #e6e8ec;
      .product-card-content {
        padding: 1.125rem 1rem;
        border-top: .0625rem solid #e6e8ec;
        font-size: .875rem;
        h4 {
          margin-bottom: .8125rem;
          color: #212222;
          font-size: .875rem;
        }
        p {
          color: #878b90;
        }
        .view-details {
          margin: 0 auto;
          margin-top: 2rem;
        }
      }
    }
  }
}
</style>