update:优化前端页面样式

This commit is contained in:
3030332422
2025-12-05 14:02:50 +08:00
parent 3c4d702bc1
commit 33f75d26c1
@@ -205,27 +205,40 @@ export default {
.dialog-content { .dialog-content {
max-height: 60vh; max-height: 60vh;
overflow-y: auto; overflow-y: auto;
padding: 10px 20px; padding: 20px 25px;
}
.dialog-content::-webkit-scrollbar {
width: 6px;
}
.dialog-content::-webkit-scrollbar-thumb {
background: #dcdfe6;
border-radius: 3px;
}
.dialog-content::-webkit-scrollbar-track {
background: #f5f7fa;
} }
.provider-item { .provider-item {
display: flex; display: flex;
gap: 10px; gap: 15px;
margin-bottom: 15px; margin-bottom: 20px;
align-items: center; align-items: center;
} }
.provider-card { .provider-card {
flex: 1; flex: 1;
border-radius: 15px; border-radius: 12px;
border: 1px solid #ebeef5; border: 1px solid #e4e7ed;
transition: all 0.3s; border-left: 4px solid #409EFF; /* 左侧强调色 */
background-color: #fff;
transition: all 0.3s ease;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
} }
.provider-card:hover { .provider-card:hover {
border-color: #c0c4cc; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
transform: translateY(-1px); transform: translateY(-2px);
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
} }
.block-controls { .block-controls {
@@ -237,8 +250,8 @@ export default {
.input-row { .input-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 12px;
margin-bottom: 15px; margin-bottom: 18px;
} }
.label-text { .label-text {
@@ -248,6 +261,7 @@ export default {
text-align: right; text-align: right;
font-size: 13px; font-size: 13px;
white-space: nowrap; white-space: nowrap;
line-height: 32px; /* 垂直居中对齐 */
} }
.flex-1 { .flex-1 {
@@ -256,7 +270,7 @@ export default {
.headers-section { .headers-section {
display: flex; display: flex;
gap: 10px; gap: 12px;
align-items: flex-start; align-items: flex-start;
} }
@@ -264,38 +278,52 @@ export default {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 10px;
background: #f9fafc; background: #fcfcfc;
padding: 12px; padding: 15px;
border-radius: 6px; border-radius: 8px;
border: 1px dashed #dcdfe6;
transition: all 0.3s;
}
.headers-list:hover {
border-color: #c0c4cc;
background: #fff;
} }
.header-row { .header-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 10px;
} }
.separator { .separator {
color: #909399; color: #909399;
font-weight: bold; font-weight: bold;
margin: 0 2px;
} }
.row-controls { .row-controls {
display: flex; display: flex;
gap: 5px; gap: 6px;
margin-left: 5px; margin-left: 8px;
flex-shrink: 0; flex-shrink: 0;
opacity: 0.6;
transition: opacity 0.2s;
}
.header-row:hover .row-controls {
opacity: 1;
} }
.empty-header { .empty-header {
justify-content: center; justify-content: center;
padding: 5px; padding: 10px;
color: #909399; color: #909399;
font-size: 12px; font-size: 13px;
} }
.no-header-text { .no-header-text {
margin-right: 10px; margin-right: 8px;
} }
</style> </style>