zhangchao/cz-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 样式整改

Browse Source
This commit is contained in:
Ironsp
2026-10-13 15:12:51 +08:00
parent 631d54f269
commit b0e9fe6450
56 changed files with 1242 additions and 1143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/components/CasesFilter.vue
View File

@@ -292,15 +292,15 @@ function clearChips(): void {
<style lang="less" scoped>
.case-filter {
flex-shrink: 0;
width: 516px;
padding: 15px 0 40px;
width: @cases-filter-width;
padding: @spacing-lg 0 @spacing-xl;
border-radius: @radius-base;
background: @white;
&__head,
&__group,
&__actions {
padding: 0 50px 0 35px;
padding: 0 @spacing-lg;
}
&__head {
@@ -308,15 +308,15 @@ function clearChips(): void {
}
&__title {
font-size: 28px;
font-weight: 500;
line-height: 41px;
font-size: @font-size-xl;
font-weight: 600;
line-height: 1.4;
color: @cases-filter-title;
}
&__link {
color: @primary-strong;
font-size: 16px;
font-size: @font-size-sm;
&:hover {
color: @primary-hover;
@@ -324,32 +324,36 @@ function clearChips(): void {
}
&__group {
margin-top: 24px;
margin-top: @spacing-lg;
}
&__head + &__group {
margin-top: 11px;
margin-top: @spacing-base;
}
&__group-title {
font-size: 24px;
font-size: @font-size-md;
font-weight: 500;
line-height: 35px;
line-height: 1.4;
color: @cases-text;
}
&__rows {
margin-top: 19px;
margin-top: @spacing-sm;
display: flex;
flex-direction: column;
gap: 2px;
}
&__row {
.flex(row, flex-start, center);
gap: 12px;
gap: @spacing-sm;
width: 100%;
height: 50px;
padding: 0;
height: 40px;
padding: 0 @spacing-sm;
border-radius: @radius-sm;
color: @cases-text;
font-size: 20px;
font-size: @font-size-base;
text-align: left;
transition: background 0.2s;
@@ -367,8 +371,8 @@ function clearChips(): void {
&__box {
position: relative;
flex-shrink: 0;
width: 16px;
height: 16px;
width: 14px;
height: 14px;
border: 1px solid @cases-input-border;
border-radius: 2px;
@@ -380,9 +384,9 @@ function clearChips(): void {
content: '';
position: absolute;
top: 1px;
left: 4px;
width: 5px;
height: 8px;
left: 3px;
width: 4px;
height: 7px;
border: solid @white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
@@ -397,7 +401,7 @@ function clearChips(): void {
&__row-count {
color: @cases-muted;
font-size: 16px;
font-size: @font-size-sm;
font-weight: 500;
}
@@ -409,17 +413,17 @@ function clearChips(): void {
&__pills {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 33px;
margin-top: 21px;
gap: @spacing-sm;
margin-top: @spacing-sm;
}
&__pill {
height: 53px;
height: 36px;
padding: 0 @spacing-sm;
border-radius: @radius-base;
background: @pill-bg;
color: @cases-text;
font-size: 20px;
font-size: @font-size-sm;
.ellipsis();
transition: all 0.2s;
@@ -429,15 +433,14 @@ function clearChips(): void {
&.is-active,
&.is-light {
background: @pill-selected-bg;
color: @white;
background: @filter-selected-bg;
color: @primary-strong;
font-weight: 500;
}
}
// ElDatePicker 有两层元素：外层 div.case-filter__date 与内部 .el-range-editor，
// 真正控制盒子尺寸的是内层。所以尺寸/背景/圆角都要用 :deep() 打到内层，
// 且不能写在 &__date 上——那样只命中外层，视觉上看不到变化。
// 真正控制盒子尺寸的是内层。所以尺寸/背景/圆角都要用 :deep() 打到内层。
&__date-wrap {
grid-column: 1 / -1;
width: 100%;
@@ -448,7 +451,7 @@ function clearChips(): void {
align-items: center;
width: 100%;
min-width: 0;
height: 53px;
height: 36px;
padding: 0 @spacing-sm;
border-radius: @radius-base;
background: @input-bg;
@@ -461,7 +464,7 @@ function clearChips(): void {
&__date {
justify-content: center;
min-width: 0;
height: 53px;
height: 36px;
padding: 0 @spacing-sm;
border-radius: @radius-base;
background: @input-bg;
@@ -481,32 +484,33 @@ function clearChips(): void {
:deep(.el-range-input) {
flex: 0 1 auto;
width: 92px;
width: 88px;
background: transparent;
color: @cases-text;
font-size: 20px;
font-size: @font-size-sm;
&::placeholder {
color: @cases-text;
color: @cases-muted;
}
}
:deep(.el-range-separator) {
flex: 0 0 auto;
margin: 0 @spacing-xs;
color: @cases-text;
font-size: 20px;
line-height: 53px;
color: @cases-muted;
font-size: @font-size-sm;
line-height: 36px;
}
&.is-focus {
background: @input-bg;
background: @white;
box-shadow: 0 0 0 1px @cases-accent inset;
}
}
&__selected {
margin: 23px 50px 0 35px;
padding: 16px 24px 21px;
margin: @spacing-lg @spacing-lg 0;
padding: @spacing-base;
border-radius: @radius-base;
background: @chips-panel-bg;
}
@@ -517,30 +521,30 @@ function clearChips(): void {
&__selected-title {
color: @cases-text;
font-size: 20px;
font-size: @font-size-base;
font-weight: 500;
}
&__selected-empty {
margin-top: @spacing-sm;
color: @cases-muted;
font-size: 14px;
font-size: @font-size-sm;
}
&__chips {
.flex(row, flex-start, center);
flex-wrap: wrap;
gap: 14px 13px;
margin-top: 16px;
gap: @spacing-sm;
margin-top: @spacing-sm;
}
&__chip {
height: 32px;
height: 28px;
padding: 0 @spacing-sm;
border-radius: @radius-round;
background: @white;
color: @cases-accent;
font-size: 14px;
font-size: @font-size-sm;
font-weight: 500;
transition: color 0.2s;
@@ -551,32 +555,32 @@ function clearChips(): void {
&__actions {
.flex(row, flex-start, center);
gap: 13px;
margin-top: 30px;
gap: @spacing-sm;
margin-top: @spacing-lg;
}
&__reset {
width: 135px;
height: 30px;
flex: 0 0 88px;
height: 32px;
border-radius: @radius-round;
background: @cases-reset-bg;
color: @black;
font-size: 14px;
color: @text-color;
font-size: @font-size-sm;
font-weight: 400;
transition: filter 0.2s;
transition: color 0.2s;
&:hover {
filter: brightness(0.96);
color: @primary-color;
}
}
&__confirm {
flex: 1;
height: 30px;
height: 32px;
border-radius: @radius-round;
background: @cases-confirm;
color: @white;
font-size: 14px;
font-size: @font-size-sm;
font-weight: 400;
transition: background 0.2s;