index.wxss 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. .wux-picker-col {
  2. display: block;
  3. position: relative;
  4. height: 476rpx;
  5. overflow: hidden;
  6. width: 100%;
  7. flex: 1
  8. }
  9. .wux-picker-col--left {
  10. text-align: left
  11. }
  12. .wux-picker-col--center {
  13. text-align: center
  14. }
  15. .wux-picker-col--right {
  16. text-align: right
  17. }
  18. .wux-picker-col__indicator,
  19. .wux-picker-col__mask {
  20. position: absolute;
  21. left: 0;
  22. width: 100%;
  23. z-index: 3
  24. }
  25. .wux-picker-col__mask {
  26. top: 0;
  27. height: 100%;
  28. margin: 0 auto;
  29. background-image: linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.6)),linear-gradient(0deg,rgba(255,255,255,.95),rgba(255,255,255,.6));
  30. background-position: top,bottom;
  31. background-size: 100% 204rpx;
  32. background-repeat: no-repeat
  33. }
  34. .wux-picker-col__indicator {
  35. box-sizing: border-box;
  36. height: 68rpx;
  37. top: 204rpx
  38. }
  39. .wux-picker-col__indicator::before {
  40. content: " ";
  41. position: absolute;
  42. left: 0;
  43. top: 0;
  44. right: 0;
  45. height: 1PX;
  46. border-top: 1PX solid #d9d9d9;
  47. color: #d9d9d9;
  48. transform-origin: 0 0;
  49. transform: scaleY(.5)
  50. }
  51. .wux-picker-col__indicator::after {
  52. content: " ";
  53. position: absolute;
  54. left: 0;
  55. bottom: 0;
  56. right: 0;
  57. height: 1PX;
  58. border-bottom: 1PX solid #d9d9d9;
  59. color: #d9d9d9;
  60. transform-origin: 0 100%;
  61. transform: scaleY(.5)
  62. }
  63. .wux-picker-col__content {
  64. position: absolute;
  65. left: 0;
  66. top: 0;
  67. width: 100%;
  68. z-index: 1;
  69. padding: 204rpx 0
  70. }
  71. .wux-picker-col__item {
  72. font-size: 32rpx;
  73. height: 68rpx;
  74. line-height: 68rpx;
  75. color: #000;
  76. white-space: nowrap;
  77. text-overflow: ellipsis;
  78. overflow: hidden
  79. }
  80. .wux-picker-col__item--disabled {
  81. opacity: .3
  82. }
  83. .wux-picker-col__item--selected {
  84. font-size: 34rpx
  85. }