web/components/Footer/index.vue

<template>
  <div class="app-footer ">
    <div class="footer_l">
      <div class="footer_l_img">
        <img src="/assets/images/img3.png" alt="">
      </div>
      <div class="footer_l_text">
        Driveintel Research is a leading independent segment market research consulting company, dedicated to publishing in-depth market research reports that support strategic business decision-making. Our comprehensive service offerings include competitive landscape analysis, market status and forecasting, IPO advisory, market entry strategies, global strategy, business planning, and project feasibility studies.
      </div>
      <div class="footer_l_list">
        <img src="/assets/images/img4.png" alt="">
        <img src="/assets/images/img5.png" alt="">
        <img src="/assets/images/img6.png" alt="">
        <img src="/assets/images/img7.png" alt="">
        <img src="/assets/images/img8.png" alt="">
      </div>
    </div>
    <div class="footer_nav">
      <div class="footer_nav_title">Quick Links</div>
      <div class="footer_nav_list">
        <a href="/">Home</a>
        <a href="/report-industries">Reports </a>
        <a href="/market">Custom Research </a>
        <a href="/news-categories">Industry News</a>
        <a href="/aboutUs">About Us</a>
        <a href="/contactUs">Contact</a>
      </div>
      <div class="footer_nav_contactUs">
        <div></div>
      </div>
    </div>
    <div class="footer_contactUs">
      <div class="footer_contactUs_title">Contact Us</div>
      <div class="footer_contactUs_item">
        <div class="footer_contactUs_item_l">
          <span class="iconfont icon-24gf-phoneLoudspeaker"></span>
        </div>
        <div class="footer_contactUs_item_r">
          <div>+1-888 422 6988 (US)</div>
          <div>+86-191 0717 4767 (Int'l)</div>
        </div>
      </div>
      <div class="footer_contactUs_item">
        <div class="footer_contactUs_item_l">
          <span class="iconfont icon-youxiang1"></span>
        </div>
        <div class="footer_contactUs_item_r">
          <div>market@DRIVEINTEL.com</div>
        </div>
      </div>
    </div>
    <div class="footer_r">
      <div class="footer_r_img">
        <img src="/assets/images/img11.png" alt="">
      </div>
      <div class="footer_r_list">
        <img src="/assets/images/img12.png" alt="">
        <img src="/assets/images/img13.png" alt="">
        <img src="/assets/images/img14.png" alt="">
        <img src="/assets/images/img15.png" alt="">
        <img src="/assets/images/img16.png" alt="">
        <img src="/assets/images/img17.png" alt="">
      </div>
    </div>
  </div>
  <div class="app-footer_copyright">Copyright © DRIVEINTEL.com All rights reserved.</div>
</template>

<script lang="ts" setup>
import { MdPhonePortrait, IosPin, MdMail, IosCall } from "@vicons/ionicons4";
import { useUserStore } from "@/store/user";
import { onMounted, ref } from "vue";
import { useI18n } from "#imports";
const { t } = useI18n();
const userStore = useUserStore();
const lang = userStore.getLang;
const language = ref("");
onMounted(() => {
  language.value = userStore.getLang === "en-US" ? "en" : "";
});
</script>

<style lang="scss" scoped>
@import "~/assets/css/tool.scss";
.app-footer {
  padding: 0 var(--size-145);
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  .footer_l {
    width: var(--size-583);
    padding: var(--size-40) 0 var(--size-36);
    .footer_l_img {
      margin-bottom: var(--size-5);
      img {
        width: var(--size-357);
      }
    }
    .footer_l_text {
      font-size: var(--size-16);
      font-family: Arial, Arial-Regular;
      font-weight: 400;
      text-align: left;
      color: #4d4d4d;
    }
    .footer_l_list {
      margin-top: var(--size-24);
      img {
        width: var(--size-44);
        height: var(--size-44);
        margin-right: var(--size-9);
      }
    }
  }
  .footer_nav {
    padding: var(--size-50) 0 0;
    .footer_nav_title {
      font-size: var(--size-18);
      font-family: Impact, Impact-Regular;
      font-weight: 400;
      color: #1a1a1a;
    }
    .footer_nav_list {
      a {
        font-size: var(--size-16);
        font-family: Arial, Arial-Regular;
        font-weight: 400;
        text-align: left;
        color: #4d4d4d;
        margin-top: var(--size-15);
        display: block;
      }
    }
  }
  .footer_contactUs {
    padding-top: var(--size-50);
    .footer_contactUs_title {
      font-size: var(--size-18);
      font-family: Impact, Impact-Regular;
      font-weight: 400;
      text-align: left;
      color: #1a1a1a;
      margin-bottom: var(--size-20);
    }
    .footer_contactUs_item {
      display: flex;
      .footer_contactUs_item_l {
        width: var(--size-31);
        height: var(--size-31);
        background: #e5e5e5;
        border-radius: var(--size-4);
        text-align: center;
        margin-right: var(--size-15);
        span {
          font-size: var(--size-18);
          line-height: var(--size-31);
          color: #4d4d4d;
        }
      }
      .footer_contactUs_item_r {
        font-size: var(--size-16);
        color: #4d4d4d;
        margin-top: var(--size-2);
      }
    }
  }
  .footer_r {
    padding-top: var(--size-60);
    .footer_r_img {
      text-align: center;
      margin-bottom: var(--size-25);
      img {
        width: var(--size-113);
      }
    }
    .footer_r_list {
      img {
        width: var(--size-52);
        height: var(--size-31);
        margin-right: var(--size-10);
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
.app-footer_copyright {
  width: 100%;
  background: linear-gradient(90deg, #fc8dc3 0%, #749c56 0%, #42a088 100%);
  font-size: 14px;
  font-family: ArialMT;
  text-align: center;
  color: #ffffff;
  line-height: 30px;
  padding: 15px;
}
@include responseTo("phone") {
  .app-footer {
    display: block;
    padding: var(--size-20);
    .footer_l {
      width: 100%;
      padding-bottom: 0;
      .footer_l_img {
        img {
          width: 100%;
        }
      }
      .footer_l_list {
        text-align: center;
        img {
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
    .footer_nav {
      text-align: center;
      padding-top: var(--size-10);
      .footer_nav_list a {
        text-align: center;
        margin-top: var(--size-5);
      }
    }
    .footer_contactUs {
      padding-top: var(--size-10);
      .footer_contactUs_title {
        text-align: center;
        margin-bottom: var(--size-10);
      }
      .footer_contactUs_item {
        margin-left: var(--size-30);
      }
    }
    .footer_r_list {
      display: flex;
      justify-content: space-between;
      img {
        margin-right: 0 !important;
      }
    }
    .footer_r {
      padding-top: var(--size-20);
    }
  }
}
</style>