index.less 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. .w-picker-item {
  2. text-align: center;
  3. width: 100%;
  4. height: 88px;
  5. line-height: 88px;
  6. text-overflow: ellipsis;
  7. white-space: nowrap;
  8. font-size: 30px;
  9. }
  10. .w-picker{
  11. z-index: 888;
  12. .mask {
  13. position: fixed;
  14. z-index: 10002;
  15. top: 0;
  16. right: 0;
  17. left: 0;
  18. bottom: 0;
  19. background: rgba(0, 0, 0, 0.6);
  20. visibility: hidden;
  21. opacity: 0;
  22. transition: all 0.3s ease;
  23. }
  24. .mask.visible{
  25. visibility: visible;
  26. opacity: 1;
  27. }
  28. .w-picker-cnt {
  29. position: fixed;
  30. bottom: 0;
  31. left: 0;
  32. width: 100%;
  33. transition: all 0.3s ease;
  34. transform: translateY(100%);
  35. z-index: 10003;
  36. background-color: #fff;
  37. }
  38. .w-picker-cnt.visible {
  39. transform: translateY(0);
  40. }
  41. .w-picker-header{
  42. display: flex;
  43. align-items: center;
  44. padding: 0 30px;
  45. height: 88px;
  46. background-color: #fff;
  47. position: relative;
  48. text-align: center;
  49. font-size: 32px;
  50. justify-content: space-between;
  51. border-bottom: solid 1px #eee;
  52. .w-picker-btn{
  53. font-size: 30px;
  54. }
  55. }
  56. .w-picker-hd:after {
  57. content: ' ';
  58. position: absolute;
  59. left: 0;
  60. bottom: 0;
  61. right: 0;
  62. height: 1px;
  63. border-bottom: 1px solid #e5e5e5;
  64. color: #e5e5e5;
  65. transform-origin: 0 100%;
  66. transform: scaleY(0.5);
  67. }
  68. }