picker.wxss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  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: var(--td-picker-bg-color, var(--td-bg-color-block, #fff));
  31. padding-bottom: constant(safe-area-inset-bottom);
  32. padding-bottom: env(safe-area-inset-bottom);
  33. border-top-left-radius: var(--td-picker-border-radius, 24rpx);
  34. border-top-right-radius: var(--td-picker-border-radius, 24rpx);
  35. }
  36. .t-picker__toolbar {
  37. display: flex;
  38. align-items: center;
  39. justify-content: space-between;
  40. overflow: hidden;
  41. height: var(--td-picker-toolbar-height, 116rpx);
  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: var(--td-picker-title-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
  50. line-height: var(--td-picker-title-line-height, 52rpx);
  51. font-weight: var(--td-picker-title-font-weight, 600);
  52. font-size: var(--td-picker-title-font-size, 36rpx);
  53. }
  54. .t-picker__cancel,
  55. .t-picker__confirm {
  56. display: flex;
  57. align-items: center;
  58. justify-content: center;
  59. user-select: none;
  60. font-size: var(--td-picker-button-font-size, 32rpx);
  61. height: 100%;
  62. padding: 0 32rpx;
  63. }
  64. .t-picker__cancel {
  65. color: var(--td-picker-cancel-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
  66. }
  67. .t-picker__confirm {
  68. color: var(--td-picker-confirm-color, var(--td-primary-color, #0052d9));
  69. }
  70. .t-picker__main {
  71. position: relative;
  72. display: flex;
  73. justify-content: center;
  74. padding-left: 64rpx;
  75. padding-right: 64rpx;
  76. }
  77. .t-picker__mask {
  78. position: absolute;
  79. left: 0;
  80. right: 0;
  81. z-index: 3;
  82. backface-visibility: hidden;
  83. pointer-events: none;
  84. height: 96rpx;
  85. }
  86. .t-picker__mask--top {
  87. top: 0;
  88. background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  89. }
  90. .t-picker__mask--bottom {
  91. bottom: 0;
  92. background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  93. transform: matrix(1, 0, 0, -1, 0, 0);
  94. }
  95. .t-picker__indicator {
  96. height: var(--td-picker-item-height, 80rpx);
  97. position: absolute;
  98. left: 32rpx;
  99. right: 32rpx;
  100. top: 144rpx;
  101. pointer-events: none;
  102. background-color: var(--td-picker-indicator-bg-color, var(--td-gray-color-1, #f3f3f3));
  103. border-radius: var(--td-picker-indicator-border-radius, 12rpx);
  104. }