bbs.hoolihome.com/components/common/MyFooter.vue

<template>
  <header class="my-footer">
    <div :class="{'footer-wrap': true,'en': locale==='en'}">
      <div class="part top">
        <div class="top-left">
          <div class="item one">
            <p class="title">{{ $t("companyInfo") }}</p>
            <p class="each introduction">
              <a
                :href="`${wwwURL}/${locale}/common/introduce`"
                target="_blank"
              >{{ $t("hooliIntroduction") }}</a>
            </p>
            <p class="each product-service">
              <a
                :href="`${wwwURL}/${locale}/common/product-service`"
                target="_blank"
              >{{ $t("productService") }}</a>
            </p>
            <p class="each join-us">
              <a
                :href="`${wwwURL}/${locale}/common/join-us`"
                target="_blank"
              >{{ $t("joinUs") }}</a>
            </p>
          </div>
          <div class="item two">
            <p class="title">{{ $t("userHelp") }}</p>
            <p class="each faq">
              <a
                :href="`${wwwURL}/${locale}/common/faq`"
                target="_blank">{{ $t("faq") }}</a>
            </p>
            <p class="each privacy-statement">
              <a
                :href="`${wwwURL}/${locale}/common/privacy`"
                target="_blank"
              >{{ $t("privacyStatement") }}</a>
            </p>
            <p class="each complaint-suggestion">
              <a
                href="javascript:void(0);"
                @click="handleShowView">{{ $t("complaintSuggestion") }}</a>
            </p>
            <p class="each sitemap">
              <a
                :href="`${wwwURL}/sitemap`"
                target="_blank"
              >{{ $t("sitemap") }}</a>
            </p>
          </div>
          <div
            v-if="locale==='en'"
            class="item three">
            <p class="title">{{ $t("attentionUs") }}</p>
            <ul class="attention-us">
              <li>
                <a
                  target="_blank"
                  href="https://www.facebook.com/hoolihome">
                  <img src="//static.hoolihome.com/bbs/img/attention_facebook.png?v=1">
                </a>
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.instagram.com/explore/tags/hoolihome">
                  <img src="//static.hoolihome.com/bbs/img/attention_instagram.png?v=1">
                </a>
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.linkedin.com/company/hoolihome">
                  <img src="//static.hoolihome.com/bbs/img/attention_linkedin.png?v=1">
                </a>
              </li>
            </ul>
          </div>
          <div
            v-else
            class="item three">
            <p class="title">{{ $t("attentionUs") }}</p>
            <ul class="attention-us">
              <!-- <li>
                <a
                  target="_blank"
                  href="wwwURL">
                  <img src="//static.hoolihome.com/bbs/img/attention_wechat.png">
                </a>
              </li> -->
              <li>
                <a
                  target="_blank"
                  href="https://weibo.com/u/6387807436"
                >
                  <img src="//static.hoolihome.com/bbs/img/attention_weibo.png?v=1">
                </a>
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.toutiao.com/c/user/70370841306/#mid=1580751152527374">
                  <img
                    src="//static.hoolihome.com/bbs/img/attention_toutiao.png?v=2">
                </a>
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.iesdouyin.com/share/user/95892613855">
                  <img src="//static.hoolihome.com/bbs/img/attention_douyin.png?v=1">
                </a>
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.linkedin.com/company/hoolihome">
                  <img src="//static.hoolihome.com/bbs/img/attention_linkedin.png?v=1">
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="top-right">
          <div class="item one">
            <img
              class="qrocde"
              src="//static.hoolihome.com/pc/3.0.0/assets/img/common/barcode_app.png?v=2">
            <p class="desc">{{ $t("hooliApp") }}</p>
          </div>
          <div class="item two">
            <img
              class="qrocde"
              src="//static.hoolihome.com/pc/3.0.0/assets/img/common/barcode_weapp.png?v=2">
            <p class="desc">{{ $t("weapp") }}</p>
          </div>
          <div class="item three">
            <img
              class="qrocde"
              src="//static.hoolihome.com/pc/3.0.0/assets/img/common/barcode_wx.png?v=2">
            <p class="desc">{{ $t("wechat") }}</p>
          </div>
        </div>
      </div>
      <div
        v-if="friendshipLinkArr.length>0"
        class="part middle">
        <template v-for="(vv,ii) in friendshipLinkArr">
          <ul
            :key="ii"
            class="friendship-link">
            <li class="each">
              <span>{{ `${vv.cate}:` }}</span>
            </li>
            <li
              v-for="(v,i) in vv.linkList"
              :key="i"
              class="each">
              <a
                :href="v.url"
                target="_blank">{{ v.name }}</a>
            </li>
          </ul>
        </template>
      </div>
      <div class="part below">
        <div class="item one">
          <img
            class="logo"
            src="//static.hoolihome.com/common/default/lg.png">
        </div>
        <div class="item two">
          <p class="copyright">{{ $t("copyright") }}</p>
          <p class="company-name">{{ $t("companyName") }}</p>
          <p class="authorities-promptly">{{ $t("authoritiesPromptly") }}</p>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
