calendar.wxss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. @import "./icon/icon.wxss";
  2. .calendar_date{
  3. width: 100%;
  4. background-color: white;
  5. padding-bottom: 3rpx;
  6. margin-top: 40rpx;
  7. }
  8. .calendar_select_date{
  9. position: fixed;
  10. bottom: 0;
  11. left: 0;
  12. z-index: 100000 !important;
  13. animation: transfer .4s linear;
  14. }
  15. @keyframes transfer{
  16. 0%{
  17. transform: translateY(100%);
  18. }
  19. 100%{
  20. transform: translateY(0);
  21. }
  22. }
  23. .calendar_unselect_date{
  24. transition: all .4s ease;
  25. transform: translateY(100%);
  26. }
  27. .selected_date{
  28. width: 100%;
  29. height: 56rpx;
  30. padding-bottom: 16rpx;
  31. display: flex;
  32. justify-content: space-around;
  33. align-items: center;
  34. overflow: hidden;
  35. }
  36. .selected_date>view{
  37. width: 29.5%;
  38. display: flex;
  39. justify-content: space-around;
  40. }
  41. .calendar_panel{
  42. width: 100%;
  43. height: calc(100% - 56rpx);
  44. }
  45. .calendar_panel_two{
  46. display: flex;
  47. flex-direction: column;
  48. justify-content: space-around;
  49. }
  50. .calendar_box{
  51. width: 100%;
  52. background: #fff;
  53. overflow: hidden;
  54. display: flex;
  55. height: calc(100% / 6);
  56. align-items: center;
  57. }
  58. .weekday_label{
  59. width: calc(100% / 7);
  60. font-size: 27rpx;
  61. padding: 12rpx 0;
  62. display: flex;
  63. justify-content: center;
  64. align-items: center;
  65. overflow: hidden;
  66. text-overflow: ellipsis;
  67. white-space: nowrap;
  68. }
  69. .weekday_label > view{
  70. box-sizing: border-box;
  71. padding: 20%;
  72. }
  73. .select_icon{
  74. width: 30rpx;
  75. height: 30rpx;
  76. }
  77. .active_date{
  78. background: #FF874E;
  79. border-radius: 8rpx;
  80. /* 选中后的日期数字本身颜色 */
  81. color: white;
  82. font-weight: bold;
  83. overflow: hidden;
  84. position: relative;
  85. }
  86. /* .active_dates{
  87. background: rgba(0,0,0,.1);
  88. color: rgba(0,0,0,.5);
  89. position: relative;
  90. } */
  91. /* .active_dates::before{
  92. content: "今天";
  93. position: absolute;
  94. top: 3rpx;
  95. left: 50%;
  96. transform: translateX(-50%);
  97. color: blue;
  98. font-size: 18rpx;
  99. } */
  100. .actived_date{
  101. overflow: hidden;
  102. position: relative;
  103. }
  104. .actived_date::after{
  105. content: attr(data-event);
  106. position: absolute;
  107. bottom: 7%;
  108. left: 50%;
  109. transform: translateX(-50%);
  110. color: blue;
  111. font-size: 16rpx;
  112. }
  113. .show_box{
  114. padding: 20rpx;
  115. font-size: 26rpx;
  116. }
  117. .calendar_task{
  118. position: fixed;
  119. top: 0;
  120. left: 0;
  121. width: 100%;
  122. height: 100%;
  123. z-index: 99999 !important;
  124. background-color: rgba(0,0,0,.1);
  125. }