|
|
@@ -0,0 +1,456 @@
|
|
|
+<template>
|
|
|
+ <div class="bar-list" v-if="show" :class="{ disable: isEditing }">
|
|
|
+ <div
|
|
|
+ class="top-con"
|
|
|
+ v-show="currentScenesList.length > 0"
|
|
|
+ :style="`width:${
|
|
|
+ Math.max(scenesListW, secondaryW) > 1150
|
|
|
+ ? '100%'
|
|
|
+ : Math.max(scenesListW, secondaryW) + 120 + 'px'
|
|
|
+ }`"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="swiper-container"
|
|
|
+ :style="`width:${scenesListW > 1150 ? '100%' : scenesListW + 'px'}`"
|
|
|
+ id="swScenes"
|
|
|
+ ref="sw"
|
|
|
+ v-swiper:mySwiper="swiperOptions"
|
|
|
+ v-if="currentScenesList.length > 0"
|
|
|
+ >
|
|
|
+ <ul class="swiper-wrapper">
|
|
|
+ <li
|
|
|
+ v-tooltip="
|
|
|
+ item.type === '4dkk' ? $i18n.t('navigation.scene_edit_tips') : ''
|
|
|
+ "
|
|
|
+ @click="tabCurrentScene(item)"
|
|
|
+ class="swiper-slide"
|
|
|
+ :class="{
|
|
|
+ active: currentScene.id == item.id,
|
|
|
+ loopspan:
|
|
|
+ item.sceneTitle.length > spanlength &&
|
|
|
+ currentScene.id == item.id,
|
|
|
+ }"
|
|
|
+ :style="{ backgroundImage: `url(${item.icon})` }"
|
|
|
+ v-for="(item, i) in currentScenesList"
|
|
|
+ :key="item.id"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class="iconfont icon-edit_type_3d"
|
|
|
+ :class="{ iconedit_type_panorama: item.type !== '4dkk' }"
|
|
|
+ ></i>
|
|
|
+ <div>
|
|
|
+ <span v-if="currentScene.id == item.id">{{
|
|
|
+ item.sceneTitle
|
|
|
+ }}</span>
|
|
|
+ <span v-else>{{
|
|
|
+ item.sceneTitle.length > spanlength
|
|
|
+ ? item.sceneTitle.slice(0, spanlength)
|
|
|
+ : item.sceneTitle
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="swiper-container"
|
|
|
+ :style="`width:${Math.min(secondaryW, innerW)}px`"
|
|
|
+ id="swSecondary"
|
|
|
+ ref="sw1"
|
|
|
+ v-swiper:mySwipera="swiperOptions"
|
|
|
+ v-if="
|
|
|
+ !(
|
|
|
+ secondaryList.length === 1 &&
|
|
|
+ (secondaryList[0].name === '默认二级分组' ||
|
|
|
+ secondaryList[0].name === $i18n.t('navigation.default_group_two'))
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <ul class="swiper-wrapper">
|
|
|
+ <li
|
|
|
+ class="swiper-slide"
|
|
|
+ @click="tabSecondary(item)"
|
|
|
+ :class="{
|
|
|
+ active: currentSecondary.id == item.id,
|
|
|
+ loopspan:
|
|
|
+ fixTitle(item.name).length > spanlength &&
|
|
|
+ currentSecondary.id == item.id,
|
|
|
+ }"
|
|
|
+ v-for="(item, i) in secondaryList"
|
|
|
+ :key="i"
|
|
|
+ >
|
|
|
+ <span v-if="currentSecondary.id == item.id">{{
|
|
|
+ fixTitle(item.name)
|
|
|
+ }}</span>
|
|
|
+ <span v-else>{{
|
|
|
+ fixTitle(item.name).length > spanlength
|
|
|
+ ? fixTitle(item.name).slice(0, spanlength)
|
|
|
+ : fixTitle(item.name)
|
|
|
+ }}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="swiper-container"
|
|
|
+ :style="`width:${catalogRootW > innerW ? '100%' : catalogRootW + 'px'}`"
|
|
|
+ id="swcatalogRoot"
|
|
|
+ ref="sw2"
|
|
|
+ v-swiper:mySwiperb="swiperOptions"
|
|
|
+ v-if="metadata.catalogRoot.length > 0 && metadata.catalogs.length > 1"
|
|
|
+ >
|
|
|
+ <ul class="swiper-wrapper" v-if="metadata.catalogRoot.length > 1">
|
|
|
+ <li
|
|
|
+ class="swiper-slide"
|
|
|
+ :class="{
|
|
|
+ active: currentCatalogRoot.id == item.id,
|
|
|
+ loopspan:
|
|
|
+ fixTitle(item.name).length > spanlength &&
|
|
|
+ currentCatalogRoot.id == item.id,
|
|
|
+ }"
|
|
|
+ @click="tabRoot(item)"
|
|
|
+ v-for="(item, i) in metadata.catalogRoot"
|
|
|
+ :key="i"
|
|
|
+ >
|
|
|
+ <span v-if="currentCatalogRoot.id == item.id">{{
|
|
|
+ fixTitle(item.name)
|
|
|
+ }}</span>
|
|
|
+ <span v-else>{{
|
|
|
+ fixTitle(item.name).length > spanlength
|
|
|
+ ? fixTitle(item.name).slice(0, spanlength)
|
|
|
+ : fixTitle(item.name)
|
|
|
+ }}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+
|
|
|
+import { directive } from "vue-awesome-swiper";
|
|
|
+// import style (<= Swiper 5.x)
|
|
|
+import "swiper/css/swiper.css";
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ spanlength: 6,
|
|
|
+ show: false,
|
|
|
+ innerW: 1150,
|
|
|
+ swidth: {
|
|
|
+ swcatalogRoot: 104,
|
|
|
+ swSecondary: 84,
|
|
|
+ swScenes: 72,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ directives: {
|
|
|
+ swiper: directive,
|
|
|
+ },
|
|
|
+
|
|
|
+ watch: {
|
|
|
+ currentSecondary() {
|
|
|
+ this.loadList();
|
|
|
+ },
|
|
|
+ currentScenesList() {
|
|
|
+ this.loadList();
|
|
|
+ },
|
|
|
+ metadata: {
|
|
|
+ deep: true,
|
|
|
+ handler: function (newVal) {
|
|
|
+ if (newVal.scenes) {
|
|
|
+ this.$store.commit("scene/setScenes", newVal.scenes);
|
|
|
+ if (!this.show) {
|
|
|
+ this.show = true;
|
|
|
+ this.loadList();
|
|
|
+ } else {
|
|
|
+ // 更新列表
|
|
|
+ this.tabRoot(this.currentCatalogRoot);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({
|
|
|
+ metadata: "scene/metadata",
|
|
|
+ scenes: "scene/list",
|
|
|
+ currentScene: "scene/currentScene",
|
|
|
+ currentCatalogRoot: "scene/currentCatalogRoot",
|
|
|
+ currentSecondary: "scene/currentSecondary",
|
|
|
+ secondaryList: "scene/secondaryList",
|
|
|
+ isShowScenesList: "scene/isShowScenesList",
|
|
|
+ currentScenesList: "scene/currentScenesList",
|
|
|
+ isEditing: "isEditing",
|
|
|
+ }),
|
|
|
+
|
|
|
+ scenesListW() {
|
|
|
+ return this.currentScenesList.length * (this.swidth["swScenes"] + 10);
|
|
|
+ },
|
|
|
+ secondaryW() {
|
|
|
+ return this.secondaryList.length * (this.swidth["swSecondary"] + 10);
|
|
|
+ },
|
|
|
+ catalogRootW() {
|
|
|
+ return (
|
|
|
+ this.metadata.catalogRoot.length * (this.swidth["swcatalogRoot"] + 10)
|
|
|
+ );
|
|
|
+ },
|
|
|
+ swiperOptions() {
|
|
|
+ return {
|
|
|
+ slidesPerView: "auto",
|
|
|
+ centeredSlides: true,
|
|
|
+ centerInsufficientSlides: true,
|
|
|
+ centeredSlidesBounds: true,
|
|
|
+ freeMode: {
|
|
|
+ enabled: true,
|
|
|
+ sticky: false,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ fixTitle(name) {
|
|
|
+ if (name == "默认二级分组") {
|
|
|
+ name = this.$i18n.t("navigation.default_group_two");
|
|
|
+ } else if (name == "一级分组") {
|
|
|
+ name = this.$i18n.t("navigation.group_one");
|
|
|
+ } else {
|
|
|
+ name = name;
|
|
|
+ }
|
|
|
+ return name;
|
|
|
+ },
|
|
|
+ loadList() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // let t = setTimeout(() => {
|
|
|
+ // clearTimeout(t);
|
|
|
+ // ["#swcatalogRoot", "#swSecondary", "#swScenes"].forEach((item) => {
|
|
|
+ // new Swiper(item, {
|
|
|
+ // slidesPerView: "auto",
|
|
|
+ // spaceBetween: 10,
|
|
|
+ // centeredSlides: true,
|
|
|
+ // centerInsufficientSlides: true,
|
|
|
+ // centeredSlidesBounds: true,
|
|
|
+ // freeMode: true,
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // }, 100);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ tabCurrentScene(data) {
|
|
|
+ this.$store.commit("scene/setCurrentScene", data);
|
|
|
+ },
|
|
|
+
|
|
|
+ tabSecondary(data) {
|
|
|
+ this.$store.commit("scene/setCurrentSecondary", data);
|
|
|
+ },
|
|
|
+
|
|
|
+ tabRoot(data) {
|
|
|
+ this.$store.commit("scene/setCurrentCatalogRoot", data);
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ // console.log(this.metadata,'metadata');
|
|
|
+ // this.loadList();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+@width: 1150px;
|
|
|
+
|
|
|
+.bar-list {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 28px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ text-align: center;
|
|
|
+ max-width: @width;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: 0.3s all ease;
|
|
|
+ .swiper-container {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ > ul {
|
|
|
+ margin: 0 auto;
|
|
|
+ > li {
|
|
|
+ margin: 0 5px;
|
|
|
+ white-space: nowrap;
|
|
|
+
|
|
|
+ > span,
|
|
|
+ > div > span {
|
|
|
+ cursor: pointer;
|
|
|
+ display: inline-block;
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.loopspan {
|
|
|
+ > span,
|
|
|
+ > div > span {
|
|
|
+ animation: 5s wordsLoop linear infinite normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ > span,
|
|
|
+ > div > span {
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-con {
|
|
|
+ margin: 0 auto 10px;
|
|
|
+ padding: 10px 0;
|
|
|
+ background: linear-gradient(
|
|
|
+ 268deg,
|
|
|
+ rgba(0, 0, 0, 0) 0%,
|
|
|
+ rgba(0, 0, 0, 0.4) 25%,
|
|
|
+ rgba(0, 0, 0, 0.4) 75%,
|
|
|
+ rgba(0, 0, 0, 0) 100%
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ #swcatalogRoot {
|
|
|
+ > ul {
|
|
|
+ > li {
|
|
|
+ width: 104px;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 4px 10px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.5);
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ > span {
|
|
|
+ width: 100%;
|
|
|
+ word-break: keep-all;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ border: 1px solid rgba(255, 255, 255, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ #swSecondary {
|
|
|
+ margin: 20px auto 10px;
|
|
|
+
|
|
|
+ > ul {
|
|
|
+ > li {
|
|
|
+ width: 84px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ padding-bottom: 6px;
|
|
|
+
|
|
|
+ > span {
|
|
|
+ width: 100%;
|
|
|
+ word-break: keep-all;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ width: 20px;
|
|
|
+ height: 2px;
|
|
|
+ z-index: 9999;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ background: @color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ #swScenes {
|
|
|
+ > ul {
|
|
|
+ > li {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 72px;
|
|
|
+ height: 72px;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 1px solid #ffffff;
|
|
|
+ background-size: cover;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ position: absolute;
|
|
|
+ left: 4px;
|
|
|
+ top: 4px;
|
|
|
+ z-index: 99;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ content: "";
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ z-index: -1;
|
|
|
+ filter: blur(4px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ > div {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 20px;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ > span {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 20px;
|
|
|
+ word-break: keep-all;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ border: 1px solid @color;
|
|
|
+
|
|
|
+ > div {
|
|
|
+ > span {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.barshow {
|
|
|
+ max-height: 520px;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes wordsLoop {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(100%);
|
|
|
+ -webkit-transform: translateX(100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateX(-100%);
|
|
|
+ -webkit-transform: translateX(-100%);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
gemercheung