HistorySearchCard.wxss 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. .card.data-v-df43cc4c {
  2. background: #ffffff;
  3. border-radius: 24rpx;
  4. box-shadow: 0 16rpx 40rpx rgba(37, 52, 94, 0.08);
  5. margin-bottom: 32rpx;
  6. }
  7. .history-card.data-v-df43cc4c {
  8. padding: 32rpx;
  9. }
  10. .history-header.data-v-df43cc4c {
  11. display: flex;
  12. align-items: center;
  13. margin-bottom: 24rpx;
  14. }
  15. .history-title.data-v-df43cc4c {
  16. font-size: 30rpx;
  17. font-weight: 600;
  18. color: #222222;
  19. }
  20. .date-range-row.data-v-df43cc4c {
  21. display: flex;
  22. align-items: center;
  23. gap: 16rpx;
  24. margin-bottom: 24rpx;
  25. }
  26. .date-separator.data-v-df43cc4c {
  27. font-size: 26rpx;
  28. color: #666a7f;
  29. padding: 0 8rpx;
  30. }
  31. .date-input.data-v-df43cc4c {
  32. flex: 1;
  33. background: #f7f8fc;
  34. border-radius: 12rpx;
  35. padding: 24rpx;
  36. display: flex;
  37. justify-content: space-between;
  38. align-items: center;
  39. }
  40. .date-text.data-v-df43cc4c {
  41. font-size: 26rpx;
  42. color: #222222;
  43. }
  44. .date-icon.data-v-df43cc4c {
  45. font-size: 24rpx;
  46. }
  47. .history-search-button-full.data-v-df43cc4c {
  48. width: 100%;
  49. background: linear-gradient(135deg, #5d55e8, #7568ff);
  50. border-radius: 16rpx;
  51. padding: 28rpx 0;
  52. text-align: center;
  53. margin-top: 12rpx;
  54. margin-bottom: 24rpx;
  55. box-shadow: 0 8rpx 20rpx rgba(93, 85, 232, 0.3);
  56. }
  57. .search-button-text.data-v-df43cc4c {
  58. font-size: 28rpx;
  59. font-weight: 600;
  60. color: #ffffff;
  61. }
  62. .history-tip.data-v-df43cc4c {
  63. font-size: 24rpx;
  64. color: #9ca2b5;
  65. line-height: 1.6;
  66. }
  67. /* 日期选择器弹窗 */
  68. .date-picker-mask.data-v-df43cc4c {
  69. position: fixed;
  70. top: 0;
  71. left: 0;
  72. right: 0;
  73. bottom: 0;
  74. background: rgba(0, 0, 0, 0.5);
  75. z-index: 1000;
  76. display: flex;
  77. align-items: flex-end;
  78. justify-content: center;
  79. }
  80. .date-picker-popup.data-v-df43cc4c {
  81. width: 100%;
  82. background: #ffffff;
  83. border-radius: 32rpx 32rpx 0 0;
  84. padding: 32rpx;
  85. padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
  86. }
  87. .picker-header.data-v-df43cc4c {
  88. display: flex;
  89. justify-content: space-between;
  90. align-items: center;
  91. margin-bottom: 32rpx;
  92. }
  93. .picker-cancel.data-v-df43cc4c {
  94. font-size: 28rpx;
  95. color: #999999;
  96. padding: 16rpx;
  97. }
  98. .picker-title.data-v-df43cc4c {
  99. font-size: 32rpx;
  100. font-weight: 600;
  101. color: #222222;
  102. }
  103. .picker-confirm.data-v-df43cc4c {
  104. font-size: 28rpx;
  105. color: #5d55e8;
  106. font-weight: 600;
  107. padding: 16rpx;
  108. }
  109. .month-selector.data-v-df43cc4c {
  110. display: flex;
  111. justify-content: center;
  112. align-items: center;
  113. margin-bottom: 24rpx;
  114. gap: 48rpx;
  115. }
  116. .month-nav.data-v-df43cc4c {
  117. width: 64rpx;
  118. height: 64rpx;
  119. display: flex;
  120. align-items: center;
  121. justify-content: center;
  122. background: #f7f8fc;
  123. border-radius: 50%;
  124. }
  125. .nav-arrow.data-v-df43cc4c {
  126. font-size: 36rpx;
  127. color: #5d55e8;
  128. font-weight: bold;
  129. }
  130. .current-month.data-v-df43cc4c {
  131. font-size: 32rpx;
  132. font-weight: 600;
  133. color: #222222;
  134. min-width: 200rpx;
  135. text-align: center;
  136. }
  137. .weekday-row.data-v-df43cc4c {
  138. display: flex;
  139. margin-bottom: 16rpx;
  140. }
  141. .weekday-item.data-v-df43cc4c {
  142. flex: 1;
  143. text-align: center;
  144. font-size: 24rpx;
  145. color: #999999;
  146. padding: 16rpx 0;
  147. }
  148. .days-grid.data-v-df43cc4c {
  149. display: flex;
  150. flex-wrap: wrap;
  151. }
  152. .day-item.data-v-df43cc4c {
  153. width: 14.28%;
  154. aspect-ratio: 1;
  155. display: flex;
  156. align-items: center;
  157. justify-content: center;
  158. }
  159. .day-item.empty.data-v-df43cc4c {
  160. background: transparent;
  161. }
  162. .day-text.data-v-df43cc4c {
  163. width: 72rpx;
  164. height: 72rpx;
  165. line-height: 72rpx;
  166. text-align: center;
  167. font-size: 28rpx;
  168. color: #222222;
  169. border-radius: 50%;
  170. }
  171. .day-item.selected .day-text.data-v-df43cc4c {
  172. background: linear-gradient(135deg, #5d55e8, #7568ff);
  173. color: #ffffff;
  174. font-weight: 600;
  175. }
  176. .day-item.today .day-text.data-v-df43cc4c {
  177. border: 2rpx solid #5d55e8;
  178. }
  179. .day-item.today.selected .day-text.data-v-df43cc4c {
  180. border: none;
  181. }