picker.wxss 2.5 KB

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