for_client/src/views/data-fill/components/nodeTree/style.scss

.cu-tree-node-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    .cu-tree-node-box {
        display: table;
        text-align: center;
        &:before, &:after {
            content: '';
            display: table;
        }
        &:after {
            clear: both;
        }
        &.horizontal {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .cu-tree-node-view, .cu-tree-node-children {
            position: relative;
            margin: 0;
            padding: 0;
            list-style-type: none;
            &:before, &:after {
                transition: all .35s;
            }
        }
        .cu-tree-node-view {
            padding-top: 40px;
            display: table-cell;
            vertical-align: top;
            &.is-leaf, &.collapsed {
                padding-left: 10px;
                padding-right: 10px;
            }
            &:before, &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 50%;
                height: 40px;
            }
            &:after {
                left: 50%;
                border-left: 1.5px solid #999999;
            }
            &:not(:first-child):before,
            &:not(:last-child):after {
                border-top: 1.5px solid #999999;
            }
            .cu-tree-node-label {
                position: relative;
                display: inline-block;
                z-index: 20;
                .cu-tree-node-label-text {
                    position: relative;
                    text-align: center;
                    .cu-tree-node-label-name {
                        white-space: nowrap;
                        &:before {
                            content: "";
                            display: block;
                            background: inherit;
                            filter: blur(5px);
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            top: 0;
                            left: 0;
                            z-index: -1;
                            opacity: var(--ui-Shadow-opacity-lg);
                            transform-origin: 0 0;
                            border-radius: inherit;
                            transform: scale(1);
                        }
                        .el-button[hc-btn] {
                            box-shadow: 4px 4px 8px 0 rgb(54 92 167 / 15%);
                        }
                    }
                }
            }
        }
        .cu-tree-node-label-btn {
            position: absolute;
            top: 100%;
            left: 50%;
            width: 20px;
            height: 20px;
            z-index: 10;
            background-color: #ffffff;
            border: 1px solid #999999;
            border-radius: 50%;
            box-shadow: 0 0 2px rgba(0, 0, 0, .15);
            cursor: pointer;
            transition: all .35s ease;
            &:hover {
                background-color: #e7e8e9;
                transform: scale(1.15);
            }
            &:before, &:after {
                content: '';
                position: absolute;
            }
            &:before {
                top: 50%;
                left: 4px;
                right: 4px;
                height: 0;
                border-top: 1px solid #999999;
            }
            &:after {
                top: 4px;
                left: 50%;
                bottom: 4px;
                width: 0;
                border-left: 1px solid #999999;
            }
            &.expanded:after {
                border: none;
            }
        }
        .cu-tree-node-children {
            padding-top: 40px;
            display: table;
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                width: 0;
                height: 40px;
                border-left: 1.5px solid #999999;
            }
            &:after {
                content: '';
                display: table;
                clear: both;
            }
        }
        &.horizontal {
            .cu-tree-node-view {
                display: table-cell;
                float: none;
                padding-top: 0;
                padding-left: 40px;
                &.is-leaf {
                    padding-top: 10px;
                    padding-bottom: 10px;
                }
                &:before, &:after {
                    width: 40px;
                    height: 50%;
                }
                &:after {
                    top: 50%;
                    left: 0;
                    border-left: 0;
                }
                &:only-child:before {
                    top: 1px;
                    border-bottom: 1.5px solid #999999;
                }
                &:not(:first-child):before,
                &:not(:last-child):after {
                    border-top: 0;
                    border-left: 1.5px solid #999999;
                }
                &:not(:only-child):after {
                    border-top: 1.5px solid #999999;
                }
            }
            .cu-tree-node-label {
                display: table-cell;
                vertical-align: middle;
            }
            & > .cu-tree-node-view:only-child:before {
                border-bottom: 0;
            }
            .cu-tree-node-children {
                display: table-cell;
                padding-top: 0;
                padding-left: 40px;
                &:before {
                    top: 50%;
                    left: 0;
                    width: 40px;
                    height: 0;
                    border-left: 0;
                    border-top: 1.5px solid #999999;
                }
                &:after {
                    display: none;
                }
                & > .cu-tree-node-view {
                    display: block;
                }
            }
            .cu-tree-node-label-btn {
                top: 50%;
                left: 100%;
                margin-top: -10.1px;
                margin-left: 10px;
            }
        }
    }
}