style(manager): 优化组件面板卡片质感

- 白底圆角卡片 + 淡蓝图标底块,hover 浮起、图标反白、投影
- 组标题加蓝色竖条点缀
This commit is contained in:
pikachu1995@126.com
2026-10-12 15:03:00 +08:00
parent a804120fa2
commit 45b83d0fe4

View File

@@ -10,10 +10,20 @@
padding: 0 5px;
}
.model-group-title {
display: flex;
align-items: center;
font-size: 13px;
font-weight: 600;
color: #303133;
margin: 10px 5px 8px;
margin: 14px 5px 10px;
&::before {
content: "";
width: 3px;
height: 12px;
border-radius: 2px;
background: #409eff;
margin-right: 6px;
}
}
.model-group:first-child .model-group-title {
margin-top: 0;
@@ -26,22 +36,43 @@
flex: 6;
}
.model-item {
line-height: 1.5;
line-height: 1.4;
font-size: 12px;
border: 1px solid #ededed;
background: #f6f6f9;
border-radius: 6px;
height: 64px;
border: 1px solid #ebeef5;
background: #ffffff;
border-radius: 8px;
height: 78px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 4px;
gap: 8px;
color: #606266;
cursor: grab;
&:hover {
border-color: #409eff;
transition: all 0.2s ease;
.el-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: #f0f5ff;
color: #409eff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
&:hover {
border-color: #c6e2ff;
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
transform: translateY(-2px);
color: #303133;
.el-icon {
background: #409eff;
color: #ffffff;
}
}
&:active {
cursor: grabbing;
}
}
}