shuangchuangzhou_2022/src/components/bird_view/index.vue

<template>
  <div class="birdview" :style="{ backgroundImage: `url(${require(`@/assets/images/proj2022/pc/birdviewbg.jpg`)})` }">
    <img v-if="!hideClose" class="close" @click="close" :src="require('@/assets/images/proj2022/pc/cancel.png')" alt="" />
    <div class="tag" v-for="(item, i) in themes" :key="i" :class="item.id">
      <img @click="onClick(item)" :src="require(`@/assets/images/proj2022/bird_view/${item.id}.png`)" alt="" />
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      show: true,
      hideClose: false,
      themescene: "",
    };
  },
  methods: {
    close() {
      this.$hideBirdView();
    },
    onClick(data) {
      let fn = () => {
        let currentRegion = region.find((item) => item.id == data.id);
        let { x, y, z, w } = currentRegion.firstView.panoQuaternion;
        window.player.blackToPano({
          pano: window.player.model.panos.index[currentRegion.firstView.panoId],
          quaternion: new window.THREE.Quaternion(x, y, z, w),
        });
      };
      if (window.player.mode != "panorama") {
        window.player.director.changeMode("panorama").then(()=>{
          fn();
          setTimeout(() => {
            this.close();
          }, 300);
        });
      } else {
        setTimeout(() => {
          fn();
          this.close();
        }, 300);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.birdview {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  .close {
    position: absolute;
    right: 30px;
    top: 30px;
    cursor: pointer;
    z-index: 99;
  }

  .tag {
    position: absolute;
    max-width: 10%;
    cursor: pointer;
    display: inline-block;
    &::after {
      pointer-events: none;
      animation: highlight-move 3s infinite;
      background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, 0.3) 50%, hsla(0, 0%, 100%, 0));
      content: "";
      height: 88%;
      left: 0%;
      position: absolute;
      top: 0;
      transform: skewX(-45deg);
      width: 40%;
    }
    > img {
      width: 100%;
    }
  }
  .one {
    top: 48%;
    left: 49%;
  }
  .two {
    top: 38%;
    left: 55%;
  }
  .three {
    top: 30%;
    left: 62%;
  }
  .four {
    top: 15%;
    left: 47%;
  }
  .five {
    top: 23%;
    left: 37%;
  }
  .xuting {
    top: 53%;
    left: 38%;
  }
  .weiting {
    top: 33%;
    left: 30%;
  }
}

@keyframes highlight-move {
  0% {
    left: 0%;
  }

  100% {
    left: 70%;
  }
}
</style>