diff --git a/src/components/PathDetailImage.vue b/src/components/PathDetailImage.vue
index 64b05eb..eb65ed0 100644
--- a/src/components/PathDetailImage.vue
+++ b/src/components/PathDetailImage.vue
@@ -6,24 +6,24 @@
       background:`url('${imgAttr.backurl}') no-repeat`,
       backgroundSize: 'contain'
       }">
-    <div v-if="detail.chapterDtoList" v-for="(item,i) in detail.chapterDtoList.slice(0,8)" :key="i" class="cha"
-         :style="{top:`${imgAttr.positions[i]?.top - (current===i?5:0)}px`,left:`${imgAttr.positions[i]?.left - (current===i?10:0)}px`}">
+    <div v-if="detail.chapterDtoList" v-for="(item,i) in showList" :key="i" class="cha"
+         :style="{top:`${imgAttr.positions[i]?.top - (currentIndex===i?5:0)}px`,left:`${imgAttr.positions[i]?.left - (currentIndex===i?10:0)}px`}">
       <div @click="toDetail(i)"
            class="nameClass"
            :title="item.name"
            :style="{
-            background: `url('${current===i?imgAttr.currentBack:imgAttr.nameBack}')`,
+            background: `url('${currentIndex===i?imgAttr.currentBack:imgAttr.nameBack}')`,
             backgroundSize:'100%',
-            width:`${current===i?107:93}px`,
-            height:`${current===i?imgAttr.cheightC:imgAttr.cheight}px`,
-            lineHeight:'50px',color: current===i?imgAttr.ccolors:imgAttr.colors}">
+            width:`${currentIndex===i?107:93}px`,
+            height:`${currentIndex===i?imgAttr.cheightC:imgAttr.cheight}px`,
+            lineHeight:'50px',color: currentIndex===i?imgAttr.ccolors:imgAttr.colors}">
         {{ item.name }}
       </div>
     </div>
   </div>
 </template>
 <script setup>
-import {computed, defineProps, ref} from "vue";
+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'
@@ -113,8 +113,11 @@ const imageAttrs = {
 }
 
 const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find(e => props.img&&props.img.includes(e))] || {})
-console.log(imgAttr)
 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))
 
 function show() {
   visiable.value = true