css 实现树形结构布局

image.png

• 父节点页面

      

        

          

            
根节点
          
          
        
      

• 父节点js

import Vue from 'vue'
import NodePort from '@/views/5gMsg/ChatbotProcessDesign/NodePort/NodePort'
export default {
    components: {
        NodePort
    },
    data () {
        return {
            nodeList: [
                {
                    label: '模板名称',
                    id: 1,
                    type: 'root',
                    children: [
                        {
                            label: '子节点1',
                            id: 2,
                            type: 'card',
                            children: [
                                {
                                    label: '子节点1-1',
                                    id: 4,
                                    type: 'btn'
                                },
                                {
                                    label: '子节点1-2',
                                    id: 44,
                                    type: 'btn',
                                    children: [
                                        {
                                            label: '叶子子节点1',
                                            id: 7,
                                            type: 'btn',
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            label: '子节点3',
                            id: 8,
                            type: 'card',
                            children: [
                                {
                                    label: '子节点3-1',
                                    id: 12,
                                    type: 'btn',
                                    children: [
                                        {
                                            label: '叶子节点1',
                                            id: 108,
                                            type: 'btn',
                                        }
                                    ]
                                },
                                {
                                    label: '子节点3-2',
                                    id: 13,
                                    type: 'btn',
                                    children: [
                                        {
                                            label: '叶子节点2',
                                            id: 132,
                                            type: 'btn',
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    } 
}

• 子节点

• css样式

.processDesign {
  .process {
    display: inline-block;
    text-align: center;
    width: 100%;
  }
  .childNodeItem {
    width: 140px;
    border: 1px solid #ddd;
  }
  .rootNode{
    width: 140px;
    height: 100px;
    margin: 0 auto;
    border: 1px solid #ddd;
  }
  .nodewrap{
    display: inline-block;
  }
  .nodeLine {
    width: 100%;
    height: 50px;
    position: relative;
    &:after {
      position: absolute;
      content: '';
      width: 2px;
      top: 0;
      bottom: 0;
      left: 50%;
      margin-left: -1px;
      background: #4c6cf5;
    }
  }
  .nodeType{
    width: 140px;
  }
  .nodeLine2 {
    width: 100%;
    position: relative;
    &:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background: #4c6cf5;
    }
  }
  .nodeport{
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .nodeInfo{
    padding: 0 20px;
    height: 100px;
    border: 1px solid blue;
  }
  .nodeItem {
    margin: 0 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .nodeItems{
    &:first-child {
      margin: 0;
      transform: translateX(-50%);
      position: relative;

      &:after {
        position: absolute;
        content: '';
        right: 0;
        width: 50%;
        top: 0;
        height: 2px;
        background: #4c6cf5;
      }
    }

    &:last-child {
      margin: 0;
      transform: translateX(50%);
      position: relative;

      &:after {
        position: absolute;
        content: '';
        left: 0;
        width: 50%;
        top: 0;
        height: 2px;
        background: #4c6cf5;
      }
    }
  }
}