<template>
<div class="canvasBox">
<div v-if="objective.superObj.id" style="display:flex">
<div class="objective_card_list">
{{objective.superObj.name}}
</div>
<div style="width:100px; height:40px; border-bottom:1px solid #d9d9d9"></div>
</div>
<div>
<div class="objective_card_list" style="background-color:#f0f8ff">
{{objective.name}}
</div>
</div>
<div v-if="objective.subObj.length > 0">
<div v-for="(subItem,subIndex) of objective.subObj" :key="subItem.id" style="display:flex">
<div v-if="subIndex==0 && objective.subObj.length == 1">
<div style="width:100px; height:40px; border-bottom:1px solid #d9d9d9"></div>
</div>
<div v-if="subIndex==0 && objective.subObj.length > 1">
<div style="width:100px; height:40px; border-bottom:1px solid #d9d9d9"></div>
<div style="width:50px; height:60px; margin-left:auto; border-left:1px solid #d9d9d9"></div>
</div>
<div style="width:100px" v-if="subIndex && subIndex != objective.subObj.length -1">
<div style="width:50px; height:40px; margin-left:auto; border-left:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9;"></div>
<div style="width:50px; height:60px; margin-left:auto; border-left:1px solid #d9d9d9"></div>
</div>
<div style="width:100px" v-if="subIndex && subIndex == objective.subObj.length -1">
<div style="width:50px; height:40px; margin-left:auto; border-bottom:1px solid #d9d9d9; border-left:1px solid #d9d9d9"></div>
</div>
<div class="objective_card_list">
{{subItem.name}}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
objective:{
name:'当前目标',
superObj:{
id:'101',
name:'父级目标',
},
subObj:[
{
id:"001",
name:'第一个子目标'
},
{
id:"002",
name:'第二个子目标'
},
{
id:"003",
name:'第三个子目标'
},
{
id:"004",
name:'第四个子目标'
}
]
}
}
}
}
</script>
<style>
.canvasBox{
display: flex;
justify-content: center;
padding: 60px;
min-height: 500px;
border: 1px solid #000;
}
.objective_card_list{
width: 200px;
height: 80px;
text-align: center;
line-height: 80px;
overflow: hidden;
border: 1px solid #d9d9d9;
border-radius: 2px;
transition: ease all 0.5s;
cursor: pointer;
}
</style>