feat 项目中心表格调整
This commit is contained in:
@@ -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;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 22px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
&__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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user