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

<template>
<div class="search-camera" :style="{paddingLeft: split + 'px'}">
  <router-link :to="item.to" tag="a" class="camera" v-for="(item,i) in serviceArr" :key="i">
    <vcenter>
      <img :src="item.img" >
      <div style="margin-top:10px;">{{item.name}}</div>
    </vcenter>
  </router-link>
</div>
</template>

<script>
import vcenter from '@/components/vcenter'
const serviceArr = [
  {
    img: require('@/assets/images/service_icon_01@2x.png'),
    name: '使用教程',
    to: {name: 'service_list', params: {id: 'use'}}
  }, {
    img: require('@/assets/images/service_icon_02@2x.png'),
    name: '常见问题',
    to: {name: 'service_list', params: {id: 'qa'}}
  }, {
    img: require('@/assets/images/service_icon_03@2x.png'),
    name: 'app下载',
    to: {name: 'service_down'}
  }, {
    img: require('@/assets/images/service_icon_04@2x.png'),
    name: '维修服务',
    to: {name: 'service_support'}
  }, {
    img: require('@/assets/images/service_icon_05@2x.png'),
    name: '网站条款',
    to: {name: 'service_list', params: {id: 'clause'}}
  }
]

export default {
  props: {
    'split': {
      default: 0
    }
  },
  components: {
    vcenter
  },
  data () {
    return {
      serviceArr
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss'
</style>