fe-student/src/components/PathDetailImage.vue

<template>
  <div class="pathDetail" v-if="visiable" :style="{background:`url('${back}') no-repeat`}">
    <div v-for="(item,i) in detail.chapterDtoList" :key="i" class="cha"
         :style="{top:`${imgAttr.positions[i]?.top - (current===i?5:0)}px`,left:`${imgAttr.positions[i]?.left - (current===i?10:0)}px`}">
      <div @click="toDetail(i)"
           class="nameClass"
           :title="item.name"
           :style="{background: `url('${current===i?currentBack:nameBack}')`,backgroundSize:'100%',width:`${current===i?107:93}px`,height:`${current===i?80:70}px`,lineHeight:'50px',color:'#FFF'}">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, defineProps, ref, watch} from "vue";
import back from '@/assets/image/pathdetails/组 21.png'
import nameBack from '@/assets/image/pathdetails/组 23.png'
import currentBack from '@/assets/image/pathdetails/组 23(1).png'
import {useRouter} from "vue-router/dist/vue-router";

const props = defineProps({
  value: String,
  img: String,
  detail: {
    type: Object,
    default: {}
  }
})
const router = useRouter();
const visiable = ref(true)
const imageAttrs = {
  '路径图背景-1671015331292.png': {
    width: 1437,
    height: 594,
    positions: [
      {left: 63, top: 503},
      {left: 828, top: 455},
      {left: 268, top: 325},
      {left: 1087, top: 183},
      {left: 647, top: 84},
      {left: 1180, top: 40},
    ]
  }
}

const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find(e => props.img.includes(e))] || {})

const current = computed(() => props.detail.chapterDtoList.findIndex(e => e.chapterId === props.detail.currentStageId))

function show() {
  visiable.value = true
}

function toDetail(i) {
  if (current.value !== i) {
    return
  }
  import.meta.env.MODE === "development"
      ? router.push({
        path: "/pathdetails",
        query: {routerId: props.detail.routerId, routerName: props.detail.routerName},
      })
      : window.open(
          `${import.meta.env.VITE_BOE_PATH_DETAIL_URL}/pathdetails&params=${encodeURIComponent(
              `routerId=${props.detail.routerId}&routerName=${props.detail.routerName}`
          )}`
      ,'_top');
}

function close() {
  visiable.value = false
}
</script>
<style lang="scss">
.pathDetail {
  width: 100%;
  height: 1011px;
  position: relative;
}

.cha {
  position: absolute;
  cursor: pointer;
}
.nameClass{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  padding:0 20px 0 50px;
  font-size: 12px;
}
</style>