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