<template>
  <div class="iosBtn" @click="handleClick">
      <div class="iosBtn_package" :class="{iosBtn_on:module}">
        <div class="iosBtn_inner"></div>
        <div class="iosBtn_background"></div>
      </div>
  </div>
</template>

<script>
export default {
    name:'ios-button',
    props:{
      module:{
        type:Boolean,
        default:false
      },
     
    } ,
    methods: {
        handleClick(e){
          this.$emit('click',e)
        }
      },
}
</script>

<style lang='scss' scope>
  .iosBtn{
    width: 60px;
    height: 30px;
    .iosBtn_package{
      width: 100%;
      height: 100%;
      background: #eee;
      border-radius: 15px;
      padding: 1px;
      box-sizing: border-box;
      position: relative;
      cursor: pointer;
      .iosBtn_inner{
         transition:all .3s;
        border-radius: 50%;
        height: 28px;
        width: 28px;
        background: #fff;
        transform: translateX(calc(100% + 2px));
        position: relative;
        z-index: 100;
        box-shadow: 0 0 2px 2px #eee
      }
      .iosBtn_background{
         transition:all .3s;
        width: 100%;
        height: 100%;
        border-radius: 15px;
        position: absolute;
        // float: left;
        top: 50%;
        left:50%;
        transform: translate(-50%,-50%) scale(0);
           background: rgb(118, 226, 118);
           z-index: 1;
      }
    }
    .iosBtn_on{
     
      .iosBtn_background{
         transition:all .3s;
        width: 100%;
        height: 100%;
        border-radius: 15px;
        position: absolute;
        // float: left;
        top: 50%;
        left:50%;
        transform: translate(-50%,-50%) scale(1);
           background: rgb(118, 226, 118);
           z-index: 1;
      }
      .iosBtn_inner{
         transition:all .3s;
        border-radius: 50%;
        height: 28px;
        width: 28px;
        background: #fff;
        transform: translateX(0);
        position: relative;
        z-index: 100;
box-shadow: none
      }
    }
  }
</style>