AnhuiDaily2/src/views/gui/menu.vue

<template>
  <div
    class="pinBottom-container"
    :class="{
      mobile: isMobile,
    }"
  >
    <div class="pinBottom center">
      <div id="view-controllers"></div>
    </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="播放"
          >
            <!-- 鼠标移入的显示 -->
            <!-- <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="暂停"
                :style="{opacity: '1',}"
              />
            </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
              data-original-title="导览"
              @click="isGuide = !isGuide"
              id="pullTab"
              rel="tooltip"
              title="场景导览"
            >
              <!-- 鼠标移入的显示 -->
              <!-- <div class="hoverTit">导览列表</div> -->
              <img
                title=""
                class="icon icon-inside"
                src="@/assets/images/auto.png"
                :style="{
                  opacity: isGuide ? '1' : '',
                }"
              />
            </div>

            <div
              v-show="!isMobile"
              data-original-title="全景漫游"
              id="gui-modes-inside"
              rel="tooltip"
            >
              <!-- 鼠标移入的显示 -->
              <!-- <div class="hoverTit">自由漫游</div> -->
              <img
                class="icon icon-inside"
                :src="require('@/assets/images/inside.png')"
              />
            </div>
            <div
              v-show="!isMobile"
              title="迷你模型"
              data-original-title="迷你模型"
              id="gui-modes-dollhouse"
              rel="tooltip"
            >
              <!-- 鼠标移入的显示 -->
              <!-- <div class="hoverTit">三维视觉</div> -->
              <img
                class="icon icon-inside"
                :src="require('@/assets/images/dollhouse.png')"
              />
            </div>
            <div
              v-show="!isMobile"
              data-original-title="俯视图"
              id="gui-modes-floorplan"
              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
              data-original-title="热点列表"
              id="hotList"
              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
          id="volume"
          class="ui-icon wide"
          title="音乐"
        >
          <a>
            <img
              id="openMusic"
              style="display: block"
              @click="switchBGM(true)"
              src="../../assets/images/music-muted.png"
              alt=""
              title="打开音乐"
            />
            <img
              id="closeMusic"
              style="display: none"
              @click="switchBGM(false)"
              :style="{
                opacity: '1',
              }"
              src="../../assets/images/music.png"
              alt=""
              title="关闭音乐"
            />
          </a>
        </div>

        <!-- 全屏 -->
        <div
          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,
    };
  },
  watch: {
  },
  computed: {},
  mounted() {
  },
  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";
      }
    },
  },
};
</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相关--------------

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

// ----------右下方菜单---------------
.pinBottom.right {
  bottom: 30px;
  .rightViewContainer {
    display: flex !important;
    align-items: center !important;
    margin-right: 30px;
    .ui-icon {
      width: @wh;
      height: @wh;
      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%;
          opacity: 0.7;
        }
      }
    }
  }
}
// ----------end of 右下方菜单---------------

// -------------移动端特殊样式---------------
@button-margin: calc((100vw - 50px * 4) / 5);
.mobile {
  .pinBottom.left {
    > div {
      > .viewContainer {
        margin-left: @button-margin;
        #play,
        #pause {
          margin-right: @button-margin;
          img {
          }
        }
        #gui-modes-map {
          > div {
            margin-right: @button-margin;
            > img {
            }
            &.active {
              > img {
              }
            }
          }
        }
      }
    }
  }

  .pinBottom.right {
    .rightViewContainer {
      margin-right: @button-margin;
      .ui-icon {
        margin-left: @button-margin;
        > a {
          > img {
          }
        }
      }
    }
  }
}
// -------------end of 移动端特殊样式---------------

</style>