4dkankan_official/src/page/service/overview/index.vue

<template>
  <div>
    <div class="plate01">
      <img src="@/assets/images/service_img_ban.png" class="banner">
      <p :style="{left:(split-180)+'px'}">{{langOverview.services}}</p>
    </div>

    <div class="plate02" :style="{marginLeft:(split-288)+'px'}">
      <div class="navs">
        <router-link v-for="(item,i) in langOverview.setting.service_overview" :key="i" tag="a" :to="item.to">
          <i class="iconfont" :class="item.icon"></i>
          {{item.name}}
        </router-link>
      </div>
    </div>
      <iFooter/>
  </div>
</template>
<script>
import {mapState} from 'vuex'
import footer from '../footer.vue'

export default {
  components: {iFooter: footer},
  computed: {
    ...mapState({
      langOverview: state => state.language.home.navs,
      split: state => state.ui.navDivision
    })
  }
}
</script>

<style lang="scss" scoped>
.plate01{
  position: relative;
  p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    font-size: 48px;
  }
}
.plate02 {
  max-width: 1220px;
  .navs {
    padding: 50px 0 0;
    overflow: hidden;

    a {
      overflow: hidden;
      width: 25%;
      text-decoration: none;
      border-right: 1px solid #dcdcdc;
      text-align: center;
      color: #8c8c8c;
      padding: 22px;
      float: left;

      i {
        display: block;
        font-size: 78px;
        margin: 0 auto 20px;
      }

      &:last-child {
        border-right: none;
      }
    }
  }
}
</style>