style.scss 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. .hc-tree-box {
  2. position: relative;
  3. background: #ffffff;
  4. color: #606266;
  5. font-size: 28rpx;
  6. padding: 18rpx;
  7. width: 100%;
  8. overflow: auto;
  9. .no-data {
  10. position: relative;
  11. text-align: center;
  12. font-size: 26rpx;
  13. }
  14. .hc-tree-node {
  15. position: relative;
  16. white-space: nowrap;
  17. outline: none;
  18. :deep(.content-bar) {
  19. position: relative;
  20. display: flex;
  21. align-items: center;
  22. height: 30px;
  23. .expand-icon {
  24. color: #a8abb2;
  25. width: 22px;
  26. height: 22px;
  27. display: flex;
  28. align-items: center;
  29. justify-content: center;
  30. margin-right: 4px;
  31. text {
  32. width: 22px;
  33. height: 22px;
  34. box-sizing: content-box;
  35. transform: rotate(0);
  36. transition: transform .3s ease-in-out;
  37. }
  38. &.is-expanded text {
  39. transform: rotate(90deg);
  40. }
  41. }
  42. .tree-check, .tree-radio {
  43. width: 22px;
  44. height: 22px;
  45. margin-right: 4px;
  46. text {
  47. width: 22px;
  48. height: 22px;
  49. }
  50. text.c1 {
  51. color: #a8abb2;
  52. }
  53. text.c2, text.c3 {
  54. color: var(--primary-color);
  55. }
  56. }
  57. .label {
  58. margin-left: 6px;
  59. white-space: nowrap;
  60. padding-right: 28rpx;
  61. }
  62. .expand-icon + .label,
  63. .tree-check + .label {
  64. margin-left: 4rpx;
  65. }
  66. &.current-node-key {
  67. background: #f4f4f4;
  68. border-radius: 5rpx;
  69. color: #007aff;
  70. }
  71. }
  72. :deep(.children-bar) {
  73. //overflow: hidden;
  74. }
  75. &.pl {
  76. padding-left: 14px;
  77. }
  78. }
  79. }