mx-datepicker.wxss 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. @charset "UTF-8";
  2. /**
  3. * 这里是uni-app内置的常用样式变量
  4. *
  5. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  6. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  7. *
  8. */
  9. /**
  10. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  11. *
  12. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  13. */
  14. /* 颜色变量 */
  15. /* 行为相关颜色 */
  16. /* 文字基本颜色 */
  17. /* 背景颜色 */
  18. /* 边框颜色 */
  19. /* 尺寸变量 */
  20. /* 文字尺寸 */
  21. /* 图片尺寸 */
  22. /* Border Radius */
  23. /* 水平间距 */
  24. /* 垂直间距 */
  25. /* 透明度 */
  26. /* 文章场景相关 */
  27. .picker.data-v-191e0624 {
  28. position: fixed;
  29. z-index: 100;
  30. background: rgba(255, 255, 255, 0);
  31. left: 0;
  32. top: 0;
  33. width: 100%;
  34. height: 100%;
  35. font-size: 28rpx;
  36. }
  37. .picker-btn.data-v-191e0624 {
  38. padding: 10rpx 20rpx;
  39. border-radius: 12rpx;
  40. color: #666;
  41. }
  42. .picker-btn-active.data-v-191e0624 {
  43. background: rgba(0, 0, 0, 0.1);
  44. }
  45. .picker-display.data-v-191e0624 {
  46. color: #666;
  47. }
  48. .picker-display-text.data-v-191e0624 {
  49. color: #000;
  50. margin: 0 10rpx;
  51. }
  52. .picker-display-link.data-v-191e0624 {
  53. display: inline-block;
  54. }
  55. .picker-display-link-active.data-v-191e0624 {
  56. background: rgba(0, 0, 0, 0.1);
  57. }
  58. .picker-time.data-v-191e0624 {
  59. width: 550rpx !important;
  60. left: 100rpx !important;
  61. }
  62. .picker-modal.data-v-191e0624 {
  63. background: #fff;
  64. position: absolute;
  65. top: 50%;
  66. left: 60rpx;
  67. width: 630rpx;
  68. -webkit-transform: translateY(-50%);
  69. transform: translateY(-50%);
  70. box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  71. border-radius: 12rpx;
  72. }
  73. .picker-modal-header.data-v-191e0624 {
  74. text-align: center;
  75. line-height: 80rpx;
  76. font-size: 32rpx;
  77. }
  78. .picker-modal-header-title.data-v-191e0624 {
  79. display: inline-block;
  80. width: 40%;
  81. }
  82. .picker-modal-header .picker-icon.data-v-191e0624 {
  83. display: inline-block;
  84. line-height: 50rpx;
  85. width: 50rpx;
  86. height: 50rpx;
  87. border-radius: 50rpx;
  88. text-align: center;
  89. margin: 10rpx;
  90. background: #fff;
  91. font-size: 36rpx;
  92. }
  93. .picker-modal-header .picker-icon-active.data-v-191e0624 {
  94. background: rgba(0, 0, 0, 0.1);
  95. }
  96. .picker-modal-body.data-v-191e0624 {
  97. width: 630rpx !important;
  98. height: 630rpx !important;
  99. position: relative;
  100. }
  101. .picker-modal-time.data-v-191e0624 {
  102. width: 100%;
  103. height: 180rpx;
  104. text-align: center;
  105. line-height: 60rpx;
  106. }
  107. .picker-modal-footer.data-v-191e0624 {
  108. display: flex;
  109. justify-content: space-between;
  110. align-items: center;
  111. padding: 20rpx;
  112. }
  113. .picker-modal-footer-info.data-v-191e0624 {
  114. flex-grow: 1;
  115. }
  116. .picker-modal-footer-btn.data-v-191e0624 {
  117. flex-shrink: 0;
  118. display: flex;
  119. }
  120. .picker-calendar.data-v-191e0624 {
  121. position: absolute;
  122. left: 0;
  123. top: 0;
  124. width: 100%;
  125. height: 100%;
  126. display: flex;
  127. align-items: center;
  128. flex-wrap: wrap;
  129. }
  130. .picker-calendar-view.data-v-191e0624 {
  131. position: relative;
  132. width: 90rpx;
  133. height: 90rpx;
  134. text-align: center;
  135. }
  136. .picker-calendar-view-bgbegin.data-v-191e0624, .picker-calendar-view-bg.data-v-191e0624, .picker-calendar-view-bgend.data-v-191e0624, .picker-calendar-view-item.data-v-191e0624, .picker-calendar-view-dot.data-v-191e0624, .picker-calendar-view-tips.data-v-191e0624 {
  137. position: absolute;
  138. transition: .2s;
  139. }
  140. .picker-calendar-view-bgbegin.data-v-191e0624, .picker-calendar-view-bg.data-v-191e0624, .picker-calendar-view-bgend.data-v-191e0624 {
  141. opacity: .15;
  142. height: 80%;
  143. }
  144. .picker-calendar-view-bg.data-v-191e0624 {
  145. left: 0;
  146. top: 10%;
  147. width: 100%;
  148. }
  149. .picker-calendar-view-bgbegin.data-v-191e0624 {
  150. border-radius: 90rpx 0 0 90rpx;
  151. top: 10%;
  152. left: 10%;
  153. width: 90%;
  154. }
  155. .picker-calendar-view-bgend.data-v-191e0624 {
  156. border-radius: 0 90rpx 90rpx 0;
  157. top: 10%;
  158. left: 0%;
  159. width: 90%;
  160. }
  161. .picker-calendar-view-item.data-v-191e0624 {
  162. left: 5%;
  163. top: 5%;
  164. width: 90%;
  165. height: 90%;
  166. border-radius: 90rpx;
  167. display: flex;
  168. align-items: center;
  169. justify-content: center;
  170. }
  171. .picker-calendar-view-dot.data-v-191e0624 {
  172. right: 10%;
  173. top: 10%;
  174. width: 12rpx;
  175. height: 12rpx;
  176. border-radius: 12rpx;
  177. }
  178. .picker-calendar-view-tips.data-v-191e0624 {
  179. bottom: 100%;
  180. left: 50%;
  181. -webkit-transform: translateX(-50%);
  182. transform: translateX(-50%);
  183. background: #4E4B46;
  184. color: #fff;
  185. border-radius: 12rpx;
  186. padding: 10rpx 20rpx;
  187. font-size: 24rpx;
  188. width: -webkit-max-content;
  189. width: max-content;
  190. margin-bottom: 5px;
  191. pointer-events: none;
  192. }
  193. .picker-calendar-view-tips.data-v-191e0624:after {
  194. content: "";
  195. position: absolute;
  196. top: 100%;
  197. left: 50%;
  198. -webkit-transform: translateX(-50%);
  199. transform: translateX(-50%);
  200. width: 0;
  201. height: 0;
  202. border-style: solid;
  203. border-width: 5px 5px 0 5px;
  204. border-color: #4E4B46 transparent transparent transparent;
  205. }
  206. @font-face {
  207. font-family: "mxdatepickericon";
  208. src: url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMYAAsAAAAACBgAAALMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDIgqDRIJiATYCJAMUCwwABCAFhG0HSRvfBsg+QCa3noNAyAQ9w6GDvbwpNp2vloCyn8bD/x+y+/5qDhtj+T4eRVEcbsCoKMFASzCgLdDkmqYDwgxkWQ6YH5L/YnppOlLEjlnter43YRjU7M6vJ3iGADVAgJn5kqjv/wEii23T86UsAQT+04fV+o97VTMx4PPZt4DlorLXwIQiGMA5uhaVrBWqGHfQXcTEiE+PE+g2SUlxWlLVBHwUYFMgrgwSB3wstTKSGzqF1nOyiGeeOtNjV4An/vvxR58PSc3AzrMViyDvPo/7dVEUzn5GROfIWAcU4rLXfMFdhte56y4We9gGNEVIezkBOOaQXUrbTf/hJVkhGpDdCw7dSOEzByMEn3kIic98hMxnAfeFPKWCbjRcA148/HxhCEkaA94eGWFaGolsblpaWz8/Po2WVuNHh1fmBpZHIpqal9fOjizhTteY+RZ9rv02I/pq0W6QVH3pSncBz3m55r9ZIPycHfmenvxe4uyutIgfT5u4bgkDusl9gcF0rnfnz+b2NpSaQWBFeu8GIL1xQj5AH/6FAsEr/50F28e/gA9ny6KjLrxIp0TE+UucmQOl5AFNLXkzZufWamWHYEI39PEP2If97CMdm51N6DSmIekwAVmneXTBr0PVYx+aTgfQbU3p+R4jKHdRurBq0oEw6AKSfm+QDbpGF/w3VOP+oBnMHbqdx409FjP4RRHHkAj5IWgQiBUjHfMTuQ1Icpg5avI4sQVRu8EHdWptM1aKrIjuscfeL+kZwxBTYoElztOQ2UygjRIjEphaZsyWodHgvm9SC8QC/JygEA6DiCDeEMhAQFhhOpvxa/18A0TiYMahIy0L2hYIZWeYH9JR085Al4qts1re5St2/SR6DINBGEVYQCWOETHDMAHZ+pcZIQJGTV4RtMmg8UbhuWL1+VLLA2RFHYC71kiRo0SNpjwQh8pj2EFU3oTNmS1WqgIA") format("woff2");
  209. }
  210. .picker-icon.data-v-191e0624 {
  211. font-family: "mxdatepickericon" !important;
  212. }
  213. .picker-icon-you.data-v-191e0624:before {
  214. content: "\e63e";
  215. }
  216. .picker-icon-zuo.data-v-191e0624:before {
  217. content: "\e640";
  218. }
  219. .picker-icon-zuozuo.data-v-191e0624:before {
  220. content: "\e641";
  221. }
  222. .picker-icon-youyou.data-v-191e0624:before {
  223. content: "\e642";
  224. }