company-select.wxss 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. .company-select-page.data-v-b3efa014 {
  2. display: flex;
  3. flex-direction: column;
  4. height: 100vh;
  5. background-color: #FFFFFF;
  6. }
  7. .company-select-page .search-header.data-v-b3efa014 {
  8. padding: 20rpx 40rpx;
  9. background-color: #FFFFFF;
  10. position: -webkit-sticky;
  11. position: sticky;
  12. top: 0;
  13. z-index: 10;
  14. box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.02);
  15. }
  16. .company-select-page .search-header .search-box.data-v-b3efa014 {
  17. display: flex;
  18. align-items: center;
  19. background-color: #F8FAFC;
  20. border-radius: 40rpx;
  21. padding: 0 30rpx;
  22. height: 72rpx;
  23. border: 2rpx solid transparent;
  24. transition: all 0.25s;
  25. }
  26. .company-select-page .search-header .search-box.data-v-b3efa014:focus-within {
  27. background-color: #EBF1FA;
  28. border-color: rgba(31, 108, 255, 0.2);
  29. }
  30. .company-select-page .search-header .search-box .icon-search.data-v-b3efa014 {
  31. width: 24rpx;
  32. height: 24rpx;
  33. border: 3rpx solid #A0AABF;
  34. border-radius: 50%;
  35. position: relative;
  36. margin-right: 16rpx;
  37. flex-shrink: 0;
  38. }
  39. .company-select-page .search-header .search-box .icon-search.data-v-b3efa014::after {
  40. content: "";
  41. position: absolute;
  42. width: 8rpx;
  43. height: 3rpx;
  44. background-color: #A0AABF;
  45. bottom: -2rpx;
  46. right: -4rpx;
  47. transform: rotate(45deg);
  48. }
  49. .company-select-page .search-header .search-box input.data-v-b3efa014 {
  50. flex: 1;
  51. font-size: 26rpx;
  52. color: #333333;
  53. background: transparent;
  54. }
  55. .company-select-page .company-list.data-v-b3efa014 {
  56. flex: 1;
  57. padding: 0 40rpx;
  58. box-sizing: border-box;
  59. overflow-y: scroll;
  60. }
  61. .company-select-page .company-list .empty-state.data-v-b3efa014 {
  62. padding-top: 200rpx;
  63. text-align: center;
  64. }
  65. .company-select-page .company-list .empty-state .empty-text.data-v-b3efa014 {
  66. font-size: 28rpx;
  67. color: #A0AABF;
  68. }
  69. .company-select-page .company-list .company-item.data-v-b3efa014 {
  70. display: flex;
  71. justify-content: space-between;
  72. align-items: center;
  73. padding: 36rpx 10rpx;
  74. border-bottom: 1rpx solid #F0F4FC;
  75. transition: background-color 0.2s;
  76. }
  77. .company-select-page .company-list .company-item.data-v-b3efa014:active {
  78. background-color: #F8FAFC;
  79. }
  80. .company-select-page .company-list .company-item .company-name.data-v-b3efa014 {
  81. font-size: 30rpx;
  82. color: #1A1A1A;
  83. flex: 1;
  84. padding-right: 20rpx;
  85. }
  86. .company-select-page .company-list .company-item .checkbox.data-v-b3efa014 {
  87. width: 44rpx;
  88. height: 44rpx;
  89. border-radius: 50%;
  90. border: 2rpx solid #C4CEDB;
  91. box-sizing: border-box;
  92. display: flex;
  93. justify-content: center;
  94. align-items: center;
  95. transition: all 0.2s;
  96. }
  97. .company-select-page .company-list .company-item .checkbox.checked.data-v-b3efa014 {
  98. border-color: #1F6CFF;
  99. background-color: #1F6CFF;
  100. box-shadow: 0 4rpx 10rpx rgba(31, 108, 255, 0.2);
  101. }
  102. .company-select-page .company-list .company-item .checkbox.checked.data-v-b3efa014::after {
  103. content: "";
  104. width: 10rpx;
  105. height: 20rpx;
  106. border-right: 4rpx solid #FFFFFF;
  107. border-bottom: 4rpx solid #FFFFFF;
  108. transform: rotate(45deg) translate(-2rpx, -4rpx);
  109. }
  110. .company-select-page .footer-btn-area.data-v-b3efa014 {
  111. padding: 30rpx 40rpx calc(env(safe-area-inset-bottom) + 30rpx);
  112. background-color: #FFFFFF;
  113. box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.04);
  114. }
  115. .company-select-page .footer-btn-area .btn-confirm.data-v-b3efa014 {
  116. width: 100%;
  117. height: 88rpx;
  118. background: linear-gradient(135deg, #1F6CFF 0%, #0052D9 100%);
  119. color: #FFFFFF;
  120. font-size: 32rpx;
  121. font-weight: 500;
  122. border-radius: 44rpx;
  123. display: flex;
  124. justify-content: center;
  125. align-items: center;
  126. box-shadow: 0 12rpx 24rpx rgba(31, 108, 255, 0.25);
  127. margin: 0;
  128. }
  129. .company-select-page .footer-btn-area .btn-confirm.data-v-b3efa014:active {
  130. transform: scale(0.98);
  131. opacity: 0.9;
  132. }
  133. .company-select-page .footer-btn-area .btn-confirm.data-v-b3efa014::after {
  134. border: none;
  135. }