|
|
@@ -178,24 +178,28 @@
|
|
|
|
|
|
<!-- 沉浸模式-工具栏 -->
|
|
|
<transition name="fade" enter-active-class="animate__animated animate__fadeInUp animate__faster" leave-active-class="animate__animated animate__fadeOutDown animate__faster">
|
|
|
- <div v-show="openType === 'immersive'" class="left-btn">
|
|
|
- <div class="button-item" :class="getActive(i.type)" v-for="(i, index) in immersiveButtons" @click.stop="hanlderButtons(i, i.type)">
|
|
|
+ <div v-show="kanzhanBtnVisible" class="left-btn" :class="{['show-guide']: showGuide && !isCollapse}">
|
|
|
+ <div class="button-item"
|
|
|
+ :class="getActive(i.type)"
|
|
|
+ v-for="(i, index) in immersiveButtons"
|
|
|
+ @click="exitImmersive"
|
|
|
+ >
|
|
|
<img class="normal" :src="i.normalIcon" alt="" />
|
|
|
<img class="active" :src="i.activeIcon" alt="" />
|
|
|
<div class="tip-box">{{ i.name }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</transition>
|
|
|
- <!-- 沉浸式看展按钮 -->
|
|
|
|
|
|
- <div class="kanzhan-btns">
|
|
|
+ <!-- 沉浸式看展按钮 -->
|
|
|
+ <div class="kanzhan-btns" :class="{['show-guide']: showGuide && !isCollapse}">
|
|
|
<transition name="preScene">
|
|
|
- <div v-show="openType == 'immersive'" @click="goScene('prev')" class="button-item">
|
|
|
+ <div v-show="kanzhanBtnVisible" @click="goScene('prev')" class="button-item">
|
|
|
<img class="normal" :src="require('@/assets/image/icon/new-icon/icon_pre.svg')" alt="" />
|
|
|
</div>
|
|
|
</transition>
|
|
|
<transition name="activeScene">
|
|
|
- <div v-if="openType == 'immersive'" class="">
|
|
|
+ <div v-if="kanzhanBtnVisible" class="">
|
|
|
<div
|
|
|
v-for="(i, index) in playButtons"
|
|
|
:key="index"
|
|
|
@@ -210,7 +214,7 @@
|
|
|
</div>
|
|
|
</transition>
|
|
|
<transition name="nextScene">
|
|
|
- <div v-show="openType == 'immersive'" class="button-item" @click="goScene('next')">
|
|
|
+ <div v-show="kanzhanBtnVisible" class="button-item" @click="goScene('next')">
|
|
|
<img class="normal" :src="require('@/assets/image/icon/new-icon/icon_next.svg')" alt="" />
|
|
|
</div>
|
|
|
</transition>
|
|
|
@@ -218,7 +222,7 @@
|
|
|
</template>
|
|
|
|
|
|
<template v-else>
|
|
|
- <div class="mobile-top-button" v-if="!showGuide">
|
|
|
+ <div class="mobile-top-button">
|
|
|
<div
|
|
|
class="button-item"
|
|
|
:class="getActive(i.type)"
|
|
|
@@ -230,14 +234,14 @@
|
|
|
<img class="active" :src="i.activeIcon" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="mobile-bottom-button" :class="{ center: openType == 'immersive' }" v-if="!showGuide">
|
|
|
+ <div class="mobile-bottom-button" :class="{ center: openType == 'immersive', ['show-guide']: showGuide && !isCollapse }">
|
|
|
<div
|
|
|
class="button-item"
|
|
|
- :class="getBottomActive(i.type)"
|
|
|
+ :class="`${getBottomActive(i.type)} ${i.action === 'play' && guideIsPlay && 'active'}`"
|
|
|
:style="`display:${i.type == 'hots' && openType == 'immersive' ? 'none' : 'block'};`"
|
|
|
@click.stop="hanlderButtons(i, i.type)"
|
|
|
v-for="(i, index) in mobileBottomBtns"
|
|
|
- v-if="(i.type == 'controls' && openType == 'immersive') || i.type == 'hots' || (openType != 'immersive' && i.type != 'controls')"
|
|
|
+ v-if="kanzhanBtnVisible ? i.type == 'controls' : i.type !== 'controls'"
|
|
|
v-show="i.type == 'model' || i.type == 'music' || mode == 'panorama'"
|
|
|
>
|
|
|
<img class="normal" :src="i.normalIcon" alt="" />
|
|
|
@@ -247,7 +251,9 @@
|
|
|
</template>
|
|
|
<!-- 音乐按钮 -->
|
|
|
<transition name="fade" enter-active-class="animate__animated animate__fadeInUp animate__faster" leave-active-class="animate__animated animate__fadeOutDown animate__faster">
|
|
|
- <div v-show="!showGuide && !guideIsPlay" class="right-btn" :class="{ mobile: isMobile }">
|
|
|
+ <div class="right-btn"
|
|
|
+ :class="{ mobile: isMobile, ['show-guide']: showGuide && !isCollapse}"
|
|
|
+ >
|
|
|
<div id="bgm" class="button-item" :class="getActive(i.type)" v-for="(i, index) in rightButtons">
|
|
|
<img class="normal" id="openMusic" :src="i.normalIcon" alt="" @click="switchBGM(false)" />
|
|
|
<img class="active" id="closeMusic" :src="i.activeIcon" alt="" @click="switchBGM(true)" />
|
|
|
@@ -299,8 +305,8 @@ export default {
|
|
|
isFullscreen: false,
|
|
|
playButtons: [
|
|
|
{
|
|
|
- normalIcon: require("@/assets/image/icon/new-icon/icon_play.svg"),
|
|
|
- activeIcon: require("@/assets/image/icon/new-icon/icon_play.svg"),
|
|
|
+ normalIcon: require("@/assets/image/icon_play.png"),
|
|
|
+ activeIcon: require("@/assets/image/icon_play.png"),
|
|
|
name: "自动导览",
|
|
|
action: "play",
|
|
|
type: "guide",
|
|
|
@@ -409,6 +415,11 @@ export default {
|
|
|
activeIcon: require("@/assets/image/icon/new-icon/icon_mod_active.svg"),
|
|
|
name: "沉浸看展",
|
|
|
type: "immersive",
|
|
|
+ handler: () => {
|
|
|
+ if (!this.openType) {
|
|
|
+ this.openType = 'immersive'
|
|
|
+ } else this.exitImmersive()
|
|
|
+ }
|
|
|
},
|
|
|
],
|
|
|
mobileBottomBtns: [
|
|
|
@@ -437,8 +448,8 @@ export default {
|
|
|
type: "controls",
|
|
|
},
|
|
|
{
|
|
|
- normalIcon: require("@/assets/image/icon/new-icon/icon_play.svg"),
|
|
|
- activeIcon: require("@/assets/image/icon/new-icon/icon_play.svg"),
|
|
|
+ normalIcon: require("@/assets/image/icon_play.png"),
|
|
|
+ activeIcon: require("@/assets/image/icon/new-icon/icon_pause_n.svg"),
|
|
|
name: "自动导览",
|
|
|
action: "play",
|
|
|
type: "controls",
|
|
|
@@ -493,6 +504,7 @@ export default {
|
|
|
isCollapse: "isCollapse",
|
|
|
guidePlayIndex: "guidePlayIndex",
|
|
|
}),
|
|
|
+ kanzhanBtnVisible: (v) => v.openType === 'immersive' || v.showGuide
|
|
|
},
|
|
|
mounted() {
|
|
|
let events = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"];
|
|
|
@@ -567,13 +579,21 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
goScene(type) {
|
|
|
- player.guider2.go(type);
|
|
|
+ window.tourPlayCtl.go(type === 'prev' ? -1 : 1)
|
|
|
},
|
|
|
toggleMiniMap() {
|
|
|
this.miniMapStatus = !this.miniMapStatus;
|
|
|
},
|
|
|
|
|
|
+ exitImmersive() {
|
|
|
+ this.openType = null
|
|
|
+ this.setData({ showGuide: false, guideIsPlay: false });
|
|
|
+ },
|
|
|
hanlderButtons(item, type) {
|
|
|
+ if (item.handler) {
|
|
|
+ item.handler()
|
|
|
+ return
|
|
|
+ }
|
|
|
if (!["route", "fullScreen", "controls"].includes(type)) {
|
|
|
if (this.openType != type) {
|
|
|
this.openType = type;
|
|
|
@@ -590,7 +610,7 @@ export default {
|
|
|
this.setData({ guideIsPlay: false });
|
|
|
return;
|
|
|
}
|
|
|
- this.setData({ showGuide: true });
|
|
|
+ this.setData({ showGuide: true, guideIsPlay: true });
|
|
|
if (!this.tourList.length) {
|
|
|
this.tourList = window.player ? player?.model?.heroLocations : [];
|
|
|
}
|
|
|
@@ -626,7 +646,10 @@ export default {
|
|
|
break;
|
|
|
case "controls":
|
|
|
if (item.name == '自动导览') {
|
|
|
- this.hanlderButtons(this.playButtons[0], this.playButtons[0].type);
|
|
|
+ this.setData({ showGuide: true, guideIsPlay: !this.guideIsPlay });
|
|
|
+ if (!this.tourList.length) {
|
|
|
+ this.tourList = window.player ? player?.model?.heroLocations : [];
|
|
|
+ }
|
|
|
} else if (item.name == "前进") {
|
|
|
window.tourPlayCtl.go(1);
|
|
|
} else {
|
|
|
@@ -663,7 +686,7 @@ export default {
|
|
|
return "active";
|
|
|
}
|
|
|
case "immersive":
|
|
|
- if (this.openType == "immersive") {
|
|
|
+ if (this.openType == "immersive" || this.kanzhanBtnVisible) {
|
|
|
return "active";
|
|
|
}
|
|
|
case "fullScreen":
|
|
|
@@ -941,7 +964,7 @@ export default {
|
|
|
height: 12px;
|
|
|
background: rgba(55, 54, 53, 0.6);
|
|
|
border-radius: 5px 5px 5px 5px;
|
|
|
- display: flex;
|
|
|
+ display: none;
|
|
|
align-items: center;
|
|
|
justify-content: flex-start;
|
|
|
padding: 0 20px;
|
|
|
@@ -1042,11 +1065,15 @@ export default {
|
|
|
position: fixed;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
- bottom: 20px;
|
|
|
+ bottom: 30px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-direction: row;
|
|
|
gap: 0.6667rem;
|
|
|
+ transition: bottom linear .2s;
|
|
|
+ &.show-guide {
|
|
|
+ bottom: 145px !important;
|
|
|
+ }
|
|
|
&.center {
|
|
|
justify-content: center;
|
|
|
}
|
|
|
@@ -1143,6 +1170,7 @@ export default {
|
|
|
position: absolute;
|
|
|
right: 44px;
|
|
|
bottom: 40px;
|
|
|
+ transition: bottom 0.3s;
|
|
|
&.hide {
|
|
|
display: none;
|
|
|
}
|
|
|
@@ -1220,14 +1248,18 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.show-guide:not(.mobile) {
|
|
|
+ bottom: 192px;
|
|
|
+}
|
|
|
.kanzhan-btns {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: flex-start;
|
|
|
position: absolute;
|
|
|
- left: 50%;
|
|
|
+ left: 23%;
|
|
|
bottom: 40px;
|
|
|
- transform: translateX(-50%);
|
|
|
+ transition: bottom linear 0.2s;
|
|
|
+
|
|
|
.button-item {
|
|
|
width: @iconW;
|
|
|
height: @iconW;
|
|
|
@@ -1238,7 +1270,7 @@ export default {
|
|
|
cursor: pointer;
|
|
|
position: relative;
|
|
|
|
|
|
- &:last-child {
|
|
|
+ &:last-child:not(.button-item2) {
|
|
|
margin: 0;
|
|
|
}
|
|
|
}
|
chenlei
