join.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. .wrap {
  2. background: #f4f4f4;
  3. }
  4. .wrap .card {
  5. width: 90rem;
  6. margin: 2.5rem auto 5rem;
  7. padding: 3.125rem;
  8. background: #ffffff;
  9. }
  10. /* 面包屑 */
  11. .wrap .crumb {
  12. width: 90rem;
  13. margin: 2.5rem auto 0;
  14. font-size: 1rem;
  15. font-weight: 400;
  16. user-select: none;
  17. }
  18. .wrap .crumb :first-child {
  19. color: #1d52a2;
  20. text-decoration: none;
  21. cursor: pointer;
  22. }
  23. /* 搜索 */
  24. .wrap .title-search {
  25. height: 3.125rem;
  26. display: flex;
  27. align-items: center;
  28. justify-content: space-between;
  29. }
  30. .title-search .title {
  31. font-size: 1.625rem;
  32. font-weight: 500;
  33. color: #222222;
  34. }
  35. .title-search .search {
  36. width: 46.25rem;
  37. display: flex;
  38. align-items: center;
  39. }
  40. .title-search .search .search-ipt {
  41. width: 36.875rem;
  42. height: 3.125rem;
  43. background: #f4f4f4;
  44. padding: 0 1.25rem;
  45. font-size: 1rem;
  46. }
  47. .title-search .search .search-btn {
  48. height: 3.125rem;
  49. width: 9.375rem;
  50. background: #c0c0c0;
  51. text-align: center;
  52. line-height: 3.125rem;
  53. font-size: 0.875rem;
  54. font-weight: 500;
  55. color: #ffffff;
  56. cursor: pointer;
  57. }
  58. /* 表格 */
  59. .wrap .table {
  60. margin-top: 2.5rem;
  61. }
  62. .table .row {
  63. height: 3.875rem;
  64. padding: 0 1.75rem;
  65. display: flex;
  66. align-items: center;
  67. justify-content: flex-start;
  68. }
  69. .table .td {
  70. height: 3.875rem;
  71. line-height: 3.875rem;
  72. font-size: 1rem;
  73. font-weight: 400;
  74. color: #222222;
  75. }
  76. .table .thead {
  77. background: #f4f4f4;
  78. }
  79. .table .thead .td {
  80. font-weight: 500;
  81. }
  82. .table .tbody .tr {
  83. width: 100%;
  84. border-bottom: 0.0625rem solid rgba(151, 151, 151, 0.2);
  85. overflow: hidden;
  86. height: 3.875rem;
  87. }
  88. .table .tbody .current {
  89. height: auto;
  90. transition: all 0.25s;
  91. }
  92. .table .tbody .current .row {
  93. background: #1d52a2;
  94. }
  95. .table .tbody .current .row .td {
  96. color: #ffffff;
  97. }
  98. .table .tbody .current .row .icon {
  99. transform: rotate(90deg);
  100. }
  101. .table .tbody .current .detail {
  102. padding: 1.75rem;
  103. }
  104. .table .tbody .current .detail .title {
  105. font-size: 1.125rem;
  106. font-weight: 500;
  107. color: #222222;
  108. }
  109. .table .tbody .current .detail .value {
  110. font-size: 1rem;
  111. font-weight: 400;
  112. color: #555555;
  113. }
  114. .table .tbody .current .detail .apply {
  115. width: 12rem;
  116. }
  117. .table .name {
  118. width: 30rem;
  119. }
  120. .table .type {
  121. width: 16rem;
  122. }
  123. .table .place {
  124. width: 16rem;
  125. }
  126. .table .time {
  127. width: 16rem;
  128. }
  129. .table .icon {
  130. font-size: 2rem;
  131. }
  132. /* 分页 */
  133. .wrap .pagination {
  134. display: flex;
  135. align-items: center;
  136. justify-content: center;
  137. margin-top: 2.5rem;
  138. }
  139. .pagination :not(:last-child) {
  140. margin-right: 0.625rem;
  141. }
  142. .pagination .pagination-item {
  143. width: 2.5rem;
  144. height: 2.5rem;
  145. border: 0.0625rem solid rgba(151, 151, 151, 0.2);
  146. text-align: center;
  147. line-height: 2.5rem;
  148. user-select: none;
  149. font-size: 1rem;
  150. font-weight: 400;
  151. color: #222222;
  152. cursor: pointer;
  153. }
  154. .pagination :first-child,
  155. .pagination :last-child {
  156. font-size: 1.5rem;
  157. }
  158. .pagination .current {
  159. background: #1d52a2;
  160. color: #ffffff;
  161. }
  162. /* 职位信息 */
  163. .wrap .info {
  164. height: 7.5rem;
  165. border-bottom: 0.0625rem solid rgba(151, 151, 151, 0.2);
  166. display: flex;
  167. flex-direction: column;
  168. justify-content: center;
  169. }
  170. .info .title {
  171. font-size: 1.375rem;
  172. font-weight: 500;
  173. color: #222222;
  174. }
  175. .info .time {
  176. font-size: 1rem;
  177. font-weight: 400;
  178. color: rgba(34, 34, 34, 0.8);
  179. margin-top: 1.25rem;
  180. }
  181. /* 表单 */
  182. .wrap .form {
  183. display: flex;
  184. flex-direction: column;
  185. align-items: flex-start;
  186. }
  187. .form .label {
  188. font-size: 1.125rem;
  189. font-weight: 400;
  190. color: #222222;
  191. margin-top: 1.25rem;
  192. }
  193. .form input.text {
  194. height: 3.125rem;
  195. width: 40rem;
  196. border: 0.0625rem solid rgba(151, 151, 151, 0.4);
  197. padding: 0 1.25rem;
  198. font-size: 1rem;
  199. font-weight: 400;
  200. margin-top: 1.25rem;
  201. }
  202. .form input.text::placeholder {
  203. color: #999999;
  204. }
  205. .form .upload {
  206. margin-top: 1.25rem;
  207. width: 16.375rem;
  208. height: 3.125rem;
  209. background: rgba(216, 216, 216, 0.4);
  210. font-size: 1rem;
  211. font-weight: 500;
  212. color: #333333;
  213. text-align: center;
  214. line-height: 3.125rem;
  215. cursor: pointer;
  216. }
  217. .form .tips {
  218. font-size: 0.875rem;
  219. font-weight: 400;
  220. color: #222222;
  221. margin-top: 1.25rem;
  222. }
  223. .form .submit {
  224. margin-top: 2.5rem;
  225. }
  226. .form .disabled {
  227. background: #c0c0c0;
  228. cursor: no-drop;
  229. }