web_site2/components/Footer/index.vue

<template>
  <div class="app-footer" id="app-footer">
    <div class="footer-main">
      <div class="footer-logo wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
        <div class="logo">
          <!-- <img src="@/assets/images/logo.png"/> -->
          <img v-if="language == ''" src="@/assets/images/logo_cn3.png" alt="logo" class="logo" />
          <!-- <img v-else src="@/assets/images/logo_en2.png" alt="logo" class="logo" /> -->
          <h2 v-else>DIResearch, Inc.</h2>
        </div>
        <div class="desc">
          <p>{{ t("common.footer.show") }}</p>
        </div>
      </div>
      <div class="footer-link wow fadeInDown" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
        <div class="item-title">
          <h4>{{ t("home.custom.contact") }}</h4>
        </div>
        <div class="item-contact">
          <div class="icon">
            <n-icon :component="IosCall" size="20" color="#18a058" />
          </div>
          <div class="info">
            <p v-if="language == ''">
              <a href="tel:86-027-85307885">86-027-85307885</a>
            </p>
            <template v-else>
              <p><a href="tel:1-8884226999">+1-888 422 6999 (US)</a></p>
              <p><a href="tel:86-17320528525">+86-173 2052 8525 (Int'l)</a></p>
            </template>
          </div>
        </div>
        <div class="item-contact" v-if="language == ''">
          <div class="icon">
            <n-icon :component="MdPhonePortrait" size="20" color="#18a058" />
          </div>
          <div class="info">
            <p><a href="tel:86-17320528525">86-17320528525（24h）</a></p>
          </div>
        </div>
        <div class="item-contact">
          <div class="icon">
            <n-icon :component="MdMail" size="20" color="#18a058" />
          </div>
          <div class="info">
            <p>
              <a href="mailto:sales@dirmarketresearch.com">sales@dirmarketresearch.com</a>
            </p>
          </div>
        </div>
        <div class="item-contact">
          <div class="icon">
            <n-icon :component="IosPin" size="20" color="#18a058" />
          </div>
          <div class="info">
            <p>{{ t("common.footer.area") }}{{ t("common.footer.street") }}</p>
          </div>
        </div>
      </div>
      <div class="footer-wx wow fadeInRight" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
        <template v-if="language == ''">
          <div class="enterprise-wx">
            <p>{{ t("common.footer.customer") }}</p>
            <img src="@/assets/images/wx-02.png" />
          </div>
          <div class="wx">
            <p>{{ t("common.footer.office") }}</p>
            <img src="@/assets/images/wx-03.jpg" />
          </div>
        </template>
        <div class="footer-right-box" v-else>
          <img src="@/assets/images/logo_en2.png" alt="logo" class="logo" />
          <div class="share-tools">
            <img src="@/assets/images/share01.png" alt="FaceBook" />
            <img src="@/assets/images/share02.jpg" alt="Twitter" />
            <img src="@/assets/images/share03.png" alt="in" />
            <img src="@/assets/images/share04.jpg" alt="YouTuBe" />
            <img src="@/assets/images/share05.png" alt="Instagram" />
          </div>
          <div class="tools-pay">
            <img src="@/assets/images/pay01.png" alt="" />
            <img src="@/assets/images/pay02.png" alt="" />
            <img src="@/assets/images/pay03.png" alt="" />
            <img src="@/assets/images/pay04.png" alt="" />
            <img src="@/assets/images/pay05.png" alt="" />
            <img src="@/assets/images/pay06.png" alt="" />
          </div>
          <span class="copyright">Copyright © DIResearch.com All rights reserved.</span>
        </div>
      </div>
    </div>
    <div class="footer-under wow fadeInDown" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
      <div class="footer-nav">
        <div class="footer-nav-link">
          <a :href="(lang === 'zh-CN' ? '' : '/en') + '/report-industries'">{{
            t("common.navigate.report")
          }}</a>
          <a :href="'/bulletin/bulletin-think-tank'" v-if="lang === 'zh-CN'">简报智库</a>
          <a :href="(lang === 'zh-CN' ? '' : '/en') + '/market'">{{
            t("common.navigate.market")
          }}</a>
          <a :href="(lang === 'zh-CN' ? '' : '/en') + '/news-categories'">{{
            t("common.navigate.news")
          }}</a>
          <a :href="(lang === 'zh-CN' ? '' : '/en') + '/aboutUs'">{{
            t("common.navigate.aboutUs")
          }}</a>
        </div>
      </div>
      <div class="footer-under-desc" v-if="language == ''">
        <span>Copyright © DIResearch.com All rights reserved.</span>
        <span class="pt-20"><a href="http://beian.miit.gov.cn" target="_blank">鄂ICP备2023005961号-1</a></span>
        <span class="pt-20"><a href="https://beian.mps.gov.cn/#/query/webSearch?code=42010202002750" rel="noreferrer" target="_blank">鄂公网安备42010202002750</a></span>
      </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 {
  width: 100%;
  .footer-main {
    //width: 1200px;
    margin: 0 auto;
    padding: 50px 0 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .footer-logo {
      width: 30%;
      img {
        max-width: 100px;
        max-height: 75px;
      }

      .logo {
        margin-top: 3px;
        margin-bottom: 5px;
      }

      .logo h2 {
        margin: 0;
        padding: 0;
      }

      .desc p {
        margin-top: 0;
      }
    }
    .footer-link {
      width: calc(70% - 540px);
      .item-title {
        // height: 100px;
        // line-height: 120px;
        margin-bottom: 15px;
        h4 {
          font-size: 22px;
          font-weight: 700;
          margin: 0;
        }
      }
      .item-contact {
        display: flex;
        padding-bottom: 15px;
        color: #707070;
        .info > p {
          margin: 0;
          font-size: 1em;
          padding-left: 5px;
          font-family: 微软雅黑;
        }
        .icon > .n-icon {
          vertical-align: middle;
        }
        .wx {
          > p {
            text-align: center;
            font-size: 16px;
            margin: 0 0 5px 0;
          }
          > img {
            max-width: 120px;
            max-height: 120px;
          }
        }
      }
    }
    .footer-wx {
      width: 360px;
      text-align: center;
      display: flex;
      p {
        font-size: 20px;
        font-weight: 700;
        color: #18a058;
        width: 180px;
        margin-top: 0;
      }
      .enterprise-wx,
      .wx {
        p {
          margin-bottom: 15px;
        }
      }
      .enterprise-wx {
        img {
          width: 140px;
          padding-top: 7px;
        }
      }
      .wx {
        img {
          width: 150px;
        }
      }
      .logo {
        display: block;
        margin-left: auto;
        // max-width: 160px;
        max-height: 80px;
      }

      .share-tools {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 30px;

        img {
          width: 30px;
          height: auto;
          margin-left: 10px;
          vertical-align: middle;
        }
      }

      .tools-pay {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-right: -10px;

        img {
          width: 50px;
          height: auto;
          margin-left: 10px;
          vertical-align: middle;
        }
      }

      .copyright {
        display: block;
        text-align: right;
      }
    }
  }
  .footer-under-desc {
    text-align: center;
    border-top: 1px solid #f2f2f2;
    padding: 15px 0;
    color: #707070;
    > p {
      margin: 0;
    }
  }
  .footer-nav {
    text-align: center;
    padding: 15px 0;
    .footer-nav-link {
      padding: 5px;
      background-color: #376092;
      color: #fff;
      > a {
        padding: 0 10px;
        font-size: 16px;
      }
    }
  }
}
</style>