-- bug

src/components/PathDetailImage.vue

@@ -1,40 +1,69 @@
 <template>
-  <div class="pathDetail" v-if="visiable" :style="{background:`url('${img}') no-repeat`}">
+  <div class="pathDetail" v-if="visiable" :style="{background:`url('${back}') no-repeat`}">
-    <div v-for="(item,i) in chapters" :key="i" class="cha"
+    <div v-for="(item,i) in detail.chapterDtoList" :key="i" class="cha"
          :style="{top:`${imgAttr.positions[i]?.top}px`,left:`${imgAttr.positions[i]?.left}px`}">
-      <div>{{ item.name }}</div>
+      <div @click="toDetail(i)"
+           :style="{background: `url('${current===i?currentBack:nameBack}')`,width:'245px',height:'105px',textAlign:'center',lineHeight:'75px',color:'#FFF'}">
+        {{ item.name }}
+      </div>
     </div>
   </div>
 </template>
 <script setup>
 import {computed, defineProps, ref, watch} from "vue";
+import back from '@/assets/image/pathdetails/路径图背景线@2x.png'
+import nameBack from '@/assets/image/pathdetails/组 23@2x.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,
-  chapters: Array,
+  detail: {
-  current: Number
+    type: Object,
+    default: {}
+  }
 })
+const router = useRouter();
 const visiable = ref(true)
 const imageAttrs = {
   '路径图背景-1671015331292.png': {
     width: 1437,
     height: 594,
     positions: [
-      {left: 50, top: 500},
+      {left: -72, top: 508},
-      {left: 150, top: 400},
+      {left: 147, top: 356},
-      {left: 250, top: 300},
+      {left: 689, top: 263},
-      {left: 450, top: 100},
+      {left: 617, top: 69},
+      {left: 1047, top: 42},
     ]
   }
 }
 
 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}`
+          )}`
+      );
+}
+
 function close() {
   visiable.value = false
 }
@@ -42,11 +71,12 @@ function close() {
 <style lang="scss">
 .pathDetail {
   width: 100%;
-  height: 577px;
+  height: 1011px;
   position: relative;
 }
 
 .cha {
   position: absolute;
+  cursor: pointer;
 }
 </style>

src/views/roadmap/LearnPath.vue

@@ -91,27 +91,26 @@
       <!-- 路径列表-->
       <!-- 路径详情图 -->
       <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="mapdetail">
-        <PathDetailImage img="https://u-pre.boe.com/upload/路径图背景-1671015331292.png" :chapters="chapters"></PathDetailImage>
+        <PathDetailImage img="https://u-pre.boe.com/upload/路径图背景-1671015331292.png" :detail="detail"></PathDetailImage>
       </div>
       <!-- 路径详情图 -->
     </div>
   </div>
 </template>
 <script setup>
-import {reactive, toRefs, ref, onMounted, computed} from "vue";
+import {computed, ref} 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 {usePage} from "@/api/request";
-import {
+import {ROUTER_LIST,} from "@/api/api";
-  ROUTER_LIST,
-} from "@/api/api";
 import {useRouter} from "vue-router";
 import store from "@/store";
 import PathDetailImage from "@/components/PathDetailImage.vue";
 
 const detail = ref();
-const chapters = ref([]);
+const showmapdetail = ref(false);
+const currentStageId = ref();
 const userInfo = computed(() => store.state.userInfo);
 const {data} = usePage(ROUTER_LIST, {pageSize: 60});
 const router = useRouter();
@@ -121,32 +120,13 @@ const returnclick = () => {
 
 // const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});
 
-const state = reactive({
-  showmapdetail: true,
-});
-const {showmapdetail} = toRefs(state);
-
 const returnfun = () => {
-  state.showmapdetail = false;
+  showmapdetail.value = false;
 };
 
-async function gofun({routerId, name: routerName,chapterDtoList}) {
+async function gofun(e) {
-  // console.log(routerId)
+  detail.value = e
-  // const data = await request(ROUTER_CHAPTER_LIST, {stuChapterListVo: {routerId}})
+  showmapdetail.value = true;
-  // 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() {
@@ -263,7 +243,7 @@ function toUnTask() {
 
     .mapdetail {
       width: calc(100% - 107px);
-      height: 577px;
+      min-height: 577px;
       background: rgba(242, 245, 247, 0.6);
       margin-top: 26px;
       border-radius: 8px;