ui优化-3
This commit is contained in:
@@ -954,11 +954,11 @@ onMounted(loadConfigs)
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(37, 89, 167, 0.08);
|
||||
border: 1px solid rgba(37, 89, 167, 0.12);
|
||||
color: var(--color-primary-dark);
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
@@ -973,7 +973,7 @@ onMounted(loadConfigs)
|
||||
.empty-block,
|
||||
.error-copy {
|
||||
padding: 16px;
|
||||
border-radius: 20px;
|
||||
border-radius: var(--radius-xl);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border: 1px solid rgba(86, 108, 138, 0.1);
|
||||
}
|
||||
@@ -1013,14 +1013,14 @@ onMounted(loadConfigs)
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 16px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: #f8fafc;
|
||||
border: 1px solid rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
.overview-stat span {
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -1041,10 +1041,10 @@ onMounted(loadConfigs)
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(15, 23, 42, 0.04);
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -1085,7 +1085,7 @@ onMounted(loadConfigs)
|
||||
.toolbar-hint {
|
||||
margin: 10px 0 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.lookup-summary {
|
||||
@@ -1097,7 +1097,7 @@ onMounted(loadConfigs)
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 16px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: #f8fafc;
|
||||
border: 1px solid rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
@@ -1109,7 +1109,7 @@ onMounted(loadConfigs)
|
||||
.binding-card {
|
||||
margin-top: 12px;
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: #f8fafc;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
}
|
||||
@@ -1142,17 +1142,17 @@ onMounted(loadConfigs)
|
||||
|
||||
.binding-subtle {
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.binding-status-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-full);
|
||||
padding: 2px 10px;
|
||||
background: #fff1f2;
|
||||
color: #be123c;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -1165,7 +1165,7 @@ onMounted(loadConfigs)
|
||||
border: 1px solid rgba(86, 108, 138, 0.18);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
color: var(--text-primary);
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-full);
|
||||
padding: 7px 12px;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
@@ -1175,7 +1175,7 @@ onMounted(loadConfigs)
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.binding-grid {
|
||||
@@ -1201,13 +1201,13 @@ onMounted(loadConfigs)
|
||||
|
||||
.field-block span {
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.field-help {
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -1243,7 +1243,7 @@ onMounted(loadConfigs)
|
||||
.binding-inline-error {
|
||||
margin: 10px 0 0;
|
||||
color: var(--color-danger);
|
||||
font-size: 13px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -1279,7 +1279,7 @@ onMounted(loadConfigs)
|
||||
|
||||
.data-table th {
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.cell-stack {
|
||||
@@ -1289,7 +1289,7 @@ onMounted(loadConfigs)
|
||||
|
||||
.cell-subtle {
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.empty-block,
|
||||
@@ -1301,7 +1301,7 @@ onMounted(loadConfigs)
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
@media (max-width: 900px) {
|
||||
.panel-header,
|
||||
.section-title-row,
|
||||
.section-header-tools,
|
||||
|
||||
@@ -1153,7 +1153,7 @@ onMounted(loadConfigs)
|
||||
}
|
||||
|
||||
.hero-copy h1 {
|
||||
font-size: 24px;
|
||||
font-size: var(--text-2xl);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@@ -1162,7 +1162,7 @@ onMounted(loadConfigs)
|
||||
}
|
||||
|
||||
.pane-heading h3 {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.hero-copy p {
|
||||
@@ -1190,10 +1190,10 @@ onMounted(loadConfigs)
|
||||
min-height: 34px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fff;
|
||||
color: var(--panel-ink);
|
||||
font-size: 13px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -1207,7 +1207,7 @@ onMounted(loadConfigs)
|
||||
min-width: 0;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(31, 42, 55, 0.08);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
}
|
||||
|
||||
@@ -1218,14 +1218,14 @@ onMounted(loadConfigs)
|
||||
.rule-footer,
|
||||
.field-help {
|
||||
color: var(--panel-muted);
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.status-strip strong {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
color: var(--panel-ink);
|
||||
font-size: 24px;
|
||||
font-size: var(--text-2xl);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@@ -1235,7 +1235,7 @@ onMounted(loadConfigs)
|
||||
overflow: hidden;
|
||||
color: var(--panel-ink);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -1253,10 +1253,10 @@ onMounted(loadConfigs)
|
||||
|
||||
.sample-metrics span {
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-full);
|
||||
background: #eef7f5;
|
||||
color: var(--accent-strong);
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@@ -1265,7 +1265,7 @@ onMounted(loadConfigs)
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--panel-line);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: linear-gradient(180deg, #f8fafc, #ffffff);
|
||||
}
|
||||
|
||||
@@ -1325,7 +1325,7 @@ onMounted(loadConfigs)
|
||||
gap: 14px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--panel-line);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@@ -1359,7 +1359,7 @@ onMounted(loadConfigs)
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: var(--panel-ink);
|
||||
font-size: 14px;
|
||||
font-size: var(--text-base);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -1371,7 +1371,7 @@ onMounted(loadConfigs)
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
color: var(--panel-muted);
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.45;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -1381,10 +1381,10 @@ onMounted(loadConfigs)
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: #eaf7f0;
|
||||
color: #067647;
|
||||
font-size: 13px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@@ -1401,7 +1401,7 @@ onMounted(loadConfigs)
|
||||
.filter-chip,
|
||||
.collapse-button {
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fff;
|
||||
color: var(--panel-ink);
|
||||
cursor: pointer;
|
||||
@@ -1414,13 +1414,13 @@ onMounted(loadConfigs)
|
||||
gap: 8px;
|
||||
min-height: 34px;
|
||||
padding: 0 11px;
|
||||
font-size: 13px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.filter-chip strong {
|
||||
color: var(--panel-muted);
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.filter-chip--active {
|
||||
@@ -1435,7 +1435,7 @@ onMounted(loadConfigs)
|
||||
|
||||
.rule-card {
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.rule-card[data-invalid='true'] {
|
||||
@@ -1468,10 +1468,10 @@ onMounted(loadConfigs)
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: #182230;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@@ -1492,8 +1492,8 @@ onMounted(loadConfigs)
|
||||
min-height: 28px;
|
||||
padding: 0 9px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 800;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -1524,7 +1524,7 @@ onMounted(loadConfigs)
|
||||
min-height: 28px;
|
||||
padding: 0 9px;
|
||||
color: var(--accent-strong);
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@@ -1540,7 +1540,7 @@ onMounted(loadConfigs)
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--panel-line);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fbfcfe;
|
||||
}
|
||||
|
||||
@@ -1563,13 +1563,13 @@ onMounted(loadConfigs)
|
||||
min-height: 72px;
|
||||
padding: 11px;
|
||||
border: 1px solid var(--panel-line);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.switch-tile > span {
|
||||
color: #344054;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@@ -1582,7 +1582,7 @@ onMounted(loadConfigs)
|
||||
.message-box,
|
||||
.loading-band {
|
||||
padding: 14px 16px;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--panel-muted);
|
||||
}
|
||||
|
||||
@@ -1617,7 +1617,7 @@ onMounted(loadConfigs)
|
||||
|
||||
.admin-panel :deep(.el-button) {
|
||||
min-height: 34px;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@@ -1632,7 +1632,7 @@ onMounted(loadConfigs)
|
||||
.admin-panel :deep(.el-textarea__inner),
|
||||
.admin-panel :deep(.el-select__wrapper) {
|
||||
min-height: 36px;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 1px var(--panel-line) inset;
|
||||
}
|
||||
@@ -1666,7 +1666,7 @@ onMounted(loadConfigs)
|
||||
background-color: var(--accent);
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
@media (max-width: 1200px) {
|
||||
.lookup-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
@@ -1680,7 +1680,7 @@ onMounted(loadConfigs)
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
@media (max-width: 900px) {
|
||||
.hero-main,
|
||||
.section-heading,
|
||||
.rules-heading,
|
||||
@@ -1787,10 +1787,10 @@ onMounted(loadConfigs)
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(15, 93, 216, 0.08);
|
||||
color: #175cd3;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -1832,7 +1832,7 @@ onMounted(loadConfigs)
|
||||
|
||||
.overview-label {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.overview-file code {
|
||||
@@ -1863,12 +1863,12 @@ onMounted(loadConfigs)
|
||||
|
||||
.overview-stat span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.overview-stat strong {
|
||||
color: #1d3555;
|
||||
font-size: 24px;
|
||||
font-size: var(--text-2xl);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@@ -1901,7 +1901,7 @@ onMounted(loadConfigs)
|
||||
|
||||
.field-block span {
|
||||
color: #1d3555;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -1945,7 +1945,7 @@ onMounted(loadConfigs)
|
||||
.toolbar-hint,
|
||||
.cell-subtle {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
@@ -1966,7 +1966,7 @@ onMounted(loadConfigs)
|
||||
border-radius: 14px;
|
||||
background: #fff5f4;
|
||||
border: 1px solid rgba(180, 35, 24, 0.14);
|
||||
font-size: 13px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.data-table {
|
||||
@@ -1985,7 +1985,7 @@ onMounted(loadConfigs)
|
||||
|
||||
.data-table th {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -2041,17 +2041,17 @@ onMounted(loadConfigs)
|
||||
|
||||
.binding-subtle {
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.binding-status-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-full);
|
||||
padding: 2px 10px;
|
||||
background: #fff1f2;
|
||||
color: #be123c;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -2064,7 +2064,7 @@ onMounted(loadConfigs)
|
||||
border: 1px solid rgba(86, 108, 138, 0.18);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
color: #1d3555;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-full);
|
||||
padding: 7px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -2076,7 +2076,7 @@ onMounted(loadConfigs)
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.binding-grid {
|
||||
@@ -2124,7 +2124,7 @@ onMounted(loadConfigs)
|
||||
|
||||
.mapping-panel-head span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.mapping-grid,
|
||||
@@ -2138,7 +2138,7 @@ onMounted(loadConfigs)
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #175cd3;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -2149,7 +2149,7 @@ onMounted(loadConfigs)
|
||||
min-height: 30px;
|
||||
min-width: 54px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(15, 93, 216, 0.08);
|
||||
border: 1px solid rgba(15, 93, 216, 0.14);
|
||||
}
|
||||
@@ -2165,7 +2165,7 @@ onMounted(loadConfigs)
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #1d3555;
|
||||
font-size: 13px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.binding-actions {
|
||||
@@ -2175,7 +2175,7 @@ onMounted(loadConfigs)
|
||||
|
||||
.admin-panel :deep(.el-button) {
|
||||
min-height: 34px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.admin-panel :deep(.el-button--primary) {
|
||||
@@ -2185,7 +2185,7 @@ onMounted(loadConfigs)
|
||||
--el-button-hover-border-color: #0f5dd8;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
@media (max-width: 900px) {
|
||||
.overview-stats,
|
||||
.lookup-toolbar,
|
||||
.binding-grid,
|
||||
@@ -2202,7 +2202,7 @@ onMounted(loadConfigs)
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 640px) {
|
||||
.panel-header,
|
||||
.section-title-row,
|
||||
.section-header-tools,
|
||||
|
||||
@@ -409,7 +409,7 @@ onMounted(loadEvents)
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
padding: 10px 11px;
|
||||
border-radius: 12px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user