FE_huoran_client/src/components/occuQrcode/index.vue

<template>
  <el-dialog title="" :visible.sync="diaVisible" center :width="$store.getters.getModelType ? '500px' : '100%'"
    append-to-body :top="qrcodeTop" lock-scroll custom-class="qrcode-dia">
    <div class="pic-wrap">
      <img class="pic" src="@/assets/images/occupationlab.png" alt="">
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ['visible'],
  data () {
    return {
      qrcodeTop: '100px'
    };
  },
  computed: {
    diaVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  mounted () {
    const height = (window.innerHeight - (this.$store.getters.getModelType ? 758 : 600)) / 2
    this.qrcodeTop = (height > 0 ? height : 0) + 'px'
  },
  methods: {
    close () {
      this.$emit('update:visible', false)
    }
  },
};
</script>
<style lang="scss" scoped>
/deep/.qrcode-dia {
  background-color: transparent;

  .el-dialog__header,
  .el-dialog__body {
    padding: 0;
    background-color: transparent;
    overflow: hidden;
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }

  .pic-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pic {
    width: 100%;
  }
}

@media (max-width: 1200px) {
  /deep/.qrcode-dia {
    .pic {
      width: 95%;
    }
  }
}
</style>