<template>
  <view class="off-account-container">
    <uni-popup ref="offAccountPopup" >
      <view class="content">
      <view class="title">扫码领取优惠券</view>
      <view class="desc1">
         长按扫描二维码，关注公众号，免费获取优惠券一张<br>仅限首次关注公众号用户。
      </view>
        <image class="ercode-img" show-menu-by-longpress src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/wukong-printer-wx/gzh-ercode.png" alt="">
        <view class="desc2">长按扫码二维码关注</view>
      </view>
      <image @click="close"  class="close-img" src="/static/imgs/general/close-icon.png" alt="">
    </uni-popup>
  </view>
</template>
<script>
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
export default {
  components: { uniPopup },
  methods: {
    open() {
      this.$refs.offAccountPopup.open('bottom')
    },
    close() {
      this.$refs.offAccountPopup.close()
    }
  }
}
</script>

<style scoped lang="scss">
.off-account-container {
  width: 750rpx;
  text-align: center;
  background-color: #ffffff;
  .content {
    width: 750rpx;
    height: 614rpx;
    box-sizing: content-box;
    position: relative;
    background-color: #ffffff;  
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    color: #333333;
    .title {
      font-weight: 500;
      font-size: 36rpx;
      line-height: 50rpx;
      margin-top: 32rpx;
      display: inline-block;
    }
    .desc1 {
      width: 644rpx;
      display: inline-block;
      font-size: 28rpx;
      margin-top: 31rpx;
      line-height: 40rpx;
    }
    .ercode-img {
      width: 272rpx;
      height: 272rpx;
      margin-top: 49rpx;
    }
    .desc2 {
      margin-top: 24rpx;
      font-weight: 500;
      font-size: 32rpx;
    }
  }
  .close-img {
    width: 24rpx;
    height: 24rpx;
    position: absolute;
    top: 45rpx;
    right: 32rpx;
  }
}
</style>