Countdown.wxss 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. .calendar-item{
  2. display: flex;
  3. gap: 28rpx;
  4. }
  5. .item-lf{
  6. background: #FFC200;
  7. border-radius: 8rpx;
  8. width: 184rpx;
  9. height: 160rpx;
  10. position: relative;
  11. }
  12. .item-ri{
  13. flex: 1;
  14. height: 160rpx;
  15. background: #DD2E28;
  16. border-radius: 8rpx;
  17. position: relative;
  18. }
  19. .item-img{
  20. position: relative;
  21. }
  22. .img-lf,.img-ri{
  23. position: absolute;
  24. width: 16rpx;
  25. height: 38rpx;
  26. top: -18rpx;
  27. }
  28. .img-lf{
  29. left: 16rpx;
  30. }
  31. .img-ri{
  32. right: 16rpx;
  33. }
  34. .item-num{
  35. font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
  36. font-weight: bold;
  37. font-size: 52rpx;
  38. color: #FFFFFF;
  39. position: absolute;
  40. top: 40%;
  41. left: 50%;
  42. transform: translate(-50%,-50%);
  43. letter-spacing: 2rpx;
  44. width: 100%;
  45. text-align: center;
  46. }
  47. .colon{
  48. margin: 0 14rpx;
  49. }
  50. .item-day{
  51. position: absolute;
  52. background-color: rgba(0,0,0,0.25);
  53. border-radius: 0rpx 0rpx 8rpx 8rpx;
  54. bottom: 0;
  55. left: 0;
  56. right: 0;
  57. font-family: PingFangSC, PingFang SC;
  58. font-weight: 600;
  59. font-size: 24rpx;
  60. color: #FFFFFF;
  61. padding: 6rpx 0;
  62. text-align: center;
  63. display: flex;
  64. justify-content: space-evenly;
  65. }