cu-progress.css 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. .cu-progress-main {
  2. position: relative;
  3. display: flex;
  4. flex-direction: row;
  5. align-items: center;
  6. text-align: center;
  7. justify-content: space-between;
  8. margin: 0;
  9. padding: 0;
  10. background-color: inherit;
  11. overflow: hidden;
  12. }
  13. .cu-progress {
  14. position: absolute;
  15. display: flex;
  16. flex-direction: row;
  17. align-items: center;
  18. text-align: center;
  19. justify-content: space-between;
  20. margin: 0;
  21. padding: 0;
  22. background-color: inherit;
  23. /* overflow: hidden; */
  24. }
  25. .cu-progress-bar {
  26. position: absolute;
  27. left: 0;
  28. }
  29. .cu-progress-node {
  30. position: absolute;
  31. width: 100%;
  32. display: flex;
  33. justify-content: space-between;
  34. }
  35. .node-item {
  36. width: 16rpx;
  37. height: 16rpx;
  38. background: #ffffff;
  39. border: 4rpx solid #e6e6e6;
  40. border-radius: 50%;
  41. }
  42. .active-node-item {
  43. border-color: #05c175;
  44. }
  45. .cu-area {
  46. position: absolute;
  47. display: flex;
  48. flex-direction: row;
  49. align-items: center;
  50. /* left: 0; */
  51. z-index: 2;
  52. }
  53. .cu-handle {
  54. position: absolute;
  55. display: flex;
  56. flex-direction: column;
  57. align-items: center;
  58. text-align: center;
  59. justify-content: space-around;
  60. overflow: hidden;
  61. z-index: 5;
  62. }
  63. .cu-handle text {
  64. align-items: center;
  65. text-align: center;
  66. white-space: nowrap;
  67. }
  68. .cu-showInfo {
  69. position: absolute;
  70. justify-content: space-around;
  71. align-items: center;
  72. overflow: hidden;
  73. white-space: nowrap;
  74. pointer-events: none;
  75. }