.app-dashboard-design {
    width: 100%;
    height: 100%;
    border: 1px solid var(--item-font-color-bright);
    display: flex;
    .design-tree {
        width: 300px;
        height: 100%;
        padding: 5px;
        overflow: auto;
        .design-filter {
            width: 100%;
        }
        .design-tree-content {
            height: calc(100% - 40px);
            overflow: auto;
            .el-menu {
                width: 100%;
                border-right: 0;
                .drag-div-item {
                    height: 40px;
                    line-height: 40px;
                    background-color: var(--item-background-color-bright);
                    margin-bottom: 5px;
                    border: 1px dashed transparent;
                    cursor: move;
                }
                .drag-div-item:hover {
                    border-color: var(--item-font-color-hover);
                }
                .el-menu-item.is-active {
                    color: initial;
                }
                .is-disable {
                    background-color: var(--item-background-color-bright);
                    color: var(--item-font-color-light);
                    cursor: no-drop !important;
                }
            }
        }
        .drag-tree-item {
            opacity: .7;
            z-index: 1;
            position: fixed;
        }
        
    }
    .design-panel {
        flex-grow: 1;
        height: 100%;
        overflow: auto;
        background: #efefef;
        .app-grid-layout {
            .app-grid-layout-mask {
                height: calc(100% + 180px);
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                position: absolute;
                background: -webkit-linear-gradient(top,var(--item-background-color-bright) 10px, transparent 10px),-webkit-linear-gradient(left,var(--item-background-color-bright) 10px, transparent 10px);
            }
            .app-grid-layout-item {
                height: 100%;
                .el-icon-close {
                    font-size: 16px;
                    float: right;
                    margin-top: 4px;
                    cursor: pointer;
                }
            }
        }
        .layout-draging {
            .vue-grid-placeholder {
                display: initial !important;
            }
        }
    }
}