new_era/src/components/hotspot/index.vue

<template>
  <div class="hotspotconf" :class="{ mbhotspotcon: isMobile, noBg: active == 'vAudio' }" @mousemove.stop>
    <component :is="active" @close="$emit('close')" :hotspot="hotspot"></component>
    <div v-if="active != 'vAudio'" @click="$emit('close')" class="close">
      <img :src="require('@/assets/images/proj2022/pc/cancel_btn.png')" alt="" />
    </div>
  </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";
import model from "./model.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: "title", id: "vTitle", img: "txt-icon", display: false },
];

export default {
  props: ["hotspot"],
  components: {
    vAudio: audio,
    vImage: image,
    vIframe: iframe,
    vTitle: title,
    vVideo: video,
    vModel: model,
  },
  methods: {
    close() {
      this.$emit("close");
    },
  },
  mounted() {
    this.$bus.$on("closehotspot", (data) => {
      if (data) {
        this.close();
      }
    });
    // console.log(this.hotspot);
    iconArr.forEach((item) => {
      if (this.hotspot[item.key]) {
        this.active = !this.active ? item.id : this.active;
      }
    });
    console.log(this.hotspot, "111");
    !this.active && (this.active = "vTitle");

    if (this.hotspot.title.indexOf("（视频）") > -1) {
      let tmp = this.hotspot.title.split("（视频）");
      this.hotspot.title = tmp[0];
      this.hotspot.guid = tmp[1];
      this.active = "vVideo";
    }

    if (this.hotspot.backgroundMusic) {
      this.active = "vAudio";
    }
    console.log(this.active, "111");
  },
  data() {
    return {
      active: "",
    };
  },
  computed: {
    scene() {
      return this.$route.params.type;
    },
  },
};
</script>

<style lang="less" scoped>
@w: 100%;
@titleH: 100px;

@supports (backdrop-filter: brightness(60%)) {
  .hotspotconf {
    backdrop-filter: blur(30px) brightness(60%) !important;
    background-color: rgba(0, 0, 0, 0) !important;
  }
  .noBg {
    background-color: rgba(0, 0, 0, 0) !important;
    backdrop-filter: none !important;
  }
}
.hotspotconf {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.8);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  & /deep/ .hotspot {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .vhotspotcon {
      position: relative;
      width: @w;
      height: 100%;
      .vtitle {
        font-size: 30px;
        font-weight: bold;
        width: 1136px;
        height: @titleH;
        margin: 20px auto;
        align-items: center;
        color: #ffffff;
        max-height: 100px;
        height: auto!important;
        display: -webkit-box!important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
      }

      .hotspotcon {
        width: 100%;
        height: calc(100% - @titleH);
        .img-con {
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;
          height: 86%;
          overflow: hidden;
          .imgmain {
            width: 100%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            position: relative;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            img {
              cursor: pointer;
              max-width: 100%;
              width: auto;
              max-height: 100%;
              height: auto;
              margin: 0 auto;
            }
            > iframe {
              width: 100%;
              cursor: pointer;
              height: 100%;
            }
            video {
              max-width: 100%;
              height: 99%;
            }
          }
        }
        @h: 100%;
        .bigImg {
          height: @h;
        }
        .pagna {
          text-align: center;
          z-index: 999;
          font-size: 18px;
          margin-top: 10px;
          color: rgba(255, 255, 255, 0.8);
          position: absolute;
          bottom: 0px;
          left: 50%;
          transform: translate(-50%);
        }
        .desc {
          width: 1136px;
          height: 9%;
          font-size: 16px;
          text-align: justify;
          line-height: 1.5;
          // max-height: 120px;
          margin: 10px auto 0;
          padding-right: 14px;
          overflow-y: auto;
        }
      }
      .hotconfull {
        height: 100%;
      }
      .fullcon {
        width: 100%;
        height: 100%;
        overflow: hidden;
        clip-path: polygon(1% 12%, 3.8% 8%, 42% 8%, 45.2% 2.7%, 99% 2.7%, 99% 89%, 92% 98%, 1% 98%);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .img-con {
          margin-top: 0;
          height: 100%;
          .imgmain {
            width: 100%;
            height: 100%;
            text-align: center;
            >img{
              margin: 0 auto;
            }
          }
        }
      }
    }

    @pos: 50px;
    .aa {
      position: absolute;
      width: 50px;
      height: auto;
      cursor: pointer;
      top: 50%;
      transform: translateY(-50%);
      left: @pos;
      z-index: 999;
      &:last-of-type {
        right: @pos;
        left: unset;
      }
    }
    .vtitle {
      font-size: 30px;
      font-weight: bold;
      width: 100%;
      color: #ffffff;
      overflow: hidden;
      margin-top: 20px;
      
    }
  }
  & /deep/ .close {
    pointer-events: auto;
  }
}
.noBg {
  background-color: rgba(0, 0, 0, 0);
}
.close {
  position: absolute;
  top: 40px;
  right: 30px;
  width: 50px;
  height: 50px;
  padding: 15px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999999;
  background: rgba(255, 255, 255, 0.1);
  > img {
    width: 20px;
    height: 20px;
  }
}

.mbhotspotcon {
  pointer-events: auto;

  @supports (backdrop-filter: brightness(60%)) {
    backdrop-filter: blur(10px) brightness(80%) !important;
    background-color: rgba(0, 0, 0, 0) !important;
  }
  .close {
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0);
  }
}
</style>