<template>
  <div class="msg-container">
    <div class="msg-box">
      <div class="msginfo" :html="msg"></div>
      <div class="btn msgBtn" @click="submitFun" :html="msgBtn"></div>

      <slot name="msgInfo"></slot>
    </div>
  </div>
</template>
<script>
  export default {
    name: '',
    props:{
      msg:'',
      msgBtn:''
    },
    data () {
      return {}
    },
    methods: {
      submitFun(){
          this.$emit("subMsgFun");
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import "../../assets/stylus/colorConfig.styl"
  .msg-container{
    position fixed
    width 100%
    height 100%
    top 0
    left 0
    z-index 99999999
    background rgba(0, 0, 0, 0.3)
    .msg-box{
      position absolute
      width 400px
      height 160px
      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
      }
      .msgBtn{
        background #2894f2
      }
    }
  }
</style>
