index.wxss 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. .ant-progress-line {
  2. display: flex;
  3. flex-direction: row;
  4. align-items: center;
  5. }
  6. .ant-progress-line .ant-progress-outer {
  7. background-color: #f5f5f5;
  8. border-radius: 50vh;
  9. height: 8px;
  10. overflow: hidden;
  11. flex: 1;
  12. }
  13. .ant-progress-line .ant-progress-inner {
  14. border-radius: 50vh;
  15. transition: width 0.3s;
  16. height: 100%;
  17. position: relative;
  18. background-color: #1677ff;
  19. }
  20. .ant-progress-line .ant-progress-inner-success {
  21. background-color: #22b35e;
  22. }
  23. .ant-progress-line .ant-progress-inner-exception {
  24. background-color: #ff3141;
  25. }
  26. .ant-progress-line .ant-progress-indicator {
  27. margin-left: 8px;
  28. color: #999999;
  29. font-size: 13px;
  30. height: 18.5px;
  31. display: flex;
  32. align-items: center;
  33. }
  34. .ant-progress-line .ant-progress-status-icon-success {
  35. color: #22b35e;
  36. }
  37. .ant-progress-line .ant-progress-status-icon-exception {
  38. color: #ff3141;
  39. }
  40. .ant-progress-circle {
  41. position: relative;
  42. }
  43. .ant-progress-circle > canvas {
  44. width: 100%;
  45. height: 100%;
  46. }
  47. .ant-progress-circle .ant-progress-indicator {
  48. font-size: 20px;
  49. color: #333333;
  50. position: absolute;
  51. top: 50%;
  52. left: 50%;
  53. transform: translate3d(-50%, -50%, 0);
  54. z-index: 10;
  55. }