再次优化css等

2026-05-15 03:59:45 +08:00
parent 2f6380ad4d
commit c6eb0d60b1
8 changed files with 1063 additions and 807 deletions
@@ -0,0 +1,282 @@
+/* ============================================================
+   管理员配置页面共享结构样式
+   引入: AdminFulfillmentBindings.css, AdminKuaishouCloudFulfillment.css
+   各页面自行覆盖颜色、圆角、主题属性
+   ============================================================ */
+
+/* ---------- 面板头部 & 分区标题 ---------- */
+.panel-header,
+.section-title-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+.panel-header {
+  flex-wrap: wrap;
+}
+
+.panel-header-copy {
+  min-width: 280px;
+  flex: 1;
+}
+
+.panel-header h1,
+.panel-header-copy h1,
+.section-title-row h3 {
+  margin: 0;
+}
+
+.panel-header p,
+.panel-header-copy p,
+.section-title-row p {
+  margin: 6px 0 0;
+}
+
+/* ---------- 头部工具 ---------- */
+.header-tags,
+.header-actions,
+.section-header-tools,
+.section-mini-stats,
+.section-action-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.header-actions,
+.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);
+}
+
+/* ---------- 数据表 ---------- */
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 12px;
+}
+
+.data-table th,
+.data-table td {
+  text-align: left;
+  border-bottom: 1px solid rgba(86, 108, 138, 0.08);
+  vertical-align: top;
+}
+
+.data-table th {
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+
+.cell-stack {
+  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;
+}
+
+/* ---------- 折叠 ---------- */
+.collapse-button {
+  border: 1px solid rgba(86, 108, 138, 0.18);
+  background: rgba(255, 255, 255, 0.96);
+  border-radius: var(--radius-full);
+  padding: 7px 12px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.binding-collapsed-preview {
+  display: grid;
+  gap: 6px;
+}
+
+/* ---------- 操作栏 ---------- */
+.binding-actions {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+}
+
+/* ---------- 复选框 ---------- */
+.checkbox-line {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+}
+
+/* ---------- 工具栏提示 ---------- */
+.toolbar-hint {
+  margin: 10px 0 0;
+  font-size: var(--text-xs);
+}