.box{ min-height: calc( 100vh - 232px)!important; display: flex; } .left{ min-width: 300px; width: 350px; min-height: 100%; border: 1px solid #eee; padding: 10px; .ant-tree-node-content-wrapper{ display: flex; align-items: center; .ant-tree-iconEle{ display: flex; align-items: center; } .ant-tree-title{ width: 100%; } } .leftTop{ display: flex; align-items: center; margin-bottom: 10px; justify-content: space-between; .tRight{ display: flex; align-items: center; .icon1{ font-size: 20px; margin-right: 10px; } .icon2{ font-size: 18px; margin-right: 5px; } .icon:hover{ cursor: pointer; } } } } .middle{ min-width: 500px; width: 100%; min-height: 100%; border: 1px solid #eee; padding: 10px; margin: 0 0 0 10px; } .title{ display: flex; align-items: center; width: 100%; } .tip{ display: none; } .title:hover{ .tip{ display: flex; align-items: center; justify-content: flex-end; width: 100%; } } .fsize{ font-size: 18px; margin-left: 10px; } .rightBox{ min-width: 200px; // width: 600px; width: 100%; min-height: 100%; border: 1px solid #eee; padding: 10px; } :global{ .ant-tree .ant-tree-node-content-wrapper .ant-tree-iconEle .anticon-folder{ } }