<template>
  <div class='bsui-grids' :class="hasline?'hasline':''">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name:'grid',
  props: {
    rows: {
      type: Number,
      default: 3,
    },
    hasline: {
        type: Boolean,
        default: false,
    }
  },
  methods: {
    onItemClick () {

    }
  }
}
</script>
<style lang="less">
@import "../styles/vars.less";
@import "../styles/mixins/setOnepx.less";
.bsui-grids {
    position: relative;
    overflow: hidden;
    // &:before {
    //     .setTopLine(@bsuiGridBorderColor);
    // }
    // &:after {
    //     .setLeftLine(@bsuiGridBorderColor);
    // }
}

.bsui-grid {

    position: relative;
    float: left;
    width: 100% / @bsuiGridColumnCount;
    box-sizing: border-box;
    // &:before {
    //     .setRightLine(@bsuiGridBorderColor);
    // }
    // &:after {
    //     .setBottomLine(@bsuiGridBorderColor);
    // }

    // &:active {
    //     background-color: @bsuiBgColorActive;
    // }
}

.bsui-grid__icon {

  margin: 0 auto;

  img {
    display: block;
    height: 100%;
    margin:0 auto;
  }
}
.col .bsui-grid{
  width:100%;
}

.bsui-grid__label {
  display: block;
  text-align: center;
  color: #3a4247;
  font-size: @bsuiGridFontSize;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-transform:lowercase;
}
.bsui-grids.hasline a:not(:last-child):after {
   margin: 1.4rem 0;
   .setRightLine(#e6e7e8);

}

</style>
