移动端开发纯css实现家谱世系图(uniapp)
移动端开发纯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{
装饰qq空间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=“” @tap=“showDetail”> {{jiapu.person.puName}}
<view class=“treediv” :data-id=“” @tap=“showDetail”> {{item.person.puName}}
<view class=“treediv” :data-id=“” @tap=“showDetail”> {{item.person.puName}}
<view class=“treediv” :data-id=“” @tap=“showDetail”> {{item.person.puName}}
<view class=“treediv” :data-id=“” @tap=“showDetail”> {{item.person.puName}}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。