YFYC2-H5/src/view/bldgPanorama/detail/index.vue

<script setup lang="ts">
import ModelList from "@/assets/data/Model/index";
import { ModelType } from "@/types/Model/index";
import DownIcon from "@/assets/img/panorama/down.png";
import UpIcon from "@/assets/img/panorama/up.png";

const route = useRoute();

const showList = ref([]);
const currentArea = ref({} as any);
const currentScene = ref({} as any);
const getData = () => {
  // 处理数据
  const dataList = ModelList.map((item: ModelType) => {
    return item.region;
  });
  const newDataList = dataList.filter(function (value, index, self) {
    return self.indexOf(value) === index;
  });
  newDataList.forEach((region: string) => {
    const list = ModelList.filter((item: ModelType) => {
      return item.region === region;
    });
    showList.value.push({
      area: region,
      list: list,
    });
  });

  currentArea.value = showList.value[0];
  currentScene.value = currentArea.value.list[0];

  // 获取当前
  if (route.query.name) {
    currentScene.value = ModelList.find((item: any) => {
      return route.query.name === item.name;
    });
    currentArea.value = showList.value.find((item:any) => {
      return item.area === currentScene.value.region
    })
  } else {
    currentArea.value = showList.value[0];
    currentScene.value = currentArea.value.list[0];
  }

  console.log(
    showList.value,
    newDataList,
    route.query.name,
    currentArea.value,
    currentScene.value
  );
};

const currentAreaChange = (item: any) => {
  currentArea.value = item;
};

const sceneChange = (item: any) => {
  currentScene.value = item;
};

const isShow = ref(true);

onMounted(() => {
  getData();
});
</script>

<template>
  <div class="detail">
    <!-- <div class="map-top">芜湖市优秀文物建筑</div> -->
    <iframe
      class="ifr"
      :src="`https://zzbbh.4dage.com/SWKK/show.html?id=${currentScene.birdId}`"
      frameborder="0"
    ></iframe>
    <div class="mini-tabbar">
      <div class="mini-tabbar-top">
        <div class="top-left">
          <div
            class="top-item"
            v-for="(item, index) in showList"
            :key="index"
            @click="currentAreaChange(item)"
          >
            {{ item.area }}
          </div>
        </div>
        <img
          :src="isShow ? DownIcon : UpIcon"
          alt=""
          @click="
            () => {
              isShow = !isShow;
            }
          "
        />
      </div>
      <div class="mini-tabbar-bottom" v-show="isShow">
        <div
          class="bottom-item"
          v-for="(item, index) in currentArea.list"
          :key="index"
          v-show="item.birdId != ''"
          @click="sceneChange(item)"
        >
          <img
            :src="item.swiperImage[0]"
            alt=""
          />
          <div class="item-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.detail {
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
  overflow: hidden;
  .map-top {
    width: 100%;
    height: 8vh;
    background: var(--color-bg);
    font-size: 1rem;
    text-align: center;
    line-height: 8vh;
    letter-spacing: 3px;
    color: #4d4d4d;
  }
  .ifr {
    width: 100%;
    height: 100%;
  }
  .mini-tabbar {
    width: 100%;
    // height: 22vh;
    background: rgb(34 34 34 / 62%);
    position: absolute;
    bottom: 0;
    // border: 1px dotted white;
    box-sizing: border-box;
    padding: 10px 15px;

    transition: height 2s;

    &-top {
      width: 100%;
      display: flex;
      align-items: center;
      .top-left {
        max-width: 90%;
        overflow: auto;
        display: flex;
        width: 90%;

        .top-item {
          font-size: 0.9rem;
          width: 21%;
          height: 30px;
          background: url(/src\assets\img\panorama\areabg.png);
          background-size: 100% 100%;
          text-align: center;
          line-height: 30px;
          color: #685e47;
          margin-right: 10px;
          font-weight: bold;
        }
      }
      img {
        width: 20px;
        height: 20px;
      }
    }

    &-bottom {
      white-space: nowrap;
      overflow-x: scroll;
      // 隐藏滚动条
      &::-webkit-scrollbar {
        display: none;
      }

      .bottom-item {
        display: inline-block;
        margin-right: 10px;
        box-sizing: border-box;
        width: 23%;
        height: 18vh;
        margin-top: 10px;
        img {
          width: 100%;
          height: 85%;
          object-fit: cover;
        }
        .item-name {
          width: 100%;
          text-align: center;
          font-size: 0.7rem;

          text-overflow: ellipsis; /* ellipsis:显示省略符号来代表被修剪的文本  string:使用给定的字符串来代表被修剪的文本*/
          white-space: nowrap; /* nowrap:规定段落中的文本不进行换行   */
          overflow: hidden;
          color: white;
        }
      }
    }
  }
}
</style>