diff --git a/src/components/PathDetailImage.vue b/src/components/PathDetailImage.vue
new file mode 100644
index 0000000..15c99df
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/roadmap/LearnPath.vue b/src/views/roadmap/LearnPath.vue
index 7a25d22..8371b22 100644
--- a/src/views/roadmap/LearnPath.vue
+++ b/src/views/roadmap/LearnPath.vue
@@ -1,79 +1,80 @@
 <template>
-	<div class="learnpath">
-		<div class="content">
-			<div class="title">
-				<div class="titleL">
-					<div @click="returnfun" class="text">学习路径图</div>
-					<div class="info" style="margin-right: 14px" v-if="userInfo.jobName">
-						<img style="width: 20px; height: 18px; margin-right: 10px" src="../../assets/image/pm.png" />
-						<div style="margin-top: 1px">{{ userInfo.jobName }}</div>
-					</div>
-					<div class="info" v-if="userInfo.bandDesc">
-						<img style="width: 18px; height: 17px; margin-right: 11px" src="../../assets/image/band.png" />
-						<div style="margin-top: 2px">{{ userInfo.bandDesc }}</div>
-					</div>
-				</div>
-				<div :style="{ display: !showmapdetail ? 'flex' : 'none' }">
-					<!--          <el-popover width="475px" trigger="hover" popper-class="lppopover">-->
-					<!--            <div>-->
-					<!--              <div class="finish">-->
-					<!--                <img-->
-					<!--                    src="../../assets/image/circle.png"-->
-					<!--                    style="width: 20px; height: 20px"-->
-					<!--                />-->
-					<!--                <div class="text">未完成</div>-->
-					<!--                <div class="box"></div>-->
-					<!--              </div>-->
-					<!--              <div-->
-					<!--                  v-for="(value, index) in unCompleteTaskList"-->
-					<!--                  :key="index"-->
-					<!--                  class="tasks"-->
-					<!--                  :style="{-->
-					<!--                  'border-bottom':-->
-					<!--                    index === unCompleteTaskList.length - 1-->
-					<!--                      ? null-->
-					<!--                      : '1px solid rgba(229, 228, 228, 1)',-->
-					<!--                }"-->
-					<!--              >-->
-					<!--                <div style="font-size: 14px; font-weight: 500; color: #677d86">-->
-					<!--                  {{ value.name }}-->
-					<!--                </div>-->
-					<!--                <img-->
-					<!--                    style="width: 20px; height: 20px"-->
-					<!--                    src="../../assets/image/go.png"-->
-					<!--                    @click="toUnTask(chapterId)"-->
-					<!--                />-->
-					<!--              </div>-->
-					<!--            </div>-->
-					<!--            <template #reference>-->
-					<!--              todo #学习路径 只会有一个未完成任务么?是否是直接跳到任务详情-->
-					<!--              <div class="titleR">进入未完成任务</div>-->
-					<!--            </template>-->
-					<!--          </el-popover>-->
-				</div>
-				<div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="titleR" @click="returnfun">
-					返回列表
-				</div>
-			</div>
-			<!-- 路径列表-->
-			<div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
-				<div style="min-width: 770px; width: 100%">
-					<el-table :data="data" style="width: 100%" @row-click="gofun">
-						<el-table-column prop="img" label="缩略图" #default="scope" align="center" width="255">
-							<img :src="scope.row.picUrl" style="width: 230px; height: 155px" />
-						</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">
-								<template #reference>
-									<div>{{ scope.row.remark }}</div>
-								</template>
-							</el-popover>
-						</el-table-column>
+  <div class="learnpath">
+    <div class="content">
+      <div class="title">
+        <div class="titleL">
+          <div @click="returnfun" class="text">学习路径图</div>
+          <div class="info" style="margin-right: 14px" v-if="userInfo.jobName">
+            <img style="width: 20px; height: 18px; margin-right: 10px" src="../../assets/image/pm.png"/>
+            <div style="margin-top: 1px">{{ userInfo.jobName }}</div>
+          </div>
+          <div class="info" v-if="userInfo.bandDesc">
+            <img style="width: 18px; height: 17px; margin-right: 11px" src="../../assets/image/band.png"/>
+            <div style="margin-top: 2px">{{ userInfo.bandDesc }}</div>
+          </div>
+        </div>
+        <div :style="{ display: !showmapdetail ? 'flex' : 'none' }">
+          <!--          <el-popover width="475px" trigger="hover" popper-class="lppopover">-->
+          <!--            <div>-->
+          <!--              <div class="finish">-->
+          <!--                <img-->
+          <!--                    src="../../assets/image/circle.png"-->
+          <!--                    style="width: 20px; height: 20px"-->
+          <!--                />-->
+          <!--                <div class="text">未完成</div>-->
+          <!--                <div class="box"></div>-->
+          <!--              </div>-->
+          <!--              <div-->
+          <!--                  v-for="(value, index) in unCompleteTaskList"-->
+          <!--                  :key="index"-->
+          <!--                  class="tasks"-->
+          <!--                  :style="{-->
+          <!--                  'border-bottom':-->
+          <!--                    index === unCompleteTaskList.length - 1-->
+          <!--                      ? null-->
+          <!--                      : '1px solid rgba(229, 228, 228, 1)',-->
+          <!--                }"-->
+          <!--              >-->
+          <!--                <div style="font-size: 14px; font-weight: 500; color: #677d86">-->
+          <!--                  {{ value.name }}-->
+          <!--                </div>-->
+          <!--                <img-->
+          <!--                    style="width: 20px; height: 20px"-->
+          <!--                    src="../../assets/image/go.png"-->
+          <!--                    @click="toUnTask(chapterId)"-->
+          <!--                />-->
+          <!--              </div>-->
+          <!--            </div>-->
+          <!--            <template #reference>-->
+          <!--              todo #学习路径 只会有一个未完成任务么?是否是直接跳到任务详情-->
+          <!--              <div class="titleR">进入未完成任务</div>-->
+          <!--            </template>-->
+          <!--          </el-popover>-->
+        </div>
+        <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="titleR" @click="returnfun">
+          返回列表
+        </div>
+      </div>
+      <!-- 路径列表-->
+      <div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
+        <div style="min-width: 770px; width: 100%">
+          <el-table :data="data" style="width: 100%" @row-click="gofun">
+            <el-table-column prop="img" label="缩略图" #default="scope" align="center" width="255">
+              <img :src="scope.row.picUrl" style="width: 230px; height: 155px"/>
+            </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">
+                <template #reference>
+                  <div>{{ scope.row.remark }}</div>
+                </template>
+              </el-popover>
+            </el-table-column>
 
