<template>
    <div class="loading-container">
      <div class="login-box">
        <img src="https://file.luckytrip.cn/content_Loading-Loop-1.gif?imageslim" alt="">
        <p>{{msg || '加载中...'}}</p>
      </div>
    </div>
</template>
<script>
    export default {
        name: '',
        props:{
          msg:''
        },
        data () {
            return {}
        },
        methods: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.loading-container{
  position fixed
  width 100%
  height 100%
  top 0
  left 0
  z-index 99999999
  background rgba(0, 0, 0, 0.3)
  .login-box{
    position absolute
    width 200px
    height 180px
    left 50%
    top 45%
    transform translate(-50%,-50%)
    text-align center
    border-radius 10px
    background #ffffff
    img{
      display block
      width 200px
      border-radius 10px
      margin auto
    }
    p{
      position absolute
      width 100%
      top 130px
      font-size 16px
      font-weight bold
    }
  }
}
</style>
