定制化楼层-离线

H5场景本地化/src/views/gui/compomemt/floorSelect.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="floorSelect" v-if="urlNum">
+    <div class="floor_Box" @click="show = !show">
+      <div class="floor_icon"></div>
+    </div>
+    <div class="floor_num">{{ numTxt }}</div>
+    <!-- 点击出来的选择框 -->
+    <div class="floor_show" v-show="show">
+      <div
+        @click="skipUrl(item.path)"
+        class="floor_row"
+        :class="{ floor_active: item.path == urlNum }"
+        v-for="item in data"
+        :key="item.id"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "floorSelect",
+  components: {},
+  data() {
+    return {
+      data: [
+        { id: 4, name: "4层", path: "1197" },
+        { id: 3, name: "3层", path: "1196" },
+        { id: 2, name: "2层", path: "1195" },
+        { id: 1, name: "1层", path: "1194" },
+      ],
+      show: false,
+      urlNum: "",
+      numTxt: "",
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    skipUrl(url) {
+      window.location.href = window.location.href.replace(this.urlNum, url);
+      setTimeout(() => {
+        location.reload(true);
+      }, 200);
+    },
+  },
+  created() {
+    const num = window.number;
+    const arr = ["1194", "1195", "1196", "1197"];
+    if (arr.includes(num)) {
+      this.urlNum = num;
+      this.numTxt =
+        num == 1194 ? "1" : num == 1195 ? "2" : num == 1196 ? "3" : "4";
+    }
+  },
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.floorSelect {
+  width: 48px;
+  margin-right: 10px;
+  height: 48px;
+  color: #fff;
+  font-size: 11px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.2);
+  position: relative;
+
+  .floor_Box {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    .floor_icon {
+      width: 32px;
+      height: 29px;
+      background: url("../../../assets/img/floor-icon.png") left top no-repeat;
+      background-size: 98%;
+    }
+  }
+
+  .floor_num {
+    pointer-events: none;
+    position: absolute;
+    top: 2px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .floor_show {
+    width: 86px;
+    position: absolute;
+    bottom: 50px;
+    transition: all 0.3s;
+    z-index: 100;
+    left: -19px;
+    .floor_row {
+      border: 1px solid transparent;
+      width: 86px;
+      height: 30px;
+      margin-bottom: 1px;
+      font-size: 14px;
+      cursor: pointer;
+      overflow: hidden;
+      white-space: nowrap;
+      background-color: rgba(0, 0, 0, 0.5);
+      text-align: center;
+      line-height: 30px;
+      color: #fff;
+      &:hover {
+        background-color: #1d95d0;
+      }
+    }
+    .floor_active {
+      background-color: #1d95d0;
+      pointer-events: none;
+    }
+  }
+}
+</style>

H5场景本地化/src/views/gui/menu.vue

@@ -180,6 +180,11 @@
 
                 <div class="pinBottom right hideTarget">
                   <div class="rightViewContainer clearfix">
+
+                    <!-- 添加自己写的逻辑的楼层选择 -->
+                    <FloorSelect />
+
+
                     <div class="gui-floor">
                       <div class="gui-floor-title"></div>
                       <div class="gui-floor-icon">
@@ -212,8 +217,9 @@
 <script>
 //引入组件
 import Hotspot from "./compomemt/hotspot";
+import FloorSelect from "./compomemt/floorSelect";
 export default {
-  components: { Hotspot },
+  components: { Hotspot,FloorSelect },
   data() {
     return {
       // 自动导览切换
@@ -315,6 +321,13 @@ export default {
 </script>
 
 <style lang="less" scoped>
+
+// 隐藏原本的楼层选择
+.gui-floor{
+  display: none !important;
+}
+
+
 #hotList {
   display: none !important;
 }