realtorEasier-webSite/pc/src/page/layout/footer.vue

<template>
  <div>
    <div class="plate07" v-if="!$route.meta.hideFooterFind">
      <p>{{ $t('header.footer.bannerTitle') }}</p>
      <div class="btn" @click="toCase">{{ $t('header.footer.find') }}</div>
    </div>
    <div class="footer" :style="{position: 'relative'}" >
      <div class="layout container">
        <div class="infos clear">
            <div class="infos-contact">
              <img src="@/assets/images/home/grey-logo.png" alt="logo" class="logo">
              <ul>
                <li>{{ $t('header.footer.saleEmail') }}：sales@4dage.com</li>
                <li>{{ $t('header.footer.meitiEmail') }}：pr@4dage.com</li>
                <li>{{ $t('header.footer.phone') }}：400-669-8025</li>
              </ul>
            </div>
            <div class="infos-list">
              <div class="infos-item" v-for="item in infosList" :key="item.title">
                <h6>{{ item.title }}</h6>
                <a v-for="i in item.list" :key="i.text"  target="_blank" :href="`${i.link.indexOf('http') > -1 ? i.link : `${pathname}#/${i.link}`}`">{{ i.text }}</a>
              </div>
            </div>
            <ul class="contacts-w">
              <popup
                :icon="require('@/assets/images/refactor/footer/wechat.svg')"
                :hovericon="require('@/assets/images/refactor/footer/wechat.svg')"
                :code="`${$cdn}images/code_wx.jpg`"
              />
              <popup
                :icon="require('@/assets/images/refactor/footer/wb.svg')"
                :hovericon="require('@/assets/images/refactor/footer/wb.svg')"
                :code="`${$cdn}images/code_wb.jpg`"
              />
              <popup
                :icon="require('@/assets/images/refactor/footer/dy.svg')"
                :hovericon="require('@/assets/images/refactor/footer/dy.svg')"
                :code="`${$cdn}images/code_dy.jpg`"
              />
            </ul>
        </div>
        <div class="relevant clear">
          <!-- <div>
            <a :href="language==='en'?'https://www.4dage.com/en':'https://www.4dage.com'" target="_blank">{{langFooter.fdage}}</a>
            <a :href="language==='en'?'https://www.cgaii.com/en':'https://www.cgaii.com'" target="_blank">{{langFooter.cgaii}}</a>
            <a href="http://www.4dmodel.com/" target="_blank">{{langFooter.model}}</a>
          </div> -->
          <p class="relevant-1">Copyright © 2020 4DAGE Co., Ltd. All rights reserved. </p>
          <p class="relevant-2"><a class="a_class">粤ICP备14078495号-3</a></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import popup from '@/components/popup'
import {mapState} from 'vuex'

export default {
  name: 'Footer',
  data () {
    return {
      pathname: window.location.pathname,
      infosList: [
        {
          title: this.$t('header.solutions'),
          list: [
            {
              text: this.$t('header.solutionsHouse'),
              link: 'conductHouse'
            },
            {
              text: this.$t('header.solutionsExi'),
              link: 'conductExhibition'
            },
            {
              text: this.$t('header.solutionsSubject'),
              link: 'conductSubject'
            },
            {
              text: this.$t('header.solutionsShop'),
              link: 'conductShop'
            },
            {
              text: this.$t('header.solutionsSec'),
              link: 'conductSecury'
            }
          ]
        },
        {
          title: this.$t('header.about'),
          list: [
            {
              text: this.$t('header.aboutCompany'),
              link: 'about'
            },
            {
              text: this.$t('header.aboutNews'),
              link: 'news'
            },
            {
              text: this.$t('header.aboutAgent'),
              link: 'distributor'
            }
          ]
        },
        {
          title: this.$t('header.footer.find4D'),
          list: [
            {
              text: this.$t('header.footer.kankan'),
              link: 'http://www.4dage.com/cn'
            },
            {
              text: this.$t('header.footer.zhongde'),
              link: 'https://www.cgaii.com'
            },
            {
              text: this.$t('header.footer.moku'),
              link: 'http://www.4dmodel.com/'
            }
          ]
        }
      ]
    }
  },
  components: {popup},
  computed: {
    ...mapState({
      split: state => state.ui.navDivision,
      langFooter: state => state.language.home.footer,
      language: state => state.language.current
    })
  },
  methods: {
    toCase () {
      this.$router.push('/cases/全部')
      window.scrollTo({top: 0})
    }
  }
}
</script>

<style lang="scss" scoped>
  .a_class,.a_class:hover,.a_class:active{
    color: #fff;
    text-decoration: none;
    cursor: initial;
  }
  .footer {
    padding-top: 76px 0 26px;
    background-color: #202020 !important;
    position: relative;
    width: 100%;
    bottom: 0;
    z-index: 888;
    .layout {
      margin: 0 auto;
      max-width: 1440px;
      padding-left: 20px;
      padding-right: 20px;
      .relevant {
        margin-top: 86px;
        border-top: 1px solid #909090;
        padding: 26px 0;
        color: #909090;
        &-1 {
          float: left;
          background-color: transparent;
        }
        &-2 {
          float: right;
        }
        div {
          margin-bottom: 8px;

          a {
            color: #1fe4dc;
            font-size: 14px;
            text-decoration: underline;
            display: inline-block;
            line-height: 25px;

            &:nth-child(2) {
              margin: 0 42px;
            }
          }
        }

        p {
          font-size: 14px;
          color: #ffffff;
          margin-bottom: 8px;
        }
      }
      &::after {
        content: '';
        display: block;
        clear: both;
      }
    }
  }

.infos {
  font-size: 16px;
  color: #EBEBEB;
  padding: 76px 0 0 0;
  .infos-contact {
    float: left;
    ul {
      margin-top: 27px;
    }
    li {
      margin-bottom: 15px;
    }
  }
  .infos-list {
    float: left;
    margin-left: 157px;
    padding-top: 25px;
  }
  .infos-item {
    float: left;
    color: #909090;
    min-width: 138px;
    h6 {
      margin-bottom: 27px;
      color: #fff;
    }
    a {
      display: block;
      color: #909090;
      margin-bottom: 15px;
      cursor: pointer;
      &:hover {
        color: #FFFFFF;
      }
    }
  }
}
.plate07 {
  width: 100%;
  height: 300px;
  background: url(~@/assets/images/home/bottom-bg.png) no-repeat center center;
  text-align: center;
  padding-top: 94px;
  color: #202020;
  position: relative;
  z-index: 100;
  p {
    font-size: 40px;
    margin-bottom: 27px;
  }
  .btn {
    width: 140px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    background: #1FE4DC;
    font-weight: 600;
    cursor: pointer;
  }
}

.contacts-w {
  float: right;
}

  @media screen and (max-width: 1500px) {
  .footer {
    .layout{
      max-width:1200px;
    }
  }

}
</style>