<template>
    <view @click="onclick()" class="div item">
        <image mode="aspectFit" class="img item-icon" :src="src" />
        <text class="span item-title">{{title}}</text>
    </view>
</template>

<script>
export default {
  props: {
      title: {
          type: String
      },
      src: {
          type: String
      }
  },
  methods: {
    onclick () {
      this.$emit('onclick')
    }
  }
}
</script>

<style lang="scss" scoped>
    .item {
        padding:.5rem 0;
        text-align: center;
        box-sizing: border-box;
        float: left;
        width: 25%;
        position: relative;
    }
    .item-icon {
        display: block;
        margin: 0 auto;
        width:1.4rem;
        height:1.4rem;
        font-weight:500;
    }
    .item-title {
        display:block;
        font-size:$fontSize;
        color: #666;
        height:1rem;
        line-height:1rem;
        margin-top:0.3rem;
    }
</style>
