x-clock.wxss 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. .clock-container.data-v-15de028e {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. /* width: 100%; */
  6. }
  7. .clock-face.data-v-15de028e {
  8. position: relative;
  9. border-radius: 50%;
  10. background-color: #ffffff;
  11. display: flex;
  12. justify-content: center;
  13. align-items: center;
  14. border: 6rpx solid #f5f5f5;
  15. }
  16. .hour-marker.data-v-15de028e {
  17. position: absolute;
  18. width: 6rpx;
  19. height: 6rpx;
  20. border-radius: 50%;
  21. background-color: #aaa;
  22. top: 50%;
  23. left: 50%;
  24. -webkit-transform-origin: center;
  25. transform-origin: center;
  26. }
  27. .hour-hand.data-v-15de028e {
  28. position: absolute;
  29. background-color: #333;
  30. bottom: 50%;
  31. left: 50%;
  32. -webkit-transform-origin: bottom center;
  33. transform-origin: bottom center;
  34. border-radius: 6rpx;
  35. }
  36. .minute-hand.data-v-15de028e {
  37. position: absolute;
  38. background-color: #333;
  39. bottom: 50%;
  40. left: 50%;
  41. -webkit-transform-origin: bottom center;
  42. transform-origin: bottom center;
  43. border-radius: 4rpx;
  44. }
  45. .second-hand.data-v-15de028e {
  46. position: absolute;
  47. background-color: #666;
  48. bottom: 50%;
  49. left: 50%;
  50. -webkit-transform-origin: bottom center;
  51. transform-origin: bottom center;
  52. border-radius: 2rpx;
  53. }
  54. .center-point.data-v-15de028e {
  55. position: absolute;
  56. background-color: #333;
  57. border-radius: 50%;
  58. z-index: 10;
  59. }