AoMenJiBenFa/scene/src/views/gui/menu.vue

<template>
  <div class="pinBottom-container" @touchstart.stop @keydown.stop>
    <div class="pinBottom center">
      <div id="view-controllers"></div>
    </div>
    <div class="pinBottom left">
      <!-- <div v-if="isMobile" id="myClickBox" style="">
        <div id="go" />
        <div id="back" />
      </div> -->

      <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="$t('operation.bf')" />
            </a>
          </div>
          <div id="play" class="ui-icon" rel="tooltip" :data-original-title="$t('operation.bf')">
            <!-- 鼠标移入的显示 -->
            <div class="hoverTit">{{ $t("operation.zddl") }}</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">{{ $t("operation.zddl") }}</div>

            <a>
              <img rel="tooltip" title="" :src="require('@/assets/images/icon/pause.png')" width="24" height="24" :data-original-title="$t('operation.zt')" />
            </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="$t('operation.xyg')"></i>
            </a>
          </div>
          <div id="gui-modes-map" class="ui-icon double active">
            <div :data-original-title="$t('operation.dl')" @click="isGuide = !isGuide" id="pullTab" rel="tooltip" :title="$t('operation.cjdl')">
              <!-- 鼠标移入的显示 -->
              <div class="hoverTit">{{ $t("operation.dllist") }}</div>

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

            <div :data-original-title="$t('operation.mnmx')" id="gui-modes-inside" rel="tooltip">
              <!-- 鼠标移入的显示 -->
              <div class="hoverTit">{{ $t("operation.qjmy") }}</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="$t('operation.mnmy')" :data-original-title="$t('operation.mnmx')" id="gui-modes-dollhouse" rel="tooltip">
              <!-- 鼠标移入的显示 -->
              <div class="hoverTit">{{ $t("operation.swsj") }}</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="$t('operation.fst')" id="gui-modes-floorplan" rel="tooltip" :title="$t('operation.fst')">
              <!-- 鼠标移入的显示 -->
              <div class="hoverTit">{{ $t("operation.pmt") }}</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 v-show="!hideTools" id="myHotList" @click="openInd = 1">
              <!-- 鼠标移入的显示 -->
              <div class="hoverTit">{{ $t("operation.rdlist") }}</div>
              <img src="../../assets/images/icon/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="$t('operation.xcwk')" id="gui-remove-face" rel="tooltip" :title="$t('operation.xcwk')" style="display: none; float: left">
              <img class="icon icon-inside" :src="require('@/assets/images/face.jpg')" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-show="!hideTools" 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 class="fgx">
          <img style="display: block; width: 9px; width: 9px; position: relative; left: -8px; top: 10px" src="../../assets/images/icon/border.png" alt="" />
        </div>
        <!-- 音乐 -->
        <div id="volume" class="ui-icon bgandshare wide">
          <!-- 鼠标移入的显示 -->
          <div class="hoverTit">
            {{ musicState ? $t("operation.gbyy") : $t("operation.dkyy") }}
          </div>
          <div>
            <img id="openMusic" style="display: block" @click="switchBGM(true)" src="../../assets/images/icon/musicAc.png" alt="" />
            <img id="closeMusic" style="display: none" @click="switchBGM(false)" src="../../assets/images/icon/music.png" alt="" />
          </div>
        </div>
        <!-- 分享 -->
        <!-- 鼠标移入的显示 -->
        <!-- <div class="toHomeBox" @click="openInd = 2">
          <div class="hoverTit">分享</div>
          <img src="../../assets/img/share.png" alt="" />
        </div> -->
        <!-- <div
          class="toHomeBox"
          :class="{ toHomeBoxMc: isMyMobile }"
          @click="
            read = true;
            languageShow = false;
          "
        >
          <div v-if="!isMyMobile">
            <div class="yueduliang" v-show="read">
              <div
                v-for="item in readList"
                :key="item"
                :class="{ active: item == activeRead }"
                @click="readClick(item)"
              >
                {{ item }}
              </div>
              <div class="read">{{ readVlaue }}</div>
              <img
                @click.stop="read = false"
                src="../../assets/images/icon/close.png"
                alt=""
              />
              <span class="triangle-down"></span>
            </div>
          </div>
          <div v-else>
            <div class="yueduliangMC" v-show="read">
              <div class="typelist">
                <div
                  v-for="item in readList"
                  :key="item"
                  :class="{ active: item == activeRead }"
                  @click="readClick(item)"
                >
                  {{ item }}
                </div>
              </div>
              <div class="read">{{ readVlaue }}</div>
              <img
                @click.stop="read = false"
                src="../../assets/images/icon/close.png"
                alt=""
              />
              <span class="triangle-down"></span>
            </div>
          </div>
          <div class="hoverTit">{{ $t("operation.ydl") }}</div>
          <img src="../../assets/images/icon/red.png" alt="" />
        </div> -->

        <div class="toHomeBox" @click="handleFullscreen">
          <div class="hoverTit">{{ $t("operation.qp") }}</div>
          <img :src="require(`../../assets/images/icon/full${isFull ? 'x' : ''}.png`)" alt="" />
        </div>

        <!-- <div class="toHomeBox">
          <div class="ppList" v-show="languageShow">
            <div
              v-for="item in languageList"
              :key="item.key"
              @click="hanldlanguage(item)"
              :style="{ color: item.key == language ? '#0F7562' : '#00221C' }"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="hoverTit">{{ $t("operation.yy") }}</div>
          <img
            @click="
              languageShow = !languageShow;
              read = false;
            "
            src="../../assets/images/icon/yuyan.png"
            alt=""
          />
        </div> -->
      </div>
    </div>

    <div class="openBox" :class="{ openBoxAc: openInd }">
      <HotList v-if="openInd === 1" @close="openInd = 0" />
    </div>
    <!-- 手动触发导览 -->
  </div>
