-- bug

src/components/PathDetailImage.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="pathDetail" v-if="visiable" :style="{background:`url('${img}') no-repeat`}">
+    <div v-for="(item,i) in chapters" :key="i" class="cha"
+         :style="{top:`${imgAttr.positions[i]?.top}px`,left:`${imgAttr.positions[i]?.left}px`}">
+      <div>{{ item.name }}</div>
+    </div>
+  </div>
+</template>
+<script setup>
+import {computed, defineProps, ref, watch} from "vue";
+
+const props = defineProps({
+  value: String,
+  img: String,
+  chapters: Array,
+  current: Number
+})
+const visiable = ref(true)
+const imageAttrs = {
+  '路径图背景-1671015331292.png': {
+    width: 1437,
+    height: 594,
+    positions: [
+      {left: 50, top: 500},
+      {left: 150, top: 400},
+      {left: 250, top: 300},
+      {left: 450, top: 100},
+    ]
+  }
+}
+
+const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find(e => props.img.includes(e))] || {})
+
+function show() {
+  visiable.value = true
+}
+
+function close() {
+  visiable.value = false
+}
+</script>
+<style lang="scss">
+.pathDetail {
+  width: 100%;
+  height: 577px;
+  position: relative;
+}
+
+.cha {
+  position: absolute;
+}
+</style>