From f95eef001a09d388e82a603773275a4baf4da304 Mon Sep 17 00:00:00 2001
From: yuping <82253452@qq.com>
Date: Wed, 8 Mar 2023 03:20:48 +0800
Subject: [PATCH] =?UTF-8?q?fix=20--=20=E5=85=B3=E5=8D=A1=E5=A4=AA=E5=A4=9A?=
 =?UTF-8?q?=E5=8F=AA=E5=B1=95=E7=A4=BA8=E4=B8=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PathDetailImage.vue | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

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