city-pickers.wxss 1.3 KB

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