new_era/src/components/bird_view/index.vue

<template>
  <div
    class="birdview"
    :class="{ birdview_ipad: isiPad, birdview_pad_notlandscape: isiPad && !g_isLandscape }"
    :style="{ backgroundImage: `url(${require(`@/assets/images/proj2022/birdviewbg.jpg`)})` }"
  >
    <!-- <img v-if="!hideClose" class="close" @click="close" :src="require('@/assets/images/proj2022/pc/cancel.png')" alt="" /> -->

    <div class="modelcon">
      <img :src="require(`@/assets/images/proj2022/model.png`)" alt="" />
      <div class="tag" v-for="(item, i) in tags" :key="i" :style="{ top: item.top, left: item.left, width: item.width, height: item.height }">
        <img @click="onClick(item)" :src="require(`@/assets/images/proj2022/bird_view/${item.eng}${currentId == item.id ? '_acitve' : ''}.svg`)" alt="" />
      </div>
    </div>
    <!-- <roundMenu :noMode="true" /> -->
  </div>
</template>

<script>
import { region } from "@/data/raw.js";
import { Booth } from "@/data/booth.js";

// import roundMenu from "../menu/index.vue";

let bb = [];

Booth.forEach((item) => {
  bb = bb.concat(item.company);
});

export default {
  data() {
    return {
      show: true,
      hideClose: false,
      themescene: "",
      tags: bb,
      currentId: "",
    };
  },
  watch: {
    show: {
      deep: true,
      immediate: true,
      handler: function(newVal) {
        this.$bus.$emit("noMode", newVal);
      },
    },
  },
  // components:{roundMenu},
  methods: {
    close() {
      this.$hideBirdView();
    },
    onClick(data) {
      this.currentId = data.id;
      let player = window.player;
      if (!player) {
        this.$bus.$emit("resetCurrentTheme");

        this.$bus.$emit("ifrMessage", {
          events: "flyToPano",
          data: data,
        });
        setTimeout(() => {
          this.close();
        }, 400);
        return;
      }

      let fn = () => {
        let currentRegion = region.find((item) => item.id == data.id);
        let { x, y, z, w } = currentRegion.firstView.panoQuaternion;
        let fnname = "flyToPano";
        if (player.mode == "panorama") {
          fnname = "blackToPano";
        }
        player[fnname]({
          pano: player.model.panos.index[currentRegion.firstView.panoId],
          quaternion: new window.THREE.Quaternion(x, y, z, w),
        });
      };

      setTimeout(() => {
        fn();
        this.close();
        this.currentId = "";
      }, 300);
    },
  },
};
</script>

<style lang="less" scoped>
.birdview {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 4001;
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
  .close {
    position: absolute;
    right: 30px;
    top: 30px;
    cursor: pointer;
    z-index: 99;
  }
  .modelcon {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    > img {
      width: 90%;
    }
    .tag {
      position: absolute;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      top: 50%;
      left: 50%;
      // background: rgba(0, 0, 0, 0.5);
      // width: 10%;
      height: 15%;
      &:hover {
        > img {
          display: inline-block;
          width: 9vw;
          position: absolute;
          left: 50%;
          transform: translate(-50%, -50%);
          top: 10%;
        }
      }

      &:first-of-type {
        top: 17%;
        left: 6%;
        width: 45%;
        height: 49%;
        clip-path: polygon(0 40%, 70% 0%, 100% 50%, 25% 100%);
        &:hover {
          > img {
            top: 40%;
          }
        }
      }

      > img {
        width: 100%;
        display: none;
      }
    }
  }

  .birdview_ipad {
  }
  .birdview_pad_notlandscape {
  }
}
</style>