mpvueCityPicker.wxss 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. .pickerMask {
  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. .mpvue-picker-content {
  11. position: fixed;
  12. bottom: 0;
  13. left: 0;
  14. width: 100%;
  15. -webkit-transition: all 0.3s ease;
  16. transition: all 0.3s ease;
  17. -webkit-transform: translateY(100%);
  18. transform: translateY(100%);
  19. z-index: 3000;
  20. }
  21. .mpvue-picker-view-show {
  22. -webkit-transform: translateY(0);
  23. transform: translateY(0);
  24. }
  25. .mpvue-picker__hd {
  26. display: -webkit-box;
  27. display: -webkit-flex;
  28. display: flex;
  29. padding: 9px 15px;
  30. background-color: #fff;
  31. position: relative;
  32. text-align: center;
  33. font-size: 17px;
  34. }
  35. .mpvue-picker__hd:after {
  36. content: ' ';
  37. position: absolute;
  38. left: 0;
  39. bottom: 0;
  40. right: 0;
  41. height: 1px;
  42. border-bottom: 1px solid #e5e5e5;
  43. color: #e5e5e5;
  44. -webkit-transform-origin: 0 100%;
  45. transform-origin: 0 100%;
  46. -webkit-transform: scaleY(0.5);
  47. transform: scaleY(0.5);
  48. }
  49. .mpvue-picker__action {
  50. display: block;
  51. -webkit-box-flex: 1;
  52. -webkit-flex: 1;
  53. flex: 1;
  54. color: #1aad19;
  55. }
  56. .mpvue-picker__action:first-child {
  57. text-align: left;
  58. color: #888;
  59. }
  60. .mpvue-picker__action:last-child {
  61. text-align: right;
  62. }
  63. .picker-item {
  64. text-align: center;
  65. line-height: 40px;
  66. text-overflow: ellipsis;
  67. white-space: nowrap;
  68. font-size: 16px;
  69. }
  70. .mpvue-picker-view {
  71. position: relative;
  72. bottom: 0;
  73. left: 0;
  74. width: 100%;
  75. height: 238px;
  76. background-color: rgba(255, 255, 255, 1);
  77. }