.interview-container { height: 100vh; display: flex; flex-direction: column; } .header { padding: 40rpx; text-align: center; } .title { font-size: 36rpx; font-weight: bold; } .subtitle { font-size: 28rpx; color: #666; margin-top: 20rpx; } .camera-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 999; } .camera { width: 100%; height: 100%; } .gesture-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; pointer-events: none; z-index: 10; } .gesture-image { position: absolute; top: 0; left: 0; width: 100%; height: 90%; opacity: 0.5; /* 设置图片混合模式,使绿色更突出 */ mix-blend-mode: screen; } .camera-tip { position: absolute; top: 20rpx; display: flex; flex-direction: column; align-items: center; z-index: 11; } .guide-icon { width:160rpx; height: 200rpx; background-color: rgba(0, 0, 0, 0.3); border-radius: 20rpx; overflow: hidden; } .mp-video-player { width: 100%; height: 100%; object-fit: cover; } .tip-text { position: absolute; top:20rpx; left: 30%; color: #fff; font-size: 28rpx; margin-top: 16rpx; background-color: rgba(0, 0, 0, 0.3); padding: 8rpx 20rpx; border-radius: 30rpx; } .capture-btn { position: absolute; bottom: 100rpx; left: 50%; transform: translateX(-50%); width: 140rpx; height: 140rpx; border-radius: 50%; background: #fff; border: 10rpx solid #0039b3; z-index: 999; } .preview-container { flex: 1; display: flex; flex-direction: column; } .preview-container image { flex: 1; width: 100%; } .preview-buttons { display: flex; padding: 20rpx; justify-content: space-around; } .btn-retake, .btn-confirm { width: 45%; height: 80rpx; line-height: 80rpx; text-align: center; border-radius: 8rpx; } .btn-retake { background: #f5f5f5; color: #333; } .btn-confirm { background: #003399; color: #fff; } .progress-bar { display: flex; padding: 20rpx; background: #fff; } .step-item { flex: 1; text-align: center; font-size: 24rpx; color: #999; position: relative; padding: 20rpx 0; } .step-item.active { color: #003399; font-weight: bold; } .step-item.completed { color: #67c23a; } .video-loading, .video-error { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); } .video-loading text, .video-error text { color: #fff; font-size: 24rpx; } .video-error text { color: #ff4d4f; }