diff --git a/src/components/PathDetailImage.vue b/src/components/PathDetailImage.vue
index eb65ed0..f0604a9 100644
--- a/src/components/PathDetailImage.vue
+++ b/src/components/PathDetailImage.vue
@@ -1,7 +1,7 @@
 <template>
-  <div 
-    class="pathDetail" 
-    v-if="visiable" 
+  <div
+    class="pathDetail"
+    v-if="visiable"
     :style="{
       background:`url('${imgAttr.backurl}') no-repeat`,
       backgroundSize: 'contain'
@@ -25,15 +25,15 @@
 <script setup>
 import {computed, defineProps, ref, watch} from "vue";
 import {ElMessage} from "element-plus";
-import back from '@/assets/image/pathdetails/pathDetailBack.png'
-import nameBack from '@/assets/image/pathdetails/pathDetailImg.png'
-import currentBack from '@/assets/image/pathdetails/pathDetailImgSelect.png'
-import back1 from '@/assets/image/pathdetails/back1.png'
-import nameBack1 from '@/assets/image/pathdetails/nameBack1.png'
-import currentBack1 from '@/assets/image/pathdetails/currentBack1.png'
-import back2 from '@/assets/image/pathdetails/back2.png'
-import nameBack2 from '@/assets/image/pathdetails/nameBack2.png'
-import currentBack2 from '@/assets/image/pathdetails/currentBack2.png'
+import back from "@/assets/image/pathdetails/pathDetailBack.png";
+import nameBack from "@/assets/image/pathdetails/pathDetailImg.png";
+import currentBack from "@/assets/image/pathdetails/pathDetailImgSelect.png";
+import back1 from "@/assets/image/pathdetails/back1.png";
+import nameBack1 from "@/assets/image/pathdetails/nameBack1.png";
+import currentBack1 from "@/assets/image/pathdetails/currentBack1.png";
+import back2 from "@/assets/image/pathdetails/back2.png";
+import nameBack2 from "@/assets/image/pathdetails/nameBack2.png";
+import currentBack2 from "@/assets/image/pathdetails/currentBack2.png";
 import {useRouter} from "vue-router/dist/vue-router";
 
 const props = defineProps({
@@ -43,84 +43,94 @@ const props = defineProps({
     type: Object,
     default: {}
   }
-})
+});
 const router = useRouter();
-const visiable = ref(true)
+const visiable = ref(true);
 const imageAttrs = {
-  '路径图背景': {
+  "路径图背景": {
     width: 1437,
     height: 594,
-    cheight:70,
-    cheightC:80,
+    cheight: 70,
+    cheightC: 80,
     backurl: back,
     currentBack: currentBack,
     nameBack: nameBack,
-    ccolors: '#FFF',
-    colors: '#FFF',
+    ccolors: "#FFF",
+    colors: "#FFF",
     positions: [
-      {left: 50, top: 425},
-      {left: 440, top: 425},
-      {left: 400, top: 315},
-      {left: 515, top: 220},
-      {left: 800, top: 200},
-      {left: 660, top: 115},
-      {left: 760, top: 35},
-      {left: 1000, top: 25},
+      { left: 50, top: 425 },
+      { left: 440, top: 425 },
+      { left: 400, top: 315 },
+      { left: 515, top: 220 },
+      { left: 800, top: 200 },
+      { left: 660, top: 115 },
+      { left: 760, top: 35 },
+      { left: 1000, top: 25 },
     ]
   },
-  '路径图2': {
+  "路径图2": {
     width: 1437,
     height: 594,
-    cheight:100,
-    cheightC:106,
+    cheight: 100,
+    cheightC: 106,
     backurl: back2,
     currentBack: currentBack2,
     nameBack: nameBack2,
-    ccolors: '#FFF3E5',
-    colors: '#FFF',
+    ccolors: "#FFF3E5",
+    colors: "#FFF",
     positions: [
-      {left: 40, top: 380},
-      {left: 160, top: 290},
-      {left: 330, top: 270},
-      {left: 440, top: 200},
-      {left: 610, top: 170},
-      {left: 780, top: 130},
-      {left: 890, top: 60},
-      {left: 1060, top: 30},
+      { left: 40, top: 380 },
+      { left: 160, top: 290 },
+      { left: 330, top: 270 },
+      { left: 440, top: 200 },
+      { left: 610, top: 170 },
+      { left: 780, top: 130 },
+      { left: 890, top: 60 },
+      { left: 1060, top: 30 },
     ]
   },
-  '路径图3': {
+  "路径图3": {
     width: 1437,
     height: 594,
-    cheight:70,
-    cheightC:80,
+    cheight: 70,
+    cheightC: 80,
     backurl: back1,
     currentBack: currentBack1,
     nameBack: nameBack1,
-    ccolors: '#FFF',
-    colors: '#A06438',
+    ccolors: "#FFF",
+    colors: "#A06438",
     positions: [
-      {left: 20, top: 390},
-      {left: 210, top: 380},
-      {left: 320, top: 275},
-      {left: 485, top: 265},
-      {left: 645, top: 220},
-      {left: 820, top: 180},
-      {left: 960, top: 150},
-      {left: 1050, top:60},
+      { left: 20, top: 390 },
+      { left: 210, top: 380 },
+      { left: 320, top: 275 },
+      { left: 485, top: 265 },
+      { left: 645, top: 220 },
+      { left: 820, top: 180 },
+      { left: 960, top: 150 },
+      { left: 1050, top: 60 },
     ]
   }
-}
+};
 
-const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find(e => props.img&&props.img.includes(e))] || {})
-const current = computed(() => props.detail.chapterDtoList.findIndex(e => e.id === props.detail.currentStageId))
+const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find(e => props.img && props.img.includes(e))] || {});
+const current = computed(() => props.detail.chapterDtoList.findIndex(e => e.id === props.detail.currentStageId));
 //当关卡太多时只显示 当前关卡中间8个
