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">WENKH is a global leading consulting brand for industry segments. We providesegmented market research reports, custom research, white papers and feasibilityreports for all industries, focusing on market status and forecasts, competition analysis, market prospects analysis and market positioning. WENKH usesprofessional data and deep insights to help companies make decisions andpromote win-win cooperation.</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="">Reports Custom</a>
        <a href="">Research Industry</a>
        <a href="">News</a>
        <a href="">About Us</a>
        <a href="">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@wenkh.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>
</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>
.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;
        }
      }
    }
  }
}
</style>