移动端开发纯css实现家谱世系图(uniapp)

世系图其他插件：vue-tree-chart
效果图：

css
.contaner{
background-size: 100% 100%;
padding-bottom: 100rpx;
}
.contaner .tree_title{
display: flex;
justify-content: center;
align-items: center;
height: 88rpx;
background-color: #f6f6f6;
color: #333;
font-size: 28rpx;
}
.contaner .tree_title .tree_title_item{
width: 25%;
text-align: center;
}

.tree {
width: 690rpx;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
background: #fff;
}

.tree .treeul {
margin-left: -10rpx !important;
}

.tree .treeul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 14px;
}

.tree .treeul .treeli {
display: flex;
position: relative;
}

.tree .treeul .treediv,
.tree .treeul .treeul {
position: relative;
}

.tree .treeul .treeli::before {
content: ‘’;
border-left: #e33242 solid 1rpx;
position: absolute;
top: 112rpx;
left: 55rpx;
height: 100%;
}

.tree .treeul .treeli:last-child::before {
content: none;
}
.tree .treediv::before {
content: ‘’;
position: absolute;
top: 86rpx;
right: 68rpx;
border-top: #e33242 solid 1rpx;
width: 38rpx;
}
.tree .treediv::after {
top: 86rpx;
content: ‘’;
position: absolute;
left: 80rpx;
border-top: #e33242 solid 1rpx;
width: 38rpx;
}
.tree .beforenone::before{
content: ‘’;
border: none;
}
.tree .treeul .treeli .treediv:last-child::after{
content: none;
}
.tree .treeul .treeli .treediv{
position: relative;
}
.tree .treeul .treeli .treediv text {
display: inline-block;
width: 20rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.tree .treeul .treeli .treediv{
margin: 24rpx 0 0 90rpx;
width: calc(750rpx/5 - 80rpx);
height: 166rpx;
text-align: center;
position: relative;
background-size: 100% 100%;
}
.tree .treeul .treeli .treediv image{
width: calc(750rpx/5 - 70rpx);
height: 166rpx;
}

.btmbtn{
width: 100%;
height: 100rpx;
background-color: #e33242;
color: #fff;
text-align: center;
line-height: 100rpx;
position: fixed;
bottom: 100rpx;
}

.footer{
display: flex;
justify-content: center;
align-items: center;
color: #da251c;
margin-top: 30rpx;
width: 100%;
height: 120rpx;
}
.footer image{
width: 303rpx;
height: 79rpx;
font-size: 30rpx;
position: absolute;
left: 0;
top: 0;
}
.footer .item-left{
margin-right: 30rpx;
position: relative;
width: 303rpx;
height: 79rpx;
text-align: center;
line-height: 79rpx;
}

html


{{item}}




<view class=“treediv beforenone” style=“margin-left: 10rpx;” :data-id=“jiapu.person.no” @tap=“showDetail”> {{jiapu.person.puName}}


<view class=“treediv” :data-id=“item.person.no” @tap=“showDetail”> {{item.person.puName}}


<view class=“treediv” :data-id=“item.person.no” @tap=“showDetail”> {{item.person.puName}}


<view class=“treediv” :data-id=“item.person.no” @tap=“showDetail”> {{item.person.puName}}


<view class=“treediv” :data-id=“item.person.no” @tap=“showDetail”> {{item.person.puName}}