<template>
  <footer class="footer">
    <div class="container-fluid w-100 h-auto">
      <div class="row justify-content-center">
        <dl class="introduce col-6 col-md-2">
          <dt>Contact us</dt>
          <dl>
            Detailed address
          </dl>
          <dl>
            Shangang xintiandi No8, 19 floor, Lixia district, jinan, Shandong, China
          </dl>
        </dl>

        <dl class="introduce col-6 col-md-2">
          <dt>Contact Us</dt>
          <dl>
            <nuxt-link to="/">About Us</nuxt-link>
          </dl>
          <dl>
            <nuxt-link to="/">Contact us</nuxt-link>
          </dl>
          <dl>
            <nuxt-link to="/">Feedback</nuxt-link>
          </dl>
        </dl>

        <dl class="introduce col-6 col-md-3">
          <dt>Categories</dt>
          <dl>
            <nuxt-link to="/">Trailer</nuxt-link>
          </dl>
          <dl>
            <nuxt-link to="/">Truck</nuxt-link>
          </dl>
          <dl>
            <nuxt-link to="/">Trailer Parts</nuxt-link>
          </dl>
          <dl>
            <nuxt-link to="/">Truck Parts</nuxt-link>
          </dl>
          <dl>
            <nuxt-link to="/">Used/Second Hand Tru</nuxt-link>
          </dl>
        </dl>

        <div class="contact col-6 col-md-2">
          <div class="box">
            <b-img src="~assets/image/common/contact.png" fluid alt="Contact Us"></b-img>
            <p class="mt-1">Scan the code and check us out</p>
          </div>
        </div>
      </div>
    </div>

    <h4 class="copyright">
      Copyright © Sinotruck Howo Sales Co.,Ltd All rights reserved.Privacy Policy
    </h4>
  </footer>
</template>

<script>

export default {
  data() {
    return {
      
    }
  }
}
</script>

<style lang="scss" scoped>
.footer {
  background-color:#152235;
  .introduce {
    padding-top: 3.25rem;
    color: #b0b6b9;
    font-size: .875rem;
    dt {
      margin-bottom: 1.125rem;
      color: #ffffff;
      font-size: 1.125rem;
    }
    a {
      color: #b0b6b9;
    }
  }
  .contact {
    padding-top: 3.25rem;
    .box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-self: center;
      p {
        width: 8rem;
        text-align: center;
        color: #f0f0f0;
        font-size: .75rem;
      }
    }
  }
  .copyright {
    width: 100%;
    height: 4.5rem;
    line-height: 4.5rem;
    color: #ffffff;
    text-align: center;
    border-top: .0625rem solid #eaeaea;
    font-size: .875rem;
    font-weight: 400;
  }
}
</style>
