<!--
 * @Description: 按钮选择
 * @Author: 王晓颖
 * @Date: 2020-09-18 09:10:39
 -->
<template>
  <div class="button" :class="selected?'button-select':'button-no-select'">
    <span class="button-text" :style="{'font-size':size+'rem'}"><slot/></span>
  </div>
</template>

<script>
export default {
  name: 'Button1',
  props: {
    size: {
      type: String,
      default: '0.09'
    }, // 文字大小
    selected: {
      type: Boolean
    }// 选择状态
  },
  model: {
    prop: 'selected',
    event: 'change'
  },
  methods: {
    change () {
      // 选中则通知上级，二次点击不予处理
      if (this.selected) {
        this.$emit('click')
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '../../assets/css/variable.scss';
  .button{
    cursor: pointer;
    padding: .08rem .14rem;
    color: #fff;
    /*background: url("../../assets/images/button/button_blue.png") no-repeat;*/
    background-size: 100% 100%;
    margin-right: .05rem;
    text-align: center;
  }
  .button-no-select{
    background: url("../../assets/images/button/button_blue.png") no-repeat;
    color:#009bff;
  }
  @keyframes bounce {
    0%,
    7%,
    25%,
    36%,
    45%,
    50% {
      animation-timing-function: ease-out;
      transform: translate3d(0, 0, 0);
    }

    15%,
    16% {
      animation-timing-function: ease-in;
      transform: translate3d(0, -42px, 0);
    }

    30% {
      animation-timing-function: ease-in;
      transform: translate3d(0, -24px, 0);
    }

    41% {
      animation-timing-function: ease-in;
      transform: translate3d(0, -12px, 0);
    }

    47% {
      animation-timing-function: ease-in;
      transform: translate3d(0, -3px, 0);
    }
  }
  .button-select{
    background: url("../../assets/images/button/button_yellow.png") no-repeat;
    color: #fccd14;
    animation: bounce 2.5s 1 0s both; // keyframe bounce,持续2.5s,播放2次
    transform-origin: center bottom;
   // -webkit-transform-origin: -25% 50%;
    //transform-origin: -25% 50%;
    //-webkit-transform: rotate3d(0, 0, 1, 45deg);
    //transform: rotate3d(0, 0, 1, 45deg);
    //-webkit-transition: -webkit-transform 0.3s ease-in;
    //transition: transform 0.3s ease-in;
  }
  .button-text{
    font-weight: bolder;

  }
</style>