half-ring-progress.wxss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. .progress-container.data-v-00ef5f96 {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. padding: 20rpx;
  6. }
  7. .ring-wrapper.data-v-00ef5f96 {
  8. position: relative;
  9. width: 400rpx;
  10. height: 200rpx;
  11. overflow: hidden;
  12. }
  13. /* 背景半环样式 */
  14. .ring-bg.data-v-00ef5f96 {
  15. position: absolute;
  16. top: 0;
  17. left: 0;
  18. width: 400rpx;
  19. height: 400rpx;
  20. border-radius: 50%;
  21. border: 16rpx solid #97DAFF;
  22. box-sizing: border-box;
  23. clip: rect(0rpx, 400rpx, 200rpx, 0rpx);
  24. }
  25. /* 进度半环容器(控制旋转) */
  26. .ring-progress.data-v-00ef5f96 {
  27. position: absolute;
  28. top: 0;
  29. left: 0;
  30. width: 400rpx;
  31. height: 200rpx;
  32. overflow: hidden;
  33. transition: -webkit-transform 0.6s ease-in-out;
  34. transition: transform 0.6s ease-in-out;
  35. transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  36. }
  37. /* 左侧半环(青色) */
  38. .ring-left.data-v-00ef5f96 {
  39. position: absolute;
  40. top: 0;
  41. left: 0;
  42. width: 400rpx;
  43. height: 400rpx;
  44. border-radius: 50%;
  45. border: 16rpx solid #8FF8FB;
  46. box-sizing: border-box;
  47. clip: rect(0rpx, 200rpx, 400rpx, 0rpx);
  48. }
  49. /* 中间过渡区 */
  50. .ring-middle.data-v-00ef5f96 {
  51. position: absolute;
  52. top: 0;
  53. left: 150rpx;
  54. width: 100rpx;
  55. height: 400rpx;
  56. background: linear-gradient(to right, #8FF8FB, #5EC8FE);
  57. clip: rect(0rpx, 100rpx, 200rpx, 0rpx);
  58. }
  59. /* 右侧半环(蓝色) */
  60. .ring-right.data-v-00ef5f96 {
  61. position: absolute;
  62. top: 0;
  63. left: 0;
  64. width: 400rpx;
  65. height: 400rpx;
  66. border-radius: 50%;
  67. border: 16rpx solid #47AEFF;
  68. box-sizing: border-box;
  69. clip: rect(0rpx, 400rpx, 400rpx, 200rpx);
  70. }
  71. /* 进度原点(末端圆点) */
  72. .progress-dot.data-v-00ef5f96 {
  73. position: absolute;
  74. top: 0;
  75. left: 50%;
  76. width: 28rpx;
  77. height: 28rpx;
  78. background: #FFFFFF;
  79. border: 5rpx solid #47AEFF;
  80. border-radius: 50%;
  81. -webkit-transform-origin: center 200rpx;
  82. transform-origin: center 200rpx;
  83. margin-left: -14rpx;
  84. margin-top: -14rpx;
  85. box-shadow: 0 0 16rpx rgba(71, 174, 255, 0.8);
  86. transition: -webkit-transform 0.6s ease-in-out;
  87. transition: transform 0.6s ease-in-out;
  88. transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  89. z-index: 10;
  90. }
  91. /* 中间文字样式 */
  92. .progress-text.data-v-00ef5f96 {
  93. position: absolute;
  94. top: 65%;
  95. left: 50%;
  96. -webkit-transform: translate(-50%, -50%);
  97. transform: translate(-50%, -50%);
  98. text-align: center;
  99. }
  100. .percent.data-v-00ef5f96 {
  101. display: block;
  102. font-size: 60rpx;
  103. font-weight: bold;
  104. color: #333;
  105. margin-bottom: 10rpx;
  106. }
  107. .tips.data-v-00ef5f96 {
  108. display: block;
  109. font-size: 24rpx;
  110. color: #666;
  111. }
  112. /* 高亮文字(如“充电中”) */
  113. .tips text.data-v-00ef5f96 {
  114. color: v-bind(themeColor);
  115. }