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

feat ui设计稿

Browse Source
This commit is contained in:
Ironsp
2026-09-30 15:55:36 +08:00
parent ce8210fb3f
commit 9ab6253c81
102 changed files with 4855 additions and 2359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -309,15 +309,15 @@ function clearChips(): void {
<style lang="less" scoped>
.case-filter {
flex-shrink: 0;
width: 300px;
padding: @spacing-lg 0 @spacing-base;
width: 397px; // 设计04 面板 516 × 0.77
padding: 12px 0 40px; // 顶 15 × 0.77 / 底 50 × 0.77
border-radius: @radius-base;
background: @white;
&__head,
&__group,
&__actions {
padding: 0 @spacing-base;
padding: 0 38px 0 27px; // 内容左 35 × 0.77 / 右 50 × 0.77
}
&__head {
@@ -325,13 +325,13 @@ function clearChips(): void {
}
&__title {
font-size: @font-size-lg;
font-weight: 600;
color: @heading-color;
font-size: 22px; // 设计 28 × 0.77
font-weight: 500;
color: @cases-filter-title;
}
&__link {
color: @primary-color;
color: @primary-strong;
font-size: @font-size-base;
&:hover {
@@ -343,25 +343,30 @@ function clearChips(): void {
margin-top: @spacing-lg;
}
// 标题 → 第一组（设计 11 × 0.77）
&__head + &__group {
margin-top: 9px;
}
&__group-title {
font-size: @font-size-base;
font-weight: 600;
color: @heading-color;
font-size: 18px; // 设计 24 × 0.77
font-weight: 500;
color: @cases-text;
}
/* 业务类型：整行可点，选中整行铺满底色 */
&__rows {
margin-top: @spacing-sm;
margin-top: 14px; // 设计 19 × 0.77
}
&__row {
.flex(row, flex-start, center);
gap: @spacing-sm;
gap: 9px; // 设计 12 × 0.77
width: 100%;
height: 36px;
padding: 0 @spacing-base;
color: @text-color;
font-size: @font-size-base;
height: 38px; // 行距 50 × 0.77
padding: 0;
color: @cases-text;
font-size: 15px; // 设计 20 × 0.77
text-align: left;
transition: background 0.2s;
@@ -371,7 +376,7 @@ function clearChips(): void {
&.is-active {
background: @filter-selected-bg;
color: @primary-color;
color: @primary-strong;
font-weight: 600;
}
}
@@ -379,22 +384,22 @@ function clearChips(): void {
&__box {
position: relative;
flex-shrink: 0;
width: 14px;
height: 14px;
border: 1px solid @border-color-dark;
width: 12px; // 设计 16 × 0.77
height: 12px;
border: 1px solid @cases-input-border;
border-radius: 2px;
.case-filter__row.is-active & {
border-color: @primary-color;
background: @primary-color;
border-color: @primary-strong;
background: @primary-strong;
&::after {
content: '';
position: absolute;
top: 1px;
left: 4px;
left: 3px;
width: 4px;
height: 7px;
height: 6px;
border: solid @white;
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
@@ -408,51 +413,55 @@ function clearChips(): void {
}
&__row-count {
color: @text-color-secondary;
color: @cases-muted;
font-weight: 400;
}
// 选中行的计数随行文字变蓝、加粗（设计15）
.case-filter__row.is-active &__row-count {
color: inherit;
font-weight: inherit;
}
/* 胶囊选项（两列；minmax(0,1fr) 防止内部长内容（日期区间）把列撑宽） */
&__pills {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: @spacing-sm;
margin-top: @spacing-sm;
gap: 18px 25px; // 行距 24 × 0.77 / 列距 33 × 0.77
margin-top: 15px; // 设计 21 × 0.77
}
&__pill {
height: 34px;
height: 41px; // 设计 53 × 0.77
padding: 0 @spacing-sm;
border-radius: @radius-round;
border-radius: @radius-base;
background: @pill-bg;
color: @text-color;
font-size: @font-size-base;
color: @cases-text;
font-size: 15px; // 设计 20 × 0.77
.ellipsis();
transition: all 0.2s;
&:hover {
color: @primary-color;
}
&.is-active {
background: @primary-color;
color: @white;
color: @primary-strong;
}
&.is-active,
&.is-light {
background: @pill-selected-bg;
color: @primary-color;
font-weight: 600;
color: @white;
font-weight: 500;
}
}
&__date {
grid-column: 1 / -1;
display: flex;
justify-content: center;
width: 100%;
min-width: 0;
height: 34px;
height: 41px;
padding: 0 @spacing-sm;
border-radius: @radius-round;
border-radius: @radius-base;
background: @input-bg;
box-shadow: none;
@@ -471,18 +480,18 @@ function clearChips(): void {
flex: 0 1 auto;
width: 76px;
background: transparent;
color: @text-color;
font-size: @font-size-sm;
color: @cases-text;
font-size: 15px;
&::placeholder {
color: @text-color-secondary;
color: @cases-text;
}
}
:deep(.el-range-separator) {
color: @text-color-secondary;
font-size: @font-size-sm;
line-height: 34px;
color: @cases-text;
font-size: 15px;
line-height: 41px;
}
&.is-focus {
@@ -492,8 +501,8 @@ function clearChips(): void {
/* 已选条件 */
&__selected {
margin-top: @spacing-lg;
padding: @spacing-base;
margin: 18px 38px 0 27px; // 上距 23 × 0.77，左右与内容对齐（50/35 × 0.77）
padding: 12px 18px 16px; // 设计 16/24/21 × 0.77
border-radius: @radius-base;
background: @chips-panel-bg;
}
@@ -503,31 +512,32 @@ function clearChips(): void {
}
&__selected-title {
color: @primary-color;
font-size: @font-size-base;
font-weight: 600;
color: @cases-text;
font-size: 15px; // 设计 20 × 0.77
font-weight: 500;
}
&__selected-empty {
margin-top: @spacing-sm;
color: @text-color-secondary;
color: @cases-muted;
font-size: @font-size-sm;
}
&__chips {
.flex(row, flex-start, center);
flex-wrap: wrap;
gap: @spacing-sm;
margin-top: @spacing-sm;
gap: 11px 10px; // 行距 14 × 0.77 / 列距 13 × 0.77
margin-top: 12px; // 设计 16 × 0.77
}
&__chip {
height: 26px;
height: 25px; // 设计 32 × 0.77
padding: 0 @spacing-sm;
border-radius: @radius-round;
background: @white;
color: @primary-color;
font-size: @font-size-sm;
color: @cases-accent;
font-size: 11px; // 设计 14 → 10.8，取可读下限 11
font-weight: 500;
transition: color 0.2s;
&:hover {
@@ -538,36 +548,37 @@ function clearChips(): void {
/* 底部操作 */
&__actions {
.flex(row, flex-start, center);
gap: @spacing-sm;
margin-top: @spacing-base;
gap: 10px; // 设计 13 × 0.77
margin-top: 23px; // 设计 30 × 0.77
}
&__reset {
width: 88px;
height: 36px;
width: 104px; // 设计 135 × 0.77
height: 23px; // 设计 30 × 0.77
border-radius: @radius-round;
background: @pill-bg;
color: @text-color;
font-size: @font-size-base;
transition: color 0.2s;
background: @cases-reset-bg;
color: @black;
font-size: 11px; // 设计 14 → 10.8，取可读下限 11
font-weight: 400;
transition: filter 0.2s;
&:hover {
color: @primary-color;
filter: brightness(0.96);
}
}
&__confirm {
flex: 1;
height: 36px;
height: 23px;
border-radius: @radius-round;
background: @primary-color;
background: @cases-confirm;
color: @white;
font-size: @font-size-base;
font-weight: 600;
font-size: 11px;
font-weight: 400;
transition: background 0.2s;
&:hover {
background: @primary-hover;
background: @cases-accent;
}
}
}

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

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

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

@@ -60,65 +60,68 @@ const keyword = computed<string>({
<style lang="less" scoped>
.case-search {
.flex(row, flex-start, center);
gap: @spacing-sm;
padding: @spacing-base @spacing-lg;
gap: 18px; // 按钮间距 24 × 0.77
padding: 30px 36px; // 卡片 128 高、输入 49 高：上下 40 × 0.77 / 左右 47 × 0.77
border-radius: @radius-base;
background: @white;
&__field {
position: relative;
flex: 1;
max-width: 520px;
max-width: 456px; // 设计输入框 592 × 0.77
margin-right: 28px; // 与按钮总间距 60 × 0.77（叠加 bar gap 18）
}
&__icon {
position: absolute;
top: 50%;
left: 12px;
width: 16px;
height: 16px;
right: 16px; // 设计放大镜在输入框右侧
left: auto;
width: 20px; // 设计 27 × 0.77
height: 20px;
transform: translateY(-50%);
fill: none;
stroke: @text-color-secondary;
stroke: @cases-icon;
stroke-width: 1.8;
}
&__input {
width: 100%;
height: 36px;
padding: 0 @spacing-base 0 36px;
border: 1px solid transparent;
border-radius: @radius-base;
background: @input-bg;
color: @text-color;
font-size: @font-size-base;
height: 38px; // 设计 49 × 0.77
padding: 0 44px 0 16px;
border: 1px solid @cases-input-border;
border-radius: @radius-sm;
background: @white;
color: @cases-text;
font-size: 15px; // 设计 20 × 0.77
outline: none;
transition: border-color 0.2s;
&::placeholder {
color: @text-color-secondary;
color: @cases-input-border; // 设计占位 @cases-input-border
}
&:focus {
border-color: @primary-color;
border-color: @cases-accent;
}
}
&__btn {
height: 36px;
padding: 0 @spacing-lg;
border-radius: @radius-base;
background: @pill-bg;
color: @text-color;
font-size: @font-size-base;
min-width: 77px; // 设计 100 × 0.77
height: 38px; // 设计 49 × 0.77
padding: 0 @spacing-base;
border-radius: @radius-sm;
background: @cases-accent; // 设计 重置/搜索 均为 rgba(7,92,255)
color: @white;
font-size: 15px; // 设计 20 × 0.77
transition: all 0.2s;
&:hover {
color: @primary-color;
background: @primary-hover;
}
&--primary {
background: @primary-color;
background: @cases-accent;
color: @white;
&:hover {