feat 项目中心表格调整

This commit is contained in:
Ironsp
2026-10-09 14:54:34 +08:00
parent a96f62d60b
commit fd1eca95a6
2 changed files with 64 additions and 45 deletions

View File

@@ -236,45 +236,55 @@ function onClearChips(): void {
<style lang="less" scoped> <style lang="less" scoped>
.project-filter { .project-filter {
flex: 0 0 313px; flex-shrink: 0;
padding: 20px 28px 24px; width: 516px;
// 字体/尺寸/间距/面板宽度对齐案例库 CasesFilter(老大要求),颜色保持不变。
padding: 15px 0 40px;
border-radius: @radius-base; border-radius: @radius-base;
background: @white; background: @white;
&__title,
&__group,
&__actions {
padding: 0 50px 0 35px;
}
&__title { &__title {
font-size: 24px; font-size: 28px;
font-weight: 600; font-weight: 500;
line-height: 41px;
color: @heading-color; color: @heading-color;
line-height: 1.2;
} }
&__group { &__group {
margin-top: 18px; margin-top: 24px;
}
&:first-of-type { &__title + &__group {
margin-top: 22px; margin-top: 11px;
}
} }
&__group-title { &__group-title {
margin-bottom: 12px; font-size: 24px;
font-size: @font-size-lg; font-weight: 500;
font-weight: 600; line-height: 35px;
color: @heading-color; color: @heading-color;
} }
&__list { &__list {
margin-top: 19px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
&__row { &__row {
.flex(row, flex-start, center); .flex(row, flex-start, center);
gap: 12px;
width: 100%; width: 100%;
height: 31px; height: 50px;
padding: 0 6px; padding: 0;
border-radius: @radius-sm; border-radius: @radius-sm;
font-size: @font-size-base; font-size: 20px;
color: @heading-color; color: @heading-color;
transition: background-color 0.2s, color 0.2s; transition: background-color 0.2s, color 0.2s;
@@ -291,9 +301,8 @@ function onClearChips(): void {
&__box { &__box {
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
width: 14px; width: 16px;
height: 14px; height: 16px;
margin-right: 10px;
border: 1px solid @border-color-dark; border: 1px solid @border-color-dark;
border-radius: 2px; border-radius: 2px;
background: @white; background: @white;
@@ -304,10 +313,10 @@ function onClearChips(): void {
position: absolute; position: absolute;
top: 1px; top: 1px;
left: 4px; left: 4px;
width: 3px; width: 5px;
height: 6px; height: 8px;
border: solid @white; border: solid @white;
border-width: 0 1.5px 1.5px 0; border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0); transform: rotate(45deg) scale(0);
transition: transform 0.15s; transition: transform 0.15s;
} }
@@ -331,23 +340,26 @@ function onClearChips(): void {
&__row-count { &__row-count {
flex-shrink: 0; flex-shrink: 0;
margin-left: @spacing-sm; margin-left: @spacing-sm;
font-size: @font-size-base; font-size: 16px;
font-weight: 500;
color: @text-color; color: @text-color;
} }
&__grid { &__grid {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px; gap: 24px 33px;
margin-top: 21px;
} }
&__pill { &__pill {
height: 27px; height: 53px;
padding: 0 @spacing-sm; padding: 0 @spacing-sm;
border-radius: @radius-round; border-radius: @radius-base;
background: @pill-bg; background: @pill-bg;
color: @text-color; color: @text-color;
font-size: @font-size-base; font-size: 20px;
.ellipsis();
transition: background-color 0.2s, color 0.2s; transition: background-color 0.2s, color 0.2s;
&:hover { &:hover {
@@ -373,13 +385,13 @@ function onClearChips(): void {
&__date { &__date {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
height: 27px; height: 53px;
padding: 0 @spacing-xs; padding: 0 @spacing-xs;
border: 1px solid @border-color; border: 1px solid @border-color;
border-radius: @radius-sm; border-radius: @radius-sm;
background: @white; background: @white;
color: @text-color; color: @text-color;
font-size: @font-size-sm; font-size: 20px;
} }
&__range-sep { &__range-sep {
@@ -387,8 +399,8 @@ function onClearChips(): void {
} }
&__chips { &__chips {
margin-top: 18px; margin: 23px 50px 0 35px;
padding: 12px; padding: 16px 24px 21px;
border-radius: @radius-base; border-radius: @radius-base;
background: @chips-panel-bg; background: @chips-panel-bg;
} }
@@ -398,12 +410,13 @@ function onClearChips(): void {
} }
&__chips-title { &__chips-title {
font-size: @font-size-sm; font-size: 20px;
font-weight: 500;
color: @primary-color; color: @primary-color;
} }
&__chips-clear { &__chips-clear {
font-size: @font-size-sm; font-size: 16px;
color: @primary-color; color: @primary-color;
&:hover { &:hover {
@@ -414,18 +427,19 @@ function onClearChips(): void {
&__chips-list { &__chips-list {
.flex(row, flex-start, center); .flex(row, flex-start, center);
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 8px; margin-top: 16px;
gap: @spacing-sm; gap: 14px 13px;
} }
&__chip { &__chip {
.flex(row, center, center); .flex(row, center, center);
height: 22px; height: 32px;
padding: 0 10px; padding: 0 @spacing-sm;
border-radius: @radius-round; border-radius: @radius-round;
background: @white; background: @white;
color: @primary-color; color: @primary-color;
font-size: @font-size-sm; font-size: 14px;
font-weight: 500;
&:hover { &:hover {
background: @primary-light; background: @primary-light;
@@ -437,18 +451,18 @@ function onClearChips(): void {
} }
&__actions { &__actions {
.flex(row, space-between, center); .flex(row, flex-start, center);
margin-top: 16px; margin-top: 30px;
gap: 10px; gap: 13px;
} }
&__reset { &__reset {
flex: 0 0 32%; flex: 0 0 135px;
height: 26px; height: 30px;
border-radius: @radius-round; border-radius: @radius-round;
background: @pill-bg; background: @pill-bg;
color: @text-color; color: @text-color;
font-size: @font-size-base; font-size: 14px;
&:hover { &:hover {
color: @primary-color; color: @primary-color;
@@ -457,11 +471,11 @@ function onClearChips(): void {
&__submit { &__submit {
flex: 1; flex: 1;
height: 26px; height: 30px;
border-radius: @radius-round; border-radius: @radius-round;
background: @primary-color; background: @primary-color;
color: @white; color: @white;
font-size: @font-size-base; font-size: 14px;
&:hover { &:hover {
background: @primary-hover; background: @primary-hover;

View File

@@ -143,6 +143,11 @@ onMounted(() => {
padding: 18px 12px 20px; padding: 18px 12px 20px;
border-radius: @radius-base; border-radius: @radius-base;
background: @white; background: @white;
// 搜索表单(ProjectToolbar)与下方项目表格间距 35px(老大指定)
.project-toolbar + .project-table {
margin-top: 35px;
}
} }
} }
</style> </style>