<template>
    <div class="button-container" @click="buttonClick">
      <img class="button-img" :src="buttonImgSrc">
      <p class="button-name">{{buttonName}}</p>
    </div>
</template>

<script>
    export default {
        name: "blcokButton",
        data(){
            return{
              id:this.buttonId,
            }
        },
        props:["buttonName",'buttonId',"buttonImgSrc"],
        methods:{
          buttonClick:function () {
            this.$emit('click',this.id);
          }
        },
    }
</script>

<style scoped>
  .button-container{
    width: 4.6rem;
    height: 3.5rem;
    display: inline-block;

    /*border: 1px solid black;*/
  }
  .button-img{
    width: 1.7rem;
    height: 2.2rem;
    padding-top: 0.6rem;
    /*padding: 0.6rem auto 0;*/
    /*margin: 0 auto;*/
  }
  .button-name{
    text-align: center;
    margin: 0.2rem auto 0;
    font-size: 0.4rem;
    color: #666666;
  }

</style>
