<template>
  <div>
    <img class="bgi" src="../../public/images/result/resultbgi.jpg" width="100%" />
    <img @click="onShare" class="share" src="../../public/images/result/sharebtn.png" width="45%" />
    <img
      @click="close"
      v-show="isShare"
      class="sharebgi"
      src="../../public/images/result/sharebgi.png"
      width="100%"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShare: false
    }
  },
  methods: {
    onShare() {
      this.isShare = true
    },
    close() {
      this.isShare = false
    }
  }
}
</script>
<style scoped>
.bgi {
  z-index: 1;
  position: absolute;
}
.sharebgi {
  z-index: 100;
  position: absolute;
  height: 193vw;
}
.share {
  z-index: 3;
  position: absolute;
  top: 154vw;
  /* align-items: center; */
  /* width: 47%; */
  /* margin: 0 auto; */
  left: 27.5vw;
}
</style>