picker.wxss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. /* picker/picker.wxss */
  2. .sure_buttton{
  3. height: 100rpx;
  4. width: 200rpx;
  5. display: flex;
  6. align-items: center;
  7. justify-content: center;
  8. }
  9. .cancel_button{
  10. height: 100rpx;
  11. width: 200rpx;
  12. display: flex;
  13. align-items: center;
  14. justify-content: center
  15. }
  16. .full-box{
  17. position: fixed;
  18. left: 0;
  19. right: 0;
  20. bottom: 0;
  21. top: 0;
  22. z-index: 9999;
  23. opacity: 0;
  24. background:rgba(0,0,0,.4);
  25. transition:all .4s ease-in-out 0;
  26. pointer-events:none;
  27. }
  28. .full-box.cur{
  29. opacity:1;
  30. pointer-events:auto
  31. }
  32. .modal{
  33. position: absolute;
  34. width: 100%;
  35. height: 50%;
  36. bottom:-50%;
  37. left: 0;
  38. background: transparent;
  39. transition:all .4s ease-in-out 0;
  40. }
  41. .cur {
  42. bottom:0;
  43. }
  44. .pickers{
  45. position: absolute;
  46. width: 100%;
  47. height: 235px;
  48. bottom:0;
  49. left: 0;
  50. background: #fff;
  51. display: flex;
  52. flex-direction: column;
  53. transition:bottom 0.6s linear 0.1s;
  54. }
  55. .pickers_{
  56. position: absolute;
  57. width: 100%;
  58. bottom:-235px;
  59. left: 0;
  60. background: #fff;
  61. display: flex;
  62. flex-direction: column;
  63. transition:bottom 0.6s linear 0.1s;
  64. }
  65. .cur .modal{
  66. bottom:50%;
  67. }
  68. .picker-line{
  69. display: flex;
  70. justify-content: center;
  71. align-items: center;
  72. }
  73. .picker-header {
  74. height: 20%;
  75. box-sizing: border-box;
  76. padding: 0 20rpx;
  77. display: flex;
  78. justify-content: space-between;
  79. align-items: center;
  80. border-bottom: 1px solid #eeeeee;
  81. }
  82. .picker-header view {
  83. height: 100%;
  84. display: flex;
  85. justify-content: center;
  86. align-items: center;
  87. }
  88. .picker-header view text{
  89. font-size: 36rpx;
  90. }
  91. .picker-content {
  92. flex-grow: 1;
  93. }
  94. .line1{
  95. overflow: hidden;
  96. text-overflow: ellipsis;
  97. white-space: nowrap;
  98. height: 100rpx
  99. /* lines:1 */
  100. }