realtorEasier-webSite/mobile/src/pages/layout/footer.vue

<template>
  <div>
    <div class="footer-find" v-if="!$route.meta.hideFooterBanner">
      <p>{{ $t('header.footer.bannerTitle') }}</p>
      <div class="find-btn" @click="$router.push('/cases/全部')">{{ $t('header.footer.find') }}</div>
    </div>
    <div class="footer">
      <div class="footer-header">
        <h-icon :type="language === 'zh' ? 'logo' : 'hengbiaoEN'" class="logo-size" />
        <img @click="gotoLink('https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA3NjI1MTE5MA==&scene=110#wechat_redirect','weixin')" src="@/assets/images/refactor/home/wechat.png" alt>
        <img @click="gotoLink('https://qr.weibo.cn/g/574xnj')" src="@/assets/images/refactor/home/weibo.png" alt>
        <img @click="gotoLink('https://v.douyin.com/RBu3JQ/','douyin')" src="@/assets/images/refactor/home/douyin.png" alt>
      </div>
      <ul class="footer-types">
        <li v-for="(item, index) in types" :key="index" :class="{'is-active': openType === index}" @click="changeOpenType(index)">
          {{item.name}}
          <h-icon type="shang" class="arrow" />
          <ul class="types-child-list">
            <li class="types-child" v-for="(child, index) in item.childs" :key="index" @click="toLink(child)">{{ child.name }}</li>
          </ul>
        </li>
        <!-- <li :class="{'is-active': openType === 'lang'}" @click="changeOpenType('lang')">
          {{ languageName }}
          <h-icon type="shang" class="arrow" />
          <ul class="types-child-list">
            <li class="types-child" v-for="item in languageList" :key="item.value" @click="changeLanguage(item)">{{ item.name }}</li>
          </ul>
        </li> -->
      </ul>
      <ul class="footer-infos">
        <li class="infos-item" v-for="(item,i) in langFooter.items" :key="i">
          <span class="label">{{item.name}}</span>：
          <span class="content">{{item.content}}</span>
        </li>
      </ul>
      <div class="relevant">
        <div class="copyright">
          <p>{{langFooter.copyright[0]}}</p>
          <p>{{langFooter.copyright[1]}}</p>
          <!-- <p>珠海市四维时代网络科技有限公司</p> -->
        </div>
      </div>
      <!-- <div class="layout">
        <div class="infos">
          <div class="icons">
            <img @click="gotoLink('https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA3NjI1MTE5MA==&scene=110#wechat_redirect','weixin')" :src="`${$cdn}images/01wx.png`" alt>
            <img @click="gotoLink('https://qr.weibo.cn/g/574xnj')" :src="`${$cdn}images/02wb.png`" alt>
            <img @click="gotoLink('https://v.douyin.com/RBu3JQ/','douyin')" :src="`${$cdn}images/05dy.png`" alt>
          </div>
          <div class="s-line"></div>
          <div class="infos-item" v-for="(item,i) in langFooter.items" :key="i">
            <h2>{{item.name}}</h2>
            <p>{{item.content}}</p>
          </div>
        </div>
        <div class="relevant">
          <div>
            <a v-for="(item,i) in langFooter.links" :key="i" :href="item.url">{{item.name}}</a>
          </div>
          <div class="copyright">
            <p>{{langFooter.copyright[0]}}</p>
            <p>{{langFooter.copyright[1]}}</p>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import browser from '@/util/browser'

