<template>
  <div>
    <div v-if="laodNum == '1'">
      <div class="laodBox" v-if="laodShow">
        <div class="el-icon-close" @click="closeLaodClick" v-show="btnShow"></div>
        <i class="loadingIcon"></i>
        <div class="loadinfo">
          <h4>疯狂加载中…</h4>
          <p>体育热知识：{{ txtVal }}</p>
        </div>
      </div>
    </div>
    <div v-if="laodNum == '2'">
      <div class="laodBox tweBj" v-if="laodShow">
        <div class="el-icon-close" @click="closeLaodClick" v-show="btnShow"></div>
        <i class="loadingIcon"></i>
        <div class="loadinfo">
          <h4>疯狂加载中…</h4>
          <p>体育热知识：{{ txtVal }}</p>
        </div>
      </div>
    </div>
    <div v-if="laodNum == '3'">
      <div class="laodBox thrBj" v-if="laodShow">
        <div class="el-icon-close tweIcon" @click="closeLaodClick" v-show="btnShow"></div>
        <i class="loadingIconTwe"></i>
        <h4>疯狂加载中…</h4>
      </div>
    </div>
    <div v-if="laodNum == '4'">
      <div class="laodBox forBj" v-if="laodShow">
        <i class="loadingIconTwe"></i>
        <h4>疯狂加载中…</h4>
      </div>
    </div>
    <div v-if="laodNum == '5'">
      <div class="laodBoxTwe" v-if="laodShow">
        <i class="loadingIconThr"></i>
        <h4>疯狂加载中…</h4>
      </div>
    </div>
    <div v-if="laodNum == '6'">
      <div class="laodBox fiveBj" v-if="laodShow">
        <i class="loadingIconTwe"></i>
        <h4 class="loadTilClolor">疯狂加载中…</h4>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'home_page',
  data(){
    return {
      laodShow: ''
    }
  },
  props: {
    loadDefaut:{
      type: Boolean,
      required: true
    },
    txtVal:{
      type: String,
      required: 'true'
    },
    btnShow:{
      type: Boolean,
      required: true
    },
    laodNum: {
      type:String,
      default: '1'
    }
  },
  created(){
    this.laodShow = this.loadDefaut
  },
  watch: {
    loadDefaut(newVal, oldVal) {
      console.log(newVal)
      console.log(oldVal)
      this.laodShow = newVal
    }
  },
  methods:{
    closeLaodClick(){
      this.laodShow = false
    }
  }
}
</script>
<style scoped>
.laodBox{z-index:99999;width: 240px;height: 48px;background: #FFFFFF;box-shadow: 0px 12px 32px 0px rgba(0,0,0,0.12);border-radius: 8px;padding:20px 30px;position:absolute;top:50%;margin-top:-44px;left:50%;margin-left:-150px;}
.laodBox.tweBj{box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.12);}
.laodBox.thrBj{height:24px;padding:24px;line-height:24px;box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.12);}
.laodBox.forBj{height:24px;padding:24px;line-height:24px;box-shadow: 0px 0px 0 0px;}
.laodBox.fiveBj{height:24px;padding:24px;line-height:24px;box-shadow: 0px 0px 0 0px;background:none;text-align:center;}
.loadingIcon{width:48px;height:48px;background:url('../assets/icon6.png') no-repeat 0 0/100%;margin-right:12px;float:left;display:block;}
.loadingIconTwe{width:24px;height:24px;background:url('../assets/icon6.png') no-repeat 0 0/100%;margin-right:8px;display:inline-block;vertical-align: top;}
.loadingIconThr{width:48px;height:48px;display:inline-block;background:url('../assets/icon6.png') no-repeat 0 0/100%;vertical-align: top;}
.laodBox h4{font-weight:bold;font-size: 16px;color: #212325;line-height: 24px;text-align: left;font-style: normal;display:inline-block;vertical-align: top;}
.laodBox p{font-size: 12px;color: #606266;line-height: 20px;text-align: left;font-style: normal;height:20px;overflow:hidden;vertical-align: top;}
.el-icon-close{float:right;position:relative;top:-10px;right:-20px;font-size:12px;cursor:pointer;color:#A8ABB2;}
.el-icon-close.tweIcon{right:-15px;top:-15px;}
.laodBoxTwe{z-index:99999;padding:30px;width:200px;height:84px;position:absolute;top:50%;margin-top:-72px;left:50%;margin-left:-130px;text-align:center;font-size: 16px;color: #EEEEFF;line-height: 24px;font-weight:bold;}
.laodBox.fiveBj .loadTilClolor{color:#fff;}
</style>
