效果图
image.png
代码
<template>
<div class=" form-inline" style="padding: 0 50px">
<div class="highest">
<div class="highest_left">
<div class="highest_relation">
<el-button>且</el-button>
</div>
</div>
<div class="highest_right">
<div class="external">
<div class="external_left">
<div class="external_relation">
<el-button>且</el-button>
</div>
</div>
<div class="external_right">
<div class="inside">
<div class="inside_left">
<div class="inside_relation">
<el-button>且</el-button>
</div>
</div>
<div class="inside_right">
<div>1</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</div>
<div class="inside">
<div class="inside_left"></div>
<div class="inside_right">
<div>1</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</div>
</div>
</div>
<div class="external" style="margin-top:50px;">
<div class="external_left">
</div>
<div class="external_right">
<div class="inside">
<div class="inside_left">
</div>
<div class="inside_right">
<div>1</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</div>
<div class="inside">
<div class="inside_left"></div>
<div class="inside_right">
<div>1</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</div>
</div>
</div>
<div class="external" style="margin-top:50px;">
<div class="external_left">
</div>
<div class="external_right">
<div class="inside">
<div class="inside_left">
</div>
<div class="inside_right">
<div>1</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</div>
<div class="inside">
<div class="inside_left"></div>
<div class="inside_right">
<div>1</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "vue-query-builder",
components: {
},
props: {
},
data() {
return {
};
},
computed: {
},
mounted() {
}
};
</script>
<style scoped lang="scss">
// 分为三层嵌套
// highest为第一层
.highest{
display: flex;
width: 100%;
position: relative;
.highest_left{
width: 50px;
position: relative;
}
.highest_relation,.external_relation,.inside_relation{
position: absolute;
top: 50%;
left: 0px;
transform: translate(-50%,-50%);
z-index: 99;
}
// 左边连接的竖线
.highest_left::before{
position: absolute;
width: 1px;
height: 100%;
background: green;
content: ' ';
}
.highest_right{
flex: 1;
position: relative;
// 右边连接的横线
.external::after{
position: absolute;
content: ' ';
width: 50px;
height: 1px;
background: blue;
left: -50px;
top: 50%;
}
// 遮盖左上超出的竖线
.external:first-child::before{
position: absolute;
content: ' ';
width: 50px;
height: 50%;
left: -56px;
top: 0;
background: #ffff;
}
// 遮盖左下超出的竖线
.external:last-child::before{
position: absolute;
content: ' ';
width: 50px;
height: 50%;
left: -56px;
top: 50%;
background: #ffff;
}
// external为第二层
.external{
display: flex;
width: 100%;
position: relative;
.external_left{
width: 50px;
}
// 左边的竖线
.external_left::before{
position: absolute;
width: 1px;
height: 100%;
background: green;
content: ' ';
}
.external_right{
flex: 1;
position: relative;
// 右边的横线
.inside::after{
position: absolute;
content: ' ';
width: 50px;
height: 1px;
background: blue;
left: -50px;
top: 50%;
}
// 遮挡左上超出的竖线
.inside:first-child::before{
position: absolute;
content: ' ';
width: 50px;
height: 50%;
left: -56px;
top: 0;
background: #ffff;
}
// 遮挡左下超出的竖线
.inside:last-child::before{
position: absolute;
content: ' ';
width: 50px;
height: 50%;
left: -56px;
top: 50%;
background: #ffff;
}
// inside为第三层
.inside{
position: relative;
display: flex;
width: 100%;
margin-bottom: 50px;
.inside_left{
width: 50px;
}
// 左边连接的竖线
.inside_left::before{
position: absolute;
width: 1px;
height: 100%;
background: #000;
content: ' ';
}
.inside_right{
flex: 1;
div{
margin-bottom: 20px;
line-height: 50px;
background: red;
position: relative;
}
// 右边连接左边的横线
div::after{
position: absolute;
content: ' ';
width: 50px;
height: 1px;
background: #000;
left: -50px;
top: 50%;
}
// 遮盖左上超出的竖线
div:first-child::before{
position: absolute;
content: ' ';
width: 50px;
height: 50%;
left: -56px;
top: 0;
background: #ffff;
}
// 遮盖左下超出的竖线
div:last-child::before{
position: absolute;
content: ' ';
width: 50px;
height: 50%;
left: -56px;
top: 50%;
background: #ffff;
}
div:last-child{
margin-bottom: 0;
}
}
}
.inside:last-child{
margin-bottom: 0;
}
}
}
}
}
</style>
