XuzhouArtwork/src/views/gui/menu.vue

<template>
  <div
    class="pinBottom-container"
    :class="{
      mobile: isMobile,
    }"
  >
    <div class="pinBottom center">
      <div id="view-controllers" />
    </div>

    <div class="pinBottom left">
      <div>
        <div class="viewContainer">
          <!-- <div
            id="previous"
            class="previous desktop-only ui-icon"
            style="display: none"
          >
            <a>
              <img
                rel="tooltip"
                title=""
                :src="require('@/assets/images/play.png')"
                data-original-title="播放"
              />
            </a>
          </div> -->
          <div
            id="play"
            class="ui-icon"
            rel="tooltip"
            data-original-title="播放"
            @click="onClickPlay"
          >
            <!-- 鼠标移入的显示 -->
            <!-- <div class="hoverTit">自动导览</div> -->
            <a>
              <img
                :src="require('@/assets/images/play.png')"
              >
            </a>
          </div>
          <div
            id="pause"
            class="ui-icon"
            style="display: none"
          >
            <!-- 鼠标移入的显示 -->
            <!-- <div class="hoverTit">自动导览</div> -->
            <a>
              <img
                rel="tooltip"
                title=""
                :src="require('@/assets/images/pause.png')"
                data-original-title="暂停"
              >
            </a>
          </div>
          <!-- <div
            id="next"
            class="next desktop-only ui-icon wide"
            style="display: none"
          >
            <a>
              <i
                rel="tooltip"
                title=""
                class="icon icon-dpad-right"
                data-original-title="下一个"
              ></i>
            </a>
          </div> -->
          <div
            id="gui-modes-map"
            class="ui-icon double active"
          >
            <div
              id="pullTab"
              data-original-title="导览"
              rel="tooltip"
              title="场景导览"
            >
              <!-- 鼠标移入的显示 -->
              <!-- <div class="hoverTit">导览列表</div> -->
              <img
                title=""
                class="icon icon-inside"
                src="@/assets/images/auto.png"
                :style="{
                  opacity: isGuide ? '1' : '',
                }"
              >
            </div>

            <div
              id="gui-modes-inside"
              data-original-title="全景漫游"
              rel="tooltip"
            >
              <!-- 鼠标移入的显示 -->
              <!-- <div class="hoverTit">自由漫游</div> -->
              <img
                class="icon icon-inside"
                :src="require('@/assets/images/inside.png')"
              >
            </div>
            <div
              id="gui-modes-dollhouse"
              title="迷你模型"
              data-original-title="迷你模型"
              rel="tooltip"
            >
              <!-- 鼠标移入的显示 -->
              <!-- <div class="hoverTit">三维视觉</div> -->
              <img
                class="icon icon-inside"
                :src="require('@/assets/images/dollhouse.png')"
              >
            </div>
            <div
              id="gui-modes-floorplan"
              data-original-title="俯视图"
              rel="tooltip"
              title="顶部俯视"
            >
              <!-- 鼠标移入的显示 -->
              <!-- <div class="hoverTit">平面视觉</div> -->
              <img
                class="icon icon-inside"
                :src="require('@/assets/images/floor.png')"
              >
            </div>
            <!-- <div
              data-original-title="VR"
              id="vr"
              rel="tooltip"
              title=""
              style="display: none"
            >
              <img
                class="icon icon-inside"
                :src="require('@/assets/images/VR.png')"
              />
            </div> -->
            <!-- 没有这个元素会导致报错 -->
            <div
              id="hotList"
              style="display: none;"
              data-original-title="热点列表"
              rel="tooltip"
              title=""
            >
              <img
                class="icon icon-inside"
                :src="require('@/assets/images/hotlist.png')"
              >
            </div>
            <!-- <div
              data-original-title="消除外壳"
              id="gui-remove-face"
              rel="tooltip"
              title=""
              style="display: none; float: left"
            >
              <img
                class="icon icon-inside"
                :src="require('@/assets/images/face.jpg')"
              />
            </div> -->
          </div>
        </div>
      </div>
    </div>

    <div class="pinBottom right hideTarget">
      <div class="rightViewContainer clearfix">
        <div
          v-if="!isMobile"
          class="ui-icon my-floor"
          :class="{
            active: currentSceneCode === '1265'
          }"
          @click="ChangeFloor('1265')"
        >
          <a>
            <img
              src="@/assets/images/floor-1.png"
              alt=""
              draggable="false"
            >
          </a>
        </div>
        <div
          v-if="!isMobile"
          class="ui-icon my-floor"
          :class="{
            active: currentSceneCode === '1263'
          }"
          @click="ChangeFloor('1263')"
        >
          <a>
            <img
              src="@/assets/images/floor-2.png"
              alt=""
              draggable="false"
            >
          </a>
        </div>
        <div
          v-if="!isMobile"
          class="ui-icon my-floor"
          :class="{
            active: currentSceneCode === '1264'
          }"
          @click="ChangeFloor('1264')"
        >
          <a>
            <img
              src="@/assets/images/floor-3.png"
              alt=""
              draggable="false"
            >
          </a>
        </div>

        <div
          v-if="isMobile"
          class="floor-selector-wrap"
          :class="{
            expanded: isSelectingFloor,
          }"
        >
          <div
            class="ui-icon floor-mobile"
            :style="{
              opacity: (currentSceneCode === '1265' || isSelectingFloor) ? '1' : '0',
              right: !isSelectingFloor ? '0' : currentSceneCode === '1265' ? '0' : 'calc(44px + 12px)',
            }"
            @click="onClickFloorBtnMobile('1265')"
          >
            <a>
              <img
                :class="{
                  active: currentSceneCode === '1265'
                }"
                src="@/assets/images/floor-1.png"
                alt=""
                draggable="false"
              >
            </a>
          </div>
          <div
            class="ui-icon floor-mobile"
            :style="{
              opacity: (currentSceneCode === '1263' || isSelectingFloor) ? '1' : '0',
              right: !isSelectingFloor ? '0' : currentSceneCode === '1265' ? 'calc(44px + 12px)' : currentSceneCode === '1263' ? '0' : 'calc(44px * 2 + 12px * 2)',
            }"
            @click="onClickFloorBtnMobile('1263')"
          >
            <a>
              <img
                :class="{
                  active: currentSceneCode === '1263'
                }"
                src="@/assets/images/floor-2.png"
                alt=""
                draggable="false"
              >
            </a>
          </div>
          <div
            class="ui-icon floor-mobile"
            :style="{
              opacity: (currentSceneCode === '1264' || isSelectingFloor) ? '1' : '0',
              right: !isSelectingFloor ? '0' : currentSceneCode === '1265' ? 'calc(44px * 2 + 12px * 2)' : currentSceneCode === '1263' ? 'calc(44px * 2 + 12px * 2)' : '0',
            }"
            @click="onClickFloorBtnMobile('1264')"
          >
            <a>
              <img
                :class="{
                  active: currentSceneCode === '1264'
                }"
                src="@/assets/images/floor-3.png"
                alt=""
                draggable="false"
              >
            </a>
          </div>
        </div>

        <!-- 音乐 -->
        <div
          id="volume"
          class="ui-icon wide"
          title="音乐"
        >
          <a>
            <img
              id="openMusic"
              style="display: block"
              src="../../assets/images/music-muted.png"
              alt=""
              title="打开音乐"
              @click="switchBGM(true)"
            >
            <img
              id="closeMusic"
              style="display: none"
              src="../../assets/images/music.png"
              alt=""
              title="关闭音乐"
              @click="switchBGM(false)"
            >
          </a>
        </div>

        <!-- 全屏 -->
        <div
          v-show="!isMobile"
          id="gui-fullscreen"
          class="ui-icon wide"
          data-placement="top"
          rel="tooltip"
          title="全屏"
        >
          <a>
            <img
              title="全屏"
              :src="require('@/assets/images/full.png')"
            >
          </a>
        </div>

        <!-- 取消全屏 -->
        <div
          id="gui-fullscreen-exit"
          class="ui-icon wide"
          data-placement="top"
          rel="tooltip"
          title="关闭全屏"
          style="display: none"
        >
          <a>
            <img
              title="关闭全屏"
              :src="require('@/assets/images/fullAc.png')"
            >
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      isGuide: false,
      isSelectingFloor: false,
      floorBtnCollapseTimeoutId: null,
      mutationObserver: null,
    }
  },
  computed: {
    currentSceneCode() {
      return this.$route.query.m
    }
  },
  watch: {
    isSelectingFloor: {
      handler(vNew) {
        clearTimeout(this.floorBtnCollapseTimeoutId)
        if (vNew) {
          this.floorBtnCollapseTimeoutId = setTimeout(() => {
            this.isSelectingFloor = false
          }, 2000)
        }
      }
    }
  },
  mounted() {
    // 创建一个观察器实例并传入回调函数
    this.mutationObserver = new MutationObserver((mutationsList, observer) => {
      for (let mutation of mutationsList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
          if (mutation.target.classList.contains('open')) {
            this.isGuide = true
          } else {
            this.isGuide = false
          }
        }
      }
    })

    // 选择需要观察变动的节点
    const targetNode = document.querySelector('.pinBottom.left')
    // 以上述配置开始观察目标节点
    this.mutationObserver.observe(targetNode, { attributes: true, childList: false, subtree: false })
  },
  beforeDistroy() {
    this.mutationObserver.disconnect()
  },
  methods: {
    switchBGM(flag) {
      if (flag) {
        window.manage.switchBgmState(true)
        document.querySelector("#openMusic").style.display = "none"
        document.querySelector("#closeMusic").style.display = "block"
      } else {
        window.manage.switchBgmState(false)
        document.querySelector("#openMusic").style.display = "block"
        document.querySelector("#closeMusic").style.display = "none"
      }
    },
    ChangeFloor(sceneCode) {
      if (this.currentSceneCode !== sceneCode) {
        const locationQuerySection = new URLSearchParams(location.href.split('?')[1])
        locationQuerySection.set('m', sceneCode)
        const newLocation = location.href.split('?')[0] + '?' + locationQuerySection.toString()
        location.assign(newLocation)
        location.reload(true)
      }
    },
    onClickFloorBtnMobile(floorCode) {
      if (!this.isSelectingFloor) {
      } else {
        this.ChangeFloor(floorCode)
      }
      this.isSelectingFloor = !this.isSelectingFloor
    },
    onClickPlay() {
      console.log('sadfsfdsdfsdfgdfg')
    }
  },
}
</script>

