123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118 |
- <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>
|