<template>
  <div class="background-box">
    <div class="video-box">
      <el-button type="primary" class="close-icon" @click="destroyElement"
        >关闭</el-button
      >
      <img :src="src" class="image" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: "",
    };
  },
  methods: {
    destroyElement() {
      this.$destroy(true);
      this.$el.parentNode.removeChild(this.$el);
    },
  },
};
</script>

<style scoped lang="scss">
.background-box {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba($color: #000000, $alpha: 0.325);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  .video-box {
    width: 50%;
    height: 50%;
    position: relative;
    .close-icon {
      position: absolute;
      margin: auto;
      right: 0;
      top: -50px;
    }
    .image {
      width: 100%;
      height: 100%;
      background-color: #000000;
      object-fit: contain;
    }
  }
}
</style>
