| .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-side-bar-item { | 
|   display: flex; | 
|   align-items: center; | 
|   justify-content: center; | 
|   position: relative; | 
|   padding: 32rpx; | 
|   font-size: var(--td-side-bar-font-size, 32rpx); | 
|   color: var(--td-side-bar-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))); | 
|   background: var(--td-side-bar-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3))); | 
|   min-height: var(--td-side-bar-item-height, 112rpx); | 
|   box-sizing: border-box; | 
|   white-space: wrap; | 
|   line-height: var(--td-side-bar-item-line-height, 48rpx); | 
| } | 
| .t-side-bar-item--active { | 
|   font-weight: 600; | 
|   background: var(--td-bg-color-container, var(--td-font-white-1, #ffffff)); | 
|   color: var(--td-side-bar-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))); | 
| } | 
| .t-side-bar-item__icon { | 
|   font-size: var(--td-side-bar-icon-size, 40rpx); | 
|   margin-right: 4rpx; | 
| } | 
| .t-side-bar-item__prefix, | 
| .t-side-bar-item__suffix { | 
|   z-index: 1; | 
|   position: absolute; | 
|   right: 0; | 
|   width: 100%; | 
|   height: calc(var(--td-side-bar-border-radius, 18rpx) * 2); | 
|   background: #fff; | 
|   pointer-events: none; | 
| } | 
| .t-side-bar-item__prefix::after, | 
| .t-side-bar-item__suffix::after { | 
|   content: ''; | 
|   display: block; | 
|   width: 100%; | 
|   height: 100%; | 
|   background-color: var(--td-side-bar-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3))); | 
| } | 
| .t-side-bar-item__prefix { | 
|   top: calc(var(--td-side-bar-border-radius, 18rpx) * -2); | 
| } | 
| .t-side-bar-item__prefix::after { | 
|   border-bottom-right-radius: var(--td-side-bar-border-radius, 18rpx); | 
| } | 
| .t-side-bar-item__suffix { | 
|   bottom: calc(var(--td-side-bar-border-radius, 18rpx) * -2); | 
| } | 
| .t-side-bar-item__suffix::after { | 
|   border-top-right-radius: var(--td-side-bar-border-radius, 18rpx); | 
| } | 
| .t-side-bar-item--disabled { | 
|   color: var(--td-side-bar-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))); | 
| } | 
| .t-side-bar-item__line { | 
|   width: 6rpx; | 
|   height: 28rpx; | 
|   position: absolute; | 
|   left: 0; | 
|   top: 50%; | 
|   transform: translateY(-50%); | 
|   background: var(--td-side-bar-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))); | 
|   border-radius: 8rpx; | 
| } |