.hc-tree-box { position: relative; background: #ffffff; color: #606266; font-size: 28rpx; padding: 18rpx; width: 100%; overflow: auto; .no-data { position: relative; text-align: center; font-size: 26rpx; } .hc-tree-node { position: relative; white-space: nowrap; outline: none; :deep(.content-bar) { position: relative; display: flex; align-items: center; height: 30px; .expand-icon { color: #a8abb2; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; margin-right: 4px; text { width: 22px; height: 22px; box-sizing: content-box; transform: rotate(0); transition: transform .3s ease-in-out; } &.is-expanded text { transform: rotate(90deg); } } .tree-check, .tree-radio { width: 22px; height: 22px; margin-right: 4px; text { width: 22px; height: 22px; } text.c1 { color: #a8abb2; } text.c2, text.c3 { color: var(--primary-color); } } .label { margin-left: 6px; white-space: nowrap; padding-right: 28rpx; } .expand-icon + .label, .tree-check + .label { margin-left: 4rpx; } &.current-node-key { background: #f4f4f4; border-radius: 5rpx; color: #007aff; } } :deep(.children-bar) { //overflow: hidden; } &.pl { padding-left: 14px; } } }