.hc-layout-box { display: flex; position: relative; height: 100%; .hc-layout-left-box { width: 382px; position: relative; background: #f1f5f8; border-radius: 10px; margin-right: 24px; box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03); .horizontal-drag-line { position: absolute; right: 0; top: 0; width: 4px; height: 100%; user-select: none; cursor: col-resize; background-color: #00000000; } .hc-project-box { position: relative; padding: 15px 24px; display: flex; align-items: flex-start; border-bottom: 1px solid #E9E9E9; .hc-project-icon-box { font-size: 30px; color: var(--el-color-primary); } .project-name-box { flex: auto; position: relative; overflow: hidden; .project-alias { color: var(--el-color-primary); } .project-name { margin-top: 6px; color: #838791; } } } .hc-tree-box { position: relative; padding: 15px 20px; height: calc(100% - 80px); } } .hc-layout-content-box { flex: 1; display: inline-grid; position: relative; } }