code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2026-11-07 17:38:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 白底圆角卡片 + 淡蓝图标底块，hover 浮起、图标反白、投影
- 组标题加蓝色竖条点缀
This commit is contained in:
pikachu1995@126.com
2026-10-12 15:03:00 +08:00
parent a804120fa2
commit 45b83d0fe4
1 changed files with 40 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
manager/src/views/page-decoration/wap/style.scss
View File

@@ -10,10 +10,20 @@
padding: 0 5px; padding: 0 5px;
} }
.model-group-title { .model-group-title {
display: flex;
align-items: center;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #303133; 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 { .model-group:first-child .model-group-title {
margin-top: 0; margin-top: 0;
@@ -26,22 +36,43 @@
flex: 6; flex: 6;
} }
.model-item { .model-item {
line-height: 1.5; line-height: 1.4;
font-size: 12px; font-size: 12px;
border: 1px solid #ededed; border: 1px solid #ebeef5;
background: #f6f6f9; background: #ffffff;
border-radius: 6px; border-radius: 8px;
height: 64px; height: 78px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 8px;
color: #606266; color: #606266;
cursor: grab; cursor: grab;
&:hover { transition: all 0.2s ease;
border-color: #409eff; .el-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: #f0f5ff;
color: #409eff; 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;
} }
} }
} }