picker.wxss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. .t-float-left {
  2. float: left;
  3. }
  4. .t-float-right {
  5. float: right;
  6. }
  7. @keyframes tdesign-fade-out {
  8. from {
  9. opacity: 1;
  10. }
  11. to {
  12. opacity: 0;
  13. }
  14. }
  15. .hotspot-expanded.relative {
  16. position: relative;
  17. }
  18. .hotspot-expanded::after {
  19. content: '';
  20. display: block;
  21. position: absolute;
  22. left: 0;
  23. top: 0;
  24. right: 0;
  25. bottom: 0;
  26. transform: scale(1.5);
  27. }
  28. .t-picker {
  29. position: relative;
  30. background-color: #ffffff;
  31. font-size: 32rpx;
  32. padding-bottom: constant(safe-area-inset-bottom);
  33. padding-bottom: env(safe-area-inset-bottom);
  34. }
  35. .t-picker__toolbar {
  36. display: flex;
  37. align-items: center;
  38. justify-content: space-between;
  39. overflow: hidden;
  40. height: 96rpx;
  41. box-shadow: inset 0 -1rpx 0 0 #e6e6e6;
  42. }
  43. .t-picker__title {
  44. flex: 1;
  45. text-align: center;
  46. overflow: hidden;
  47. white-space: nowrap;
  48. text-overflow: ellipsis;
  49. color: #000000;
  50. font-weight: 500;
  51. }
  52. .t-picker__cancel,
  53. .t-picker__confirm {
  54. display: flex;
  55. align-items: center;
  56. justify-content: center;
  57. user-select: none;
  58. font-size: 32rpx;
  59. height: 100%;
  60. padding: 0 32rpx;
  61. }
  62. .t-picker__cancel {
  63. color: #444444;
  64. }
  65. .t-picker__confirm {
  66. color: #0052d9;
  67. }
  68. .t-picker__main {
  69. position: relative;
  70. display: flex;
  71. }
  72. .t-picker__mask {
  73. position: absolute;
  74. top: 0;
  75. left: 0;
  76. width: 100%;
  77. height: 100%;
  78. margin: 0 auto;
  79. z-index: 3;
  80. background-image: linear-gradient(top, #fff, hsla(0, 0%, 100%, 0.4)), -webkit-linear-gradient(bottom, hsla(0, 0%, 100%, 0.92), hsla(0, 0%, 100%, 0.4));
  81. background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.92), hsla(0, 0%, 100%, 0.4)), linear-gradient(0deg, hsla(0, 0%, 100%, 0.92), hsla(0, 0%, 100%, 0.4));
  82. background-size: 100% 160rpx;
  83. background-repeat: no-repeat;
  84. background-position: top, bottom;
  85. transform: translateZ(0);
  86. backface-visibility: hidden;
  87. pointer-events: none;
  88. }
  89. .t-picker__indicator {
  90. width: 100%;
  91. height: 80rpx;
  92. position: absolute;
  93. left: 0;
  94. top: 160rpx;
  95. z-index: 3;
  96. pointer-events: none;
  97. }
  98. .t-picker__indicator::before {
  99. content: ' ';
  100. position: absolute;
  101. left: 0;
  102. top: 0;
  103. right: 0;
  104. height: 1rpx;
  105. border-top: 1rpx solid #e6e6e6;
  106. color: #e6e6e6;
  107. transform-origin: 0 0;
  108. }
  109. .t-picker__indicator::after {
  110. content: ' ';
  111. position: absolute;
  112. left: 0;
  113. bottom: 0;
  114. right: 0;
  115. height: 1rpx;
  116. transform-origin: 0 100%;
  117. color: #e6e6e6;
  118. border-bottom: 1rpx solid #e6e6e6;
  119. }