NanjingMuseumWuJinZang/src/components/HotspotForHomepage.vue

<template>
  <div class="hotspot animation-show-hide-for-home-hotspot">
    <img
      class=""
      src="@/assets/images/icon_hotspot.png"
      alt=""
      draggable="false"
    >
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, inject } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import useSizeAdapt from "@/useFunctions/useSizeAdapt"

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

const route = useRoute()
const router = useRouter()
const store = useStore()

const $env = inject('$env')
</script>

<style lang="less" scoped>
.hotspot{
  width: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  >img{
    width: 100%;
    height: 100%;
  }
}
.animation-show-hide-for-home-hotspot {
  animation: show-hide 2.5s infinite;
}
@keyframes show-hide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>