移动端开发纯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

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

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

CSS3实战开发: 纯CSS实现图片过滤分类显示特效
CSS3实战开发: 纯CSS实现图片过滤分类显示特效原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大 ...
怎样实现banner自动播放html,纯css实现轮播图banner自动轮换效果
话不多说直接上代码 * { margin: 0; padding: 0; } .container { margin:300px auto; height: 400px; width: 1146px ...
c语言实现图片轮播,纯css实现轮播图
轮播图的实现原理其实是比较简单的举个例子 main的宽度是100px div-main的宽度是500px 我们用js控制div-main往左或往右移动,这样就实现了轮播,简单把好了,先介绍个 cs ...
纯CSS实现轮播图（结合动画）
图片自动切换实现原理:使用一个div(class="out")并设置溢出隐藏保证每次只显示一张,在内部设置另一个div.outer包裹所有的图片,图片均水平排列,包裹图片的div使 ...
移动端开发, 常用CSS单位
(转)https://www.cnblogs.com/mylove103104/archive/2015/06/18/4584779.html rem "em" 单位是我们开发中比 ...
html中轮播图跳转,纯 CSS 实现轮播图
大家好,我是 Steven. 今集我们会尝试只用 HTML 和 CSS,实现基础的轮播图效果,当然会有一些功能的缺失,例如不能自动跳转,但我们来看看用 CSS 可以实现到多少. HTML 的部分打开 ...
纯CSS实现轮播图效果，你不知道的CSS3黑科技
前言轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
vue纯css实现动态鱼骨图组件，附图片示例
先看示例图片吧可以指定鱼骨根数和鱼翅的数量,具体看代码就行,默认4根鱼骨5个鱼翅 <template><div class="fishbone">< ...
纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

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

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

最新文章

热门文章