/* ============================================================ * 商家入驻 - 基本信息 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; }