4dkankan_official/src/page/navs/product/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 cameraArr" :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 cameraArr = [{
  img: require('@/assets/images/product_img_2c.png'),
  name: '双目相机',
  to: {name: 'product'}
}, {
  img: require('@/assets/images/product_img_6c.png'),
  name: '即将上市',
  to: {name: 'product'}
}, {
  img: require('@/assets/images/product_img_zt.png'),
  name: '即将上市',
  to: {name: 'product'}
}]

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

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