-						<el-table-column align="center" prop="organizationName" label="归属组织" />
-						<el-table-column #default="scope" align="center" :width="150" prop="state" label="状态">
-							<img :src="
+            <el-table-column align="center" prop="organizationName" label="归属组织"/>
+            <el-table-column #default="scope" align="center" :width="150" prop="state" label="状态">
+              <img :src="
 								scope.row.taskStatus === 1
 									? ongoing
 									: scope.row.taskStatus === 2
@@ -81,243 +82,240 @@
 										: scope.row.taskStatus === 0
 											? nostarted
 											: null
-							" style="width: 99px; height: 99px" />
-						</el-table-column>
-					</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">
-					<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>
-	</div>
+							" style="width: 99px; height: 99px"/>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <!--      :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"-->
+      <!-- 路径列表-->
+      <!-- 路径详情图 -->
+      <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="mapdetail">
+        <PathDetailImage img="https://u-pre.boe.com/upload/路径图背景-1671015331292.png" :chapters="chapters"></PathDetailImage>
+      </div>
+      <!-- 路径详情图 -->
+    </div>
+  </div>
 </template>
 <script setup>
-import { reactive, toRefs, ref, onMounted, computed } from "vue";
+import {reactive, toRefs, ref, onMounted, computed} from "vue";
 import nostarted from "../../assets/image/nostarted.png";
 import completed from "../../assets/image/completed.png";
 import ongoing from "../../assets/image/ongoing.png";
