<!--根据用户航班信息真实情况进行提示
1、如果去程包含行李但返程未包含，提示"你的返程机票未包含行李"；
2、如果返程包含行李但去程未包含，提示"你的去程机票未包含行李"；
3、如果去程和返程都未包含行李，提示"你的机票未包含托运行李"；
4、如果去程和返程都都包含行李，则不提示；
-->
<template>
  <div class="package-wrap">
    <div class="package-box">
      <img src="https://file.luckytrip.cn/IBE/img/package.png">
      <!--<p class="p1">您的机票未包含托运行李</p>-->
      <slot name="baggageText"></slot>
      <p class="p2">如果您需要托运行李，请在支付成功后，在西部航空<font class="mColor">飞行加APP</font>或<font class="mColor">微信公众平台</font>购买逾重行李，比现场购买更优惠！</p>
      <a href="javascript:void(0)" class="btn mBtn" @click="closeAlert">知道了</a>
    </div>
  </div>
</template>
<script>
    export default {
        name: '',
        data () {
            return {}
        },
        methods: {
          closeAlert(){
              this.$emit("closeBaggageInfo")
          }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .package-wrap{
    position fixed
    width 100%
    height 100%
    left 0
    top 0
    background #00000066
    z-index 1000000
    .package-box{
      position absolute
      width 400px
      max-width 80%
      left 50%
      top 45%
      transform translate(-50%,-50%)
      padding 20px 17px
      background #ffffff
      border-radius 10px
      text-align center
      box-sizing border-box
      img{
        display inline-block
        max-width 38%
      }
      p.p1{
        margin-top 15px
        font-size 18px
        color #6775ee
      }
      p.p2{
        line-height 18px
        margin 25px 0 25px
        font-size 13px
        color #484848
      }
      a.btn{
        width 120px
        height 40px
        line-height 40px
        background #6775ee
        border-radius 20px
        margin auto
      }
    }
  }

</style>