</template>

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

export default {
  components: { HotList },
  props: {
    hideTools: Boolean,
    loadingstate: Boolean,
  },
  data() {
    return {
      m: this.$route.query.m,
      id: this.$route.query.id,
      isGuide: true,
      fullscreen: false,
      musicState: false,
      isMyMobile: false,
      loading: true,

      // vr---热点列表---分享
      openInd: 0,
      read: false,
      languageShow: false,
      readVlaue: 19990,
      activeRead: "全部",
      language: localStorage.getItem("locale") || "zh-hk",
      languageList: [
        // {
        //   name: "简体中文",
        //   key: "zh-cn",
        // },
        {
          name: "繁體中文",
          key: "zh-hk",
        },
        {
          name: "English",
          key: "en",
        },
        {
          name: "Português",
          key: "pe",
        },
      ],
      readList: [],
      activeRead: this.$t("operation.readList0"),
      isFull: false,
    };
  },
  watch: {},
  computed: {},
  mounted() {
    window.addEventListener("resize", this.checkIfMobile);
    this.$nextTick(() => {
      window.addEventListener("loadfinish", () => {
        this.loading = false;
        // document.title = "珠海高新区中共党史学习教育园地线上展厅";
      });
    });
    // console.log("$route.query", this.$route.query);
    // this.$http({
    //   method: "post",
    //   data: {
    //     num: this.m,
    //     type: "visit",
    //   },
    //   url: `https://sit-visitcommon.4dage.com/api/visit/trend/saveType`,
    // }).then((res) => {
    //   this.getReadData();
    // });
    // this.updateReadList();
    this.$root.$on("change-language", this.hanldlanguage);
  },
  methods: {
    handleFullscreen() {
      if (!this.fullscreen) {
        this.fullscreenFn();
        this.isFull = true;
      } else {
        this.exitFullscreen();
        this.isFull = false;
      }
    },
    // updateReadList() {
    //   this.readList = [
    //     this.$t("operation.readList0"),
    //     this.$t("operation.readList1"),
    //     this.$t("operation.readList2"),
    //     this.$t("operation.readList3"),
    //   ];
    //   console.log("this.readList", this.readList);
    //   // 保持当前选中的activeRead与语言一致
    //   if (this.activeRead) {
    //     const translated = this.readList.find(
    //       (item) =>
    //         this.$t(item) === this.activeRead || item === this.activeRead
    //     );
    //     this.activeRead = translated || this.readList[0];
    //   }
    // },
    fullscreenFn() {
      let element = document.body;
      this.fullscreen = true;
      // 全屏
      if (element.requestFullscreen) element.requestFullscreen();
      else if (element.mozRequestFullScreen) element.mozRequestFullScreen();
      else if (element.webkitRequestFullscreen) element.webkitRequestFullscreen();
      else if (element.msRequestFullscreen) element.msRequestFullscreen();
    },
    exitFullscreen() {
      // 退出全屏
      if (document.exitFullscreen) document.exitFullscreen();
      else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
      else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
      this.fullscreen = false;
    },
    checkIfMobile() {
      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
      this.isMyMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
    },
    switchBGM(flag) {
      this.musicState = flag;
      if (flag) {
        window.manage.switchBgmState(true);
        document.querySelector("#openMusic").style.display = "none";
        document.querySelector("#closeMusic").style.display = "block";

        // 手动停止自动导览
        window.player.director.stopTour();
      } else {
        window.manage.switchBgmState(false);
        document.querySelector("#openMusic").style.display = "block";
        document.querySelector("#closeMusic").style.display = "none";
      }
    },
    // 点击vr
    openVR() {
      window.open("https://www.720yun.com/t/acvkiwdegqb?scene_id=34882556");
    },
    // 点击回到首页
    toHomeFu() {
      this.switchBGM(false);
      this.$emit("toHome");
    },
    hanldlanguage(item) {
      this.$i18n.locale = item.key;
      this.language = item.key;
      localStorage.setItem("locale", item.key);
      // this.updateReadList();
      this.$nextTick(() => {
        document.title = item.key === "zh-hk" ? "澳門基本法紀念館" : item.key === "en" ? "Macao Basic Law Memorial Museum" : item.key === "pe" ? "Museu Memorial da Lei Básica de Macau" : "澳門基本法紀念館";
        hotGroup?.children.forEach((item) => {
          item.setTitleElem();
        });
      });
      this.languageShow = false;
    },
    readClick(item) {
      console.log("item", item);
      this.activeRead = item;
      this.getReadData();
    },
    async getReadData() {
      let obj = {
        [this.$t("operation.readList0")]: "",
        [this.$t("operation.readList1")]: "year",
        [this.$t("operation.readList2")]: "month",
        [this.$t("operation.readList3")]: "day",
      };
      let res = await this.$http({
        method: "get",
        params: {
          num: this.m,
          type: obj[this.activeRead],
        },
        url: `https://sit-visitcommon.4dage.com//api/visit/trend/period/${this.m}`,
      });
      console.log("getReadData", res);
      this.readVlaue = (res.data && res.data.data && res.data.data.pcsVisit) || 0;
    },
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.checkIfMobile);
  },
};
</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: 1;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -26px;
  width: 80px;
  height: 37px;
  line-height: 30px;
  text-align: center;
  // background: url("../../assets/img/hoverTit.png");
  // background-size: 100% 100%;
  font-family: Source Han Serif CN;
  font-weight: 500;
  font-size: 13px;
  text-shadow: 0 0 black;
  color: #0f7562;
}
#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: 58px;
@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;
}

