<template>
  <!-- 新闻详情 -->
  <div class="news-info">
    <div class="info-top">
      <h2 class="news-title">How To Maintain The Chassis Of A Truck?</h2>
      <p class="news-date">- Oct 25, 2024-</p>
    </div>

    <div class="news-content">
      <div></div>
      <ContactFooter />
      <div class="guide">
        <nuxt-link to="/">
          Previous: How To Maintain The Chassis Of A Truck?
        </nuxt-link>

        <nuxt-link to="/">
          Next: Flatbed Trailer Buying Guide
        </nuxt-link>
      </div>
    </div>

    <div class="related-news mb-4">
      <div class="pretty-header">
        <h2>{{ $t('news.relatedNews') }}</h2>
      </div>
      <nuxt-link 
        class="news-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">
      <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 3" :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 3" :key="son">
                <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>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>
              </li>
            </ul>
          </template>
        </b-carousel-slide>
      </b-carousel>
    </div>
  </div>
</template>

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

<style lang="scss" scoped>
.news-info {
  .info-top {
    padding-bottom: .5rem;
    border-bottom: 1px solid #d8dde1;
    .news-title {
      margin: 1.5625rem 0;
      margin-bottom: .9375rem;
      color: #444444;
      text-align: center;
      font-size: 1.5rem;
    }
    .news-date {
      color: #9e9e9e;
      text-align: center;
      font-size: .875rem;
    }
  }
  .news-content {
    margin-bottom: 2.6875rem;
    .guide {
      padding-top: .625rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #515760;
      border-top: 1px solid #d8dde1;
      font-size: .875rem;
    }
  }
  .related-news {
    .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>