Countdown.wxss 1.1 KB

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