index.less 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. @import (reference) './variable.less';
  2. .ant-progress {
  3. &-line {
  4. display: flex;
  5. flex-direction: row;
  6. align-items: center;
  7. .ant-progress-outer {
  8. background-color: @trail-color;
  9. border-radius: @corner-radius-circle;
  10. height: 16 * @rpx;
  11. overflow: hidden;
  12. flex: 1;
  13. }
  14. .ant-progress-inner {
  15. border-radius: @corner-radius-circle;
  16. transition: width 0.3s;
  17. height: 100%;
  18. position: relative;
  19. background-color: @stroke-color;
  20. &-success {
  21. background-color: @COLOR_GREEN;
  22. }
  23. &-exception {
  24. background-color: @COLOR_RED;
  25. }
  26. }
  27. .ant-progress-indicator {
  28. margin-left: 16 * @rpx;
  29. color: @COLOR_TEXT_ASSIST;
  30. font-size: 26 * @rpx;
  31. height: 37 * @rpx;
  32. display: flex;
  33. align-items: center;
  34. }
  35. .ant-progress-status-icon {
  36. &-success {
  37. color: @COLOR_GREEN;
  38. }
  39. &-exception {
  40. color: @COLOR_RED;
  41. }
  42. }
  43. }
  44. &-circle {
  45. position: relative;
  46. > canvas {
  47. width: 100%;
  48. height: 100%;
  49. }
  50. .ant-progress-indicator {
  51. font-size: 40 * @rpx;
  52. color: @COLOR_TEXT_PRIMARY;
  53. position: absolute;
  54. top: 50%;
  55. left: 50%;
  56. transform: translate3d(-50%, -50%, 0);
  57. z-index: 10;
  58. }
  59. }
  60. }