.PubDicMana { width: 100%; overflow: hidden; .left { float: left; border-radius: 4px; width: 220px; height: calc(100vh - 80px); margin-right: 16px; padding: 16px; background: #FFFFFF; .wrap { height: calc(100vh - 152px); overflow: scroll; } .kcmp-ant-tree.kcmp-ant-tree-directory .kcmp-ant-tree-treenode { //style={{display:'inline-flex',justifyContent:'center',alignItems:'center',width:16,height:16,background:'#fff',borderRadius:4,border:'1px solid #DAE2F2',marginLeft:4,position:'relative',top:2}} .copy { display: none; } &:hover { border-radius: 4px; background: #F0F2F5; .copy { display: inline-flex; justify-content: center; align-items: center; width: 16px; height: 16px; background: #FFFFFF; border-radius: 4px; border-radius: 4px; border: 1px solid #DAE2F2; margin-left: 4px; position: relative; top: 2px; } &::before { border-radius: 4px; background: #F0F2F5; } } } .kcmp-ant-tree.kcmp-ant-tree-directory .kcmp-ant-tree-treenode-selected { &::before { border-radius: 4px; background: #F0F2F5; } } .kcmp-ant-tree.kcmp-ant-tree-directory .kcmp-ant-tree-treenode .kcmp-ant-tree-node-content-wrapper.kcmp-ant-tree-node-selected { font-weight: bold; } } .right { float: left; width: calc(100% - 236px); padding: 16px; border-radius: 4px; background: #FFFFFF; .toolBar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; .filter { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; .filterItem { display: flex; flex-direction: row; justify-content: center; align-items: center; } } .btnGroup { .initBtn { display: inline-flex; justify-content: center; align-items: center; width: 72px; height: 24px; cursor: pointer; font-size: 14px; background: #FAFCFF; border-radius: 4px; border: 1px solid #DAE2F2; margin-right: 8px; } .add { cursor: pointer; display: inline-block; font-size: 14px; font-family: SourceHanSansCN-Normal, SourceHanSansCN; font-weight: 400; color: #FFFFFF; line-height: 24px; padding: 0 14px; background: #3377FF; border-radius: 4px; } } } } }