<style lang="less" scoped>
::-webkit-scrollbar {
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
}
::-webkit-scrollbar-thumb {
  // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #edd3b0;
  border-color: #edd3b0;
  color: #edd3b0;
  outline: none;
}

// ------tooltip相关--------------
// #gui-modes-inside {
//   position: relative;
// }
// #gui-modes-dollhouse {
//   position: relative;
// }
// #gui-modes-floorplan {
//   position: relative;
// }
// .hoverTit {
//   pointer-events: none;
//   transition: all 0.5s;
//   opacity: 0;
//   position: absolute;
//   left: 50%;
//   transform: translateX(-50%);
//   top: -40px;
//   width: 80px;
//   height: 37px;
//   line-height: 30px;
//   text-align: center;
//   background: url("../../assets/img/hoverTit.png");
//   background-size: 100% 100%;
//   font-size: 14px;
//   color: #fff6d2;
// }
// #play:hover {
//   .hoverTit {
//     opacity: 1;
//   }
// }
// #pause:hover {
//   .hoverTit {
//     opacity: 1;
//   }
// }
// #gui-modes-map > div:hover {
//   .hoverTit {
//     opacity: 1;
//   }
// }
// -------end of tooltip相关--------------

@width: 99px;
@height: 125px;
// ----------左下方菜单--------------
.pinBottom.left {
  bottom: 30px;
  &.playing {
    bottom: 50px !important;
  }
  &.open {
    bottom: 170px !important;
  }
  &.open.playing {
    bottom: 190px !important
  }
  > div {
    > .viewContainer {
      flex-direction: row;
      margin-left: 50px;
      padding: 0;
      #play,
      #pause {
        margin-right: 30px;
        width: 99px;
        height: 125px;
        padding: 0;
        img {
          height: 100%;
          width: 100%;
        }
      }
      #gui-modes-map {
        > div {
          margin-right: 30px;
          width: @width;
          height: @height;
          padding: 0;
          > img {
            height: 100%;
            width: 100%;
            opacity: 0.7;
            display: block !important;
          }
          &.active {
            > img {
              opacity: 1;
            }
          }
        }
      }
    }
  }
}
// ----------end of 左下方菜单--------------