import { wwwURL } from '~/common/config.js'

export default {
  props: {
    friendshipLinkArr: {
      type: Array,
      required: false,
      default: () => []
    }
  },
  data() {
    return {
      wwwURL,
      locale: this.$store.state.locale
    }
  },
  methods: {
    handleShowView() {
      let { loginUserInfo, locale } = this.$store.state
      this.$hooliAnalysis.upload({
        ec: this.$C.ENTRANCE_CODE.complain,
        et: this.$C.EVENT_TYPE.click
      })
      if (loginUserInfo && loginUserInfo.token) {
        window.open(`${wwwURL}/${locale}/common/comments`)
      } else if (this.$parent && this.$parent.$refs.myHeader) {
        this.$parent.handleShowView()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.my-footer {
  background-color: #303030;
  .footer-wrap {
    width: 1200px;
    min-height: 308px;
    margin: 0 auto;
    &.en {
      .part {
        margin: 0 50px;
        &.top {
          .top-right {
            .item {
              &.three {
                margin-left: 26px;
              }
            }
          }
        }
      }
    }
    .part {
      position: relative;
      margin: 0 5px;
      &:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        transform: scaleY(0.5);
        border-bottom: 1px #444444 solid;
      }
      &.top {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        min-height: 188px;
        .top-left {
          flex: 1;
          display: flex;
          justify-content: flex-start;
          align-items: stretch;
          .item {
            margin-bottom: 10px;
            .title {
              height: 21px;
              line-height: 21px;
              margin-top: 40px;
              font-size: 15px;
              font-family: PingFangSC-Semibold;
              font-weight: 600;
              color: rgba(255, 255, 255, 1);
            }
            .each {
              height: 20px;
              line-height: 20px;
              margin: 9px 0;
              font-size: 14px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
              a {
                color: #ffffff;
                &:hover {
                  color: #ed5f48;
                }
              }
            }
            &.one {
              .introduction {
                margin-top: 25px;
              }
            }
            &.two {
              margin-left: 54px;
              .faq {
                margin-top: 25px;
              }
            }
            &.three {
              margin-left: 68px;
              .attention-us {
                display: flex;
                flex-flow: row wrap;
                justify-content: flex-start;
                align-content: center;
                align-items: center;
                max-width: 240px;
                margin-top: 25px;
                a {
                  display: inline-block;
                  width: 30px;
                  height: 30px;
                  margin: 0 30px 18px 0;
                  border-radius: 30px;
                  overflow: hidden;
                  &:hover {
                    opacity: 0.8;
                  }
                  img {
                    width: 30px;
                    height: 30px;
                  }
                }
              }
            }
          }
        }
        .top-right {
          display: flex;
          justify-content: flex-end;
          align-items: stretch;
          min-width: 310px;
          .item {
            margin-left: 50px;
            text-align: center;
            .qrocde {
              width: 70px;
              height: 70px;
              margin-top: 40px;
            }
            .desc {
              height: 15px;
              line-height: 15px;
              margin-top: 10px;
              font-size: 13px;
              font-family: Roboto-Regular;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
            }
          }
        }
      }
      &.middle {
        min-height: 60px;
        .friendship-link {
          display: flex;
          flex-flow: row wrap;
          justify-content: flex-start;
          align-items: center;
          &:first-child {
            padding-top: 20px;
          }
          &:last-child {
            padding-bottom: 10px;
          }
          .each {
            height: 20px;
            line-height: 20px;
            margin: 0 40px 10px 0;
            font-size: 12px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            a {
              color: #999999;
              &:hover {
                color: #ed5f48;
              }
            }
          }
        }
      }
      &.below {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        min-height: 120px;
        .item {
          &.one {
            .logo {
              width: 149px;
              margin-top: 30px;
            }
          }
          &.two {
            margin-left: 20px;
            .copyright {
              height: 17px;
              line-height: 17px;
              margin-top: 20px;
              font-size: 12px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
            }
            .company-name {
              height: 17px;
              line-height: 17px;
              margin-top: 2px;
              font-size: 12px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
            }
            .authorities-promptly {
              height: 17px;
              line-height: 17px;
              margin-top: 2px;
              font-size: 12px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
            }
          }
        }
      }
    }
  }
}
</style>