4dkankan_official/src/page/service/footer.vue

<template>
  <div class="footer-layout" :style="{marginLeft:(split-240)+'px'}">
    <ul class="footer-l">
      <li v-for="(item,i) in kefu" :key="i">
        {{item.key}}<span>  : </span>{{item.val}}
      </li>
    </ul>
    <div class="footer-r">
      <img src="@/assets/images/service_img_ecode@2x.png" alt="">
      <div>4DKanKan 微信公众号</div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  computed: {
    ...mapState({
      split: state => state.ui.navDivision
    })
  },
  data () {
    let kefu = [
      {
        key: '客服咨询',
        val: 'ecommerce@4dage.com'
      }, {
        key: '销售合作',
        val: 'sales.cn@4dage.com'
      }, {
        key: '市场合作',
        val: 'marketing.cn@4dage.com'
      }, {
        key: '媒体合作',
        val: 'pr.cn@4dage.com'
      }, {
        key: '工作时间',
        val: '周一至周五 09:30 - 12:30, 14:00 - 18:00 (GMT+8)'
      }
    ]

    return {
      kefu
    }
  }
}
</script>

<style lang="scss" scoped>
  .footer-layout{
    position: relative;
    max-width: 1180px;
    margin: 50px auto 72px;
    overflow: hidden;
    padding: 50px 50px 50px 65px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: #dcdcdc 1px solid;
    .footer-l{
      li{
        font-size: 12px;
        line-height: 26px;
        color: #888787;
        span{
          text-align: center;
          width: 46px;
          display: inline-block;
        }
      }
    }
    .footer-r{
      text-align: center;
      img{
        width: 145px;
      }
      div{
        font-size: 12px;
        line-height: 26px;
      }
    }
  }

  @media screen and (max-width: 1600px) {
    .footer-layout{
      margin: 50px auto 72px!important;
    }
  }
</style>