|
@@ -32,6 +32,14 @@
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="progress-box">
|
|
<div class="progress-box">
|
|
|
|
|
+ <div class="beisuTab" :class="{ beisuTabHide: !beisuTabShow }">
|
|
|
|
|
+ <div class="item" :class="{ active: currentBeisu == 2.0 }" @click="setBeisu(2.0)">2.0x</div>
|
|
|
|
|
+ <div class="item" :class="{ active: currentBeisu == 1.5 }" @click="setBeisu(1.5)">1.5x</div>
|
|
|
|
|
+ <div class="item" :class="{ active: currentBeisu == 1.25 }" @click="setBeisu(1.25)">1.25x</div>
|
|
|
|
|
+ <div class="item" :class="{ active: currentBeisu == 1.0 }" @click="setBeisu(1.0)">1.0x</div>
|
|
|
|
|
+ <div class="item" :class="{ active: currentBeisu == 0.8 }" @click="setBeisu(0.8)">0.8x</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="beisu" :class="{ beisuAc: beisuTabShow }" @click="beisuTabShow = !beisuTabShow">倍速</div>
|
|
|
<div class="info">
|
|
<div class="info">
|
|
|
<span>{{ guidePlayIndex < 0 ? '-' : (guidePlayIndex + 1) }}</span
|
|
<span>{{ guidePlayIndex < 0 ? '-' : (guidePlayIndex + 1) }}</span
|
|
|
>/<span>{{ tourList.length }}</span>
|
|
>/<span>{{ tourList.length }}</span>
|
|
@@ -55,7 +63,10 @@ export default {
|
|
|
props: ["tourList"],
|
|
props: ["tourList"],
|
|
|
data() {
|
|
data() {
|
|
|
//这里存放数据
|
|
//这里存放数据
|
|
|
- return {};
|
|
|
|
|
|
|
+ return {
|
|
|
|
|
+ beisuTabShow: false,
|
|
|
|
|
+ currentBeisu: 1.0,
|
|
|
|
|
+ };
|
|
|
},
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
//监听属性 类似于data概念
|
|
|
computed: {
|
|
computed: {
|
|
@@ -75,6 +86,10 @@ export default {
|
|
|
},
|
|
},
|
|
|
//方法集合
|
|
//方法集合
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ setBeisu(beisu) {
|
|
|
|
|
+ this.currentBeisu = beisu;
|
|
|
|
|
+ this.beisuTabShow = false;
|
|
|
|
|
+ },
|
|
|
...mapMutations(["setData", "setPanoOver"]),
|
|
...mapMutations(["setData", "setPanoOver"]),
|
|
|
handleTour() {
|
|
handleTour() {
|
|
|
if (this.isCollapse) {
|
|
if (this.isCollapse) {
|
|
@@ -104,7 +119,7 @@ export default {
|
|
|
init: () => {
|
|
init: () => {
|
|
|
// console.error("init");
|
|
// console.error("init");
|
|
|
if (this.guideIsPlay) {
|
|
if (this.guideIsPlay) {
|
|
|
- settings.playTourNearBy ? player.director.playTourNearBy() : player.director.playTour();
|
|
|
|
|
|
|
+ player.director.playTourNearBy(); // 继续播放,而非从头开始
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
slideChangeTransitionEnd: function () {
|
|
slideChangeTransitionEnd: function () {
|
|
@@ -272,6 +287,48 @@ export default {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: flex-start;
|
|
justify-content: flex-start;
|
|
|
|
|
+ .beisuTab {
|
|
|
|
|
+ width: 66px;
|
|
|
|
|
+ height: 137px;
|
|
|
|
|
+ background-image: url('../../../assets/image/beisuTab.png');
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
|
+ background-position: center center;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ z-index: 1;
|
|
|
|
|
+ bottom: 28px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ padding-bottom: 10px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ transition: all 0.3s ease-in-out;
|
|
|
|
|
+ .item {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ &.active {
|
|
|
|
|
+ color: #C7A770;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .beisuTabHide{
|
|
|
|
|
+ width: 66px;
|
|
|
|
|
+ height: 0;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ transition: all 0.3s ease-in-out;
|
|
|
|
|
+ }
|
|
|
|
|
+ .beisu {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ margin: 0 20px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ }
|
|
|
|
|
+ .beisuAc{
|
|
|
|
|
+ color: #C7A770;
|
|
|
|
|
+ }
|
|
|
.info {
|
|
.info {
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
span {
|
|
span {
|