.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-switch { display: flex; align-items: center; overflow: hidden; } .t-switch__label { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; font-size: var(--td-swtich-label-font-size, 28rpx); color: var(--td-switch-label-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))); overflow: hidden; } .t-switch__label--checked { color: var(--td-switch-label-checked-color, var(--td-switch-checked-color, var(--td-primary-color, #0052d9))); } .t-switch__label--large { font-size: var(--td-swtich-label-font-size, 32rpx); } .t-switch__label--small { font-size: var(--td-swtich-label-font-size, 24rpx); } .t-switch__label:empty { display: none; } .t-switch__icon { font-size: var(--td-switch-icon-size, 40rpx); } .t-switch__icon--large { font-size: var(--td-switch-icon-large-size, 48rpx); } .t-switch__icon--small { font-size: var(--td-switch-icon-small-size, 32rpx); } .t-switch__loading { color: var(--td-switch-label-checked-color, var(--td-switch-checked-color, var(--td-primary-color, #0052d9))); } .t-switch__body { vertical-align: middle; width: var(--td-switch-width, 90rpx); height: var(--td-switch-height, 56rpx); border-radius: var(--td-switch-radius, calc(var(--td-switch-height, 56rpx) / 2)); background-color: var(--td-switch-unchecked-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))); position: relative; transition: all 0.3s ease; overflow: hidden; } .t-switch__body--checked { background-color: var(--td-switch-checked-color, var(--td-primary-color, #0052d9)); } .t-switch__body--disabled { background-color: var(--td-switch-unchecked-disabled-color, var(--td-gray-color-2, #eeeeee)); } .t-switch__body--checked.t-switch__body--disabled { background-color: var(--td-switch-checked-disabled-color, var(--td-primary-color-3, #bbd3fb)); } .t-switch__body--large { width: var(--td-switch-large-width, 104rpx); height: var(--td-switch-large-height, 64rpx); border-radius: var(--td-switch-large-radius, calc(var(--td-switch-large-height, 64rpx) / 2)); } .t-switch__body--small { width: var(--td-switch-small-width, 78rpx); height: var(--td-switch-small-height, 48rpx); border-radius: var(--td-switch-small-radius, calc(var(--td-switch-small-height, 48rpx) / 2)); } .t-switch__dot { position: absolute; left: var(--td-switch-dot-horizontal-margin, 6rpx); top: 50%; width: var(--td-switch-dot-size, 44rpx); height: var(--td-switch-dot-size, 44rpx); border-radius: 50%; background-color: var(--td-bg-color-block, #fff); transition: all 0.3s; transform: translateY(-50%); box-shadow: var(--td-switch-dot-shadow, var(--td-shadow-1, 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12))); } .t-switch__dot:after { content: ''; display: block; position: absolute; left: 0; top: 0; width: 200%; height: 200%; border: 1px solid var(--td-switch-dot-border-color, var(--td-gray-color-1, #f3f3f3)); border-radius: 50%; transform: scale(0.5); transform-origin: 0 0; box-sizing: border-box; } .t-switch__dot--large { width: var(--td-switch-dot-large-size, 52rpx); height: var(--td-switch-dot-large-size, 52rpx); } .t-switch__dot--small { width: var(--td-switch-dot-small-size, 36rpx); height: var(--td-switch-dot-small-size, 36rpx); } .t-switch__dot--checked { left: calc(var(--td-switch-width, 90rpx) - var(--td-switch-dot-size, 44rpx) - var(--td-switch-dot-horizontal-margin, 6rpx)); } .t-switch__dot--large.t-switch__dot--checked { left: calc(var(--td-switch-large-width, 104rpx) - var(--td-switch-dot-large-size, 52rpx) - var(--td-switch-dot-horizontal-margin, 6rpx)); } .t-switch__dot--small.t-switch__dot--checked { left: calc(var(--td-switch-small-width, 78rpx) - var(--td-switch-dot-small-size, 36rpx) - var(--td-switch-dot-horizontal-margin, 6rpx)); } .t-switch__dot--plain:not(.t-switch__dot--checked) { width: var(--td-switch-dot-plain-size, 36rpx); height: var(--td-switch-dot-plain-size, 36rpx); left: var(--td-switch-dot-plain-horizontal-margin, 10rpx); } .t-switch__dot--large.t-switch__dot--plain:not(.t-switch__dot--checked) { width: var(--td-switch-dot-plain-large-size, 44rpx); height: var(--td-switch-dot-plain-large-size, 44rpx); } .t-switch__dot--small.t-switch__dot--plain:not(.t-switch__dot--checked) { width: var(--td-switch-dot-plain-small-size, 28rpx); height: var(--td-switch-dot-plain-small-size, 28rpx); }