-- 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>

src/views/roadmap/LearnPath.vue

@@ -64,7 +64,8 @@
             </el-table-column>
             <el-table-column align="center" prop="name" label="路径名称"/>
             <el-table-column align="center" prop="introduce" label="路径介绍" #default="scope">
-							<el-popover placement="bottom-start"   :width="400"  title="路径介绍" trigger="hover" :content="scope.row.remark">
+              <el-popover placement="bottom-start" :width="400" title="路径介绍" trigger="hover"
+                          :content="scope.row.remark">
                 <template #reference>
                   <div>{{ scope.row.remark }}</div>
                 </template>
@@ -86,17 +87,11 @@
           </el-table>
         </div>
       </div>
-
       <!--      :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"-->
       <!-- 路径列表-->
       <!-- 路径详情图 -->
       <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="mapdetail">
-				<div v-for="(item, i) in detail?.rows" :key="i">
+        <PathDetailImage img="https://u-pre.boe.com/upload/路径图背景-1671015331292.png" :chapters="chapters"></PathDetailImage>
-					<img :src="useImage(`222_0${i + 2}.png`)" />
-				</div>
-				<!--        <div class="modal"-->
-				<!--             style="width: calc(100% - 168px); height: 525px;background-image: url('../../src/assets/image/mapdetail.png');background-size: 100%;background-repeat: no-repeat;">-->
-				<!--        </div>-->
       </div>
       <!-- 路径详情图 -->
     </div>
@@ -109,18 +104,16 @@ import completed from "../../assets/image/completed.png";
 import ongoing from "../../assets/image/ongoing.png";
 import {boeRequest, request, usePage, useRequest} from "@/api/request";
 import {
-	ROUTER_CHAPTER_LIST,
   ROUTER_LIST,
-	ROUTER_UNCOMPLETE_LIST,
 } from "@/api/api";
-import { useImage } from "@/api/utils";
 import {useRouter} from "vue-router";
 import store from "@/store";
+import PathDetailImage from "@/components/PathDetailImage.vue";
 
 const detail = ref();
+const chapters = ref([]);
 const userInfo = computed(() => store.state.userInfo);
 const {data} = usePage(ROUTER_LIST, {pageSize: 60});
-console.log("datadata", data);
 const router = useRouter();
 const returnclick = () => {
   router.back();
@@ -129,7 +122,7 @@ const returnclick = () => {
 // const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});
 
 const state = reactive({
-	showmapdetail: false,
+  showmapdetail: true,
 });
 const {showmapdetail} = toRefs(state);
 
@@ -137,11 +130,12 @@ const returnfun = () => {
   state.showmapdetail = false;
 };
 
-async function gofun({ routerId, name: routerName }) {
+async function gofun({routerId, name: routerName,chapterDtoList}) {
   // console.log(routerId)
   // const data = await request(ROUTER_CHAPTER_LIST, {stuChapterListVo: {routerId}})
   // detail.value = data.data
   // state.showmapdetail = true;
+  chapters.value = chapterDtoList
   // router.push({path: "/pathdetails", query: {routerId}});
   import.meta.env.MODE === "development"
       ? router.push({
@@ -154,14 +148,17 @@ async function gofun({ routerId, name: routerName }) {
           )}`
       );
 }
-function toUnTask() { }
+
+function toUnTask() {
+}
 </script>
 <style lang="scss">
 #app div:nth-child(1) {
   // background: rgba(0, 0, 0, 0) !important;
 }
 
-.modal {}
+.modal {
+}
 
 .modal:after {
   content: "";
@@ -178,7 +175,7 @@ function toUnTask() { }
     width: 100%;
     // flex: 1;
     margin-top: 43px;
-
+    position: relative;
     // background-color: pink;
     .title {
       display: flex;
@@ -315,6 +312,7 @@ function toUnTask() { }
     margin-left: 28px;
     cursor: pointer;
   }
+
   .box-item {
     width: 200px;
     margin-top: 10px;

src/views/roadmap/PathDetails.vue

@@ -125,7 +125,7 @@
                 @click="toFinish(value)"
             >
               {{
-                value.status === 1
+                value.currentRatio === 1
                     ? "已完成"
                     : types.path[value.type]
                         ? types.toName[value.type]