customProgress.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <template>
  2. <div class="progress-container">
  3. <div
  4. :class="['progress-inner', { started: total !== 0 }]"
  5. :data-precrnt="total + '%'"
  6. :style="{ width: total + '%' }"
  7. ></div>
  8. <div
  9. class="progress-round"
  10. style="top: 50%; left: 50%; transform: translate(-50%, -50%)"
  11. data-precrnt="50%"
  12. ></div>
  13. <div
  14. class="progress-round"
  15. style="top: 50%; left: 75%; transform: translate(-75%, -50%)"
  16. data-precrnt="75%"
  17. ></div>
  18. <div
  19. class="progress-round"
  20. style="top: 50%; left: 90%; transform: translate(-90%, -50%)"
  21. data-precrnt="90%"
  22. ></div>
  23. </div>
  24. </template>
  25. <script>
  26. export default {
  27. name: 'customProgress',
  28. props: {
  29. value: {
  30. type: [String, Number],
  31. default: 0,
  32. },
  33. },
  34. computed: {
  35. total: {
  36. get() {
  37. return this.value;
  38. },
  39. },
  40. },
  41. };
  42. </script>
  43. <style lang="less" scoped>
  44. .progress-container {
  45. height: 12px;
  46. background: #fae8d4;
  47. border-radius: 6px;
  48. position: relative;
  49. z-index: 0;
  50. .progress-inner {
  51. height: 12px;
  52. background: linear-gradient(90deg, #fde08d 0%, #ff0000 100%);
  53. border-radius: 6px;
  54. transition: width 0.5s;
  55. position: relative;
  56. z-index: 1;
  57. &.started::after {
  58. position: absolute;
  59. top: 50%;
  60. right: -13.5px;
  61. transform: translateY(-50%);
  62. display: block;
  63. content: attr(data-precrnt);
  64. font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  65. font-weight: bold;
  66. font-size: 9px;
  67. color: #ffffff;
  68. line-height: 16px;
  69. text-align: center;
  70. width: 35px;
  71. height: 16px;
  72. background: #ff3535;
  73. border-radius: 9px;
  74. }
  75. }
  76. .progress-round {
  77. width: 8px;
  78. height: 8px;
  79. background: #ff2855;
  80. border-radius: 50%;
  81. position: absolute;
  82. z-index: 0;
  83. &::after {
  84. position: absolute;
  85. top: -30px;
  86. left: 50%;
  87. transform: translateX(-50%);
  88. display: block;
  89. content: attr(data-precrnt);
  90. width: 33px;
  91. height: 19px;
  92. background: #ff3535;
  93. border: 1px solid #fff3cf;
  94. font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  95. font-weight: bold;
  96. font-size: 9px;
  97. color: #ffffff;
  98. line-height: 12px;
  99. text-align: center;
  100. font-style: normal;
  101. border-radius: 25px;
  102. line-height: 19px;
  103. }
  104. &::before {
  105. position: absolute;
  106. top: -14px;
  107. z-index: 2;
  108. left: 50%;
  109. transform: translateX(-50%);
  110. display: block;
  111. content: '';
  112. left: 50%;
  113. width: 0;
  114. height: 0;
  115. border-left: 3px solid transparent;
  116. border-right: 3px solid transparent;
  117. border-top: 8px solid #ff3535;
  118. }
  119. }
  120. }
  121. </style>