.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-navbar { --navbar-height: 44px; --navbar-right: 190rpx; --narbar-padding-top: 20px; --capsule-wight: 174rpx; overflow: hidden; } .t-navbar--fixed .t-navbar__content { position: fixed; top: 0; left: 0; z-index: 5001; } .t-navbar--visible { display: ''; } .t-navbar--visible-animation { opacity: 1; transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .t-navbar--hide-animation { opacity: 0; transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .t-navbar--hide { display: none; } .t-navbar__placeholder { height: var(--navbar-height); padding-top: var(--narbar-padding-top); position: relative; visibility: hidden; } .t-navbar__content { position: relative; z-index: 1; height: var(--navbar-height); width: calc(100% - var(--navbar-right)); padding-right: var(--navbar-right); padding-top: var(--narbar-padding-top); display: flex; align-items: center; background-color: #fff; color: #000; } .t-navbar__left { position: relative; box-sizing: border-box; width: var(--navbar-right); display: flex; align-items: center; } .t-navbar__capsule { box-sizing: border-box; margin-left: 24rpx; width: var(--capsule-wight); height: var(--capsule-height); line-height: var(--capsule-height); border-radius: 32rpx; border: 1rpx solid #e3e6eb; background: #fff; display: flex; align-items: center; } .t-navbar__capsule .t-navbar__btn { flex: 1; } .t-navbar__capsule .t-navbar__btn:not(:first-child) { position: relative; } .t-navbar__capsule .t-navbar__btn:not(:first-child)::before { display: block; content: ''; position: absolute; top: 12rpx; bottom: 12rpx; left: 0; background-color: rgba(0, 0, 0, 0.2); width: 1px; } .t-navbar__capsule .t-navbar__btn:first-child { margin-left: 0rpx; } .t-navbar__capsule-icon { display: flex; align-items: center; } .t-navbar__center { font-size: 36rpx; text-align: center; position: absolute; left: var(--navbar-right); width: calc(100% - var(--navbar-right) * 2); height: var(--navbar-height); line-height: var(--navbar-height); flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; } .t-navbar__center-title { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .t-navbar__btn { box-sizing: border-box; display: flex; justify-content: center; overflow: hidden; } .t-navbar__btn:first-child { margin-left: 24rpx; }