.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-steps-item { flex: 1; vertical-align: top; position: relative; } .t-steps-item__inner { position: relative; } .t-steps-item__icon { z-index: 1; vertical-align: top; font-size: 28rpx; position: relative; color: #ddd; } .t-steps-item__icon-number { display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; text-align: center; border: 1px solid #c5c5c5; border-radius: 50%; background-color: #fff; color: #c5c5c5; } .t-steps-item__icon-slot { display: flex; justify-content: center; align-items: center; width: 26px; height: 26px; text-align: center; color: #c5c5c5; } .t-steps-item__content { text-align: center; } .t-steps-item__title { position: relative; color: rgba(0, 0, 0, 0.26); line-height: 22px; font-size: 28rpx; text-align: center; margin-bottom: 4px; font-weight: 700; } .t-steps-item__description { color: rgba(0, 0, 0, 0.4); line-height: 20px; font-size: 24rpx; } .t-steps-item__extra:not(:empty) { margin-top: 16rpx; } :host { flex: 1; vertical-align: top; position: relative; align-self: flex-start; width: inherit; } .t-step--horizontal .t-steps-item__content { max-width: 80px; margin-top: 16rpx; } .t-step--horizontal .t-steps-item__inner .t-steps-item-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; } .t-step--horizontal .t-steps-item--finish .t-steps-item__icon-number { border-color: #0052d9; color: #0052d9; } .t-step--horizontal .t-steps-item--finish .t-steps-item__title { color: rgba(0, 0, 0, 0.9); } .t-step--horizontal .t-steps-item--process .t-steps-item__icon-number { background: #0052d9; color: #fff; border-color: #0052d9; } .t-step--horizontal .t-steps-item--process .t-steps-item__title { color: #0052d9; } .t-step--horizontal .t-steps-item--error .t-steps-item__icon-number { color: #e34d59; border-color: #e34d59; } .t-step--horizontal .t-steps-item--error .t-steps-item__title { color: #e34d59; } .t-step--horizontal .t-steps-item--default .t-steps-item__icon-number { border-color: #c5c5c5; color: #c5c5c5; } .t-step--horizontal .t-steps-item--default .t-steps-item__title, .t-step--horizontal .t-steps-item--default .t-steps-item__description { color: rgba(0, 0, 0, 0.26); } .t-step--horizontal.t-step--not-last-child .t-steps-item__inner:after { content: ''; display: block; height: 1px; background: #0052d9; position: absolute; transform: translateY(-50%); width: 100%; top: 13px; left: 50%; } .t-step--horizontal.t-step--not-last-child .t-steps-item__inner.t-steps-item__inner--large:after { top: calc(40px / 2); } .t-step--horizontal.t-step--not-last-child.t-step--readonly .t-steps-item--process .t-steps-item__inner:after, .t-step--horizontal.t-step--not-last-child.t-step--readonly .t-steps-item--error .t-steps-item__inner:after, .t-step--horizontal.t-step--not-last-child.t-step--readonly .t-steps-item--default .t-steps-item__inner:after { background: #c5c5c5; } .t-step--vertical .t-steps-item { position: relative; } .t-step--vertical .t-steps-item-wrapper { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; } .t-step--vertical .t-steps-item-wrapper:only-child { padding-bottom: 50rpx; } .t-step--vertical .t-steps-item-wrapper + .t-steps-item__sub-wrapper:not(:empty) { padding-top: 32rpx; padding-bottom: 48rpx; } .t-step--vertical .t-steps-item-sub { display: flex; width: 100%; height: 40rpx; align-items: center; padding-bottom: 8rpx; font-size: 24rpx; color: #0052d9; font-weight: 500; } .t-step--vertical .t-steps-item-sub-dot { display: flex; justify-content: center; width: 24px; text-align: center; border: 1px solid transparent; color: #c5c5c5; z-index: 2; } .t-step--vertical .t-steps-item-sub-dot-item { width: 8px; height: 8px; border-radius: 50%; } .t-step--vertical .t-steps-item-sub .t-steps-item-sub__content { margin-left: 16rpx; } .t-step--vertical .t-steps-item-sub-status--default { color: #c5c5c5; } .t-step--vertical .t-steps-item-sub-status--default .t-steps-item-sub-dot-item { background-color: #c5c5c5; } .t-step--vertical .t-steps-item-sub-status--finish { color: #000000; } .t-step--vertical .t-steps-item-sub-status--finish .t-steps-item-sub-dot-item { background-color: #0052d9; } .t-step--vertical .t-steps-item-sub-status--process { color: #0052d9; } .t-step--vertical .t-steps-item-sub-status--process .t-steps-item-sub-dot-item { background-color: #0052d9; } .t-step--vertical .t-steps-item-sub-status--error { color: #e34d59; } .t-step--vertical .t-steps-item-sub-status--error .t-steps-item-sub-dot-item { background-color: #e34d59; } .t-step--vertical .t-steps-item .t-steps-item-sub:last-child { padding-bottom: 0rpx; } .t-step--vertical .t-steps-item__content { margin-left: 16rpx; margin-right: 32rpx; flex: 1; } .t-step--vertical .t-steps-item__title { text-align: left; margin-top: 5px; line-height: 28rpx; margin-bottom: 16rpx; } .t-step--vertical .t-steps-item__description { text-align: left; } .t-step--vertical.t-step--default-anchor .t-steps-item--default .t-steps-item__icon-number { border-color: #c5c5c5; color: #c5c5c5; } .t-step--vertical.t-step--default-anchor .t-steps-item--finish .t-steps-item__icon-number { border-color: #0052d9; color: #0052d9; } .t-step--vertical.t-step--default-anchor .t-steps-item--finish .t-steps-item__title { color: rgba(0, 0, 0, 0.9); } .t-step--vertical.t-step--default-anchor .t-steps-item--process .t-steps-item__icon-number { background: #0052d9; color: #fff; border-color: #0052d9; } .t-step--vertical.t-step--default-anchor .t-steps-item--process .t-steps-item__title { color: #0052d9; } .t-step--vertical.t-step--default-anchor .t-steps-item--error .t-steps-item__icon-number { color: #e34d59; border-color: #e34d59; } .t-step--vertical.t-step--default-anchor .t-steps-item--error .t-steps-item__title { color: #e34d59; } .t-step--vertical.t-step--default-anchor.t-step--not-last-child .t-steps-item__inner::after { content: ''; display: block; height: 100%; width: 1px; background: #c5c5c5; transform: translateX(-50%); position: absolute; left: 13px; top: 13px; } .t-step--vertical.t-step--default-anchor.t-step--not-last-child .t-steps-item--finish .t-steps-item__inner:after { background: #0052d9; } .t-step--vertical.t-step--default-anchor.t-step--not-last-child .t-steps-item--default .t-steps-item__inner:after { background: #c5c5c5; } .t-step--vertical.t-step--dot-anchor .t-steps-item__icon-dot { display: block; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid #0052d9; border-radius: 50%; margin-top: 1px; } .t-step--vertical.t-step--dot-anchor .t-steps-item-sub-dot { width: 12px; box-sizing: border-box; border: 2px solid transparent; } .t-step--vertical.t-step--dot-anchor .t-steps-item__title { margin-top: 0; color: rgba(0, 0, 0, 0.9); } .t-step--vertical.t-step--dot-anchor.t-step--not-last-child .t-steps-item__inner::after { content: ''; display: block; height: calc(100% - 12px); width: 1px; background: #ddd; transform: translateX(50%); position: absolute; left: 5px; top: 13px; } .t-steps-item__icon-number--large { width: 40px; height: 40px; }