239 lines
4.0 KiB
CSS
239 lines
4.0 KiB
CSS
/* ============================================================
|
|
管理员配置页面共享结构样式
|
|
引入: AdminKuaishouCloudFulfillment.css
|
|
各页面自行覆盖颜色、圆角、主题属性
|
|
============================================================ */
|
|
|
|
/* ---------- 分区标题 ---------- */
|
|
.section-title-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.section-title-row h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
.section-title-row p {
|
|
margin: 6px 0 0;
|
|
}
|
|
|
|
/* ---------- 头部工具 ---------- */
|
|
.section-header-tools,
|
|
.section-mini-stats,
|
|
.section-action-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.section-header-tools {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* ---------- 卡片容器 ---------- */
|
|
.overview-card,
|
|
.table-card,
|
|
.empty-block,
|
|
.error-copy {
|
|
padding: 16px;
|
|
background: rgba(255, 255, 255, 0.94);
|
|
border: 1px solid rgba(86, 108, 138, 0.1);
|
|
}
|
|
|
|
.table-card--dense {
|
|
padding: 14px 16px 16px;
|
|
}
|
|
|
|
.overview-card {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* ---------- 概览文件 & 统计 ---------- */
|
|
.overview-file {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.overview-file code {
|
|
display: inline-flex;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding: 8px 12px;
|
|
border-radius: 14px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.overview-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.overview-stat {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 12px 14px;
|
|
background: #f8fafc;
|
|
border: 1px solid rgba(148, 163, 184, 0.14);
|
|
}
|
|
|
|
.overview-stat span {
|
|
font-size: var(--text-xs);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.overview-stat strong {
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.overview-notes {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* ---------- 分区工具 ---------- */
|
|
.section-title-row--tight {
|
|
align-items: center;
|
|
}
|
|
|
|
/* ---------- 字段块 ---------- */
|
|
.field-block {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.field-block span {
|
|
font-size: var(--text-xs);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.field-block--action {
|
|
align-content: end;
|
|
}
|
|
|
|
.field-block--action :deep(.el-button) {
|
|
width: 100%;
|
|
}
|
|
|
|
.field-help {
|
|
font-size: var(--text-xs);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ---------- 文本输入 ---------- */
|
|
.text-input {
|
|
width: 100%;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
/* ---------- 校验 & 错误 ---------- */
|
|
.validation-banner,
|
|
.binding-inline-error {
|
|
margin: 10px 0 0;
|
|
padding: 10px 12px;
|
|
border-radius: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.binding-inline-error {
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
/* ---------- 数据表 (用于 el-table，具体单元格样式见各页面 :deep() 规则) ---------- */
|
|
.data-table--config {
|
|
width: 100%;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.cell-stack--config {
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.cell-subtle {
|
|
font-size: var(--text-xs);
|
|
}
|
|
|
|
/* ---------- 绑定卡片 ---------- */
|
|
.binding-card {
|
|
margin-top: 12px;
|
|
padding: 14px;
|
|
background: #f8fafc;
|
|
border: 1px solid rgba(148, 163, 184, 0.18);
|
|
}
|
|
|
|
.binding-card--invalid {
|
|
border-color: rgba(220, 38, 38, 0.3);
|
|
box-shadow: 0 0 0 4px rgba(254, 226, 226, 0.85);
|
|
}
|
|
|
|
.binding-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.binding-summary {
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.binding-title-row {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.binding-subtle {
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
/* ---------- 状态标签 ---------- */
|
|
.binding-status-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border-radius: var(--radius-full);
|
|
padding: 2px 10px;
|
|
background: #fff1f2;
|
|
color: #be123c;
|
|
font-size: var(--text-xs);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.binding-status-chip--done {
|
|
background: #ecfdf3;
|
|
color: #027a48;
|
|
}
|
|
|
|
.binding-collapsed-preview {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
/* ---------- 操作栏 ---------- */
|
|
.binding-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
/* ---------- 工具栏提示 ---------- */
|
|
.toolbar-hint {
|
|
margin: 10px 0 0;
|
|
font-size: var(--text-xs);
|
|
}
|
|
.mt-4 {
|
|
margin-top: 16px;
|
|
}
|