-import { boeRequest, request, usePage, useRequest } from "@/api/request";
+import {boeRequest, request, usePage, useRequest} from "@/api/request";
 import {
-	ROUTER_CHAPTER_LIST,
-	ROUTER_LIST,
-	ROUTER_UNCOMPLETE_LIST,
+  ROUTER_LIST,
 } from "@/api/api";
-import { useImage } from "@/api/utils";
-import { useRouter } from "vue-router";
+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 {data} = usePage(ROUTER_LIST, {pageSize: 60});
 const router = useRouter();
 const returnclick = () => {
-	router.back();
+  router.back();
 };
 
 // const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});
 
 const state = reactive({
-	showmapdetail: false,
+  showmapdetail: true,
 });
-const { showmapdetail } = toRefs(state);
+const {showmapdetail} = toRefs(state);
 
 const returnfun = () => {
-	state.showmapdetail = false;
+  state.showmapdetail = false;
 };
 
-async function gofun({ routerId, name: routerName }) {
-	// console.log(routerId)
-	// const data = await request(ROUTER_CHAPTER_LIST, {stuChapterListVo: {routerId}})
-	// detail.value = data.data
-	// state.showmapdetail = true;
-	// router.push({path: "/pathdetails", query: {routerId}});
-	import.meta.env.MODE === "development"
-		? router.push({
-			path: "/pathdetails",
-			query: { routerId, routerName },
-		})
-		: window.open(
-			`${import.meta.env.VITE_BOE_PATH_DETAIL_URL}/pathdetails&params=${encodeURIComponent(
-				`routerId=${routerId}&routerName=${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({
+        path: "/pathdetails",
+        query: {routerId, routerName},
+      })
+      : window.open(
+          `${import.meta.env.VITE_BOE_PATH_DETAIL_URL}/pathdetails&params=${encodeURIComponent(
+              `routerId=${routerId}&routerName=${routerName}`
+          )}`
+      );
+}
+
+function toUnTask() {
 }
-function toUnTask() { }
 </script>
 <style lang="scss">
 #app div:nth-child(1) {
-	// background: rgba(0, 0, 0, 0) !important;
+  // background: rgba(0, 0, 0, 0) !important;
 }
 
-.modal {}
+.modal {
+}
 
 .modal:after {
-	content: "";
+  content: "";
 }
 
 .learnpath {
-	width: 100%;
-	min-height: 800px;
-	//border-radius: 8px;
-	background-color: rgba(255, 255, 255, 1);
-	display: flex;
+  width: 100%;
+  min-height: 800px;
+  //border-radius: 8px;
+  background-color: rgba(255, 255, 255, 1);
+  display: flex;
 
-	.content {
-		width: 100%;
-		// flex: 1;
-		margin-top: 43px;
+  .content {
+    width: 100%;
+    // flex: 1;
+    margin-top: 43px;
+    position: relative;
+    // background-color: pink;
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-left: 53px;
+      margin-right: 54px;
+    }
 
-		// background-color: pink;
-		.title {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			margin-left: 53px;
-			margin-right: 54px;
-		}
+    .title .titleL {
+      display: flex;
+      align-items: center;
+    }
 
-		.title .titleL {
-			display: flex;
-			align-items: center;
-		}
+    .title .titleL .text {
+      font-size: 18px;
+      font-weight: bold;
+      color: #333333;
+      line-height: 24px;
+      margin-right: 26px;
+    }
 
-		.title .titleL .text {
-			font-size: 18px;
-			font-weight: bold;
-			color: #333333;
-			line-height: 24px;
-			margin-right: 26px;
-		}
+    .title .titleL .info {
+      display: flex;
+      // align-items: center;
+      font-size: 14px;
+      font-weight: 400;
+      color: #387df7;
+    }
 
-		.title .titleL .info {
-			display: flex;
-			// align-items: center;
-			font-size: 14px;
-			font-weight: 400;
-			color: #387df7;
-		}
+    .title .titleR {
+      width: 157px;
+      height: 48px;
+      border: 2px solid #0060ff;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 16px;
+      font-weight: bold;
+      color: #0060ff;
+    }
 
-		.title .titleR {
-			width: 157px;
-			height: 48px;
-			border: 2px solid #0060ff;
-			border-radius: 8px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			cursor: pointer;
-			font-size: 16px;
-			font-weight: bold;
-			color: #0060ff;
-		}
+    .head {
+      // height: 50px;
+      background: #f9f9f9;
+      margin-top: 50px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 14px;
+      font-weight: 500;
+      color: #333333;
+      margin-left: 53px;
+      margin-right: 54px;
+      width: calc(100% - 107px);
+      // min-width: 770px;
+      overflow-x: auto;
 
-		.head {
-			// height: 50px;
-			background: #f9f9f9;
-			margin-top: 50px;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			font-size: 14px;
-			font-weight: 500;
-			color: #333333;
-			margin-left: 53px;
-			margin-right: 54px;
-			width: calc(100% - 107px);
-			// min-width: 770px;
-			overflow-x: auto;
+      .el-table th.el-table__cell {
+        background: rgba(249, 249, 249, 1);
+        color: rgba(51, 51, 51, 1);
+        font-size: 14px;
+        font-weight: 500;
+      }
 
-			.el-table th.el-table__cell {
-				background: rgba(249, 249, 249, 1);
-				color: rgba(51, 51, 51, 1);
-				font-size: 14px;
-				font-weight: 500;
-			}
+      .el-table .cell {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        word-break: break-all;
+      }
 
-			.el-table .cell {
-				overflow: hidden;
-				text-overflow: ellipsis;
-				width: 100%;
-				display: -webkit-box;
-				-webkit-box-orient: vertical;
-				-webkit-line-clamp: 3;
-				word-break: break-all;
-			}
+      .el-table__row {
+        height: 231px;
+        font-size: 14px;
+        color: rgba(102, 102, 102, 1);
+        font-weight: 500;
+      }
+    }
 
-			.el-table__row {
-				height: 231px;
-				font-size: 14px;
-				color: rgba(102, 102, 102, 1);
-				font-weight: 500;
-			}
-		}
-
-		.mapdetail {
-			width: calc(100% - 107px);
-			height: 577px;
-			background: rgba(242, 245, 247, 0.6);
-			margin-top: 26px;
-			border-radius: 8px;
-			margin-left: 53px;
-			margin-right: 54px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-	}
+    .mapdetail {
+      width: calc(100% - 107px);
+      height: 577px;
+      background: rgba(242, 245, 247, 0.6);
+      margin-top: 26px;
+      border-radius: 8px;
+      margin-left: 53px;
+      margin-right: 54px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
 }
 
 .lppopover {
-	.finish {
-		padding-left: 27px;
-		padding-right: 18px;
-		margin-top: 15px;
-		margin-bottom: 17px;
-		position: relative;
-		display: flex;
-		align-items: center;
-	}
+  .finish {
+    padding-left: 27px;
+    padding-right: 18px;
+    margin-top: 15px;
+    margin-bottom: 17px;
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
 
-	.text {
-		font-size: 16px;
-		font-weight: 800;
-		color: #333333;
-		margin-left: 8px;
-	}
+  .text {
+    font-size: 16px;
+    font-weight: 800;
+    color: #333333;
+    margin-left: 8px;
+  }
 
-	.box {
-		width: 59px;
-		height: 10px;
-		background-color: rgba(36, 120, 255, 0.15);
-		position: absolute;
-		left: 50px;
-		top: 15px;
-	}
+  .box {
+    width: 59px;
+    height: 10px;
+    background-color: rgba(36, 120, 255, 0.15);
+    position: absolute;
+    left: 50px;
+    top: 15px;
+  }
+
+  .tasks {
+    width: 405px;
+    height: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-left: 28px;
+    cursor: pointer;
+  }
 
-	.tasks {
-		width: 405px;
-		height: 52px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-left: 28px;
-		cursor: pointer;
-	}
   .box-item {
-  width: 200px;
-  margin-top: 10px;
-}
+    width: 200px;
+    margin-top: 10px;
+  }
 }
 </style>
diff --git a/src/views/roadmap/PathDetails.vue b/src/views/roadmap/PathDetails.vue
index 2d3a7bd..f33f854 100644
--- a/src/views/roadmap/PathDetails.vue
+++ b/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]