<template>
  <div class="downloadQR" v-show="datas.isshow">
    <div class="box">
      <img :src="datas.imgUrl" style="width: 300px;height: 300px;" alt="">
      <div class="btnStyle">
        <el-button type="primary" @click="datas.isshow = false">取消</el-button>
        <el-button type="primary"><a :href="datas.imgUrl">下载</a></el-button>
      </div>

    </div>
  </div>
</template>
<script setup>
let props = defineProps({
  imgUrl: String,
});
let datas = reactive({
  imgUrl: "",
  isshow: false,
});

function show(d) {
  datas.imgUrl = d;
  datas.isshow = true;
}

defineExpose({ show });
</script>
<style scoped lang="scss">
.downloadQR {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba($color: #000000, $alpha: .6);
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;

  .box {
    padding: 20px;
    border-radius: 3px;
    height: 400px;
    width: 340px;
    background-color: #fff;
    display: flex;
    // align-items: center;
    // justify-content: center;
    flex-direction: column;

  }


  .btnStyle {
    display: flex;
    align-items: center;
    margin-top: 20px;
    justify-content: space-around;
  }
}
</style>
