.upload-page { padding: 32rpx; box-sizing: border-box; } /* 初始态 */ .upload-zone { margin-top: 40rpx; height: 520rpx; border: 3rpx dashed #C7C7CC; border-radius: 32rpx; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; } .upload-camera { width: 100rpx; height: 100rpx; color: #007AFF; margin-bottom: 24rpx; } .upload-title { font-size: 30rpx; color: #000; font-weight: 500; } .upload-desc { font-size: 22rpx; color: #8E8E93; margin-top: 12rpx; } .upload-tip { text-align: center; font-size: 24rpx; color: #8E8E93; margin-top: 24rpx; } /* 处理中 */ .processing { margin-top: 40rpx; display: flex; flex-direction: column; align-items: center; } .proc-img { width: 480rpx; height: 480rpx; border-radius: 32rpx; background: #F2F2F7; } .steps { display: flex; align-items: center; margin-top: 56rpx; } .step { display: flex; flex-direction: column; align-items: center; font-size: 22rpx; color: #C7C7CC; } .step-dot { width: 20rpx; height: 20rpx; border-radius: 50%; background: #E5E5EA; margin-bottom: 12rpx; } .step-dot.active { background: #007AFF; } .active-text { color: #007AFF; } .step-line { width: 100rpx; height: 2rpx; background: #E5E5EA; margin: 0 16rpx 34rpx; } .step-line.active { background: #007AFF; } .proc-text { margin-top: 56rpx; font-size: 30rpx; font-weight: 500; color: #000; } .proc-desc { font-size: 24rpx; color: #8E8E93; margin-top: 12rpx; } /* 失败态 */ .failed { margin-top: 120rpx; display: flex; flex-direction: column; align-items: center; padding: 0 40rpx; } .fail-icon { width: 120rpx; height: 120rpx; border-radius: 50%; background: #FF3B30; color: #fff; font-size: 72rpx; font-weight: 700; display: flex; align-items: center; justify-content: center; } .fail-title { margin-top: 40rpx; font-size: 32rpx; font-weight: 600; color: #000; text-align: center; } .fail-desc { font-size: 24rpx; color: #8E8E93; margin-top: 16rpx; } .fail-btns { width: 100%; margin-top: 56rpx; display: flex; flex-direction: column; gap: 24rpx; }