<template>
  <div class="scan">
    <div class="mask"></div>
    <div class="item-wrap">
      <div class="img-scan"></div>
      <div class="img-pay">
        <div class="title">微信支付<em @click="close"></em></div>
        <div class="qrcode"><img :src="img"></div>
        <div class="tip">
          <p>请使用<span class="theme-color">微信</span>扫一扫</p>
          <p>二维码完成支付</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    name:'scan-pay-code',
    props:['img'],
    methods:{
      close(){
        this.$emit('close');
      }
    }
  }
</script>
<style lang="scss">
  @import './../assets/scss/config.scss';
  @import './../assets/scss/mixin.scss';
  .scan{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    .mask{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: .6;
      background-color: #000000;
    }
    .item-wrap{
      position: fixed;
      width:670px;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      display: flex;
      align-items: center;
      .img-scan{
        @include bgImg(296px,485px,'/imgs/pay/icon-scan.png');
      }
      .img-pay{
        width: 370px;
        height: 440px;
        display: inline-block;
        background-color:#ffffff;
        .title{
          position:relative;
          height:60px;
          line-height:60px;
          color:#333333;
          font-size:20px;
          padding:0 18px;
          background-color:#F5F5F5;
          em{
            position:absolute;
            top: 23.5px;
            right: 20px;
            @include bgImg(13px,13px,'/imgs/icon-close.png');
            cursor:pointer;
          }
        }
        .qrcode{
          text-align: center;
          padding:44px 0 26px;
          img{
            width:237px;
            height:240px;
          }
        }
        .tip{
          text-align:center;
          font-size:14px;
          color:#333333;
        }
      }
    }
  }
</style>