Personal.wxss 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634
  1. .personal-container {
  2. padding: 20rpx;
  3. }
  4. .form-title {
  5. font-size: 36rpx;
  6. font-weight: bold;
  7. text-align: center;
  8. margin-bottom: 30rpx;
  9. }
  10. .form-container {
  11. background-color: #fff;
  12. border-radius: 10rpx;
  13. padding: 20rpx;
  14. }
  15. .section-title {
  16. font-size: 32rpx;
  17. font-weight: bold;
  18. margin: 30rpx 0 20rpx 10rpx;
  19. color: #333;
  20. border-left: 4rpx solid #007AFF;
  21. padding-left: 15rpx;
  22. }
  23. .form-row {
  24. display: flex;
  25. flex-direction: row;
  26. margin-bottom: 20rpx;
  27. flex-wrap: wrap;
  28. }
  29. .form-item {
  30. flex: 1;
  31. min-width: 300rpx;
  32. margin: 10rpx;
  33. border-bottom: 1px solid #eee;
  34. padding-bottom: 10rpx;
  35. }
  36. .label {
  37. font-size: 28rpx;
  38. color: #333;
  39. margin-right: 10rpx;
  40. display: block;
  41. margin-bottom: 10rpx;
  42. }
  43. input {
  44. font-size: 28rpx;
  45. height: 60rpx;
  46. }
  47. .picker-text {
  48. font-size: 28rpx;
  49. height: 60rpx;
  50. line-height: 60rpx;
  51. color: #666;
  52. }
  53. .submit-btn {
  54. margin-top: 40rpx;
  55. background-color: #007AFF;
  56. color: #fff;
  57. }
  58. .family-members-list {
  59. margin-top: 20rpx;
  60. }
  61. .family-member-item {
  62. background-color: #f8f8f8;
  63. border-radius: 8rpx;
  64. padding: 20rpx;
  65. margin-bottom: 20rpx;
  66. }
  67. .family-member-header {
  68. display: flex;
  69. justify-content: space-between;
  70. align-items: center;
  71. margin-bottom: 15rpx;
  72. border-bottom: 1px solid #eee;
  73. padding-bottom: 10rpx;
  74. }
  75. .family-member-title {
  76. font-size: 30rpx;
  77. font-weight: bold;
  78. color: #333;
  79. }
  80. .family-member-actions {
  81. display: flex;
  82. gap: 20rpx;
  83. }
  84. .family-member-edit {
  85. font-size: 26rpx;
  86. color: #1890ff;
  87. }
  88. .family-member-delete {
  89. font-size: 26rpx;
  90. color: #ff4d4f;
  91. }
  92. .form-subtitle {
  93. font-size: 28rpx;
  94. font-weight: bold;
  95. margin-bottom: 20rpx;
  96. display: flex;
  97. justify-content: space-between;
  98. align-items: center;
  99. }
  100. .cancel-edit {
  101. font-size: 26rpx;
  102. color: #999;
  103. font-weight: normal;
  104. }
  105. .family-member-content {
  106. padding: 10rpx 0;
  107. }
  108. .family-member-row {
  109. display: flex;
  110. margin-bottom: 10rpx;
  111. }
  112. .family-member-label {
  113. font-size: 26rpx;
  114. color: #666;
  115. width: 200rpx;
  116. }
  117. .family-member-value {
  118. font-size: 26rpx;
  119. color: #333;
  120. flex: 1;
  121. }
  122. .family-member-form {
  123. background-color: #fff;
  124. border-radius: 8rpx;
  125. padding: 20rpx;
  126. margin-top: 20rpx;
  127. }
  128. .form-row button-row {
  129. display: flex;
  130. justify-content: center;
  131. margin-top: 20rpx;
  132. }
  133. .form-item button-container {
  134. display: flex;
  135. flex-direction: column;
  136. align-items: center;
  137. }
  138. .circle-btn {
  139. width: 40rpx;
  140. height: 40rpx;
  141. border-radius: 50%;
  142. background-color: #007AFF;
  143. display: flex;
  144. justify-content: center;
  145. align-items: center;
  146. margin-bottom: 10rpx;
  147. }
  148. .btn-icon {
  149. font-size: 32rpx;
  150. color: #fff;
  151. }
  152. .btn-text {
  153. font-size: 28rpx;
  154. color: #333;
  155. }
  156. /* 添加圆形按钮相关样式 */
  157. .button-row {
  158. justify-content: center;
  159. margin-top: 30rpx;
  160. }
  161. .button-container {
  162. display: flex;
  163. flex-direction: column;
  164. align-items: center;
  165. border-bottom: none;
  166. min-width: auto;
  167. }
  168. .circle-btn {
  169. width: 100rpx;
  170. height: 100rpx;
  171. border-radius: 50%;
  172. padding: 0;
  173. display: flex;
  174. align-items: center;
  175. justify-content: center;
  176. background-color: #52c41a;
  177. box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
  178. margin: 0;
  179. }
  180. .btn-icon {
  181. font-size: 50rpx;
  182. color: #fff;
  183. line-height: 1;
  184. }
  185. .btn-text {
  186. font-size: 24rpx;
  187. color: #666;
  188. margin-top: 10rpx;
  189. }
  190. /* 编辑状态下的按钮颜色 */
  191. .circle-btn.editing {
  192. background-color: #1890ff;
  193. }
  194. /* 移除原来的添加按钮样式 */
  195. .add-member-btn {
  196. display: none;
  197. }
  198. /* 应聘来源样式 */
  199. .source-container {
  200. background-color: #fff;
  201. border-radius: 10rpx;
  202. padding: 20rpx;
  203. margin-bottom: 30rpx;
  204. }
  205. .source-row {
  206. display: flex;
  207. margin-bottom: 20rpx;
  208. align-items: flex-start;
  209. }
  210. .source-label {
  211. width: 120rpx;
  212. font-size: 28rpx;
  213. color: #333;
  214. padding-top: 6rpx;
  215. }
  216. .source-options {
  217. flex: 1;
  218. display: flex;
  219. flex-wrap: wrap;
  220. }
  221. .source-option {
  222. display: flex;
  223. align-items: center;
  224. margin-right: 30rpx;
  225. margin-bottom: 15rpx;
  226. }
  227. .source-option text {
  228. font-size: 28rpx;
  229. margin-left: 8rpx;
  230. }
  231. .other-option {
  232. flex-basis: 100%;
  233. margin-top: 10rpx;
  234. }
  235. .other-option input {
  236. border-bottom: 1px solid #eee;
  237. width: 300rpx;
  238. margin-left: 10rpx;
  239. font-size: 28rpx;
  240. }
  241. /* 教育经历样式 */
  242. .education-list {
  243. margin-top: 20rpx;
  244. }
  245. .education-item {
  246. background-color: #f8f8f8;
  247. border-radius: 8rpx;
  248. padding: 20rpx;
  249. margin-bottom: 20rpx;
  250. }
  251. .education-header {
  252. display: flex;
  253. justify-content: space-between;
  254. align-items: center;
  255. margin-bottom: 15rpx;
  256. border-bottom: 1px solid #eee;
  257. padding-bottom: 10rpx;
  258. }
  259. .education-title {
  260. font-size: 30rpx;
  261. font-weight: bold;
  262. color: #333;
  263. }
  264. .education-actions {
  265. display: flex;
  266. gap: 20rpx;
  267. }
  268. .education-edit {
  269. font-size: 26rpx;
  270. color: #1890ff;
  271. }
  272. .education-delete {
  273. font-size: 26rpx;
  274. color: #ff4d4f;
  275. }
  276. .education-content {
  277. padding: 10rpx 0;
  278. }
  279. .education-row {
  280. display: flex;
  281. margin-bottom: 10rpx;
  282. }
  283. .education-label {
  284. font-size: 26rpx;
  285. color: #666;
  286. width: 150rpx;
  287. }
  288. .education-value {
  289. font-size: 26rpx;
  290. color: #333;
  291. flex: 1;
  292. }
  293. .education-form {
  294. background-color: #fff;
  295. border-radius: 8rpx;
  296. padding: 20rpx;
  297. margin-top: 20rpx;
  298. }
  299. .date-range {
  300. display: flex;
  301. align-items: center;
  302. justify-content: space-around;
  303. }
  304. .date-separator {
  305. margin: 0 10rpx;
  306. color: #666;
  307. }
  308. /* 专业技能和培训样式 */
  309. .skills-container, .training-container {
  310. background-color: #fff;
  311. border-radius: 10rpx;
  312. padding: 20rpx;
  313. margin-bottom: 20rpx;
  314. }
  315. .skills-textarea, .training-textarea {
  316. width: 100%;
  317. height: 200rpx;
  318. font-size: 28rpx;
  319. line-height: 1.5;
  320. padding: 10rpx;
  321. box-sizing: border-box;
  322. border: 1px solid #eee;
  323. border-radius: 6rpx;
  324. }
  325. /* 工作经历样式 */
  326. .work-list {
  327. margin-top: 20rpx;
  328. }
  329. .work-item {
  330. background-color: #f8f8f8;
  331. border-radius: 8rpx;
  332. padding: 20rpx;
  333. margin-bottom: 20rpx;
  334. }
  335. .work-header {
  336. display: flex;
  337. justify-content: space-between;
  338. align-items: center;
  339. margin-bottom: 15rpx;
  340. border-bottom: 1px solid #eee;
  341. padding-bottom: 10rpx;
  342. }
  343. .work-title {
  344. font-size: 30rpx;
  345. font-weight: bold;
  346. color: #333;
  347. }
  348. .work-actions {
  349. display: flex;
  350. gap: 20rpx;
  351. }
  352. .work-edit {
  353. font-size: 26rpx;
  354. color: #1890ff;
  355. }
  356. .work-delete {
  357. font-size: 26rpx;
  358. color: #ff4d4f;
  359. }
  360. .work-content {
  361. padding: 10rpx 0;
  362. }
  363. .work-row {
  364. display: flex;
  365. margin-bottom: 10rpx;
  366. }
  367. .work-label {
  368. font-size: 26rpx;
  369. color: #666;
  370. width: 150rpx;
  371. }
  372. .work-value {
  373. font-size: 26rpx;
  374. color: #333;
  375. flex: 1;
  376. }
  377. .work-form {
  378. background-color: #fff;
  379. border-radius: 8rpx;
  380. padding: 20rpx;
  381. margin-top: 20rpx;
  382. }
  383. /* 步骤指示器样式 */
  384. .steps-indicator {
  385. display: flex;
  386. justify-content: space-between;
  387. margin-bottom: 30rpx;
  388. padding: 20rpx;
  389. background-color: #fff;
  390. border-radius: 10rpx;
  391. overflow-x: auto;
  392. }
  393. .step-item {
  394. display: flex;
  395. flex-direction: column;
  396. align-items: center;
  397. position: relative;
  398. min-width: 120rpx;
  399. }
  400. .step-item:not(:last-child)::after {
  401. content: '';
  402. position: absolute;
  403. top: 20rpx;
  404. right: -50%;
  405. width: 100%;
  406. height: 2rpx;
  407. background-color: #ddd;
  408. z-index: 1;
  409. }
  410. .step-item.active:not(:last-child)::after {
  411. background-color: #007AFF;
  412. }
  413. .step-number {
  414. width: 40rpx;
  415. height: 40rpx;
  416. border-radius: 50%;
  417. background-color: #ddd;
  418. color: #fff;
  419. display: flex;
  420. justify-content: center;
  421. align-items: center;
  422. font-size: 24rpx;
  423. margin-bottom: 10rpx;
  424. position: relative;
  425. z-index: 2;
  426. }
  427. .step-item.active .step-number {
  428. background-color: #007AFF;
  429. }
  430. .step-item.current .step-number {
  431. background-color: #007AFF;
  432. box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.2);
  433. }
  434. .step-name {
  435. font-size: 22rpx;
  436. color: #999;
  437. text-align: center;
  438. }
  439. .step-item.active .step-name {
  440. color: #333;
  441. }
  442. .step-item.current .step-name {
  443. color: #007AFF;
  444. font-weight: bold;
  445. }
  446. /* 导航按钮样式 */
  447. .nav-buttons {
  448. display: flex;
  449. justify-content: space-between;
  450. margin-top: 40rpx;
  451. padding: 0 20rpx;
  452. }
  453. .nav-btn {
  454. flex: 1;
  455. margin: 0 10rpx;
  456. height: 80rpx;
  457. line-height: 80rpx;
  458. text-align: center;
  459. border-radius: 40rpx;
  460. font-size: 28rpx;
  461. }
  462. .prev-btn {
  463. background-color: #f0f0f0;
  464. color: #666;
  465. }
  466. .next-btn {
  467. background-color: #007AFF;
  468. color: #fff;
  469. }
  470. .submit-btn {
  471. flex: 1;
  472. margin: 0 10rpx;
  473. height: 80rpx;
  474. line-height: 80rpx;
  475. text-align: center;
  476. border-radius: 40rpx;
  477. font-size: 28rpx;
  478. background-color: #52c41a;
  479. color: #fff;
  480. }
  481. /* 确认提交页样式 */
  482. .confirm-container {
  483. background-color: #fff;
  484. border-radius: 10rpx;
  485. padding: 20rpx;
  486. margin-bottom: 30rpx;
  487. }
  488. .confirm-message {
  489. padding: 20rpx;
  490. background-color: #f6f6f6;
  491. border-radius: 8rpx;
  492. margin-bottom: 20rpx;
  493. }
  494. .info-summary {
  495. padding: 20rpx;
  496. }
  497. .summary-item {
  498. display: flex;
  499. margin-bottom: 15rpx;
  500. }
  501. .summary-label {
  502. width: 150rpx;
  503. font-size: 28rpx;
  504. color: #666;
  505. }
  506. .summary-value {
  507. flex: 1;
  508. font-size: 28rpx;
  509. color: #333;
  510. }
  511. .input-error {
  512. border-bottom: 1px solid #ff4d4f !important;
  513. }
  514. .error-message {
  515. color: #ff4d4f;
  516. font-size: 24rpx;
  517. margin-top: 6rpx;
  518. display: block;
  519. }
  520. /* 添加承诺书弹框样式 */
  521. .promise-modal {
  522. position: fixed;
  523. top: 0;
  524. left: 0;
  525. right: 0;
  526. bottom: 0;
  527. background-color: rgba(0, 0, 0, 0.5);
  528. z-index: 999;
  529. display: flex;
  530. justify-content: center;
  531. align-items: center;
  532. }
  533. .promise-content {
  534. width: 80%;
  535. max-width: 600rpx;
  536. background-color: #fff;
  537. border-radius: 12rpx;
  538. padding: 30rpx;
  539. box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  540. }
  541. .promise-title {
  542. font-size: 34rpx;
  543. font-weight: bold;
  544. text-align: center;
  545. margin-bottom: 20rpx;
  546. color: #333;
  547. }
  548. .promise-text {
  549. height: 600rpx;
  550. margin-bottom: 20rpx;
  551. /* padding: 20rpx; */
  552. background-color: #f8f8f8;
  553. border-radius: 8rpx;
  554. font-size: 28rpx;
  555. line-height: 1.6;
  556. color: #333;
  557. }
  558. .promise-checkbox {
  559. display: flex;
  560. align-items: center;
  561. margin-bottom: 30rpx;
  562. padding: 0 10rpx;
  563. }
  564. .promise-checkbox text {
  565. font-size: 28rpx;
  566. margin-left: 10rpx;
  567. color: #333;
  568. }
  569. .promise-buttons {
  570. display: flex;
  571. justify-content: center;
  572. }
  573. .promise-btn {
  574. width: 200rpx;
  575. height: 80rpx;
  576. line-height: 80rpx;
  577. text-align: center;
  578. border-radius: 40rpx;
  579. font-size: 28rpx;
  580. }
  581. .confirm-btn {
  582. background-color: #007AFF;
  583. color: #fff;
  584. }
  585. .confirm-btn[disabled] {
  586. background-color: #cccccc;
  587. color: #ffffff;
  588. }
  589. /* Loading indicator styles */
  590. .loading-container {
  591. position: fixed;
  592. top: 0;
  593. left: 0;
  594. right: 0;
  595. bottom: 0;
  596. background-color: rgba(255, 255, 255, 0.8);
  597. display: flex;
  598. flex-direction: column;
  599. justify-content: center;
  600. align-items: center;
  601. z-index: 1000;
  602. }
  603. .loading-spinner {
  604. width: 60rpx;
  605. height: 60rpx;
  606. border: 6rpx solid #f3f3f3;
  607. border-top: 6rpx solid #007AFF;
  608. border-radius: 50%;
  609. animation: spin 1s linear infinite;
  610. margin-bottom: 20rpx;
  611. }
  612. .loading-text {
  613. font-size: 28rpx;
  614. color: #666;
  615. }
  616. @keyframes spin {
  617. 0% { transform: rotate(0deg);
  618. }
  619. 100% { transform: rotate(360deg);
  620. }
  621. }