identity-verify.wxss 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656
  1. .subtitle-container.data-v-464e78c6 {
  2. position: fixed;
  3. bottom: 20%;
  4. left: 0;
  5. right: 0;
  6. display: flex;
  7. justify-content: center;
  8. align-items: center;
  9. z-index: 1000;
  10. }
  11. .subtitle-text.data-v-464e78c6 {
  12. background-color: rgba(0, 0, 0, 0.7);
  13. color: white;
  14. padding: 10px 20px;
  15. border-radius: 5px;
  16. font-size: 16px;
  17. max-width: 80%;
  18. text-align: center;
  19. animation: fadeIn-464e78c6 0.5s ease-in-out;
  20. }
  21. @keyframes fadeIn-464e78c6 {
  22. from {
  23. opacity: 0;
  24. transform: translateY(20px);
  25. }
  26. to {
  27. opacity: 1;
  28. transform: translateY(0);
  29. }
  30. }
  31. .identity-verify-container.data-v-464e78c6 {
  32. padding: 0;
  33. max-width: 100%;
  34. margin: 0 auto;
  35. height: 100vh;
  36. display: flex;
  37. flex-direction: column;
  38. background-color: #f5f5f5;
  39. transition: all 0.3s ease;
  40. position: relative;
  41. }
  42. .page-warning.data-v-464e78c6 {
  43. animation: page-warning-flash-464e78c6 1s ease-in-out infinite;
  44. }
  45. @keyframes page-warning-flash-464e78c6 {
  46. 0% {
  47. background-color: rgba(255, 0, 0, 0.2);
  48. box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
  49. }
  50. 50% {
  51. background-color: rgba(255, 0, 0, 0.1);
  52. box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
  53. }
  54. 100% {
  55. background-color: rgba(255, 0, 0, 0.2);
  56. box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
  57. }
  58. }
  59. .digital-human-container.data-v-464e78c6 {
  60. position: relative;
  61. width: 100%;
  62. height: 100vh;
  63. overflow: hidden;
  64. background-color: #f0f0f0;
  65. }
  66. .digital-human-video.data-v-464e78c6 {
  67. width: 100%;
  68. height: 100%;
  69. margin-top: 32px;
  70. display: flex;
  71. justify-content: center;
  72. align-items: center;
  73. }
  74. /* 用户摄像头容器样式 */
  75. .user-camera-container.data-v-464e78c6 {
  76. position: absolute;
  77. top: 100px;
  78. right: 5px;
  79. width: 110px;
  80. height: 160px;
  81. border-radius: 4px;
  82. overflow: hidden;
  83. box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  84. z-index: 20;
  85. transition: all 0.3s ease;
  86. }
  87. .camera-warning.data-v-464e78c6 {
  88. animation: camera-warning-flash-464e78c6 1s ease-in-out infinite;
  89. border: 4px solid #ff0000;
  90. }
  91. @keyframes camera-warning-flash-464e78c6 {
  92. 0% {
  93. border-color: #ff0000;
  94. box-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
  95. }
  96. 50% {
  97. border-color: rgba(255, 0, 0, 0.3);
  98. box-shadow: 0 0 5px rgba(255, 0, 0, 0.4);
  99. }
  100. 100% {
  101. border-color: #ff0000;
  102. box-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
  103. }
  104. }
  105. /* 用户摄像头视频样式 */
  106. .user-camera-video.data-v-464e78c6 {
  107. width: 100%;
  108. height: 100%;
  109. object-fit: cover;
  110. background-color: #333;
  111. }
  112. .video-player.data-v-464e78c6 {
  113. width: 100%;
  114. height: 100%;
  115. object-fit: cover;
  116. outline: none; /* 移除视频获得焦点时的轮廓 */
  117. -webkit-tap-highlight-color: transparent; /* 移除移动设备上的点击高亮 */
  118. }
  119. /* 隐藏视频控制条 */
  120. video.data-v-464e78c6::-webkit-media-controls {
  121. display: none !important;
  122. }
  123. video.data-v-464e78c6::-webkit-media-controls-enclosure {
  124. display: none !important;
  125. }
  126. video.data-v-464e78c6::-webkit-media-controls-panel {
  127. display: none !important;
  128. }
  129. video.data-v-464e78c6::-webkit-media-controls-play-button {
  130. display: none !important;
  131. }
  132. video.data-v-464e78c6::-webkit-media-controls-timeline {
  133. display: none !important;
  134. }
  135. video.data-v-464e78c6::-webkit-media-controls-current-time-display {
  136. display: none !important;
  137. }
  138. video.data-v-464e78c6::-webkit-media-controls-time-remaining-display {
  139. display: none !important;
  140. }
  141. video.data-v-464e78c6::-webkit-media-controls-mute-button {
  142. display: none !important;
  143. }
  144. video.data-v-464e78c6::-webkit-media-controls-volume-slider {
  145. display: none !important;
  146. }
  147. video.data-v-464e78c6::-webkit-media-controls-fullscreen-button {
  148. display: none !important;
  149. }
  150. /* 修改字幕覆盖层样式,使其与图片中的样式一致 */
  151. .subtitle-overlay.data-v-464e78c6 {
  152. position: absolute;
  153. bottom: 180px;
  154. left: 10%;
  155. width: 80%;
  156. padding: 0; /* 移除内边距,由内部元素控制 */
  157. border-radius: 15px;
  158. background-color: rgba(255, 255, 255, 0.9);
  159. color: #333;
  160. text-align: left;
  161. font-size: 16px;
  162. line-height: 1.5;
  163. z-index: 10;
  164. margin: 0 auto;
  165. box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  166. display: flex;
  167. flex-direction: column;
  168. overflow: hidden; /* 确保圆角效果 */
  169. }
  170. /* 添加题号header样式 */
  171. .subtitle-header.data-v-464e78c6 {
  172. /* background-color: rgba(0, 0, 0, 0.05); */
  173. padding: 8px 20px;
  174. /* border-bottom: 1px solid rgba(0, 0, 0, 0.05); */
  175. }
  176. .question-tag.data-v-464e78c6 {
  177. font-size: 14px;
  178. color: #666;
  179. font-weight: 500;
  180. }
  181. /* 调整主字幕样式 */
  182. .subtitle-main.data-v-464e78c6 {
  183. padding: 15px 20px ;
  184. font-weight: 500;
  185. }
  186. /* 移除之前的题号显示器 */
  187. .question-counter.data-v-464e78c6 {
  188. display: none;
  189. }
  190. .control-panel.data-v-464e78c6 {
  191. padding: 15px;
  192. display: flex;
  193. justify-content: center;
  194. }
  195. .control-button.data-v-464e78c6 {
  196. padding: 10px 20px;
  197. background-color: #4CAF50;
  198. color: white;
  199. border: none;
  200. border-radius: 4px;
  201. cursor: pointer;
  202. }
  203. .loading.data-v-464e78c6 {
  204. text-align: center;
  205. margin: 20px 0;
  206. font-size: 16px;
  207. }
  208. .response-container.data-v-464e78c6 {
  209. margin-top: 20px;
  210. padding: 0 20px;
  211. display: none; /* 默认隐藏调试信息 */
  212. }
  213. /* 当showDebugInfo为true时显示 */
  214. .showDebugInfo .response-container.data-v-464e78c6 {
  215. display: block;
  216. }
  217. .response-item.data-v-464e78c6 {
  218. padding: 10px;
  219. border: 1px solid #eee;
  220. border-radius: 4px;
  221. margin-bottom: 10px;
  222. background-color: #f9f9f9;
  223. }
  224. .response-content.data-v-464e78c6 {
  225. display: flex;
  226. flex-direction: column;
  227. }
  228. .answer-button-container.data-v-464e78c6 {
  229. position: absolute;
  230. bottom: 50px; /* 将按钮放在底部而不是75%的位置 */
  231. left: 50%;
  232. transform: translateX(-50%); /* 只在X轴上平移,保持水平居中 */
  233. z-index: 20;
  234. }
  235. /* 修改回答按钮样式 */
  236. .answer-button.data-v-464e78c6 {
  237. width: 120px;
  238. height: 40px; /* 改为矩形按钮 */
  239. border-radius: 20px; /* 圆角矩形 */
  240. background-color: #ffffff; /* 白色背景 */
  241. color: #333; /* 深色文字 */
  242. font-size: 16px;
  243. border: none;
  244. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  245. display: flex;
  246. justify-content: center;
  247. align-items: center;
  248. cursor: pointer;
  249. animation: none; /* 移除脉动动画 */
  250. }
  251. .stop-recording-button-container.data-v-464e78c6 {
  252. position: absolute;
  253. bottom: 50px; /* 统一与其他按钮的位置 */
  254. left: 50%;
  255. transform: translateX(-50%);
  256. z-index: 20;
  257. }
  258. .stop-recording-button.data-v-464e78c6 {
  259. width: 120px;
  260. height: 40px; /* 改为矩形按钮 */
  261. border-radius: 20px; /* 圆角矩形 */
  262. background-color: #0039b3; /* 白色背景 */
  263. color: #fff;/* 深色文字 */
  264. font-size: 16px;
  265. border: none;
  266. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  267. display: flex;
  268. justify-content: center;
  269. align-items: center;
  270. cursor: pointer;
  271. animation: none; /* 移除脉动动画 */
  272. }
  273. .recording-indicator.data-v-464e78c6 {
  274. position: fixed;
  275. bottom: 20px;
  276. left: 17%;
  277. transform: translateX(-50%);
  278. display: flex;
  279. flex-direction: column;
  280. align-items: center;
  281. /* background-color: rgba(0, 0, 0, 0.6); */
  282. padding: 10px 15px;
  283. border-radius: 10px;
  284. z-index: 100;
  285. }
  286. .timer-text.data-v-464e78c6 {
  287. color: #05dc8b;
  288. font-size: 14px;
  289. margin-top: 5px;
  290. }
  291. .start-recording-button-container.data-v-464e78c6 {
  292. position: absolute;
  293. bottom: 50px; /* 统一与其他按钮的位置 */
  294. left: 50%;
  295. transform: translateX(-50%);
  296. z-index: 101;
  297. }
  298. .start-recording-button.data-v-464e78c6 {
  299. width: 120px;
  300. height: 40px; /* 改为矩形按钮 */
  301. border-radius: 20px; /* 圆角矩形 */
  302. background-color: #ffffff; /* 白色背景 */
  303. color: #333; /* 深色文字 */
  304. font-size: 16px;
  305. border: none;
  306. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  307. display: flex;
  308. justify-content: center;
  309. align-items: center;
  310. cursor: pointer;
  311. animation: none; /* 移除脉动动画 */
  312. }
  313. .retry-button-container.data-v-464e78c6 {
  314. position: absolute;
  315. bottom: 30px; /* 统一与其他按钮的位置 */
  316. left: 50%;
  317. transform: translateX(-50%);
  318. z-index: 20;
  319. }
  320. .retry-button.data-v-464e78c6 {
  321. padding: 10px 20px;
  322. background-color: #ffffff; /* 白色背景 */
  323. color: #333; /* 深色文字 */
  324. font-size: 16px;
  325. border: none;
  326. border-radius: 20px; /* 圆角矩形 */
  327. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  328. cursor: pointer;
  329. }
  330. .retry-button.data-v-464e78c6:hover {
  331. background-color: #2980b9;
  332. }
  333. /* 录制时长显示 */
  334. .recording-timer.data-v-464e78c6 {
  335. position: absolute;
  336. top: 20px;
  337. left: 130px; /* 放在录制指示器旁边 */
  338. background-color: rgba(0, 0, 0, 0.6);
  339. padding: 5px 10px;
  340. border-radius: 15px;
  341. z-index: 20;
  342. display: flex;
  343. flex-direction: column;
  344. }
  345. .timer-text.data-v-464e78c6 {
  346. color: #000;
  347. font-size: 14px;
  348. font-family: monospace; /* 使用等宽字体,使时间显示更稳定 */
  349. }
  350. .remaining-time.data-v-464e78c6 {
  351. color: white;
  352. font-size: 12px;
  353. margin-top: 2px;
  354. }
  355. .remaining-time.warning.data-v-464e78c6 {
  356. color: #ff6b6b; /* 剩余时间少时显示红色 */
  357. animation: blink 1s infinite; /* 使用闪烁动画提醒用户 */
  358. }
  359. /* 添加上传状态指示器 */
  360. .upload-status-indicator.data-v-464e78c6 {
  361. position: absolute;
  362. top: 20px;
  363. left: 130px; /* 放在录制指示器旁边 */
  364. background-color: rgba(0, 0, 0, 0.6);
  365. padding: 5px 10px;
  366. border-radius: 15px;
  367. z-index: 20;
  368. }
  369. .upload-status-content.data-v-464e78c6 {
  370. display: flex;
  371. align-items: center;
  372. }
  373. .upload-status-icon.data-v-464e78c6 {
  374. width: 12px;
  375. height: 12px;
  376. border-radius: 50%;
  377. margin-right: 8px;
  378. }
  379. .upload-status-text.data-v-464e78c6 {
  380. color: white;
  381. font-size: 14px;
  382. }
  383. .uploading.data-v-464e78c6 {
  384. background-color: #e74c3c;
  385. }
  386. /* 添加倒计时蒙层样式 */
  387. .countdown-overlay.data-v-464e78c6 {
  388. position: fixed;
  389. top: 0;
  390. left: 0;
  391. width: 100%;
  392. height: 100%;
  393. background-color: rgba(0, 0, 0, 0.7);
  394. z-index: 100;
  395. display: flex;
  396. justify-content: center;
  397. align-items: center;
  398. }
  399. .countdown-content.data-v-464e78c6 {
  400. display: flex;
  401. flex-direction: column;
  402. align-items: center;
  403. }
  404. .countdown-number.data-v-464e78c6 {
  405. font-size: 80px;
  406. color: #ffffff;
  407. font-weight: bold;
  408. margin-bottom: 20px;
  409. }
  410. .countdown-text.data-v-464e78c6 {
  411. font-size: 24px;
  412. color: #ffffff;
  413. }
  414. /* 添加GIF播放器样式 */
  415. .gif-player.data-v-464e78c6 {
  416. width: 100%;
  417. height: 100%;
  418. object-fit: cover;
  419. position: absolute;
  420. top: 0;
  421. left: 0;
  422. z-index: 5; /* 确保GIF在视频上方但在字幕和按钮下方 */
  423. }
  424. /* 重新录制按钮容器样式 */
  425. .rerecord-button-container.data-v-464e78c6 {
  426. position: absolute;
  427. bottom: 50px; /* 统一与其他按钮的位置 */
  428. left: 50%;
  429. transform: translateX(-50%);
  430. z-index: 20;
  431. }
  432. /* 重新录制按钮样式 */
  433. .rerecord-button.data-v-464e78c6 {
  434. width: 120px;
  435. height: 40px;
  436. border-radius: 20px;
  437. background-color: #ffffff;
  438. color: #333;
  439. font-size: 16px;
  440. border: none;
  441. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  442. display: flex;
  443. justify-content: center;
  444. align-items: center;
  445. cursor: pointer;
  446. }
  447. .rerecord-button.data-v-464e78c6:hover {
  448. background-color: #f0f0f0;
  449. }
  450. /* 添加视频蒙层样式 */
  451. .video-overlay.data-v-464e78c6 {
  452. position: absolute;
  453. top: 0;
  454. left: 0;
  455. width: 100%;
  456. height: 100%;
  457. background-color: transparent; /* 完全透明 */
  458. z-index: 6; /* 确保在视频之上,但在按钮和字幕之下 */
  459. pointer-events: auto; /* 允许捕获点击事件 */
  460. }
  461. /* 调整其他元素的z-index以确保正确的层级关系 */
  462. .subtitle-overlay.data-v-464e78c6 {
  463. /* ... 现有样式 ... */
  464. z-index: 10; /* 确保字幕在蒙层之上 */
  465. }
  466. .answer-button-container.data-v-464e78c6,
  467. .stop-recording-button-container.data-v-464e78c6,
  468. .start-recording-button-container.data-v-464e78c6,
  469. .retry-button-container.data-v-464e78c6,
  470. .rerecord-button-container.data-v-464e78c6 {
  471. /* ... 现有样式 ... */
  472. z-index: 999; /* 确保按钮在蒙层之上 */
  473. }
  474. .user-camera-container.data-v-464e78c6 {
  475. /* ... 现有样式 ... */
  476. z-index: 20; /* 确保摄像头窗口在蒙层之上 */
  477. }
  478. .recording-indicator.data-v-464e78c6 {
  479. /* ... 现有样式 ... */
  480. z-index: 20; /* 确保录制指示器在蒙层之上 */
  481. }
  482. /* 环形进度条样式 */
  483. .circle-progress-container.data-v-464e78c6 {
  484. width: 60px;
  485. height: 60px;
  486. position: relative;
  487. margin: 0 auto 10px;
  488. }
  489. .circle-progress.data-v-464e78c6 {
  490. width: 100%;
  491. height: 100%;
  492. border-radius: 50%;
  493. display: flex;
  494. align-items: center;
  495. justify-content: center;
  496. position: relative;
  497. transform: rotate(-90deg); /* 从顶部开始进度 */
  498. }
  499. .circle-progress-inner.data-v-464e78c6 {
  500. width: 80%;
  501. height: 80%;
  502. background-color: rgba(255, 255, 255);
  503. border-radius: 50%;
  504. display: flex;
  505. align-items: center;
  506. justify-content: center;
  507. transform: rotate(90deg); /* 修正文本方向 */
  508. }
  509. .progress-text.data-v-464e78c6 {
  510. font-size: 14px;
  511. font-weight: bold;
  512. color: #05dc8b;
  513. }
  514. /* 添加题号显示 */
  515. .question-counter.data-v-464e78c6 {
  516. position: absolute;
  517. top: 20px;
  518. right: 130px; /* 调整位置,避免与用户摄像头重叠 */
  519. background-color: rgba(255, 255, 255, 0.9);
  520. padding: 6px 12px;
  521. border-radius: 15px;
  522. z-index: 20;
  523. box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  524. display: flex;
  525. align-items: center;
  526. }
  527. .question-number.data-v-464e78c6 {
  528. color: #333;
  529. font-size: 14px;
  530. font-weight: 500;
  531. }
  532. /* 追问问题容器样式 */
  533. .followup-container.data-v-464e78c6 {
  534. width: 100%;
  535. }
  536. /* 追问分隔线 */
  537. .followup-divider.data-v-464e78c6 {
  538. height: 1px;
  539. background-color: rgba(0, 0, 0, 0.05);
  540. margin: 0;
  541. }
  542. /* 追问内容样式 */
  543. .followup-content.data-v-464e78c6 {
  544. padding: 12px 20px;
  545. display: flex;
  546. align-items: flex-start;
  547. gap: 8px;
  548. }
  549. /* 追问标签样式 */
  550. .followup-label.data-v-464e78c6 {
  551. color: #fb752f;
  552. font-size: 14px;
  553. font-weight: 500;
  554. }
  555. /* 追问文本样式 */
  556. .followup-text.data-v-464e78c6 {
  557. color: #333;
  558. font-size: 14px;
  559. line-height: 1.5;
  560. flex: 1;
  561. }
  562. /* 调整主字幕样式,确保有足够空间 */
  563. .subtitle-main.data-v-464e78c6 {
  564. padding:15px 20px ;
  565. font-weight: 500;
  566. border-bottom: none; /* 移除底部边框,由追问分隔线处理 */
  567. }
  568. /* 父问题样式 */
  569. .parent-question.data-v-464e78c6 {
  570. padding: 15px 20px;
  571. font-weight: 500;
  572. color: #333;
  573. }
  574. /* 追问容器样式调整 */
  575. .followup-container.data-v-464e78c6 {
  576. width: 100%;
  577. /* background-color: rgba(0, 0, 0, 0.02); *//* 轻微的背景色区分 */
  578. }
  579. /* 分隔线样式 */
  580. .followup-divider.data-v-464e78c6 {
  581. height: 1px;
  582. background-color: rgba(0, 0, 0, 0.05);
  583. margin: 0;
  584. }
  585. /* 追问内容样式 */
  586. .followup-content.data-v-464e78c6 {
  587. padding: 12px 20px;
  588. display: flex;
  589. align-items: flex-start;
  590. gap: 8px;
  591. }
  592. /* 追问标签样式 */
  593. .followup-label.data-v-464e78c6 {
  594. color: #fb752f;
  595. font-size: 14px;
  596. font-weight: 500;
  597. }
  598. /* 追问文本样式 */
  599. .followup-text.data-v-464e78c6 {
  600. color: #333;
  601. font-size: 14px;
  602. line-height: 1.5;
  603. flex: 1;
  604. }
  605. .custom-navbar.data-v-464e78c6 {
  606. position: fixed;
  607. top: 0;
  608. left: 0;
  609. right: 0;
  610. height: 44px;
  611. background-color: #ffffff;
  612. display: flex;
  613. align-items: center;
  614. justify-content: center;
  615. z-index: 999;
  616. }
  617. .navbar-title.data-v-464e78c6 {
  618. font-size: 16px;
  619. font-weight: bold;
  620. }
  621. .content.data-v-464e78c6 {
  622. margin-top: 44px;
  623. padding-top: var(--status-bar-height);
  624. }