select.css 26 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030
  1. .toolbar {
  2. position: relative;
  3. width: 100%;
  4. font-size: .85rem;
  5. line-height: 1.5;
  6. color: #3d4145;
  7. background: #f7f7f8;
  8. border-top-left-radius: 10px;
  9. border-top-right-radius: 10px;
  10. height: 60px;
  11. }
  12. .toolbar:before {
  13. content: '';
  14. position: absolute;
  15. left: 0;
  16. top: 0;
  17. bottom: auto;
  18. right: auto;
  19. height: 0;
  20. width: 100%;
  21. background-color: #d9d9d9;
  22. display: block;
  23. z-index: 15;
  24. -webkit-transform-origin: 50% 0%;
  25. transform-origin: 50% 0%;
  26. }
  27. .toolbar .toolbar-inner {
  28. height: 2.2rem;
  29. display: -webkit-box;
  30. display: -ms-flexbox;
  31. display: -webkit-flex;
  32. display: flex;
  33. text-align: center;
  34. }
  35. .toolbar .picker-button {
  36. color: #000;
  37. font-size: 14px;
  38. padding-top: 12px;
  39. margin-right: 15px;
  40. position: absolute;
  41. right: 0;
  42. box-sizing: border-box;
  43. height: 2.2rem;
  44. line-height: 2.2rem;
  45. z-index: 1;
  46. }
  47. .toolbar .title {
  48. position: absolute;
  49. display: block;
  50. width: 100%;
  51. padding: 0;
  52. line-height: 2.2rem;
  53. white-space: nowrap;
  54. text-align: left;
  55. text-indent: 20px;
  56. background: #fff;
  57. border-top-left-radius: 10px;
  58. border-top-right-radius: 10px;
  59. color: #000;
  60. font-size: 20px;
  61. font-weight: bold;
  62. height: 60px;
  63. padding-top: 10px;
  64. box-sizing: border-box;
  65. }
  66. .closeBtn{
  67. padding: 13px 0;
  68. color: #009fe8;
  69. background: #fff;
  70. border-bottom-left-radius: 10px;
  71. border-bottom-right-radius: 10px;
  72. font-size: 19px;
  73. /*border-top: 1px solid #e4e4e4;*/
  74. }
  75. /**********/
  76. .weui-cells{
  77. margin-top: 1.17647059em;
  78. background-color: #FFFFFF;
  79. line-height: 1.47058824;
  80. font-size: 17px;
  81. overflow: hidden;
  82. position: relative;
  83. }
  84. .weui-cells:before {
  85. content: " ";
  86. position: absolute;
  87. left: 0;
  88. top: 0;
  89. right: 0;
  90. color: #e5e5e5;
  91. -webkit-transform-origin: 0 0;
  92. transform-origin: 0 0;
  93. -webkit-transform: scaleY(0.5);
  94. transform: scaleY(0.5);
  95. z-index: 2;
  96. height: 0;
  97. border: none;
  98. }
  99. .weui-cell {
  100. font-size: 14px;
  101. padding: 12px 20px;
  102. position: relative;
  103. display: -webkit-box;
  104. display: -webkit-flex;
  105. display: flex;
  106. -webkit-box-align: center;
  107. -webkit-align-items: center;
  108. align-items: center;
  109. height: 46px;
  110. box-sizing: border-box;
  111. }
  112. .weui-cell__bd {
  113. -webkit-box-flex: 1;
  114. -webkit-flex: 1;
  115. flex: 1;
  116. }
  117. weui-cell_primary {
  118. -webkit-box-align: start;
  119. -webkit-align-items: flex-start;
  120. align-items: flex-start;
  121. }
  122. .weui-cells_radio .weui-cell__ft {
  123. padding-left: 0.35em;
  124. }
  125. .weui-cell__ft {
  126. text-align: right;
  127. color: #999999;
  128. }
  129. .weui-check {
  130. position: absolute;
  131. left: -9999em;
  132. }
  133. .weui-cells_radio .weui-check + .weui-icon-checked {
  134. min-width: 16px;
  135. }
  136. [class^="weui-icon-"], [class*=" weui-icon-"] {
  137. display: inline-block;
  138. vertical-align: middle;
  139. font: normal normal normal 14px/1 "weui";
  140. font-size: inherit;
  141. text-rendering: auto;
  142. -webkit-font-smoothing: antialiased;
  143. }
  144. .weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before {
  145. content: '';
  146. width: 20px;
  147. height: 20px;
  148. background: url("../icon/checkbox.png") no-repeat;
  149. background-size: cover;
  150. }
  151. [class^="weui-icon-"]:before, [class*=" weui-icon-"]:before {
  152. display: inline-block;
  153. margin-left: .2em;
  154. margin-right: .2em;
  155. }
  156. .weui-cells_checkbox .weui-icon-checked:before {
  157. content: '';
  158. width: 20px;
  159. height: 20px;
  160. background: url("../icon/nocheckbox.png") no-repeat;
  161. background-size: cover;
  162. }
  163. .weui-cells_radio .weui-check:checked + .weui-icon-checked:before{
  164. content: '';
  165. width: 20px;
  166. height: 20px;
  167. background: url("../icon/radio.png") no-repeat;
  168. background-size: cover;
  169. }
  170. .weui-cell:last-child:after{
  171. content: " ";
  172. position: absolute;
  173. bottom: 0;
  174. right: 0;
  175. height: 1px;
  176. color: #e5e5e5;
  177. -webkit-transform-origin: 0 0;
  178. transform-origin: 0 0;
  179. -webkit-transform: scaleY(0.5);
  180. transform: scaleY(0.5);
  181. left: 10px;
  182. z-index: 2;
  183. }
  184. .weui-picker-container {
  185. background-color: rgba(0, 0, 0, .4);
  186. height: 100%;
  187. }
  188. .weui-picker-overlay {
  189. height: 0;
  190. }
  191. .weui-picker-container, .weui-picker-overlay {
  192. position: fixed;
  193. bottom:0;
  194. left: 0;
  195. right: 0;
  196. width: 100%;
  197. z-index: 1000
  198. }
  199. .city-picker .picker-items-col {
  200. -webkit-box-flex: 1;
  201. -webkit-flex: 1;
  202. -ms-flex: 1;
  203. flex: 1;
  204. max-width: 7rem;
  205. }
  206. .weui-picker-container .weui-cells {
  207. margin: 0;
  208. text-align: left;
  209. }
  210. .datetime-picker .picker-item {
  211. text-overflow: initial;
  212. }
  213. .weui-select-modal {
  214. height: auto;
  215. }
  216. .weui-select-modal .weui-cells {
  217. margin: 0;
  218. text-align: left;
  219. overflow-y: auto;
  220. overflow-x: hidden;
  221. max-height: 16rem;
  222. }
  223. .weui-select-modal .weui-cells:after {
  224. display: none;
  225. }
  226. .weui-picker-modal {
  227. width: 92%;
  228. left: 4%;
  229. bottom: 10px;
  230. -webkit-border-radius: 10px;
  231. -moz-border-radius: 10px;
  232. border-radius: 10px;
  233. position: absolute;
  234. text-align: center;
  235. opacity: 0.6;
  236. color: #3d4145;
  237. -webkit-transition-duration: .3s;
  238. transition-duration: .3s;
  239. height: 13rem;
  240. background: #EFEFF4;
  241. -webkit-transform: translate3d(0, 100%, 0);
  242. transform: translate3d(0, 100%, 0);
  243. -webkit-transition-property: opacity, -webkit-transform;
  244. transition-property: opacity, -webkit-transform;
  245. transition-property: transform, opacity;
  246. transition-property: transform, opacity, -webkit-transform;
  247. }
  248. .weui-picker-modal.picker-modal-inline {
  249. height: 10.8rem;
  250. opacity: 1;
  251. position: static;
  252. -webkit-transform: translate3d(0, 0, 0);
  253. transform: translate3d(0, 0, 0);
  254. }
  255. .weui-picker-modal.picker-modal-inline .toolbar {
  256. display: none;
  257. }
  258. .weui-picker-modal.picker-columns-single .picker-items-col {
  259. width: 100%;
  260. }
  261. .weui-picker-modal.weui-picker-modal-visible {
  262. opacity: 1;
  263. -webkit-transform: translate3d(0, 0, 0);
  264. transform: translate3d(0, 0, 0);
  265. }
  266. .weui-picker-modal .picker-modal-inner {
  267. position: relative;
  268. height: 10.8rem;
  269. }
  270. .weui-picker-modal .picker-columns {
  271. width: 100%;
  272. height: 13rem;
  273. z-index: 11500;
  274. }
  275. .weui-picker-modal .picker-columns.picker-modal-inline,
  276. .popover .weui-picker-modal .picker-columns {
  277. height: 10rem;
  278. }
  279. @media (orientation: landscape) and (max-height: 415px) {
  280. .weui-picker-modal .picker-columns:not(.picker-modal-inline) {
  281. height: 10rem;
  282. }
  283. }
  284. .weui-picker-modal .popover.popover-picker-columns {
  285. width: 14rem;
  286. }
  287. .weui-picker-modal .picker-items {
  288. display: -webkit-box;
  289. display: -ms-flexbox;
  290. display: -webkit-flex;
  291. display: flex;
  292. -webkit-box-pack: center;
  293. -ms-flex-pack: center;
  294. -webkit-justify-content: center;
  295. justify-content: center;
  296. width: 100%;
  297. padding: 0;
  298. text-align: right;
  299. font-size: 1rem;
  300. font-weight: normal;
  301. -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
  302. -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
  303. }
  304. .weui-picker-modal .bar + .picker-items {
  305. height: 10.8rem;
  306. }
  307. .weui-picker-modal .picker-items-col {
  308. overflow: hidden;
  309. position: relative;
  310. max-height: 100%;
  311. }
  312. .weui-picker-modal .picker-items-col.picker-items-col-left {
  313. text-align: left;
  314. }
  315. .weui-picker-modal .picker-items-col.picker-items-col-center {
  316. text-align: center;
  317. }
  318. .weui-picker-modal .picker-items-col.picker-items-col-right {
  319. text-align: right;
  320. }
  321. .weui-picker-modal .picker-items-col.picker-items-col-divider {
  322. color: #3d4145;
  323. display: -webkit-box;
  324. display: -ms-flexbox;
  325. display: -webkit-flex;
  326. display: flex;
  327. -webkit-box-align: center;
  328. -ms-flex-align: center;
  329. -webkit-align-items: center;
  330. align-items: center;
  331. }
  332. .weui-picker-modal .picker-items-col-wrapper {
  333. -webkit-transition: 300ms;
  334. transition: 300ms;
  335. -webkit-transition-timing-function: ease-out;
  336. transition-timing-function: ease-out;
  337. }
  338. .weui-picker-modal .picker-item {
  339. height: 32px;
  340. line-height: 32px;
  341. padding: 0 10px;
  342. white-space: nowrap;
  343. position: relative;
  344. overflow: hidden;
  345. text-overflow: ellipsis;
  346. color: #9b9b9b;
  347. left: 0;
  348. top: 0;
  349. width: 100%;
  350. box-sizing: border-box;
  351. -webkit-transition: 300ms;
  352. transition: 300ms;
  353. }
  354. .picker-items-col-absolute .weui-picker-modal .picker-item {
  355. position: absolute;
  356. }
  357. .weui-picker-modal .picker-item.picker-item-far {
  358. pointer-events: none;
  359. }
  360. .weui-picker-modal .picker-item.picker-selected {
  361. color: #3d4145;
  362. -webkit-transform: translate3d(0, 0, 0);
  363. transform: translate3d(0, 0, 0);
  364. -webkit-transform: rotateX(0deg);
  365. transform: rotateX(0deg);
  366. }
  367. .weui-picker-modal .picker-center-highlight {
  368. height: 32px;
  369. box-sizing: border-box;
  370. position: absolute;
  371. left: 0;
  372. width: 100%;
  373. top: 50%;
  374. margin-top: -16px;
  375. pointer-events: none;
  376. }
  377. .weui-picker-modal .picker-center-highlight:before {
  378. content: '';
  379. position: absolute;
  380. left: 0;
  381. top: 0;
  382. bottom: auto;
  383. right: auto;
  384. height: 1px;
  385. width: 100%;
  386. background-color: #D9D9D9;
  387. display: block;
  388. z-index: 15;
  389. -webkit-transform-origin: 50% 0%;
  390. transform-origin: 50% 0%;
  391. }
  392. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  393. .weui-picker-modal .picker-center-highlight:before {
  394. -webkit-transform: scaleY(0.5);
  395. transform: scaleY(0.5);
  396. }
  397. }
  398. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  399. .weui-picker-modal .picker-center-highlight:before {
  400. -webkit-transform: scaleY(0.33);
  401. transform: scaleY(0.33);
  402. }
  403. }
  404. .weui-picker-modal .picker-center-highlight:after {
  405. content: '';
  406. position: absolute;
  407. left: 0;
  408. bottom: 0;
  409. right: auto;
  410. top: auto;
  411. height: 1px;
  412. width: 100%;
  413. background-color: #D9D9D9;
  414. display: block;
  415. z-index: 15;
  416. -webkit-transform-origin: 50% 100%;
  417. transform-origin: 50% 100%;
  418. }
  419. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  420. .weui-picker-modal .picker-center-highlight:after {
  421. -webkit-transform: scaleY(0.5);
  422. transform: scaleY(0.5);
  423. }
  424. }
  425. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  426. .weui-picker-modal .picker-center-highlight:after {
  427. -webkit-transform: scaleY(0.33);
  428. transform: scaleY(0.33);
  429. }
  430. }
  431. .weui-picker-modal .picker-3d .picker-items {
  432. overflow: hidden;
  433. -webkit-perspective: 1200px;
  434. perspective: 1200px;
  435. }
  436. .weui-picker-modal .picker-3d .picker-items-col,
  437. .weui-picker-modal .picker-3d .picker-items-col-wrapper,
  438. .weui-picker-modal .picker-3d .picker-item {
  439. -webkit-transform-style: preserve-3d;
  440. transform-style: preserve-3d;
  441. }
  442. .weui-picker-modal .picker-3d .picker-items-col {
  443. overflow: visible;
  444. }
  445. .weui-picker-modal .picker-3d .picker-item {
  446. -webkit-transform-origin: center center -110px;
  447. transform-origin: center center -110px;
  448. -webkit-backface-visibility: hidden;
  449. backface-visibility: hidden;
  450. -webkit-transition-timing-function: ease-out;
  451. transition-timing-function: ease-out;
  452. }
  453. .weui-picker-container {
  454. background-color: rgba(0, 0, 0, .4);
  455. height: 100%;
  456. }
  457. .weui-picker-overlay {
  458. height: 0;
  459. }
  460. .city-picker .picker-items-col {
  461. -webkit-box-flex: 1;
  462. -webkit-flex: 1;
  463. -ms-flex: 1;
  464. flex: 1;
  465. max-width: 7rem;
  466. }
  467. .weui-picker-container .weui-cells {
  468. margin: 0;
  469. text-align: left;
  470. }
  471. .datetime-picker .picker-item {
  472. text-overflow: initial;
  473. }
  474. .weui-select-modal {
  475. height: auto;
  476. }
  477. .weui-select-modal .weui-cells {
  478. margin: 0;
  479. text-align: left;
  480. overflow-y: auto;
  481. overflow-x: hidden;
  482. max-height: 16rem;
  483. }
  484. .weui-select-modal .weui-cells:after {
  485. display: none;
  486. }
  487. .weui-check_label:after{
  488. content: '';
  489. position: absolute;
  490. bottom: 0;
  491. left: 10px;
  492. width: 100%;
  493. height: 1px;
  494. background: #ECF0F1;
  495. }
  496. /* === Calendar === */
  497. .weui-picker-calendar {
  498. background: #fff;
  499. height: 15rem;
  500. width: 100%;
  501. overflow: hidden;
  502. }
  503. .weui-picker-calendar .picker-modal-inner {
  504. overflow: hidden;
  505. height: 12.8rem;
  506. }
  507. .picker-calendar-week-days {
  508. height: .9rem;
  509. background: #f7f7f8;
  510. display: -webkit-box;
  511. display: -ms-flexbox;
  512. display: -webkit-flex;
  513. display: flex;
  514. font-size: 11px;
  515. box-sizing: border-box;
  516. position: relative;
  517. }
  518. .picker-calendar-week-days:after {
  519. content: '';
  520. position: absolute;
  521. left: 0;
  522. bottom: 0;
  523. right: auto;
  524. top: auto;
  525. height: 1px;
  526. width: 100%;
  527. background-color: #c4c4c4;
  528. display: block;
  529. z-index: 15;
  530. -webkit-transform-origin: 50% 100%;
  531. transform-origin: 50% 100%;
  532. }
  533. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  534. .picker-calendar-week-days:after {
  535. -webkit-transform: scaleY(0.5);
  536. transform: scaleY(0.5);
  537. }
  538. }
  539. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  540. .picker-calendar-week-days:after {
  541. -webkit-transform: scaleY(0.33);
  542. transform: scaleY(0.33);
  543. }
  544. }
  545. .picker-calendar-week-days .picker-calendar-week-day {
  546. -webkit-flex-shrink: 1;
  547. -ms-flex: 0 1 auto;
  548. -webkit-flex-shrink: 1;
  549. -ms-flex-negative: 1;
  550. flex-shrink: 1;
  551. width: 14.28571429%;
  552. width: calc(100% / 7);
  553. line-height: 17px;
  554. text-align: center;
  555. }
  556. .picker-calendar-week-days + .picker-calendar-months {
  557. height: 11.9rem;
  558. }
  559. .picker-calendar-months {
  560. width: 100%;
  561. height: 100%;
  562. overflow: hidden;
  563. position: relative;
  564. }
  565. .picker-calendar-months-wrapper {
  566. position: relative;
  567. width: 100%;
  568. height: 100%;
  569. -webkit-transition: 300ms;
  570. transition: 300ms;
  571. }
  572. .picker-calendar-month {
  573. display: -webkit-box;
  574. display: -ms-flexbox;
  575. display: -webkit-flex;
  576. display: flex;
  577. -webkit-box-orient: vertical;
  578. -ms-flex-direction: column;
  579. -webkit-flex-direction: column;
  580. flex-direction: column;
  581. width: 100%;
  582. height: 100%;
  583. position: absolute;
  584. left: 0;
  585. top: 0;
  586. }
  587. .picker-calendar-row {
  588. height: 16.66666667%;
  589. height: calc(100% / 6);
  590. display: -webkit-box;
  591. display: -ms-flexbox;
  592. display: -webkit-flex;
  593. display: flex;
  594. -webkit-flex-shrink: 1;
  595. -ms-flex: 0 1 auto;
  596. -webkit-flex-shrink: 1;
  597. -ms-flex-negative: 1;
  598. flex-shrink: 1;
  599. width: 100%;
  600. position: relative;
  601. }
  602. .picker-calendar-row:after {
  603. content: '';
  604. position: absolute;
  605. left: 0;
  606. bottom: 0;
  607. right: auto;
  608. top: auto;
  609. height: 1px;
  610. width: 100%;
  611. background-color: #ccc;
  612. display: block;
  613. z-index: 15;
  614. -webkit-transform-origin: 50% 100%;
  615. transform-origin: 50% 100%;
  616. }
  617. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  618. .picker-calendar-row:after {
  619. -webkit-transform: scaleY(0.5);
  620. transform: scaleY(0.5);
  621. }
  622. }
  623. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  624. .picker-calendar-row:after {
  625. -webkit-transform: scaleY(0.33);
  626. transform: scaleY(0.33);
  627. }
  628. }
  629. .weui-picker-modal .picker-calendar-row:last-child:after {
  630. display: none;
  631. }
  632. .picker-calendar-day {
  633. -webkit-flex-shrink: 1;
  634. -ms-flex: 0 1 auto;
  635. -webkit-flex-shrink: 1;
  636. -ms-flex-negative: 1;
  637. flex-shrink: 1;
  638. display: -webkit-box;
  639. display: -ms-flexbox;
  640. display: -webkit-flex;
  641. display: flex;
  642. -webkit-box-pack: center;
  643. -ms-flex-pack: center;
  644. -webkit-justify-content: center;
  645. justify-content: center;
  646. -webkit-box-align: center;
  647. -ms-flex-align: center;
  648. -webkit-align-items: center;
  649. align-items: center;
  650. box-sizing: border-box;
  651. width: 14.28571429%;
  652. width: calc(100% / 7);
  653. text-align: center;
  654. color: #3d4145;
  655. font-size: 15px;
  656. cursor: pointer;
  657. }
  658. .picker-calendar-day.picker-calendar-day-prev,
  659. .picker-calendar-day.picker-calendar-day-next {
  660. color: #ccc;
  661. }
  662. .picker-calendar-day.picker-calendar-day-disabled {
  663. color: #d4d4d4;
  664. cursor: auto;
  665. }
  666. .picker-calendar-day.picker-calendar-day-today span {
  667. background: #e3e3e3;
  668. }
  669. .picker-calendar-day.picker-calendar-day-selected span {
  670. background: #07c160;
  671. color: #fff;
  672. }
  673. .picker-calendar-day span {
  674. display: inline-block;
  675. border-radius: 100%;
  676. width: 30px;
  677. height: 30px;
  678. line-height: 30px;
  679. }
  680. .picker-calendar-month-picker,
  681. .picker-calendar-year-picker {
  682. display: -webkit-box;
  683. display: -ms-flexbox;
  684. display: -webkit-flex;
  685. display: flex;
  686. -webkit-box-align: center;
  687. -ms-flex-align: center;
  688. -webkit-align-items: center;
  689. align-items: center;
  690. -webkit-box-pack: justify;
  691. -ms-flex-pack: justify;
  692. -webkit-justify-content: space-between;
  693. justify-content: space-between;
  694. width: 50%;
  695. max-width: 200px;
  696. -webkit-flex-shrink: 10;
  697. -ms-flex: 0 10 auto;
  698. -webkit-flex-shrink: 10;
  699. -ms-flex-negative: 10;
  700. flex-shrink: 10;
  701. }
  702. .picker-calendar-month-picker a.icon-only,
  703. .picker-calendar-year-picker a.icon-only {
  704. min-width: 36px;
  705. }
  706. .picker-calendar-month-picker span,
  707. .picker-calendar-year-picker span {
  708. -webkit-flex-shrink: 1;
  709. -ms-flex: 0 1 auto;
  710. -webkit-flex-shrink: 1;
  711. -ms-flex-negative: 1;
  712. flex-shrink: 1;
  713. position: relative;
  714. overflow: hidden;
  715. text-overflow: ellipsis;
  716. }
  717. .popover .picker-calendar .picker-calendar-week-days,
  718. .picker-calendar.picker-modal-inline .picker-calendar-week-days {
  719. background: none;
  720. }
  721. .popover .picker-calendar .toolbar:before,
  722. .picker-calendar.picker-modal-inline .toolbar:before,
  723. .popover .picker-calendar .picker-calendar-week-days:before,
  724. .picker-calendar.picker-modal-inline .picker-calendar-week-days:before {
  725. display: none;
  726. }
  727. .popover .picker-calendar .toolbar:after,
  728. .picker-calendar.picker-modal-inline .toolbar:after,
  729. .popover .picker-calendar .picker-calendar-week-days:after,
  730. .picker-calendar.picker-modal-inline .picker-calendar-week-days:after {
  731. display: none;
  732. }
  733. .popover .picker-calendar .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
  734. .picker-calendar.picker-modal-inline .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
  735. .popover .picker-calendar .picker-calendar-week-days ~ .picker-calendar-months:before,
  736. .picker-calendar.picker-modal-inline .picker-calendar-week-days ~ .picker-calendar-months:before {
  737. content: '';
  738. position: absolute;
  739. left: 0;
  740. top: 0;
  741. bottom: auto;
  742. right: auto;
  743. height: 1px;
  744. width: 100%;
  745. background-color: #c4c4c4;
  746. display: block;
  747. z-index: 15;
  748. -webkit-transform-origin: 50% 0%;
  749. transform-origin: 50% 0%;
  750. }
  751. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  752. .popover .picker-calendar .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
  753. .picker-calendar.picker-modal-inline .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
  754. .popover .picker-calendar .picker-calendar-week-days ~ .picker-calendar-months:before,
  755. .picker-calendar.picker-modal-inline .picker-calendar-week-days ~ .picker-calendar-months:before {
  756. -webkit-transform: scaleY(0.5);
  757. transform: scaleY(0.5);
  758. }
  759. }
  760. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  761. .popover .picker-calendar .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
  762. .picker-calendar.picker-modal-inline .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
  763. .popover .picker-calendar .picker-calendar-week-days ~ .picker-calendar-months:before,
  764. .picker-calendar.picker-modal-inline .picker-calendar-week-days ~ .picker-calendar-months:before {
  765. -webkit-transform: scaleY(0.33);
  766. transform: scaleY(0.33);
  767. }
  768. }
  769. .picker-calendar-month-picker,
  770. .picker-calendar-year-picker {
  771. display: block;
  772. line-height: 2.2rem;
  773. -webkit-box-flex: 1;
  774. -webkit-flex: 1;
  775. -ms-flex: 1;
  776. flex: 1;
  777. }
  778. .picker-calendar-month-picker a.icon-only,
  779. .picker-calendar-year-picker a.icon-only {
  780. float: left;
  781. width: 25%;
  782. height: 2.2rem;
  783. line-height: 2rem;
  784. }
  785. .picker-calendar-month-picker .current-month-value,
  786. .picker-calendar-year-picker .current-month-value,
  787. .picker-calendar-month-picker .current-year-value,
  788. .picker-calendar-year-picker .current-year-value {
  789. float: left;
  790. width: 50%;
  791. height: 2.2rem;
  792. }
  793. i.icon {
  794. display: inline-block;
  795. vertical-align: middle;
  796. background-size: 100% auto;
  797. background-position: center;
  798. background-repeat: no-repeat;
  799. font-style: normal;
  800. position: relative;
  801. }
  802. i.icon.icon-next,
  803. i.icon.icon-prev {
  804. width: 0.75rem;
  805. height: 0.75rem;
  806. }
  807. i.icon.icon-next {
  808. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%2304BE02'%20d%3D'M1%2C1.6l11.8%2C5.8L1%2C13.4V1.6%20M0%2C0v15l15-7.6L0%2C0L0%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  809. }
  810. i.icon.icon-prev {
  811. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%2304BE02'%20d%3D'M14%2C1.6v11.8L2.2%2C7.6L14%2C1.6%20M15%2C0L0%2C7.6L15%2C15V0L15%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  812. }
  813. .weui-actionsheet {
  814. z-index: 10000;
  815. }
  816. .weui-popup__overlay,
  817. .weui-popup__container {
  818. position: fixed;
  819. bottom: 0;
  820. left: 0;
  821. right: 0;
  822. height: 0;
  823. width: 100%;
  824. height: 100%;
  825. z-index: 10;
  826. }
  827. .weui-popup__overlay {
  828. background-color: rgba(0, 0, 0, 0.6);
  829. opacity: 0;
  830. -webkit-transition: opacity .3s;
  831. transition: opacity .3s;
  832. }
  833. .weui-popup__container {
  834. display: none;
  835. }
  836. .weui-popup__container.weui-popup__container--visible {
  837. display: block;
  838. }
  839. .weui-popup__container .weui-cells {
  840. margin: 0;
  841. text-align: left;
  842. }
  843. .weui-popup__modal {
  844. width: 100%;
  845. position: absolute;
  846. z-index: 100;
  847. bottom: 0;
  848. border-radius: 0;
  849. opacity: 0.6;
  850. color: #3d4145;
  851. -webkit-transition-duration: .3s;
  852. transition-duration: .3s;
  853. height: 100%;
  854. background: #EFEFF4;
  855. -webkit-transform: translate3d(0, 100%, 0);
  856. transform: translate3d(0, 100%, 0);
  857. -webkit-transition-property: opacity, -webkit-transform;
  858. transition-property: opacity, -webkit-transform;
  859. transition-property: transform, opacity;
  860. transition-property: transform, opacity, -webkit-transform;
  861. overflow-x: hidden;
  862. overflow-y: auto;
  863. }
  864. .popup-bottom .weui-popup__modal {
  865. height: auto;
  866. }
  867. .weui-popup__modal .toolbar {
  868. position: absolute;
  869. left: 0;
  870. top: 0;
  871. right: 0;
  872. z-index: 1;
  873. }
  874. .weui-popup__modal .modal-content {
  875. height: 100%;
  876. padding-top: 2.2rem;
  877. overflow: auto;
  878. box-sizing: border-box;
  879. }
  880. .weui-popup__container--visible .weui-popup__overlay {
  881. opacity: 1;
  882. }
  883. .weui-popup__container--visible .weui-popup__modal {
  884. opacity: 1;
  885. -webkit-transform: translate3d(0, 0, 0);
  886. transform: translate3d(0, 0, 0);
  887. }
  888. /*****/
  889. /*单选、多选、开关*/
  890. .aui-radio,
  891. .aui-checkbox {
  892. width: 1rem;
  893. height: 1rem;
  894. background-color: #ffffff;
  895. border: solid 1px #dddddd;
  896. -webkit-border-radius: 0.6rem;
  897. border-radius: 0.6rem;
  898. font-size: 0.8rem;
  899. margin: 0;
  900. padding: 0;
  901. position: relative;
  902. display: inline-block;
  903. vertical-align: top;
  904. cursor: default;
  905. -webkit-appearance: none;
  906. -webkit-user-select: none;
  907. user-select: none;
  908. -webkit-transition: background-color ease 0.1s;
  909. transition: background-color ease 0.1s;
  910. }
  911. .aui-checkbox {
  912. border-radius: 0.1rem;
  913. }
  914. .aui-radio:checked,
  915. .aui-radio.aui-checked,
  916. .aui-checkbox:checked,
  917. .aui-checkbox.aui-checked {
  918. background-color: #03a9f4;
  919. border: solid 1px #03a9f4;
  920. text-align: center;
  921. background-clip: padding-box;
  922. }
  923. .aui-radio:checked:before,
  924. .aui-radio.aui-checked:before,
  925. .aui-checkbox:checked:before,
  926. .aui-checkbox.aui-checked:before,
  927. .aui-radio:checked:after,
  928. .aui-radio.aui-checked:after,
  929. .aui-checkbox:checked:after,
  930. .aui-checkbox.aui-checked:after {
  931. content: '';
  932. width: 0.5rem;
  933. height: 0.3rem;
  934. position: absolute;
  935. top: 50%;
  936. left: 50%;
  937. margin-left: -0.25rem;
  938. margin-top: -0.25rem;
  939. background: transparent;
  940. border: 1px solid #ffffff;
  941. border-top: none;
  942. border-right: none;
  943. z-index: 2;
  944. -webkit-border-radius: 0;
  945. border-radius: 0;
  946. -webkit-transform: rotate(-45deg);
  947. transform: rotate(-45deg);
  948. }
  949. .aui-radio:disabled,
  950. .aui-radio.aui-disabled,
  951. .aui-checkbox:disabled,
  952. .aui-checkbox.aui-disabled {
  953. background-color: #dddddd;
  954. border: solid 1px #dddddd;
  955. }
  956. .aui-radio:disabled:before,
  957. .aui-radio.aui-disabled:before,
  958. .aui-radio:disabled:after,
  959. .aui-radio.aui-disabled:after,
  960. .aui-checkbox:disabled:before,
  961. .aui-checkbox.aui-disabled:before,
  962. .aui-checkbox:disabled:after,
  963. .aui-checkbox.aui-disabled:after {
  964. content: '';
  965. width: 0.5rem;
  966. height: 0.3rem;
  967. position: absolute;
  968. top: 50%;
  969. left: 50%;
  970. margin-left: -0.25rem;
  971. margin-top: -0.25rem;
  972. background: transparent;
  973. border: 1px solid #ffffff;
  974. border-top: none;
  975. border-right: none;
  976. z-index: 2;
  977. -webkit-border-radius: 0;
  978. border-radius: 0;
  979. -webkit-transform: rotate(-45deg);
  980. transform: rotate(-45deg);
  981. }
  982. .aui-switch {
  983. width: 2.3rem;
  984. height: 1.2rem;
  985. position: relative;
  986. vertical-align: top;
  987. border: 1px solid #dddddd;
  988. background-color: #dddddd;
  989. border-radius: 0.6rem;
  990. background-clip: content-box;
  991. display: inline-block;
  992. outline: none;
  993. -webkit-appearance: none;
  994. appearance: none;
  995. -webkit-user-select: none;
  996. user-select: none;
  997. -webkit-box-sizing: border-box;
  998. box-sizing: border-box;
  999. -webkit-background-clip: padding-box;
  1000. background-clip: padding-box;
  1001. -webkit-transition: all 0.2s linear;
  1002. transition: all 0.2s linear;
  1003. }
  1004. .aui-switch:before {
  1005. width: 1.1rem;
  1006. height: 1.1rem;
  1007. position: absolute;
  1008. top: 0;
  1009. left: 0;
  1010. border-radius: 0.6rem;
  1011. background-color: #fff;
  1012. content: '';
  1013. -webkit-transition: left 0.2s;
  1014. transition: left 0.2s;
  1015. }
  1016. .aui-switch:checked {
  1017. border-color: #03a9f4;
  1018. background-color: #03a9f4;
  1019. }
  1020. .aui-switch:checked:before {
  1021. left: 1.1rem;
  1022. }