<template>
  <!-- 新闻列表 -->
  <section class="news-list">
    <nuxt-link 
      class="news-item row mt-4" 
      to="/"
      v-for="item in 6"
      :key="item"
    >
      <b-img 
        class="col-md-4"
        src="~assets/image/banner/home-pord1.png"
        alt="Responsive image"
      >
      </b-img>
      <article class="col-md-8">
        <h3 class="title">Advantages Of Front Shovel And Backhoe For Excavators</h3>
        <p class="news-content text-ellipsis ">
          When many customers maintain their trucks, they mostly only pay attention to the maintenance of tires and engines and do not pay much attention to the chassis. Little do they know that if the chassis is not maintained, the truck will have big problems. So how to maintain the chassis of a truck? The following article will introduce it in detail.
        </p>
        <div>
          <span>- Aug 19, 2022-</span>
          <img src="~assets/image/icon/goto1.png" :alt="$t('common.viewDetails')">
        </div>
      </article>
    </nuxt-link>

    <seoPagination class="mt-4" />
  </section>
</template>

<script>
export default {
  name: 'news-list',
  data() {
    return {
      bannerTopOptions: {
        
      },
    }
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
.news-list {
  box-sizing: border-box;
  .news-item {
    margin: 0;
    height: min-content;
    min-height: 12.875rem;
    border: 1px solid #e6e8ec;
    article {
      padding: 1.125rem;
      font-size: .875rem;
      .title {
        margin-top: .9375rem;
        color: #212222;
        font-size: .875rem;
      }
      .news-content {
        margin: 1.25rem 0;
        height: 5rem;
        color: #878b90;
      	-webkit-line-clamp: 4;
      }
      >div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #878b90;
        img {
          width: 1.6875rem;
          height: 1rem;
        }
      }
    }
  }
}

</style>