/* ============================================================ * 商家入驻 - 基本信息 tab 全新样式(按设计稿 PDF 1) * 主色 #FF370B 辅色 #FFF1ED 灰边 #EEE 灰字 #999 深字 #222 * ============================================================ */ page { background-color: #F6F7F9; min-height: 100vh; padding-bottom: 200rpx; } .container { padding-bottom: 40rpx; box-sizing: border-box; } /* ================= 顶部进度条(红底胶囊) ================= */ .step-bar { display: flex; align-items: center; justify-content: space-between; padding: 24rpx 30rpx 28rpx; background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%); } .step-pill { flex: 1; height: 60rpx; margin: 0 8rpx; border-radius: 30rpx; background: rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.65); font-size: 26rpx; } .step-pill.active { background: #FFFFFF; color: #FF370B; font-weight: 600; } /* ================= Tab 切换 ================= */ .tab-bar { display: flex; background: #FFFFFF; padding: 0 60rpx; } .tab-item { flex: 1; text-align: center; padding: 28rpx 0 22rpx; font-size: 30rpx; color: #222; position: relative; } .tab-item.active { color: #FF370B; font-weight: 600; } .tab-item.active::after { content: ''; position: absolute; bottom: 8rpx; left: 50%; transform: translateX(-50%); width: 56rpx; height: 6rpx; background: #FF370B; border-radius: 3rpx; } /* ================= 表单卡片 ================= */ .form-card { background: #FFFFFF; margin: 20rpx 24rpx 0; padding: 24rpx; border-radius: 16rpx; } .field { margin-top: 20rpx; } .field:first-child { margin-top: 0; } .field-label { font-size: 26rpx; color: #222; margin-bottom: 14rpx; display: flex; align-items: center; } .field-label .star { color: #FF370B; margin-right: 4rpx; font-size: 26rpx; } .field-input { height: 80rpx; border: 1rpx solid #EBEBEB; border-radius: 8rpx; padding: 0 20rpx; display: flex; align-items: center; background: #FFFFFF; } .field-input input { flex: 1; font-size: 28rpx; color: #222; height: 80rpx; line-height: 80rpx; } .field-input input::placeholder, .field-input .placeholder { color: #B7B7B7; } .field-input.disabled { background: #FAFAFA; } .field-value { flex: 1; font-size: 28rpx; color: #222; } .field-value.placeholder { color: #B7B7B7; } .field-arrow { color: #C8C8C8; font-size: 24rpx; margin-left: 12rpx; } /* ================= 上传图片块 ================= */ .upload-section { margin-top: 20rpx; } .upload-title { font-size: 26rpx; color: #222; margin-bottom: 16rpx; display: flex; align-items: center; } .upload-title .star { color: #FF370B; margin-right: 4rpx; } .upload-title .count { color: #999; font-size: 24rpx; margin-left: 8rpx; font-weight: normal; } .upload-grid { display: flex; flex-wrap: wrap; gap: 16rpx; } /* uview u-upload 内部样式微调(让占位框跟设计稿一致) */ .upload-section /deep/ .u-upload__wrap__preview { width: 168rpx !important; height: 168rpx !important; border-radius: 12rpx !important; overflow: hidden; } .upload-section /deep/ .u-upload__button { width: 168rpx !important; height: 168rpx !important; border-radius: 12rpx !important; background: #FAFAFA !important; border: 1rpx dashed #D1D1D1 !important; } .upload-add { width: 168rpx; height: 168rpx; background: #FAFAFA; border: 1rpx dashed #D1D1D1; border-radius: 12rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #999; font-size: 22rpx; } .upload-add-icon { font-size: 48rpx; color: #C8C8C8; line-height: 1; margin-bottom: 6rpx; } /* ================= 底部红色提示框(门店信息要求) ================= */ .tip-box { margin: 20rpx 24rpx 0; background: #FFF7F4; border: 1rpx solid #FFD9CD; border-radius: 12rpx; padding: 20rpx 24rpx 24rpx; display: flex; gap: 12rpx; } .tip-box .tip-icon { color: #FF370B; font-size: 28rpx; font-weight: bold; flex-shrink: 0; line-height: 40rpx; } .tip-box .tip-content { flex: 1; } .tip-box .tip-title { font-size: 26rpx; color: #FF370B; font-weight: 600; margin-bottom: 8rpx; } .tip-box .tip-item { font-size: 24rpx; color: #FF370B; line-height: 40rpx; } /* ================= 底部按钮(吸底) ================= */ .bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; background: #FFFFFF; padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom)); display: flex; gap: 16rpx; box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.04); z-index: 99; } .btn-primary { flex: 1; height: 88rpx; background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%); border-radius: 44rpx; color: #FFFFFF; font-size: 30rpx; display: flex; align-items: center; justify-content: center; } .btn-secondary { flex: 1; height: 88rpx; background: #FFFFFF; border: 1rpx solid #FF370B; border-radius: 44rpx; color: #FF370B; font-size: 30rpx; display: flex; align-items: center; justify-content: center; } /* ================= 协议勾选 ================= */ .agreement { display: flex; align-items: center; padding: 24rpx 24rpx 0; } .agreement-text { font-size: 24rpx; color: #666; margin-left: 8rpx; } .agreement-link { color: #FF370B; } /* ================= 资质示例链接 ================= */ .example-link { font-size: 24rpx; color: #FF370B; margin-top: 10rpx; } /* ================= 弹层选择器(所在地区/类目/营业状态) ================= */ .popup-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; display: flex; align-items: flex-end; } .popup-sheet { width: 100%; background: #FFFFFF; border-radius: 24rpx 24rpx 0 0; max-height: 80vh; display: flex; flex-direction: column; } .popup-header { display: flex; align-items: center; justify-content: space-between; padding: 28rpx 32rpx; border-bottom: 1rpx solid #F0F0F0; } .popup-header .pop-cancel { color: #999; font-size: 28rpx; } .popup-header .pop-title { color: #222; font-size: 30rpx; font-weight: 600; } .popup-header .pop-confirm { color: #FF370B; font-size: 28rpx; } .popup-body { flex: 1; display: flex; overflow: hidden; } .popup-col { flex: 1; overflow-y: auto; padding: 12rpx 0; } .popup-col-item { padding: 24rpx 32rpx; font-size: 28rpx; color: #222; display: flex; align-items: center; justify-content: space-between; } .popup-col-item.selected { color: #FF370B; } .popup-col-item .check { color: #FF370B; font-size: 24rpx; } /* 单列选择列表(营业状态) */ .popup-list { flex: 1; overflow-y: auto; } .popup-list-item { padding: 30rpx 32rpx; font-size: 30rpx; color: #222; text-align: center; border-bottom: 1rpx solid #F5F5F5; } .popup-list-item.selected { color: #FF370B; } /* ================= 类目选择搜索框 ================= */ .popup-search { margin: 16rpx 32rpx; background: #F5F5F5; border-radius: 8rpx; padding: 14rpx 20rpx; display: flex; align-items: center; gap: 12rpx; font-size: 26rpx; color: #B7B7B7; } /* ============ Tab2 资质相关 ============ */ .qual-thumb { width: 100%; height: 360rpx; border-radius: 12rpx; position: relative; overflow: hidden; border: 1rpx solid #EBEBEB; } .qual-thumb-img { width: 100%; height: 100%; } .qual-thumb-del { position: absolute; top: 8rpx; right: 8rpx; width: 44rpx; height: 44rpx; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 32rpx; display: flex; align-items: center; justify-content: center; line-height: 1; } .id-card-row { display: flex; gap: 20rpx; margin-top: 12rpx; } .id-card-cell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12rpx; } .id-card-cell .upload-add { width: 100%; height: 200rpx; } .id-card-cell .qual-thumb { width: 100%; height: 200rpx; } .id-card-cell-label { font-size: 24rpx; color: #999; } .forever-toggle { display: flex; align-items: center; gap: 10rpx; margin-top: 12rpx; padding-left: 4rpx; } .forever-toggle-text { font-size: 24rpx; color: #666; } /* ============ 有效期分段控件(永久有效 / 截止日期) ============ */ .validity-seg { display: flex; gap: 16rpx; } .validity-seg .seg-item { flex: 1; height: 72rpx; border: 1rpx solid #EBEBEB; border-radius: 8rpx; display: flex; align-items: center; justify-content: center; font-size: 26rpx; color: #666; background: #FFFFFF; } .validity-seg .seg-item.active { color: #FF370B; border-color: #FF370B; background: #FFF1ED; font-weight: 600; } /* ============ 结算页:银行账户信息分组标题 ============ */ .section-title { display: flex; align-items: center; font-size: 30rpx; color: #222; font-weight: 600; padding: 28rpx 24rpx 4rpx; } .section-title::before { content: ''; width: 6rpx; height: 30rpx; background: #FF370B; border-radius: 3rpx; margin-right: 12rpx; } /* 结算页行内底部提示 */ .row-tip { font-size: 22rpx; color: #86909C; padding: 12rpx 24rpx 0; line-height: 34rpx; } /* 结算页可点击选择行右侧布局 */ .row_con--select { display: flex; align-items: center; justify-content: space-between; } .row_con .row_value { flex: 1; font-size: 28rpx; color: #222; } .row_con .row_value.placeholder { color: #B7B7B7; } /* ============ 结算页 银行账户信息表单 ============ */ .Msg { background: #FFFFFF; margin: 12rpx 24rpx 0; border-radius: 16rpx; padding: 0 24rpx; } .Msg .row { display: flex; flex-direction: column; padding: 24rpx 0; border-bottom: 1rpx solid #F2F2F2; } .Msg .row:last-child { border-bottom: none; } .Msg .row_label { font-size: 26rpx; color: #222; margin-bottom: 14rpx; display: flex; align-items: center; } .Msg .row_label .star { color: #FF370B; margin-right: 4rpx; } .Msg .row_con { height: 80rpx; border: 1rpx solid #EBEBEB; border-radius: 8rpx; padding: 0 20rpx; display: flex; align-items: center; background: #FFFFFF; } .Msg .row_con input { flex: 1; font-size: 28rpx; color: #222; height: 80rpx; line-height: 80rpx; } .Msg .row_con input::placeholder { color: #B7B7B7; } /* 结算页底部按钮组 */ .btn-group { display: flex; gap: 16rpx; padding: 40rpx 24rpx; } .btn-group .prevBtn { flex: 1; height: 88rpx; background: #FFFFFF; border: 1rpx solid #FF370B; border-radius: 44rpx; color: #FF370B; font-size: 30rpx; display: flex; align-items: center; justify-content: center; } .btn-group .nextBtn { flex: 1; height: 88rpx; background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%); border-radius: 44rpx; color: #FFFFFF; font-size: 30rpx; display: flex; align-items: center; justify-content: center; } .action-sheet { width: 100%; background: #F2F2F4; padding-bottom: env(safe-area-inset-bottom); } .action-item { background: #FFFFFF; padding: 32rpx 0; text-align: center; font-size: 32rpx; color: #222; border-bottom: 1rpx solid #F0F0F0; } .action-item:active { background: #F8F8F8; } .action-cancel { margin-top: 12rpx; color: #999; border-bottom: none; }