操作指引＜area＞标签的使用

https://www.runoob.com/tags/tag-area.html

标签定义及使用说明
标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。
通俗来说:
一张图片中有不同点击操作 点击图中对应操作按钮实现不同的显示等跳转等功能

<template>
  <div class="user-guide-report">
    <div id="masker" v-if="currentStep > 0"></div>
    <div
      id="step1"
      class="top-44px right-120px 2xl:top-16px 2xl:right-145px"
      v-show="currentStep == 1"
      ><img :src="Step1" id="imgStep1" usemap="#mapStep1"
    /></div>
    <div id="step2" v-show="currentStep == 2"
      ><img :src="Step2" id="imgStep2" usemap="#mapStep2"
    /></div>
    <map name="mapStep1">
      <area
        shape="rect"
        coords="280,198,354,229"
        alt="下一步"
        @click="goNext"
        class="cursor-pointer"
      />
      <area shape="circle" coords="345,35,10" alt="关闭" class="cursor-pointer" @click="onClose" />
    </map>
    <map name="mapStep2">
      <area
        shape="rect"
        coords="780,196,854,229"
        alt="上一步"
        class="cursor-pointer"
        @click="goPrev"
      />
      <area
        shape="rect"
        coords="867,196,941,229"
        alt="我知道了"
        class="cursor-pointer"
        @click="onClose"
      />
      <area shape="circle" coords="932,36,10" alt="关闭" class="cursor-pointer" @click="onClose" />
    </map>
  </div>
</template>
<script lang="ts" setup name="UserGuideReport">
  import { Close, WarningFilled, QuestionFilled } from '@element-plus/icons-vue'
  import { PROCESS_NODE_TYPE } from '@/utils/enums'
  import { ElMessage } from 'element-plus'
  import { useAchievementStore } from '@/store/achievement'
  import { useAppStore } from '@/store/app'
  import Step1 from '@/assets/guide-images/step-1-1.png'
  import Step2 from '@/assets/guide-images/step-1-2.png'
  const router = useRouter()
  const route = useRoute()
  const achievementStore = useAchievementStore()
  const appStore = useAppStore()

  const showUserGuide = computed(() => {
    const currentProcessNode = achievementStore.currentProcessNode
    if (currentProcessNode && currentProcessNode.processNodeType == PROCESS_NODE_TYPE.责任书填报) {
      return !appStore.userGuideConfirm.report
    }
    return false
  })

  const currentStep = ref(1)
  const goNext = () => {
    currentStep.value++
  }
  const goPrev = () => {
    currentStep.value--
  }
  const onClose = () => {
    appStore.userGuideConfirm.report = true
    currentStep.value = 0
  }
</script>
<style lang="scss" scoped>
  #step1,
  #step2 {
    position: absolute;
    z-index: 9999;
  }

  #step2 {
    top: 326px;
    left: 16px;
  }
  #imgStep1 {
    width: 520px;
    height: 251px;
  }
  #imgStep2 {
    width: 964px;
    height: 251px;
  }
  #masker {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9998;
    background: #000;
    opacity: 0.4;
  }
</style>