#gui-fullscreen img {
  width: 44px;
}
#volume {
  width: 58px;
}

#gui-fullscreen-exit img {
  width: 44px !important;
}
.bgandshare {
  background: none !important;
  // margin-right: 20px!important;
  > div {
    width: 100%;
    cursor: pointer;
    img {
      width: 100%;
    }
  }
}
.toHomeBoxMc {
  height: auto;
}
.toHomeBox {
  margin-right: 20px;
  cursor: pointer;
  position: relative;
  width: 58px;
  height: 58px;
  .yueduliangMC {
    display: flex;
    align-items: center;
    position: absolute;
    top: -50px;
    background: #fff;
    border-radius: 10px;
    height: auto;
    color: #0f7562;
    padding: 10px;
    top: -5px;
    left: -120px;
    .typelist {
      width: 55px;
      padding-right: 10px;
      margin-right: 10px;
      border-right: 1px solid #d2c9c1;
    }
    .typelist {
      .active {
        background: #0f7562;
        border-radius: 25px;
        color: #fff;
      }
      div {
        height: 20px;
        line-height: 20px;
        font-family: Source Han Serif CN;
        font-weight: 600;
        font-size: 14px;
        color: #00221c;
        opacity: 0.85;
        text-align: center;
        border-bottom: 1px solid #d2c9c1;
        &:last-child {
          border: none;
        }
      }
    }
    img {
      width: 20px;
      right: 3px;
      top: -7px;
      position: absolute;
    }
  }
  .yueduliang {
    display: flex;
    align-items: center;
    position: absolute;
    top: -50px;
    background: #fff;
    border-radius: 25px;
    height: 27px;
    color: #0f7562;
    padding: 0 10px;
    top: -35px;
    left: -96px;
    .triangle-down {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 10px solid #fff;
      position: absolute;
      top: 24px;
      left: 120px;
    }
    div {
      padding: 0 7px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      width: max-content;
    }
    .active {
      background: #0f7562;
      border-radius: 25px;
      color: #fff;
    }
    img {
      top: -5px;
      width: 14px;
    }
  }
  img {
    width: 58px;
    padding-top: 10px;
    position: relative;
    top: -10px;
  }
  .ppList {
    padding: 8px 10px;
    width: 99px;
    position: absolute;
    top: -112px;
    left: -18px;
    background: #fff;
    opacity: 0.85;
    border-radius: 8px;
    // display: none;
    div {
      height: 30px;
      line-height: 30px;
      font-family: Source Han Serif CN;
      font-weight: 600;
      font-size: 14px;
      color: #00221c;
      opacity: 0.85;
      text-align: center;
      border-bottom: 1px solid #d2c9c1;
      &:last-child {
        border: none;
      }
    }
  }
  &:hover {
    .hoverTit {
      opacity: 1;
    }
    .ppList {
      // display: block;
    }
  }
}
#gui {
  .open {
    bottom: calc(118px + 20px);
    // .pinBottom{
    //   left: 85px;
    // }
  }
}
.pinBottom-container {
  background-image: url("../../assets/img/buttom.png");
  background-size: 100% 100%;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  height: 100px;
  width: 920px;
  left: calc(50% - 460px);
  .pinBottom.left {
    left: 100px;
  }
  .pinBottom.right {
    right: 25px;
  }
  #myHotList {
    position: relative;
    float: left;
    width: 80px;
    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) {
  .hoverTit {
    opacity: 0 !important;
  }
  .yueduliang {
    left: -196px;
  }
  .viewContainer {
    & > div {
      img {
        // width: 33px !important;
        // height: 33px !important;
      }
    }
  }
  .pinBottom-container #myHotList {
    width: 50px;
    margin-bottom: 15px;
  }
  .pinBottom-container {
    background: none;
    .pinBottom.right.hideTarget {
      position: fixed;
      top: 200px;
      right: 10px;
      .rightViewContainer {
        flex-direction: column;
        & > div,
        #volume {
          // width: 50px !important;
          text-align: right;
          margin-right: 0;
          margin-bottom: 10px;
          display: none;
          & > .ppList {
            // display: flex;
            // justify-content: flex-end;
            left: -105px;
            top: -50px;
          }
          img {
            // width: 33px;
            // height: 33px;
          }
        }
      }
    }
  }
}
#myClickBox {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 999;
  left: 50%;
  bottom: 38px;
  width: 146px;
  height: 146px;
  transform: translateX(-50%);
  background: url("../../assets/img/m_btn.png") no-repeat center / contain;
  transition: 0.2s bottom linear;

  > div {
    flex: 1;
  }
}
.pinBottom.open #myClickBox {
  bottom: calc(118px + 20px);
}
</style>