style(merchant): 进件页对齐商户端整体视觉规范

yeg

2026-09-14 bee3bb7586ef2b63f3ceb67b1d8657c268920957

style(merchant): 进件页对齐商户端整体视觉规范

原页面用蓝色按钮 + 暖灰底 + 纯黑文字，与商户端主色系不一致。按登录页与列表页的实际规范重做样式：导航栏改浅灰蓝底 + 深藏青标题（与 products 页一致）、主按钮改品牌橙色渐变、输入框与上传框改无边框圆角 + 柔和阴影（登录页表单规范）、文字层级改用 #313744/#9AA4B3、错误色改 #F06A66、步骤条用品牌橙高亮。模板与逻辑未改动。

 rencaika_merchant/pages/merchant-onboarding/merchant-onboarding.uvue

@@ -265,45 +265,45 @@
</script>

<style>
    page { background-color: #F5F5F5; }
    .page { display: flex; flex: 1; width: 100%; height: 100vh; flex-direction: column; overflow: hidden; background-color: #F5F5F5; }
    .navigation-bar { display: flex; height: 176rpx; padding: 70rpx 32rpx 0; flex: none; flex-direction: row; align-items: center; position: relative; background-color: #BDBDBD; box-sizing: border-box; }
    .back-button { display: flex; width: 64rpx; height: 64rpx; justify-content: center; align-items: center; position: absolute; left: 30rpx; top: 90rpx; z-index: 2; }
    .back-icon { width: 35rpx; height: 35rpx; }
    .page-title { width: 100%; color: #FFFFFF; font-size: 30rpx; line-height: 42rpx; text-align: center; font-weight: 700; }
    .step-bar { display: flex; height: 92rpx; padding: 12rpx 32rpx 0; flex: none; flex-direction: row; align-items: flex-start; background-color: #FFFFFF; box-sizing: border-box; }
    page { background-color: #F4F6F9; }
    .page { display: flex; flex: 1; width: 100%; height: 100vh; flex-direction: column; overflow: hidden; background-color: #F4F6F9; }
    .navigation-bar { display: flex; height: 174rpx; padding: 68rpx 38rpx 0; flex: none; flex-direction: row; align-items: center; position: relative; background-color: #F4F6F9; box-sizing: border-box; }
    .back-button { display: flex; width: 80rpx; height: 80rpx; justify-content: center; align-items: center; position: absolute; left: 18rpx; top: 79rpx; z-index: 2; }
    .back-icon { width: 44rpx; height: 44rpx; }
    .page-title { width: 100%; color: #202B3E; font-size: 34rpx; line-height: 48rpx; text-align: center; font-weight: 700; }
    .step-bar { display: flex; height: 92rpx; padding: 0 38rpx; flex: none; flex-direction: row; align-items: flex-start; background-color: #F4F6F9; box-sizing: border-box; }
    .step-item { display: flex; flex: 1; flex-direction: column; align-items: center; }
    .step-index { width: 36rpx; height: 36rpx; border-radius: 18rpx; color: #9C9C9C; font-size: 22rpx; line-height: 36rpx; text-align: center; background-color: #EDEDED; }
    .step-index-active { color: #FFFFFF; background-color: #2F6DF6; }
    .step-label { margin-top: 6rpx; color: #9C9C9C; font-size: 20rpx; line-height: 28rpx; }
    .step-label-active { color: #2F6DF6; font-weight: 700; }
    .form-scroll { flex: 1; height: 0; background-color: #FFFFFF; }
    .form-body { width: 518rpx; margin-left: 48rpx; padding-top: 18rpx; background-color: #FFFFFF; box-sizing: border-box; }
    .draft-hint { margin-bottom: 18rpx; padding: 12rpx 16rpx; color: #8A6D3B; font-size: 22rpx; line-height: 32rpx; background-color: #FCF8E3; border-radius: 4rpx; }
    .banner-error { margin-top: 8rpx; padding: 14rpx 16rpx; color: #B42318; font-size: 22rpx; line-height: 32rpx; background-color: #FEF3F2; border-radius: 4rpx; }
    .dropdown-wrap { position: relative; z-index: 40; width: 518rpx; }
    .dropdown-menu { position: absolute; top: 62rpx; left: 0; z-index: 80; width: 518rpx; overflow: hidden; border: 1rpx solid #8D8D8D; border-top: 0; background-color: #FFFFFF; box-sizing: border-box; }
    .dropdown-option { display: flex; height: 54rpx; padding: 0 16rpx; align-items: center; color: #202020; font-size: 24rpx; line-height: 34rpx; background-color: #FFFFFF; box-sizing: border-box; }
    .dropdown-option-active { color: #FFFFFF; background-color: #2768C7; }
    .field-block { display: flex; margin-bottom: 27rpx; flex-direction: column; }
    .settlement-title { margin: 0 0 24rpx; color: #202020; font-size: 27rpx; line-height: 38rpx; font-weight: 700; }
    .field-label { display: block; margin-bottom: 12rpx; color: #202020; font-size: 24rpx; line-height: 34rpx; font-weight: 600; }
    .field-hint { margin-top: 8rpx; color: #9C9C9C; font-size: 20rpx; line-height: 28rpx; }
    .input-shell, .select-shell { display: flex; width: 518rpx; height: 62rpx; padding: 0 16rpx; align-items: center; border: 1rpx solid #CFCFCF; border-radius: 4rpx; color: #222222; font-size: 24rpx; line-height: 34rpx; background-color: #FFFFFF; box-sizing: border-box; }
    .text-input { flex: 1; height: 60rpx; color: #222222; font-size: 24rpx; line-height: 60rpx; }
    .input-placeholder, .select-placeholder { color: #9C9C9C; font-size: 24rpx; }
    .step-index { width: 40rpx; height: 40rpx; border-radius: 20rpx; color: #9AA4B3; font-size: 22rpx; line-height: 40rpx; text-align: center; background-color: #E4E8EF; }
    .step-index-active { color: #FFFFFF; background-color: #FF7625; }
    .step-label { margin-top: 8rpx; color: #9AA4B3; font-size: 22rpx; line-height: 30rpx; }
    .step-label-active { color: #FF7625; font-weight: 700; }
    .form-scroll { flex: 1; height: 0; background-color: #F4F6F9; }
    .form-body { width: 100%; padding: 8rpx 38rpx 0; background-color: #F4F6F9; box-sizing: border-box; }
    .draft-hint { margin-bottom: 24rpx; padding: 18rpx 24rpx; color: #B4520F; font-size: 24rpx; line-height: 34rpx; background-color: #FFF5EA; border-radius: 20rpx; }
    .banner-error { margin-top: 8rpx; padding: 18rpx 24rpx; color: #F06A66; font-size: 24rpx; line-height: 34rpx; background-color: #FEF3F2; border-radius: 20rpx; }
    .dropdown-wrap { position: relative; z-index: 40; width: 100%; }
    .dropdown-menu { position: absolute; top: 112rpx; left: 0; z-index: 80; width: 100%; overflow: hidden; border-radius: 0 0 24rpx 24rpx; background-color: #FFFFFF; box-shadow: 0 18rpx 32rpx rgba(43, 44, 52, 0.14); box-sizing: border-box; }
    .dropdown-option { display: flex; height: 88rpx; padding: 0 30rpx; align-items: center; color: #313744; font-size: 28rpx; line-height: 38rpx; background-color: #FFFFFF; box-sizing: border-box; }
    .dropdown-option-active { color: #FF7625; background-color: #FFF5EA; font-weight: 700; }
    .field-block { display: flex; margin-bottom: 30rpx; flex-direction: column; }
    .settlement-title { margin: 6rpx 0 28rpx; color: #202B3E; font-size: 30rpx; line-height: 42rpx; font-weight: 700; }
    .field-label { display: block; margin-bottom: 14rpx; color: #313744; font-size: 28rpx; line-height: 40rpx; font-weight: 700; }
    .field-hint { margin-top: 10rpx; color: #9AA4B3; font-size: 22rpx; line-height: 32rpx; }
    .input-shell, .select-shell { display: flex; width: 100%; height: 104rpx; padding: 0 30rpx; align-items: center; border: 2rpx solid #FFFFFF; border-radius: 30rpx; color: #313744; font-size: 28rpx; line-height: 38rpx; background-color: #FFFFFF; box-shadow: 0 14rpx 28rpx rgba(43, 44, 52, 0.10); box-sizing: border-box; }
    .text-input { flex: 1; height: 100rpx; color: #313744; font-size: 28rpx; line-height: 100rpx; }
    .input-placeholder, .select-placeholder { color: #B8C0CC; font-size: 28rpx; }
    .select-shell { justify-content: space-between; }
    .readonly-shell { background-color: #E2E2E2; }
    .date-picker { width: 518rpx; }
    .down-icon { width: 24rpx; height: 24rpx; flex: none; }
    .readonly-shell { background-color: #EDF0F4; box-shadow: none; }
    .date-picker, .region-picker { width: 100%; }
    .down-icon { width: 28rpx; height: 28rpx; flex: none; opacity: 0.45; }
    .ellipsis-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .upload-box { display: flex; width: 518rpx; height: 132rpx; justify-content: center; align-items: center; overflow: hidden; border: 1rpx solid #CFCFCF; border-radius: 0; color: #333333; font-size: 24rpx; background-color: #FFFFFF; box-sizing: border-box; }
    .document-image { width: 100%; height: 100%; }
    .field-invalid { border-color: #F05252; }
    .field-error { margin-top: 8rpx; color: #E64B4B; font-size: 22rpx; line-height: 30rpx; }
    .step-actions { display: flex; margin-top: 18rpx; flex-direction: row; align-items: center; }
    .secondary-button { display: flex; width: 190rpx; height: 66rpx; margin-right: 18rpx; justify-content: center; align-items: center; border: 1rpx solid #CFCFCF; border-radius: 4rpx; color: #202020; font-size: 24rpx; line-height: 34rpx; background-color: #FFFFFF; }
    .action-primary { display: flex; flex: 1; height: 66rpx; justify-content: center; align-items: center; border-radius: 4rpx; color: #FFFFFF; font-size: 24rpx; line-height: 34rpx; font-weight: 700; background-color: #2F6DF6; }
    .upload-box { display: flex; width: 100%; height: 220rpx; justify-content: center; align-items: center; overflow: hidden; border: 2rpx solid #FFFFFF; border-radius: 30rpx; color: #9AA4B3; font-size: 26rpx; background-color: #FFFFFF; box-shadow: 0 14rpx 28rpx rgba(43, 44, 52, 0.10); box-sizing: border-box; }
    .document-image { width: 100%; height: 100%; border-radius: 30rpx; }
    .field-invalid { border-color: #F05243; }
    .field-error { margin-top: 10rpx; color: #F06A66; font-size: 24rpx; line-height: 34rpx; }
    .step-actions { display: flex; margin-top: 24rpx; flex-direction: row; align-items: center; }
    .secondary-button { display: flex; width: 200rpx; height: 100rpx; margin-right: 24rpx; justify-content: center; align-items: center; border-radius: 50rpx; color: #313744; font-size: 28rpx; line-height: 38rpx; font-weight: 700; background-color: #EDF0F4; }
    .action-primary { display: flex; flex: 1; height: 100rpx; justify-content: center; align-items: center; border-radius: 50rpx; color: #FFFFFF; font-size: 30rpx; line-height: 42rpx; font-weight: 700; background-image: linear-gradient(90deg, #FF8A24 0%, #FF4B36 100%); box-shadow: 0 14rpx 26rpx rgba(255, 101, 48, 0.22); }
    .button-disabled { opacity: 0.58; }
    .safe-space { height: 72rpx; }
</style>
    .safe-space { height: 120rpx; }
</style>