-const currentIndex = computed(() => current.value<3?current.value:props.detail.chapterDtoList.length-current.value<=4?(8-(props.detail.chapterDtoList.length-current.value)):3)
-const startIndex = computed(() => current.value<3?0:props.detail.chapterDtoList.length-current.value<=4?props.detail.chapterDtoList.length-8:current.value-3)
-const showList = computed(() => props.detail.chapterDtoList?.length<=8?props.detail.chapterDtoList:props.detail.chapterDtoList?.slice(startIndex.value,startIndex.value+8))
+const currentIndex = computed(() => {
+  if (props.detail.chapterDtoList?.length <= 8) {
+    return current.value;
+  }
+  return current.value < 3 ? current.value : props.detail.chapterDtoList.length - current.value <= 4 ? (8 - (props.detail.chapterDtoList.length - current.value)) : 3;
+});
+const startIndex = computed(() => {
+  if (props.detail.chapterDtoList?.length <= 8) {
+    return 0;
+  }
+  return current.value < 3 ? 0 : props.detail.chapterDtoList.length - current.value <= 4 ? props.detail.chapterDtoList.length - 8 : current.value - 3;
+});
+const showList = computed(() => props.detail.chapterDtoList?.length <= 8 ? props.detail.chapterDtoList : props.detail.chapterDtoList?.slice(startIndex.value, startIndex.value + 8));
 
 function show() {
-  visiable.value = true
+  visiable.value = true;
 }
 
 function toDetail(i) {
@@ -128,53 +138,53 @@ function toDetail(i) {
   let previewSetting = props.detail.previewSetting;
   let studySetting = props.detail.studySetting;
   let isStudy = false;
-  let chapterId = props.detail.chapterDtoList[i].id
-  console.log(studySetting)
-  if(previewSetting==null){
+  let chapterId = props.detail.chapterDtoList[i].id;
+  console.log(studySetting);
+  if (previewSetting == null) {
     // 如果未设置预览 则只可以看当前关卡 其余关卡不让点击
     if (current.value !== i) {
       ElMessage.warning("当前关卡不可预览");
-      return
+      return;
     }
     isStudy = true;
-  }else{
+  } else {
     if (current.value !== i) {
       let lookArr = [];
-      lookArr = previewSetting.split(',')
-      if((i+1)>=lookArr[0] && (i+1)<=lookArr[1]){
-        if(studySetting!==null){
+      lookArr = previewSetting.split(",");
+      if ((i + 1) >= lookArr[0] && (i + 1) <= lookArr[1]) {
+        if (studySetting !== null) {
           let studyArr = [];
-          studyArr = studySetting.split(',')
-          if((i+1)>=studyArr[0] && (i+1)<=studyArr[1]){
+          studyArr = studySetting.split(",");
+          if ((i + 1) >= studyArr[0] && (i + 1) <= studyArr[1]) {
             isStudy = true;
-          }else{
+          } else {
             isStudy = false;
           }
-        }else{
+        } else {
           isStudy = false;
         }
-      }else{
+      } else {
         ElMessage.warning("当前关卡不可预览");
-        return
+        return;
       }
-    }else{
+    } else {
       isStudy = true;
     }
   }
   (import.meta.env.MODE === "development" || import.meta.env.MODE === "test")
-      ? router.push({
-        path: "/pathdetails",
-        query: {routerId: props.detail.id, routerName: props.detail.name, isStudy, chapterId},
-      })
-      : window.open(
-          `${window.location.protocol + import.meta.env.VITE_BOE_PATH_DETAIL_URL}/pathdetails&params=${encodeURIComponent(
-              `routerId=${props.detail.id}&routerName=${props.detail.name}&chapterId=${chapterId}&isStudy=${isStudy}`
-          )}`
-      ,'_top');
+    ? router.push({
+      path: "/pathdetails",
+      query: { routerId: props.detail.id, routerName: props.detail.name, isStudy, chapterId },
+    })
+    : window.open(
+      `${window.location.protocol + import.meta.env.VITE_BOE_PATH_DETAIL_URL}/pathdetails&params=${encodeURIComponent(
+        `routerId=${props.detail.id}&routerName=${props.detail.name}&chapterId=${chapterId}&isStudy=${isStudy}`
+      )}`
+      , "_top");
 }
 
 function close() {
-  visiable.value = false
+  visiable.value = false;
 }
 </script>
 <style lang="scss">
@@ -189,12 +199,13 @@ function close() {
   position: absolute;
   cursor: pointer;
 }
-.nameClass{
+
+.nameClass {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   -o-text-overflow: ellipsis;
-  padding:0 20px 0 50px;
+  padding: 0 20px 0 50px;
   font-size: 12px;
 }
 </style>
\ No newline at end of file