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

feat ui设计稿bug修复

Browse Source
This commit is contained in:
Ironsp
2026-10-01 10:53:13 +08:00
parent 9ab6253c81
commit 1601bdd82c
89 changed files with 4741 additions and 3652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/views/cases/cpns/CasesFilter.vue
View File

@@ -309,15 +309,17 @@ function clearChips(): void {
<style lang="less" scoped>
.case-filter {
flex-shrink: 0;
width: 397px; // 设计04 面板 516 × 0.77
padding: 12px 0 40px; // 顶 15 × 0.77 / 底 50 × 0.77
// 设计稿筛选面板 矩形 148286 @(70,272) 516×1461 白底
width: 516px;
padding: 15px 0 40px;
border-radius: @radius-base;
background: @white;
&__head,
&__group,
&__actions {
padding: 0 38px 0 27px; // 内容左 35 × 0.77 / 右 50 × 0.77
// 设计稿内容左 x105 → 卡内 x35；行右 x536 → 卡内右 50
padding: 0 50px 0 35px;
}
&__head {
@@ -325,14 +327,16 @@ function clearChips(): void {
}
&__title {
font-size: 22px; // 设计 28 × 0.77
// 设计 @(105,287) 28/500 #222222
font-size: 28px;
font-weight: 500;
line-height: 41px;
color: @cases-filter-title;
}
&__link {
color: @primary-strong;
font-size: @font-size-base;
font-size: 16px;
&:hover {
color: @primary-hover;
@@ -340,33 +344,35 @@ function clearChips(): void {
}
&__group {
margin-top: @spacing-lg;
margin-top: 24px;
}
// 标题 → 第一组（设计 11 × 0.77）
// 标题 → 第一组（设计 287+41=328 → 业务类型标题 339）
&__head + &__group {
margin-top: 9px;
margin-top: 11px;
}
&__group-title {
font-size: 18px; // 设计 24 × 0.77
// 设计 @(105,339) 24/500 #333333
font-size: 24px;
font-weight: 500;
line-height: 35px;
color: @cases-text;
}
/* 业务类型：整行可点，选中整行铺满底色 */
/* 业务类型：整行可点（设计行高 50，文案 20/400） */
&__rows {
margin-top: 14px; // 设计 19 × 0.77
margin-top: 19px;
}
&__row {
.flex(row, flex-start, center);
gap: 9px; // 设计 12 × 0.77
gap: 12px;
width: 100%;
height: 38px; // 行距 50 × 0.77
height: 50px;
padding: 0;
color: @cases-text;
font-size: 15px; // 设计 20 × 0.77
font-size: 20px;
text-align: left;
transition: background 0.2s;
@@ -384,8 +390,8 @@ function clearChips(): void {
&__box {
position: relative;
flex-shrink: 0;
width: 12px; // 设计 16 × 0.77
height: 12px;
width: 16px;
height: 16px;
border: 1px solid @cases-input-border;
border-radius: 2px;
@@ -397,11 +403,11 @@ function clearChips(): void {
content: '';
position: absolute;
top: 1px;
left: 3px;
width: 4px;
height: 6px;
left: 4px;
width: 5px;
height: 8px;
border: solid @white;
border-width: 0 1.5px 1.5px 0;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
}
@@ -413,31 +419,32 @@ function clearChips(): void {
}
&__row-count {
// 设计计数 16/500 #666666
color: @cases-muted;
font-weight: 400;
font-size: 16px;
font-weight: 500;
}
// 选中行的计数随行文字变蓝、加粗（设计15）
.case-filter__row.is-active &__row-count {
color: inherit;
font-weight: inherit;
}
/* 胶囊选项（两列；minmax(0,1fr) 防止内部长内容（日期区间）把列撑宽） */
/* 胶囊选项（两列；设计胶囊高 53、行距 24、列距 33） */
&__pills {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 25px; // 行距 24 × 0.77 / 列距 33 × 0.77
margin-top: 15px; // 设计 21 × 0.77
gap: 24px 33px;
margin-top: 21px;
}
&__pill {
height: 41px; // 设计 53 × 0.77
height: 53px;
padding: 0 @spacing-sm;
border-radius: @radius-base;
background: @pill-bg;
color: @cases-text;
font-size: 15px; // 设计 20 × 0.77
font-size: 20px;
.ellipsis();
transition: all 0.2s;
@@ -459,7 +466,7 @@ function clearChips(): void {
justify-content: center;
width: 100%;
min-width: 0;
height: 41px;
height: 53px;
padding: 0 @spacing-sm;
border-radius: @radius-base;
background: @input-bg;
@@ -478,10 +485,10 @@ function clearChips(): void {
:deep(.el-range-input) {
flex: 0 1 auto;
width: 76px;
width: 92px;
background: transparent;
color: @cases-text;
font-size: 15px;
font-size: 20px;
&::placeholder {
color: @cases-text;
@@ -490,8 +497,8 @@ function clearChips(): void {
:deep(.el-range-separator) {
color: @cases-text;
font-size: 15px;
line-height: 41px;
font-size: 20px;
line-height: 53px;
}
&.is-focus {
@@ -501,8 +508,8 @@ function clearChips(): void {
/* 已选条件 */
&__selected {
margin: 18px 38px 0 27px; // 上距 23 × 0.77，左右与内容对齐（50/35 × 0.77）
padding: 12px 18px 16px; // 设计 16/24/21 × 0.77
margin: 23px 50px 0 35px;
padding: 16px 24px 21px;
border-radius: @radius-base;
background: @chips-panel-bg;
}
@@ -513,30 +520,30 @@ function clearChips(): void {
&__selected-title {
color: @cases-text;
font-size: 15px; // 设计 20 × 0.77
font-size: 20px;
font-weight: 500;
}
&__selected-empty {
margin-top: @spacing-sm;
color: @cases-muted;
font-size: @font-size-sm;
font-size: 14px;
}
&__chips {
.flex(row, flex-start, center);
flex-wrap: wrap;
gap: 11px 10px; // 行距 14 × 0.77 / 列距 13 × 0.77
margin-top: 12px; // 设计 16 × 0.77
gap: 14px 13px;
margin-top: 16px;
}
&__chip {
height: 25px; // 设计 32 × 0.77
height: 32px;
padding: 0 @spacing-sm;
border-radius: @radius-round;
background: @white;
color: @cases-accent;
font-size: 11px; // 设计 14 → 10.8，取可读下限 11
font-size: 14px;
font-weight: 500;
transition: color 0.2s;
@@ -548,17 +555,17 @@ function clearChips(): void {
/* 底部操作 */
&__actions {
.flex(row, flex-start, center);
gap: 10px; // 设计 13 × 0.77
margin-top: 23px; // 设计 30 × 0.77
gap: 13px;
margin-top: 30px;
}
&__reset {
width: 104px; // 设计 135 × 0.77
height: 23px; // 设计 30 × 0.77
width: 135px;
height: 30px;
border-radius: @radius-round;
background: @cases-reset-bg;
color: @black;
font-size: 11px; // 设计 14 → 10.8，取可读下限 11
font-size: 14px;
font-weight: 400;
transition: filter 0.2s;
@@ -569,11 +576,11 @@ function clearChips(): void {
&__confirm {
flex: 1;
height: 23px;
height: 30px;
border-radius: @radius-round;
background: @cases-confirm;
color: @white;
font-size: 11px;
font-size: 14px;
font-weight: 400;
transition: background 0.2s;

10
src/views/cases/cpns/CasesGrid.vue
View File

@@ -41,22 +41,24 @@ const emit = defineEmits<{
<style lang="less" scoped>
.cases-grid {
&__total {
font-size: 15px; // 设计15 计数 20 × 0.77
// 设计计数 20px / 700 / #121212
font-size: 20px;
font-weight: 700;
color: @heading-color;
}
// 设计卡片 396×267，列 x606/1030/1454 → 列距 28，行 y423/713 → 行距 23
&__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px 22px; // 设计04 行距 23 / 列距 28 × 0.77
margin-top: 12px; // 设计15 计数 → 卡片 15 × 0.77
gap: 23px 28px;
margin-top: 12px;
}
&__empty {
padding: @spacing-xxl 0;
text-align: center;
font-size: @font-size-base;
font-size: 16px;
}
}
</style>

43
src/views/cases/cpns/CasesSearchBar.vue
View File

@@ -60,25 +60,27 @@ const keyword = computed<string>({
<style lang="less" scoped>
.case-search {
.flex(row, flex-start, center);
gap: 18px; // 按钮间距 24 × 0.77
padding: 30px 36px; // 卡片 128 高、输入 49 高：上下 40 × 0.77 / 左右 47 × 0.77
// 设计稿搜索卡 矩形 148317 @(606,272) 1244×128；输入框 @(642,312) 592×49
gap: 24px;
height: 128px;
box-sizing: border-box;
padding: 0 36px;
border-radius: @radius-base;
background: @white;
&__field {
position: relative;
flex: 1;
max-width: 456px; // 设计输入框 592 × 0.77
margin-right: 28px; // 与按钮总间距 60 × 0.77（叠加 bar gap 18）
// 设计输入框 592 宽
flex: 0 0 592px;
}
&__icon {
position: absolute;
top: 50%;
right: 16px; // 设计放大镜在输入框右侧
right: 16px;
left: auto;
width: 20px; // 设计 27 × 0.77
height: 20px;
width: 27px;
height: 27px;
transform: translateY(-50%);
fill: none;
stroke: @cases-icon;
@@ -87,18 +89,19 @@ const keyword = computed<string>({
&__input {
width: 100%;
height: 38px; // 设计 49 × 0.77
padding: 0 44px 0 16px;
height: 49px;
padding: 0 52px 0 20px;
border: 1px solid @cases-input-border;
border-radius: @radius-sm;
background: @white;
color: @cases-text;
font-size: 15px; // 设计 20 × 0.77
font-size: 20px;
outline: none;
transition: border-color 0.2s;
&::placeholder {
color: @cases-input-border; // 设计占位 @cases-input-border
// 设计 placeholder @(660,322) 20/400 #999999
color: @text-color-disabled;
}
&:focus {
@@ -107,13 +110,15 @@ const keyword = computed<string>({
}
&__btn {
min-width: 77px; // 设计 100 × 0.77
height: 38px; // 设计 49 × 0.77
// 设计按钮文字 20/400 #FFFFFF，白底蓝字按钮宽 100
min-width: 100px;
height: 49px;
padding: 0 @spacing-base;
border-radius: @radius-sm;
background: @cases-accent; // 设计 重置/搜索 均为 rgba(7,92,255)
background: @cases-accent;
color: @white;
font-size: 15px; // 设计 20 × 0.77
font-size: 20px;
font-weight: 400;
transition: all 0.2s;
&:hover {
@@ -136,7 +141,7 @@ const keyword = computed<string>({
gap: @spacing-xs;
margin-left: auto;
color: @heading-color;
font-size: @font-size-base;
font-size: 16px;
transition: color 0.2s;
&:hover,
@@ -150,8 +155,8 @@ const keyword = computed<string>({
}
&-icon {
width: 16px;
height: 16px;
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;