index.css 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827
  1. .position-detail-container {
  2. padding: 20px;
  3. width: 88% !important;
  4. margin: 0 0 0 170px;
  5. }
  6. .header-container {
  7. display: flex;
  8. justify-content: space-between;
  9. align-items: center;
  10. margin-bottom: 20px;
  11. }
  12. .header-actions {
  13. display: flex;
  14. gap: 10px;
  15. }
  16. .detail-content {
  17. display: flex;
  18. gap: 20px;
  19. }
  20. .detail-card {
  21. flex: 2;
  22. }
  23. .status-cards {
  24. flex: 1;
  25. display: flex;
  26. flex-direction: column;
  27. gap: 20px;
  28. }
  29. .section-title {
  30. display: flex;
  31. align-items: center;
  32. margin-bottom: 20px;
  33. font-weight: bold;
  34. color: #333;
  35. position: relative;
  36. }
  37. .section-line {
  38. width: 4px;
  39. height: 16px;
  40. background-color: #67C23A;
  41. margin-right: 8px;
  42. }
  43. .edit-btn {
  44. position: absolute;
  45. right: 0;
  46. color: #67C23A;
  47. }
  48. .detail-item {
  49. display: flex;
  50. margin-bottom: 20px;
  51. line-height: 1.5;
  52. align-items: center;
  53. }
  54. .detail-label {
  55. width: 120px;
  56. color: #606266;
  57. font-weight: 500;
  58. }
  59. .detail-value {
  60. flex: 1;
  61. color: #303133;
  62. }
  63. .html-content {
  64. max-height: 300px;
  65. overflow-y: auto;
  66. padding: 10px;
  67. /* background-color: #f9f9f9; */
  68. border-radius: 4px;
  69. }
  70. .benefit-tag {
  71. margin-right: 8px;
  72. margin-bottom: 8px;
  73. }
  74. .status-switch {
  75. display: flex;
  76. align-items: center;
  77. gap: 10px;
  78. }
  79. .status-text {
  80. font-size: 14px;
  81. color: #303133;
  82. }
  83. .usage-content {
  84. display: flex;
  85. align-items: center;
  86. margin-top: 10px;
  87. }
  88. .usage-label {
  89. width: 80px;
  90. color: #606266;
  91. }
  92. .usage-value {
  93. color: #303133;
  94. font-weight: 500;
  95. }
  96. .process-steps {
  97. margin-top: 20px;
  98. }
  99. .process-step {
  100. display: flex;
  101. align-items: flex-start;
  102. margin-bottom: 15px;
  103. }
  104. .step-number {
  105. width: 24px;
  106. height: 24px;
  107. border-radius: 50%;
  108. background-color: #67C23A;
  109. color: white;
  110. display: flex;
  111. align-items: center;
  112. justify-content: center;
  113. margin-right: 10px;
  114. font-size: 14px;
  115. }
  116. .step-content {
  117. flex: 1;
  118. }
  119. .step-title {
  120. font-weight: 500;
  121. color: #303133;
  122. margin-bottom: 4px;
  123. }
  124. .step-desc {
  125. font-size: 12px;
  126. color: #909399;
  127. }
  128. .process-step.disabled .step-number {
  129. background-color: #909399;
  130. }
  131. .process-step.disabled .step-title,
  132. .process-step.disabled .step-desc {
  133. color: #C0C4CC;
  134. }
  135. /* 招聘流程编辑对话框样式 */
  136. .process-dialog-content {
  137. max-height: 400px;
  138. overflow-y: auto;
  139. }
  140. .process-edit-item {
  141. display: flex;
  142. align-items: center;
  143. padding: 15px;
  144. border-radius: 4px;
  145. margin-bottom: 10px;
  146. background-color: #f5f7fa;
  147. position: relative;
  148. }
  149. .process-edit-item.highlight {
  150. background-color: #f0f9eb;
  151. border: 1px solid #e1f3d8;
  152. }
  153. .process-number {
  154. width: 24px;
  155. height: 24px;
  156. border-radius: 50%;
  157. background-color: #67C23A;
  158. color: white;
  159. display: flex;
  160. align-items: center;
  161. justify-content: center;
  162. margin-right: 15px;
  163. }
  164. .process-edit-content {
  165. flex: 1;
  166. }
  167. .process-edit-desc {
  168. font-size: 12px;
  169. color: #909399;
  170. margin-top: 4px;
  171. }
  172. .process-edit-btn{
  173. display: flex;
  174. flex-direction: column;
  175. align-items: center;
  176. }
  177. .delete-btn {
  178. position: absolute;
  179. right: 10px;
  180. top: 50%;
  181. transform: translateY(-50%);
  182. }
  183. /* 添加在每个步骤上方的加号按钮样式 */
  184. .add-process-btn-top {
  185. display: flex;
  186. justify-content: center;
  187. margin-bottom: 5px;
  188. }
  189. .add-process-btn-top .el-button {
  190. color: #67C23A;
  191. padding: 5px;
  192. }
  193. /* 确保原有的底部加号按钮样式保持不变 */
  194. .add-process-btn {
  195. display: flex;
  196. justify-content: center;
  197. margin-top: 15px;
  198. }
  199. .add-process-btn .el-button {
  200. color: #67C23A;
  201. }
  202. /* 流程步骤选项菜单 */
  203. .process-options-menu {
  204. position: absolute;
  205. background-color: white;
  206. border-radius: 4px;
  207. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  208. padding: 20px 0 8px;
  209. z-index: 2000;
  210. max-height: 300px;
  211. overflow-y: auto;
  212. width: 150px;
  213. .close-btn {
  214. position: absolute;
  215. top: 5px;
  216. right: 5px;
  217. cursor: pointer;
  218. padding: 4px;
  219. border-radius: 50%;
  220. transition: background-color 0.3s;
  221. .el-icon {
  222. font-size: 16px;
  223. color: #909399;
  224. }
  225. }
  226. }
  227. .process-option-item {
  228. padding: 8px 16px;
  229. cursor: pointer;
  230. font-size: 14px;
  231. color: #606266;
  232. }
  233. .process-option-item:hover {
  234. background-color: #f5f7fa;
  235. color: #67C23A;
  236. }
  237. /* AI视频抽屉样式 */
  238. .ai-video-drawer {
  239. --el-drawer-padding-primary: 0;
  240. }
  241. .ai-video-steps {
  242. display: flex;
  243. align-items: center;
  244. justify-content: center;
  245. padding: 20px 0;
  246. border-bottom: 1px solid #e4e7ed;
  247. background-color: #fff;
  248. }
  249. .step-item {
  250. display: flex;
  251. align-items: center;
  252. color: #a6a6a6;
  253. position: relative;
  254. z-index: 1;
  255. cursor: pointer;
  256. transition: all 0.3s;
  257. }
  258. .step-item:hover {
  259. color: #0017ab;
  260. }
  261. .step-item:hover .step-number {
  262. border-color: #0017ab;
  263. }
  264. .step-number {
  265. width: 30px;
  266. height: 30px;
  267. border-radius: 50%;
  268. background-color: #f5f7fa;
  269. color: #909399;
  270. border: 1px solid #dcdfe6;
  271. display: flex;
  272. align-items: center;
  273. justify-content: center;
  274. /* margin-bottom: 8px; */
  275. font-weight: bold;
  276. }
  277. .step-item.active .step-number {
  278. background-color: #0017ab;
  279. color: white;
  280. border-color: #0017ab;
  281. }
  282. .active-title{
  283. color:#000000 !important;
  284. }
  285. .step-line {
  286. width: 25%;
  287. height: 1px;
  288. background-color: #e4e7ed;
  289. margin: 0 15px;
  290. position: relative;
  291. /* top: -15px; */
  292. }
  293. .step-line.active-line {
  294. background-color: #0017ab;
  295. }
  296. .step-title {
  297. color: #a6a6a6;
  298. font-size: 14px;
  299. }
  300. .ai-video-content {
  301. padding: 20px;
  302. height: calc(100% - 120px); /* 减去header和footer高度 */
  303. overflow-y: auto;
  304. }
  305. .ai-video-options-header{
  306. display: flex;
  307. justify-content: space-between;
  308. align-items: center;
  309. }
  310. .custom-btn{
  311. background-color: #0017ab;
  312. color: #fff;
  313. border-color: #0017ab;
  314. }
  315. .drawer-footer {
  316. padding: 10px 20px;
  317. text-align: right;
  318. border-top: 1px solid #e4e7ed;
  319. position: absolute;
  320. bottom: 0;
  321. left: 0;
  322. right: 0;
  323. background-color: white;
  324. }
  325. /* 步骤1:考察能力样式 */
  326. .option-tip {
  327. margin-bottom: 15px;
  328. color: #606266;
  329. }
  330. .new-feature-tip {
  331. background-color: #f0f9eb;
  332. padding: 10px;
  333. border-radius: 4px;
  334. margin-bottom: 20px;
  335. font-size: 14px;
  336. color: #606266;
  337. line-height: 1.5;
  338. }
  339. .new-tag {
  340. display: inline-block;
  341. background-color: #f56c6c;
  342. color: white;
  343. padding: 2px 6px;
  344. border-radius: 4px;
  345. font-size: 12px;
  346. margin-right: 5px;
  347. }
  348. .ability-options {
  349. display: grid;
  350. grid-template-columns: repeat(3, 1fr);
  351. gap: 15px;
  352. }
  353. .ability-label {
  354. font-size: 14px;
  355. color: #606266;
  356. }
  357. /* 步骤2:面试题目样式 */
  358. .interview-settings {
  359. width: 100%;
  360. }
  361. .interview-header {
  362. display: flex;
  363. align-items: flex-start;
  364. margin-bottom: 20px;
  365. flex-direction: column;
  366. }
  367. .interview-content{
  368. display: flex;
  369. justify-content: space-around;
  370. align-items: flex-start;
  371. }
  372. .interview-duration {
  373. display: flex;
  374. align-items: center;
  375. }
  376. .duration-value {
  377. font-weight: bold;
  378. margin: 0 10px;
  379. }
  380. .duration-tip {
  381. color: #909399;
  382. font-size: 12px;
  383. }
  384. .interview-mode {
  385. display: flex;
  386. align-items: center;
  387. margin-bottom: 20px;
  388. }
  389. .mode-value {
  390. font-weight: bold;
  391. margin: 0 10px;
  392. }
  393. .interview-questions-container {
  394. width: 85%;
  395. min-height: 200px;
  396. /* border: 1px dashed #dcdfe6; */
  397. border-radius: 4px;
  398. margin-bottom: 20px;
  399. display: flex;
  400. justify-content: center;
  401. align-items: center;
  402. }
  403. .no-questions {
  404. text-align: center;
  405. color: #909399;
  406. }
  407. .ai-tip {
  408. font-size: 12px;
  409. color: #c0c4cc;
  410. margin: 5px 0;
  411. }
  412. .auto-generate-btn {
  413. background-color: #ed7d31;
  414. border-color: #ed7d31;
  415. margin-top: 15px;
  416. }
  417. .multi-dimension-questions {
  418. width: 30%;
  419. margin-top: 30px;
  420. }
  421. .dimension-title {
  422. font-weight: bold;
  423. margin-bottom: 15px;
  424. }
  425. .dimension-list {
  426. display: flex;
  427. flex-direction: column;
  428. gap: 10px;
  429. }
  430. /* .dimension-item {
  431. }
  432. */
  433. .dimension-header {
  434. display: flex;
  435. align-items: center;
  436. justify-content: space-between;
  437. }
  438. .expand-icon {
  439. cursor: pointer;
  440. }
  441. /* 步骤3:系统设置样式 */
  442. .system-settings {
  443. width: 100%;
  444. .setting-item{
  445. border: 1px solid #ebeef5;
  446. border-radius: 30px;
  447. display: flex;
  448. justify-content: space-around;
  449. align-items: center;
  450. }
  451. }
  452. .setting-section {
  453. padding: 20px;
  454. .section-header {
  455. font-size: 16px;
  456. font-weight: 500;
  457. margin-bottom: 20px;
  458. color: #333;
  459. }
  460. .interviewer-avatars {
  461. display: flex;
  462. gap: 20px;
  463. margin-bottom: 30px;
  464. .avatar-item {
  465. cursor: pointer;
  466. text-align: center;
  467. .avatar-wrapper {
  468. display: flex;
  469. flex-direction: column;
  470. align-items: center;
  471. width: 80px;
  472. }
  473. .avatar-circle {
  474. width: 60px;
  475. height: 60px;
  476. border-radius: 50%;
  477. border: 3px solid transparent;
  478. overflow: hidden;
  479. transition: all 0.3s ease;
  480. &.selected {
  481. border-color: #0419a3;
  482. }
  483. img {
  484. width: 100%;
  485. height: 100%;
  486. object-fit: cover;
  487. }
  488. }
  489. .avatar-name {
  490. margin-top: 8px;
  491. font-size: 14px;
  492. color: #333;
  493. width: 100%;
  494. text-align: center;
  495. overflow: hidden;
  496. white-space: nowrap;
  497. text-overflow: ellipsis;
  498. }
  499. &:hover {
  500. .avatar-circle {
  501. border-color: #0419a3;
  502. opacity: 0.8;
  503. }
  504. }
  505. }
  506. }
  507. }
  508. .rank-settings {
  509. display: flex;
  510. align-items: center;
  511. margin-bottom: 15px;
  512. }
  513. .rank-range {
  514. display: flex;
  515. align-items: center;
  516. margin-right: 30px;
  517. }
  518. .range-inputs {
  519. display: flex;
  520. align-items: center;
  521. margin-left: 10px;
  522. }
  523. .percent-input {
  524. width: 80px;
  525. }
  526. .score-display {
  527. display: flex;
  528. align-items: center;
  529. }
  530. .score-range {
  531. margin-left: 10px;
  532. color: #67C23A;
  533. }
  534. .add-rank-btn {
  535. margin-top: 10px;
  536. }
  537. .validity-setting {
  538. display: flex;
  539. align-items: center;
  540. margin-bottom: 10px;
  541. }
  542. .validity-label {
  543. margin-left: 10px;
  544. }
  545. .validity-tip {
  546. font-size: 12px;
  547. color: #909399;
  548. margin-top: 5px;
  549. }
  550. .model-select {
  551. width: 200px;
  552. }
  553. @media (max-width: 768px) {
  554. .ability-options {
  555. grid-template-columns: repeat(2, 1fr);
  556. }
  557. .step-line {
  558. width: 50px;
  559. }
  560. }
  561. @media (max-width: 480px) {
  562. .ability-options {
  563. grid-template-columns: 1fr;
  564. }
  565. .interview-header {
  566. flex-direction: column;
  567. align-items: flex-start;
  568. }
  569. .interview-actions {
  570. margin-top: 10px;
  571. }
  572. .rank-settings {
  573. flex-direction: column;
  574. align-items: flex-start;
  575. }
  576. .rank-range {
  577. margin-bottom: 10px;
  578. }
  579. }
  580. /* 视频宣讲弹窗样式 */
  581. .video-lecture-form {
  582. padding: 20px 0;
  583. }
  584. .form-item {
  585. margin-bottom: 20px;
  586. }
  587. .form-label {
  588. font-weight: 500;
  589. margin-bottom: 8px;
  590. color: #606266;
  591. }
  592. .video-uploader {
  593. width: 100%;
  594. }
  595. .upload-area {
  596. width: 100%;
  597. height: 120px;
  598. border: 1px dashed #d9d9d9;
  599. border-radius: 6px;
  600. display: flex;
  601. flex-direction: column;
  602. align-items: center;
  603. justify-content: center;
  604. cursor: pointer;
  605. transition: border-color 0.3s;
  606. }
  607. .upload-area:hover {
  608. border-color: #67C23A;
  609. }
  610. .upload-text {
  611. color: #909399;
  612. font-size: 12px;
  613. margin-top: 8px;
  614. }
  615. .el-icon {
  616. font-size: 24px;
  617. color: #909399;
  618. }
  619. /* AI实时对话抽屉样式 */
  620. .ai-chat-drawer {
  621. --el-drawer-padding-primary: 0;
  622. }
  623. .ai-chat-content {
  624. padding: 20px;
  625. height: calc(100% - 120px);
  626. overflow-y: auto;
  627. }
  628. .chat-settings {
  629. margin-bottom: 30px;
  630. }
  631. .chat-actions {
  632. display: flex;
  633. gap: 10px;
  634. margin: 20px 0;
  635. }
  636. .chat-questions {
  637. margin-top: 20px;
  638. min-height: 200px;
  639. border: 1px dashed #dcdfe6;
  640. border-radius: 4px;
  641. }
  642. .empty-questions {
  643. height: 200px;
  644. display: flex;
  645. flex-direction: column;
  646. align-items: center;
  647. justify-content: center;
  648. color: #909399;
  649. }
  650. .tip-text {
  651. font-size: 12px;
  652. color: #c0c4cc;
  653. margin-top: 8px;
  654. }
  655. .question-list {
  656. padding: 16px;
  657. /* background: #f5f7fa; */
  658. border-radius: 8px;
  659. min-height: 200px;
  660. }
  661. .question-card {
  662. background: #fff;
  663. border-radius: 8px;
  664. padding: 20px;
  665. margin-bottom: 16px;
  666. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  667. }
  668. .drag-handle{
  669. display: flex;
  670. justify-content: center;
  671. .dorp{
  672. width: 30px;
  673. height: 30px;
  674. cursor: pointer;
  675. }
  676. }
  677. .question-header {
  678. display: flex;
  679. justify-content: space-between;
  680. align-items: center;
  681. margin-bottom: 20px;
  682. flex-wrap: wrap;
  683. gap: 10px;
  684. }
  685. .question-title {
  686. display: flex;
  687. align-items: center;
  688. gap: 10px;
  689. }
  690. .question-number {
  691. color: #333;
  692. font-weight: 500;
  693. }
  694. .question-actions {
  695. display: flex;
  696. align-items: center;
  697. gap: 20px;
  698. }
  699. .weight-control, .answer-limit {
  700. display: flex;
  701. align-items: center;
  702. gap: 8px;
  703. }
  704. .weight-label, .answer-label {
  705. color: #606266;
  706. font-size: 14px;
  707. white-space: nowrap;
  708. }
  709. :deep(.el-input-number) {
  710. width: 100px;
  711. }
  712. :deep(.el-select) {
  713. width: 120px;
  714. }
  715. .question-info {
  716. border-bottom: 1px solid #e4e7ed;
  717. /* background: #f8f9fa; */
  718. padding: 15px;
  719. border-radius: 4px;
  720. }
  721. .question-info .info-item{
  722. color: #a6a6a6;
  723. white-space: nowrap;
  724. overflow: hidden;
  725. text-overflow: ellipsis;
  726. }
  727. .info-item {
  728. margin-bottom: 12px;
  729. line-height: 1.6;
  730. }
  731. .info-item:last-child {
  732. margin-bottom: 0;
  733. }
  734. .info-label {
  735. color: #909399;
  736. margin-right: 8px;
  737. font-weight: 500;
  738. }
  739. /* 问题编辑弹框样式 */
  740. .question-form {
  741. padding: 20px 0;
  742. }
  743. .form-item {
  744. margin-bottom: 20px;
  745. }
  746. .form-label {
  747. font-weight: 500;
  748. margin-bottom: 8px;
  749. color: #606266;
  750. display: flex;
  751. align-items: center;
  752. }
  753. .required {
  754. color: #f56c6c;
  755. margin-left: 4px;
  756. }
  757. .full-width {
  758. width: 100%;
  759. }
  760. :deep(.el-input__count) {
  761. background: transparent;
  762. }
  763. :deep(.el-textarea__count) {
  764. background: transparent;
  765. }
  766. /* 资料收集对话框样式 */
  767. .data-collection-form {
  768. padding: 20px;
  769. }
  770. /* 表单项样式 */
  771. .form-item {
  772. margin-bottom: 24px;
  773. }
  774. /* 表单标签样式 */
  775. .form-label {
  776. font-size: 14px;
  777. color: #333;
  778. font-weight: 500;
  779. margin-bottom: 12px;
  780. display: flex;
  781. align-items: center;
  782. }
  783. /* 必填星号样式 */
  784. .required {
  785. color: #ff4d4f;
  786. margin-left: 4px;
  787. font-size: 14px;
  788. }
  789. /* 开关样式 */
  790. :deep(.el-switch) {
  791. margin-top: 8px;
  792. }
  793. /* 问题列表容器样式 */
  794. .question-list {
  795. width: 800px;
  796. height: 550px;
  797. overflow-y: scroll;
  798. margin-top: 12px;
  799. /* border: 1px solid #e4e7ed; */
  800. border-radius: 4px;
  801. padding: 16px;
  802. /* background-color: #f8f9fa; */
  803. }
  804. /* 问题项样式 */
  805. .question-item {
  806. margin-bottom: 16px;
  807. display: flex;
  808. align-items: center;
  809. flex-direction: column;
  810. }
  811. /* 复选框组样式 */
  812. :deep(.el-checkbox-group) {
  813. display: flex;
  814. flex-direction: column;
  815. gap: 16px;
  816. }
  817. /* 复选框样式 */
  818. :deep(.el-checkbox) {
  819. margin-right: 0;
  820. height: auto;
  821. }
  822. /* 复选框标签样式 */
  823. :deep(.el-checkbox__label) {
  824. font-size: 14px;
  825. color: #606266;
  826. }
  827. .data-collection-dialog {
  828. .data-collection-form {
  829. padding: 0;
  830. }
  831. .question-list {
  832. padding: 0;
  833. }
  834. .question-item {
  835. border: 1px solid #DCDFE6;
  836. border-radius: 4px;
  837. margin-bottom: 16px;
  838. overflow: hidden;
  839. }
  840. .question-header {
  841. background: #F5F7FA;
  842. padding: 12px 16px;
  843. border-bottom: 1px solid #DCDFE6;
  844. display: flex;
  845. justify-content: space-between;
  846. align-items: center;
  847. }
  848. .question-title {
  849. font-size: 14px;
  850. color: #303133;
  851. }
  852. .question-type {
  853. display: flex;
  854. align-items: center;
  855. gap: 4px;
  856. color: #909399;
  857. font-size: 14px;
  858. cursor: pointer;
  859. .el-icon {
  860. font-size: 12px;
  861. }
  862. }
  863. .question-content {
  864. padding: 16px;
  865. }
  866. .user-answer {
  867. color: #909399;
  868. font-size: 14px;
  869. margin-bottom: 16px;
  870. }
  871. .question-actions {
  872. display: flex;
  873. justify-content: space-between;
  874. align-items: center;
  875. margin-bottom: 16px;
  876. padding-bottom: 16px;
  877. border-bottom: 1px solid #EBEEF5;
  878. }
  879. .action-left {
  880. display: flex;
  881. align-items: center;
  882. gap: 8px;
  883. .action-text {
  884. font-size: 14px;
  885. color: #606266;
  886. }
  887. }
  888. .action-right {
  889. display: flex;
  890. gap: 16px;
  891. .action-icon {
  892. font-size: 16px;
  893. color: #909399;
  894. cursor: pointer;
  895. &:hover {
  896. color: #409EFF;
  897. }
  898. }
  899. }
  900. .question-settings {
  901. display: flex;
  902. gap: 24px;
  903. }
  904. .setting-item {
  905. display: flex;
  906. align-items: center;
  907. gap: 8px;
  908. span {
  909. font-size: 14px;
  910. color: #606266;
  911. }
  912. }
  913. .add-question {
  914. margin-top: 24px;
  915. text-align: center;
  916. }
  917. }
  918. /* 简历收集对话框样式 */
  919. .resume-collection-dialog {
  920. .resume-collection-form {
  921. padding: 20px 0;
  922. }
  923. .switch-label {
  924. margin-left: 10px;
  925. font-size: 14px;
  926. color: #606266;
  927. }
  928. .resume-preview {
  929. margin-top: 20px;
  930. border: 1px solid #e4e7ed;
  931. border-radius: 4px;
  932. }
  933. .preview-title {
  934. padding: 10px 15px;
  935. background-color: #f5f7fa;
  936. border-bottom: 1px solid #e4e7ed;
  937. font-weight: 500;
  938. color: #606266;
  939. }
  940. .preview-content {
  941. padding: 15px;
  942. }
  943. .preview-item {
  944. display: flex;
  945. align-items: center;
  946. margin-bottom: 15px;
  947. }
  948. .item-label {
  949. width: 80px;
  950. color: #606266;
  951. }
  952. .item-input {
  953. flex: 1;
  954. height: 32px;
  955. background-color: #f5f7fa;
  956. border: 1px solid #dcdfe6;
  957. border-radius: 4px;
  958. }
  959. .item-upload {
  960. flex: 1;
  961. height: 60px;
  962. background-color: #f5f7fa;
  963. border: 1px dashed #dcdfe6;
  964. border-radius: 4px;
  965. display: flex;
  966. align-items: center;
  967. justify-content: center;
  968. }
  969. .item-required {
  970. color: #f56c6c;
  971. margin-left: 5px;
  972. }
  973. }
  974. /* 添加代码测试对话框样式 */
  975. .code-test-dialog {
  976. .code-test-form {
  977. padding: 20px 0;
  978. }
  979. .switch-label {
  980. margin-left: 10px;
  981. font-size: 14px;
  982. color: #606266;
  983. }
  984. .test-paper-selector {
  985. margin-top: 10px;
  986. }
  987. .empty-paper {
  988. display: flex;
  989. flex-direction: column;
  990. align-items: center;
  991. justify-content: center;
  992. padding: 30px;
  993. border: 1px dashed #dcdfe6;
  994. border-radius: 4px;
  995. background-color: #f8f9fa;
  996. }
  997. .tip-text {
  998. margin-top: 10px;
  999. font-size: 12px;
  1000. color: #909399;
  1001. }
  1002. .selected-paper {
  1003. display: flex;
  1004. justify-content: space-between;
  1005. align-items: center;
  1006. padding: 15px;
  1007. border: 1px solid #dcdfe6;
  1008. border-radius: 4px;
  1009. background-color: #f8f9fa;
  1010. }
  1011. .paper-info {
  1012. flex: 1;
  1013. }
  1014. .paper-title {
  1015. font-weight: 500;
  1016. color: #303133;
  1017. margin-bottom: 5px;
  1018. }
  1019. .paper-meta {
  1020. display: flex;
  1021. gap: 15px;
  1022. font-size: 12px;
  1023. color: #909399;
  1024. }
  1025. .paper-actions {
  1026. display: flex;
  1027. gap: 10px;
  1028. }
  1029. }
  1030. /* 添加打字测试对话框样式 */
  1031. .typing-test-dialog {
  1032. .typing-test-form {
  1033. padding: 20px;
  1034. }
  1035. .form-item {
  1036. margin-bottom: 24px;
  1037. position: relative;
  1038. }
  1039. .form-label {
  1040. font-weight: 500;
  1041. margin-bottom: 12px;
  1042. color: #606266;
  1043. font-size: 14px;
  1044. }
  1045. .article-selection {
  1046. margin-top: 10px;
  1047. }
  1048. .add-article-btn {
  1049. display: flex;
  1050. align-items: center;
  1051. gap: 5px;
  1052. font-size: 13px;
  1053. }
  1054. .time-input-container {
  1055. display: flex;
  1056. align-items: center;
  1057. }
  1058. .time-input {
  1059. width: 120px;
  1060. }
  1061. .time-unit {
  1062. margin-left: 10px;
  1063. color: #606266;
  1064. }
  1065. .preview-uploader {
  1066. width: 100px;
  1067. }
  1068. .upload-area {
  1069. width: 100px;
  1070. height: 100px;
  1071. border: 1px dashed #d9d9d9;
  1072. border-radius: 6px;
  1073. display: flex;
  1074. flex-direction: column;
  1075. align-items: center;
  1076. justify-content: center;
  1077. cursor: pointer;
  1078. transition: border-color 0.3s;
  1079. }
  1080. .upload-area:hover {
  1081. border-color: #67C23A;
  1082. }
  1083. .upload-text {
  1084. color: #909399;
  1085. font-size: 12px;
  1086. margin-top: 8px;
  1087. }
  1088. .notes-counter {
  1089. position: absolute;
  1090. right: 10px;
  1091. bottom: -20px;
  1092. font-size: 12px;
  1093. color: #909399;
  1094. }
  1095. .criteria-options {
  1096. display: flex;
  1097. gap: 20px;
  1098. }
  1099. /* 添加以下新样式 */
  1100. :deep(.el-radio) {
  1101. margin-right: 30px;
  1102. }
  1103. :deep(.el-radio__label) {
  1104. font-size: 14px;
  1105. }
  1106. :deep(.el-textarea) {
  1107. margin-bottom: 5px;
  1108. }
  1109. :deep(.el-checkbox__label) {
  1110. font-size: 14px;
  1111. }
  1112. :deep(.el-input) {
  1113. width: auto;
  1114. }
  1115. }
  1116. .title-edit-container {
  1117. display: flex;
  1118. align-items: flex-start;
  1119. gap: 10px;
  1120. flex-direction: column;
  1121. }
  1122. .edit-title-btn {
  1123. color: #67C23A;
  1124. }
  1125. /* 职位名称编辑相关样式 */
  1126. .edit-title-btn {
  1127. margin-left: 10px;
  1128. font-size: 14px;
  1129. color: #409EFF;
  1130. }
  1131. .title-edit-container {
  1132. flex: 1;
  1133. }
  1134. .title-edit-actions {
  1135. display: flex;
  1136. justify-content: flex-end;
  1137. margin-top: 10px;
  1138. gap: 10px;
  1139. }
  1140. /* 确保在编辑模式下输入框有足够的宽度 */
  1141. .title-edit-container :deep(.el-input) {
  1142. width: 100%;
  1143. }
  1144. .competency-tag {
  1145. margin-right: 8px;
  1146. margin-bottom: 8px;
  1147. }
  1148. .info-icon {
  1149. margin-left: 4px;
  1150. font-size: 14px;
  1151. color: #909399;
  1152. float: right;
  1153. }
  1154. :deep(.el-checkbox-group) {
  1155. display: flex;
  1156. flex-wrap: wrap;
  1157. gap: 12px;
  1158. }
  1159. :deep(.el-checkbox) {
  1160. margin-right: 0;
  1161. }
  1162. .recommended-dimensions,
  1163. .optional-dimensions,
  1164. .custom-dimensions {
  1165. background: #fff;
  1166. border-radius: 8px;
  1167. padding: 20px;
  1168. margin-bottom: 24px;
  1169. }
  1170. .recommended-dimensions h3,
  1171. .optional-dimensions h3,
  1172. .custom-dimensions h3 {
  1173. font-size: 16px;
  1174. color: #333;
  1175. margin-bottom: 16px;
  1176. font-weight: 500;
  1177. }
  1178. .dimension-grid {
  1179. display: grid;
  1180. grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  1181. gap: 16px;
  1182. }
  1183. .ability-label {
  1184. display: flex;
  1185. align-items: center;
  1186. gap: 8px;
  1187. }
  1188. .ability-label .sheng{
  1189. position: absolute;
  1190. right: 0;
  1191. bottom:0;
  1192. width: 30px;
  1193. height: 30px;
  1194. }
  1195. .ability-label span {
  1196. font-size: 14px;
  1197. color: #333;
  1198. }
  1199. .ability-label .el-icon {
  1200. color: #909399;
  1201. font-size: 16px;
  1202. cursor: help;
  1203. }
  1204. .custom-dimension-input {
  1205. display: flex;
  1206. flex-direction: column;
  1207. gap: 16px;
  1208. }
  1209. .custom-dimension-input .el-input {
  1210. width: 100%;
  1211. }
  1212. .custom-dimension-input .el-textarea {
  1213. margin-top: 8px;
  1214. }
  1215. .el-checkbox {
  1216. margin-right: 0;
  1217. margin-bottom: 0;
  1218. padding: 12px;
  1219. border: 1px solid #EBEEF5;
  1220. border-radius: 4px;
  1221. transition: all 0.3s;
  1222. }
  1223. .el-checkbox:hover {
  1224. background: #F5F7FA;
  1225. }
  1226. .el-checkbox.is-checked {
  1227. /* background: #F0F9FF;
  1228. border-color: #409EFF; */
  1229. }
  1230. .el-checkbox.is-checked.el-checkbox__inner{
  1231. background-color: #0017ab;
  1232. }
  1233. .new-feature-tip {
  1234. background: #FFF7E6;
  1235. border-radius: 4px;
  1236. padding: 12px;
  1237. margin-bottom: 20px;
  1238. display: flex;
  1239. align-items: center;
  1240. }
  1241. .new-tag {
  1242. background: #FF9800;
  1243. color: white;
  1244. padding: 2px 6px;
  1245. border-radius: 4px;
  1246. font-size: 12px;
  1247. margin-right: 8px;
  1248. }
  1249. .dimension-form {
  1250. display: flex;
  1251. flex-direction: column;
  1252. gap: 16px;
  1253. }
  1254. .dimension-row {
  1255. display: flex;
  1256. gap: 16px;
  1257. }
  1258. .dimension-input {
  1259. display: flex;
  1260. align-items: center;
  1261. /* flex: 1; */
  1262. }
  1263. .dimension-actions {
  1264. display: flex;
  1265. justify-content: space-between;
  1266. align-items: center;
  1267. }
  1268. .input-label {
  1269. width: 80px;
  1270. font-weight: 500;
  1271. color: #606266;
  1272. }
  1273. .multi-dimension-questions {
  1274. padding: 10px;
  1275. background-color: #f2f2f2;
  1276. border-radius: 10px;
  1277. .dimension-title {
  1278. font-size: 16px;
  1279. font-weight: 500;
  1280. margin-bottom: 16px;
  1281. }
  1282. .dimension-list {
  1283. .dimension-item {
  1284. border-radius: 4px;
  1285. display: flex;
  1286. justify-content: space-between;
  1287. align-items: center;
  1288. border-radius: 4px;
  1289. margin-bottom: 12px;
  1290. .sheng{
  1291. position: absolute;
  1292. right: 0;
  1293. bottom:0;
  1294. width: 30px;
  1295. height: 30px;
  1296. }
  1297. .dimension-header {
  1298. border: 1px solid #dcdfe6;
  1299. position: relative;
  1300. width: 90%;
  1301. background: #fff;
  1302. padding: 12px 16px;
  1303. display: flex;
  1304. align-items: center;
  1305. justify-content: space-between;
  1306. cursor: pointer;
  1307. .dimension-info {
  1308. display: flex;
  1309. align-items: center;
  1310. gap: 8px;
  1311. .ability-name {
  1312. font-weight: 500;
  1313. }
  1314. .new-tag {
  1315. background: #e6f7ff;
  1316. color: #1890ff;
  1317. padding: 2px 6px;
  1318. border-radius: 2px;
  1319. font-size: 12px;
  1320. }
  1321. }
  1322. .dimension-level {
  1323. display: flex;
  1324. align-items: center;
  1325. gap: 4px;
  1326. .level-label {
  1327. color: #606266;
  1328. font-size: 14px;
  1329. }
  1330. .level-value {
  1331. color: #303133;
  1332. font-weight: 500;
  1333. }
  1334. }
  1335. .expand-icon {
  1336. font-size: 16px;
  1337. color: #909399;
  1338. transition: transform 0.3s;
  1339. &.expanded {
  1340. transform: rotate(180deg);
  1341. }
  1342. }
  1343. }
  1344. .dimension-content {
  1345. padding: 11px 16px;
  1346. width: 30px;
  1347. cursor: pointer;
  1348. transition: all 0.3s ease;
  1349. position: relative;
  1350. display: flex;
  1351. align-items: center;
  1352. justify-content: center;
  1353. /* &:hover {
  1354. background-color: #f56c6c;
  1355. color: white;
  1356. .ability-description {
  1357. display: none;
  1358. }
  1359. .delete-icon {
  1360. display: block;
  1361. }
  1362. } */
  1363. .ability-description {
  1364. color: #606266;
  1365. font-size: 14px;
  1366. line-height: 1.5;
  1367. }
  1368. .delete-icon {
  1369. display: none;
  1370. font-size: 16px;
  1371. color: white;
  1372. }
  1373. }
  1374. }
  1375. }
  1376. }
  1377. .interviewer-avatars {
  1378. display: flex;
  1379. gap: 20px;
  1380. margin: 20px 0;
  1381. }
  1382. .avatar-item {
  1383. text-align: center;
  1384. cursor: pointer;
  1385. }
  1386. .avatar-item.selected {
  1387. position: relative;
  1388. }
  1389. .avatar-item.selected::after {
  1390. content: '';
  1391. position: absolute;
  1392. bottom: -5px;
  1393. left: 50%;
  1394. transform: translateX(-50%);
  1395. width: 6px;
  1396. height: 6px;
  1397. background-color: #0066FF;
  1398. border-radius: 50%;
  1399. }
  1400. .avatar-image {
  1401. width: 80px;
  1402. height: 80px;
  1403. border-radius: 50%;
  1404. overflow: hidden;
  1405. margin-bottom: 8px;
  1406. }
  1407. .avatar-image img {
  1408. width: 100%;
  1409. height: 100%;
  1410. object-fit: cover;
  1411. }
  1412. .avatar-name {
  1413. font-size: 14px;
  1414. color: #333;
  1415. }
  1416. .interview-settings {
  1417. margin-top: 30px;
  1418. }
  1419. .setting-item {
  1420. margin-bottom: 20px;
  1421. }
  1422. .setting-label {
  1423. font-weight: 500;
  1424. p{
  1425. width: 150px;
  1426. margin-bottom: 0px;
  1427. text-align: justify;
  1428. text-align-last: justify;
  1429. text-justify: inter-character;
  1430. }
  1431. /* margin-bottom: 10px; */
  1432. }
  1433. .setting-desc {
  1434. font-size: 12px;
  1435. color: #666;
  1436. margin-top: 5px;
  1437. p{
  1438. width: 280px;
  1439. margin-bottom: 0px;
  1440. text-align: justify;
  1441. text-align-last: justify;
  1442. text-justify: inter-character;
  1443. }
  1444. }
  1445. .setting-options {
  1446. display: flex;
  1447. gap: 20px;
  1448. width: 280px;
  1449. }
  1450. .question-header {
  1451. display: flex;
  1452. justify-content: space-between;
  1453. align-items: center;
  1454. margin-bottom: 12px;
  1455. }
  1456. .question-actions {
  1457. display: flex;
  1458. align-items: center;
  1459. gap: 16px;
  1460. justify-content: flex-end;
  1461. margin-top: 10px;
  1462. }
  1463. /* 拖拽时的样式 */
  1464. .sortable-ghost {
  1465. opacity: 0.5;
  1466. background: #f4f4f5;
  1467. }
  1468. .sortable-drag {
  1469. opacity: 0.8;
  1470. background: #fff;
  1471. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  1472. }
  1473. .field-config-panel {
  1474. background: #fff;
  1475. border-radius: 8px;
  1476. padding: 20px;
  1477. margin-bottom: 20px;
  1478. }
  1479. .panel-header {
  1480. display: flex;
  1481. justify-content: space-between;
  1482. align-items: center;
  1483. margin-bottom: 20px;
  1484. h3 {
  1485. margin: 0;
  1486. font-size: 16px;
  1487. color: #303133;
  1488. }
  1489. }
  1490. .field-config-list {
  1491. .section-title {
  1492. font-size: 14px;
  1493. font-weight: 500;
  1494. color: #303133;
  1495. margin: 20px 0 15px;
  1496. padding-left: 8px;
  1497. border-left: 3px solid #0419a3;
  1498. }
  1499. }
  1500. .field-config-item {
  1501. display: flex;
  1502. align-items: center;
  1503. margin-bottom: 15px;
  1504. padding: 10px;
  1505. background: #f5f7fa;
  1506. border-radius: 4px;
  1507. .field-label {
  1508. flex: 1;
  1509. font-size: 14px;
  1510. color: #606266;
  1511. }
  1512. .required-tag {
  1513. margin-left: 8px;
  1514. }
  1515. .custom-switch {
  1516. margin-left: auto;
  1517. }
  1518. .salary-range-container {
  1519. display: flex;
  1520. align-items: center;
  1521. gap: 10px;
  1522. width: 100%;
  1523. }
  1524. .salary-type-select {
  1525. width: 120px;
  1526. }
  1527. .salary-input {
  1528. width: 150px;
  1529. }
  1530. .salary-separator {
  1531. color: #606266;
  1532. margin: 0 5px;
  1533. }
  1534. }