w-picker.wxss 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. @charset "UTF-8";
  2. /* 页面左右间距 */
  3. /* 文字尺寸 */
  4. /*文字颜色*/
  5. /* 边框颜色 */
  6. /*颜色*/
  7. /* 图片加载中颜色 */
  8. /* 行为相关颜色 */
  9. /* 功能栏字体大小 */
  10. /*功能栏左侧小图标*/
  11. .w-picker-item {
  12. text-align: center;
  13. width: 100%;
  14. height: 88rpx;
  15. line-height: 88rpx;
  16. text-overflow: ellipsis;
  17. white-space: nowrap;
  18. font-size: 30rpx;
  19. }
  20. .w-picker {
  21. z-index: 888;
  22. }
  23. .w-picker .mask {
  24. position: fixed;
  25. z-index: 1000;
  26. top: 0;
  27. right: 0;
  28. left: 0;
  29. bottom: 0;
  30. background: rgba(0, 0, 0, 0.6);
  31. visibility: hidden;
  32. opacity: 0;
  33. transition: all 0.3s ease;
  34. }
  35. .w-picker .mask.visible {
  36. visibility: visible;
  37. opacity: 1;
  38. }
  39. .w-picker .w-picker-cnt {
  40. position: fixed;
  41. bottom: 0;
  42. left: 0;
  43. width: 100%;
  44. transition: all 0.3s ease;
  45. -webkit-transform: translateY(100%);
  46. transform: translateY(100%);
  47. z-index: 3000;
  48. background-color: #fff;
  49. }
  50. .w-picker .w-picker-cnt.visible {
  51. -webkit-transform: translateY(0);
  52. transform: translateY(0);
  53. }
  54. .w-picker .w-picker-header {
  55. display: flex;
  56. align-items: center;
  57. padding: 0 30rpx;
  58. height: 88rpx;
  59. background-color: #fff;
  60. position: relative;
  61. text-align: center;
  62. font-size: 32rpx;
  63. justify-content: space-between;
  64. border-bottom: solid 1px #eee;
  65. }
  66. .w-picker .w-picker-header .w-picker-btn {
  67. font-size: 30rpx;
  68. }
  69. .w-picker .w-picker-hd:after {
  70. content: ' ';
  71. position: absolute;
  72. left: 0;
  73. bottom: 0;
  74. right: 0;
  75. height: 1px;
  76. border-bottom: 1px solid #e5e5e5;
  77. color: #e5e5e5;
  78. -webkit-transform-origin: 0 100%;
  79. transform-origin: 0 100%;
  80. -webkit-transform: scaleY(0.5);
  81. transform: scaleY(0.5);
  82. }