kris/ForcePilot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style(DataBaseView): 调整知识库卡片样式，合并悬停和激活状态样式

Browse Source 
简化知识库卡片的悬停和激活状态样式，减少重复代码
将卡片内边距从20px调整为16px，移除描述文字底部边距
This commit is contained in:
Wenjie Zhang 2025-11-27 13:49:09 +08:00
parent 33ef9f0e15
commit 6a4c6d1fbb
1 changed files with 12 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
web/src/views/DataBaseView.vue
View File

@ -669,7 +669,7 @@ onMounted(() => {
.kb-type-card {
border: 2px solid var(--gray-150);
border-radius: 12px;
padding: 20px;
padding: 16px;
cursor: pointer;
transition: all 0.3s ease;
background: var(--gray-0);
@ -680,62 +680,24 @@ onMounted(() => {
border-color: var(--main-color);
}
// 为不同知识库类型设置不同的悬停颜色
&:nth-child(1):hover {
// 为不同知识库类型设置不同的悬停颜色与主题色
&:nth-child(1):hover,
&:nth-child(1).active {
border-color: var(--color-accent-100);
.type-icon { color: var(--color-accent-500); }
}
&:nth-child(2):hover {
&:nth-child(2):hover,
&:nth-child(2).active {
border-color: var(--color-warning-100);
.type-icon { color: var(--color-warning-500); }
}
&:nth-child(3):hover {
&:nth-child(3):hover,
&:nth-child(3).active {
border-color: var(--color-error-100);
.type-icon { color: var(--color-error-500); }
}
&.active {
border-color: var(--main-color);
background: rgba(24, 144, 255, 0.05);
.type-icon {
color: var(--main-color);
}
}
// 为不同知识库类型设置不同的主题色
&:nth-child(1) {
&.active {
border-color: var(--color-accent-100);
background: rgba(114, 46, 209, 0.05);
.type-icon {
color: var(--color-accent-500);
}
}
}
&:nth-child(2) {
&.active {
border-color: var(--color-warning-100);
background: rgba(250, 140, 22, 0.05);
.type-icon {
color: var(--color-warning-500);
}
}
}
&:nth-child(3) {
&.active {
border-color: var(--color-error-100);
background: rgba(245, 34, 45, 0.05);
.type-icon {
color: var(--color-error-500);
}
}
}
.card-header {
display: flex;
align-items: center;
@ -760,7 +722,7 @@ onMounted(() => {
font-size: 13px;
color: var(--gray-600);
line-height: 1.5;
margin-bottom: 12px;
margin-bottom: 0;
// min-height: 40px;
}
}