<template>
  <div class="fp-lock" :style="lockStyle">

  </div>
</template>

<script>
export default {
  props: {
    item: {
      type:Object,
      default:()=>{}
    },
    scale:{
      type:Number,
      default:1
    }
  },
  computed:{
    lockStyle(){
      return {
        'z-index':this.item.z+1,
        width: this.item.w*this.scale+'px',
        height:this.item.h*this.scale+'px',
        top:this.item.y*this.scale+'px',
        left:this.item.x*this.scale+'px',
        transform: `rotate(${this.item.angle}deg)`
      }
    }
  }
}
</script>

<style>
.fp-lock{
  position: absolute;
  box-sizing: border-box;
  border: 1.5px solid #ed3838;
  animation: item-border 1s infinite;
  -webkit-animation: item-border 1s infinite;
}

@keyframes item-border {
  0% {
    border: 1.5px solid #F56C6C;
  }
  100% {
    border: 1.5px solid #c5a5a5;
  }
}
</style>