identity-verify.wxss 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  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. }
  10. .digital-human-container.data-v-464e78c6 {
  11. position: relative;
  12. width: 100%;
  13. height: 100vh;
  14. overflow: hidden;
  15. background-color: #f0f0f0;
  16. }
  17. .digital-human-video.data-v-464e78c6 {
  18. width: 100%;
  19. height: 100%;
  20. display: flex;
  21. justify-content: center;
  22. align-items: center;
  23. }
  24. /* 用户摄像头容器样式 */
  25. .user-camera-container.data-v-464e78c6 {
  26. position: absolute;
  27. top: 20px;
  28. right: 20px;
  29. width: 100px;
  30. height: 150px;
  31. border-radius: 8px;
  32. overflow: hidden;
  33. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  34. z-index: 20;
  35. border: 1px solid #fff;
  36. }
  37. /* 用户摄像头视频样式 */
  38. .user-camera-video.data-v-464e78c6 {
  39. width: 100%;
  40. height: 100%;
  41. object-fit: cover;
  42. background-color: #333;
  43. }
  44. .video-player.data-v-464e78c6 {
  45. width: 100%;
  46. height: 100%;
  47. object-fit: cover;
  48. outline: none; /* 移除视频获得焦点时的轮廓 */
  49. -webkit-tap-highlight-color: transparent; /* 移除移动设备上的点击高亮 */
  50. }
  51. /* 隐藏视频控制条 */
  52. video.data-v-464e78c6::-webkit-media-controls {
  53. display: none !important;
  54. }
  55. video.data-v-464e78c6::-webkit-media-controls-enclosure {
  56. display: none !important;
  57. }
  58. video.data-v-464e78c6::-webkit-media-controls-panel {
  59. display: none !important;
  60. }
  61. video.data-v-464e78c6::-webkit-media-controls-play-button {
  62. display: none !important;
  63. }
  64. video.data-v-464e78c6::-webkit-media-controls-timeline {
  65. display: none !important;
  66. }
  67. video.data-v-464e78c6::-webkit-media-controls-current-time-display {
  68. display: none !important;
  69. }
  70. video.data-v-464e78c6::-webkit-media-controls-time-remaining-display {
  71. display: none !important;
  72. }
  73. video.data-v-464e78c6::-webkit-media-controls-mute-button {
  74. display: none !important;
  75. }
  76. video.data-v-464e78c6::-webkit-media-controls-volume-slider {
  77. display: none !important;
  78. }
  79. video.data-v-464e78c6::-webkit-media-controls-fullscreen-button {
  80. display: none !important;
  81. }
  82. .subtitle-overlay.data-v-464e78c6 {
  83. position: absolute;
  84. bottom: 50px;
  85. left: 0;
  86. width: 100%;
  87. padding: 15px;
  88. background-color: rgba(0, 0, 0, 0.7);
  89. color: white;
  90. text-align: center;
  91. font-size: 16px;
  92. line-height: 1.5;
  93. z-index: 10;
  94. border-radius: 4px;
  95. max-width: 90%;
  96. margin: 0 auto;
  97. left: 5%;
  98. right: 5%;
  99. }
  100. .control-panel.data-v-464e78c6 {
  101. padding: 15px;
  102. display: flex;
  103. justify-content: center;
  104. }
  105. .control-button.data-v-464e78c6 {
  106. padding: 10px 20px;
  107. background-color: #4CAF50;
  108. color: white;
  109. border: none;
  110. border-radius: 4px;
  111. cursor: pointer;
  112. }
  113. .loading.data-v-464e78c6 {
  114. text-align: center;
  115. margin: 20px 0;
  116. font-size: 16px;
  117. }
  118. .response-container.data-v-464e78c6 {
  119. margin-top: 20px;
  120. padding: 0 20px;
  121. display: none; /* 默认隐藏调试信息 */
  122. }
  123. /* 当showDebugInfo为true时显示 */
  124. .showDebugInfo .response-container.data-v-464e78c6 {
  125. display: block;
  126. }
  127. .response-item.data-v-464e78c6 {
  128. padding: 10px;
  129. border: 1px solid #eee;
  130. border-radius: 4px;
  131. margin-bottom: 10px;
  132. background-color: #f9f9f9;
  133. }
  134. .response-content.data-v-464e78c6 {
  135. display: flex;
  136. flex-direction: column;
  137. }
  138. .answer-button-container.data-v-464e78c6 {
  139. position: absolute;
  140. top: 75%;
  141. left: 50%;
  142. transform: translate(-50%, -50%);
  143. z-index: 20;
  144. }
  145. .answer-button.data-v-464e78c6 {
  146. width: 120px;
  147. height: 120px;
  148. border-radius: 50%;
  149. background-color: #0039b3; /* 绿色背景,与图片中的颜色类似 */
  150. color: white;
  151. font-size: 18px;
  152. border: none;
  153. box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  154. display: flex;
  155. justify-content: center;
  156. align-items: center;
  157. cursor: pointer;
  158. animation: pulse-464e78c6 2s infinite;
  159. }
  160. @keyframes pulse-464e78c6 {
  161. 0% {
  162. transform: scale(1);
  163. box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  164. }
  165. 50% {
  166. transform: scale(1.05);
  167. box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
  168. }
  169. 100% {
  170. transform: scale(1);
  171. box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  172. }
  173. }
  174. .stop-recording-button-container.data-v-464e78c6 {
  175. position: absolute;
  176. top: 75%;
  177. left: 50%;
  178. transform: translate(-50%, -50%);
  179. z-index: 20;
  180. }
  181. .stop-recording-button.data-v-464e78c6 {
  182. width: 120px;
  183. height: 120px;
  184. border-radius: 50%;
  185. background-color: #e74c3c; /* 红色背景 */
  186. color: white;
  187. font-size: 18px;
  188. border: none;
  189. box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  190. display: flex;
  191. justify-content: center;
  192. align-items: center;
  193. cursor: pointer;
  194. animation: pulse-464e78c6 2s infinite;
  195. }
  196. @keyframes pulse-464e78c6 {
  197. 0% {
  198. transform: scale(1);
  199. box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  200. }
  201. 50% {
  202. transform: scale(1.05);
  203. box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
  204. }
  205. 100% {
  206. transform: scale(1);
  207. box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  208. }
  209. }
  210. /* 录制中的指示器 */
  211. .recording-indicator.data-v-464e78c6 {
  212. position: absolute;
  213. top: 20px;
  214. left: 20px;
  215. display: flex;
  216. align-items: center;
  217. background-color: rgba(0, 0, 0, 0.6);
  218. padding: 5px 10px;
  219. border-radius: 15px;
  220. z-index: 20;
  221. }
  222. .recording-dot.data-v-464e78c6 {
  223. width: 12px;
  224. height: 12px;
  225. background-color: #e74c3c;
  226. border-radius: 50%;
  227. margin-right: 8px;
  228. animation: blink-464e78c6 1s infinite;
  229. }
  230. .recording-text.data-v-464e78c6 {
  231. color: white;
  232. font-size: 14px;
  233. }
  234. @keyframes blink-464e78c6 {
  235. 0% { opacity: 1;
  236. }
  237. 50% { opacity: 0.3;
  238. }
  239. 100% { opacity: 1;
  240. }
  241. }
  242. .start-recording-button-container.data-v-464e78c6 {
  243. position: absolute;
  244. top: 75%;
  245. left: 50%;
  246. transform: translate(-50%, -50%);
  247. z-index: 20;
  248. }
  249. .start-recording-button.data-v-464e78c6 {
  250. width: 120px;
  251. height: 120px;
  252. border-radius: 50%;
  253. background-color: #0039b3; /* 与开始面试按钮颜色保持一致 */
  254. color: white;
  255. font-size: 18px;
  256. border: none;
  257. box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  258. display: flex;
  259. justify-content: center;
  260. align-items: center;
  261. cursor: pointer;
  262. animation: pulse-464e78c6 2s infinite; /* 使用相同的动画 */
  263. }
  264. /* 可以删除pulse-green动画,直接使用与开始面试按钮相同的pulse动画 */
  265. .retry-button-container.data-v-464e78c6 {
  266. position: absolute;
  267. bottom: 50px;
  268. left: 50%;
  269. transform: translateX(-50%);
  270. z-index: 20;
  271. }
  272. .retry-button.data-v-464e78c6 {
  273. padding: 10px 20px;
  274. background-color: #3498db; /* 蓝色背景 */
  275. color: white;
  276. font-size: 16px;
  277. border: none;
  278. border-radius: 4px;
  279. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  280. cursor: pointer;
  281. }
  282. .retry-button.data-v-464e78c6:hover {
  283. background-color: #2980b9;
  284. }
  285. /* 录制时长显示 */
  286. .recording-timer.data-v-464e78c6 {
  287. position: absolute;
  288. top: 20px;
  289. left: 130px; /* 放在录制指示器旁边 */
  290. background-color: rgba(0, 0, 0, 0.6);
  291. padding: 5px 10px;
  292. border-radius: 15px;
  293. z-index: 20;
  294. display: flex;
  295. flex-direction: column;
  296. }
  297. .timer-text.data-v-464e78c6 {
  298. color: white;
  299. font-size: 14px;
  300. font-family: monospace; /* 使用等宽字体,使时间显示更稳定 */
  301. }
  302. .remaining-time.data-v-464e78c6 {
  303. color: white;
  304. font-size: 12px;
  305. margin-top: 2px;
  306. }
  307. .remaining-time.warning.data-v-464e78c6 {
  308. color: #ff6b6b; /* 剩余时间少时显示红色 */
  309. animation: blink-464e78c6 1s infinite; /* 使用闪烁动画提醒用户 */
  310. }
  311. /* 添加上传状态指示器 */
  312. .upload-status-indicator.data-v-464e78c6 {
  313. position: absolute;
  314. top: 20px;
  315. left: 130px; /* 放在录制指示器旁边 */
  316. background-color: rgba(0, 0, 0, 0.6);
  317. padding: 5px 10px;
  318. border-radius: 15px;
  319. z-index: 20;
  320. }
  321. .upload-status-content.data-v-464e78c6 {
  322. display: flex;
  323. align-items: center;
  324. }
  325. .upload-status-icon.data-v-464e78c6 {
  326. width: 12px;
  327. height: 12px;
  328. border-radius: 50%;
  329. margin-right: 8px;
  330. }
  331. .upload-status-text.data-v-464e78c6 {
  332. color: white;
  333. font-size: 14px;
  334. }
  335. .uploading.data-v-464e78c6 {
  336. background-color: #e74c3c;
  337. }