热点列表

src/pages/Home.vue

@@ -49,7 +49,7 @@
         </div>
 
         <!-- 热点列表 -->
-        <hotspot-list />
+        <!-- <hotspot-list /> -->
 
         <!-- 通用样式的标题，代码里必须有，但其实没有显示 -->
         <v-title />
@@ -97,7 +97,6 @@
 
       <v-other />
     </div>
-
     <router-view />
   </div>
 </template>
@@ -105,7 +104,7 @@
 <script>
 import popup from "@/views/popup"
 import guiLoading from "@/views/gui/loading"
-import hotspotList from "@/views/gui/hotspotlist"
+// import hotspotList from "@/views/gui/hotspotlist"
 import vTitle from "@/views/gui/title"
 import vMenu from "@/views/gui/menu"
 import vGuide from "@/views/gui/guide"
@@ -121,7 +120,7 @@ export default {
   components: {
     popup,
     guiLoading,
-    hotspotList,
+    // hotspotList,
     vTitle,
     vMenu,
     vGuide,
@@ -129,7 +128,7 @@ export default {
     guimsg,
     vError,
     vrCon,
-    vOther,
+    vOther
     // MiniMapDecorator,
   },
 

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../pages/Home.vue'
 import BigMap from '@/views/gui/BigMap.vue'
+import CustomHotspotList from '@/views/gui/CustomHotspotList.vue'
 
 const originalPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push (location) {
@@ -20,7 +21,12 @@ const routes = [
         path: 'big-map',
         name: 'BigMap',
         component: BigMap,
-      }
+      },
+      {
+        path: 'hotspot-list',
+        name: 'HotspotList',
+        component: CustomHotspotList,
+      },
     ],
   }
 ]

src/views/gui/CustomHotspotList.vue

@@ -0,0 +1,99 @@
+<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) 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
+    }
+  },
+  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>

src/views/gui/menu.vue

@@ -113,6 +113,7 @@
             data-original-title="热点列表"
             rel="tooltip"
             title=""
+            @click="$router.push({name: 'HotspotList'})"
           >
             <img
               draggable="false"