.photo-container { display: flex; flex-direction: column; min-height: 100vh; background-color: #f5f7fa; padding: 30rpx; opacity: 0; /* 初始设置为不可见 */ transition: opacity 0.3s ease; /* 添加过渡效果 */ } .photo-container.loaded { opacity: 1; /* 加载完成后显示 */ } .photo-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 80rpx; } .photo-title { font-size: 36rpx; font-weight: bold; color: #333; margin-bottom: 10rpx; } .photo-subtitle { font-size: 28rpx; color: #666; } /* 模式选择器样式 */ .mode-selector { display: flex; justify-content: center; margin-bottom: 30rpx; background-color: #eaeaea; border-radius: 40rpx; padding: 6rpx; width: 80%; align-self: center; } .mode-option { flex: 1; text-align: center; padding: 16rpx 0; font-size: 28rpx; color: #666; border-radius: 36rpx; transition: all 0.3s; } .mode-option.active { background-color: #0039b3; color: #fff; } .photo-preview { position: relative; width: 100%; height: 900rpx; background-color: #000; border-radius: 20rpx; overflow: hidden; margin-bottom: 40rpx; display: flex; justify-content: center; align-items: center; } .preview-image, .preview-video { width: 100%; height: 100%; object-fit: cover; } .face-outline { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500rpx; height: 600rpx; border: 4rpx dashed #fff; border-radius: 200rpx; pointer-events: none; } .camera { width: 100%; height: 100%; } /* 录制指示器 */ .recording-indicator { position: absolute; top: 30rpx; right: 30rpx; display: flex; align-items: center; background-color: rgba(0, 0, 0, 0.5); padding: 10rpx 20rpx; border-radius: 30rpx; } .recording-dot { width: 20rpx; height: 20rpx; background-color: #ff0000; border-radius: 50%; margin-right: 10rpx; animation: blink 1s infinite; } .recording-time { color: #fff; font-size: 28rpx; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } } .capture-btn-container { width: 100%; display: flex; justify-content: center; margin-top: 60rpx; } .capture-btn { width: 100%; height: 90rpx; line-height: 90rpx; background-color: #0039b3; color: #fff; border-radius: 45rpx; font-size: 32rpx; } .stop-btn { width: 100%; height: 90rpx; line-height: 90rpx; background-color: #e74c3c; color: #fff; border-radius: 45rpx; font-size: 32rpx; } .btn-group { display: flex; justify-content: space-between; width: 100%; margin-top: 60rpx; } .retry-btn { width: 45%; height: 90rpx; line-height: 90rpx; background-color: #fff; color: #0039b3; border: 1px solid #0039b3; border-radius: 45rpx; font-size: 32rpx; } .start-btn { width: 45%; height: 90rpx; line-height: 90rpx; background-color: #0039b3; color: #fff; border-radius: 45rpx; font-size: 32rpx; } /* 添加手部轮廓样式 */ .face-outline.hand-outline { width: 500rpx; height: 300rpx; border-radius: 30rpx; }