guangdong_museum/web/src/components/hotspot/index.vue

<template>
  <div class="hotspotcon">
    <img @click="close" class="close" :class="{ifrclose:active=='vIframe'}" :src="require('@/assets/images/project/close.png')" alt="">
    <component :is="active" :hotspot="hotspot"></component>
  </div>
</template>

<script>
import audio from './audio.vue';
import image from './image.vue';
import video from './video.vue';
import title from './title.vue';
import iframe from './iframe.vue';



let iconArr = [
  { name: "视频", key: "video",  id: "vVideo", img: "video-icon", display: false },
  { name: "网页", key: "iframe", id: "vIframe", img: "iframe-icon", display: false },
  { name: "图片", key: "images", id: "vImage", img: "img-icon", display: false },
  { name: "模型", key: "model",  id: "vModel", img: "model-icon", display: false },
  { name: "音频", key: "backgroundMusic",  id: "vAudio", img: "model-icon", display: false },
  { name: "介绍", key: "title", id: "vTitle", img: "txt-icon", display: false }
];

export default {
  components:{
    vAudio:audio,
    vImage:image,
    vIframe:iframe,
    vTitle:title,
    vVideo:video
  },
  methods:{
    close(){
      this.$hideHotspot()
      g_currentHot.closePopup()
      
      if(g_bgAudio && g_bgAudio.pauseByHot){
        window.manage.switchBgmState(true);
      }
    }
  },
  mounted(){
    console.log(this.hotspot);
    iconArr.forEach(item => {
      if (this.hotspot[item.key]) {
        this.active = !this.active ? item.id : this.active;
      }
    });
    
    !this.active && (this.active = 'vTitle')

    console.log(this.active);
  },
  data(){
    return {
      active:''
    }
  }
}
</script>

<style lang="less" scoped>
.hotspotcon{
  background: #000;
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  .close{
    position: fixed;
    top: 40px;
    right: 40px;
    width: 70px;
    height: 70px;
    cursor: pointer;
    z-index: 9999999;
  }
  .ifrclose{
    top: 100px;
  }
}

@media only screen and (max-width: 487px) {
.hotspotcon{
  .close{
    position: fixed;
    top: unset;
    right: unset;
    bottom: 4%;
    transform: translateX(-50%);
    left: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
  }
}
}
</style>