| .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--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(--td-navbar-height, 96rpx); | 
|   padding-top: var(--td-navbar-padding-top, 40rpx); | 
|   position: relative; | 
|   visibility: hidden; | 
| } | 
| .t-navbar__content { | 
|   position: relative; | 
|   z-index: 1; | 
|   height: var(--td-navbar-height, 96rpx); | 
|   width: calc(100% - var(--td-navbar-right, 190rpx)); | 
|   padding-right: var(--td-navbar-right, 190rpx); | 
|   padding-top: var(--td-navbar-padding-top, 40rpx); | 
|   color: var(--td-navbar-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))); | 
|   background: var(--td-navbar-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff))); | 
|   display: flex; | 
|   align-items: center; | 
| } | 
| .t-navbar__left { | 
|   position: relative; | 
|   box-sizing: border-box; | 
|   display: flex; | 
|   align-items: center; | 
|   margin-left: var(--td-spacer-1, 24rpx); | 
| } | 
| .t-navbar__left-arrow { | 
|   font-size: var(--td-navbar-left-arrow-size, 48rpx); | 
| } | 
| .t-navbar__capsule { | 
|   box-sizing: border-box; | 
|   width: var(--td-navbar-capsule-width, 176rpx); | 
|   height: var(--td-navbar-capsule-height, 64rpx); | 
|   display: flex; | 
|   align-items: center; | 
| } | 
| .t-navbar__capsule::before { | 
|   content: ''; | 
|   position: absolute; | 
|   z-index: -1; | 
|   top: 0; | 
|   left: 0; | 
|   width: 200%; | 
|   height: 200%; | 
|   transform: scale(0.5); | 
|   transform-origin: 0 0; | 
|   box-sizing: border-box; | 
|   border-radius: calc(var(--td-navbar-capsule-border-radius, 32rpx) * 2); | 
|   border: 2rpx solid var(--td-navbar-capsule-border-color, #e3e6ea); | 
| } | 
| .t-navbar__capsule:empty { | 
|   display: none; | 
| } | 
| .t-navbar__center { | 
|   font-size: 36rpx; | 
|   text-align: center; | 
|   position: absolute; | 
|   left: var(--td-navbar-right, 190rpx); | 
|   width: calc(100% - var(--td-navbar-right, 190rpx) * 2); | 
|   height: var(--td-navbar-height, 96rpx); | 
|   line-height: var(--td-navbar-height, 96rpx); | 
|   flex: 1; | 
|   display: flex; | 
|   align-items: center; | 
|   justify-content: center; | 
|   overflow: hidden; | 
| } | 
| .t-navbar__center:empty { | 
|   display: none; | 
| } | 
| .t-navbar__center-title { | 
|   font-size: var(--td-navbar-title-font-size, 36rpx); | 
|   text-overflow: ellipsis; | 
|   white-space: nowrap; | 
|   overflow: hidden; | 
|   font-weight: var(--td-navbar-title-font-weight, 600); | 
| } |