form-picker.scss 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. /* components/form-picker/form-picker.wxss */
  2. .form-picker {
  3. &__header {
  4. display: flex;
  5. align-items: center;
  6. height: 116rpx;
  7. .title {
  8. flex: 1;
  9. text-align: center;
  10. font-weight: 600;
  11. font-size: 36rpx;
  12. color: var(--td-text-color-primary);
  13. }
  14. .btn {
  15. font-size: 32rpx;
  16. padding: 32rpx;
  17. &--cancel {
  18. color: var(--td-text-color-secondary);
  19. }
  20. &--confirm {
  21. // color: var(--primary-color);
  22. color: #1D6FF6;
  23. }
  24. }
  25. }
  26. &__content {
  27. padding: 0 12px;
  28. box-sizing: border-box;
  29. }
  30. }
  31. .card {
  32. position: relative;
  33. display: flex;
  34. justify-content: center;
  35. align-items: center;
  36. padding: 4px;
  37. font-size: 28rpx;
  38. text-align: center;
  39. border-radius: 12rpx;
  40. overflow: hidden;
  41. box-sizing: border-box;
  42. // background-color: var(--td-bg-color-secondarycontainer);
  43. // border: 1px solid var(--td-bg-color-container, #fff);
  44. background: white;
  45. border: 1px solid #EEEEEE;
  46. color: #191919;
  47. &--active {
  48. border: 1px solid #1D6FF6;
  49. &::after {
  50. content: '';
  51. display: block;
  52. position: absolute;
  53. left: 0;
  54. top: 0;
  55. width: 0;
  56. height: 0;
  57. border-width: 28px 28px 28px 0;
  58. border-style: solid;
  59. border: 14px solid #1D6FF6;
  60. border-bottom-color: transparent;
  61. border-right-color: transparent;
  62. }
  63. }
  64. &--disabled {
  65. opacity: 0.5;
  66. }
  67. &__icon {
  68. color: white;
  69. position: absolute;
  70. left: 1.5px;
  71. top: 1.5px;
  72. z-index: 1;
  73. }
  74. }
  75. .input-wrapper {
  76. box-sizing: border-box;
  77. input {
  78. padding: 0 8px;
  79. height: 100%;
  80. text-align: left;
  81. border: 1px solid #2A2A2A;
  82. border-radius: 4px;
  83. }
  84. }