<template>
  <div id="box2" :style="{
      top: position[0]-300+'px',
      left: position[1]+ 'px'
    }">
    <div style="position: absolute;bottom: 0;left: 0;background: url('/data/popupLbl.png') no-repeat;width: 300px;height: 38px"></div>
    <div class="center" style="position: absolute;bottom: 38px;left: 20px;background: rgba(0,0,0,0.5);width: 280px;height: 50px;color: white;font-style: 20px;font-weight: bold">
      {{data}}
    </div>
  </div>
</template>

<script>
export default {
  name: "box2",
  props: {
    data: {
      type: "String",
      default: '暂无数据'
    },
    position: {
      type: "Array",
      default: [0,0]
    }
  }
}
</script>

<style scoped>
  #box2{
    width: 300px;
    height: 300px;
    /*background: rgba(0,0,0,0.5);*/
    position: absolute;
  }
  .center{
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
