shuangchuangzhou_2022/src/pages/mobilescene/birdview/index.vue

<template>
  <div class="birdview">
    <ViewOperation>
      <div class="birdcon">
        <img class="bd_bg" :src="require(`@/assets/images/proj2022/pc/birdviewbg.jpg`)" 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>
    </ViewOperation>
    <img v-if="!hideClose" class="close" @click="close" :src="require('@/assets/images/proj2022/pc/cancel.png')" alt="" />
  </div>
</template>

<script>
import ViewOperation from "./ViewOperation";

export default {
  props: ["hideClose"],
  data() {
    return {};
  },
  components: {
    ViewOperation,
  },
  methods: {
    close() {
      this.$emit("close");
    },
    onClick(data) {
      console.log(data);
      this.$router.push({
        name: "scene",
        params: { type: data.id, isjump: "yes" },
      });
      setTimeout(() => {
        this.close();
      }, 300);
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.birdview {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  .close {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
    z-index: 99;
  }
  .birdcon {
    height: 100%;
    width: auto;
    position: relative;
    .bd_bg {
      width: auto;
      height: 100%;
    }

    .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: 49%;
      left: 49%;
    }
    .two {
      top: 41%;
      left: 55%;
    }
    .three {
      top: 35%;
      left: 62%;
    }
    .four {
      top: 18%;
      left: 47%;
    }
    .five {
      top: 26%;
      left: 37%;
    }
    .xuting {
      top: 54%;
      left: 38%;
    }
    .weiting {
      top: 35%;
      left: 30%;
    }
  }
}

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

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