identity-verify.wxss 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  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: #6c5ce7; /* 绿色背景,与图片中的颜色类似 */
  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. }