.utv-tree-item { position: relative; z-index: 0; box-sizing: border-box; display: flex; align-items: center; min-height: 88rpx; padding-right: 24rpx; color: #666666; border-bottom: 2rpx solid #F3F3F3; &:nth-child(1){ border-top: 2rpx solid #F3F3F3; } // hover-class 按压反馈,兼容微信/支付宝小程序与 H5 &--hover { background-color: rgba(17, 24, 39, 0.04); } &.is-disabled { color: #666666; } // 状态层始终保留在节点树中,选中时只改 opacity。 // 避免小程序在选中/反选时反复创建伪元素并重新合成整行。 &__state-layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; // background-color: var(--theme-color, #007aff); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } &.is-checked &__state-layer { opacity: 0.06; } &.is-checked .utv-tree-node-label { color: var(--theme-color, #007aff); } &.is-disabled &__state-layer { opacity: 0; } &.is-disabled.is-checked .utv-tree-node-label { color: #666666; } &__arrow-placeholder { flex: 0 0 40rpx; width: 40rpx; height: 40rpx; } &__arrow-icon { position: relative; flex: 0 0 40rpx; display: flex; align-items: center; justify-content: center; width: 40rpx; height: 40rpx; &::after { position: relative; z-index: 1; overflow: hidden; /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ font-family: "uni-tree-iconfont" !important; font-size: 32rpx; font-style: normal; color: #999999; transition: transform 0.2s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } &.is-right::after { content: '\e604'; transform: rotate(-90deg); } &.is-expand::after { transform: rotate(0deg); } &.is-loading { animation: IconLoading 1s linear 0s infinite; &::after { content: '\e7f1'; } } &.is-load-error::after { color: #e5484d; content: "!"; font-family: sans-serif !important; font-weight: 600; transform: none; } } &__checkbox { flex: 0 0 48rpx; display: flex; align-items: center; justify-content: center; width: 48rpx; height: 48rpx; overflow: hidden; &.is-disabled { // opacity: 0.45; .utv-tree-checkbox-checked::after { color: #C0C4CC; } } &-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 40rpx; height: 40rpx; &::after { position: relative; top: 0; left: 0; z-index: 1; overflow: hidden; /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ font-family: "uni-tree-iconfont" !important; font-size: 36rpx; font-style: normal; transition: color 0.2s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } &.utv-tree-checkbox-outline::after { color: #bbb; content: "\ead5"; } &.utv-tree-checkbox-checked::after { color: var(--theme-color,#007aff); content: "\ead4"; } &.utv-tree-checkbox-indeterminate::after { color: var(--theme-color,#007aff); content: "\ebce"; } &.utv-tree-radio-outline::after { color: #bbb; content: "\ecc5"; } &.utv-tree-radio-checked::after { color: var(--theme-color,#007aff); content: "\ecc4"; } &.utv-tree-radio-indeterminate::after { color: var(--theme-color,#007aff); content: "\ea4f"; } } } &.is-virtual &__checkbox { height: 100%; } } .utv-tree-node-label { flex: 1; min-width: 0; padding: 0 4rpx; overflow: hidden; font-size: 28rpx; line-height: 40rpx; text-overflow: ellipsis; white-space: nowrap; &.parent{ font-weight: 500; color: #333333; } } .utv-tree-node-label__match { color: var(--theme-color, #007aff); font-weight: 600; } .utv-tree-item.is-disabled .utv-tree-node-label__match { color: inherit; } .utv-tree-node-content { display: flex; flex: 1; align-items: center; min-width: 0; } .utv-tree-node-main { flex: 1; min-width: 0; } .utv-tree-node-icon { flex: 0 0 auto; padding-left: 16rpx; font-size: 28rpx; line-height: 40rpx; } .utv-tree-node-icon + .utv-tree-node-main .utv-tree-node-label { padding-left: 8rpx; } .utv-tree-node-append { flex: 0 0 auto; max-width: 40%; padding-left: 16rpx; overflow: hidden; color: #667085; font-size: 24rpx; line-height: 36rpx; text-overflow: ellipsis; white-space: nowrap; } .utv-tree-node-path { padding: 0 16rpx; overflow: hidden; color: #98a2b3; font-size: 22rpx; line-height: 32rpx; text-overflow: ellipsis; white-space: nowrap; } .utv-tree-empty { padding: 64rpx 24rpx; color: #98a2b3; font-size: 28rpx; line-height: 40rpx; text-align: center; } // 加载图标旋转动画;此前被 .is-loading 引用但未定义 @keyframes IconLoading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }