feat(admin): 重构接单模板与商品绑定内联编辑 UI 布局
- 优化接单模板与模板列表 6:4 比例自适应布局 - 适用商品绑定支持左侧直接内联展开编辑，免弹窗模式 - 支持绑定规则多标签快速切换、实时新增与删除 - 基础表单与商品绑定统一采用 3 列网格布局，严格几何对齐 - 「启用拼单」开关及参数行内紧凑展开，移除多余背景框与纵向滚动条
This commit is contained in:
yml2213
@@ -1052,120 +1052,257 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ===== 物品规则配置：3:7 比例响应式双栏 ===== */
|
||||
/* ===== 物品规则配置：6:4 比例清晰现代化双栏 ===== */
|
||||
|
||||
.product-rules-layout {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
align-items: start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-rules-form-card {
|
||||
flex: 0 0 calc(30% - 8px);
|
||||
width: calc(30% - 8px);
|
||||
min-width: 360px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border-radius: 8px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
align-self: flex-start;
|
||||
max-height: calc(100vh - 84px);
|
||||
overflow-y: auto;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.product-rules-form-card::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.product-rules-form-card::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.product-rules-form-card::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
.product-rules-form-card .ant-card-head {
|
||||
padding: 0 16px;
|
||||
min-height: 48px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.product-rules-form-card .ant-card-body {
|
||||
padding: 12px 14px;
|
||||
overflow: visible;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.worker-rule-form {
|
||||
width: 100%;
|
||||
.product-rule-main-form .ant-form-item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.worker-rule-form-30 .rule-form-grid-2col {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0 10px;
|
||||
}
|
||||
|
||||
.worker-rule-form-30 .rule-form-grid-2col .span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.worker-rule-form-30 .ant-form-item {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.worker-rule-form-30 .ant-form-item-label {
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
.worker-rule-form-30 .ant-form-item-label > label {
|
||||
font-size: 12px;
|
||||
.product-rule-main-form .ant-form-item-label > label {
|
||||
font-size: 13px;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.worker-rule-form-30 .form-switches-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
background: #f9fafb;
|
||||
padding: 5px 10px;
|
||||
border-radius: 6px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 7px;
|
||||
.form-grid-2col {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0 14px;
|
||||
}
|
||||
|
||||
.worker-rule-form-30 .form-switches-strip .ant-form-item {
|
||||
.form-grid-3col {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0 14px;
|
||||
}
|
||||
|
||||
.form-grid-4col {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0 14px;
|
||||
}
|
||||
|
||||
.form-grid-5col {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 1fr 0.8fr 1fr 1.2fr;
|
||||
gap: 0 12px;
|
||||
}
|
||||
|
||||
.span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.span-3 {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.span-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.switches-inline-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
align-self: end;
|
||||
height: 32px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.switches-inline-group .ant-form-item {
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.worker-rule-form-30 .sharing-box-inline {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
.sharing-inline-inputs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: #f8fafc;
|
||||
border: 1px dashed #cbd5e1;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 7px;
|
||||
padding-left: 12px;
|
||||
border-left: 1px solid #cbd5e1;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.worker-rule-form-30 .sharing-box-inline .ant-form-item {
|
||||
.sharing-box-panel {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
||||
gap: 10px 14px;
|
||||
background: #eff6ff;
|
||||
border: 1px dashed #bfdbfe;
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.sharing-box-panel .ant-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 适用商品绑定区域 */
|
||||
.binding-section-container {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.binding-section-header {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.binding-editor-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.binding-editor-card {
|
||||
background: #f8fafc !important;
|
||||
border: 1px solid #e2e8f0 !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.binding-editor-card .ant-card-head {
|
||||
background: #f1f5f9;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
padding: 6px 12px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.binding-editor-card .ant-card-body {
|
||||
padding: 14px 12px 10px;
|
||||
}
|
||||
|
||||
.binding-editor-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.binding-pills-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.binding-pill-tag {
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #cbd5e1 !important;
|
||||
background: #fff !important;
|
||||
color: #475569 !important;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.binding-pill-tag.active {
|
||||
background: #1677ff !important;
|
||||
color: #fff !important;
|
||||
border-color: #1677ff !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.binding-add-btn {
|
||||
font-size: 12px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.binding-form-content .ant-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.binding-form-content .ant-form-item-label > label {
|
||||
font-size: 12px;
|
||||
color: #334155;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.shop-selector-box-inline {
|
||||
background: #fff;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 6px;
|
||||
padding: 4px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.shop-selector-box-inline .shop-all-toggle {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
border-right: 1px solid #e2e8f0;
|
||||
padding-right: 10px;
|
||||
margin-right: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.shop-selector-box-inline .shop-checkbox-inline-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 14px;
|
||||
}
|
||||
|
||||
.shop-selector-box-inline .shop-chk-item {
|
||||
font-size: 12px;
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
.empty-rule-hint {
|
||||
background: #f8fafc;
|
||||
border: 1px dashed #cbd5e1;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-binding-row-active > td {
|
||||
background: #e6f4ff !important;
|
||||
}
|
||||
|
||||
/* 右侧模板列表卡片 */
|
||||
.product-rules-list-card {
|
||||
flex: 0 0 calc(70% - 8px);
|
||||
width: calc(70% - 8px);
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.product-rules-list-card .ant-card-head {
|
||||
padding: 0 16px;
|
||||
min-height: 48px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.product-rules-list-card .ant-card-body {
|
||||
padding: 12px 16px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.product-rules-category-tabs-bar {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
@@ -1181,20 +1318,26 @@
|
||||
background: #f0fdf4;
|
||||
}
|
||||
|
||||
.rules-list-card-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rules-list-card-extra .search-input-fluid {
|
||||
min-width: 120px;
|
||||
max-width: 220px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ===== 后台响应式断点 ===== */
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
@media (max-width: 1120px) {
|
||||
.product-rules-layout {
|
||||
flex-direction: column;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.product-rules-form-card,
|
||||
.product-rules-list-card {
|
||||
flex: 1 1 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-rules-form-card {
|
||||
position: static;
|
||||
max-height: none;
|
||||
overflow-y: visible;
|
||||
|
||||
Reference in New Issue
Block a user