.cardBox{ min-height: calc(100vh - 75px); max-height: calc(100vh - 75px); overflow-y: scroll; overflow-x: hidden; width: 300px; left: 0; top: 0; margin-right: 10px; position: relative; // transition: left,width 10s; transition-property:width,left; transition-duration: 0.5s; white-space: nowrap } .hideBox{ left: 0px; top: 0; width: 20px; } .hideH{ width: 100%; } .siteTitle{ font-size: 16px; margin: 0 0 6px 0; user-select: none; padding: 3px; border-bottom: 1px solid #ccc; } .cardBoxR{ min-height: calc(100vh - 158px); max-height: calc(100vh - 158px); min-width: 600px; overflow-y: scroll; } .cardBoxTop{ // max-width: calc( 100% - 450px); // margin-bottom: 10px; } .ant-tree-node-content-wrapper-open{ display: flex; align-items: center; } .treeTitle { display: flex; span { display: none; } } .treeTitle:hover { span { margin-left: 20px; display: block; } } .titleBox{ display: flex; // flex-wrap: wrap; justify-content: space-around; align-items: center; } .listItem{ padding-left: 5px; cursor: pointer; font-size: 14px; } .listItem:hover{ background-color: #f8f8f8 ; } .selected{ font-weight: bold; background-color: #bae7ff!important; } .hide{ display: block; position: absolute; font-size: 18px; color: #1890FF!important; top: 45%; right: -3px; transform: translate(0%,-50%); z-index: 2; } // .hide{ // left: 0; // } .content{ width: 100%; display: flex; position: relative; } .boxR{ width: 100%; position: relative; transition: width 2s; }