mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-30 17:03:56 +08:00
update:优化前端页面样式
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user