identity-verify.wxss 14 KB

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