ZDKKC/scene2/src/views/gui/menu.vue

<template>
  <div class="pinBottom-container" @touchstart.stop @keydown.stop>
    <div class="pinBottom center">
      <div id="view-controllers"></div>
    </div>
    <img @click="toHomeFu()" class="back-icon" src="@/assets/images/icon/back-icon.png" alt="">
    <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')" width="24" height="24"
                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/icon/play.png')" width="24" height="24" />
            </a>
          </div>
          <div id="pause" class="ui-icon" style="display: none">
            <!-- 鼠标移入的显示 -->
            <div class="hoverTit">自动导览</div>

            <a>
              <img rel="tooltip" title="" :src="require('@/assets/images/icon/pause.png')" width="24" height="24"
                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 data-original-title="导览" @click="isGuide = !isGuide" id="pullTab" rel="tooltip" title="场景导览">
              <!-- 鼠标移入的显示 -->
              <div class="hoverTit">导览列表</div>

              <img title="" class="icon icon-inside" :src="require(`@/assets/images/icon/auto${!isGuide ? '_active' : ''
                }.png`)
                " />
            </div>

            <div data-original-title="全景漫游" id="gui-modes-inside" rel="tooltip">
              <!-- 鼠标移入的显示 -->
              <div class="hoverTit">全景漫游</div>

              <img class="icon icon-inside" :src="require('@/assets/images/icon/inside.png')" />
              <img class="icon icon-inside active" :src="require('@/assets/images/icon/inside_active.png')" />
            </div>
            <div title="迷你漫游" data-original-title="迷你模型" id="gui-modes-dollhouse" rel="tooltip">
              <!-- 鼠标移入的显示 -->
              <div class="hoverTit">三维视觉</div>
              <img class="icon icon-inside" :src="require('@/assets/images/icon/dollhouse.png')" />
              <img class="icon icon-inside active" :src="require('@/assets/images/icon/dollhouse_active.png')" />
            </div>
            <div data-original-title="俯视图" id="gui-modes-floorplan" rel="tooltip" title="顶部俯视">
              <!-- 鼠标移入的显示 -->
              <div class="hoverTit">平面视觉</div>
              <img class="icon icon-inside" :src="require('@/assets/images/icon/floor.png')" />
              <img class="active icon icon-inside active" :src="require('@/assets/images/icon/floor_active.png')" />
            </div>

            <!-- 热点列表 -->
            <!-- <div id="myHotList" @click="openInd = 1">
              <div class="hoverTit">热点列表</div>
              <img src="../../assets/img/hot.png" alt="" />
            </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="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 class="gui-floor">
          <div class="gui-floor-title"></div>
          <div class="gui-floor-icon">
            <span class="gui-floor-number"></span>
          </div>
          <div class="container"></div>
        </div>

        <div id="vr" class="ui-icon wide hidden" style="display: none">
          <a>
            <i rel="tooltip" title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
          </a>
        </div>
        <div id="sharing" class="ui-icon wide hidden" style="display: none">
          <a>
            <i rel="tooltip" title="{[{ SOCIAL_SHARING }]}" class="icon icon-share"></i>
          </a>
        </div>
        <div class="pull-right terms terms2">
          <a>{[{ TERMS }]}</a>
        </div>

        <!-- 回到pc页面（首页） -->
        <!-- <div class="toHomeBox" @click="toHomeFu">
          <div class="hoverTit">回到首页</div>
          <img src="../../assets/img/toHome.png" alt="" />
        </div> -->

        <!-- vr -->
        <!-- <div class="toHomeBox" @click="openVR">
          <div class="hoverTit">VR</div>
          <img src="../../assets/img/openVR.png" alt="" />
        </div> -->

        <!-- 音乐 -->
        <div id="volume" class="ui-icon bgandshare wide">
          <!-- 鼠标移入的显示 -->
          <div class="hoverTit">{{ musicState ? "关闭" : "打开" }}音乐</div>
          <div>
            <img id="openMusic" style="display: block" @click="switchBGM(true)" src="../../assets/img/musicAc.png"
              alt="" />
            <img id="closeMusic" style="display: none" @click="switchBGM(false)" src="../../assets/img/music.png"
              alt="" />
          </div>
        </div>
        <!-- 分享 -->
        <div class="toHomeBox" @mouseover="() => { isShowSharing = true }" @mouseout="() => { isShowSharing = false }"
          @click="() => { isShowSharing = !isShowSharing }">
          <!-- 鼠标移入的显示 -->
          <!-- <div class="hoverTit">分享</div> -->
          <div class="sharing-box" v-show="isShowSharing" @mouseover="() => { isShowSharing = true }"
            @mouseout="() => { isShowSharing = false }">
            <img src="/code.png" />
            <div>扫一扫，分享VR时空</div>
          </div>
          <img style="width: 30px;" src="../../assets/img/share.png" />
        </div>

        <!-- 全屏 -->
        <div class="toHomeBox quanping">
          <div class="hoverTit">{{ isFull ? '退出全屏' : '全屏' }}</div>
          <img @click="fullClick" v-show="!isFull" src="../../assets/images/icon/fullscreen.png" alt="" />
          <img @click="exitfull" v-show="isFull" src="../../assets/images/icon/fullscree_active.png" alt="" />
        </div>
      </div>
    </div>

    <div class="openBox" :class="{ openBoxAc: openInd }">
      <HotList v-show="openInd === 1" @close="openInd = 0" />
      <Share v-show="openInd === 2" @close="openInd = 0" :openInd="openInd" />
    </div>




  </div>
</template>

<script>
import HotList from "./components/hotList.vue";
import Share from "./components/share.vue";

export default {
  components: { HotList, Share },
  data() {
    return {
      isGuide: true,
      musicState: false,
      // vr---热点列表---分享
      openInd: 0,
      isFull: false,
      isShowSharing: false
    };
  },
  watch: {},
  computed: {},
  mounted() { },
  methods: {
    switchBGM(flag) {
      this.musicState = 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";
      }
    },
    screenFull(e) {
      if (e.requestFullscreen) {
        e.requestFullscreen();
      } else if (e.mozRequestFullScreen) {
        e.mozRequestFullScreen();
      } else if (e.webkitRequestFullscreen) {
        e.webkitRequestFullscreen();
      } else if (e.msRequestFullscreen) {
        e.msRequestFullscreen();
      }
    },
    fullClick() {
      this.screenFull(document.documentElement);
      this.isFull = true;
    },
    exitfull() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
      this.isFull = false;
    },
    // 点击vr
    openVR() {
      window.open("https://www.720yun.com/t/acvkiwdegqb?scene_id=34882556");
    },
    // 点击回到首页
    toHomeFu() {
      // this.switchBGM(false);
      // this.$emit("toHome");
      if (window.parent) {
        window.parent.window.toHome()
      }
    },
  },
};
</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;
}

// 鼠标移入显示的文字和图片
#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: #fff;
}

.sharing-box {
  position: absolute;
  width: 150px;
  left: 50%;
  top: -630%;
  // transform: translateY(120%);
  transform: translateX(-50%);
  background: #61616167;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
  border-radius: 10px;

  img {
    width: 90% !important;
    //  height: 130px;
    margin: 10px auto;
  }

}

#play:hover {
  .hoverTit {
    opacity: 1;


  }
}

#pause:hover {
  .hoverTit {
    opacity: 1;
  }
}

#gui-modes-map>div:hover {
  .hoverTit {
    opacity: 1;
  }
}

#volume {
  margin-right: 16px;
}

#volume,
#gui-fullscreen,
#gui-fullscreen-exit {
  position: relative;

  .hoverTit {
    width: 70px;
  }

  &:hover {
    .hoverTit {
      opacity: 1;
    }
  }
}

// 右侧菜单栏
@wh: 35px;
@margin: 0px;

#play,
#pause {
  margin-right: @margin;

  img {
    width: @wh;
    height: @wh;
  }
}

.rightViewContainer {
  display: flex !important;
  align-items: center !important;
}

#gui-modes-map {
  >div {
    margin-right: @margin;

    >img {
      width: @wh;
      height: @wh;
      display: block !important;
    }

    .active {
      display: none !important;
    }
  }

  .active {
    >img {
      display: none !important;
    }

    .active {
      display: block !important;
    }
  }
}

.pinBottom.right .ui-icon {
  background: none;
}

.back-icon {
  position: fixed;
  top: 20px;
  left: 20px;
  cursor: pointer;
}

#gui-fullscreen img {
  width: 35px;
}

#volume {
  width: 35px;
}

#gui-fullscreen-exit img {
  width: 35px !important;
}

.bgandshare {
  background: none !important;

  // margin-right: 20px!important;
  >div {
    width: 100%;
    cursor: pointer;

    img {
      width: 100%;
    }
  }
}

.toHomeBox {
  margin-right: 20px;
  cursor: pointer;
  position: relative;
  width: 35px;

  img {
    width: 35px;
  }

  &:hover {
    .hoverTit {
      opacity: 1;
    }
  }
}

.pinBottom-container {
  #myHotList {
    position: relative;
    float: left;
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .openBox {
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
  }

  .openBoxAc {
    opacity: 1;
    pointer-events: auto;
  }
}

// 移动端
@media screen and (max-width: 1000px) {
  .sharing-box {
    left: 0;
    top: -25%;
    transform: translateX(-95%);

    img {
      height: auto !important;
    }
  }

  .hoverTit {
    opacity: 0 !important;
  }

  .viewContainer {
    // bottom: 10px !important;

    &>div {
      img {
        width: 33px !important;
        height: 33px !important;
      }
    }
  }

  .pinBottom-container #myHotList {
    width: 50px;
    margin-bottom: 15px;
  }

  .pinBottom-container {
    .pinBottom.right.hideTarget {
      position: fixed;
      // top: 200px;
      right: 10px;

      .rightViewContainer {
        flex-direction: column;
        margin-bottom: 10px;

        &>div,
        #volume {
          width: 50px !important;
          text-align: right;
          margin-right: 10px;
          // margin-bottom: 10px;

          &>div {
            display: flex;
            justify-content: flex-end;
          }

          img {
            width: 33px;
            height: 33px;
          }
        }
      }
    }
  }

  .quanping {
    display: none;
  }
}
</style>