.app-dashboard-design { width: 100%; height: 100%; display: flex; } .app-dashboard-design__tree { width: 300px; height: 100%; padding: 5px; overflow: auto; .tree__filter { width: 100%; } .tree__content { height: calc(100% - 40px); overflow: auto; } .el-menu { width: 100%; border-right: 0; .el-menu-item { height: 40px; line-height: 40px; margin-bottom: 5px; border: 1px dashed transparent; cursor: move; &.is-active { color: initial; } &.is-disable { cursor: no-drop; } } } .tree__caption { opacity: .7; z-index: 1; position: fixed; } } .app-dashboard-design__panel { flex-grow: 1; height: 100%; overflow: auto; background: #efefef; .app-dashboard-design__mask { height: calc(100% + 180px); top: 0; left: 0; bottom: 0; right: 0; position: absolute; } } .app-dashboard-design__panel__layout { .panel__layout-item { height: 100%; .el-icon-close { font-size: 16px; float: right; margin-top: 4px; cursor: pointer; } } &.is-dragging { .vue-grid-placeholder { display: initial; } } }