|
@@ -1,12 +1,12 @@
|
|
|
<template>
|
|
|
<div class="panel" :class="{show}">
|
|
|
- <span class="icon" @click="playing ? pause() : play()">
|
|
|
+ <span class="icon" @click="playing ? pause() : play()" v-if="existsGuide">
|
|
|
<Icon type="play" />
|
|
|
</span>
|
|
|
<span class="icon" @click="showScenes = !showScenes">
|
|
|
<Icon type="scene" />
|
|
|
</span>
|
|
|
- <span class="ctrl" @click="show = !show">
|
|
|
+ <span class="ctrl" :class="{ show }" @click="show = !show">
|
|
|
<Icon type="arrows@2x" />
|
|
|
</span>
|
|
|
</div>
|
|
@@ -27,18 +27,23 @@ import { getApp } from '@/app'
|
|
|
const show = ref(false)
|
|
|
const app = getApp()
|
|
|
const playing = ref(false)
|
|
|
+const existsGuide = ref(false)
|
|
|
const showScenes = ref(false)
|
|
|
|
|
|
app.use('TourPlayer').then(player => {
|
|
|
+ console.log('===>', player)
|
|
|
player.on('play', ({ partId, frameId }) => (playing.value = true))
|
|
|
player.on('pause', ({ partId, frameId }) => (playing.value = false))
|
|
|
player.on('end', () => {
|
|
|
playing.value = false
|
|
|
- // 兼容最后一个画面没有进度的问题
|
|
|
- this.progressPart = 100
|
|
|
})
|
|
|
})
|
|
|
|
|
|
+// 需要双向绑定时,重新设置数据
|
|
|
+app.TourManager.on('loaded', tours => {
|
|
|
+ existsGuide.value = !!tours.length
|
|
|
+})
|
|
|
+
|
|
|
const play = async () => {
|
|
|
const player = await app.TourManager.player
|
|
|
player.play()
|
|
@@ -61,17 +66,21 @@ const pause = async () => {
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
border-radius: 0px 24px 24px 0px;
|
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
- padding-right: 20px;
|
|
|
+ padding-right: 30px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-evenly;
|
|
|
- width: 110px;
|
|
|
- transform: translateX(-80px);
|
|
|
+ // width: 110px;
|
|
|
+ transform: translateX(calc(-100% + 30px));
|
|
|
|
|
|
|
|
|
&.show {
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
+
|
|
|
+ > .icon {
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.icon {
|
|
@@ -90,5 +99,9 @@ const pause = async () => {
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
font-size: 12px;
|
|
|
+
|
|
|
+ &.show {
|
|
|
+ transform: translateY(-50%) rotateZ(180deg);
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|