<template>
<div class="linellae">
<div v-for='(items, index) in lists' :key='index'>
<van-row type="flex" justify="space-around" :class="items.val === true ? 'alignItems1' : 'alignItems3'">
<span></span>
<b></b>
<van-col span="8" :class="items.val === true ? 'alignItemsButton' : 'alignItemsDefaultButton'">{{items.text}}</van-col>
<van-col span="4" :class="items.val === true ? 'vanCol' : 'vanCol1'"><span> · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·</span></van-col>
<van-col span="12"><div v-if='items.val'>{{items.text}}</div></van-col>
</van-row>
<template>
<div>
<van-row type="flex" justify="space-around" v-for='(item, indexI) in items.children' :key='indexI' :class="item.val === true ? 'alignItems' : 'alignItems2'">
<span></span>
<b></b>
<van-col span="9" offset='1' :class="item.val === true ? 'alignItemsButton' : 'alignItemsDefaultButton'" >{{item.text}}</van-col>
<van-col span="2" :class="item.val === true ? 'vanCol' : 'vanCol1'"><span> · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·</span></van-col>
<van-col span="12"><div v-if='item.val'>{{item.text}}</div></van-col>
</van-row>
</div>
</template>
</div>
</div>
</template>
lists: [
{
text: '广东省广东省',
val: true,
children: [
{
text: '刚的广的广东省',
val: true
},
{
text: '粉丝刚更更粉丝刚',
val: true
},
{
text: '刚的广的广东省',
val: false
}
]
},
{
text: '地方个广东省',
val: false,
children: [
{
text: '刚的广东省',
val: false
},
{
text: '更多粉丝刚',
val: false
},
{
text: '地方个',
val: false
}
]
},
{
text: '地方个广东省',
val: false,
children: [
{
text: '刚的广东省',
val: false
},
{
text: '更多粉丝刚',
val: false
},
{
text: '地方个',
val: false
}
]
},
{
text: '地方个广东省',
val: false,
children: [
{
text: '刚的广东省',
val: false
},
{
text: '更多粉丝刚',
val: false
},
{
text: '地方个',
val: false
}
]
},
{
text: '地方个广东省',
val: false,
children: [
]
},
{
text: '地方个广东省',
val: false,
children: [
{
text: '刚的广东省',
val: false
},
{
text: '更多粉丝刚',
val: false
},
{
text: '地方个',
val: false
}
]
},
{
text: '地',
val: false,
children: [
{
text: '刚的广东省',
val: false
},
{
text: '更多粉丝刚',
val: false
}
]
},
{
text: '地东省',
val: false,
children: [
{
text: '刚的广东省',
val: false
}
]
}
],
最主要的就是css了 看代码
.Gantt {
border-left: 1px solid #707070
}
.linellae {
position: relative;
list-style-type: none;
padding: 0px;
height: calc(100vh - 0.98rem - 2.78rem);
max-height: calc(100vh - 0.98rem - 2.48rem);
overflow: auto;
}
.alignItems, .alignItems1, .alignItems2, .alignItems3 {
align-items: center;
margin-bottom: 0.1rem;
position: relative;
margin-left: 0.5rem
}
.vanCol, .vanCol1 {
overflow: hidden;
}
.vanCol span {
display: block;
width:200vw;
}
.vanCol1 span {
display: block;
width:200vw;
color:#b5b5b5
}
.alignItems>b:before {
content: '';
position: absolute;
left: -0.2rem;
width: 8vw;
height: 1px;
background: #4c4c4c;
}
.alignItems>span:before {
content: '';
position: absolute;
top: -0.38rem;
left: -0.2rem;
width: 1px;
height: 0.66rem;
background: #4c4c4c;
}
.alignItems1 span:before {
position: absolute;
height: 1px;
}
.alignItems1>b:before {
content: '';
position: absolute;
left: -0.5rem;
width: 8vw;
height: 1px;
background: #4c4c4c;
}
.alignItems1>span:before {
content: '';
position: absolute;
z-index: 1;
top: -4.7rem;
left: -0.5rem;
width: 1px;
height: 5rem;
background: #4c4c4c;
}
.alignItems3>b:before {
content: '';
position: absolute;
left: -0.5rem;
width: 8vw;
height: 1px;
background: #9c9c9c;
}
.alignItems3>span:before {
content: '';
position: absolute;
top: -4.7rem;
left: -0.5rem;
width: 1px;
height: 5rem;
background: #9c9c9c;
}
.alignItems2>b:before {
content: '';
position: absolute;
left: -0.2rem;
width: 8vw;
height: 1px;
background: #9c9c9c;
}
.alignItems2>span:before {
content: '';
position: absolute;
top: -0.38rem;
left: -0.2rem;
width: 1px;
height: 0.66rem;
background: #9c9c9c;
}
.alignItemsDefault{
color:#b5b5b5!important;
}
.alignItemsButton {
padding: 0 8px;
height: .55rem;
line-height: .55rem;
color: #323233;
background-color: #fff;
border: 1px solid #313131;
display: inline-block;
position: relative;
border-radius: 2px;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
}
.alignItemsDefaultButton {
padding: 0 8px;
height: .55rem;
line-height: .55rem;
color: #9c9c9c;
background-color: #fff;
border: 1px solid #9c9c9c;
display: inline-block;
position: relative;
border-radius: 2px;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
}