<template>
    <div class="empty-container">
        <div class="empty-bg" :class='emptyClass'></div>
        <div class="empty-model">{{emptyTxt}}</div>
    </div>
</template>
<script>
export default {
  name:'mu-empty',
  props:{
      emptyType:String,
      emptyTxt:String,
  },
  computed:{
      emptyClass(){
          return this.emptyType;
      }
  }
}
</script>
<style lang="less">
    .empty-container{
        .empty-bg{
            position: absolute;         
            width:100%;
            height:135px;    
        }
        .empty-one{
            background:url('./empty-bg1.svg') no-repeat center center;                
        }
        .empty-two{
            background:url('./empty-bg2.svg') no-repeat center center;                
        }
        .empty-three{
            background:url('./empty-bg3.svg') no-repeat center center;                
        }
        .empty-four{
            background:url('./empty-bg4.svg') no-repeat center center;                
        }
        .empty-model{
            position: absolute;
            top:150px;
            z-index: 2;
            width: 100%;
            height: 100%;
            text-align: center;
            font-family:PingFangSC-Regular;
            font-size:14px;
            color:#91c8f2;
        }
    }
</style>



