identity-verify.wxss 14 KB

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