src=”http://thirdwx.qlogo.cn/mmopen/vi_32/0YdGwH6MaqJAEUDlnQ7icCTZSBiaUCW7OOtcAozGRLRGPTSEAaDMCfwtALO5dyZiclGCIRauaYjgawnHzyxhSkuwA/132″
alt=””>
let url = ‘http://thirdwx.qlogo.cn/mmopen/vi_32/0YdGwH6MaqJAEUDlnQ7icCTZSBiaUCW7OOtcAozGRLRGPTSEAaDMCfwtALO5dyZiclGCIRauaYjgawnHzyxhSkuwA/132’;
function del(img) {
$(img).parent().parent().parent().nextAll().remove();
$(img).parent().parent().siblings().children(“.right-line”).css(‘display’,’none’);
$(img).parent().parent().siblings().children(“.open”).children(‘img’).css(‘display’,’block’);
$(img).css(‘display’, ‘none’);
$(img).parent().siblings(“.right-line”).css(‘display’,’block’);
let top = $(img).parent().offset().top – 40;
let column = ”
”
”
$(‘.frame’).append(column);
let arr = [{ id: 1, level: ‘会员’, name: ‘姓名’, headImg: url, children: true }, { id: 1, level: ‘会员’, name: ‘姓名’, headImg: url, children: true }, { id: 1, level: ‘会员’, name: ‘姓名’, headImg: url, children: true }, { id: 1, level: ‘会员’, name: ‘姓名’, headImg: url, children: true }, { id: 1, level: ‘会员’, name: ‘姓名’, headImg: url, children: true }];
for (let i = 0; i < arr.length; i++) {
let item = ”
”
”
”
”
” +
”
”
” +
”
” +
”
” +
”
”
” +
”
”
$(“.frame>.column:last-child”).append(item);
}
}
* {
padding: 0;
margin: 0;
}
.frame {
display: flex;
padding: 40px;
}
.frame>.column:first-child>.item>.left-line {
display: none;
}
.frame>.column:first-child>.item>.left-bottom-line {
display: none;
}
.column {
padding-left: 50px;
min-width: auto;
flex-shrink: 0
}
.frame>.column:first-child {
padding-left: 0;
}
.frame>.column:last-child{
padding-right: 60px;
}
.column>.item:last-child>.left-bottom-line {
display: none;
}
.item {
display: flex;
padding-bottom: 20px;
position: relative;
}
.item>.left-line {
position: absolute;
width: 30px;
height: 2px;
background: #c9c9c9;
left: -30px;
top: 30px;
}
.item>.left-bottom-line {
position: absolute;
width: 2px;
height: 80px;
background: #c9c9c9;
left: -30px;
top: 30px;
}
.item>.right-line {
position: absolute;
width: 50px;
height: 2px;
background: #c9c9c9;
right: -20px;
top: 30px;
display: none;
}
.item>.head-img {
width: 60px;
height: 60px;
}
.item>.cont {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 15px;
margin: 0 15px;
flex-shrink: 0;
}
.item>.cont>.level {
color: #999;
}
.item>.cont>.name {}
.item>.open {
display: flex;
align-items: center;
width: 20px;
}
.item>.open>img {
width: 20px;
height: 20px;
}
一键复制
编辑
Web IDE
原始数据
按行查看
历史