.sourcelistBox { border-top: 1px solid #f0f0f0; height: 46vh; } .treeBox{ width: 100%; height: 100%; display: flex; .listSectionLeft{ width: 30%; border-right: 1px solid #F0F0F0; .leftscrollBar{ :global{ .n-scrollbar-container{ height: calc(100% - 42px); } .n-scrollbar-content{ padding: 6px 32px 0 18px; } } .className { display: flex; align-items: center; padding: 14px 20px 14px 38px; line-height: 22px; margin-bottom: 4px; .classNameIcon { flex-shrink: 0; background: url('../../image/icon-class-name.png') center no-repeat; background-size: contain; margin-right: 6px; width: 14px; height: 18px; } .classNameContent { font-weight: 500; font-size: max(18px, 13Px); color: #333333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } .treeParent{ padding: 14px 20px 14px 38px; line-height: 22px; margin-bottom: 4px; font-size: max(18px, 13Px); color: #898A8A; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; &.parentSelect{ background: #F5F6FA; border-radius: 10px; color: #1677FF; font-weight: 600; } } } .listSectionRight{ width: 70%; padding-top: 20px; .rightscrollBar{ :global{ .n-scrollbar-container{ height: calc(100% - 42px); } .n-scrollbar-content{ padding: 0 14px; display: flex; flex-wrap: wrap; } } } .cardContainer{ width: 33.33%; height: 112px; padding: 0 6px; margin-bottom: 14px; :global{ .card-section-container{ width: 100% !important; height: 100% !important; .n-card__footer{ .footerTitle{ overflow: hidden; .titleContent{ max-width: calc(100% - 13Px); } } } } } } } }