canvas-ring.wxss 798 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. .circle-bar-wrap {
  2. width: 100%;
  3. display: flex;
  4. flex-direction: column;
  5. justify-content: center;
  6. align-items: center;
  7. text-align: center;
  8. box-sizing: border-box;
  9. /* padding: 0 20%; */
  10. }
  11. .circle-bar-wrap .font {
  12. max-height: 62rpx;
  13. font-size: 26rpx;
  14. overflow: hidden;
  15. text-overflow: ellipsis;
  16. display: -webkit-box;
  17. -webkit-box-orient: vertical;
  18. -webkit-line-clamp: 2;
  19. white-space: normal;
  20. }
  21. .canvas{
  22. position: relative;
  23. z-index: 0;
  24. }
  25. .circle-bar-wrap .val {
  26. width: 68%;
  27. height: 68%;
  28. font-size: 40rpx;
  29. border-radius: 50%;
  30. display: flex;
  31. align-items: center;
  32. justify-content: center;
  33. }
  34. .round{
  35. width:100%;
  36. height:100%;
  37. /* border: 2.5rpx solid #DCD7FC; */
  38. border-radius: 50%;
  39. display: flex;
  40. align-items: center;
  41. justify-content: center;
  42. }