happychin-web/components/Footer-section/index.vue

<script setup>
const { t } = useI18n()
</script>
<style lang="css" scoped>
.multi-line {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.clamp-1 {
  -webkit-line-clamp: 1;
}
.clamp-2 {
  -webkit-line-clamp: 2;
}
.clamp-3 {
  -webkit-line-clamp: 3;
}

.cursor-pointer {
  cursor: pointer;
}

.shrink-0 {
  flex-shrink: 0;
}

.bgCover {
  width: 100%;
  height: auto;
  object-fit: contain;
}
</style>

<template>
  <footer class="footer-section section-bg fix">
    <div class="frame-shape">
      <img src="/picture/frame1.png" alt="shape-img" />
    </div>
    <div class="zebra-shape float-bob-y">
      <img style="width: 158px; height: 253px" src="/picture/zebra.png" alt="shape-img" />
    </div>
    <div class="container">
      <div class="row contact-info-area-3">
        <div
          class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp contact-info-items-3"
          data-wow-delay=".5s"
        >
          <div class="icon shrink-0">
            <img src="/public/picture/footer-phone.svg" alt="" />
          </div>
          <div class="content shrink-0">
            <p>{{ t('callUs') }}</p>
            <h3>
              <a href="let:+86 18589716552">+86 18589716552</a>
            </h3>
          </div>
        </div>
        <div
          class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp contact-info-items-3"
          data-wow-delay=".7s"
        >
          <div class="icon shrink-0">
            <img src="/public/picture/footer-email.svg" alt="" />
          </div>
          <div class="content">
            <p>{{ t('email') }}</p>
            <h3 title="happychin@gmail.com" class="w-100 cursor-pointer multi-line clamp-1">
              <a class="" href="mailto:happychin@gmail.com">happychin@gmail.com</a>
            </h3>
          </div>
        </div>
        <div
          class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp contact-info-items-3"
          data-wow-delay=".9s"
        >
          <div class="icon shrink-0">
            <img src="/public/picture/footer-address.svg" alt="" />
          </div>
          <div class="content multi-line clamp-1">
            <p>{{ t('location') }}</p>
            <h3
              title="Room 1509, Building 11, Shidai Hui, Yuzhong District, Chongqing Municipality, China"
              class="w-100 multi-line clamp-1 cursor-pointer"
            >
              {{ t('address') }}
            </h3>
          </div>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <div class="f-bottom-shape">
        <img class="bgCover" src="/picture/footer-bottom.svg" alt="" />
      </div>
      <div class="container">
        <div class="footer-wrapper d-flex align-items-center justify-content-between">
          <p class="wow fadeInLeft color-2" data-wow-delay=".3s">
            {{ t('copyright') }}
            <a href=""></a>
          </p>
          <ul class="footer-menu wow fadeInRight" data-wow-delay=".5s">
            <li>
              <a href="/contact">{{ t('termsAndCondition') }}</a>
            </li>
            <li>
              <a href="/contact">{{ t('privacyPolicy') }}</a>
            </li>
          </ul>
        </div>
      </div>
      <a href="#" id="scrollUp" class="scroll-icon">
        <img src="/image/back-top.svg" alt="" />
      </a>
    </div>
  </footer>
</template>