export default {
  name: 'Footer',
  computed: {
    ...mapState({
      language: state => state.language.current,
      langToast: state => state.language.home.toast,
      langFooter: state => state.language.home.footer,
      languageList: state => state.language.languageList
    }),
    languageName () {
      let language = this.languageList.filter(item => item.value === this.language)

      return language[0] ? language[0].name : '简体中文'
    }
  },
  data () {
    return {
      isWeixin: browser.weixin,
      openType: '',
      types: [
        {
          name: this.$t('header.solutions'),
          childs: [
            {
              name: this.$t('header.solutionsHouse'),
              url: '/conduct/house'
            },
            {
              name: this.$t('header.solutionsExi'),
              url: '/conduct/exhibition'
            },
            {
              name: this.$t('header.solutionsSubject'),
              url: '/conduct/subject'
            },
            {
              name: this.$t('header.solutionsShop'),
              url: '/conduct/shop'
            },
            {
              name: this.$t('header.solutionsSec'),
              url: '/conduct/secury'
            }
          ]
        },
        {
          name: this.$t('header.about'),
          childs: [
            {
              name: this.$t('header.aboutCompany'),
              url: '/about'
            },
            {
              name: this.$t('header.aboutNews'),
              url: '/news'
            },
            {
              name: this.$t('header.aboutAgent'),
              url: '/agent'
            }
          ]
        },
        {
          name: this.$t('header.footer.find4D'),
          childs: [
            {
              name: this.$t('header.footer.kankan'),
              url: 'http://www.4dage.com/cn/#/',
              enLink: 'http://www.4dage.com/en'
            },
            {
              name: this.$t('header.footer.zhongde'),
              url: 'https://www.cgaii.com/#/',
              enLink: 'https://www.cgaii.com/en'
            },
            {
              name: this.$t('header.footer.moku'),
              url: 'http://www.4dmodel.com/'
            }
          ]
        }
      ]
    }
  },
  methods: {
    changeLanguage (item) {
      this.$store.commit('change_language', item.value)
      location.reload()
    },
    gotoLink (link, check = false) {
      if (check) {
        if (this.isWeixin) {
          if (check === 'douyin') {
            return this.$toast.show('warn', link, () => {}, this.langToast['45'])
          }
        } else {
          if (check === 'weixin') {
            return this.$toast.show('warn', this.langToast['46'])
          }
        }
      }
      window.location.href = link
    },
    changeOpenType (index) {
      if (this.openType === index) {
        this.openType = ''
      } else {
        this.openType = index
      }
    },
    toLink (item) {
      if (item.url.indexOf('http') > -1) {
        if (this.language !== 'zh' && item.enLink) {
          window.open(item.enLink)
          return
        }
        window.open(item.url)
      } else {
        this.$router.push(item.url)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.footer-find {
  width: 100%;
  height: 120px;
  background: url(~@/assets/images/refactor/home/footer-find-bg.png) no-repeat center center;
  background-size: cover;
  font-size: 16px;
  padding: 31px 0 0 0;
  text-align: center;
  font-weight: bold;
  .find-btn {
    margin: 12px auto 0;
    width: 76px;
    line-height: 28px;
    background: #1FE4DC;
    font-size: 12px;
  }
}
.footer {
  background: #202020;
  color: #fff;
  .footer-header {
    height: 58px;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    img {
      width: 18px;
      height: auto;
      line-height: 1;
      margin-right: 22px;
    }
  }
  .logo-size {
    color: #909090;
    font-size: 88px;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
  }
  .footer-types {
    color: #fff;
    font-size: 14px;
    padding-left: 20px;
    border-top: 1px solid #313131;
    border-bottom: 1px solid #313131;
    &>li {
      line-height: 60px;
      border-bottom: 1px solid #313131;
      font-weight: bold;
      &:last-child {
        border-bottom: none;
      }
      .arrow {
        float: right;
        color: #909090;
        margin: 22px 20px;
        transform: rotate(90deg);
        line-height: 1;
      }
      .types-child-list {
        max-height: 0;
        overflow: hidden;
        transition: 0.3s linear;
      }
      .types-child {
        line-height: 54px;
        height: 54px;
        padding-left: 20px;
        color: #909090;
        border-bottom: 1px solid #313131;
        &:last-child {
          border-bottom: none;
        }
      }
      &.is-active {
        .types-child-list {
          max-height: 450px;
        }
      }
    }
  }
  .footer-infos {
    padding: 28px 0 10px 20px;
    border-bottom: 1px solid #313131;
  }
  .infos-item {
    color: #EBEBEB;
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 18px;
  }
  .relevant {
    padding: 18px 0 28px 20px;
    color: #909090;
    p {
      margin-bottom: 7px;
      line-height: 18px;
    }
  }
}
</style>