hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-07 01:46:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into manage-release

Browse Source
This commit is contained in:
wyx
2023-03-08 08:43:03 +08:00
parent f3c6a042a6 f5c8478082
commit e9c821e337
1 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/PathDetailImage.vue
View File

@@ -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