518-JSSWLT/H5场景本地化/src/views/gui/compomemt/hotspot.vue

<template>
  <div class="hotspot">
    <div class="hotMain">
      <!-- 关闭按钮 -->
      <div class="closeX" @click="$emit('close')">
        <img src="../../../assets/img/closeX.png" alt="" />
      </div>
      <div class="top">
        <img src="../../../assets/img/hotTop.png" alt="" />
      </div>
      <div class="main">
        <div class="txtNone" v-if="data.length === 0">暂无热点</div>
        <div class="txt" v-else>
          <span :class="{ active: hotInd === index }" @click="openHot(item, index)" v-for="(item, index) in data"
            :key="index">{{ item.info.title ? item.info.title : "热点" }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "hotspot",
  props: {},
  components: {},
  data() {
    //这里存放数据
    return {
      data: [],
      hotInd: null,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    openHot(e, index) {
      // 停止自动导览
      window.player.director.stopTour();
      setTimeout(() => {
        e && e.examine(window.player, true);
        this.hotInd = index;
      }, 200);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // console.log('-------------',window.myHotList );
    this.data = window.myHotList || [];
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.hotspot {
  width: 100%;
  height: 100%;
  backdrop-filter: blur(6px);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 998;

  .hotMain {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    height: calc(100% - 320px);
    max-width: 500px;

    @media screen and (min-width: 1000px) {
      height: 100%;
      left: auto;
      right: 0;
      transform: translate(0)
    }

    .closeX {
      cursor: pointer;
      position: absolute;
      right: 15px;
      top: 20px;

      @media screen and (min-width: 1000px) {
        right: auto;
        top: auto;
        bottom: 2vh;
        left: 50%;
        transform: translateX(-50%);
      }

      &>img {
        width: 40px;
      }
    }

    .top {
      position: absolute;
      left: 50%;
      top: -73px;
      transform: translateX(-50%);

      @media screen and (min-width: 1000px) {
        top: auto;
      }

      &>img {
        width: 70px;
      }
    }

    .main {
      width: 100%;
      height: 100%;
      border: 1px solid #144a80;
      border-radius: 30px;
      background-color: rgba(0, 0, 0, 0.8);

      @media screen and (min-width: 1000px) {
        border-radius: 0px;
      }

      .txtNone {
        height: 90%;
        color: #7e522f;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .txt {
        margin-top: 12%;
        padding: 0 20px;
        height: 86%;
        overflow-y: auto;
        color: #fff;
        font-size: 16px;

        @media screen and (min-width: 1000px) {
          height: 76%;
          margin-top: 27%;
        }

        &>span {
          margin-top: 20px;
          cursor: pointer;
          display: block;
          width: 100%;
          text-align: center;

          &:last-child {
            margin-bottom: 60px;
          }
        }

        :hover {
          color: #00c7d5;
        }
      }

      .active {
        color: #00c7d5;
      }

      .txt::-webkit-scrollbar-thumb {
        outline: 2px solid #00c7d5;
      }

      .txt::-webkit-scrollbar {
        width: 2px;
      }
    }
  }
}
</style>