|
|
@@ -1,640 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="pinBottom-container" @touchstart.stop @keydown.stop>
|
|
|
- <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')"
|
|
|
- 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
|
|
|
- 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')"
|
|
|
- />
|
|
|
- <img
|
|
|
- class="icon icon-inside active"
|
|
|
- :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 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>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 右侧菜单 -->
|
|
|
- <div class="rightMenu" :class="{ hideMenu: smBtn }">
|
|
|
- <div class="smBtn" @click="smBtn = !smBtn">{{ smBtn ? "◀" : "▶" }}</div>
|
|
|
- <!-- 左侧按钮 -->
|
|
|
- <img class="logo" src="@/assets/img/logo.png" alt="" />
|
|
|
- <div class="rowBox">
|
|
|
- <div
|
|
|
- class="row"
|
|
|
- @click="meanInd = item.id"
|
|
|
- v-for="item in rightList"
|
|
|
- :key="item.id"
|
|
|
- >
|
|
|
- <img
|
|
|
- :src="
|
|
|
- require(`@/assets/img/${item.img}${
|
|
|
- meanInd === item.id ? 'Ac' : ''
|
|
|
- }.png`)
|
|
|
- "
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <p :class="{ acTxt: meanInd === item.id }">{{ item.name }}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="bottBtn">
|
|
|
- <!-- 分享 -->
|
|
|
- <div class="share" @click="meanInd = -1">
|
|
|
- <img
|
|
|
- title="分享"
|
|
|
- :src="
|
|
|
- require(`@/assets/img/share${meanInd === -1 ? 'Ac' : ''}.png`)
|
|
|
- "
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- <!-- 音乐 -->
|
|
|
- <div id="volume" class="ui-icon bgandshare wide">
|
|
|
- <div>
|
|
|
- <img
|
|
|
- id="openMusic"
|
|
|
- style="display: block"
|
|
|
- @click="switchBGM(true)"
|
|
|
- src="../../assets/img/musicAc.png"
|
|
|
- alt=""
|
|
|
- title="打开音乐"
|
|
|
- />
|
|
|
- <img
|
|
|
- id="closeMusic"
|
|
|
- style="display: none"
|
|
|
- @click="switchBGM(false)"
|
|
|
- src="../../assets/img/music.png"
|
|
|
- alt=""
|
|
|
- title="关闭音乐"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 全屏 -->
|
|
|
- <div
|
|
|
- id="gui-fullscreen"
|
|
|
- class="ui-icon wide"
|
|
|
- data-placement="top"
|
|
|
- rel="tooltip"
|
|
|
- title="全屏"
|
|
|
- >
|
|
|
- <a>
|
|
|
- <img title="全屏" :src="require('@/assets/img/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/img/fullAc.png')"
|
|
|
- style="width: 50px"
|
|
|
- />
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 分享组件 -->
|
|
|
- <Share v-if="meanInd === -1" @close="meanInd = null" :smBtn="smBtn" />
|
|
|
- <!-- 地图导航组件 -->
|
|
|
- <MapNav v-else-if="meanInd === 1" @close="meanInd = null" :smBtn="smBtn" />
|
|
|
- <!-- 精品文物组件 -->
|
|
|
- <Antique v-else-if="meanInd === 2" @close="meanInd = null" :smBtn="smBtn" />
|
|
|
- <!-- 热点列表组件 -->
|
|
|
- <Hotspot v-else-if="meanInd === 3" @close="meanInd = null" :smBtn="smBtn" />
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-//引入组件
|
|
|
-import Share from "./compomemt/share.vue";
|
|
|
-import MapNav from "./compomemt/mapNav";
|
|
|
-import Antique from "./compomemt/antique.vue";
|
|
|
-import Hotspot from "./compomemt/hotspot";
|
|
|
-export default {
|
|
|
- components: { Share, MapNav, Antique, Hotspot },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isGuide: true,
|
|
|
- // 右侧菜单数据
|
|
|
- smBtn: false,
|
|
|
- meanInd: null,
|
|
|
- rightList: [
|
|
|
- { id: 1, name: "展厅列表", img: "navigation" },
|
|
|
- { id: 2, name: "精品文物", img: "antique" },
|
|
|
- { id: 3, name: "热点列表", img: "hotspot" },
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- watch: {
|
|
|
- smBtn(val) {
|
|
|
- // 收起菜单和展开，传递给父组件
|
|
|
- this.$emit("hndeMenu", val);
|
|
|
- this.$nextTick(() => {
|
|
|
- setTimeout(() => {
|
|
|
- let dom = document.querySelector("#drawer");
|
|
|
- if (val) dom.style.width = "100%";
|
|
|
- else dom.style.width = "";
|
|
|
- }, 1);
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
- 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>
|
|
|
-#hotList {
|
|
|
- display: none !important;
|
|
|
-}
|
|
|
-::-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: #fff6d2;
|
|
|
-}
|
|
|
-#play:hover {
|
|
|
- .hoverTit {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-}
|
|
|
-#pause:hover {
|
|
|
- .hoverTit {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-}
|
|
|
-#gui-modes-map > div:hover {
|
|
|
- .hoverTit {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-}
|
|
|
-// -------------
|
|
|
-.rightMenu {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- width: 200px;
|
|
|
- transition: all 0.3s;
|
|
|
- z-index: 999;
|
|
|
- height: 100%;
|
|
|
- background-color: #774926;
|
|
|
- text-align: center;
|
|
|
- ::before {
|
|
|
- opacity: 0.06;
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: -10;
|
|
|
- background-image: url("../../assets/img/tabBac.png");
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- .smBtn {
|
|
|
- text-align: center;
|
|
|
- line-height: 60px;
|
|
|
- font-size: 12px;
|
|
|
- cursor: pointer;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: -18px;
|
|
|
- width: 18px;
|
|
|
- height: 60px;
|
|
|
- background-color: #774926;
|
|
|
- border-radius: 5px 0 0 5px;
|
|
|
- }
|
|
|
- .logo {
|
|
|
- margin: 20px 0 30px;
|
|
|
- width: 166px;
|
|
|
- }
|
|
|
- .rowBox {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- height: calc(100vh - 180px);
|
|
|
- .row {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- cursor: pointer;
|
|
|
- width: 100%;
|
|
|
- height: 30%;
|
|
|
- margin-bottom: 25px;
|
|
|
- & > img {
|
|
|
- max-width: 140px;
|
|
|
- max-height: 140px;
|
|
|
- object-fit: cover;
|
|
|
- height: calc(100% - 30px);
|
|
|
- }
|
|
|
- & > p {
|
|
|
- margin-top: 15px;
|
|
|
- font-size: 18px;
|
|
|
- color: #fff6d2;
|
|
|
- }
|
|
|
- .acTxt {
|
|
|
- color: #cc946d;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .bottBtn {
|
|
|
- padding: 0 10px;
|
|
|
- overflow: hidden;
|
|
|
- position: absolute;
|
|
|
- bottom: 15px;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- .share {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.hideMenu {
|
|
|
- transform: translateX(200px);
|
|
|
-}
|
|
|
-
|
|
|
-// 右侧菜单栏
|
|
|
-@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: 40px;
|
|
|
-}
|
|
|
-#volume {
|
|
|
- width: 40px;
|
|
|
-}
|
|
|
-
|
|
|
-#gui-fullscreen-exit img {
|
|
|
- width: 40px !important;
|
|
|
-}
|
|
|
-.bgandshare {
|
|
|
- background: none !important;
|
|
|
- // margin-right: 20px!important;
|
|
|
- > div {
|
|
|
- width: 100%;
|
|
|
- cursor: pointer;
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-@media only screen and (max-width: 487px) {
|
|
|
- #myMoMu {
|
|
|
- display: block !important;
|
|
|
- }
|
|
|
- #myMoMu img {
|
|
|
- margin-left: 12px;
|
|
|
- }
|
|
|
- .viewContainer {
|
|
|
- background-color: rgba(0, 0, 0, 0.5);
|
|
|
- padding: 15px 0 10px;
|
|
|
- border-radius: 50px;
|
|
|
- }
|
|
|
-
|
|
|
- @wh: 22px;
|
|
|
- @margin: 10px;
|
|
|
- #play,
|
|
|
- #pause {
|
|
|
- margin-bottom: @margin;
|
|
|
- img {
|
|
|
- width: @wh;
|
|
|
- height: @wh;
|
|
|
- }
|
|
|
- }
|
|
|
- #gui-modes-map {
|
|
|
- > div {
|
|
|
- margin-bottom: @margin;
|
|
|
- > img {
|
|
|
- width: @wh;
|
|
|
- height: @wh;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .active {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- .active {
|
|
|
- > img {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .active {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .bgandshare {
|
|
|
- display: none !important;
|
|
|
- display: flex;
|
|
|
- position: fixed;
|
|
|
- left: 50px;
|
|
|
- bottom: 25px;
|
|
|
- flex-direction: column;
|
|
|
- margin-right: 10px !important;
|
|
|
- > div {
|
|
|
- width: @wh!important;
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- #volume {
|
|
|
- background-color: transparent !important;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
任一存
