web/plugins/leave-source/src/lib/pc/components/QrCode.vue

<template>
  <div class="qr-code-container">
    <div v-if="type === '1'" class="qr-code-content">
      <div class="qr-code-title">
        2. 添加企业微信:
      </div>
      <div class="qr-code">
        <img src="../../../assets/images/商务合作.png" alt="">
      </div>
    </div>
    <div v-if="type === '2'" class="qr-code-content">
      <div class="qr-code">
        <img src="../../../assets/images/商务合作.png" alt="">
        <div v-if="showText" class="qr-code-title qr-code-title-small">
          <span>添加企业微信</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QrCode',
  props: {
    type: String,
    default() {
      return '1'
    },
    showText: {
      type: Boolean,
      default() {
        return true
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.qr-code-container {
  display: flex;
  padding: 0 20px 0 32px;
  .qr-code-content {
    padding: 0 20px;
  }
  .qr-code-title {
    font-size: 16px;
    line-height: 24px;
    color: #1d1d1d;
    &-small {
      text-align: center;
    }
  }
  .qr-code {
    margin-top: 8px;
    padding-left: 14px;
    img {
      width: 122px;
      height: 122px;
    }
  }
  &::before {
    content: '';
    display: block;
    width: 1px;
    height: 148px;
    background: #ECECEC;
  }
  &::after {
    content: '';
    display: block;
    width: 1px;
    height: 148px;
    background: #ECECEC;
  }
}
</style>