<template>
    <div class="container">
      <div class="fixed popFixed">
        <div class="bg"></div>
        <div class="popBox">
          <!--<i class="iconfont icon-close" @click="closePop">×</i>-->
          <h4><i class="iconfont icon-gantanhao"></i>价格发生变动了！</h4>
          <p class="tip">总额为：￥{{totalPrice.toFixed(2)}}</p>
          <p class="p-btn">
            <a href="javascript:void(0)" class="cancel" @click="closePop">取消</a>
            <a href="javascript:void(0)" class="subbtn" @click="subPop">继续预订</a>
          </p>
        </div>
      </div>
    </div>
</template>
<script>
    export default {
        name: '',
        props:{
          totalPrice:''
        },
        data () {
            return {}
        },
        methods: {
          closePop(){
            this.$emit("closePop");
          },
          subPop(){
            this.$emit("subPop");
          },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.container{
  overflow hidden
}
.popFixed{
  width 100%
  height 100%
  z-index 1000
  top 0
  left 0
  .bg{
    width 100%
    height 100%
    top 0
    left 0
    background #000
    opacity .3
  }
  .popBox{
    position absolute
    width 460px
    height 308px
    left 50%
    top 50%
    transform translate(-50%,-50%)
    background url("../../assets/images/pc/img_bg.png") no-repeat center
    background-size 100% 100%
    padding-top 135px
    box-sizing border-box
    text-align center
    color #fff
    .icon-close{
      position absolute
      right 11px
      top 8px
      font-size 32px
      color #fff
      cursor pointer
    }
    h4{
      margin-top 16px
      margin-bottom 10px
      font-size 20px
      i{
        font-size 20px
        margin-right 5px
      }
    }
    .tip{
      font-size 16px
    }
    .p-btn{
      margin-top 26px
      a{
        display inline-block
        width 190px
        height 48px
        line-height 48px
        border 1px solid #fff
        border-radius 2px
        background #ffffff
        font-size 18px
        color #fe7065
        &.cancel{
          margin-right 10px
          background transparent
          color #ffffff
          &:hover{
            background rgba(255, 255, 255, 0.38)
          }
        }
        &.subbtn:hover{
          background #feeae8
          border-color #feeae8
        }
      }
    }
  }
}
</style>
