<template>
  <div class='bk-grid-menu' :class="{borderTop: border}">
    <div v-for="(item, index) in list" :key='index' class="item" @click="itemClick(item)"
      :style="{
        width: list.length >=4 ? '25%' : (1 / list.length * 100) +'%'
      }"
      :class="{border: border}"
    >
      <div class='icon'><img :src="item.icon" :alt="item.text"></div>
      <div class="text">{{item.text}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    border: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: []
    },
    itemClick: {
      type: Function,
      default: () => {}
    }
  },
  data () {
    return {}
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<style scoped>
.bk-grid-menu {
  display: flex;
  flex-wrap: wrap;
}
.borderTop {
  border-top: solid 1px #ebedf0;
}
.item {
  /* flex: 1; */
  min-width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  box-sizing: border-box;
}
.border {
  border-bottom: solid 1px #ebedf0;
  border-right: solid 1px #ebedf0;
}
.bk-grid-menu .icon {
  width: 60%;
  height: 60%;
}
.bk-grid-menu .text {
  font-size: 26px;
  margin-top: 20px;
}

.bk-grid-menu .icon img{
  width: 100%;
  height: 100%;
}
</style>
