.subtitle-container.data-v-464e78c6 { position: fixed; bottom: 20%; left: 0; right: 0; display: flex; justify-content: center; align-items: center; z-index: 1000; } .subtitle-text.data-v-464e78c6 { background-color: rgba(0, 0, 0, 0.7); color: white; padding: 10px 20px; border-radius: 5px; font-size: 16px; max-width: 80%; text-align: center; animation: fadeIn-464e78c6 0.5s ease-in-out; } @keyframes fadeIn-464e78c6 { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .identity-verify-container.data-v-464e78c6 { padding: 0; max-width: 100%; margin: 0 auto; height: 100vh; display: flex; flex-direction: column; background-color: #f5f5f5; transition: all 0.3s ease; position: relative; } .page-warning.data-v-464e78c6 { animation: page-warning-flash-464e78c6 1s ease-in-out infinite; } @keyframes page-warning-flash-464e78c6 { 0% { background-color: rgba(255, 0, 0, 0.2); box-shadow: 0 0 20px rgba(255, 0, 0, 0.3); } 50% { background-color: rgba(255, 0, 0, 0.1); box-shadow: 0 0 10px rgba(255, 0, 0, 0.2); } 100% { background-color: rgba(255, 0, 0, 0.2); box-shadow: 0 0 20px rgba(255, 0, 0, 0.3); } } .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: 50px; right: 5px; width: 110px; height: 160px; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); z-index: 20; transition: all 0.3s ease; } .camera-warning.data-v-464e78c6 { animation: camera-warning-flash-464e78c6 1s ease-in-out infinite; border: 4px solid #ff0000; } @keyframes camera-warning-flash-464e78c6 { 0% { border-color: #ff0000; box-shadow: 0 0 15px rgba(255, 0, 0, 0.8); } 50% { border-color: rgba(255, 0, 0, 0.3); box-shadow: 0 0 5px rgba(255, 0, 0, 0.4); } 100% { border-color: #ff0000; box-shadow: 0 0 15px rgba(255, 0, 0, 0.8); } } /* 用户摄像头视频样式 */ .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: 180px; left: 10%; width: 80%; padding: 0; /* 移除内边距,由内部元素控制 */ border-radius: 15px; background-color: rgba(255, 255, 255, 0.9); color: #333; text-align: left; font-size: 16px; line-height: 1.5; z-index: 10; margin: 0 auto; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; overflow: hidden; /* 确保圆角效果 */ } /* 添加题号header样式 */ .subtitle-header.data-v-464e78c6 { /* background-color: rgba(0, 0, 0, 0.05); */ padding: 8px 20px; /* border-bottom: 1px solid rgba(0, 0, 0, 0.05); */ } .question-tag.data-v-464e78c6 { font-size: 14px; color: #666; font-weight: 500; } /* 调整主字幕样式 */ .subtitle-main.data-v-464e78c6 { padding: 15px 20px ; font-weight: 500; } /* 移除之前的题号显示器 */ .question-counter.data-v-464e78c6 { display: none; } .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; bottom: 50px; /* 将按钮放在底部而不是75%的位置 */ left: 50%; transform: translateX(-50%); /* 只在X轴上平移,保持水平居中 */ z-index: 20; } /* 修改回答按钮样式 */ .answer-button.data-v-464e78c6 { width: 120px; height: 40px; /* 改为矩形按钮 */ border-radius: 20px; /* 圆角矩形 */ background-color: #ffffff; /* 白色背景 */ color: #333; /* 深色文字 */ font-size: 16px; border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); display: flex; justify-content: center; align-items: center; cursor: pointer; animation: none; /* 移除脉动动画 */ } .stop-recording-button-container.data-v-464e78c6 { position: absolute; bottom: 50px; /* 统一与其他按钮的位置 */ left: 50%; transform: translateX(-50%); z-index: 20; } .stop-recording-button.data-v-464e78c6 { width: 120px; height: 40px; /* 改为矩形按钮 */ border-radius: 20px; /* 圆角矩形 */ background-color: #0039b3; /* 白色背景 */ color: #fff;/* 深色文字 */ font-size: 16px; border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); display: flex; justify-content: center; align-items: center; cursor: pointer; animation: none; /* 移除脉动动画 */ } .recording-indicator.data-v-464e78c6 { position: fixed; bottom: 20px; left: 17%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; /* background-color: rgba(0, 0, 0, 0.6); */ padding: 10px 15px; border-radius: 10px; z-index: 100; } .timer-text.data-v-464e78c6 { color: #05dc8b; font-size: 14px; margin-top: 5px; } .start-recording-button-container.data-v-464e78c6 { position: absolute; bottom: 50px; /* 统一与其他按钮的位置 */ left: 50%; transform: translateX(-50%); z-index: 101; } .start-recording-button.data-v-464e78c6 { width: 120px; height: 40px; /* 改为矩形按钮 */ border-radius: 20px; /* 圆角矩形 */ background-color: #ffffff; /* 白色背景 */ color: #333; /* 深色文字 */ font-size: 16px; border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); display: flex; justify-content: center; align-items: center; cursor: pointer; animation: none; /* 移除脉动动画 */ } .retry-button-container.data-v-464e78c6 { position: absolute; bottom: 30px; /* 统一与其他按钮的位置 */ left: 50%; transform: translateX(-50%); z-index: 20; } .retry-button.data-v-464e78c6 { padding: 10px 20px; background-color: #ffffff; /* 白色背景 */ color: #333; /* 深色文字 */ font-size: 16px; border: none; border-radius: 20px; /* 圆角矩形 */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); cursor: pointer; } .retry-button.data-v-464e78c6:hover { background-color: #2980b9; } /* 录制时长显示 */ .recording-timer.data-v-464e78c6 { position: absolute; top: 20px; left: 130px; /* 放在录制指示器旁边 */ background-color: rgba(0, 0, 0, 0.6); padding: 5px 10px; border-radius: 15px; z-index: 20; display: flex; flex-direction: column; } .timer-text.data-v-464e78c6 { color: #000; font-size: 14px; font-family: monospace; /* 使用等宽字体,使时间显示更稳定 */ } .remaining-time.data-v-464e78c6 { color: white; font-size: 12px; margin-top: 2px; } .remaining-time.warning.data-v-464e78c6 { color: #ff6b6b; /* 剩余时间少时显示红色 */ animation: blink 1s infinite; /* 使用闪烁动画提醒用户 */ } /* 添加上传状态指示器 */ .upload-status-indicator.data-v-464e78c6 { position: absolute; top: 20px; left: 130px; /* 放在录制指示器旁边 */ background-color: rgba(0, 0, 0, 0.6); padding: 5px 10px; border-radius: 15px; z-index: 20; } .upload-status-content.data-v-464e78c6 { display: flex; align-items: center; } .upload-status-icon.data-v-464e78c6 { width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; } .upload-status-text.data-v-464e78c6 { color: white; font-size: 14px; } .uploading.data-v-464e78c6 { background-color: #e74c3c; } /* 添加倒计时蒙层样式 */ .countdown-overlay.data-v-464e78c6 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 100; display: flex; justify-content: center; align-items: center; } .countdown-content.data-v-464e78c6 { display: flex; flex-direction: column; align-items: center; } .countdown-number.data-v-464e78c6 { font-size: 80px; color: #ffffff; font-weight: bold; margin-bottom: 20px; } .countdown-text.data-v-464e78c6 { font-size: 24px; color: #ffffff; } /* 添加GIF播放器样式 */ .gif-player.data-v-464e78c6 { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 5; /* 确保GIF在视频上方但在字幕和按钮下方 */ } /* 重新录制按钮容器样式 */ .rerecord-button-container.data-v-464e78c6 { position: absolute; bottom: 50px; /* 统一与其他按钮的位置 */ left: 50%; transform: translateX(-50%); z-index: 20; } /* 重新录制按钮样式 */ .rerecord-button.data-v-464e78c6 { width: 120px; height: 40px; border-radius: 20px; background-color: #ffffff; color: #333; font-size: 16px; border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); display: flex; justify-content: center; align-items: center; cursor: pointer; } .rerecord-button.data-v-464e78c6:hover { background-color: #f0f0f0; } /* 添加视频蒙层样式 */ .video-overlay.data-v-464e78c6 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; /* 完全透明 */ z-index: 6; /* 确保在视频之上,但在按钮和字幕之下 */ pointer-events: auto; /* 允许捕获点击事件 */ } /* 调整其他元素的z-index以确保正确的层级关系 */ .subtitle-overlay.data-v-464e78c6 { /* ... 现有样式 ... */ z-index: 10; /* 确保字幕在蒙层之上 */ } .answer-button-container.data-v-464e78c6, .stop-recording-button-container.data-v-464e78c6, .start-recording-button-container.data-v-464e78c6, .retry-button-container.data-v-464e78c6, .rerecord-button-container.data-v-464e78c6 { /* ... 现有样式 ... */ z-index: 999; /* 确保按钮在蒙层之上 */ } .user-camera-container.data-v-464e78c6 { /* ... 现有样式 ... */ z-index: 20; /* 确保摄像头窗口在蒙层之上 */ } .recording-indicator.data-v-464e78c6 { /* ... 现有样式 ... */ z-index: 20; /* 确保录制指示器在蒙层之上 */ } /* 环形进度条样式 */ .circle-progress-container.data-v-464e78c6 { width: 60px; height: 60px; position: relative; margin: 0 auto 10px; } .circle-progress.data-v-464e78c6 { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; transform: rotate(-90deg); /* 从顶部开始进度 */ } .circle-progress-inner.data-v-464e78c6 { width: 80%; height: 80%; background-color: rgba(255, 255, 255); border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: rotate(90deg); /* 修正文本方向 */ } .progress-text.data-v-464e78c6 { font-size: 14px; font-weight: bold; color: #05dc8b; } /* 添加题号显示 */ .question-counter.data-v-464e78c6 { position: absolute; top: 20px; right: 130px; /* 调整位置,避免与用户摄像头重叠 */ background-color: rgba(255, 255, 255, 0.9); padding: 6px 12px; border-radius: 15px; z-index: 20; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); display: flex; align-items: center; } .question-number.data-v-464e78c6 { color: #333; font-size: 14px; font-weight: 500; } /* 追问问题容器样式 */ .followup-container.data-v-464e78c6 { width: 100%; } /* 追问分隔线 */ .followup-divider.data-v-464e78c6 { height: 1px; background-color: rgba(0, 0, 0, 0.05); margin: 0; } /* 追问内容样式 */ .followup-content.data-v-464e78c6 { padding: 12px 20px; display: flex; align-items: flex-start; gap: 8px; } /* 追问标签样式 */ .followup-label.data-v-464e78c6 { color: #fb752f; font-size: 14px; font-weight: 500; } /* 追问文本样式 */ .followup-text.data-v-464e78c6 { color: #333; font-size: 14px; line-height: 1.5; flex: 1; } /* 调整主字幕样式,确保有足够空间 */ .subtitle-main.data-v-464e78c6 { padding:15px 20px ; font-weight: 500; border-bottom: none; /* 移除底部边框,由追问分隔线处理 */ } /* 父问题样式 */ .parent-question.data-v-464e78c6 { padding: 15px 20px; font-weight: 500; color: #333; } /* 追问容器样式调整 */ .followup-container.data-v-464e78c6 { width: 100%; /* background-color: rgba(0, 0, 0, 0.02); *//* 轻微的背景色区分 */ } /* 分隔线样式 */ .followup-divider.data-v-464e78c6 { height: 1px; background-color: rgba(0, 0, 0, 0.05); margin: 0; } /* 追问内容样式 */ .followup-content.data-v-464e78c6 { padding: 12px 20px; display: flex; align-items: flex-start; gap: 8px; } /* 追问标签样式 */ .followup-label.data-v-464e78c6 { color: #fb752f; font-size: 14px; font-weight: 500; } /* 追问文本样式 */ .followup-text.data-v-464e78c6 { color: #333; font-size: 14px; line-height: 1.5; flex: 1; }