// ----------右下方菜单---------------
.pinBottom.right {
  bottom: 30px;
  &.playing {
    bottom: 50px !important;
  }
  &.open {
    bottom: 170px !important;
  }
  &.open.playing {
    bottom: 190px !important
  }
  .rightViewContainer {
    display: flex !important;
    align-items: center !important;
    margin-right: 54px;
    padding-bottom: 20px;
    .ui-icon {
      width: 88px;
      height: 91px;
      margin-left: 30px;
      margin-right: initial;
      background: none;
      border: none;
      padding: 0 !important;
      > a {
        width: 100% !important;
        height: 100% !important;
        > img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .ui-icon.my-floor {
      opacity: 0.7;
    }
    .ui-icon.my-floor.active {
      opacity: 1;
    }
  }
}
// ----------end of 右下方菜单---------------

// -------------移动端特殊样式---------------
.mobile {
  .pinBottom.left {
    left: 0;
    bottom: 0;
    &.playing {
      bottom: 20px !important;
    }
    &.open {
      bottom: 158px !important;
    }
    &.open.playing {
      bottom: 178px !important
    }
    > div {
      > .viewContainer {
        flex-direction: column;
        margin-left: 20px;
        margin-bottom: 25px;
        #play,
        #pause {
          margin-top: 15px;
          margin-right: 0;
          width: 45px;
          height: 60px;
          img {
          }
        }
        #gui-modes-map {
          > div {
            margin-top: 15px;
            margin-right: 0;
            width: 45px;
            height: 60px;
            > img {
            }
            &.active {
              > img {
              }
            }
          }
        }
      }
    }
  }

  .pinBottom.right {
    position: fixed;
    top: 130px;
    bottom: initial;
    .rightViewContainer {
      margin-right: 14px;
      padding-bottom: 0;
      flex-direction: column;
      align-items: flex-end !important;
      > .floor-selector-wrap {
        height: 44px;
        width: 44px;
        position: relative;
        margin-bottom: 10.5px;
        > .floor-mobile {
          position: absolute;
          top: 0;
          right: 0;
          opacity: 0;
          transition: all 0.5s;
        }
        &.expanded {
          width: calc(44px * 3 + 12px * 2);
        }
      }
      .ui-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 10.5px;
        margin-left: initial;
        > a {
          > img {
          }
        }
      }
    }
  }
}
// -------------end of 移动端特殊样式---------------

</style>