DaLiEH/web/src/components/exhibition/index.vue

<template>
  <div class="parimaryExhibtion" :class="{ daolanactive: isShow }">
    <div class="p-title">
      <div class="p-left">{{ Mylangue ? "当前位置" : "Current Position" }}</div>
      <div class="p-right">{{ Mylangue ? current.name : current.name2 }}</div>
    </div>
    <div class="exh-con">
      <!-- <img :src="require('@/assets/images/map.png')" /> -->
    </div>
    <ul class="exhi-list">
      <li
        @click="handleItem(item.Logo)"
        v-for="(item, i) in list"
        :key="i"
        :class="{ active: item.id === current.id }"
      >
        {{ Mylangue ? item.name : item.name2 }}
      </li>
    </ul>
    <div class="daolan" @click="isShow = !isShow">
      <img :src="require('@/assets/images/icon/daolan.png')" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      list: [
        {
          id: 1,
          name: "负一楼",
          name2: "-1F",
          pano: "56fa4a8ee09542e69e0e5e763cf3a4eb",
          Logo: "1173",
        },
        {
          id: 2,
          name: "一楼",
          name2: "1F",
          Logo: "1171",
          pano: "bd279aa2ee3445658d5949ccdc3d0dec",
        },
        {
          id: 3,
          name: "二楼",
          name2: "2F",
          Logo: "1172",
          pano: "b2431912b20d4df7b81f47821fca6d1a",
        },
      ],
      current: {},
    };
  },
  methods: {
    isShowHide() {
      this.isShow = false;
    },
    // 封装一个隐藏地图的方法，让父组件调用 ↑
    handleItem(val) {
      // 中文版
      if (this.Mylangue) {
        window.location.href =
          window.location.origin + window.location.pathname + `#/?m=${val}`;
      } else
        window.location.href =
          window.location.origin + window.location.pathname + `#/?m=${val}_1`;
      location.reload(true);
    },
  },
  watch: {
    isShow(newVal) {
      let css = newVal ? "0px" : "-310px";
      $(".cad").css({ right: css });

      // 展开地图的时候隐藏移动端的菜单
      if (newVal) this.$emit("meanMHide");
    },
  },
  mounted() {
    this.list.forEach((v) => {
      if (window.location.href.includes(v.Logo)) {
        this.current = v;
        this.$nextTick(() => {
          if (v.id === 3) {
            // 二楼的线粗细
            $("body").addClass("bodyMap2");
            $("body").removeClass("bodyMap1");
          } else {
            // 负一楼和一楼的地图线 粗细
            $("body").addClass("bodyMap1");
            $("body").removeClass("bodyMap2");
          }
        });
      }
    });
  },
};
</script>

<style lang="less" scoped>
.parimaryExhibtion {
  width: 300px;
  transform: translateX(300px);
  transition: all 0.3s ease;
  color: #fff;
  .daolan {
    cursor: pointer;
    position: absolute;
    right: 300px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px 0px 0px 10px;
    border-left: 5px solid #68a0c5;
    top: 24%;
    padding: 15px 5px;
    > img {
      width: 16px;
      transform: rotate(180deg);
      margin-bottom: 4px;
    }
  }
  .p-title {
    transform: translateX(-8px);
    position: relative;
    height: 60px;
    color: #fff;
    .p-left {
      opacity: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 150px;
      height: 60px;
      background: url("../../assets/img/mapt.png");
      background-size: 100% 100%;
      font-size: 16px;
      padding-top: 10px;
    }
    .p-right {
      border-radius: 8px 22px 0 0;
      position: absolute;
      bottom: 0;
      left: 142px;
      width: calc(100% - 134px);
      height: 45px;
      background-color: rgba(104, 160, 197, 0.5);
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
    }
  }
  .exh-con {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 200px;
    border: 2px solid #68a0c5;
  }
  .exhi-list {
    width: 100%;
    display: flex;
    > li {
      // text-align: center;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 0 0 5px 5px;
      flex: 1;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      &:hover {
        background: #165491;
      }
    }
    .active {
      background: #165491;
      pointer-events: none;
    }
  }
}
.exh-con {
  display: flex;
  align-items: center;
  justify-content: center;
  > img {
    width: 80%;
  }
}

.daolanactive {
  transform: translateX(0);
  .p-left {
    opacity: 1 !important;
  }
  .daolan {
    > img {
      width: 16px;
      transform: rotate(0);
      margin-bottom: 4px;
    }
  }
}
@media screen and (max-width: 600px) {
  .parimaryExhibtion {
    transform: translateX(255px) scale(0.7);
  }
  .daolanactive {
    transform: translateX(45px) scale(0.7);
  }
}
</style>