NanjingMuseumWuJinZang-PC/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 { useWindowSize } from "@vueuse/core"


const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
const { width: windowWidth, height: windowHeight } = useWindowSize()

</script>

<style lang="less" scoped>
.hotspot{
  width: calc(48px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
  height: calc(48px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
  >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>