picker.css 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. .weui-mask {
  2. position: fixed;
  3. z-index: 1000;
  4. top: 0;
  5. right: 0;
  6. left: 0;
  7. bottom: 0;
  8. background: rgba(0, 0, 0, 0.6);
  9. }
  10. .weui-mask_transparent {
  11. position: fixed;
  12. z-index: 1000;
  13. top: 0;
  14. right: 0;
  15. left: 0;
  16. bottom: 0;
  17. }
  18. .weui-picker {
  19. position: fixed;
  20. width: 100%;
  21. left: 0;
  22. bottom: 0;
  23. z-index: 5000;
  24. -webkit-backface-visibility: hidden;
  25. backface-visibility: hidden;
  26. -webkit-transform: translate(0, 100%);
  27. transform: translate(0, 100%);
  28. -webkit-transition: -webkit-transform 0.3s;
  29. transition: -webkit-transform 0.3s;
  30. transition: transform 0.3s;
  31. transition: transform 0.3s, -webkit-transform 0.3s;
  32. }
  33. .weui-picker__hd {
  34. display: -webkit-box;
  35. display: -webkit-flex;
  36. display: flex;
  37. padding: 9px 15px;
  38. background-color: var(--White);
  39. position: relative;
  40. text-align: center;
  41. font-size: 17px;
  42. }
  43. .weui-picker__hd:after {
  44. content: ' ';
  45. position: absolute;
  46. left: 0;
  47. bottom: 0;
  48. right: 0;
  49. height: 1px;
  50. border-bottom: 1px solid #e5e5e5;
  51. color: #e5e5e5;
  52. -webkit-transform-origin: 0 100%;
  53. transform-origin: 0 100%;
  54. -webkit-transform: scaleY(0.5);
  55. transform: scaleY(0.5);
  56. }
  57. .weui-picker__action {
  58. display: block;
  59. -webkit-box-flex: 1;
  60. -webkit-flex: 1;
  61. flex: 1;
  62. color: #1aad19;
  63. }
  64. .weui-picker__action:first-child {
  65. text-align: left;
  66. color: #888;
  67. }
  68. .weui-picker__action:last-child {
  69. text-align: right;
  70. }
  71. .weui-picker__bd {
  72. display: -webkit-box;
  73. display: -webkit-flex;
  74. display: flex;
  75. position: relative;
  76. background-color: var(--White);
  77. height: 238px;
  78. overflow: hidden;
  79. }
  80. .weui-picker__group {
  81. -webkit-box-flex: 1;
  82. -webkit-flex: 1;
  83. flex: 1;
  84. position: relative;
  85. height: 100%;
  86. }
  87. .weui-picker__mask {
  88. position: absolute;
  89. top: 0;
  90. left: 0;
  91. width: 100%;
  92. height: 100%;
  93. margin: 0 auto;
  94. z-index: 3;
  95. background: -webkit-linear-gradient(
  96. top,
  97. rgba(255, 255, 255, 0.95),
  98. rgba(255, 255, 255, 0.6)
  99. ),
  100. -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
  101. background: linear-gradient(
  102. 180deg,
  103. rgba(255, 255, 255, 0.95),
  104. rgba(255, 255, 255, 0.6)
  105. ),
  106. linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
  107. background-position: top, bottom;
  108. background-size: 100% 102px;
  109. background-repeat: no-repeat;
  110. -webkit-transform: translateZ(0);
  111. transform: translateZ(0);
  112. }
  113. .weui-picker__indicator {
  114. width: 100%;
  115. height: 34px;
  116. position: absolute;
  117. left: 0;
  118. top: 102px;
  119. z-index: 3;
  120. }
  121. .weui-picker__indicator:before {
  122. content: ' ';
  123. position: absolute;
  124. left: 0;
  125. top: 0;
  126. right: 0;
  127. height: 1px;
  128. border-top: 1px solid #e5e5e5;
  129. color: #e5e5e5;
  130. -webkit-transform-origin: 0 0;
  131. transform-origin: 0 0;
  132. -webkit-transform: scaleY(0.5);
  133. transform: scaleY(0.5);
  134. }
  135. .weui-picker__indicator:after {
  136. content: ' ';
  137. position: absolute;
  138. left: 0;
  139. bottom: 0;
  140. right: 0;
  141. height: 1px;
  142. border-bottom: 1px solid #e5e5e5;
  143. color: #e5e5e5;
  144. -webkit-transform-origin: 0 100%;
  145. transform-origin: 0 100%;
  146. -webkit-transform: scaleY(0.5);
  147. transform: scaleY(0.5);
  148. }
  149. .weui-picker__content {
  150. position: absolute;
  151. top: 0;
  152. left: 0;
  153. width: 100%;
  154. }
  155. .weui-picker__item {
  156. padding: 0;
  157. height: 34px;
  158. line-height: 34px;
  159. text-align: center;
  160. color: var(--DarkBlack);
  161. text-overflow: ellipsis;
  162. white-space: nowrap;
  163. overflow: hidden;
  164. }
  165. .weui-picker__item_disabled {
  166. color: #808080;
  167. }
  168. @-webkit-keyframes slideUp {
  169. from {
  170. -webkit-transform: translate3d(0, 100%, 0);
  171. transform: translate3d(0, 100%, 0);
  172. }
  173. to {
  174. -webkit-transform: translate3d(0, 0, 0);
  175. transform: translate3d(0, 0, 0);
  176. }
  177. }
  178. @keyframes slideUp {
  179. from {
  180. -webkit-transform: translate3d(0, 100%, 0);
  181. transform: translate3d(0, 100%, 0);
  182. }
  183. to {
  184. -webkit-transform: translate3d(0, 0, 0);
  185. transform: translate3d(0, 0, 0);
  186. }
  187. }
  188. .weui-animate-slide-up {
  189. -webkit-animation: slideUp ease 0.3s forwards;
  190. animation: slideUp ease 0.3s forwards;
  191. }
  192. @-webkit-keyframes slideDown {
  193. from {
  194. -webkit-transform: translate3d(0, 0, 0);
  195. transform: translate3d(0, 0, 0);
  196. }
  197. to {
  198. -webkit-transform: translate3d(0, 100%, 0);
  199. transform: translate3d(0, 100%, 0);
  200. }
  201. }
  202. @keyframes slideDown {
  203. from {
  204. -webkit-transform: translate3d(0, 0, 0);
  205. transform: translate3d(0, 0, 0);
  206. }
  207. to {
  208. -webkit-transform: translate3d(0, 100%, 0);
  209. transform: translate3d(0, 100%, 0);
  210. }
  211. }
  212. .weui-animate-slide-down {
  213. -webkit-animation: slideDown ease 0.3s forwards;
  214. animation: slideDown ease 0.3s forwards;
  215. }