jiangsu_518/src/components/UIGather/mobile/control/hotspotList.vue

<template>
  <div class="tag-layer" @click.stop>
    <img @click.stop="close" :src="require('@/assets/images/js_icon/close.png')" class="close" alt="">
    <div class="hotlistcon">
      <img class="htitle" :src="require('@/assets/images/js_icon/hotlisticon.png')" alt="">
      <ul v-if="hotspots.length > 0">
        <li @click="onclickHotpost(item)" v-for="item in hotspots" :key="item.name">
          {{ item.hotspotTitle || '热点' }}
        </li>
      </ul>
      <ul v-else>
        <li>暂无热点数据</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { unref, defineEmits, onBeforeMount, onMounted, ref, watchEffect, computed, watch, nextTick } from "vue";
import { useApp, getApp } from "@/app";
import { useStore } from "vuex";
import { useMusicPlayer, useSoundPlayer } from "@/utils/sound";

const store = useStore();
const isMobile = computed(() => browser.isMobile());

//背景音乐
const musicPlayer = useMusicPlayer();

//解说音乐
const soundPlayer = useSoundPlayer();


const hotspots = computed(() => {
  let temp = store.getters["tags/allTags"].filter(item=>item.hotspotType != "scene")
  return temp
})
const onclickHotpost = async (hotspot) => {
  let app = await getApp();
  app.Tags.emit('clickHotspot', { sceneCode: hotspot.sceneCode, id: hotspot.name });
  if (hotspot.hotspotType == "scene") {
    close()
  }
}


const close = () => {
  store.commit("functions/setShowHotspotList", false);
};

</script>

<style lang="scss" scoped>
.tag-layer {
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  top: 0;
  position: fixed;
  left: 0;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: flex-end;

  .close {
    color: rgba(255, 255, 255, 0.6);
    z-index: 999;
    position: absolute;
    right: 18px;
    bottom: 67%;
    width: 34px;
  }

  .hotlistcon {
    display: flex;
    position: relative;
    align-items: flex-start;
    justify-content: center;
    height: 65%;
    width: 100%;
    background-size: 100% 100%;
    background-image: url(@/assets/images/js_icon/hotspot_bg.png);

    .htitle {
      position: absolute;
      left: 50%;
      top: -94px;
      transform: translateX(-50%);
      width: 90px;
    }

    >ul {
      width: 100%;
      border-radius: 10px;
      font-size: 14px;
      color: #fff;
      max-height: calc(100% - 60px);
      overflow-y: auto;
      margin: 40px 10px;

      >li {
        line-height: 2;
        padding: 8px 10px;
      }

      &::-webkit-scrollbar {
        width: 5px;
        height: 10px;
      }

      &::-webkit-scrollbar-track {
        background: #1b60a9;
      }

      &::-webkit-scrollbar-thumb {
        background: linear-gradient(#1b60a9, #30ce82);
      }

      &::-webkit-scrollbar-thumb:hover {
        background-color: #999;
      }

    }
  }

}
</style>