<template>
  <div class="bottom-tab-item">
    <div class="item-image">
      <img :src="imageUrl"/>
    </div>
    <div class="item-text">
      {{textContent}}
    </div>
  </div>
</template>

<script>
  export default {
    name: 'md-bottom-tab-item',
    props: {
      imageUrl: {
        type: String,
        default: ''
      },
      textContent: {
        type: String,
        default: '文本内容'
      }
    }
  }
</script>

<style lang="stylus">
  .bottom-tab-item
    flex-grow 1
    height 100%
    /*background-color #999999*/
  .bottom-tab-item
   .item-image
    height 30px
    width 30px
    margin 0px auto
    /*background-color #13ce66*/
  .bottom-tab-item
   .item-image
    img
      height 100%
      width 100%
  .bottom-tab-item
   .item-text
     text-align center
     font-size 8px
     line-height 20px

</style>
