|
|
@@ -0,0 +1,561 @@
|
|
|
+<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="播放"
|
|
|
+ />
|
|
|
+ </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 v-show="!hideTools" 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 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 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" @click="openInd = 2">
|
|
|
+ <!-- 鼠标移入的显示 -->
|
|
|
+ <div class="hoverTit">分享</div>
|
|
|
+ <img src="../../assets/img/share.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="openBox" :class="{ openBoxAc: openInd }">
|
|
|
+ <HotList v-if="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 },
|
|
|
+ props: {
|
|
|
+ hideTools: Boolean
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isGuide: true,
|
|
|
+ musicState: false,
|
|
|
+ // vr---热点列表---分享
|
|
|
+ openInd: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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";
|
|
|
+
|
|
|
+ // 手动停止自动导览
|
|
|
+ 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");
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</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;
|
|
|
+}
|
|
|
+#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: 44px;
|
|
|
+@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: 44px;
|
|
|
+}
|
|
|
+
|
|
|
+#gui-fullscreen-exit img {
|
|
|
+ width: 44px !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: 44px;
|
|
|
+ img {
|
|
|
+ width: 44px;
|
|
|
+ }
|
|
|
+ &: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) {
|
|
|
+ .hoverTit {
|
|
|
+ opacity: 0 !important;
|
|
|
+ }
|
|
|
+ .viewContainer {
|
|
|
+ & > 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;
|
|
|
+ & > div,
|
|
|
+ #volume {
|
|
|
+ width: 50px !important;
|
|
|
+ text-align: right;
|
|
|
+ margin-right: 0;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ & > div {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ 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: .2s bottom linear;
|
|
|
+
|
|
|
+ > div {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+.pinBottom.open #myClickBox {
|
|
|
+ bottom: calc(118px + 20px);
|
|
|
+}
|
|
|
+</style>
|
