|
|
@@ -1,14 +1,50 @@
|
|
|
<template>
|
|
|
- <div class="tour-list" v-if="tours.length > 0" :class="{ ban: flying || isSelect,barshow: showTours }">
|
|
|
+ <div
|
|
|
+ class="tour-list 222"
|
|
|
+ v-if="tours.length > 0"
|
|
|
+ :class="{ ban: flying || isSelect, barshow: showTours }"
|
|
|
+ >
|
|
|
+ <teleport to=".kankan-app">
|
|
|
+ <!-- 导览字幕 -->
|
|
|
+ <div
|
|
|
+ class="tours-captions"
|
|
|
+ :class="{ active: showTours }"
|
|
|
+ v-if="tours.length > 0 && isPlay && !tours[partId].list[frameId].tagId"
|
|
|
+ >
|
|
|
+ <!-- <div class="tours-captions" :class="{ active: showTours }" > -->
|
|
|
+ <div class="captions-title" v-if="tours[partId] && tours[partId].title">
|
|
|
+ {{ tours[partId].title || "" }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="captions-desc"
|
|
|
+ v-if="tours[partId] && tours[partId].description"
|
|
|
+ >
|
|
|
+ {{ tours[partId].description || "" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </teleport>
|
|
|
+
|
|
|
<div class="part-content" ref="tourScroll">
|
|
|
<!-- 多个片段 -->
|
|
|
- <ul class="part-list" v-if="tours.length>1">
|
|
|
- <li class="part-item" v-for="(item, index) in tours" :key="index" @click="changeFrame(1, index)" :class="{
|
|
|
- active: partId == index && progressNum > 0,
|
|
|
- loopspan: item.name.length > spanlength && partId == index,
|
|
|
- disabled: isPlay && partId != index }" :name="index">
|
|
|
- <span v-if="partId == index">{{item.name}}</span>
|
|
|
- <span v-else>{{ item.name.length > spanlength ? item.name.slice(0, spanlength) : item.name }}</span>
|
|
|
+ <ul class="part-list" v-if="tours.length > 1">
|
|
|
+ <li
|
|
|
+ class="part-item"
|
|
|
+ v-for="(item, index) in tours"
|
|
|
+ :key="index"
|
|
|
+ @click="changeFrame(1, index)"
|
|
|
+ :class="{
|
|
|
+ active: partId == index && progressNum > 0,
|
|
|
+ loopspan: item.name.length > spanlength && partId == index,
|
|
|
+ disabled: isPlay && partId != index,
|
|
|
+ }"
|
|
|
+ :name="index"
|
|
|
+ >
|
|
|
+ <span v-if="partId == index">{{ item.name }}</span>
|
|
|
+ <span v-else>{{
|
|
|
+ item.name.length > spanlength
|
|
|
+ ? item.name.slice(0, spanlength)
|
|
|
+ : item.name
|
|
|
+ }}</span>
|
|
|
<div v-if="partId == index && progressNum > 0" class="tourbar">
|
|
|
<div :style="`width:${progressNum}%;`" class="tourline"></div>
|
|
|
</div>
|
|
|
@@ -16,279 +52,292 @@
|
|
|
</ul>
|
|
|
<!-- 只有一个片段 -->
|
|
|
<ul class="part-list part-frame" v-else>
|
|
|
- <li class="part-item " v-for="(item, index) in tours[0].list" :key="index" @click="changeFrame(2, index)"
|
|
|
- :style="`background-image:url(${common.changeUrl(item.enter.cover)});`" :class="{
|
|
|
- active: frameId == index && progressNum > 0,
|
|
|
- activeborder: frameId == index&& progressNum <= 0,
|
|
|
- disabled: isPlay && frameId != index }" :name="index">
|
|
|
+ <li
|
|
|
+ class="part-item"
|
|
|
+ v-for="(item, index) in tours[0].list"
|
|
|
+ :key="index"
|
|
|
+ @click="changeFrame(2, index)"
|
|
|
+ :style="`background-image:url(${common.changeUrl(
|
|
|
+ item.enter.cover
|
|
|
+ )});`"
|
|
|
+ :class="{
|
|
|
+ active: frameId == index && progressNum > 0,
|
|
|
+ activeborder: frameId == index && progressNum <= 0,
|
|
|
+ disabled: isPlay && frameId != index,
|
|
|
+ }"
|
|
|
+ :name="index"
|
|
|
+ >
|
|
|
<div v-if="frameId == index && progressNum > 0" class="tourbar">
|
|
|
<div :style="`width:${progressNum}%;`" class="tourline"></div>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
-import { computed, inject, onMounted, watch, ref, nextTick } from 'vue'
|
|
|
-import { Scrollbar, Dialog } from '@/global_components'
|
|
|
-import { useApp, getApp } from '@/app'
|
|
|
-import { useStore } from 'vuex'
|
|
|
-import common from '@/utils/common'
|
|
|
-import { useMusicPlayer } from '@/utils/sound'
|
|
|
-const musicPlayer = useMusicPlayer()
|
|
|
-
|
|
|
+import { computed, inject, onMounted, watch, ref, nextTick } from "vue";
|
|
|
+import { Scrollbar, Dialog } from "@/global_components";
|
|
|
+import { useApp, getApp } from "@/app";
|
|
|
+import { useStore } from "vuex";
|
|
|
+import common from "@/utils/common";
|
|
|
+import { useMusicPlayer } from "@/utils/sound";
|
|
|
+const musicPlayer = useMusicPlayer();
|
|
|
|
|
|
-const spanlength = ref(5)
|
|
|
+const spanlength = ref(5);
|
|
|
|
|
|
const triggerTour = inject("triggerTour");
|
|
|
const isOpenTours = inject("isOpenTours");
|
|
|
-
|
|
|
-let timer = null
|
|
|
-const isSelect = ref(false)
|
|
|
-const store = useStore()
|
|
|
-const tourScroll = ref(null)
|
|
|
-const flying = computed(() => store.getters['flying'])
|
|
|
-const controls = computed(() => store.getters['scene/metadata'].controls || {})
|
|
|
-const showTours = computed(() => store.getters['tour/showTours'])
|
|
|
+let timer = null;
|
|
|
+const isSelect = ref(false);
|
|
|
+const store = useStore();
|
|
|
+const tourScroll = ref(null);
|
|
|
+const flying = computed(() => store.getters["flying"]);
|
|
|
+const controls = computed(() => store.getters["scene/metadata"].controls || {});
|
|
|
+const showTours = computed(() => store.getters["tour/showTours"]);
|
|
|
const partId = computed(() => {
|
|
|
- let id = store.getters['tour/partId']
|
|
|
+ let id = store.getters["tour/partId"];
|
|
|
if (isPlay.value) {
|
|
|
- slideScroll()
|
|
|
+ slideScroll();
|
|
|
}
|
|
|
- return id
|
|
|
-})
|
|
|
+ return id;
|
|
|
+});
|
|
|
|
|
|
const frameId = computed(() => {
|
|
|
- let id = store.getters['tour/frameId']
|
|
|
+ let id = store.getters["tour/frameId"];
|
|
|
if (isPlay.value) {
|
|
|
- slideScroll()
|
|
|
+ slideScroll();
|
|
|
}
|
|
|
- return id
|
|
|
-})
|
|
|
-const progressNum = ref(0)
|
|
|
+ return id;
|
|
|
+});
|
|
|
+const progressNum = ref(0);
|
|
|
const isPlay = computed(() => {
|
|
|
- let status = store.getters['tour/isPlay']
|
|
|
- let map = document.querySelector('.kankan-app div[xui_min_map]')
|
|
|
+ let status = store.getters["tour/isPlay"];
|
|
|
+ let map = document.querySelector(".kankan-app div[xui_min_map]");
|
|
|
if (map) {
|
|
|
if (status) {
|
|
|
- map.classList.add('disabled')
|
|
|
+ map.classList.add("disabled");
|
|
|
} else {
|
|
|
- map.classList.remove('disabled')
|
|
|
+ map.classList.remove("disabled");
|
|
|
}
|
|
|
}
|
|
|
- return status
|
|
|
-})
|
|
|
-const isInit = ref(false)
|
|
|
+ return status;
|
|
|
+});
|
|
|
+const isInit = ref(false);
|
|
|
const tours = computed(() => {
|
|
|
- let tours = store.getters['tour/tours']
|
|
|
+ let tours = store.getters["tour/tours"];
|
|
|
if (tours.length > 0) {
|
|
|
if (tourScroll.value && !isInit.value) {
|
|
|
- isInit.value = true
|
|
|
- new Scrollbar(tourScroll.value, { onlyHorizontal: true })
|
|
|
+ isInit.value = true;
|
|
|
+ new Scrollbar(tourScroll.value, { onlyHorizontal: true });
|
|
|
}
|
|
|
}
|
|
|
- return tours
|
|
|
-})
|
|
|
-const onModeChange = name => {
|
|
|
- store.commit('setMode', name)
|
|
|
-}
|
|
|
+ return tours;
|
|
|
+});
|
|
|
+const onModeChange = (name) => {
|
|
|
+ store.commit("setMode", name);
|
|
|
+};
|
|
|
|
|
|
const playTour = async () => {
|
|
|
- let player = await getApp().TourManager.player
|
|
|
+ let player = await getApp().TourManager.player;
|
|
|
if (isPlay.value) {
|
|
|
- store.commit('tour/setData', { isPlay: true })
|
|
|
- player.pause()
|
|
|
+ store.commit("tour/setData", { isPlay: true });
|
|
|
+ player.pause();
|
|
|
} else {
|
|
|
- store.commit('tour/setData', { isPlay: true })
|
|
|
- player.play(partId.value)
|
|
|
+ store.commit("tour/setData", { isPlay: true });
|
|
|
+ player.play(partId.value);
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
+};
|
|
|
|
|
|
-
|
|
|
-const hanlderTourPartPlay = time => {
|
|
|
+const hanlderTourPartPlay = (time) => {
|
|
|
if (!timer) {
|
|
|
- timer = KanKan.Animate.transitions.start(progress => {
|
|
|
- progressNum.value = progress * 100
|
|
|
- }, time)
|
|
|
+ timer = KanKan.Animate.transitions.start((progress) => {
|
|
|
+ progressNum.value = progress * 100;
|
|
|
+ }, time);
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
const cancelTimer = () => {
|
|
|
if (timer) {
|
|
|
- KanKan.Animate.transitions.cancel(timer)
|
|
|
- timer = null
|
|
|
+ KanKan.Animate.transitions.cancel(timer);
|
|
|
+ timer = null;
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
const slideScroll = () => {
|
|
|
nextTick(() => {
|
|
|
let t = setTimeout(() => {
|
|
|
- clearTimeout(t)
|
|
|
- let id = tours.value.length > 1 ? partId.value : frameId.value
|
|
|
- let item = document.querySelector(`.part-item[name="${id}"]`)
|
|
|
- item.scrollIntoView({ block: 'center', behavior: 'smooth', inline: 'center' })
|
|
|
- }, 100)
|
|
|
- })
|
|
|
-}
|
|
|
+ clearTimeout(t);
|
|
|
+ let id = tours.value.length > 1 ? partId.value : frameId.value;
|
|
|
+ let item = document.querySelector(`.part-item[name="${id}"]`);
|
|
|
+ item.scrollIntoView({
|
|
|
+ block: "center",
|
|
|
+ behavior: "smooth",
|
|
|
+ inline: "center",
|
|
|
+ });
|
|
|
+ }, 100);
|
|
|
+ });
|
|
|
+};
|
|
|
const hanlderTour = async () => {
|
|
|
- let player = await getApp().TourManager.player
|
|
|
- player.on('play', data => {
|
|
|
+ let player = await getApp().TourManager.player;
|
|
|
+ player.on("play", (data) => {
|
|
|
// musicPlayer.pause(true)
|
|
|
window.parent.postMessage(
|
|
|
- {
|
|
|
- source: "qjkankan",
|
|
|
- event: "toggleBgmStatus",
|
|
|
- params: {
|
|
|
- status: false,
|
|
|
- },
|
|
|
+ {
|
|
|
+ source: "qjkankan",
|
|
|
+ event: "toggleBgmStatus",
|
|
|
+ params: {
|
|
|
+ status: false,
|
|
|
},
|
|
|
- "*"
|
|
|
+ },
|
|
|
+ "*"
|
|
|
);
|
|
|
- })
|
|
|
- player.on('pause', tours => {
|
|
|
- console.log('pause', player)
|
|
|
+ });
|
|
|
+ player.on("pause", (tours) => {
|
|
|
+ console.log("pause", player);
|
|
|
// musicPlayer.resume()
|
|
|
window.parent.postMessage(
|
|
|
- {
|
|
|
- source: "qjkankan",
|
|
|
- event: "toggleBgmStatus",
|
|
|
- params: {
|
|
|
- status: true,
|
|
|
- },
|
|
|
+ {
|
|
|
+ source: "qjkankan",
|
|
|
+ event: "toggleBgmStatus",
|
|
|
+ params: {
|
|
|
+ status: true,
|
|
|
},
|
|
|
- "*"
|
|
|
+ },
|
|
|
+ "*"
|
|
|
);
|
|
|
|
|
|
- progressNum.value = 0
|
|
|
- cancelTimer()
|
|
|
- store.commit('tour/setData', { isPlay: false })
|
|
|
- })
|
|
|
- player.on('end', tours => {
|
|
|
+ progressNum.value = 0;
|
|
|
+ cancelTimer();
|
|
|
+ store.commit("tour/setData", { isPlay: false });
|
|
|
+ });
|
|
|
+ player.on("end", (tours) => {
|
|
|
// musicPlayer.resume()
|
|
|
window.parent.postMessage(
|
|
|
- {
|
|
|
- source: "qjkankan",
|
|
|
- event: "toggleBgmStatus",
|
|
|
- params: {
|
|
|
- status: true,
|
|
|
- },
|
|
|
+ {
|
|
|
+ source: "qjkankan",
|
|
|
+ event: "toggleBgmStatus",
|
|
|
+ params: {
|
|
|
+ status: true,
|
|
|
},
|
|
|
- "*"
|
|
|
+ },
|
|
|
+ "*"
|
|
|
);
|
|
|
- progressNum.value = 100
|
|
|
- slideScroll()
|
|
|
- store.commit('tour/setData', { isPlay: false })
|
|
|
- cancelTimer()
|
|
|
- })
|
|
|
+ progressNum.value = 100;
|
|
|
+ slideScroll();
|
|
|
+ store.commit("tour/setData", { isPlay: false });
|
|
|
+ cancelTimer();
|
|
|
+ });
|
|
|
|
|
|
- let currPartId = null
|
|
|
- let currProgress = 0
|
|
|
- let currFrames = 0
|
|
|
+ let currPartId = null;
|
|
|
+ let currProgress = 0;
|
|
|
+ let currFrames = 0;
|
|
|
|
|
|
- player.on('progress', data => {
|
|
|
+ player.on("progress", (data) => {
|
|
|
if (tours.value.length == 1) {
|
|
|
- progressNum.value = data.progress * 100
|
|
|
+ progressNum.value = data.progress * 100;
|
|
|
} else {
|
|
|
if (currPartId != data.partId) {
|
|
|
- currPartId = data.partId
|
|
|
- currFrames = tours.value[data.partId].list.length
|
|
|
- currProgress = 0
|
|
|
+ currPartId = data.partId;
|
|
|
+
|
|
|
+ currFrames = tours.value[data.partId]
|
|
|
+ ? tours.value[data.partId].list.length
|
|
|
+ : 0;
|
|
|
+ currProgress = 0;
|
|
|
} else {
|
|
|
- currProgress += data.progress / currFrames
|
|
|
+ currProgress += data.progress / currFrames;
|
|
|
if (currProgress >= 100) {
|
|
|
- currProgress = 100
|
|
|
+ currProgress = 100;
|
|
|
}
|
|
|
|
|
|
- progressNum.value = currProgress
|
|
|
+ progressNum.value = currProgress;
|
|
|
}
|
|
|
}
|
|
|
- store.commit('tour/setData', { partId: data.partId, frameId: data.frameId, isPlay: true })
|
|
|
- })
|
|
|
-
|
|
|
-}
|
|
|
-const getPartTime = partId => {
|
|
|
- cancelTimer()
|
|
|
- let time = 0
|
|
|
+ store.commit("tour/setData", {
|
|
|
+ partId: data.partId,
|
|
|
+ frameId: data.frameId,
|
|
|
+ isPlay: true,
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+const getPartTime = (partId) => {
|
|
|
+ cancelTimer();
|
|
|
+ let time = 0;
|
|
|
for (let i = 0; i < tours.value[partId].list.length; i++) {
|
|
|
if (!tours.value[partId].list[i]._end) {
|
|
|
- time += tours.value[partId].list[i].time - 0
|
|
|
+ time += tours.value[partId].list[i].time - 0;
|
|
|
if (!tours.value[partId].list[i]._notrans) {
|
|
|
- time += 1000
|
|
|
+ time += 1000;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- return time
|
|
|
-}
|
|
|
+ return time;
|
|
|
+};
|
|
|
|
|
|
const openTours = () => {
|
|
|
// showTours.value = !showTours.value
|
|
|
- store.commit('tour/setData', { showTours: !showTours.value })
|
|
|
+ store.commit("tour/setData", { showTours: !showTours.value });
|
|
|
|
|
|
nextTick(() => {
|
|
|
if (isPlay.value) {
|
|
|
- slideScroll()
|
|
|
+ slideScroll();
|
|
|
}
|
|
|
- })
|
|
|
-}
|
|
|
+ });
|
|
|
+};
|
|
|
const changeFrame = async (type, id) => {
|
|
|
- progressNum.value = 0
|
|
|
+ progressNum.value = 0;
|
|
|
// recorder.selectFrame(id)
|
|
|
- let player = await getApp().TourManager.player
|
|
|
+ let player = await getApp().TourManager.player;
|
|
|
// player.selectFrame(id)
|
|
|
- isSelect.value = true
|
|
|
+ isSelect.value = true;
|
|
|
if (type == 1) {
|
|
|
- player.selectPart(id)
|
|
|
- console.log(tours.value[id].frameId)
|
|
|
- let f_id = 0
|
|
|
+ player.selectPart(id);
|
|
|
+ console.log(tours.value[id].frameId);
|
|
|
+ let f_id = 0;
|
|
|
if (tours.value[id].frameId) {
|
|
|
- f_id = tours.value[id].frameId
|
|
|
+ f_id = tours.value[id].frameId;
|
|
|
}
|
|
|
player.selectFrame(f_id).then(() => {
|
|
|
- isSelect.value = false
|
|
|
- })
|
|
|
- store.commit('tour/setData', {
|
|
|
+ isSelect.value = false;
|
|
|
+ });
|
|
|
+ store.commit("tour/setData", {
|
|
|
frameId: f_id,
|
|
|
partId: id,
|
|
|
- })
|
|
|
+ });
|
|
|
} else {
|
|
|
player.selectFrame(id).then(() => {
|
|
|
- isSelect.value = false
|
|
|
- })
|
|
|
- store.commit('tour/setData', {
|
|
|
+ isSelect.value = false;
|
|
|
+ });
|
|
|
+ store.commit("tour/setData", {
|
|
|
frameId: id,
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
- slideScroll()
|
|
|
-}
|
|
|
+ slideScroll();
|
|
|
+};
|
|
|
const onClickHandler = async () => {
|
|
|
if (isPlay.value) {
|
|
|
- let player = await getApp().TourManager.player
|
|
|
- player.pause()
|
|
|
+ let player = await getApp().TourManager.player;
|
|
|
+ player.pause();
|
|
|
// musicPlayer.resume()
|
|
|
window.parent.postMessage(
|
|
|
- {
|
|
|
- source: "qjkankan",
|
|
|
- event: "toggleBgmStatus",
|
|
|
- params: {
|
|
|
- status: true,
|
|
|
- },
|
|
|
+ {
|
|
|
+ source: "qjkankan",
|
|
|
+ event: "toggleBgmStatus",
|
|
|
+ params: {
|
|
|
+ status: true,
|
|
|
},
|
|
|
- "*"
|
|
|
+ },
|
|
|
+ "*"
|
|
|
);
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
+};
|
|
|
|
|
|
watch(triggerTour, () => {
|
|
|
- playTour()
|
|
|
-})
|
|
|
+ playTour();
|
|
|
+});
|
|
|
|
|
|
watch(isOpenTours, () => {
|
|
|
- openTours()
|
|
|
-})
|
|
|
+ openTours();
|
|
|
+});
|
|
|
|
|
|
watch(isPlay, () => {
|
|
|
window.parent.postMessage(
|
|
|
@@ -301,23 +350,21 @@ watch(isPlay, () => {
|
|
|
},
|
|
|
"*"
|
|
|
);
|
|
|
-})
|
|
|
-
|
|
|
+});
|
|
|
|
|
|
onMounted(() => {
|
|
|
- useApp().then(async sdk => {
|
|
|
- hanlderTour()
|
|
|
- })
|
|
|
+ useApp().then(async (sdk) => {
|
|
|
+ hanlderTour();
|
|
|
+ });
|
|
|
|
|
|
nextTick(() => {
|
|
|
- let player = document.querySelector('.player[name="main"]')
|
|
|
- player.addEventListener('click', onClickHandler)
|
|
|
- })
|
|
|
-})
|
|
|
+ let player = document.querySelector('.player[name="main"]');
|
|
|
+ player.addEventListener("click", onClickHandler);
|
|
|
+ });
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-
|
|
|
.controls-left-buttons {
|
|
|
margin-left: 20px;
|
|
|
margin-bottom: 20px;
|
|
|
@@ -327,7 +374,7 @@ onMounted(() => {
|
|
|
.buttons.tour {
|
|
|
margin-right: 10px;
|
|
|
|
|
|
- >div {
|
|
|
+ > div {
|
|
|
margin-left: 0px;
|
|
|
margin-right: 0px;
|
|
|
padding: 0 10px;
|
|
|
@@ -354,7 +401,7 @@ onMounted(() => {
|
|
|
text-align: center;
|
|
|
overflow: hidden;
|
|
|
max-height: 0;
|
|
|
- transition: .3s all ease;
|
|
|
+ transition: 0.3s all ease;
|
|
|
z-index: 9;
|
|
|
max-width: 90vw;
|
|
|
&.ban {
|
|
|
@@ -366,41 +413,39 @@ onMounted(() => {
|
|
|
flex-direction: row;
|
|
|
overflow: hidden;
|
|
|
padding: 6px;
|
|
|
- background: rgba(0,0,0,0.5);
|
|
|
- border: 1px solid rgba(255,255,255,0.1);
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
border-radius: 4px;
|
|
|
.part-list {
|
|
|
display: flex;
|
|
|
|
|
|
- >li {
|
|
|
+ > li {
|
|
|
width: 90px;
|
|
|
height: 40px;
|
|
|
- background: rgba(24, 24, 24, .5);
|
|
|
+ background: rgba(24, 24, 24, 0.5);
|
|
|
line-height: 40px;
|
|
|
margin: 0 6px;
|
|
|
cursor: pointer;
|
|
|
border-radius: 4px;
|
|
|
|
|
|
- >span,
|
|
|
- >div>span {
|
|
|
+ > span,
|
|
|
+ > div > span {
|
|
|
cursor: pointer;
|
|
|
display: inline-block;
|
|
|
color: rgba(255, 255, 255, 0.8);
|
|
|
}
|
|
|
|
|
|
&.loopspan {
|
|
|
-
|
|
|
- >span,
|
|
|
- >div>span {
|
|
|
+ > span,
|
|
|
+ > div > span {
|
|
|
animation: 5s wordsLoop linear infinite normal;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.active {
|
|
|
position: relative;
|
|
|
- >span{
|
|
|
- color: var(--colors-primary-base);
|
|
|
-
|
|
|
+ > span {
|
|
|
+ color: var(--colors-primary-base);
|
|
|
}
|
|
|
.tourbar {
|
|
|
position: absolute;
|
|
|
@@ -425,20 +470,18 @@ onMounted(() => {
|
|
|
opacity: 0.7;
|
|
|
}
|
|
|
}
|
|
|
- .activeborder{
|
|
|
+ .activeborder {
|
|
|
border: 1px solid var(--editor-main-color);
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
.part-frame {
|
|
|
- >li {
|
|
|
+ > li {
|
|
|
width: 120px;
|
|
|
height: 80px;
|
|
|
background-size: cover;
|
|
|
&.active {
|
|
|
-
|
|
|
- .tourbar {
|
|
|
+ .tourbar {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
left: 0;
|
|
|
@@ -465,7 +508,6 @@ onMounted(() => {
|
|
|
max-height: 102px;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
@keyframes wordsLoop {
|
|
|
0% {
|
|
|
transform: translateX(100%);
|
|
|
@@ -478,3 +520,33 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
+<style lang="scss">
|
|
|
+.tours-captions {
|
|
|
+ pointer-events: none;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 2.7rem;
|
|
|
+ // left: -0.4267rem;
|
|
|
+ left: 0;
|
|
|
+ width: 100vw;
|
|
|
+ word-break: break-all;
|
|
|
+ text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
|
|
|
+ text-align: justify;
|
|
|
+ padding: 0 0.2667rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ transition: all 0.3s;
|
|
|
+ transform: translateX(0);
|
|
|
+ z-index: 10;
|
|
|
+ &.active {
|
|
|
+ bottom: 5rem;
|
|
|
+ }
|
|
|
+ .captions-title {
|
|
|
+ font-size: 0.4267rem;
|
|
|
+ margin-bottom: 0.2667rem;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .captions-desc {
|
|
|
+ font-size: 0.3733rem;
|
|
|
+ line-height: 0.44rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
gemercheung