<template>
  <!-- 产品列表 -->
  <section class="products-list">
    <ul class="row pl-0">
      <li class="col-12 col-md-4"  v-for="item in 6" :key="item">
        <nuxt-link 
          class="products-item box_shadow mt-2" 
          to="/products/123123"
        >
          <article class="product-card box_shadow">
            <b-img src="~assets/image/banner/home-pord1.png" fluid alt="product"></b-img>
            <div class="product-card-content">
              <h4 class="text-ellipsis">SINOTRUK HOWO Tractor Truck Head</h4>
              <p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
              <p>{{ $t('common.dimension') }}: 6800x2490x3668</p>
              <p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p>
            </div>
          </article>
        </nuxt-link>
      </li>
    </ul>
    <SeoPagination class="mt-4" />
  </section>
</template>

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

<style lang="scss" scoped>
.products-list {
  box-sizing: border-box;
  ul {
    margin: 0;
    li {
      padding: 0 .3125rem;
      .products-item {
        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;
            -webkit-line-clamp: 1;
            font-size: .875rem;
          }
          p {
            color: #878b90;
          }
          .view-details {
            margin: 0 auto;
            margin-top: 2rem;
          }
        }
      }
    }
  }
}

</style>