camera.wxss 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667
  1. .camera-container {
  2. position: relative;
  3. margin-top: 25px;
  4. width: 100%;
  5. height: 96vh;
  6. background-color: #ffffff;
  7. display: flex;
  8. flex-direction: column;
  9. overflow: hidden; /* 防止内容溢出 */
  10. }
  11. .header {
  12. height: 90rpx;
  13. /* background-color: #000000; */
  14. display: flex;
  15. align-items: center;
  16. padding: 0 30rpx;
  17. /* color: #ffffff; */
  18. }
  19. .back-button {
  20. width: 60rpx;
  21. height: 60rpx;
  22. display: flex;
  23. align-items: center;
  24. justify-content: center;
  25. }
  26. .title {
  27. flex: 1;
  28. text-align: center;
  29. font-size: 32rpx;
  30. font-weight: bold;
  31. }
  32. .controls {
  33. display: flex;
  34. gap: 30rpx;
  35. }
  36. .iconfont {
  37. font-size: 40rpx;
  38. }
  39. .content {
  40. flex: 1;
  41. display: flex;
  42. flex-direction: column;
  43. position: relative;
  44. padding: 50rpx 20rpx 0;
  45. }
  46. .progress-container {
  47. display: flex;
  48. flex-direction: column;
  49. justify-content: space-between;
  50. margin-bottom: 20rpx;
  51. }
  52. .progress-step {
  53. display: flex;
  54. align-items: center;
  55. margin-bottom: 10rpx;
  56. }
  57. .step-circle {
  58. width: 40rpx;
  59. height: 40rpx;
  60. border-radius: 50%;
  61. background-color: #e0e0e0;
  62. display: flex;
  63. align-items: center;
  64. justify-content: center;
  65. font-size: 24rpx;
  66. margin-right: 10rpx;
  67. }
  68. .step-circle.active {
  69. background-color: #ff9500;
  70. color: #ffffff;
  71. }
  72. .step-text {
  73. font-size: 24rpx;
  74. color: #666666;
  75. }
  76. .progress-bar {
  77. height: 10rpx;
  78. background-color: #e0e0e0;
  79. border-radius: 5rpx;
  80. overflow: hidden;
  81. margin-bottom: 20rpx;
  82. }
  83. .progress-fill {
  84. height: 100%;
  85. background-color: #00c853;
  86. transition: width 0.3s;
  87. }
  88. .interview-content {
  89. flex: 1;
  90. display: flex;
  91. flex-direction: column;
  92. margin-bottom: 40rpx;
  93. padding: 20rpx;
  94. border-bottom: 1px solid #eee;
  95. }
  96. .video-area {
  97. display: flex;
  98. /* flex-direction: column; */
  99. justify-content: space-between;
  100. height: auto;
  101. margin-bottom: 20rpx;
  102. }
  103. .video-camera {
  104. display: flex;
  105. flex-direction: row;
  106. align-items: center;
  107. justify-content: space-between;
  108. width: 65%;
  109. }
  110. .interviewer {
  111. background-color: #f5f5f5;
  112. display: flex;
  113. align-items: center;
  114. justify-content: center;
  115. position: relative;
  116. width: 48% !important;
  117. height: 300rpx;
  118. }
  119. .interviewer-video {
  120. width: 100%;
  121. height: 100%;
  122. object-fit: cover;
  123. }
  124. .interviewer-avatar {
  125. width: 80%;
  126. height: 80%;
  127. object-fit: contain;
  128. }
  129. .user-camera-container {
  130. width: 48%;
  131. height: 300rpx;
  132. border-radius: 10rpx;
  133. overflow: hidden;
  134. border: 4rpx solid #ffffff;
  135. box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  136. }
  137. .question-area {
  138. flex: 1;
  139. display: flex;
  140. flex-direction: column;
  141. }
  142. .question-number {
  143. font-size: 28rpx;
  144. color: #666;
  145. margin-bottom: 20rpx;
  146. }
  147. .question-importance {
  148. background-color: #f9f9f9;
  149. padding: 20rpx;
  150. border-radius: 10rpx;
  151. margin-bottom: 20rpx;
  152. font-size: 28rpx;
  153. color: #333;
  154. }
  155. .question-importance text {
  156. color: #ff0000;
  157. /* margin-right: 10rpx; */
  158. }
  159. .options {
  160. display: flex;
  161. flex-direction: column;
  162. gap: 20rpx;
  163. margin-bottom: 30rpx;
  164. }
  165. .option-item {
  166. padding: 20rpx;
  167. background-color: #f5f5f5;
  168. border-radius: 10rpx;
  169. font-size: 28rpx;
  170. transition: all 0.3s;
  171. border: 1px solid #e0e0e0;
  172. display: flex;
  173. align-items: center;
  174. cursor: pointer; /* 添加指针样式 */
  175. }
  176. .option-item:active {
  177. transform: scale(0.98); /* 点击时轻微缩小效果 */
  178. opacity: 0.9;
  179. }
  180. .option-selected {
  181. background-color: #e6f7ff;
  182. border: 1px solid #1890ff;
  183. }
  184. /* 添加选中后的动画效果 */
  185. @keyframes selectedPulse {
  186. 0% { box-shadow: 0 0 0 0 rgba(24, 144, 255, 0.4);
  187. }
  188. 70% { box-shadow: 0 0 0 10px rgba(24, 144, 255, 0);
  189. }
  190. 100% { box-shadow: 0 0 0 0 rgba(24, 144, 255, 0);
  191. }
  192. }
  193. .option-selected {
  194. animation: selectedPulse 1.5s ease-out;
  195. }
  196. .option-correct {
  197. background-color: #d4f7d4;
  198. border: 1px solid #52c41a;
  199. }
  200. .option-wrong {
  201. background-color: #fff1f0;
  202. border: 1px solid #ff4d4f;
  203. }
  204. .option-text {
  205. color: #333;
  206. }
  207. .timer-container {
  208. text-align: right;
  209. margin: 20rpx 0;
  210. }
  211. .timer-text {
  212. font-size: 24rpx;
  213. color: #666;
  214. background-color: #f0f0f0;
  215. padding: 6rpx 12rpx;
  216. border-radius: 6rpx;
  217. }
  218. .bottom-button-container {
  219. position: fixed;
  220. bottom: 50px;
  221. left: 5%;
  222. right: 0;
  223. padding: 20rpx;
  224. display: flex;
  225. justify-content: center;
  226. z-index: 10;
  227. }
  228. .bottom-button-wrapper {
  229. display: flex;
  230. width: 100%;
  231. justify-content: space-between;
  232. align-items: center;
  233. }
  234. .timer-display {
  235. font-size: 28rpx;
  236. color: #666;
  237. padding: 10rpx 20rpx;
  238. border-radius: 6rpx;
  239. }
  240. .next-button {
  241. background-color: #0039b3;
  242. color: #ffffff;
  243. border-radius: 10rpx;
  244. font-size: 30rpx;
  245. height: 80rpx;
  246. line-height: 80rpx;
  247. width: 90%;
  248. text-align: center;
  249. margin: 0;
  250. }
  251. .footer {
  252. height: 100rpx;
  253. background-color: #000000;
  254. display: flex;
  255. justify-content: space-between;
  256. align-items: center;
  257. padding: 0 30rpx;
  258. color: #ffffff;
  259. }
  260. .timer {
  261. font-size: 28rpx;
  262. }
  263. .next-step {
  264. font-size: 28rpx;
  265. }
  266. .interview-end-modal {
  267. position: fixed;
  268. top: 0;
  269. left: 0;
  270. right: 0;
  271. bottom: 0;
  272. background-color: rgba(0, 0, 0, 0.5);
  273. display: flex;
  274. align-items: center;
  275. justify-content: center;
  276. z-index: 999;
  277. }
  278. .modal-content {
  279. width: 80%;
  280. background-color: #ffffff;
  281. border-radius: 20rpx;
  282. padding: 40rpx;
  283. display: flex;
  284. flex-direction: column;
  285. align-items: center;
  286. }
  287. .modal-title {
  288. font-size: 36rpx;
  289. font-weight: bold;
  290. margin-bottom: 30rpx;
  291. }
  292. .score-display {
  293. font-size: 48rpx;
  294. font-weight: bold;
  295. color: #0039b3;
  296. margin: 20rpx 0;
  297. }
  298. .modal-message {
  299. font-size: 28rpx;
  300. color: #666;
  301. text-align: center;
  302. margin-bottom: 40rpx;
  303. }
  304. .modal-buttons {
  305. display: flex;
  306. justify-content: space-between;
  307. width: 100%;
  308. margin-top: 20rpx;
  309. }
  310. .modal-button {
  311. width: 45%;
  312. }
  313. @keyframes speaking {
  314. 0% {
  315. opacity: 0.8;
  316. }
  317. 50% {
  318. opacity: 1;
  319. }
  320. 100% {
  321. opacity: 0.8;
  322. }
  323. }
  324. .speaking {
  325. animation: speaking 1.5s infinite;
  326. }
  327. .digital-avatar {
  328. display: flex;
  329. flex-direction: row;
  330. align-items: flex-start;
  331. justify-content: space-between;
  332. width: 100%;
  333. margin-bottom: 20rpx;
  334. }
  335. .message-box {
  336. width: 65%;
  337. min-height: 120rpx;
  338. background-color: #f5f5f5;
  339. border-radius: 10rpx;
  340. padding: 15rpx;
  341. margin-right: 20rpx;
  342. display: flex;
  343. align-items: center;
  344. }
  345. .message-text {
  346. font-size: 24rpx;
  347. color: #333;
  348. line-height: 1.5;
  349. }
  350. .user-avatar {
  351. width: 110px;
  352. height: 160px;
  353. border-radius: 10rpx;
  354. overflow: hidden;
  355. }
  356. .camera {
  357. width: 100%;
  358. height: 100%;
  359. border-radius: 10rpx;
  360. border: 2rpx solid #e0e0e0;
  361. }
  362. .avatar-image {
  363. width: 100%;
  364. height: 100%;
  365. border-radius: 10rpx;
  366. border: 2rpx solid #e0e0e0;
  367. }
  368. .digital-human-webview {
  369. width: 100%;
  370. height: 100%;
  371. border-radius: 10rpx;
  372. border: 2rpx solid #e0e0e0;
  373. }
  374. .interview-complete-screen {
  375. position: fixed;
  376. top: 0;
  377. left: 0;
  378. right: 0;
  379. bottom: 0;
  380. background-color: #f0f5ff;
  381. display: flex;
  382. flex-direction: column;
  383. align-items: center;
  384. justify-content: center;
  385. z-index: 1000;
  386. padding: 40rpx;
  387. }
  388. .digital-avatar-large {
  389. width: 200rpx;
  390. height: 200rpx;
  391. margin-bottom: 60rpx;
  392. }
  393. .avatar-image-large {
  394. width: 100%;
  395. height: 100%;
  396. border-radius: 30rpx;
  397. }
  398. .complete-message {
  399. font-size: 40rpx;
  400. font-weight: bold;
  401. color: #333;
  402. margin-bottom: 30rpx;
  403. }
  404. .complete-description {
  405. font-size: 28rpx;
  406. color: #666;
  407. text-align: center;
  408. margin-bottom: 80rpx;
  409. line-height: 1.5;
  410. }
  411. .complete-button {
  412. background-color: #0039b3;
  413. color: #ffffff;
  414. border-radius: 10rpx;
  415. font-size: 32rpx;
  416. padding: 20rpx 60rpx;
  417. margin-top: 40rpx;
  418. }
  419. /* 添加加载状态样式 */
  420. .loading-container {
  421. position: absolute;
  422. top: 0;
  423. left: 0;
  424. right: 0;
  425. bottom: 0;
  426. display: flex;
  427. flex-direction: column;
  428. align-items: center;
  429. justify-content: center;
  430. background-color: rgba(255, 255, 255, 0.9);
  431. z-index: 100;
  432. }
  433. .loading-text {
  434. margin-top: 20rpx;
  435. font-size: 28rpx;
  436. color: #666;
  437. }
  438. .error-container {
  439. text-align: center;
  440. }
  441. .error-message {
  442. font-size: 28rpx;
  443. color: #ff4d4f;
  444. margin-bottom: 30rpx;
  445. }
  446. .retry-button {
  447. background-color: #0039b3;
  448. color: #ffffff;
  449. border-radius: 10rpx;
  450. font-size: 28rpx;
  451. padding: 10rpx 30rpx;
  452. }
  453. .question-type {
  454. display: inline-block;
  455. /* background-color: #0039b3; */
  456. color: white;
  457. font-size: 24rpx;
  458. /* padding: 4rpx 5rpx; */
  459. border-radius: 6rpx;
  460. /* margin-right: 10rpx; */
  461. }
  462. /* 新增的开放问题样式 */
  463. .open-question-container {
  464. display: flex;
  465. flex-direction: column;
  466. width: 100%;
  467. margin-bottom: 20rpx;
  468. }
  469. .open-question-input {
  470. width: 100%;
  471. height: 300rpx;
  472. background-color: #f9f9f9;
  473. border: 1px solid #e0e0e0;
  474. border-radius: 10rpx;
  475. padding: 20rpx;
  476. font-size: 28rpx;
  477. color: #333;
  478. }
  479. .word-count {
  480. text-align: right;
  481. font-size: 24rpx;
  482. color: #999;
  483. margin-top: 10rpx;
  484. }
  485. .option-prefix {
  486. margin-right: 10rpx;
  487. font-weight: bold;
  488. color: #333;
  489. min-width: 30rpx;
  490. }
  491. /* 新增的图片显示样式 */
  492. .question-image-container {
  493. width: 100%;
  494. margin: 20rpx 0;
  495. display: flex;
  496. justify-content: center;
  497. align-items: center;
  498. }
  499. .question-image {
  500. width: 100%;
  501. max-width: 600rpx;
  502. border-radius: 10rpx;
  503. box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  504. }
  505. /* 添加滚动视图样式 */
  506. .content-scroll {
  507. flex: 1;
  508. height: calc(100vh - 200px); /* 只减去顶部相机的高度 */
  509. margin-top: 10px;
  510. }
  511. /* 添加底部空白区域,防止内容被固定按钮遮挡 */
  512. .bottom-space {
  513. height: 50rpx; /* 减小底部空白区域 */
  514. }
  515. /* 添加流式布局相关样式 */
  516. .interview-content {
  517. margin-bottom: 40rpx;
  518. padding: 20rpx;
  519. border-bottom: 1px solid #eee;
  520. }
  521. .option-disabled {
  522. opacity: 0.7;
  523. background-color: #f0f0f0;
  524. }
  525. .question-button-container {
  526. margin-top: 20rpx;
  527. display: flex;
  528. justify-content: center;
  529. }
  530. .bottom-timer-container {
  531. display: none;
  532. }
  533. /* 添加固定相机容器样式 */
  534. .fixed-camera-container {
  535. position: -webkit-sticky;
  536. position: sticky;
  537. top: 0;
  538. width: 100%;
  539. padding: 20rpx;
  540. background-color: #fff;
  541. z-index: 10;
  542. display: flex;
  543. justify-content: flex-start;
  544. border-bottom: 1px solid #eee;
  545. }
  546. .camera-warning {
  547. animation: camera-warning-flash 1s ease-in-out infinite;
  548. border: 2px solid #ff0000;
  549. }
  550. @keyframes camera-warning-flash {
  551. 0% {
  552. border-color: #ff0000;
  553. box-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
  554. }
  555. 50% {
  556. border-color: rgba(255, 0, 0, 0.3);
  557. box-shadow: 0 0 5px rgba(255, 0, 0, 0.4);
  558. }
  559. 100% {
  560. border-color: #ff0000;
  561. box-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
  562. }
  563. }
  564. .user-avatar {
  565. width: 110px;
  566. height: 160px;
  567. border-radius: 10rpx;
  568. overflow: hidden;
  569. }
  570. /* 添加继续按钮样式 */
  571. .continue-button-container {
  572. display: flex;
  573. justify-content: center;
  574. padding: 20rpx;
  575. margin-top: 20rpx;
  576. }
  577. .continue-button {
  578. background-color: #0039b3;
  579. color: #ffffff;
  580. border-radius: 10rpx;
  581. font-size: 30rpx;
  582. height: 80rpx;
  583. line-height: 80rpx;
  584. width: 90%;
  585. text-align: center;
  586. }
  587. /* 添加新的样式 */
  588. .prompt-modal {
  589. position: fixed;
  590. top: 0;
  591. left: 0;
  592. right: 0;
  593. bottom: 0;
  594. background-color: rgba(0, 0, 0, 0.5);
  595. display: flex;
  596. align-items: center;
  597. justify-content: center;
  598. z-index: 1000;
  599. }
  600. .prompt-content {
  601. width: 85%;
  602. background-color: #ffffff;
  603. border-radius: 20rpx;
  604. padding: 40rpx;
  605. display: flex;
  606. flex-direction: column;
  607. align-items: center;
  608. }
  609. .prompt-title {
  610. font-size: 36rpx;
  611. font-weight: bold;
  612. color: #333;
  613. margin-bottom: 30rpx;
  614. }
  615. .prompt-text {
  616. font-size: 28rpx;
  617. color: #666;
  618. line-height: 1.6;
  619. margin-bottom: 20rpx;
  620. text-align: justify;
  621. }
  622. .bold-text {
  623. font-weight: bold;
  624. color: #333;
  625. }
  626. .prompt-button {
  627. background-color: #0039b3;
  628. color: #ffffff;
  629. border-radius: 10rpx;
  630. font-size: 30rpx;
  631. height: 80rpx;
  632. line-height: 80rpx;
  633. width: 60%;
  634. text-align: center;
  635. margin-top: 30rpx;
  636. }
  637. .custom-navbar {
  638. position: fixed;
  639. top: 0;
  640. left: 0;
  641. right: 0;
  642. height: 44px;
  643. background-color: #ffffff;
  644. display: flex;
  645. align-items: center;
  646. justify-content: center;
  647. z-index: 999;
  648. }
  649. .navbar-title {
  650. font-size: 16px;
  651. font-weight: bold;
  652. }
  653. .content {
  654. margin-top: 44px;
  655. padding-top: var(--status-bar-height);
  656. }