position-select.wxss 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. .position-select-page.data-v-94bd4fd3 {
  2. display: flex;
  3. flex-direction: column;
  4. height: 100vh;
  5. background-color: #FFFFFF;
  6. }
  7. .position-select-page .search-header.data-v-94bd4fd3 {
  8. padding: 20rpx 40rpx;
  9. background-color: #FFFFFF;
  10. position: -webkit-sticky;
  11. position: sticky;
  12. top: 0;
  13. z-index: 10;
  14. }
  15. .position-select-page .search-header .search-box.data-v-94bd4fd3 {
  16. display: flex;
  17. align-items: center;
  18. background-color: #F8FAFC;
  19. border-radius: 40rpx;
  20. padding: 0 30rpx;
  21. height: 72rpx;
  22. }
  23. .position-select-page .search-header .search-box .icon-search.data-v-94bd4fd3 {
  24. width: 24rpx;
  25. height: 24rpx;
  26. border: 3rpx solid #A0AABF;
  27. border-radius: 50%;
  28. position: relative;
  29. margin-right: 16rpx;
  30. flex-shrink: 0;
  31. }
  32. .position-select-page .search-header .search-box .icon-search.data-v-94bd4fd3::after {
  33. content: "";
  34. position: absolute;
  35. width: 8rpx;
  36. height: 3rpx;
  37. background-color: #A0AABF;
  38. bottom: -2rpx;
  39. right: -4rpx;
  40. transform: rotate(45deg);
  41. }
  42. .position-select-page .search-header .search-box input.data-v-94bd4fd3 {
  43. flex: 1;
  44. font-size: 26rpx;
  45. color: #333333;
  46. }
  47. .position-select-page .content-body.data-v-94bd4fd3 {
  48. flex: 1;
  49. display: flex;
  50. overflow: hidden;
  51. border-top: 1rpx solid #F0F4FC;
  52. }
  53. .position-select-page .content-body .left-menu.data-v-94bd4fd3 {
  54. width: 220rpx;
  55. background-color: #F8FAFC;
  56. height: 100%;
  57. flex-shrink: 0;
  58. }
  59. .position-select-page .content-body .left-menu .menu-item.data-v-94bd4fd3 {
  60. padding: 32rpx 20rpx;
  61. font-size: 28rpx;
  62. color: #4D5666;
  63. text-align: left;
  64. padding-left: 24rpx;
  65. position: relative;
  66. }
  67. .position-select-page .content-body .left-menu .menu-item.active.data-v-94bd4fd3 {
  68. background-color: #FFFFFF;
  69. color: #1F6CFF;
  70. font-weight: 600;
  71. }
  72. .position-select-page .content-body .left-menu .menu-item.active .active-indicator.data-v-94bd4fd3 {
  73. position: absolute;
  74. left: 0;
  75. top: 50%;
  76. transform: translateY(-50%);
  77. width: 8rpx;
  78. height: 32rpx;
  79. background-color: #1F6CFF;
  80. border-top-right-radius: 8rpx;
  81. border-bottom-right-radius: 8rpx;
  82. }
  83. .position-select-page .content-body .right-content.data-v-94bd4fd3 {
  84. flex: 1;
  85. height: 100%;
  86. background-color: #FFFFFF;
  87. padding: 0 30rpx;
  88. box-sizing: border-box;
  89. }
  90. .position-select-page .content-body .right-content .category-section.data-v-94bd4fd3 {
  91. padding-top: 30rpx;
  92. padding-bottom: 20rpx;
  93. }
  94. .position-select-page .content-body .right-content .category-section .section-title.data-v-94bd4fd3 {
  95. font-size: 28rpx;
  96. font-weight: bold;
  97. color: #1A1A1A;
  98. margin-bottom: 24rpx;
  99. }
  100. .position-select-page .content-body .right-content .category-section .tags-grid.data-v-94bd4fd3 {
  101. display: flex;
  102. flex-wrap: wrap;
  103. gap: 20rpx;
  104. }
  105. .position-select-page .content-body .right-content .category-section .tags-grid .tag-item.data-v-94bd4fd3 {
  106. width: calc(50% - 10rpx);
  107. background-color: #F8FAFC;
  108. color: #4D5666;
  109. font-size: 24rpx;
  110. text-align: center;
  111. padding: 18rpx 0;
  112. border-radius: 8rpx;
  113. box-sizing: border-box;
  114. }
  115. .position-select-page .content-body .right-content .category-section .tags-grid .tag-item.data-v-94bd4fd3:active {
  116. background-color: #EBF1FA;
  117. color: #1F6CFF;
  118. }
  119. .position-select-page .content-body .right-content .category-section .tags-grid .tag-item.selected.data-v-94bd4fd3 {
  120. background-color: #EBF1FA;
  121. color: #1F6CFF;
  122. font-weight: 600;
  123. }
  124. .position-select-page .search-results.data-v-94bd4fd3 {
  125. flex: 1;
  126. background-color: #FFFFFF;
  127. }
  128. .position-select-page .search-results .result-list.data-v-94bd4fd3 {
  129. padding: 0 40rpx;
  130. }
  131. .position-select-page .search-results .result-list .result-item.data-v-94bd4fd3 {
  132. padding: 30rpx 0;
  133. border-bottom: 1rpx solid #F0F4FC;
  134. font-size: 30rpx;
  135. color: #333333;
  136. }
  137. .position-select-page .search-results .result-list .result-item.data-v-94bd4fd3:active {
  138. background-color: #F8FAFC;
  139. }
  140. .position-select-page .search-results .result-list .result-item.selected.data-v-94bd4fd3 {
  141. color: #1F6CFF;
  142. font-weight: 500;
  143. }
  144. .position-select-page .search-results .empty-state.data-v-94bd4fd3 {
  145. padding-top: 200rpx;
  146. text-align: center;
  147. }
  148. .position-select-page .search-results .empty-state .empty-text.data-v-94bd4fd3 {
  149. font-size: 28rpx;
  150. color: #999999;
  151. }