.hc-layout-box { display: flex; position: relative; height: 100%; .hc-layout-left-box { width: 382px; position: relative; background: #f1f5f8; border-radius: 10px; 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: 2px; 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; position: relative; margin-left: 24px; } } .hc-first-item-node-layout { .node-content { flex: 1; display: flex; position: relative; margin-bottom: 24px; height: calc(100% - 105px); .node-form { flex: 1; padding: 24px; margin-right: 24px; position: relative; background: #f1f5f8; border-radius: 10px; box-shadow: -2px 0px 10px 0px rgba(32,37,50,0.03), 0px 10px 21px 20px rgba(32,37,50,0.03); } .node-file { width: 440px; position: relative; padding: 24px 20px; background: #f1f5f8; border-radius: 10px; box-shadow: -2px 0px 10px 0px rgba(32,37,50,0.03), 0px 10px 21px 20px rgba(32,37,50,0.03); .title { position: relative; margin-bottom: 14px; font-size: 16px; font-weight: 500; } .node-upload-box { position: relative; } .hc-table-node-file-box { position: relative; height: calc(100% - 245px); } } } .node-action { position: relative; height: 80px; background: #f1f5f8; border-radius: 10px; display: flex; align-items: center; padding: 20px 24px; box-shadow: -2px 0px 10px 0 rgba(32,37,50,0.03), 0 -10px 21px 3px rgba(32,37,50,0.03); overflow: hidden; } }