camera.wxss 11 KB

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