.t-float-left { float: left; } .t-float-right { float: right; } @keyframes tdesign-fade-out { from { opacity: 1; } to { opacity: 0; } } .hotspot-expanded.relative { position: relative; } .hotspot-expanded::after { content: ''; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; transform: scale(1.5); } .t-badge { position: relative; display: inline-block; vertical-align: top; } .t-badge--basic { display: inline-block; z-index: 100; padding: 0 var(--td-badge-basic-padding, 8rpx); font-size: var(--td-badge-font-size, var(--td-font-size-xs, var(--td-font-size, 20rpx))); color: var(--td-badge-text-color, var(--td-font-white-1, #ffffff)); background-color: var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #e34d59))); text-align: center; height: var(--td-badge-basic-height, 32rpx); line-height: var(--td-badge-basic-height, 32rpx); font-weight: var(--td-badge-font-weight, 600); border-radius: var(--td-badge-border-radius, 4rpx); } .t-badge--dot { height: var(--td-badge-dot-size, 16rpx); border-radius: 50%; min-width: var(--td-badge-dot-size, 16rpx); padding: 0; } .t-badge--count { min-width: var(--td-badge-basic-width, 32rpx); white-space: nowrap; box-sizing: border-box; } .t-badge--circle { border-radius: calc(var(--td-badge-basic-height, 32rpx) / 2); } .t-badge__ribbon-outer { position: absolute; top: 0; right: 0; } .t-badge--ribbon { transform: rotate(45deg); border-radius: 0; } .t-badge--ribbon::before { content: ''; position: absolute; width: 0; height: 0; bottom: 0; left: calc(-1 * var(--td-badge-basic-height, 32rpx) + 1rpx); border-bottom: var(--td-badge-basic-height, 32rpx) solid var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #e34d59))); border-left: var(--td-badge-basic-height, 32rpx) solid transparent; } .t-badge--ribbon::after { content: ''; position: absolute; width: 0; height: 0; bottom: 0; right: calc(-1 * var(--td-badge-basic-height, 32rpx) + 1rpx); border-bottom: var(--td-badge-basic-height, 32rpx) solid var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #e34d59))); border-right: var(--td-badge-basic-height, 32rpx) solid transparent; } .t-badge--bubble { border-radius: var(--td-badge-bubble-border-radius, 20rpx 20rpx 20rpx 1px); } .t-badge--large { font-size: var(--td-badge-large-font-size, var(--td-font-size-s, 24rpx)); height: var(--td-badge-large-height, 40rpx); min-width: var(--td-badge-large-height, 40rpx); line-height: var(--td-badge-large-height, 40rpx); padding: 0 var(--td-badge-large-padding, 10rpx); } .t-badge--large.t-badge--circle { border-radius: calc(var(--td-badge-large-height, 40rpx) / 2); } .t-badge__content:not(:empty) + .t-has-count { transform: translate(50%, -50%); position: absolute; right: 0; top: 0; } .t-badge__content-text { display: block; line-height: 48rpx; }