HaiDeBao/src/views/gui/CustomHotspotList.vue

<template>
  <div class="custom-hotspot-list">
    <button
      class="close"
      @click="$router.go(-1)"
    >
      <img
        class=""
        src="@/assets/images/close.png"
        alt=""
        draggable="false"
      >
    </button>
    <div class="inner-wrap">
      <h1>热点列表</h1>
      <ul>
        <li
          v-for="(item, index) in hotspotList"
          :key="item.uuid"
          @click="openHot(item, index)"
        >
          {{ item.info.title ? item.info.title : "热点" }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotspotList: window.myHotList,
      intervalId: null,
    }
  },
  mounted() {
    if (!window.myHotList) {
      this.intervalId = setInterval(() => {
        if (window.myHotList) {
          this.hotspotList = window.myHotList
          clearInterval(this.intervalId)
        } else {
        }
      }, 300)
    }
  },
  methods: {
    openHot(hotspot) {
      // 停止自动导览
      window.player.director.stopTour()
      setTimeout(() => {
        hotspot && hotspot.examine(window.player, true)
      }, 200)
    },
  }
}
</script>

<style lang="less" scoped>
.custom-hotspot-list {
  position: fixed;
  background-color: rgba(21, 52, 115, 0.80);
  backdrop-filter: blur(1.8vw);
  z-index: 10005;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 7.5vw 1vw 7.5vw 7.5vw;
  > button.close {
    position: absolute;
    top: 4.4vw;
    right: 4.4vw;
    width: 9vw;
    height: 9vw;
    z-index: 10001;
    > img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
  .inner-wrap {
    height: 100%;
    padding-right: 6.5vw;
    overflow: auto;
    > h1 {
      font-size: 5vw;
      font-weight: bold;
      color: #FEC600;
    }
    > ul {
      > li {
        display: block;
        border-bottom: 1px solid #fff;
        padding-top: 1em;
        padding-bottom: 1em;
        font-size: 3.6vw;
        font-weight: 400;
        color: #FFF;
        overflow: hidden;
        white-space: pre;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>