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

View File

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