<template>
  <div class="qrcode-wrap">
    <!-- 标题 -->
    <div class="qrcode-title">
      <div class="left">
        <img
          :src="partnerHeadImg"
          alt=""
        >
      </div>
      <div class="right">
        <span class="partner-name">{{partnerName}}</span>
      </div>
    </div>
    <!-- 二维码部分 -->
    <div class="qrcode-content">
      <img
        :src="qrcode"
        alt=""
      >
    </div>
  </div>
</template>

<script>
export default {
  name: 'partnerQrcode',
  props: {
    // 邀请二维码
    qrcode: {
      type: String,
      required: true,
      default: ""
    },
    // 合伙人名称
    partnerName: {
      type: String,
      required: true,
      default: ""
    },
    // 合伙人头像
    partnerHeadImg: {
      type: String,
      required: "",
      default: '../../static/imgs/public/public-avatar.png'
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="less">
.qrcode-wrap {
  width: 100%;
  min-height: 7.1rem;
  background-color: #478bfb;
  border-radius: 0.25rem;
  .qrcode-title {
    display: flex;
    align-items: center;
    margin-right: 0.3rem;
    width: 100%;
    min-height: 1.96rem;
    border-bottom: 2px solid #649dfc;
    .left {
      width: 20%;
      img {
        width: 0.96rem;
        height: 0.96rem;
        border-radius: 50%;
      }
    }

    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: flex-start;
      width: 80%;
      font-size: 0.36rem;
      .partner-name {
        color: #ffffff;
        margin-bottom: 0.1rem;
      }

      .partner-id {
        color: #a3c5fd;
        font-size: 0.3rem;
      }
    }
  }

  .qrcode-content {
    img {
      margin-top: 0.5rem;
      width: 50%;
      height: 50%;
    }
  }
}
</style>