xiangshanhu/src/views/scene/list.vue

<template>
  <div class="bar-list" :class=" store.listIsShow ? '' : 'bar-list-hidden'">
    <div
      class="swiper-container"
      id="swcatalogRoot"
      v-if="
        store.metadata.catalogRoot.length > 0 &&
        store.metadata.catalogs.length > 1
      "
    >
      <ul class="swiper-wrapper" v-if="store.metadata.catalogRoot.length > 1">
        <li
          class="swiper-slide"
          :class="{
            active: store.currentCatalogRoot.id == item.id,
            loopspan:
              item.name.length > spanlength &&
              store.currentCatalogRoot.id == item.id,
          }"
          @click="tabRoot(item)"
          v-for="(item, i) in store.metadata.catalogRoot"
          :key="i"
        >
          <div class="area-text" v-if="store.currentCatalogRoot.id == item.id">
            {{ item.name }}
            <div class="active-line"></div>
          </div>
          <div class="area-text" v-else>
            {{
              item.name.length > spanlength
                ? item.name.slice(0, spanlength)
                : item.name
            }}
            <!-- <div class="active-line"></div> -->
          </div>
        </li>
      </ul>
      <img
        src="../../assets/images/resource/scene/downIcon.png"
        @click="departure"
      />
    </div>
    <div
      class="bottom-con"
      :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"
        v-if="store.currentScenesList.length > 0"
      >
        <ul class="swiper-wrapper">
          <li
            @click="tabCurrentScene(item)"
            class="swiper-slide"
            :class="{
              active: store.currentScene.sceneCode == item.sceneCode,
              loopspan:
                item.sceneTitle.length > spanlength &&
                store.currentScene.id == item.id,
            }"
            :style="{ backgroundImage: `url(${item.icon})` }"
            v-for="(item, i) in store.currentScenesList"
            :key="i"
          >
            <div>
              <span v-if="store.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"
        id="swSecondary"
        :style="`width:${secondaryW}px`"
        v-if="store.secondaryList.length > 1"
      >
        <ul class="swiper-wrapper">
          <li
            class="swiper-slide"
            @click="tabSecondary(item)"
            :class="{
              active: store.currentSecondary.id == item.id,
              loopspan:
                item.name.length > spanlength &&
                store.currentSecondary.id == item.id,
            }"
            v-for="(item, i) in store.secondaryList"
            :key="i"
          >
            <span v-if="store.currentSecondary.id == item.id">{{
              item.name
            }}</span>
            <span v-else>{{
              item.name.length > spanlength
                ? item.name.slice(0, spanlength)
                : item.name
            }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import appStore from "@/store/index";
import { ref, onMounted, computed, watch, nextTick } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const store = appStore();
const spanlength = ref(5);

const swidth = ref({
  swcatalogRoot: 130,
  swSecondary: 84,
  swScenes: 124,
});

const scenesListW = computed(
  () => store.currentScenesList.length * (swidth.value["swScenes"] + 10) - 10
);
const secondaryW = computed(
  () => store.secondaryList.length * (swidth.value["swSecondary"] + 10) - 10
);
const catalogRootW = computed(
  () =>
    store.metadata.catalogRoot.length * (swidth.value["swcatalogRoot"] + 10) -
    10
);
const innerW = computed(() => 1150);

const loadList = () => {
  nextTick(() => {
    let t = setTimeout(() => {
      clearTimeout(t);
      ["#swcatalogRoot", "#swSecondary", "#swScenes"].forEach((item) => {
        new Swiper(item, {
          slidesPerView: "auto",
          centeredSlides: true,
          spaceBetween: 10,
          centerInsufficientSlides: true,
          mousewheel: true,
          centeredSlidesBounds: true,
          freeMode: true,
          observer: true,
          observeParents: true,
        });
      });
    }, 100);
  });
};

const tabCurrentScene = (data) => {
  store.currentScene = data;
  route.params.id = data.sceneCode;
};

const tabSecondary = (data) => {
  store.setCurrentSecondary(data);
};

const tabRoot = (data) => {
  store.setCurrentCatalogRoot(data);
  setTimeout(() => {
    // 当前场景初始化为第一个
    store.setCurrentSceneFirst();
  }, 300);
};

// 向下离场
const departure = () => {
  store.setListIsShow(false)
};

onMounted(() => {
  loadList();
  store.$subscribe((mutation, state) => {
    loadList();
  });
});
</script>
<style lang="scss" scoped>
$width: 100%;

.bar-list-hidden {
  bottom: -200px !important;
}
.bar-list {
  position: absolute;
  bottom: 68px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: $width;
  overflow: hidden;
  transition: 0.3s all ease;
  z-index: 9999;
  // border-top: 2px solid #e1ceaa;
  // border-bottom: 2px solid #e1ceaa;
  background: linear-gradient(
    89deg,
    rgba(141, 127, 100, 0) 0%,
    rgb(158 135 90 / 35%) 22%,
    rgba(141, 127, 100, 0.56) 80%,
    rgb(141 127 100 / 56%) 100%
  );
  backdrop-filter: blur(20px);
  padding: 10px;
  transition-property: bottom;
  transition-duration: 0.5s;
  pointer-events: all;
  box-shadow: inset 0px 2px 5px 0px rgba(255, 255, 255, 0.25);
  bottom: 0;

  .up-icon {
    position: absolute;
    top: -20px;
    z-index: 999;
  }

  .swiper-container {
    width: 100%;
    position: relative;
    // margin-top: 10px;

    > ul {
      > li {
        white-space: nowrap;

        > span,
        > div > span {
          cursor: pointer;
          display: inline-block;
          color: rgba(255, 255, 255);
          font-weight: bold;
          font-size: 14px;
        }

        &.loopspan {
          > span,
          > div > span {
            animation: 5s wordsLoop linear infinite normal;
          }
        }

        &.active {
          .area-text {
            color: rgba(255, 255, 255, 1) !important;
            font-weight: bold !important;
          }
        }

        .active-line {
          width: 80%;
          height: 4px;
          background-color: #e1ceaaad;
          position: absolute;
          bottom: 5px;
          left: 10px;
        }
      }
    }
  }

  .bottom-con {
    margin: 0px auto 0;
    padding: 10px;
  }

  #swcatalogRoot {
    .swiper-wrapper {
      transform: translate3d(0, 0px, 0px) !important;
    }
    > ul {
      > li {
        box-sizing: border-box;
        overflow: hidden;
        width: 90px;
        line-height: 30px;
        height: 30px;
        .area-text {
          width: 100%;
          word-break: keep-all;
          color: #ffffff;
          font-weight: 400;
          cursor: pointer;
          position: relative;
          font-size: 14px;
        }

        &.active {
          // border: 1px solid rgba(255, 255, 255, 1);
        }
      }
    }

    img {
      width: 35px;
      position: absolute;
      right: 20px;
      z-index: 999;
      top: -2px;
      cursor: pointer;
    }
  }

  #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: var(--colors-primary-base);
          }
        }
      }
    }
  }

  #swScenes {
    > ul {
      > li {
        cursor: pointer;
        border-radius: 6px;
        border: 2px solid transparent;
        border-right: 0;
        background-size: cover;
        position: relative;
        overflow: hidden;
        width: 124px;
        height: 90px;
        border-radius: 1px;
        &::after {
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
          display: inline-block;
          background: rgba(0, 0, 0, 0.5);
          content: "";
          pointer-events: none;
        }
        > div {
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
          left: 50%;
          height: 20px;
          width: 100%;
          overflow: hidden;
          z-index: 999;

          > span {
            width: 100%;
            line-height: 20px;
            word-break: keep-all;
          }
        }

        &.active {
          border: 2px solid #d9c7a4;
          &::after {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            display: inline-block;
            background: linear-gradient(
              to top,
              rgb(0 0 0 / 59%),
              rgba(255, 0, 0, 0)
            );
            content: "";
            pointer-events: none;
          }
          > div {
            top: auto;
            bottom: 10px;
            transform: translate(0, 0);
            left: 0;
            > span {
            }
          }
        }
      }
    }
  }
}

.barshow {
  max-height: 190px;
}

@keyframes wordsLoop {
  0% {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}
</style>