diff --git a/src/components/PathDetailImage.vue b/src/components/PathDetailImage.vue
index f0604a9..c11359c 100644
--- a/src/components/PathDetailImage.vue
+++ b/src/components/PathDetailImage.vue
@@ -6,9 +6,10 @@
       background:`url('${imgAttr.backurl}') no-repeat`,
       backgroundSize: 'contain'
       }">
-    <div v-if="detail.chapterDtoList" v-for="(item,i) in showList" :key="i" class="cha"
+    <div 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)"
+           v-if="item.name"
            class="nameClass"
            :title="item.name"
            :style="{
@@ -127,11 +128,20 @@ const startIndex = computed(() => {
   }
   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;
-}
+const showList = computed(() => props.detail.chapterDtoList?.length <= 8 ? calulatePosition(props.detail.chapterDtoList) : props.detail.chapterDtoList?.slice(startIndex.value, startIndex.value + 8));
+//list 当list长度小于8时 返回一个长度为8的数组 并将list中的数据均匀放到数组中
+const calulatePosition = (list) => {
+  let arr = new Array(8).fill({});
+  let tr = Math.floor(8 / list.length) - 1;
+  list.forEach((e, i) => {
+    if (i === list.length - 1 && (i * tr + i) !== 7 && i !== 0) {
+      arr[7] = e;
+    } else {
+      arr[i * tr + i] = e;
+    }
+  });
+  return arr;
+};
 
 function toDetail(i) {
   // 预览和学习设置