四维看看：菜单active样式

src/views/SwkkFadeIn.vue

@@ -71,10 +71,6 @@ export default {
   //方法集合
   methods: {
     toSwkk() {
-      // 不这样，就会因为加了小地图而卡死？！
-      setTimeout(() => {
-        location.reload()
-      }, 500)
       this.$router.replace({ name: 'SwkkView', query: { floor: '1' } })
     }
   },

src/views/SwkkView.vue

@@ -21,35 +21,66 @@
           draggable="false"
         >
         <div>场景导览</div>
-      </button><button>
+      </button>
+      <button
+        :class="{active: mode === 2}"
+        @click="onClickQjmy"
+      >
         <img
+          v-show="mode !== 2"
           src="@/assets\images\swkk\quanjingmanyou.png"
-
+          alt=""
+          draggable="false"
+        >
+        <img
+          v-show="mode === 2"
+          src="@/assets\images\swkk\quanjingmanyou_1.png"
           alt=""
           draggable="false"
         >
         <div>全景漫游</div>
-      </button><button>
+      </button>
+      <button
+        :class="{active: mode === 3}"
+        @click="onClickMnmx"
+      >
         <img
+          v-show="mode !== 3"
           src="@/assets\images\swkk\minimoxing.png"
-
+          alt=""
+          draggable="false"
+        >
+        <img
+          v-show="mode === 3"
+          src="@/assets\images\swkk\minimoxing_1.png"
           alt=""
           draggable="false"
         >
         <div>迷你模型</div>
-      </button><button>
+      </button>
+      <button
+        :class="{active: mode === 4}"
+        @click="onClickDbfs"
+      >
         <img
+          v-show="mode !== 4"
           src="@/assets\images\swkk\dingbufushi.png"
           alt=""
           draggable="false"
         >
+        <img
+          v-show="mode === 4"
+          src="@/assets\images\swkk\dingbufushi_1.png"
+          alt=""
+          draggable="false"
+        >
         <div>顶部俯视</div>
       </button>
     </menu>
 
     <!-- 右上地图 -->
     <div
-      v-show="!isLoading && numSta === 2"
+      v-show="!isLoading && mode === 2"
       class="mini-map"
     >
       <div
@@ -84,9 +115,10 @@ export default {
       kankan: null,
       floor: 0,
       isLoading: true,
+      mode: 2,
+
+      // ------- ?
       title: true,
-      numSta: 2,
-      // -------
       partId: 0,
       frameId: null,
       progress: 0,
@@ -102,178 +134,175 @@ export default {
     if (floor === "1") sceneCode = process.env.VUE_APP_SCENE_CODE_FLOOR_1
     else if (floor === "2") sceneCode = process.env.VUE_APP_SCENE_CODE_FLOOR_2
     console.assert(sceneCode, 'no sceneCode!')
-    let kankan = new KanKan({
-      dom: ".swkk-wrap",
-      num: sceneCode,
-    })
 
-    kankan.use("MinMap", {
-      theme: {
-        camera_fillStyle: "#930909",
-      },
-    })
+    // 不等一秒，就会因为use了小地图而卡死？
+    setTimeout(() => {
+      let kankan = new KanKan({
+        dom: ".swkk-wrap",
+        num: sceneCode,
+      })
 
+      kankan.use("MinMap", {
+        theme: {
+          camera_fillStyle: "#930909",
+        },
+      })
 
-    // kankan.use("TourPlayer").then((player) => {
-    //   player.on("play", ({ partId, frameId }) => {
-    //     this.playing = true
-    //   })
-    //   player.on("pause", ({ partId, frameId }) => {
-    //     this.playing = false
-    //   })
-    //   player.on("end", async () => {
-    //     this.playing = false
-    //     this.progress = 0
-    //     this.frameId = null
-    //     this.$refs.RbottomRef.leftCut(-1)
-    //   })
+      // kankan.use("TourPlayer").then((player) => {
+      //   player.on("play", ({ partId, frameId }) => {
+      //     this.playing = true
+      //   })
+      //   player.on("pause", ({ partId, frameId }) => {
+      //     this.playing = false
+      //   })
+      //   player.on("end", async () => {
+      //     this.playing = false
+      //     this.progress = 0
+      //     this.frameId = null
+      //     this.$refs.RbottomRef.leftCut(-1)
+      //   })
 
-    //   player.on("progress", ({ partId, frameId, progress }) => {
-    //     // 不让自动漫游多次点击
-    //     if (frameId === 0) {
-    //       // 防止多次点击自动漫游
-    //       let mainApp = document.querySelector("#app")
-    //       mainApp.style.pointerEvents = "auto"
-    //     }
-    //     // 画面进度
-    //     this.partId = partId
-    //     this.frameId = frameId
-    //     this.progress = Number(progress * 100).toFixed(5)
-    //   })
-    // })
+      //   player.on("progress", ({ partId, frameId, progress }) => {
+      //     // 不让自动漫游多次点击
+      //     if (frameId === 0) {
+      //       // 防止多次点击自动漫游
+      //       let mainApp = document.querySelector("#app")
+      //       mainApp.style.pointerEvents = "auto"
+      //     }
+      //     // 画面进度
+      //     this.partId = partId
+      //     this.frameId = frameId
+      //     this.progress = Number(progress * 100).toFixed(5)
+      //   })
+      // })
 
-    // // 有关球幕视频控制背景音乐
-    // kankan.Scene.on("panorama.videorenderer.startvideo", () => {
-    //   // 点击热点的时候当前背景音乐的播放状态
-    //   let dom = document.querySelector("#bacMusic")
-    //   window.bacMusic = !dom.paused
-    //   setTimeout(() => {
-    //     this.$refs.RbottomRef.opMusic(false)
-    //   }, 200)
-    //   // 暂停背景音乐
-    // })
-    // kankan.Scene.on("panorama.videorenderer.resumerender", () => {
+      // // 有关球幕视频控制背景音乐
+      // kankan.Scene.on("panorama.videorenderer.startvideo", () => {
+      //   // 点击热点的时候当前背景音乐的播放状态
+      //   let dom = document.querySelector("#bacMusic")
+      //   window.bacMusic = !dom.paused
+      //   setTimeout(() => {
+      //     this.$refs.RbottomRef.opMusic(false)
+      //   }, 200)
+      //   // 暂停背景音乐
+      // })
+      // kankan.Scene.on("panorama.videorenderer.resumerender", () => {
 
-    //   // 点击热点的时候当前背景音乐的播放状态
-    //   let dom = document.querySelector("#bacMusic")
-    //   window.bacMusic = !dom.paused
-    //   setTimeout(() => {
-    //     this.$refs.RbottomRef.opMusic(false)
-    //   }, 200)
-    //   // 暂停背景音乐
-    // })
-    // kankan.Scene.on("panorama.videorenderer.suspendrender", () => {
-    //   if (window.bacMusic) {
-    //     setTimeout(() => {
-    //       this.$refs.RbottomRef.opMusic(true)
-    //     }, 100)
-    //   }
-    //   // 恢复背景音乐
-    // })
+      //   // 点击热点的时候当前背景音乐的播放状态
+      //   let dom = document.querySelector("#bacMusic")
+      //   window.bacMusic = !dom.paused
+      //   setTimeout(() => {
+      //     this.$refs.RbottomRef.opMusic(false)
+      //   }, 200)
+      //   // 暂停背景音乐
+      // })
+      // kankan.Scene.on("panorama.videorenderer.suspendrender", () => {
+      //   if (window.bacMusic) {
+      //     setTimeout(() => {
+      //       this.$refs.RbottomRef.opMusic(true)
+      //     }, 100)
+      //   }
+      //   // 恢复背景音乐
+      // })
 
-    // // 导览数据
-    // kankan.TourManager.on("loaded", (tours) => {
-    //   this.$refs.RbottomRef.baseSw(tours)
-    // })
+      // // 导览数据
+      // kankan.TourManager.on("loaded", (tours) => {
+      //   this.$refs.RbottomRef.baseSw(tours)
+      // })
 
-    // // 全部热点数据
-    // kankan.store.on("tags", (tags) => {
-    //   this.baseHotData = tags.tags
-    //   let temp = []
-    //   tags.tags.forEach((v) => {
-    //     let arrTitle = v.title.split("&")
-    //     // 显示在页面的热点图标
-    //     if (arrTitle[2]) {
-    //       temp.push(v)
-    //     }
-    //   })
-    // })
+      // // 全部热点数据
+      // kankan.store.on("tags", (tags) => {
+      //   this.baseHotData = tags.tags
+      //   let temp = []
+      //   tags.tags.forEach((v) => {
+      //     let arrTitle = v.title.split("&")
+      //     // 显示在页面的热点图标
+      //     if (arrTitle[2]) {
+      //       temp.push(v)
+      //     }
+      //   })
+      // })
 
-    // // 热点
-    // kankan
-    //   .use("TagView", {
-    //     render(data) {
-    //       let arrTitle = data.title.split("&")
-    //       let flag = false
-    //       if (arrTitle[2] || !data.title.includes("&")) flag = true
+      // // 热点
+      // kankan
+      //   .use("TagView", {
+      //     render(data) {
+      //       let arrTitle = data.title.split("&")
+      //       let flag = false
+      //       if (arrTitle[2] || !data.title.includes("&")) flag = true
 
-    //       let title = data.title.split("&")[0]
+      //       let title = data.title.split("&")[0]
 
-    //       return `<span class="tag-icon animate" title=${title} style="${
-    //         flag ? "" : "display: none;"
-    //       };background-image:url({{icon}})"></span><div class="tag-body"></div>`
-    //     },
-    //   })
-    //   .then((TagView) => {
-    //     // 监听手动点击事件
-    //     TagView.on("click", (e) => {
-    //       // 点击热点的时候当前背景音乐的播放状态
-    //       let dom = document.querySelector("#bacMusic")
-    //       window.bacMusic = !dom.paused
-    //       setTimeout(() => {
-    //         this.$refs.RbottomRef.opMusic(false)
-    //       }, 200)
+      //       return `<span class="tag-icon animate" title=${title} style="${
+      //         flag ? "" : "display: none;"
+      //       };background-image:url({{icon}})"></span><div class="tag-body"></div>`
+      //     },
+      //   })
+      //   .then((TagView) => {
+      //     // 监听手动点击事件
+      //     TagView.on("click", (e) => {
+      //       // 点击热点的时候当前背景音乐的播放状态
+      //       let dom = document.querySelector("#bacMusic")
+      //       window.bacMusic = !dom.paused
+      //       setTimeout(() => {
+      //         this.$refs.RbottomRef.opMusic(false)
+      //       }, 200)
 
-    //       let temp = []
+      //       let temp = []
 
-    //       // 如果是多个热点合并
-    //       if (e.data.title.split("&")[1]) {
-    //         this.baseHotData.forEach((v) => {
-    //           if (v.title.split("&")[1] === e.data.title.split("&")[1]) {
-    //             temp.push(v)
-    //           }
-    //         })
-    //         let obj = {
-    //           image: [],
-    //           audio: [],
-    //           link: [],
-    //           video: [],
-    //         }
-    //         temp.forEach((v) => {
-    //           obj[v.type].push(v)
-    //         })
-    //         this.sonInfo = obj
-    //       } else {
-    //         // 单个热点
-    //         this.sonInfo = { audio: [e.data] }
-    //       }
+      //       // 如果是多个热点合并
+      //       if (e.data.title.split("&")[1]) {
+      //         this.baseHotData.forEach((v) => {
+      //           if (v.title.split("&")[1] === e.data.title.split("&")[1]) {
+      //             temp.push(v)
+      //           }
+      //         })
+      //         let obj = {
+      //           image: [],
+      //           audio: [],
+      //           link: [],
+      //           video: [],
+      //         }
+      //         temp.forEach((v) => {
+      //           obj[v.type].push(v)
+      //         })
+      //         this.sonInfo = obj
+      //       } else {
+      //         // 单个热点
+      //         this.sonInfo = { audio: [e.data] }
+      //       }
 
-    //       // 如果只需监听热点点击，实现其他逻辑操作，下面的代码不需要调用
+      //       // 如果只需监听热点点击，实现其他逻辑操作，下面的代码不需要调用
 
-    //       // 聚焦当前点击的热点
-    //       TagView.focus(e.data.sid)
-    //     })
-    //   })
+      //       // 聚焦当前点击的热点
+      //       TagView.focus(e.data.sid)
+      //     })
+      //   })
 
-    kankan.render()
+      kankan.render()
 
-    kankan.Scene.on("loaded", () => {
-      console.log('loaded!')
-      this.isLoading = false
-      //设置地面logo
-      kankan.Scene.setFloorLogo({
-        url: "./img/diBiao.png",
-        size: 40,
+      kankan.Scene.on("loaded", () => {
+        console.log('loaded!')
+        this.isLoading = false
+        //设置地面logo
+        kankan.Scene.setFloorLogo({
+          url: "./img/diBiao.png",
+          size: 40,
+        })
       })
-    })
 
-    // let obj = {
-    //   floorplan: 4,
-    //   dollhouse: 3,
-    //   panorama: 2,
-    // }
-    // // 监听看看的模式
-    // kankan.Camera.on("mode.beforeChange", ({ toMode, floorIndex }) => {
-    //   let num = obj[toMode]
-    //   this.numSta = num
-    //   if (this.$refs.RbottomRef && this.$refs.RbottomRef.leftCut) {
-    //     this.$refs.RbottomRef.leftCut(num)
-    //   }
-    // })
+      // 监听看看的模式
+      kankan.Camera.on("mode.beforeChange", ({ toMode }) => {
+        this.mode = {
+          floorplan: 4,
+          dollhouse: 3,
+          panorama: 2,
+        }[toMode]
+      })
 
-    this.kankan = kankan
+      this.kankan = kankan
+    }, 1000)
 
-    // location.reload()
   },
   methods: {
     // 切换楼层
@@ -287,6 +316,15 @@ export default {
         location.reload(true)
       }, 200)
     },
+    onClickQjmy() {
+      this.kankan.Camera.panorama()
+    },
+    onClickMnmx() {
+      this.kankan.Camera.dollhouse()
+    },
+    onClickDbfs() {
+      this.kankan.Camera.floorplan()
+    }
   },
 }
 </script>
@@ -319,10 +357,17 @@ export default {
         height: 5rem;
       }
       > div {
-        margin-top: 0.17rem;
         color: #fff;
+        text-shadow: 0px 0px 0.2rem rgba(255,255,255,0.6);
+        margin-top: 0.17rem;
         font-size: 1.17rem;
       }
+      &.active {
+        > div {
+          color: #930909;
+          text-shadow: 0px 0px 0.2rem rgba(255,255,255,0.6);
+        }
+      }
     }
   }