<template>
    <div class="container">
      <div class="fixed popFixed">
        <div class="bg"></div>
        <div class="popBox">
          <i class="iconfont icon-close" @click="closePop">×</i>
          <img src="../../assets/images/pc/reminder.png" alt="">
          <h4>{{popTitle}}</h4>
          <p class="tip">您确定要{{popTitle}}吗？</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:{
          popTitle:''
        },
        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 380px
    height 240px
    left 50%
    top 50%
    padding 22px 24px
    transform translate(-50%,-50%)
    background #fff
    box-sizing border-box
    border-radius 6px
    text-align center
    .icon-close{
      position absolute
      right 11px
      top 8px
      font-size 30px
      color #e2e2e2
      cursor pointer
    }
    img{
      display inline-block
      width 64px
      height 64px
    }
    h4{
      margin-top 16px
      margin-bottom 10px
      font-size 18px
      color #fb9790
    }
    .tip{
      font-size 14px
      color #929090
    }
    .p-btn{
      margin-top 26px
      a{
        display inline-block
        width 100px
        height 40px
        line-height 40px
        border 1px solid #e6e6e6
        border-radius 2px
        font-size 15px
        color #fe7065
        &.cancel{
          margin-right 36px
          background #ffbcb6
          color #ffffff
          border-color #ffbcb6
          &:hover{
            background #fba8a0
          }
        }
        &.subbtn:hover{
          background #feeae8
          border-color #feeae8
        }
      }
    }
  }
}
</style>
