ShowEasyFrontEnd/FrontEnd/components/Footer.vue

<template>
  <div class="footer">
    <v-card flat width="100%" color="transparent" :height="width > 960 ? '335' : 'auto'"
      class="d-flex align-center flex-column pt-14" style="background: #f8f8f8; font-size: 12px">
      <v-card flat color="transparent" class="d-none d-sm-flex flex-row justify-space-around"
        style="width: 100%; max-width: 1366px">
        <v-card flat color="transparent" class="hidden-sm-and-down">
          <v-img max-width="180px" max-height="127px" contain :src="require('@/assets/svg/logo_footer_v3.svg')"
            class="mx-auto my-auto"></v-img>
        </v-card>
        <v-card flat color="transparent" class="px-10">
          <v-card width="100%" height="100%" color="transparent" flat>
            <div v-for="i in showEasy.length" :key="i" width="100%" :class="i == 1 ? 'primary--text mb-3' : 'mb-2'"
              :style="i == 1 ? 'font-size: 14px' : ''">
              <nuxt-link v-if="
                showEasy[i - 1] === 'About Us' || showEasy[i - 1] === 'FAQ'
              " :to="localePath(showEasyPath[i - 1])" class="remove-underline">
                {{ $t(showEasy[i - 1]) }}
              </nuxt-link>
              <a v-else-if="showEasy[i - 1] === 'Recruitment'" :href="showEasyPath[i - 1]" class="remove-underline"
                target="_blank">
                {{ $t(showEasy[i - 1]) }}
              </a>
              <div v-else>
                {{ $t(showEasy[i - 1]) }}
              </div>
            </div>
            <!-- <nuxt-link
              v-for="i in showEasy.length"
              :key="i"
              :to="localePath(showEasyPath[i - 1])"
              class="remove-underline"
            >
              <div
                width="100%"
                :class="i == 1 ? 'primary--text mb-3' : 'mb-2'"
                :style="i == 1 ? 'font-size: 14px' : ''"
              >
                {{ $t(showEasy[i - 1]) }}
              </div>
            </nuxt-link> -->
          </v-card>
        </v-card>
        <v-card flat color="transparent" class="px-10">
          <v-card v-if="$i18n.locale == 'zh-tw'" width="100%" height="50%" color="transparent" flat>
            <div v-for="i in forExhibitorAndVIsitor.length" :key="i" width="100%"
              :class="i == 1 ? 'primary--text mb-3' : 'mb-2'" :style="i == 1 ? 'font-size: 14px' : ''">
              <!-- <nuxt-link v-if="forExhibitorAndVIsitor[i-1] !== 'Blog'" :to="localePath(forExhibitorAndVIsitorPath[i - 1])"
              class="remove-underline">
                {{ $t(forExhibitorAndVIsitor[i - 1]) }}
              </nuxt-link> -->

              <a v-if="forExhibitorAndVIsitor[i - 1] === 'Blog'" :href="forExhibitorAndVIsitorPath[i - 1]"
                class="remove-underline" target="_blank">
                {{ $t(forExhibitorAndVIsitor[i - 1]) }}
              </a>
              <div v-else>
                {{ $t(forExhibitorAndVIsitor[i - 1]) }}
              </div>
            </div>
          </v-card>
          <v-card v-else width="100%" height="50%" color="transparent" flat>
            <div v-for="i in forExhibitorAndVIsitor.length" :key="i" width="100%"
              :class="i == 1 ? 'primary--text mb-3' : 'mb-2'" :style="i == 1 ? 'font-size: 14px' : ''">
              <!-- <nuxt-link v-if="forExhibitorAndVIsitor[i-1] !== 'Blog'" :to="localePath(forExhibitorAndVIsitorPath[i - 1])"
              class="remove-underline">
                {{ $t(forExhibitorAndVIsitor[i - 1]) }}
              </nuxt-link> -->

              <a v-if="forExhibitorAndVIsitor[i - 1] === 'Blog'" :href="forExhibitorAndVIsitorPath_en[i - 1]"
                class="remove-underline" target="_blank">
                {{ $t(forExhibitorAndVIsitor[i - 1]) }}
              </a>
              <div v-else>
                {{ $t(forExhibitorAndVIsitor[i - 1]) }}
              </div>
            </div>
          </v-card>

          <div v-show="$i18n.locale == 'zh-tw'">
            <v-card width="100%" height="50%" color="transparent" flat :class="width > 960 ? '' : 'mt-10'">
              <div v-for="i in forPartner.length" :key="i" width="100%" :class="i == 1 ? 'primary--text mb-3' : 'mb-2'"
                :style="i == 1 ? 'font-size: 14px' : ''">
                <a v-if="forPartner[i - 1] === 'Become Partner'" :href="forPartnerPath[i - 1]" class="remove-underline"
                  target="_blank">
                  {{ $t(forPartner[i - 1]) }}
                </a>
                <div v-else>
                  {{ $t(forPartner[i - 1]) }}
                </div>
              </div>
            </v-card>
          </div>
        </v-card>
        <v-card flat color="transparent">
          <v-card width="100%" height="50%" color="transparent" flat>
            <div width="100%" :class="i == 1 ? 'primary--text mb-3' : 'mb-2'" :style="i == 1 ? 'font-size: 14px' : ''"
              v-for="i in termsOfUse.length" :key="i">
              <span v-if="i === 1">{{ $t(termsOfUse[i - 1]) }}</span>
              <nuxt-link :to="localePath(termsOfUsePath[i - 1])" class="remove-underline" v-if="i > 1">
                {{ $t(termsOfUse[i - 1]) }}
              </nuxt-link>
            </div>
          </v-card>
          <v-card flat color="transparent" width="100%" height="50%" class="hidden-sm-and-down">
            <div width="100%" class="primary--text mb-3 mt-8" style="font-size: 14px; line-height: 30px">
              {{ $t("Follow Us") }}
            </div>
            <div>
              <div class="d-flex flex-row" v-if="$i18n.locale == 'zh-tw'">
                <a :href="FollowUsPath[i - 1]" v-for="i in FollowUsIcon.length" :key="i" style="margin: 0 10px 0 0"
                  target="_blank">
                  <v-img max-width="24" :src="require(`@/assets/svg/${FollowUsIcon[i - 1]}.svg`)"></v-img>
                </a>
              </div>
              <div v-else class="d-flex flex-row">
                <a :href="FollowUsPath_en[i - 1]" v-for="i in FollowUsIcon.length" :key="i" style="margin: 0 10px 0 0"
                  target="_blank">
                  <v-img max-width="24" :src="require(`@/assets/svg/${FollowUsIcon[i - 1]}.svg`)"></v-img>
                </a>
              </div>

              <!-- <nuxt-link
                :to="localePath(FollowUsPath[i - 1])"
                v-for="i in FollowUsIcon.length"
                :key="i"
                style="margin: 0 10px 0 0;"
              >
                <v-img
                  max-width="24"
                  :src="require(`@/assets/svg/${FollowUsIcon[i - 1]}.svg`)"
                ></v-img>
              </nuxt-link> -->
            </div>
          </v-card>
          <div width="100%" height="50%" class="hidden-md-and-up" :class="width > 960 ? '' : 'mt-10'">
            <div width="100%" class="primary--text mb-3" style="font-size: 14px">
              {{ $t("Contact Us") }}
            </div>
            <a :href="contactPath[i - 1]" class="remove-underline" v-for="i in contact.length" :key="i">
              <div class="d-flex flex-row mb-2">
                <v-img max-width="20" contain class="mr-3" :src="
                  i == 1
                    ? require('@/assets/svg/phone.svg')
                    : require('@/assets/svg/envelop.svg')
                "></v-img>
                <div>{{ $t(contact[i - 1]) }}</div>
              </div>
            </a>
          </div>
        </v-card>
        <v-card flat color="transparent" cols="2" class="hidden-sm-and-down">
          <div width="100%" height="50%">
            <div width="100%" class="primary--text mb-3" style="font-size: 14px">
              {{ $t("Contact Us") }}
            </div>
            <a :href="contactPath[i - 1]" class="remove-underline" v-for="i in contact.length" :key="i">
              <div class="d-flex flex-row mb-1">
                <v-img max-width="20" contain class="mr-3" :src="
                  i == 1
                    ? require('@/assets/svg/phone.svg')
                    : require('@/assets/svg/envelop.svg')
                "></v-img>
                <div>{{ $t(contact[i - 1]) }}</div>
              </div>
            </a>
          </div>
        </v-card>
      </v-card>

      <!-- phone menu -->
      <v-card width="100%" height="auto" flat color="transparent" class="hidden-sm-and-up">
        <v-expansion-panels accordion flat style="font-size: 12px">
          <v-expansion-panel v-for="i in titles.length" :key="i" style="background: #f8f8f8">
            <v-expansion-panel-header class="primary--text" expand-icon="mdi-plus">
              {{ $t(titles[i - 1]) }}
            </v-expansion-panel-header>
            <v-expansion-panel-content>
              <div v-if="$i18n.locale == 'zh-tw'">
                <template v-for="j in total[i - 1].length">
                <div :key="j" v-if="!!total[i - 1][j - 1]" class="my-2">
                  <a class="remove-underline my-n2" v-if="
                    total[i - 1][j - 1] === 'Recruitment' ||
                    total[i - 1][j - 1] === 'Blog'
                  " :href="totalPath[i - 1][j - 1]" target="_blank">
                    {{ $t(total[i - 1][j - 1]) }}
                  </a>

                  <span class="my-n2" v-else-if="
                    total[i - 1][j - 1] === 'Become Partner' ||
                    total[i - 1][j - 1] === 'Partner Login' ||
                    total[i - 1][j - 1] === 'ShowEasy Advantage' ||
                    total[i - 1][j - 1] === 'Press' ||
                    total[i - 1][j - 1] === 'News' ||
                    total[i - 1][j - 1] === 'Our Partner'
                  ">
                    {{ $t(total[i - 1][j - 1]) }}
                  </span>
                  <nuxt-link v-else-if="i !== 4" :to="totalPath[i - 1][j - 1]" class="remove-underline my-n2">
                    {{ $t(total[i - 1][j - 1]) }}
                  </nuxt-link>
                  <div width="100%" class="my-2 d-flex flex-row" v-if="i === 4">
                    <v-img max-width="20" contain class="mr-3" :src="
                      j == 1
                        ? require('@/assets/svg/phone.svg')
                        : require('@/assets/svg/envelop.svg')
                    "></v-img>
                    <div>
                      <a class="remove-underline" :href="totalPath[i - 1][j - 1]">
                        {{ $t(total[i - 1][j - 1]) }}
                      </a>
                    </div>
                  </div>
                </div>
              </template>
              </div>
              <div v-else>
                <template v-for="j in total[i - 1].length">
                <div :key="j" v-if="!!total[i - 1][j - 1]" class="my-2">
                  <a class="remove-underline my-n2" v-if="
                    total[i - 1][j - 1] === 'Recruitment' ||
                    total[i - 1][j - 1] === 'Blog'
                  " :href="totalPath_en[i - 1][j - 1]" target="_blank">
                    {{ $t(total[i - 1][j - 1]) }}
                  </a>

                  <span class="my-n2" v-else-if="
                    total[i - 1][j - 1] === 'Become Partner' ||
                    total[i - 1][j - 1] === 'Partner Login' ||
                    total[i - 1][j - 1] === 'ShowEasy Advantage' ||
                    total[i - 1][j - 1] === 'Press' ||
                    total[i - 1][j - 1] === 'News' ||
                    total[i - 1][j - 1] === 'Our Partner'
                  ">
                    {{ $t(total[i - 1][j - 1]) }}
                  </span>
                  <nuxt-link v-else-if="i !== 4" :to="totalPath[i - 1][j - 1]" class="remove-underline my-n2">
                    {{ $t(total[i - 1][j - 1]) }}
                  </nuxt-link>
                  <div width="100%" class="my-2 d-flex flex-row" v-if="i === 4">
                    <v-img max-width="20" contain class="mr-3" :src="
                      j == 1
                        ? require('@/assets/svg/phone.svg')
                        : require('@/assets/svg/envelop.svg')
                    "></v-img>
                    <div>
                      <a class="remove-underline" :href="totalPath[i - 1][j - 1]">
                        {{ $t(total[i - 1][j - 1]) }}
                      </a>
                    </div>
                  </div>
                </div>
              </template>
              </div>
              <!-- <nuxt-link
                v-for="j in total[i - 1].length"
                :key="j"
                :to="localePath(totalPath[i - 1][j - 1])"
                class="remove-underline"
                v-if="!!total[i - 1][j - 1]"
              >
                <div width="100%" class="my-2 d-flex flex-row">
                  <v-img
                    max-width="20"
                    contain
                    class="mr-3"
                    v-if="i == 5"
                    :src="
                      j == 1
                        ? require('@/assets/svg/phone.svg')
                        : require('@/assets/svg/envelop.svg')
                    "
                  ></v-img>
                  <div>
                    <a class="remove-underline" :href="totalPath[i - 1][j - 1]">
                      {{ total[i - 1][j - 1] }}
                    </a>
                  </div>
                </div>
              </nuxt-link> -->
            </v-expansion-panel-content>
            <div v-if="i !== titles.length" class="mx-5 my-2" style="border-bottom: 1px solid #e5e5e5"></div>
          </v-expansion-panel>
        </v-expansion-panels>
        <!-- <v-expansion-panels accordion flat style="font-size: 12px">
          <v-expansion-panel style="background: #f8f8f8">
            <v-expansion-panel-header
              class="primary--text"
              expand-icon="mdi-plus"
            >
              {{ $t(titles[0]) }}
            </v-expansion-panel-header>

          </v-expansion-panel>
          <div
            class="mx-5 my-2"
            style="border-bottom: 1px solid #e5e5e5"
          ></div>
          <v-expansion-panel style="background: #f8f8f8">
            <v-expansion-panel-header
              class="primary--text"
              expand-icon="mdi-plus"
            >
              {{ $t(titles[1]) }}
            </v-expansion-panel-header>
          </v-expansion-panel>
          <div
            class="mx-5 my-2"
            style="border-bottom: 1px solid #e5e5e5"
          ></div>
          <v-expansion-panel style="background: #f8f8f8">
            <v-expansion-panel-header
              class="primary--text"
              expand-icon="mdi-plus"
            >
              {{ $t(titles[2]) }}
            </v-expansion-panel-header>
          </v-expansion-panel>
          <div
            class="mx-5 my-2"
            style="border-bottom: 1px solid #e5e5e5"
          ></div>
          <v-expansion-panel style="background: #f8f8f8">
            <v-expansion-panel-header
              class="primary--text"
              expand-icon="mdi-plus"
            >
              {{ $t(titles[3]) }}
            </v-expansion-panel-header>
          </v-expansion-panel>
          <div
            class="mx-5 my-2"
            style="border-bottom: 1px solid #e5e5e5"
          ></div>
          <v-expansion-panel style="background: #f8f8f8">
            <v-expansion-panel-header
              class="primary--text"
              expand-icon="mdi-plus"
            >
              {{ $t(titles[4]) }}
            </v-expansion-panel-header>
          </v-expansion-panel>
        </v-expansion-panels> -->
      </v-card>
      <!-- phone menu -->

      <v-card width="100%" height="auto" flat color="transparent" class="hidden-md-and-up">
        <v-card v-if="$i18n.locale == 'zh-tw'" flat color="transparent" :height="width > 600 ? '120' : '60'"
          class="d-flex flex-row align-end" :class="width > 600 ? 'justify-center' : 'justify-start ml-3'">
          <a :href="FollowUsPath[i - 1]" v-for="i in FollowUsIcon.length" :key="i" style="margin: 0 15px"
            target="_blank">
            <v-img width="32" :src="require(`@/assets/svg/${FollowUsIcon[i - 1]}.svg`)"></v-img>
          </a>
        </v-card>
        <v-card v-else flat color="transparent" :height="width > 600 ? '120' : '60'" class="d-flex flex-row align-end"
          :class="width > 600 ? 'justify-center' : 'justify-start ml-3'">
          <a :href="FollowUsPath_en[i - 1]" v-for="i in FollowUsIcon.length" :key="i" style="margin: 0 15px"
            target="_blank">
            <v-img width="32" :src="require(`@/assets/svg/${FollowUsIcon[i - 1]}.svg`)"></v-img>
          </a>
        </v-card>
        <v-card flat color="transparent" height="60" class="d-flex align-end"
          :class="width > 600 ? 'justify-center' : 'justify-start ml-3'">
          <v-img max-width="200" class="mb-2" :class="width > 600 ? 'mx-auto' : 'ml-4'"
            :src="require('@/assets/svg/logo_v2.svg')"></v-img>
        </v-card>
      </v-card>

      <v-card width="100%" flat color="transparent" class="grey--text text--lighten-1 mb-2 mt-auto"
        :class="width > 600 ? 'text-center' : 'text-start pl-6'">
        {{ $t("Copyright © 2022 ShowEasy All Rights Reserved.") }}
      </v-card>
    </v-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showEasy: [],
      showEasyPath: [
        "/",
        "/aboutus",
        /*"/",
        "/",*/
        "https://www.104.com.tw/company/1a2x6bltae",
        //"/",
        "/faq",
      ],
      forExhibitorAndVIsitor: [],
      forExhibitorAndVIsitorPath: [
        "/",
        "https://medium.com/showeasy",
        //"/"
      ],
      forExhibitorAndVIsitorPath_en: [
        "/",
        "https://medium.com/showeasy-eng",
        //"/"
      ],
      forPartner: [],
      forPartnerPath: [
        "/",
        "https://forms.gle/83ysunPvPcpetYvH8",
        // "/"
      ],
      termsOfUse: [],
      termsOfUsePath: [
        "/",
        "/termsandconditions",
        "/privacypolicy",
        "/cookiepolicy",
      ],
      contact: ["886-2-2725-5000", "info@showeasy.com"],
      contactPath: ["tel:886-2-2725-5000", "mailto:info@showeasy.com"],
      FollowUsIcon: ["fb", "ig", "medium"],
      FollowUsPath: [
        "https://www.facebook.com/MakeYourShowEasy",
        "https://www.instagram.com/showeasy_/",
        "https://medium.com/showeasy",
      ],
      FollowUsPath_en: [
        "https://www.facebook.com/MakeYourShowEasy",
        "https://www.instagram.com/showeasy_/",
        "https://medium.com/showeasy-eng",
      ],
      total: [],
      totalPath: [],
      totalPath_en: [],
      titles: [],
      width: undefined,
    };
  },
  created() {
    if (process.client) {
      this.width = window.innerWidth;
    }

    this.showEasy = [
      "ShowEasy",
      "About Us",
      /* "Press",
      "News",*/
      "Recruitment",
      //"Our Partner",
      "FAQ",
    ];
    this.forExhibitorAndVIsitor = [
      "For Exhibitor．Visitor",
      "Blog",
      //"ShowEasy Advantage",
    ];
    this.forPartner = [
      // "For Partner",
      // "Become Partner",
      // "Partner Login"
    ];
    this.termsOfUse = [
      "Terms of Use",
      "Terms & Conditions",
      "Privacy Policy",
      "Cookie Policy",
    ];
    this.total = [
      this.showEasy.slice(1),
      this.forExhibitorAndVIsitor.slice(1),
      // this.forPartner.slice(1),
      this.termsOfUse.slice(1),
      this.contact,
    ];
    this.totalPath = [
      this.showEasyPath.slice(1),
      this.forExhibitorAndVIsitorPath.slice(1),
      // this.forPartnerPath.slice(1),
      this.termsOfUsePath.slice(1),
      this.contactPath,
    ];
    this.totalPath_en = [
      this.showEasyPath.slice(1),
      this.forExhibitorAndVIsitorPath_en.slice(1),
      // this.forPartnerPath.slice(1),
      this.termsOfUsePath.slice(1),
      this.contactPath,
    ];
    this.titles = [
      "ShowEasy",
      "For Exhibitor・Visitor",
      // "For Partner",
      "Terms of Use",
      "Contact Us",
    ];
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener("resize", this.onResize);
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onResize);
  },
  methods: {
    onResize() {
      if (process.client) {
        this.width = window.innerWidth;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.bottom-line {
  position: relative;
}

.bottom-line:after {
  content: "";
  height: 1px;
  width: 85%;

  position: absolute;
  left: 5%;
  bottom: 0;

  background-color: #ddd;
}

.block p {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
}

.block2 p {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
}

.row-extend {
  width: 140% !important;
}

.text-dont-wrap {
  clear: both;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

.my-container {
  max-width: 100% !important;
}

.footer {
  background-color: $Neutrals-100;
}
</style>