.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); } :host { flex: 1; } .t-tab-bar-item { height: var(--td-tab-bar-height, 80rpx); box-sizing: border-box; user-select: none; position: relative; margin: 16rpx 0; background-color: var(--td-tab-bar-bg-color, var(--td-bg-color-block, #fff)); padding: 0 24rpx; } .t-tab-bar-item--text-only { font-size: 32rpx; } .t-tab-bar-item--split:before { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; top: 0; bottom: 0; left: 0; border-left: 1px solid var(--td-tab-bar-border-color, var(--td-border-level-1-color, #e6e6e6)); transform: scaleX(0.5); top: 16rpx; bottom: 16rpx; } .t-tab-bar-item--crowded { padding: 0 16rpx; } .t-tab-bar-item--round { border-radius: 99px; } .t-tab-bar-item__content { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 16rpx; color: var(--td-tab-bar-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))); } .t-tab-bar-item__content--checked { color: var(--td-tab-bar-active-color, var(--td-primary-color, #0052d9)); font-weight: 600; } .t-tab-bar-item__content--tag { border-radius: 99px; } .t-tab-bar-item__content--tag.t-tab-bar-item__content--checked { background-color: var(--td-tab-bar-active-bg, var(--td-primary-color-1, #ecf2fe)); } .t-tab-bar-item .t-badge-class { transform: translate(50%, -10%) !important; } .t-tab-bar-item__text { display: flex; align-items: center; } .t-tab-bar-item__text--small { font-size: 20rpx; line-height: 32rpx; } .t-tab-bar-item__icon-menu { margin-right: 8rpx; } .t-tab-bar-item__spread { position: absolute; top: 0; left: 7%; width: 86%; background-color: var(--td-tab-bar-bg-color, var(--td-bg-color-block, #fff)); transform: translate3d(0, calc(-100% - 32rpx), 0); z-index: 1; border-radius: 12rpx; color: var(--td-tab-bar-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))); box-shadow: var(--td-tab-bar-spread-shadow, var(--td-shadow-3, 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08))); } .t-tab-bar-item__spread::before { display: block; content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; border: 16rpx solid transparent; border-top: 16rpx solid var(--td-tab-bar-bg-color, var(--td-bg-color-block, #fff)); transform: translate3d(-50%, 32rpx, 0); } .t-tab-bar-item__spread-item { width: 100%; height: 96rpx; display: flex; align-items: center; justify-content: flex-start; position: relative; flex-direction: column; } .t-tab-bar-item__spread-item--active { background-color: var(--td-tab-bar-hover-bg-color, rgba(0, 0, 0, 0.05)); } .t-tab-bar-item__spread-item-split { box-sizing: border-box; content: ' '; pointer-events: none; background-color: var(--td-tab-bar-spread-border-color, var(--td-border-color, #e7e7e7)); width: 80%; height: 1px; transform: translateY(0.5); } .t-tab-bar-item__spread-item-text { padding-top: 24rpx; }