<template>
  <div class="graphic-navigation-component">
    <div class="graphic-navigation-list">
      <div v-for="(item,index) in configContentList" :key="index" class="graphic-navigation-item">
        <div class="img-box">
          <img :src="item.src || defaultImg" alt="">
        </div>
        <div class="navigation-name text-overflow">{{ item.name || ' ' }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import defaultImg from '@/assets/CreationCamp/graphicNavigationDefault.png'
export default {
  props: {
    config: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      defaultImg
    }
  },
  computed: {
    configContent() {
      return this.config.content
    },
    configContentList() {
      const { list, number } = this.configContent
      return list.slice(0, number)
    }
  }
}
</script>
<style lang="less" scoped>
.graphic-navigation-component {
  padding: 10px;
	.graphic-navigation-list {
    width: 100%;
		display: flex;
    align-items: center;
    .graphic-navigation-item{
      flex: 1;
      text-align: center;
      overflow: hidden;
      .img-box{
        display: inline-block;
        background:rgba(238,238,238,1);
        width: 50px;
        height: 50px;
        border-radius: 50px;
        img{
          width: 50px;
          height: 50px;
          border-radius: 50px;
        }
      }
      .navigation-name{
        height: 17px;
        margin-top: 8.5px;
        padding: 0 5px;
        font-size: 15px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
      }
    }

	}
}
</style>
