| | |
| | | bottom: 0; |
| | | transform: scale(1.5); |
| | | } |
| | | .t-progress { |
| | | --td-progress-inner-bg-color: var(--td-brand-color, var(--td-primary-color-7, #0052d9)); |
| | | --td-progress-track-bg-color: var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)); |
| | | --td-progress-circle-from: 0deg; |
| | | } |
| | | .t-progress__inner { |
| | | position: relative; |
| | | height: 100%; |
| | |
| | | } |
| | | .t-progress__bar { |
| | | width: 100%; |
| | | height: 12rpx; |
| | | height: var(--td-progress-line-stroke-width, 12rpx); |
| | | overflow: hidden; |
| | | background: var(--td-progress-track-bg-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7))); |
| | | border-radius: var(--td-radius-round, 999px); |
| | |
| | | font-size: calc(var(--td-font-size-base, 28rpx) + 2px); |
| | | } |
| | | .t-progress--plump { |
| | | height: 40rpx; |
| | | border-radius: calc(40rpx / 2); |
| | | height: var(--td-progress-stroke-plump-width, 40rpx); |
| | | border-radius: calc(var(--td-progress-stroke-plump-width, 40rpx) / 2); |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | |
| | | } |
| | | .t-progress__canvas--circle { |
| | | position: relative; |
| | | width: var(--td-progress-width, 224rpx); |
| | | height: var(--td-progress-height, 224rpx); |
| | | width: var(--td-progress-circle-width, 224rpx); |
| | | height: var(--td-progress-circle-width, 224rpx); |
| | | border-radius: var(--td-radius-circle, 50%); |
| | | } |
| | | .t-progress__canvas--circle .t-progress__canvas--inner { |
| | |
| | | left: 50%; |
| | | top: 50%; |
| | | transform: translate(-50%, -50%); |
| | | width: var(--td-progress-inner-size, calc(100% - 12rpx*2)); |
| | | height: var(--td-progress-inner-size, calc(100% - 12rpx*2)); |
| | | width: calc(100% - var(--td-progress-stroke-circle-width, 12rpx)*2); |
| | | height: calc(100% - var(--td-progress-stroke-circle-width, 12rpx)*2); |
| | | border-radius: var(--td-radius-circle, 50%); |
| | | display: flex; |
| | | flex-direction: row; |