.identity-verify-container.data-v-464e78c6 { padding: 0; max-width: 100%; margin: 0 auto; height: 100vh; display: flex; flex-direction: column; background-color: #f5f5f5; } .digital-human-container.data-v-464e78c6 { position: relative; width: 100%; height: 100vh; overflow: hidden; background-color: #f0f0f0; } .digital-human-video.data-v-464e78c6 { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } /* 用户摄像头容器样式 */ .user-camera-container.data-v-464e78c6 { position: absolute; top: 20px; right: 20px; width: 100px; height: 150px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 20; border: 1px solid #fff; } /* 用户摄像头视频样式 */ .user-camera-video.data-v-464e78c6 { width: 100%; height: 100%; object-fit: cover; background-color: #333; } .video-player.data-v-464e78c6 { width: 100%; height: 100%; object-fit: cover; outline: none; /* 移除视频获得焦点时的轮廓 */ -webkit-tap-highlight-color: transparent; /* 移除移动设备上的点击高亮 */ } /* 隐藏视频控制条 */ video.data-v-464e78c6::-webkit-media-controls { display: none !important; } video.data-v-464e78c6::-webkit-media-controls-enclosure { display: none !important; } video.data-v-464e78c6::-webkit-media-controls-panel { display: none !important; } video.data-v-464e78c6::-webkit-media-controls-play-button { display: none !important; } video.data-v-464e78c6::-webkit-media-controls-timeline { display: none !important; } video.data-v-464e78c6::-webkit-media-controls-current-time-display { display: none !important; } video.data-v-464e78c6::-webkit-media-controls-time-remaining-display { display: none !important; } video.data-v-464e78c6::-webkit-media-controls-mute-button { display: none !important; } video.data-v-464e78c6::-webkit-media-controls-volume-slider { display: none !important; } video.data-v-464e78c6::-webkit-media-controls-fullscreen-button { display: none !important; } .subtitle-overlay.data-v-464e78c6 { position: absolute; bottom: 50px; left: 0; width: 100%; padding: 15px; background-color: rgba(0, 0, 0, 0.7); color: white; text-align: center; font-size: 16px; line-height: 1.5; z-index: 10; border-radius: 4px; max-width: 90%; margin: 0 auto; left: 5%; right: 5%; } .control-panel.data-v-464e78c6 { padding: 15px; display: flex; justify-content: center; } .control-button.data-v-464e78c6 { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } .loading.data-v-464e78c6 { text-align: center; margin: 20px 0; font-size: 16px; } .response-container.data-v-464e78c6 { margin-top: 20px; padding: 0 20px; display: none; /* 默认隐藏调试信息 */ } /* 当showDebugInfo为true时显示 */ .showDebugInfo .response-container.data-v-464e78c6 { display: block; } .response-item.data-v-464e78c6 { padding: 10px; border: 1px solid #eee; border-radius: 4px; margin-bottom: 10px; background-color: #f9f9f9; } .response-content.data-v-464e78c6 { display: flex; flex-direction: column; } .answer-button-container.data-v-464e78c6 { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); z-index: 20; } .answer-button.data-v-464e78c6 { width: 120px; height: 120px; border-radius: 50%; background-color: #6c5ce7; /* 绿色背景,与图片中的颜色类似 */ color: white; font-size: 18px; border: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; cursor: pointer; animation: pulse-464e78c6 2s infinite; } @keyframes pulse-464e78c6 { 0% { transform: scale(1); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } 50% { transform: scale(1.05); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4); } 100% { transform: scale(1); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } } .stop-recording-button-container.data-v-464e78c6 { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); z-index: 20; } .stop-recording-button.data-v-464e78c6 { width: 120px; height: 120px; border-radius: 50%; background-color: #e74c3c; /* 红色背景 */ color: white; font-size: 18px; border: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; cursor: pointer; animation: pulse-464e78c6 2s infinite; } @keyframes pulse-464e78c6 { 0% { transform: scale(1); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } 50% { transform: scale(1.05); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4); } 100% { transform: scale(1); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } } /* 录制中的指示器 */ .recording-indicator.data-v-464e78c6 { position: absolute; top: 20px; left: 20px; display: flex; align-items: center; background-color: rgba(0, 0, 0, 0.6); padding: 5px 10px; border-radius: 15px; z-index: 20; } .recording-dot.data-v-464e78c6 { width: 12px; height: 12px; background-color: #e74c3c; border-radius: 50%; margin-right: 8px; animation: blink-464e78c6 1s infinite; } .recording-text.data-v-464e78c6 { color: white; font-size: 14px; } @keyframes blink-464e78c6 { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } } .start-recording-button-container.data-v-464e78c6 { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); z-index: 20; } .start-recording-button.data-v-464e78c6 { width: 120px; height: 120px; border-radius: 50%; background-color: #6c5ce7; /* 与开始面试按钮颜色保持一致 */ color: white; font-size: 18px; border: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; cursor: pointer; animation: pulse-464e78c6 2s infinite; /* 使用相同的动画 */ } /* 可以删除pulse-green动画,直接使用与开始面试按钮相同的pulse动画 */ .retry-button-container.data-v-464e78c6 { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); z-index: 20; } .retry-button.data-v-464e78c6 { padding: 10px 20px; background-color: #3498db; /* 蓝色背景 */ color: white; font-size: 16px; border: none; border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); cursor: pointer; } .retry-button.data-v-464e78c6:hover { background-color: #2980b9; }