.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: 40rpx; } .photo-title { font-size: 36rpx; font-weight: bold; color: #333; margin-bottom: 10rpx; } .photo-subtitle { font-size: 28rpx; color: #666; } .photo-preview { position: relative; width: 100%; height: 800rpx; background-color: #000; border-radius: 20rpx; overflow: hidden; margin-bottom: 40rpx; display: flex; justify-content: center; align-items: center; } .preview-image { width: 100%; height: 100%; object-fit: cover; } .face-outline { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400rpx; height: 500rpx; border: 4rpx dashed #fff; border-radius: 200rpx; pointer-events: none; } .camera { width: 100%; height: 100%; } .capture-btn { width: 100%; height: 90rpx; line-height: 90rpx; background-color: #6c5ce7; color: #fff; border-radius: 45rpx; font-size: 32rpx; margin-top: 60rpx; } .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: #6c5ce7; border: 1px solid #6c5ce7; border-radius: 45rpx; font-size: 32rpx; } .start-btn { width: 45%; height: 90rpx; line-height: 90rpx; background-color: #6c5ce7; color: #fff; border-radius: 45rpx; font-size: 32rpx; }