.app-dashboard-design { width: 100%; height: 100%; border: 1px solid #ccc; 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: #f7fafc; margin-bottom: 5px; border: 1px dashed transparent; cursor: move; } .drag-div-item:hover { border-color: #107fff; } .el-menu-item.is-active { color: initial; } .is-disable { background-color: #e8eaef; color: #c9ccd8; 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, #ddd 10px, transparent 10px),-webkit-linear-gradient(left, #ddd 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; } } } }