feat 样式整改
This commit is contained in:
Ironsp
@@ -97,16 +97,16 @@ const meta = computed<Array<{ label: string; value: string }>>(() => [
|
||||
|
||||
&__tag {
|
||||
position: absolute;
|
||||
top: 87px;
|
||||
left: 22px;
|
||||
height: 44px;
|
||||
padding: 0 14px;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
height: 28px;
|
||||
padding: 0 @spacing-sm;
|
||||
border-radius: @radius-sm;
|
||||
background: @primary-strong;
|
||||
color: @white;
|
||||
font-size: 28px;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 500;
|
||||
line-height: 44px;
|
||||
line-height: 28px;
|
||||
|
||||
&--hardware {
|
||||
background: @tag-hardware;
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -62,29 +62,27 @@ const keyword = computed<string>({
|
||||
<style lang="less" scoped>
|
||||
.case-search {
|
||||
.flex(row, flex-start, center);
|
||||
gap: 24px;
|
||||
gap: @spacing-base;
|
||||
width: 100%;
|
||||
height: 128px;
|
||||
min-height: 64px;
|
||||
box-sizing: border-box;
|
||||
// 设计稿 #31：输入框 x=653（栏左 606 + 47），重置 1305，搜索 1429
|
||||
padding: 0 47px;
|
||||
padding: 0 @spacing-lg;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
|
||||
&__field {
|
||||
position: relative;
|
||||
// 输入框右边界 1245 → 重置按钮 1305，设计稿间距 60
|
||||
margin-right: 36px;
|
||||
flex: 0 0 592px;
|
||||
flex: 0 1 360px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 16px;
|
||||
right: @spacing-base;
|
||||
left: auto;
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: translateY(-50%);
|
||||
fill: none;
|
||||
stroke: @cases-icon;
|
||||
@@ -93,15 +91,15 @@ const keyword = computed<string>({
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
padding: 0 52px 0 20px;
|
||||
height: 36px;
|
||||
padding: 0 40px 0 @spacing-base;
|
||||
border: 1px solid @cases-input-border;
|
||||
border-radius: @radius-sm;
|
||||
background: @white;
|
||||
border-radius: @radius-round;
|
||||
background: @input-bg;
|
||||
color: @cases-text;
|
||||
font-size: 20px;
|
||||
font-size: @font-size-base;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
transition: border-color 0.2s, background-color 0.2s;
|
||||
|
||||
&::placeholder {
|
||||
color: @text-color-disabled;
|
||||
@@ -109,22 +107,24 @@ const keyword = computed<string>({
|
||||
|
||||
&:focus {
|
||||
border-color: @cases-accent;
|
||||
background: @white;
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
min-width: 100px;
|
||||
height: 49px;
|
||||
padding: 0 @spacing-base;
|
||||
border-radius: @radius-sm;
|
||||
background: @cases-accent;
|
||||
color: @white;
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
min-width: 72px;
|
||||
height: 36px;
|
||||
padding: 0 @spacing-lg;
|
||||
border-radius: @radius-round;
|
||||
background: @pill-bg;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 400;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: @primary-hover;
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
@@ -143,7 +143,7 @@ const keyword = computed<string>({
|
||||
gap: @spacing-xs;
|
||||
margin-left: auto;
|
||||
color: @heading-color;
|
||||
font-size: 16px;
|
||||
font-size: @font-size-base;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover,
|
||||
|
||||
@@ -71,54 +71,55 @@ const emit = defineEmits<{
|
||||
|
||||
<style lang="less" scoped>
|
||||
.filter-panel {
|
||||
padding: 24px 36px;
|
||||
padding: @spacing-lg;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
|
||||
&__bar {
|
||||
.flex(row, flex-start);
|
||||
gap: 18px;
|
||||
.flex(row, flex-start, center);
|
||||
gap: @spacing-base;
|
||||
}
|
||||
|
||||
&__input {
|
||||
flex: 1;
|
||||
max-width: 456px;
|
||||
margin-right: 28px;
|
||||
height: 38px;
|
||||
max-width: 360px;
|
||||
margin-right: 0;
|
||||
height: 36px;
|
||||
padding: 0 @spacing-base;
|
||||
border: 1px solid @cases-input-border;
|
||||
border-radius: @radius-sm;
|
||||
background: @white;
|
||||
color: @cases-text;
|
||||
font-size: 15px;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-round;
|
||||
background: @input-bg;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
transition: border-color 0.2s, background-color 0.2s;
|
||||
|
||||
&::placeholder {
|
||||
color: @cases-input-border;
|
||||
color: @text-color-disabled;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: @cases-accent;
|
||||
border-color: @primary-color;
|
||||
background: @white;
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
min-width: 77px;
|
||||
height: 38px;
|
||||
padding: 0 @spacing-base;
|
||||
border-radius: @radius-sm;
|
||||
background: @cases-accent;
|
||||
color: @white;
|
||||
font-size: 15px;
|
||||
min-width: 72px;
|
||||
height: 36px;
|
||||
padding: 0 @spacing-lg;
|
||||
border-radius: @radius-round;
|
||||
background: @pill-bg;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: @primary-hover;
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background: @cases-accent;
|
||||
background: @primary-color;
|
||||
color: @white;
|
||||
|
||||
&:hover {
|
||||
@@ -131,26 +132,26 @@ const emit = defineEmits<{
|
||||
&__chips {
|
||||
.flex(row, flex-start, center);
|
||||
flex-wrap: wrap;
|
||||
gap: 11px 10px;
|
||||
gap: @spacing-sm;
|
||||
margin-top: @spacing-base;
|
||||
padding: 12px 18px 16px;
|
||||
padding: @spacing-base;
|
||||
border-radius: @radius-base;
|
||||
background: @chips-panel-bg;
|
||||
font-size: 15px;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
&__chips-label {
|
||||
color: @cases-text;
|
||||
color: @text-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__chip {
|
||||
height: 25px;
|
||||
height: 28px;
|
||||
padding: 0 @spacing-sm;
|
||||
border-radius: @radius-round;
|
||||
background: @white;
|
||||
color: @cases-accent;
|
||||
font-size: 11px;
|
||||
color: @primary-color;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
|
||||
|
||||
@@ -23,25 +23,25 @@ defineProps<Props>()
|
||||
<style lang="less" scoped>
|
||||
.page-head {
|
||||
background: @white;
|
||||
padding-bottom: 72px;
|
||||
padding: @spacing-lg 0;
|
||||
border-bottom: 1px solid @border-color;
|
||||
|
||||
&__title {
|
||||
padding-top: 52px;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 29px;
|
||||
color: @finance-ink;
|
||||
padding-top: 0;
|
||||
font-size: @font-size-title;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&__slogan {
|
||||
// 设计稿 #20：slogan 水平居中（当前唯一使用方为财务中心页）
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
padding-bottom: 0;
|
||||
margin-top: 9px;
|
||||
font-size: 13px;
|
||||
margin-top: @spacing-sm;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 400;
|
||||
line-height: 17px;
|
||||
color: @finance-muted-text;
|
||||
line-height: 1.5;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -67,18 +67,18 @@ function go(page: number): void {
|
||||
.pagination {
|
||||
.flex(row, center);
|
||||
gap: @spacing-xs;
|
||||
padding: 12px 0;
|
||||
padding: @spacing-base 0;
|
||||
|
||||
&__btn {
|
||||
.flex(row, center);
|
||||
min-width: 20px;
|
||||
height: 25px;
|
||||
padding: 0 3px;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
padding: 0 6px;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-sm;
|
||||
background: @white;
|
||||
color: @text-color-secondary;
|
||||
font-size: 11px;
|
||||
color: @text-color;
|
||||
font-size: @font-size-sm;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover:not(:disabled):not(.is-ellipsis) {
|
||||
@@ -87,9 +87,10 @@ function go(page: number): void {
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border-color: @cases-page-active-bg;
|
||||
background: @cases-page-active-bg;
|
||||
border-color: @primary-strong;
|
||||
background: @primary-light;
|
||||
color: @primary-strong;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.is-ellipsis {
|
||||
|
||||
@@ -38,7 +38,7 @@ function onGetCode(): void {
|
||||
min-width: 0;
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #dde1e7;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-sm;
|
||||
background: @white;
|
||||
font-size: 13px;
|
||||
|
||||
@@ -90,10 +90,10 @@
|
||||
@shadow-lg: 0 4px 16px rgba(31, 39, 51, 0.12);
|
||||
|
||||
@filter-selected-bg: #e7eeff;
|
||||
@pill-bg: #ededed;
|
||||
@pill-bg: #f5f6f8;
|
||||
@pill-selected-bg: #075cff;
|
||||
@chips-panel-bg: #eaf1ff;
|
||||
@input-bg: #ededed;
|
||||
@input-bg: #f5f6f8;
|
||||
@tag-hardware: #4caf50;
|
||||
@tag-iot: #5720ba;
|
||||
@tag-manufacturing: #ff8f1f;
|
||||
@@ -105,19 +105,23 @@
|
||||
@cases-filter-title: #222222;
|
||||
@cases-text: #333333;
|
||||
@cases-muted: #666666;
|
||||
@cases-input-border: #999999;
|
||||
@cases-input-border: #cdd3dd;
|
||||
@cases-icon: #797979;
|
||||
@cases-reset-bg: #f0f0f0;
|
||||
@cases-card-border: #e1dfdf;
|
||||
@cases-card-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
|
||||
@cases-reset-bg: #f5f6f8;
|
||||
@cases-card-border: #e4e7ec;
|
||||
@cases-card-shadow: 0 2px 8px rgba(31, 39, 51, 0.06);
|
||||
@cases-page-active-bg: #e0e9fa;
|
||||
@cases-filter-width: 320px;
|
||||
|
||||
@demand-selected-bg: #024fff;
|
||||
@demand-accent: #024fff;
|
||||
@demand-secondary-bg: #075cff;
|
||||
|
||||
@project-table-head-bg: #e8e8e8;
|
||||
@project-table-line: #bbbbbb;
|
||||
@project-table-head-bg: #f7f8fa;
|
||||
@project-table-line: #e4e7ec;
|
||||
@project-filter-width: 320px;
|
||||
@project-pill-bg: #f5f6f8;
|
||||
@project-input-bg: #f5f6f8;
|
||||
|
||||
@project-accent: #024fff;
|
||||
@project-track: #edeff2;
|
||||
@@ -181,8 +185,8 @@
|
||||
@demand-ink: #121212;
|
||||
@demand-heading: #333333;
|
||||
@demand-subtitle: #666666;
|
||||
@demand-line: #999999;
|
||||
@demand-upload-bg: #ededed;
|
||||
@demand-line: #e4e7ec;
|
||||
@demand-upload-bg: #f5f6f8;
|
||||
@demand-radio-idle: #c7c2c2;
|
||||
@auth-gradient-from: #505be8;
|
||||
@auth-gradient-to: #8b3fe8;
|
||||
@@ -208,7 +212,7 @@
|
||||
@project-cell: #4b5563;
|
||||
@project-card: #ffffff;
|
||||
@project-field-bg: #f3f4f6;
|
||||
@project-input-border: #dde1e7;
|
||||
@project-input-border: #e4e7ec;
|
||||
@project-head-bg: #f7f8fa;
|
||||
@project-upload-tag: #ef4444;
|
||||
@project-banner-soft: #fdeeee;
|
||||
@@ -223,12 +227,12 @@
|
||||
|
||||
@contract-accent: #075cff;
|
||||
@contract-muted: #666666;
|
||||
@contract-head-text: #222222;
|
||||
@contract-head-text: #666666;
|
||||
@contract-cell-text: #333333;
|
||||
@contract-line: #999999;
|
||||
@contract-table-head-bg: #ededed;
|
||||
@contract-line: #e4e7ec;
|
||||
@contract-table-head-bg: #f7f8fa;
|
||||
@contract-placeholder: #b3b9c4;
|
||||
@contract-reset-bg: #eef0f3;
|
||||
@contract-reset-bg: #f5f6f8;
|
||||
@contract-qr-bg: #d6d6d6;
|
||||
|
||||
@finance-hero-gradient: linear-gradient(
|
||||
@@ -239,8 +243,8 @@
|
||||
);
|
||||
@finance-chart-bar: #4a90c4;
|
||||
@finance-chart-grid: #edeef2;
|
||||
@finance-table-head-bg: #f1f3f5;
|
||||
@finance-field-bg: #f3f4f6;
|
||||
@finance-table-head-bg: #f7f8fa;
|
||||
@finance-field-bg: #f5f6f8;
|
||||
@finance-page-active: #d5e2fe;
|
||||
@finance-summary-cta: #ffb754;
|
||||
@finance-result-circle: #7ed321;
|
||||
@@ -252,7 +256,7 @@
|
||||
@profile-nav-active-bg: #e7eeff;
|
||||
@profile-card-border: #f0f1f3;
|
||||
@profile-line: #e5e7eb;
|
||||
@profile-input-border: #dde1e7;
|
||||
@profile-input-border: #e4e7ec;
|
||||
@profile-radius: 6px;
|
||||
@profile-page-bg: #f4f5f9;
|
||||
@profile-ink: #1f2937;
|
||||
|
||||
@@ -30,18 +30,26 @@ const coverStyle = computed(() =>
|
||||
<style lang="less" scoped>
|
||||
.case-hero {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
width: auto;
|
||||
max-width: @home-content;
|
||||
height: 180px;
|
||||
margin: 0 @home-gutter;
|
||||
border-radius: @radius-base;
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
margin: 0 @spacing-lg;
|
||||
}
|
||||
background-color: @primary-color;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, rgba(15, 23, 42, 0) 42%, rgba(15, 23, 42, 0.55));
|
||||
background: linear-gradient(180deg, fade(@black, 0%) 40%, fade(@black, 45%));
|
||||
}
|
||||
|
||||
&__inner {
|
||||
@@ -64,9 +72,9 @@ const coverStyle = computed(() =>
|
||||
|
||||
&__title {
|
||||
color: @white;
|
||||
font-size: @font-size-xxl;
|
||||
font-size: @font-size-title;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
|
||||
text-shadow: 0 1px 8px fade(@black, 35%);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
@@ -75,12 +75,14 @@ onMounted(load)
|
||||
|
||||
<style lang="less" scoped>
|
||||
.case-detail {
|
||||
padding-bottom: @spacing-xxl;
|
||||
min-height: 100%;
|
||||
padding-bottom: @spacing-page-bottom;
|
||||
background: @bg-color;
|
||||
|
||||
&__crumb {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
font-size: @font-size-base;
|
||||
padding-top: @spacing-base;
|
||||
padding-bottom: @spacing-base;
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
|
||||
&__main {
|
||||
@@ -91,11 +93,11 @@ onMounted(load)
|
||||
|
||||
&__cta {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border-radius: @radius-base;
|
||||
height: 40px;
|
||||
border-radius: @radius-round;
|
||||
background: @primary-color;
|
||||
color: @white;
|
||||
font-size: @font-size-lg;
|
||||
font-size: @font-size-base;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
|
||||
|
||||
@@ -109,53 +109,49 @@ onMounted(() => {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cases {
|
||||
padding-bottom: 78px;
|
||||
min-height: 100%;
|
||||
padding-bottom: @spacing-page-bottom;
|
||||
background: @bg-color;
|
||||
|
||||
&__hero {
|
||||
height: 179px;
|
||||
box-sizing: border-box;
|
||||
padding-top: 32px;
|
||||
padding: @spacing-lg 0;
|
||||
background: @white;
|
||||
border-bottom: 1px solid @border-color;
|
||||
}
|
||||
|
||||
// 设计稿 #31：hero 标题 x=112、副标题 x=112；
|
||||
// 主体筛选栏 x=70、右侧操作区右边界 1850。两套留白并存，
|
||||
// 所以 hero 内容单独内缩，不动全局 .container 的 70px 留白。
|
||||
&__hero-inner {
|
||||
padding-left: 112px;
|
||||
padding-right: 112px;
|
||||
padding-left: @spacing-xl;
|
||||
padding-right: @spacing-xl;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
line-height: 52px;
|
||||
font-size: @font-size-title;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
color: @cases-hero-title;
|
||||
}
|
||||
|
||||
&__slogan {
|
||||
margin: 15px 0 0;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 37px;
|
||||
margin: @spacing-sm 0 0;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: @cases-muted;
|
||||
}
|
||||
|
||||
&__body {
|
||||
.flex(row, flex-start, flex-start);
|
||||
gap: 20px;
|
||||
padding-top: 20px;
|
||||
gap: @spacing-lg;
|
||||
padding-top: @spacing-lg;
|
||||
}
|
||||
|
||||
&__main {
|
||||
// 设计稿：右侧操作区 x=606 w=1244（右边界 1850，与筛选栏区留白 70 对称）。
|
||||
// mixin 签名是 .flex(direction; justify; align)，第三参才是 align-items。
|
||||
// 纵向排列时 justify 无意义，align 用 stretch 让子项撑满 1244。
|
||||
.flex(column, flex-start, stretch);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
gap: 24px;
|
||||
gap: @spacing-lg;
|
||||
}
|
||||
|
||||
&__pager {
|
||||
|
||||
@@ -25,167 +25,172 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
|
||||
|
||||
<template>
|
||||
<div class="contract-info">
|
||||
<h3 class="contract-info__section contract-info__section--1">
|
||||
<span class="contract-info__step">01</span>
|
||||
<span class="contract-info__section-title">合同信息</span>
|
||||
</h3>
|
||||
<div class="contract-info__field contract-info__field--1 contract-info__field--l">
|
||||
<span class="contract-info__label">项目名称</span>
|
||||
<span class="contract-info__value">{{ contract.contractName }}</span>
|
||||
</div>
|
||||
<div class="contract-info__field contract-info__field--1 contract-info__field--r">
|
||||
<span class="contract-info__label">合同类型</span>
|
||||
<span class="contract-info__value">{{ contract.contractType }}</span>
|
||||
</div>
|
||||
<div class="contract-info__field contract-info__field--2 contract-info__field--l">
|
||||
<span class="contract-info__label">合同编号</span>
|
||||
<span class="contract-info__value">{{ contract.contractNo }}</span>
|
||||
</div>
|
||||
<div class="contract-info__field contract-info__field--2 contract-info__field--r">
|
||||
<span class="contract-info__label">签订日期</span>
|
||||
<span class="contract-info__value">{{ contract.signDate || '—' }}</span>
|
||||
</div>
|
||||
<div class="contract-info__field contract-info__field--3 contract-info__field--l">
|
||||
<span class="contract-info__label">生效日期</span>
|
||||
<span class="contract-info__value">{{ contract.effectiveDate }}</span>
|
||||
</div>
|
||||
<div class="contract-info__field contract-info__field--3 contract-info__field--r">
|
||||
<span class="contract-info__label">到期日期</span>
|
||||
<span class="contract-info__value">{{ contract.expiryDate }}</span>
|
||||
</div>
|
||||
<div class="contract-info__field contract-info__field--4 contract-info__field--l">
|
||||
<span class="contract-info__label">合同状态</span>
|
||||
<StatusTag :label="contract.signStatus" :variant="SIGN_VARIANTS[contract.signStatus]" />
|
||||
</div>
|
||||
<section class="contract-info__section">
|
||||
<h3 class="contract-info__heading">
|
||||
<span class="contract-info__step">01</span>
|
||||
<span>合同信息</span>
|
||||
</h3>
|
||||
<div class="contract-info__grid">
|
||||
<div class="contract-info__field">
|
||||
<span class="contract-info__label">项目名称</span>
|
||||
<span class="contract-info__value">{{ contract.contractName }}</span>
|
||||
</div>
|
||||
<div class="contract-info__field">
|
||||
<span class="contract-info__label">合同类型</span>
|
||||
<span class="contract-info__value">{{ contract.contractType }}</span>
|
||||
</div>
|
||||
<div class="contract-info__field">
|
||||
<span class="contract-info__label">合同编号</span>
|
||||
<span class="contract-info__value">{{ contract.contractNo }}</span>
|
||||
</div>
|
||||
<div class="contract-info__field">
|
||||
<span class="contract-info__label">签订日期</span>
|
||||
<span class="contract-info__value">{{ contract.signDate || '—' }}</span>
|
||||
</div>
|
||||
<div class="contract-info__field">
|
||||
<span class="contract-info__label">生效日期</span>
|
||||
<span class="contract-info__value">{{ contract.effectiveDate }}</span>
|
||||
</div>
|
||||
<div class="contract-info__field">
|
||||
<span class="contract-info__label">到期日期</span>
|
||||
<span class="contract-info__value">{{ contract.expiryDate }}</span>
|
||||
</div>
|
||||
<div class="contract-info__field">
|
||||
<span class="contract-info__label">合同状态</span>
|
||||
<StatusTag :label="contract.signStatus" :variant="SIGN_VARIANTS[contract.signStatus]" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h3 class="contract-info__section contract-info__section--2">
|
||||
<span class="contract-info__step">02</span>
|
||||
<span class="contract-info__section-title">关联项目</span>
|
||||
</h3>
|
||||
<div class="contract-info__field contract-info__field--5 contract-info__field--l">
|
||||
<span class="contract-info__label">
|
||||
项目名称
|
||||
<button class="contract-info__link" @click="emit('viewProject')">查看详情</button>
|
||||
</span>
|
||||
<span class="contract-info__value">{{ contract.relatedProjectName }}</span>
|
||||
</div>
|
||||
<div class="contract-info__field contract-info__field--5 contract-info__field--r">
|
||||
<span class="contract-info__label">项目编号</span>
|
||||
<span class="contract-info__value">{{ contract.projectNo }}</span>
|
||||
</div>
|
||||
|
||||
<h3 class="contract-info__section contract-info__section--3">
|
||||
<span class="contract-info__step">03</span>
|
||||
<span class="contract-info__section-title">合同文件</span>
|
||||
</h3>
|
||||
<ul class="contract-info__files">
|
||||
<li
|
||||
v-for="(file, index) in contract.files"
|
||||
:key="`${file.name}-${index}`"
|
||||
class="contract-info__file"
|
||||
>
|
||||
<div class="contract-info__file-info">
|
||||
<span class="contract-info__file-name" :title="file.name">{{ file.name }}</span>
|
||||
<span class="contract-info__file-meta">
|
||||
{{ formatFileSize(file.size) }} · {{ file.uploadTime }}
|
||||
<section class="contract-info__section">
|
||||
<h3 class="contract-info__heading">
|
||||
<span class="contract-info__step">02</span>
|
||||
<span>关联项目</span>
|
||||
</h3>
|
||||
<div class="contract-info__grid">
|
||||
<div class="contract-info__field">
|
||||
<span class="contract-info__label">
|
||||
项目名称
|
||||
<button
|
||||
type="button"
|
||||
class="contract-info__link"
|
||||
@click="emit('viewProject')"
|
||||
>
|
||||
查看详情
|
||||
</button>
|
||||
</span>
|
||||
<span class="contract-info__value">{{ contract.relatedProjectName }}</span>
|
||||
</div>
|
||||
<div class="contract-info__file-actions">
|
||||
<button class="contract-info__link" @click="emit('preview', file)">
|
||||
预览
|
||||
</button>
|
||||
<button class="contract-info__link" @click="emit('download', file)">
|
||||
下载
|
||||
</button>
|
||||
<div class="contract-info__field">
|
||||
<span class="contract-info__label">项目编号</span>
|
||||
<span class="contract-info__value">{{ contract.projectNo }}</span>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="contract.files.length === 0" class="contract-info__empty">
|
||||
暂无合同文件
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contract-info__section">
|
||||
<h3 class="contract-info__heading">
|
||||
<span class="contract-info__step">03</span>
|
||||
<span>合同文件</span>
|
||||
</h3>
|
||||
<ul class="contract-info__files">
|
||||
<li
|
||||
v-for="(file, index) in contract.files"
|
||||
:key="`${file.name}-${index}`"
|
||||
class="contract-info__file"
|
||||
>
|
||||
<div class="contract-info__file-info">
|
||||
<span class="contract-info__file-name" :title="file.name">{{ file.name }}</span>
|
||||
<span class="contract-info__file-meta">
|
||||
{{ formatFileSize(file.size) }} · {{ file.uploadTime }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="contract-info__file-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="contract-info__link"
|
||||
@click="emit('preview', file)"
|
||||
>
|
||||
预览
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="contract-info__link"
|
||||
@click="emit('download', file)"
|
||||
>
|
||||
下载
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="contract.files.length === 0" class="contract-info__empty">
|
||||
暂无合同文件
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.contract-info {
|
||||
position: relative;
|
||||
width: 1780px;
|
||||
height: 1152px;
|
||||
margin-top: 21px;
|
||||
border-radius: @radius-lg;
|
||||
width: 100%;
|
||||
margin-top: @spacing-base;
|
||||
padding: @spacing-xl;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-sizing: border-box;
|
||||
|
||||
&__section {
|
||||
position: absolute;
|
||||
left: 54px;
|
||||
top: 0;
|
||||
height: 70px;
|
||||
|
||||
&--1 { top: 36px; }
|
||||
&--2 { top: 649px; }
|
||||
&--3 { top: 901px; }
|
||||
&__section + &__section {
|
||||
margin-top: @spacing-xxl;
|
||||
}
|
||||
|
||||
&__section-title {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: 23px;
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
&__heading {
|
||||
.flex(row, flex-start, center);
|
||||
gap: @spacing-sm;
|
||||
margin: 0 0 @spacing-lg;
|
||||
font-size: @font-size-lg;
|
||||
font-weight: 500;
|
||||
line-height: 41px;
|
||||
line-height: 1.4;
|
||||
color: @contract-cell-text;
|
||||
white-space: nowrap; // 父级 h3 内子元素全部脱流，标题会逐字换行，强制不换行
|
||||
}
|
||||
|
||||
&__step {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
font-size: 48px;
|
||||
font-weight: 500;
|
||||
line-height: 70px;
|
||||
font-size: @font-size-title;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
color: @project-accent;
|
||||
white-space: nowrap;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: @spacing-lg;
|
||||
}
|
||||
|
||||
&__field {
|
||||
.flex(column, flex-start, stretch);
|
||||
position: absolute;
|
||||
width: 764px;
|
||||
gap: 14px;
|
||||
gap: @spacing-sm;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__field--1 { top: 174px; }
|
||||
&__field--2 { top: 296px; }
|
||||
&__field--3 { top: 418px; }
|
||||
&__field--4 { top: 540px; }
|
||||
&__field--5 { top: 770px; }
|
||||
|
||||
&__field--5:has(&__label) { top: 749px; }
|
||||
|
||||
&__field--l { left: 54px; }
|
||||
&__field--r { left: 930px; }
|
||||
|
||||
&__label {
|
||||
font-size: 20px;
|
||||
.flex(row, flex-start, center);
|
||||
gap: @spacing-sm;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 500;
|
||||
line-height: 29px;
|
||||
line-height: 1.4;
|
||||
color: @contract-cell-text;
|
||||
}
|
||||
|
||||
&__value {
|
||||
.flex(row, flex-start, center);
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
padding: 0 18px;
|
||||
border: 1px solid @contract-line;
|
||||
border-radius: 8px;
|
||||
background: @contract-page-bg;
|
||||
font-size: 20px;
|
||||
line-height: 29px;
|
||||
height: 40px;
|
||||
padding: 0 @spacing-base;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-sm;
|
||||
background: @bg-color-light;
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.4;
|
||||
color: @contract-cell-text;
|
||||
box-sizing: border-box;
|
||||
.ellipsis();
|
||||
@@ -194,19 +199,19 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
|
||||
&__field :deep(.status-tag) {
|
||||
.flex(row, flex-start, center);
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
padding: 0 18px;
|
||||
border: 1px solid @contract-line;
|
||||
border-radius: 8px;
|
||||
background: @contract-page-bg;
|
||||
font-size: 20px;
|
||||
line-height: 29px;
|
||||
height: 40px;
|
||||
padding: 0 @spacing-base;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-sm;
|
||||
background: @bg-color-light;
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.4;
|
||||
color: @contract-cell-text;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__link {
|
||||
font-size: 18px;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 400;
|
||||
color: @contract-accent;
|
||||
transition: opacity 0.2s;
|
||||
@@ -216,18 +221,9 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
|
||||
}
|
||||
}
|
||||
|
||||
&__label &__link {
|
||||
margin-left: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&__files {
|
||||
.flex(column, flex-start, stretch);
|
||||
position: absolute;
|
||||
top: 1001px; // 1153 − 152
|
||||
left: 54px; // 124 − 70
|
||||
width: 1640px;
|
||||
gap: 0;
|
||||
gap: @spacing-sm;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
@@ -236,28 +232,29 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
|
||||
&__file {
|
||||
.flex(row, space-between, center);
|
||||
gap: @spacing-base;
|
||||
height: 90px;
|
||||
padding: 0 30px;
|
||||
background: @contract-table-head-bg;
|
||||
min-height: 64px;
|
||||
padding: 0 @spacing-base;
|
||||
border-radius: @radius-base;
|
||||
background: @bg-color-light;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__file-info {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 4px;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__file-name {
|
||||
font-size: 20px;
|
||||
line-height: 29px;
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.4;
|
||||
color: @contract-cell-text;
|
||||
.ellipsis();
|
||||
}
|
||||
|
||||
&__file-meta {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-size: @font-size-sm;
|
||||
line-height: 1.4;
|
||||
color: @contract-muted;
|
||||
}
|
||||
|
||||
@@ -269,9 +266,11 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
|
||||
|
||||
&__empty {
|
||||
.flex(row, flex-start, center);
|
||||
height: 90px;
|
||||
padding: 0 30px;
|
||||
font-size: 18px;
|
||||
min-height: 64px;
|
||||
padding: 0 @spacing-base;
|
||||
border-radius: @radius-base;
|
||||
background: @bg-color-light;
|
||||
font-size: @font-size-base;
|
||||
color: @contract-muted;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,7 +26,6 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
|
||||
<div class="contract-table">
|
||||
<el-table
|
||||
:data="contracts"
|
||||
border
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="contractNo" label="合同编号" show-overflow-tooltip />
|
||||
@@ -77,7 +76,7 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
|
||||
<style lang="less" scoped>
|
||||
.contract-table {
|
||||
:deep(.el-table) {
|
||||
font-size: 20px;
|
||||
font-size: @font-size-sm;
|
||||
--el-table-border-color: @contract-line;
|
||||
--el-table-header-bg-color: @contract-table-head-bg;
|
||||
--el-table-header-text-color: @contract-head-text;
|
||||
@@ -85,20 +84,26 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
|
||||
--el-table-row-hover-bg-color: @bg-color-light;
|
||||
background: @white;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-table__cell {
|
||||
padding: 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.cell {
|
||||
padding: 0 10px;
|
||||
font-size: 20px;
|
||||
line-height: 29px;
|
||||
padding: 0 @spacing-sm;
|
||||
font-size: @font-size-sm;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
th.el-table__cell {
|
||||
height: 64px;
|
||||
font-weight: 400;
|
||||
height: 44px;
|
||||
font-weight: 500;
|
||||
background: @contract-table-head-bg;
|
||||
border-bottom: 1px solid @contract-line;
|
||||
|
||||
.cell {
|
||||
color: @contract-head-text;
|
||||
@@ -107,8 +112,9 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
|
||||
}
|
||||
|
||||
td.el-table__cell {
|
||||
height: 96px;
|
||||
height: 64px;
|
||||
color: @contract-cell-text;
|
||||
border-bottom: 1px solid @contract-line;
|
||||
}
|
||||
|
||||
.el-table__row:hover > td.el-table__cell {
|
||||
@@ -118,11 +124,11 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
|
||||
|
||||
&__actions {
|
||||
.flex(row, center);
|
||||
gap: @spacing-sm;
|
||||
gap: @spacing-base;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
font-size: 13px;
|
||||
font-size: @font-size-sm;
|
||||
color: @contract-accent;
|
||||
background: transparent;
|
||||
border: none;
|
||||
|
||||
@@ -65,17 +65,20 @@ onMounted(load)
|
||||
|
||||
<style lang="less" scoped>
|
||||
.contract-detail {
|
||||
padding-bottom: @spacing-xxl;
|
||||
min-height: 100%;
|
||||
padding-bottom: @spacing-page-bottom;
|
||||
background: @bg-color;
|
||||
|
||||
.container {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
&__breadcrumb {
|
||||
padding-top: 32px;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 27px;
|
||||
padding-top: @spacing-lg;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: @contract-muted;
|
||||
}
|
||||
|
||||
|
||||
@@ -82,41 +82,40 @@ onMounted(() => {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.contract {
|
||||
padding-bottom: @spacing-xxl;
|
||||
min-height: 100%;
|
||||
padding-bottom: @spacing-page-bottom;
|
||||
background: @bg-color;
|
||||
|
||||
&__head {
|
||||
padding: 24px 0 52px;
|
||||
padding: @spacing-lg 0;
|
||||
background: @white;
|
||||
|
||||
.container {
|
||||
padding-left: 42px;
|
||||
}
|
||||
border-bottom: 1px solid @border-color;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
line-height: 52px;
|
||||
font-size: @font-size-title;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
color: @contract-ink;
|
||||
}
|
||||
|
||||
&__slogan {
|
||||
margin-top: 13.5px;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 37px;
|
||||
margin-top: @spacing-sm;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: @contract-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.contract .contract__card {
|
||||
margin-top: 20px;
|
||||
padding: 51px 64px 59px;
|
||||
border-radius: @radius-lg;
|
||||
margin-top: @spacing-lg;
|
||||
padding: @spacing-lg;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
|
||||
:deep(.filter-panel) {
|
||||
margin-bottom: 39px;
|
||||
margin-bottom: @spacing-lg;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
@@ -128,26 +127,19 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
:deep(.filter-panel__bar) {
|
||||
gap: 8px;
|
||||
|
||||
.filter-panel__btn {
|
||||
margin-left: 78px;
|
||||
}
|
||||
|
||||
.filter-panel__btn--primary {
|
||||
margin-left: 40px;
|
||||
} }
|
||||
gap: @spacing-base;
|
||||
}
|
||||
|
||||
:deep(.filter-panel__input) {
|
||||
flex: 0 0 592px;
|
||||
width: 592px;
|
||||
max-width: none;
|
||||
flex: 0 1 360px;
|
||||
width: auto;
|
||||
max-width: 360px;
|
||||
margin-right: 0;
|
||||
height: 49px;
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
height: 36px;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-round;
|
||||
background: @input-bg;
|
||||
font-size: 20px;
|
||||
font-size: @font-size-base;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -157,53 +149,50 @@ onMounted(() => {
|
||||
|
||||
:deep(.filter-panel__input:focus) {
|
||||
border-color: @primary-strong;
|
||||
background: @white;
|
||||
}
|
||||
|
||||
:deep(.filter-panel__btn) {
|
||||
order: 1;
|
||||
min-width: 0;
|
||||
height: 29px;
|
||||
padding: 0 12px;
|
||||
min-width: 72px;
|
||||
height: 36px;
|
||||
padding: 0 @spacing-lg;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: @contract-placeholder;
|
||||
font-size: 20px;
|
||||
border-radius: @radius-round;
|
||||
background: @pill-bg;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
:deep(.filter-panel__btn:hover) {
|
||||
border-color: transparent;
|
||||
color: @text-color;
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
:deep(.filter-panel__btn--primary) {
|
||||
order: 2;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: @contract-accent;
|
||||
background: @contract-accent;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
:deep(.filter-panel__btn--primary:hover) {
|
||||
background: transparent;
|
||||
color: @primary-color;
|
||||
background: @primary-color;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
:deep(.pagination) {
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
gap: @spacing-xs;
|
||||
padding: 0;
|
||||
margin-top: 28px;
|
||||
margin-top: @spacing-lg;
|
||||
}
|
||||
|
||||
:deep(.pagination__btn) {
|
||||
min-width: 40px;
|
||||
height: 26px;
|
||||
padding: 0 4px;
|
||||
border: 1px solid @contract-line;
|
||||
border-radius: 0;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
padding: 0 6px;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-sm;
|
||||
background: @white;
|
||||
color: @contract-line;
|
||||
font-size: 14px;
|
||||
color: @text-color;
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
|
||||
:deep(.pagination__btn:hover:not(:disabled):not(.is-ellipsis)) {
|
||||
@@ -213,8 +202,9 @@ onMounted(() => {
|
||||
|
||||
:deep(.pagination__btn.is-active) {
|
||||
border-color: @contract-accent;
|
||||
background: @contract-accent;
|
||||
color: @white;
|
||||
background: @primary-light;
|
||||
color: @contract-accent;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.pagination__btn.is-ellipsis) {
|
||||
@@ -222,20 +212,5 @@ onMounted(() => {
|
||||
background: transparent;
|
||||
color: @contract-muted;
|
||||
}
|
||||
|
||||
:deep(.pagination__btn:first-child),
|
||||
:deep(.pagination__btn:last-child) {
|
||||
min-width: auto;
|
||||
padding: 0 2px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: @contract-muted;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:deep(.pagination__btn:first-child:disabled),
|
||||
:deep(.pagination__btn:last-child:disabled) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -63,16 +63,18 @@ onMounted(load)
|
||||
|
||||
<style lang="less" scoped>
|
||||
.contract-sign {
|
||||
min-height: 100%;
|
||||
padding-top: @spacing-lg;
|
||||
padding-bottom: @spacing-xxl;
|
||||
padding-bottom: @spacing-page-bottom;
|
||||
background: @bg-color;
|
||||
|
||||
.container {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 12px;
|
||||
gap: @spacing-base;
|
||||
}
|
||||
|
||||
&__breadcrumb {
|
||||
font-size: 11px;
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-disabled;
|
||||
|
||||
> span:last-child {
|
||||
@@ -84,16 +86,16 @@ onMounted(load)
|
||||
&__footer {
|
||||
.flex(row, flex-end);
|
||||
width: 100%;
|
||||
margin-top: 19px;
|
||||
margin-top: @spacing-base;
|
||||
|
||||
:deep(.app-button) {
|
||||
height: 30px;
|
||||
padding: 0 24px;
|
||||
height: 36px;
|
||||
padding: 0 @spacing-lg;
|
||||
border: none;
|
||||
border-radius: @radius-sm;
|
||||
border-radius: @radius-round;
|
||||
background: @primary-strong;
|
||||
color: @white;
|
||||
font-size: 11px;
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
|
||||
:deep(.app-button:hover) {
|
||||
|
||||
@@ -49,35 +49,32 @@ const emit = defineEmits<{
|
||||
|
||||
<style lang="less" scoped>
|
||||
.demand-bar {
|
||||
// 设计稿里操作栏不是 fixed 底栏，而是卡片内的一行：
|
||||
// el66 提示文字 x=240 y=2297，按钮 el36/34/32 x=1009/1288/1567 y=2280 w=232 h=63。
|
||||
// 内容左边界 194，提示文字比它右移 46px；按钮右边界 1799 与输入框右边界齐平。
|
||||
.flex(row, space-between, center);
|
||||
margin-top: 66px;
|
||||
margin-top: @spacing-xxl;
|
||||
gap: @spacing-lg;
|
||||
|
||||
&__tip {
|
||||
// 提示文字左边界 240 = 内容左边界 194 + 46。
|
||||
margin: 0 0 0 114px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 29px;
|
||||
color: @demand-heading;
|
||||
margin: 0;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
.flex(row, flex-end, center);
|
||||
gap: 47px;
|
||||
gap: @spacing-base;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
width: 232px;
|
||||
height: 63px;
|
||||
padding: 0;
|
||||
min-width: 120px;
|
||||
height: 40px;
|
||||
padding: 0 @spacing-lg;
|
||||
border: none;
|
||||
border-radius: @radius-base;
|
||||
border-radius: @radius-round;
|
||||
background: @demand-secondary-bg;
|
||||
font-size: 20px;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 500;
|
||||
color: @white;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -202,11 +202,10 @@ function onDownload(file: DemandAttachment): void {
|
||||
<style lang="less" scoped>
|
||||
.demand-attach {
|
||||
.flex(column, flex-start, stretch);
|
||||
// el59标签底 1405 → el54 顶 1419 = 14px；el54 底 1509 → el53 顶 1529 = 20px。
|
||||
gap: 14px;
|
||||
gap: @spacing-base;
|
||||
|
||||
&__list {
|
||||
gap: 20px;
|
||||
gap: @spacing-sm;
|
||||
}
|
||||
|
||||
&__head {
|
||||
@@ -215,38 +214,38 @@ function onDownload(file: DemandAttachment): void {
|
||||
|
||||
&__label {
|
||||
flex-shrink: 0;
|
||||
font-size: 20px;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 500;
|
||||
line-height: 29px;
|
||||
line-height: 1.4;
|
||||
color: @demand-heading;
|
||||
}
|
||||
|
||||
&__hint {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 20px;
|
||||
font-size: 16px;
|
||||
margin-left: @spacing-base;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 400;
|
||||
line-height: 23px;
|
||||
color: @demand-line;
|
||||
line-height: 1.5;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
|
||||
// 设计稿 el54：x=194 y=1419 w=1605 h=90，整块浅灰上传区。
|
||||
&__drop {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
height: 72px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: @radius-sm;
|
||||
background: @demand-upload-bg;
|
||||
border: 1px dashed @border-color;
|
||||
border-radius: @radius-base;
|
||||
background: @bg-color-light;
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
color: @demand-line;
|
||||
font-size: @font-size-base;
|
||||
color: @text-color-secondary;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
transition: background 0.2s, color 0.2s, border-color 0.2s;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: darken(@demand-upload-bg, 4%);
|
||||
border-color: @demand-accent;
|
||||
background: @filter-selected-bg;
|
||||
color: @demand-accent;
|
||||
}
|
||||
|
||||
@@ -262,35 +261,34 @@ function onDownload(file: DemandAttachment): void {
|
||||
|
||||
&__list {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 20px;
|
||||
gap: @spacing-sm;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// el53：x=194 y=1529 w=1605 h=90，空态占位块；有附件时列表项本身就是这个高度。
|
||||
&__list:empty {
|
||||
height: 90px;
|
||||
border-radius: @radius-sm;
|
||||
background: @demand-upload-bg;
|
||||
height: 72px;
|
||||
border-radius: @radius-base;
|
||||
background: @bg-color-light;
|
||||
}
|
||||
|
||||
&__item {
|
||||
.flex(row, flex-start, center);
|
||||
gap: @spacing-base;
|
||||
min-height: 90px;
|
||||
padding: 0 @spacing-lg;
|
||||
border-radius: @radius-sm;
|
||||
background: @demand-upload-bg;
|
||||
min-height: 64px;
|
||||
padding: 0 @spacing-base;
|
||||
border-radius: @radius-base;
|
||||
background: @bg-color-light;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
.flex(row, center);
|
||||
flex-shrink: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: @radius-sm;
|
||||
font-size: 12px;
|
||||
font-size: @font-size-xs;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
@@ -298,18 +296,18 @@ function onDownload(file: DemandAttachment): void {
|
||||
&__meta {
|
||||
.flex(column, flex-start, stretch);
|
||||
flex: 1;
|
||||
gap: 4px;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 20px;
|
||||
font-size: @font-size-base;
|
||||
color: @demand-ink;
|
||||
.ellipsis();
|
||||
}
|
||||
|
||||
&__sub {
|
||||
font-size: 16px;
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
|
||||
|
||||
@@ -39,7 +39,7 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
|
||||
v-else
|
||||
class="biz-types__icon"
|
||||
:name="option.icon"
|
||||
:size="68"
|
||||
:size="48"
|
||||
/>
|
||||
<span class="biz-types__name">{{ option.label }}</span>
|
||||
<span v-if="option.desc" class="biz-types__desc">{{ option.desc }}</span>
|
||||
@@ -63,20 +63,17 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 17px;
|
||||
gap: @spacing-base;
|
||||
}
|
||||
|
||||
&__card {
|
||||
position: relative;
|
||||
.flex(column, flex-start, flex-start);
|
||||
gap: 0;
|
||||
height: 206px;
|
||||
min-height: 160px;
|
||||
box-sizing: border-box;
|
||||
// 设计稿 el21 "互联网软件" y=545 → 卡片 y=439 距顶 106px。
|
||||
// 插画 el4 y=444 h=110 的框底 554 已越过 name 顶545，说明插画切片含
|
||||
// 透明边距；按文字层定位为准，插画框给68px 见方、左对齐即可。
|
||||
padding: 4px 16px 0;
|
||||
border: 1px solid @demand-line;
|
||||
padding: @spacing-lg;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
text-align: left;
|
||||
@@ -88,18 +85,17 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border-color: @demand-selected-bg;
|
||||
background: @demand-selected-bg;
|
||||
border-color: @demand-accent;
|
||||
background: @filter-selected-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// el8 "圆形51" x=442 y=467 w=30 h=30：卡片 x=194 w=307，右内缩 29px、上移 22px。
|
||||
&__check {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
right: 19px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
top: @spacing-base;
|
||||
right: @spacing-base;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid @demand-radio-idle;
|
||||
border-radius: 50%;
|
||||
background: @white;
|
||||
@@ -107,41 +103,42 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
|
||||
}
|
||||
|
||||
&__card.is-active &__check {
|
||||
border-color: @white;
|
||||
border-color: @demand-accent;
|
||||
background: @white;
|
||||
box-shadow: inset 0 0 0 3px @demand-selected-bg;
|
||||
box-shadow: inset 0 0 0 5px @demand-accent;
|
||||
}
|
||||
|
||||
// el4 插画 x=233 / el3 x=542 / el1 x=875 / el2 x=1190：
|
||||
// 四张卡的插画都在卡片左边线右侧 27~39px 处，不是水平居中，按左对齐处理。
|
||||
&__icon {
|
||||
margin-bottom: 33px;
|
||||
margin-bottom: @spacing-base;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
margin-bottom: 33px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: @spacing-base;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 28px;
|
||||
font-size: @font-size-lg;
|
||||
font-weight: 500;
|
||||
line-height: 45px;
|
||||
line-height: 1.4;
|
||||
color: @demand-ink;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 23px;
|
||||
color: @demand-ink;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
|
||||
&__card.is-active &__name {
|
||||
color: @demand-accent;
|
||||
}
|
||||
|
||||
&__card.is-active &__name,
|
||||
&__card.is-active &__desc {
|
||||
color: @white;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -99,24 +99,24 @@ function onRemark(event: Event): void {
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 20px;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 500;
|
||||
line-height: 29px;
|
||||
line-height: 1.4;
|
||||
color: @demand-heading;
|
||||
}
|
||||
|
||||
&__input {
|
||||
.text-control();
|
||||
height: 49px;
|
||||
padding: 0 18px;
|
||||
border-color: @demand-line;
|
||||
height: 40px;
|
||||
padding: 0 @spacing-base;
|
||||
border-color: @border-color;
|
||||
border-radius: @radius-sm;
|
||||
font-size: 20px;
|
||||
font-size: @font-size-base;
|
||||
color: @demand-ink;
|
||||
|
||||
&::placeholder {
|
||||
font-weight: 400;
|
||||
color: @demand-line;
|
||||
color: @text-color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -127,27 +127,27 @@ function onRemark(event: Event): void {
|
||||
|
||||
&__textarea {
|
||||
.text-control();
|
||||
height: 270px;
|
||||
min-height: 270px;
|
||||
padding: 10px 18px 24px;
|
||||
border-color: @demand-line;
|
||||
height: 160px;
|
||||
min-height: 160px;
|
||||
padding: @spacing-base;
|
||||
border-color: @border-color;
|
||||
border-radius: @radius-sm;
|
||||
font-size: 20px;
|
||||
font-size: @font-size-base;
|
||||
color: @demand-ink;
|
||||
line-height: 29px;
|
||||
line-height: 1.5;
|
||||
resize: vertical;
|
||||
|
||||
&::placeholder {
|
||||
font-weight: 400;
|
||||
color: @demand-line;
|
||||
color: @text-color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
&__count {
|
||||
position: absolute;
|
||||
right: @spacing-lg;
|
||||
right: @spacing-base;
|
||||
bottom: @spacing-sm;
|
||||
font-size: 16px;
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -201,9 +201,9 @@ function onBudgetManualBlur(event: Event): void {
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 20px;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 500;
|
||||
line-height: 29px;
|
||||
line-height: 1.4;
|
||||
color: @demand-heading;
|
||||
}
|
||||
|
||||
@@ -214,16 +214,16 @@ function onBudgetManualBlur(event: Event): void {
|
||||
|
||||
&__input {
|
||||
.text-control();
|
||||
height: 49px;
|
||||
padding: 0 18px;
|
||||
border-color: @demand-line;
|
||||
height: 40px;
|
||||
padding: 0 @spacing-base;
|
||||
border-color: @border-color;
|
||||
border-radius: @radius-sm;
|
||||
font-size: 20px;
|
||||
font-size: @font-size-base;
|
||||
color: @demand-ink;
|
||||
|
||||
&::placeholder {
|
||||
font-weight: 400;
|
||||
color: @demand-line;
|
||||
color: @text-color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -234,47 +234,47 @@ function onBudgetManualBlur(event: Event): void {
|
||||
|
||||
&__textarea {
|
||||
.text-control();
|
||||
height: 270px;
|
||||
min-height: 270px;
|
||||
padding: 10px 18px 24px;
|
||||
border-color: @demand-line;
|
||||
height: 160px;
|
||||
min-height: 160px;
|
||||
padding: @spacing-base;
|
||||
border-color: @border-color;
|
||||
border-radius: @radius-sm;
|
||||
font-size: 20px;
|
||||
font-size: @font-size-base;
|
||||
color: @demand-ink;
|
||||
line-height: 29px;
|
||||
line-height: 1.5;
|
||||
resize: vertical;
|
||||
|
||||
&::placeholder {
|
||||
font-weight: 400;
|
||||
color: @demand-line;
|
||||
color: @text-color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
&__count {
|
||||
position: absolute;
|
||||
right: @spacing-lg;
|
||||
right: @spacing-base;
|
||||
bottom: @spacing-sm;
|
||||
font-size: 16px;
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-disabled;
|
||||
}
|
||||
|
||||
&__budgets {
|
||||
.flex(row, flex-start, stretch);
|
||||
gap: 17px;
|
||||
gap: @spacing-base;
|
||||
}
|
||||
|
||||
&__budget {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 49px;
|
||||
height: 40px;
|
||||
padding: 0 @spacing-sm;
|
||||
border: 1px solid @demand-line;
|
||||
border-radius: @radius-sm;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
font-size: 20px;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 400;
|
||||
font-family: inherit;
|
||||
color: @demand-line;
|
||||
color: @text-color;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
@@ -287,8 +287,8 @@ function onBudgetManualBlur(event: Event): void {
|
||||
|
||||
&.is-active {
|
||||
border-color: @demand-accent;
|
||||
background: @demand-selected-bg;
|
||||
color: @white;
|
||||
background: @filter-selected-bg;
|
||||
color: @demand-accent;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
@@ -298,7 +298,7 @@ function onBudgetManualBlur(event: Event): void {
|
||||
|
||||
&::placeholder {
|
||||
font-weight: 400;
|
||||
color: @demand-line;
|
||||
color: @text-color-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -120,7 +120,9 @@ onMounted(() => {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.demand-page {
|
||||
// 操作栏已收进卡片内（设计稿 el36 y=2280），不需要为fixed 底栏预留空白。
|
||||
min-height: 100%;
|
||||
padding-bottom: @spacing-page-bottom;
|
||||
background: @bg-color;
|
||||
|
||||
&.is-loading .demand {
|
||||
opacity: 0.6;
|
||||
@@ -128,65 +130,60 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
&__hero {
|
||||
height: 179px;
|
||||
box-sizing: border-box;
|
||||
padding-top: 32px;
|
||||
padding: @spacing-lg 0;
|
||||
background: @white;
|
||||
border-bottom: 1px solid @border-color;
|
||||
}
|
||||
|
||||
&__hero-inner {
|
||||
// 设计稿 el82：标题左边界 112px（hero 白底 1920 宽，标题左起 112）。
|
||||
padding-left: 112px;
|
||||
padding-left: @spacing-xl;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
line-height: 52px;
|
||||
font-size: @font-size-title;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
color: @demand-ink;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
margin: 15px 0 0;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 35px;
|
||||
margin: @spacing-sm 0 0;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: @demand-subtitle;
|
||||
}
|
||||
}
|
||||
|
||||
.demand {
|
||||
margin-top: 20px; // 271 − (72+179) = 20
|
||||
// 设计稿 el83 卡片 x=70 w=1780；内容左边界 194（el68 输入框 x=194 w=1605），
|
||||
// 右边界 1799。故左内边距 56、右内边距 51（不对称是设计稿本身如此）。
|
||||
padding: 48px 51px 114px 56px;
|
||||
margin-top: @spacing-lg;
|
||||
padding: @spacing-xl;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
|
||||
&__heading {
|
||||
// 设计稿三个 heading 的标签都比序号低 23px（el80 "01" y=319 →
|
||||
// el79 "选择业务类型*" y=342），不是垂直居中，故用flex-start + margin-top。
|
||||
.flex(row, flex-start, flex-start);
|
||||
gap: 4px;
|
||||
margin: 0 0 50px;
|
||||
padding-left: 8px;
|
||||
.flex(row, flex-start, center);
|
||||
gap: @spacing-sm;
|
||||
margin: 0 0 @spacing-lg;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&__index {
|
||||
flex-shrink: 0;
|
||||
font-size: 48px;
|
||||
font-weight: 500;
|
||||
line-height: 70px;
|
||||
font-size: @font-size-title;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: @demand-accent;
|
||||
}
|
||||
|
||||
&__label {
|
||||
// 与序号的顶部落差 23px（el80 y=319 → el79 y=342）。
|
||||
margin-top: 23px;
|
||||
font-size: 28px;
|
||||
margin-top: 0;
|
||||
font-size: @font-size-lg;
|
||||
font-weight: 500;
|
||||
line-height: 41px;
|
||||
line-height: 1.4;
|
||||
color: @demand-heading;
|
||||
}
|
||||
|
||||
@@ -195,28 +192,24 @@ onMounted(() => {
|
||||
color: @danger-color;
|
||||
}
|
||||
|
||||
// 内容左边界 194：卡片 x=70 + padding-left 56 + 内容缩进 68。
|
||||
&__heading + * {
|
||||
margin-left: 68px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// el29业务类型卡片底 645 → el78 "02" 顶 705 = 60px。
|
||||
&__section + &__section {
|
||||
margin-top: 60px;
|
||||
margin-top: @spacing-xxl;
|
||||
}
|
||||
|
||||
// el53 附件灰块底 1619 → el76 "03" 顶 1689 = 70px。
|
||||
&__section + &__section:last-of-type {
|
||||
margin-top: 70px;
|
||||
margin-top: @spacing-xxl;
|
||||
}
|
||||
|
||||
&__section + &__section &__heading {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: @spacing-lg;
|
||||
}
|
||||
|
||||
// el78 "02" 底 775 → el70 "项目名称*" 顶 789 = 14px。
|
||||
&__section + &__section &__heading + * {
|
||||
margin-top: 14px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -150,16 +150,17 @@ onMounted(() => {
|
||||
<style lang="less" scoped>
|
||||
.bill-detail {
|
||||
width: 100%;
|
||||
padding-bottom: 325px;
|
||||
background: @contract-page-bg;
|
||||
min-height: 100%;
|
||||
padding-bottom: @spacing-page-bottom;
|
||||
background: @bg-color;
|
||||
|
||||
&__breadcrumb {
|
||||
.flex(row, flex-start, center);
|
||||
height: 86px;
|
||||
padding-top: 34px;
|
||||
font-size: 13px;
|
||||
min-height: 48px;
|
||||
padding-top: @spacing-lg;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 400;
|
||||
line-height: 17px;
|
||||
line-height: 1.5;
|
||||
color: @project-muted;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -154,8 +154,9 @@ onMounted(() => {
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 14px;
|
||||
background: @contract-page-bg;
|
||||
min-height: 100%;
|
||||
padding-bottom: @spacing-page-bottom;
|
||||
background: @bg-color;
|
||||
|
||||
&__breadcrumb {
|
||||
.flex(row, flex-start, center);
|
||||
@@ -185,9 +186,9 @@ onMounted(() => {
|
||||
&__stats {
|
||||
.flex(row, flex-start, flex-start);
|
||||
gap: 0;
|
||||
height: 106px;
|
||||
margin-top: 11px;
|
||||
border: 1px solid @finance-card-line;
|
||||
min-height: 96px;
|
||||
margin-top: @spacing-base;
|
||||
border: none;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-sizing: border-box;
|
||||
@@ -209,19 +210,19 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
&__stat-value {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
line-height: 35px;
|
||||
font-size: @font-size-xl;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
color: @finance-ink;
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
.flex(row, flex-start, center);
|
||||
gap: 0;
|
||||
height: 71px;
|
||||
margin-top: 14px;
|
||||
padding: 0 0 0 22px;
|
||||
border: 1px solid @finance-card-line;
|
||||
gap: @spacing-base;
|
||||
min-height: 64px;
|
||||
margin-top: @spacing-base;
|
||||
padding: 0 @spacing-lg;
|
||||
border: none;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-sizing: border-box;
|
||||
@@ -249,27 +250,29 @@ onMounted(() => {
|
||||
|
||||
:deep(.el-radio-button.is-active .el-radio-button__inner) {
|
||||
border-color: @primary-strong;
|
||||
background: @primary-strong;
|
||||
color: @white;
|
||||
background: @filter-selected-bg;
|
||||
color: @primary-strong;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
box-shadow: -1px 0 0 0 @primary-strong;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__search {
|
||||
width: 1300px;
|
||||
height: 37px;
|
||||
margin-left: 33px;
|
||||
flex-shrink: 0;
|
||||
flex: 0 1 360px;
|
||||
width: auto;
|
||||
height: 36px;
|
||||
margin-left: 0;
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 1300px;
|
||||
height: 37px;
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 @spacing-base;
|
||||
background: @finance-field-bg;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 0 1px @border-color inset;
|
||||
border-radius: @radius-round;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
@@ -314,36 +317,41 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
&__board {
|
||||
margin-top: 14px;
|
||||
border: 1px solid @finance-card-line;
|
||||
margin-top: @spacing-base;
|
||||
border: none;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
overflow: hidden;
|
||||
padding: @spacing-base @spacing-lg @spacing-lg;
|
||||
}
|
||||
|
||||
:deep(.pagination) {
|
||||
justify-content: flex-end;
|
||||
gap: 3.7px;
|
||||
padding: 8px 26px 30px 0;
|
||||
gap: @spacing-xs;
|
||||
padding: @spacing-base 0 0;
|
||||
}
|
||||
|
||||
:deep(.pagination__btn) {
|
||||
min-width: 0;
|
||||
height: 16px;
|
||||
padding: 0 3px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: @finance-muted-text;
|
||||
font-size: 12px;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
padding: 0 6px;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-sm;
|
||||
background: @white;
|
||||
color: @text-color;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 400;
|
||||
|
||||
&.is-active {
|
||||
min-width: 21.45px;
|
||||
min-width: 28px;
|
||||
border-color: @primary-strong;
|
||||
background: @primary-light;
|
||||
color: @primary-strong;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled):not(.is-ellipsis) {
|
||||
border: none;
|
||||
border-color: @primary-strong;
|
||||
color: @primary-strong;
|
||||
}
|
||||
|
||||
|
||||
@@ -126,31 +126,36 @@ watch(
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bill-table {
|
||||
width: 1765px;
|
||||
margin: 6.5px 0 0 14.5px;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
margin: @spacing-sm 0 0;
|
||||
font-size: @font-size-sm;
|
||||
color: @finance-entry-text;
|
||||
|
||||
:deep(.el-table) {
|
||||
--el-table-border-color: @border-color;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__header-wrapper th.el-table__cell) {
|
||||
height: 41.77px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
background: @finance-table-head-bg;
|
||||
border-right: 1px solid @project-divider;
|
||||
border-bottom: 1px solid @project-divider;
|
||||
color: @finance-entry-text;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid @border-color;
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:deep(.el-table__header-wrapper th.el-table__cell:first-child) {
|
||||
border-left: 1px solid @project-divider;
|
||||
}
|
||||
|
||||
:deep(.el-table__body-wrapper td.el-table__cell) {
|
||||
height: 43.77px;
|
||||
height: 56px;
|
||||
padding: 0;
|
||||
border-bottom: 1px solid @project-divider;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid @border-color;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -159,17 +164,16 @@ watch(
|
||||
}
|
||||
|
||||
:deep(.el-table .cell) {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-left: @spacing-sm;
|
||||
padding-right: @spacing-sm;
|
||||
line-height: normal;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// 首列（多选）左缩进对齐设计稿
|
||||
:deep(.el-table-column--selection .cell) {
|
||||
padding-left: 43.5px;
|
||||
padding-left: @spacing-base;
|
||||
}
|
||||
|
||||
&__ops {
|
||||
@@ -177,12 +181,12 @@ watch(
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 18px;
|
||||
gap: @spacing-base;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__link {
|
||||
font-size: 12px;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 400;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -164,20 +164,22 @@ onMounted(() => {
|
||||
<style lang="less" scoped>
|
||||
.finance {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding-bottom: @spacing-page-bottom;
|
||||
background: @bg-color;
|
||||
|
||||
&__top {
|
||||
.flex(row, flex-start, stretch);
|
||||
gap: 14px;
|
||||
margin-top: -56px;
|
||||
gap: @spacing-base;
|
||||
margin-top: @spacing-lg;
|
||||
}
|
||||
|
||||
&__entries {
|
||||
.flex(row, space-between, center);
|
||||
flex: 0 0 672px;
|
||||
height: 135px;
|
||||
// 设计稿 #20：首入口中心 x=1272、尾中心 x=1756，两侧对称 padding 66px 命中
|
||||
padding: 0 66px;
|
||||
border: 1px solid @finance-card-line;
|
||||
border: none;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -137,16 +137,17 @@ onMounted(() => {
|
||||
<style lang="less" scoped>
|
||||
.invoice-titles {
|
||||
width: 100%;
|
||||
padding-bottom: 459px;
|
||||
background: @contract-page-bg;
|
||||
min-height: 100%;
|
||||
padding-bottom: @spacing-page-bottom;
|
||||
background: @bg-color;
|
||||
|
||||
&__breadcrumb {
|
||||
.flex(row, flex-start, center);
|
||||
height: 81px;
|
||||
padding-top: 36px;
|
||||
font-size: 13px;
|
||||
min-height: 48px;
|
||||
padding-top: @spacing-lg;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 400;
|
||||
line-height: 17px;
|
||||
line-height: 1.5;
|
||||
color: @project-muted;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -167,9 +168,9 @@ onMounted(() => {
|
||||
|
||||
&__head {
|
||||
.flex(row, space-between, center);
|
||||
height: 62px;
|
||||
padding: 0 33.56px 0 36px;
|
||||
border: 1px solid @finance-card-line;
|
||||
min-height: 56px;
|
||||
padding: 0 @spacing-lg;
|
||||
border: none;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -265,8 +265,10 @@ onMounted(() => {
|
||||
gap: @spacing-base;
|
||||
width: 100%;
|
||||
max-width: @container-width;
|
||||
min-height: 100%;
|
||||
margin: 0 auto;
|
||||
padding: @spacing-lg @spacing-base @spacing-xxl;
|
||||
padding: @spacing-lg @spacing-base @spacing-page-bottom;
|
||||
background: @bg-color;
|
||||
|
||||
&__breadcrumb {
|
||||
font-size: 11px;
|
||||
@@ -346,13 +348,14 @@ onMounted(() => {
|
||||
|
||||
&.is-active {
|
||||
border-color: @primary-color;
|
||||
background: @primary-color;
|
||||
color: @white;
|
||||
background: @filter-selected-bg;
|
||||
color: @primary-color;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
border-color: @primary-color;
|
||||
background: @primary-color;
|
||||
color: @white;
|
||||
background: @filter-selected-bg;
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -161,8 +161,10 @@ onMounted(() => {
|
||||
.pay {
|
||||
width: 100%;
|
||||
max-width: @container-width;
|
||||
min-height: 100%;
|
||||
margin: 0 auto;
|
||||
padding: @spacing-lg @spacing-base @spacing-xxl;
|
||||
padding: @spacing-lg @spacing-base @spacing-page-bottom;
|
||||
background: @bg-color;
|
||||
|
||||
&__breadcrumb {
|
||||
margin-bottom: @spacing-base;
|
||||
@@ -235,8 +237,8 @@ onMounted(() => {
|
||||
|
||||
&__amount {
|
||||
margin-top: 4px;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
font-size: @font-size-xl;
|
||||
font-weight: 600;
|
||||
color: @danger-color;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@@ -61,59 +61,92 @@ onBeforeUnmount(stopAutoplay)
|
||||
|
||||
<template>
|
||||
<section class="home-banner">
|
||||
<div class="home-banner__carousel" aria-hidden="true">
|
||||
<div
|
||||
v-for="(src, index) in slides"
|
||||
:key="`${src}-${index}`"
|
||||
class="home-banner__slide"
|
||||
:class="{ 'home-banner__slide--active': index === activeIndex }"
|
||||
>
|
||||
<img
|
||||
class="home-banner__image"
|
||||
:class="{ 'home-banner__image--inline': !hasBanners }"
|
||||
:src="src"
|
||||
alt=""
|
||||
<div class="home-banner__stage">
|
||||
<div class="home-banner__carousel" aria-hidden="true">
|
||||
<div
|
||||
v-for="(src, index) in slides"
|
||||
:key="`${src}-${index}`"
|
||||
class="home-banner__slide"
|
||||
:class="{ 'home-banner__slide--active': index === activeIndex }"
|
||||
>
|
||||
<img
|
||||
class="home-banner__image"
|
||||
:class="{ 'home-banner__image--inline': !hasBanners }"
|
||||
:src="src"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-banner__inner">
|
||||
<h1 class="home-banner__title">虫子智造研发一体化平台</h1>
|
||||
<p class="home-banner__subtitle">一站式智能软硬件研发与量产综合服务商</p>
|
||||
<div class="home-banner__inner">
|
||||
<h1 class="home-banner__title">
|
||||
虫子智造研发一体化平台
|
||||
</h1>
|
||||
<p class="home-banner__subtitle">
|
||||
一站式智能软硬件研发与量产综合服务商
|
||||
</p>
|
||||
|
||||
<div class="home-banner__actions">
|
||||
<button class="home-banner__btn home-banner__btn--primary" type="button" @click="goDemand">
|
||||
需求提报
|
||||
</button>
|
||||
<button class="home-banner__btn home-banner__btn--ghost" type="button" @click="goCases">
|
||||
案例中心
|
||||
</button>
|
||||
<div class="home-banner__actions">
|
||||
<button
|
||||
class="home-banner__btn home-banner__btn--primary"
|
||||
type="button"
|
||||
@click="goDemand"
|
||||
>
|
||||
需求提报
|
||||
</button>
|
||||
<button
|
||||
class="home-banner__btn home-banner__btn--ghost"
|
||||
type="button"
|
||||
@click="goCases"
|
||||
>
|
||||
案例中心
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="slides.length > 1" class="home-banner__dots" role="tablist" aria-label="头图轮播">
|
||||
<button
|
||||
v-for="(_, index) in slides"
|
||||
:key="index"
|
||||
class="home-banner__dot"
|
||||
:class="{ 'home-banner__dot--active': index === activeIndex }"
|
||||
type="button"
|
||||
role="tab"
|
||||
:aria-selected="index === activeIndex"
|
||||
@click="goTo(index)"
|
||||
/>
|
||||
<div
|
||||
v-if="slides.length > 1"
|
||||
class="home-banner__dots"
|
||||
role="tablist"
|
||||
aria-label="头图轮播"
|
||||
>
|
||||
<button
|
||||
v-for="(_, index) in slides"
|
||||
:key="index"
|
||||
class="home-banner__dot"
|
||||
:class="{ 'home-banner__dot--active': index === activeIndex }"
|
||||
type="button"
|
||||
role="tab"
|
||||
:aria-selected="index === activeIndex"
|
||||
@click="goTo(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.home-banner {
|
||||
position: relative;
|
||||
height: 661px;
|
||||
overflow: hidden;
|
||||
background: @home-banner-bg;
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
padding: @spacing-lg @home-gutter 0;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
padding: @spacing-lg @spacing-lg 0;
|
||||
}
|
||||
|
||||
&__stage {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: @home-content;
|
||||
height: 420px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
border-radius: @radius-base;
|
||||
background: @home-banner-bg;
|
||||
}
|
||||
|
||||
&__carousel {
|
||||
position: absolute;
|
||||
@@ -138,15 +171,14 @@ onBeforeUnmount(stopAutoplay)
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
|
||||
// 内置插图：按设计稿定位与尺寸原样显示，不铺满
|
||||
&--inline {
|
||||
position: absolute;
|
||||
top: 31px;
|
||||
right: 269px;
|
||||
top: 24px;
|
||||
right: 48px;
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
width: 723px;
|
||||
height: 598px;
|
||||
width: 420px;
|
||||
height: 348px;
|
||||
margin-left: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
@@ -156,50 +188,48 @@ onBeforeUnmount(stopAutoplay)
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: @container-width;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__title {
|
||||
position: absolute;
|
||||
top: 184px;
|
||||
left: 150px;
|
||||
top: 96px;
|
||||
left: 64px;
|
||||
margin: 0;
|
||||
color: @banner-title-color;
|
||||
font-size: @font-size-hero-lg;
|
||||
font-size: @font-size-hero;
|
||||
font-weight: 700;
|
||||
line-height: 87px;
|
||||
line-height: 1.25;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
position: absolute;
|
||||
top: 287px;
|
||||
left: 150px;
|
||||
top: 168px;
|
||||
left: 64px;
|
||||
margin: 0;
|
||||
color: @banner-title-color;
|
||||
font-size: 24px;
|
||||
font-size: @font-size-lg;
|
||||
font-weight: 500;
|
||||
line-height: 35px;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
position: absolute;
|
||||
top: 392px;
|
||||
left: 150px;
|
||||
top: 232px;
|
||||
left: 64px;
|
||||
.flex(row, flex-start, center);
|
||||
gap: 20px;
|
||||
gap: @spacing-base;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
width: 183px;
|
||||
height: 55px;
|
||||
border-radius: 8px;
|
||||
font-size: 18px;
|
||||
width: 140px;
|
||||
height: 44px;
|
||||
border-radius: @radius-base;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
@@ -220,7 +250,7 @@ onBeforeUnmount(stopAutoplay)
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 8px;
|
||||
border-radius: @radius-base;
|
||||
padding: 2px;
|
||||
background: linear-gradient(135deg, @btn-gradient-from 0%, @btn-gradient-to 100%);
|
||||
-webkit-mask:
|
||||
@@ -238,16 +268,17 @@ onBeforeUnmount(stopAutoplay)
|
||||
|
||||
&__dots {
|
||||
position: absolute;
|
||||
left: 929px;
|
||||
top: 594px;
|
||||
left: 50%;
|
||||
bottom: @spacing-base;
|
||||
z-index: 1;
|
||||
.flex(row, flex-start, center);
|
||||
gap: 13px;
|
||||
.flex(row, center, center);
|
||||
gap: @spacing-sm;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&__dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
@@ -255,7 +286,7 @@ onBeforeUnmount(stopAutoplay)
|
||||
cursor: pointer;
|
||||
|
||||
&--active {
|
||||
width: 44px;
|
||||
width: 28px;
|
||||
border-radius: 3px;
|
||||
background: @home-banner-dot;
|
||||
}
|
||||
|
||||
@@ -39,40 +39,42 @@ const FALLBACK_ACTIVE: BusinessType[] = ['internet']
|
||||
|
||||
<style lang="less" scoped>
|
||||
.home-business {
|
||||
padding: 44px 70px 54px;
|
||||
border: 1px solid @home-section-border;
|
||||
border-radius: @radius-lg;
|
||||
padding: @spacing-xl;
|
||||
border: none;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
|
||||
&__title {
|
||||
margin: 0 0 47px;
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: 700;
|
||||
margin: 0 0 @spacing-lg;
|
||||
font-size: @font-size-xl;
|
||||
font-weight: 600;
|
||||
color: @home-ink;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
display: flex;
|
||||
gap: 22px;
|
||||
gap: @spacing-base;
|
||||
}
|
||||
|
||||
&__card {
|
||||
position: relative;
|
||||
.flex(column, flex-start, flex-start);
|
||||
flex: 0 1 368px;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
height: 206px;
|
||||
min-height: 160px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px;
|
||||
padding: @spacing-lg;
|
||||
overflow: hidden;
|
||||
border: 1px solid @home-business-border;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
transition:
|
||||
transform 0.2s,
|
||||
box-shadow 0.2s;
|
||||
box-shadow 0.2s,
|
||||
border-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: @primary-color;
|
||||
box-shadow: @shadow-base;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
@@ -102,37 +104,41 @@ const FALLBACK_ACTIVE: BusinessType[] = ['internet']
|
||||
}
|
||||
|
||||
&__name {
|
||||
margin: 104px 0 0;
|
||||
font-size: @font-size-title;
|
||||
margin: @spacing-xxl 0 0;
|
||||
font-size: @font-size-lg;
|
||||
font-weight: 500;
|
||||
line-height: 41px;
|
||||
line-height: 1.4;
|
||||
color: @home-ink;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
margin: 4px 0 0;
|
||||
font-size: @font-size-md;
|
||||
font-weight: 500;
|
||||
line-height: 23px;
|
||||
color: @home-ink;
|
||||
.multi-ellipsis(1);
|
||||
margin: @spacing-xs 0 0;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: @text-color-secondary;
|
||||
.multi-ellipsis(2);
|
||||
}
|
||||
|
||||
&__card--active {
|
||||
border-color: @primary-strong;
|
||||
background: @primary-strong;
|
||||
border-color: @primary-color;
|
||||
background: @filter-selected-bg;
|
||||
|
||||
.home-business__check {
|
||||
border-color: @white;
|
||||
border-color: @primary-color;
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
background: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.home-business__name,
|
||||
.home-business__name {
|
||||
color: @primary-strong;
|
||||
}
|
||||
|
||||
.home-business__desc {
|
||||
color: @white;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -85,26 +85,26 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
|
||||
|
||||
<style lang="less" scoped>
|
||||
.home-cases {
|
||||
padding: 40px 66px 60px;
|
||||
border: 1px solid @home-section-border;
|
||||
border-radius: @radius-lg;
|
||||
padding: @spacing-xl;
|
||||
border: none;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
|
||||
&__head {
|
||||
.flex(row, flex-start);
|
||||
gap: 24px;
|
||||
margin-bottom: 47px;
|
||||
.flex(row, flex-start, center);
|
||||
gap: @spacing-lg;
|
||||
margin-bottom: @spacing-lg;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: 700;
|
||||
font-size: @font-size-xl;
|
||||
font-weight: 600;
|
||||
color: @home-ink;
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
.flex(row, center);
|
||||
gap: 36px;
|
||||
gap: @spacing-lg;
|
||||
}
|
||||
|
||||
&__tab {
|
||||
@@ -146,19 +146,20 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
|
||||
|
||||
&__card {
|
||||
overflow: hidden;
|
||||
flex: 0 1 368px;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
height: 248px;
|
||||
min-height: 220px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid @home-case-border;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-shadow: 0 4px 10px fade(@black, 8%);
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 6px 14px fade(@black, 12%);
|
||||
border-color: @primary-color;
|
||||
box-shadow: @shadow-base;
|
||||
transform: translateY(-2px);
|
||||
|
||||
.home-cases__view {
|
||||
|
||||
@@ -173,15 +173,15 @@ function onMore(): void {
|
||||
position: relative;
|
||||
.flex(column, flex-start, stretch);
|
||||
flex-shrink: 0;
|
||||
flex: 0 0 529px;
|
||||
width: 529px;
|
||||
height: 245px;
|
||||
flex: 0 0 420px;
|
||||
width: 420px;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
gap: 0;
|
||||
padding: 18px 40px 28px;
|
||||
border: 1px solid @home-card-border;
|
||||
border-radius: @radius-lg;
|
||||
padding: @spacing-lg;
|
||||
border: none;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -190,22 +190,22 @@ function onMore(): void {
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: 700;
|
||||
line-height: 52px;
|
||||
font-size: @font-size-xl;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: @home-ink;
|
||||
}
|
||||
|
||||
&__list {
|
||||
.flex(row, flex-start, flex-start);
|
||||
gap: 30px;
|
||||
margin-top: 17px;
|
||||
gap: @spacing-base;
|
||||
margin-top: @spacing-base;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__item {
|
||||
.flex(column, flex-start, center);
|
||||
gap: 8px;
|
||||
gap: @spacing-sm;
|
||||
flex: none;
|
||||
transition: transform 0.2s;
|
||||
|
||||
@@ -216,14 +216,14 @@ function onMore(): void {
|
||||
|
||||
&__tile {
|
||||
display: block;
|
||||
width: 97px;
|
||||
height: 97px;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: @radius-base;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: @font-size-lg;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 500;
|
||||
color: @home-ink;
|
||||
text-align: center;
|
||||
@@ -231,15 +231,16 @@ function onMore(): void {
|
||||
|
||||
&__more {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
right: 25px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 50%;
|
||||
right: @spacing-base;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #c9cdd4;
|
||||
color: @text-color-disabled;
|
||||
cursor: pointer;
|
||||
transform: translateY(-50%);
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -30,30 +30,30 @@ const items = [
|
||||
<style lang="less" scoped>
|
||||
.home-stats {
|
||||
.flex(row, flex-end);
|
||||
gap: 30px;
|
||||
gap: @spacing-base;
|
||||
|
||||
&__item {
|
||||
.flex(column, center, center);
|
||||
gap: 0;
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
min-width: 112px;
|
||||
gap: 2px;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
min-width: 88px;
|
||||
padding: 0;
|
||||
border-radius: @radius-sm;
|
||||
background: @primary-strong;
|
||||
border-radius: @radius-base;
|
||||
background: @filter-selected-bg;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 48px;
|
||||
font-weight: 500;
|
||||
font-size: @font-size-title;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
color: @white;
|
||||
color: @primary-strong;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: @font-size-base;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 500;
|
||||
color: @white;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -37,24 +37,24 @@ const greeting = computed(() => {
|
||||
&__greeting {
|
||||
.flex(row, flex-start);
|
||||
gap: @spacing-sm;
|
||||
font-size: 52px;
|
||||
font-weight: 700;
|
||||
font-size: @font-size-title;
|
||||
font-weight: 600;
|
||||
color: @home-welcome;
|
||||
}
|
||||
|
||||
&__wave {
|
||||
.flex(row, center);
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: @radius-round;
|
||||
background: fade(@black, 4%);
|
||||
font-size: @font-size-xl;
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
|
||||
&__summary {
|
||||
font-size: 24px;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 400;
|
||||
color: @home-welcome;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -58,14 +58,16 @@ onMounted(load)
|
||||
|
||||
<style lang="less" scoped>
|
||||
.business-detail {
|
||||
padding-top: 32px;
|
||||
padding-bottom: @spacing-xxl;
|
||||
min-height: 100%;
|
||||
padding-top: @spacing-lg;
|
||||
padding-bottom: @spacing-page-bottom;
|
||||
background: @bg-color;
|
||||
|
||||
&__breadcrumb {
|
||||
margin-bottom: 49px;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 37px;
|
||||
margin-bottom: @spacing-lg;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: @home-breadcrumb;
|
||||
|
||||
.link {
|
||||
@@ -74,18 +76,19 @@ onMounted(load)
|
||||
}
|
||||
|
||||
&__hero {
|
||||
.flex(column, flex-start);
|
||||
.flex(column, flex-start, flex-start);
|
||||
justify-content: center;
|
||||
margin-bottom: @spacing-base;
|
||||
padding: 129px 29px 0;
|
||||
border-radius: @radius-lg;
|
||||
padding: @spacing-xl;
|
||||
border-radius: @radius-base;
|
||||
background: @home-detail-hero-bg;
|
||||
height: 219px;
|
||||
min-height: 140px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__loading {
|
||||
padding: 80px 0;
|
||||
font-size: 16px;
|
||||
padding: @spacing-xxl 0;
|
||||
font-size: @font-size-base;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
|
||||
@@ -95,23 +98,23 @@ onMounted(load)
|
||||
|
||||
&__intro {
|
||||
.flex(column, flex-start);
|
||||
gap: 8px;
|
||||
gap: @spacing-sm;
|
||||
}
|
||||
|
||||
&__name {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
line-height: 33px;
|
||||
font-size: @font-size-xl;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
color: @home-body;
|
||||
}
|
||||
|
||||
&__slogan {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
color: @home-body;
|
||||
line-height: 1.5;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
|
||||
&__cta {
|
||||
|
||||
@@ -53,25 +53,25 @@ onMounted(() => {
|
||||
<style lang="less" scoped>
|
||||
.home {
|
||||
.flex(column, flex-start);
|
||||
gap: 20px;
|
||||
gap: @spacing-lg;
|
||||
padding-top: 0;
|
||||
padding-bottom: @spacing-xxl;
|
||||
padding-bottom: @spacing-page-bottom;
|
||||
background: @bg-color;
|
||||
|
||||
&__dashboard {
|
||||
.flex(row, space-between, stretch);
|
||||
gap: 60px;
|
||||
gap: @spacing-lg;
|
||||
}
|
||||
|
||||
&__dashboard-main {
|
||||
.flex(row, space-between, center);
|
||||
flex: 0 0 1091px;
|
||||
width: 1091px;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
gap: @spacing-lg;
|
||||
padding: 0 59px 0 105px;
|
||||
border: 1px solid @home-card-border;
|
||||
border-radius: @radius-lg;
|
||||
padding: @spacing-lg @spacing-xl;
|
||||
border: none;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -101,7 +101,7 @@ const localAgree = computed({
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #dde1e7;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-sm;
|
||||
background: @white;
|
||||
font-size: 13px;
|
||||
|
||||
@@ -116,7 +116,7 @@ function onSubmit(): void {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #dde1e7;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-sm;
|
||||
background: @white;
|
||||
font-size: 13px;
|
||||
|
||||
@@ -190,7 +190,7 @@ onBeforeUnmount(() => {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #dde1e7;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-sm;
|
||||
background: @white;
|
||||
font-size: 13px;
|
||||
|
||||
@@ -191,7 +191,7 @@ onBeforeUnmount(() => {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #dde1e7;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-sm;
|
||||
background: @white;
|
||||
font-size: 13px;
|
||||
|
||||
@@ -31,20 +31,20 @@ const emit = defineEmits<{ view: [id: string] }>()
|
||||
.message-list {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 0;
|
||||
margin-top: 16px;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
overflow: hidden;
|
||||
|
||||
.message-item + .message-item {
|
||||
border-top: 1px solid @finance-card-line;
|
||||
border-top: 1px solid @border-color;
|
||||
}
|
||||
|
||||
&__empty {
|
||||
padding: 60px 0;
|
||||
padding: @spacing-xxl 0;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -41,9 +41,9 @@ function countOf(value: MessageType | 'all', counts: MessageTabCounts): number {
|
||||
<style lang="less" scoped>
|
||||
.message-tabs {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 0;
|
||||
height: 438px;
|
||||
padding: 14px 0;
|
||||
gap: 2px;
|
||||
min-height: 0;
|
||||
padding: @spacing-sm 0;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-sizing: border-box;
|
||||
@@ -51,22 +51,24 @@ function countOf(value: MessageType | 'all', counts: MessageTabCounts): number {
|
||||
&__tab {
|
||||
.flex(row, space-between, center);
|
||||
gap: @spacing-sm;
|
||||
height: 44px;
|
||||
padding: 0 25px;
|
||||
border-radius: 0;
|
||||
height: 40px;
|
||||
margin: 0 @spacing-sm;
|
||||
padding: 0 @spacing-base;
|
||||
border-radius: @radius-sm;
|
||||
background: transparent;
|
||||
color: @message-tabs-text;
|
||||
font-size: 13px;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
transition: color 0.2s;
|
||||
line-height: 1.4;
|
||||
transition: color 0.2s, background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: @primary-strong;
|
||||
background: @bg-color-light;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: transparent;
|
||||
background: @filter-selected-bg;
|
||||
color: @primary-strong;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -122,21 +122,24 @@ onMounted(load)
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 60px;
|
||||
background: @message-page-bg;
|
||||
min-height: 100%;
|
||||
padding-bottom: @spacing-page-bottom;
|
||||
background: @bg-color;
|
||||
|
||||
&__wrap {
|
||||
width: 100%;
|
||||
padding: 28px 70px 0;
|
||||
max-width: @container-width;
|
||||
margin: 0 auto;
|
||||
padding: @spacing-lg @page-gutter 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__breadcrumb {
|
||||
.flex(row, flex-start, center);
|
||||
gap: 4px;
|
||||
height: 49px;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
min-height: 40px;
|
||||
font-size: @font-size-sm;
|
||||
line-height: 1.5;
|
||||
color: @project-muted;
|
||||
}
|
||||
|
||||
@@ -158,18 +161,18 @@ onMounted(load)
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding: 45px 47px 40px;
|
||||
padding: @spacing-xl;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
font-size: @font-size-xl;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: @finance-ink;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__time {
|
||||
|
||||
@@ -61,7 +61,7 @@ const UNREAD_LABEL = computed(() => (unreadCount.value > 0 ? `全部已读 (${un
|
||||
slogan="统一接收项目进度、售后工单、账单待办等站内消息，重要业务动态实时提醒"
|
||||
/>
|
||||
|
||||
<div class="message__body">
|
||||
<div class="container message__body">
|
||||
<MessageTabs
|
||||
class="message__tabs"
|
||||
:active="query.type"
|
||||
@@ -120,55 +120,56 @@ const UNREAD_LABEL = computed(() => (unreadCount.value > 0 ? `全部已读 (${un
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 14px;
|
||||
background: @message-page-bg;
|
||||
min-height: 100%;
|
||||
padding-bottom: @spacing-page-bottom;
|
||||
background: @bg-color;
|
||||
|
||||
&__body {
|
||||
.flex(row, flex-start, flex-start);
|
||||
gap: 22px;
|
||||
gap: @spacing-lg;
|
||||
width: 100%;
|
||||
padding: 119px 25px 0;
|
||||
padding: @spacing-lg 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
flex-shrink: 0;
|
||||
width: 198px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
&__main {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 0;
|
||||
gap: @spacing-base;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
.flex(row, flex-start, center);
|
||||
gap: 0;
|
||||
height: 69px;
|
||||
padding: 0 21px 0 25px;
|
||||
border: 1px solid @message-toolbar-btn-border;
|
||||
gap: @spacing-base;
|
||||
min-height: 64px;
|
||||
padding: 0 @spacing-lg;
|
||||
border: none;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex: 0 1 460px;
|
||||
height: 37px;
|
||||
flex: 0 1 360px;
|
||||
height: 36px;
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
height: 37px;
|
||||
padding: 0 16px;
|
||||
border-radius: @radius-base;
|
||||
height: 36px;
|
||||
padding: 0 @spacing-base;
|
||||
border-radius: @radius-round;
|
||||
background: @finance-field-bg;
|
||||
box-shadow: none;
|
||||
box-shadow: 0 0 0 1px @border-color inset;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
color: @finance-ink;
|
||||
font-size: 13px;
|
||||
font-size: @font-size-base;
|
||||
|
||||
&::placeholder {
|
||||
color: @contract-placeholder;
|
||||
@@ -177,11 +178,11 @@ const UNREAD_LABEL = computed(() => (unreadCount.value > 0 ? `全部已读 (${un
|
||||
}
|
||||
|
||||
&__btn {
|
||||
height: 28px;
|
||||
margin-left: 14px;
|
||||
padding: 0 15px;
|
||||
border-radius: @radius-sm;
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
margin-left: 0;
|
||||
padding: 0 @spacing-lg;
|
||||
border-radius: @radius-round;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover {
|
||||
@@ -195,15 +196,15 @@ const UNREAD_LABEL = computed(() => (unreadCount.value > 0 ? `全部已读 (${un
|
||||
color: @white;
|
||||
|
||||
&:hover {
|
||||
border-color: @primary-strong;
|
||||
background: @primary-strong;
|
||||
border-color: @primary-hover;
|
||||
background: @primary-hover;
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
&--read {
|
||||
margin-left: auto;
|
||||
border-color: @message-toolbar-btn-border;
|
||||
border-color: @border-color;
|
||||
background: @white;
|
||||
color: @finance-entry-text;
|
||||
|
||||
@@ -218,22 +219,22 @@ const UNREAD_LABEL = computed(() => (unreadCount.value > 0 ? `全部已读 (${un
|
||||
&__pagination {
|
||||
justify-content: flex-end;
|
||||
align-self: stretch;
|
||||
margin-top: 16px;
|
||||
margin-top: @spacing-base;
|
||||
padding: 0;
|
||||
|
||||
:deep(.pagination__btn) {
|
||||
min-width: 23px;
|
||||
height: 26px;
|
||||
border-color: @message-toolbar-btn-border;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-sm;
|
||||
background: @white;
|
||||
color: @finance-entry-text;
|
||||
font-size: 12px;
|
||||
color: @text-color;
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
|
||||
:deep(.pagination__btn.is-active) {
|
||||
border-color: @message-pager-active-bg;
|
||||
background: @message-pager-active-bg;
|
||||
border-color: @primary-strong;
|
||||
background: @primary-light;
|
||||
color: @primary-strong;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -32,24 +32,29 @@ const menus: MenuItem[] = [
|
||||
<style lang="less" scoped>
|
||||
.profile-sider {
|
||||
.flex(column, flex-start);
|
||||
gap: 0;
|
||||
gap: 2px;
|
||||
padding: @spacing-sm 0;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
|
||||
&__item {
|
||||
.flex(row, flex-start, center);
|
||||
height: 36px;
|
||||
padding: 0 16px;
|
||||
border-radius: @profile-radius;
|
||||
height: 40px;
|
||||
margin: 0 @spacing-sm;
|
||||
padding: 0 @spacing-base;
|
||||
border-radius: @radius-sm;
|
||||
color: @text-color;
|
||||
font-size: 13px;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 400;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: @primary-strong;
|
||||
background: @bg-color-light;
|
||||
}
|
||||
|
||||
&.router-link-active {
|
||||
background: @profile-nav-active-bg;
|
||||
background: @filter-selected-bg;
|
||||
color: @primary-strong;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -36,32 +36,34 @@ onMounted(() => {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.profile {
|
||||
min-height: 737px;
|
||||
background: @profile-page-bg;
|
||||
min-height: 100%;
|
||||
padding-bottom: @spacing-page-bottom;
|
||||
background: @bg-color;
|
||||
|
||||
&__container {
|
||||
padding: 24px 16px 0 10px;
|
||||
padding-top: @spacing-lg;
|
||||
}
|
||||
|
||||
&__body {
|
||||
.flex(row, flex-start, stretch);
|
||||
gap: @spacing-lg;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__aside {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 16px;
|
||||
flex: 0 0 156px;
|
||||
width: 156px;
|
||||
gap: @spacing-base;
|
||||
flex: 0 0 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
&__main {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
min-height: 534px;
|
||||
margin-left: 10px;
|
||||
padding: 26px 28px 22px;
|
||||
border-radius: @radius-lg;
|
||||
min-height: 480px;
|
||||
margin-left: 0;
|
||||
padding: @spacing-lg @spacing-xl;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -306,45 +306,45 @@ onMounted(() => {
|
||||
<style lang="less" scoped>
|
||||
.after-sales {
|
||||
.flex(column, flex-start, stretch);
|
||||
min-height: 100%;
|
||||
padding-bottom: @spacing-page-bottom;
|
||||
background: @white;
|
||||
background: @bg-color;
|
||||
|
||||
// 设计稿 el40 面包屑 y=116，header 底 72 → padding-top 44px。
|
||||
&__breadcrumb {
|
||||
padding-top: 44px;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 27px;
|
||||
padding-top: @spacing-lg;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: @project-breadcrumb;
|
||||
}
|
||||
|
||||
&__header {
|
||||
.flex(column, flex-start, stretch);
|
||||
padding-top: 52px;
|
||||
padding-top: @spacing-base;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 29px;
|
||||
font-size: @font-size-title;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
color: @project-ink;
|
||||
}
|
||||
|
||||
// 设计稿 #26：副标题文字 x=728~1185，中心 ≈ 957 ≈ 内容区中心 960（居中）。
|
||||
&__subtitle {
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
margin-top: @spacing-sm;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 400;
|
||||
line-height: 17px;
|
||||
line-height: 1.5;
|
||||
color: @project-label;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__card {
|
||||
.flex(column, flex-start, stretch);
|
||||
margin-top: 30px;
|
||||
padding: 22px 0 40px;
|
||||
margin-top: @spacing-base;
|
||||
padding: @spacing-lg;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -237,54 +237,54 @@ function onClearChips(): void {
|
||||
<style lang="less" scoped>
|
||||
.project-filter {
|
||||
flex-shrink: 0;
|
||||
width: 516px;
|
||||
// 字体/尺寸/间距/面板宽度对齐案例库 CasesFilter（老大要求），颜色保持不变。
|
||||
padding: 15px 0 40px;
|
||||
width: @project-filter-width;
|
||||
padding: @spacing-lg 0 @spacing-xl;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
|
||||
&__title,
|
||||
&__group,
|
||||
&__actions {
|
||||
padding: 0 50px 0 35px;
|
||||
padding: 0 @spacing-lg;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
line-height: 41px;
|
||||
font-size: @font-size-xl;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&__group {
|
||||
margin-top: 24px;
|
||||
margin-top: @spacing-lg;
|
||||
}
|
||||
|
||||
&__title + &__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: @heading-color;
|
||||
}
|
||||
|
||||
&__list {
|
||||
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;
|
||||
font-size: 20px;
|
||||
font-size: @font-size-base;
|
||||
color: @heading-color;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
|
||||
@@ -301,8 +301,8 @@ function onClearChips(): void {
|
||||
&__box {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid @border-color-dark;
|
||||
border-radius: 2px;
|
||||
background: @white;
|
||||
@@ -312,9 +312,9 @@ function onClearChips(): 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) scale(0);
|
||||
@@ -340,25 +340,25 @@ function onClearChips(): void {
|
||||
&__row-count {
|
||||
flex-shrink: 0;
|
||||
margin-left: @spacing-sm;
|
||||
font-size: 16px;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 500;
|
||||
color: @text-color;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
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;
|
||||
background: @project-pill-bg;
|
||||
color: @text-color;
|
||||
font-size: 20px;
|
||||
font-size: @font-size-sm;
|
||||
.ellipsis();
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
|
||||
@@ -367,8 +367,9 @@ function onClearChips(): void {
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: @primary-color;
|
||||
color: @white;
|
||||
background: @filter-selected-bg;
|
||||
color: @primary-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&--wide {
|
||||
@@ -378,20 +379,20 @@ function onClearChips(): void {
|
||||
|
||||
&__range {
|
||||
.flex(row, space-between, center);
|
||||
margin-top: 9px;
|
||||
margin-top: @spacing-sm;
|
||||
gap: @spacing-xs;
|
||||
}
|
||||
|
||||
&__date {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 53px;
|
||||
padding: 0 @spacing-xs;
|
||||
height: 36px;
|
||||
padding: 0 @spacing-sm;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-sm;
|
||||
background: @white;
|
||||
color: @text-color;
|
||||
font-size: 20px;
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
|
||||
&__range-sep {
|
||||
@@ -399,8 +400,8 @@ function onClearChips(): void {
|
||||
}
|
||||
|
||||
&__chips {
|
||||
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;
|
||||
}
|
||||
@@ -410,13 +411,13 @@ function onClearChips(): void {
|
||||
}
|
||||
|
||||
&__chips-title {
|
||||
font-size: 20px;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 500;
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&__chips-clear {
|
||||
font-size: 16px;
|
||||
font-size: @font-size-sm;
|
||||
color: @primary-color;
|
||||
|
||||
&:hover {
|
||||
@@ -427,18 +428,18 @@ function onClearChips(): void {
|
||||
&__chips-list {
|
||||
.flex(row, flex-start, center);
|
||||
flex-wrap: wrap;
|
||||
margin-top: 16px;
|
||||
gap: 14px 13px;
|
||||
margin-top: @spacing-sm;
|
||||
gap: @spacing-sm;
|
||||
}
|
||||
|
||||
&__chip {
|
||||
.flex(row, center, center);
|
||||
height: 32px;
|
||||
height: 28px;
|
||||
padding: 0 @spacing-sm;
|
||||
border-radius: @radius-round;
|
||||
background: @white;
|
||||
color: @primary-color;
|
||||
font-size: 14px;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
@@ -452,17 +453,17 @@ function onClearChips(): void {
|
||||
|
||||
&__actions {
|
||||
.flex(row, flex-start, center);
|
||||
margin-top: 30px;
|
||||
gap: 13px;
|
||||
margin-top: @spacing-lg;
|
||||
gap: @spacing-sm;
|
||||
}
|
||||
|
||||
&__reset {
|
||||
flex: 0 0 135px;
|
||||
height: 30px;
|
||||
flex: 0 0 88px;
|
||||
height: 32px;
|
||||
border-radius: @radius-round;
|
||||
background: @pill-bg;
|
||||
background: @project-pill-bg;
|
||||
color: @text-color;
|
||||
font-size: 14px;
|
||||
font-size: @font-size-sm;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
@@ -471,11 +472,11 @@ function onClearChips(): void {
|
||||
|
||||
&__submit {
|
||||
flex: 1;
|
||||
height: 30px;
|
||||
height: 32px;
|
||||
border-radius: @radius-round;
|
||||
background: @primary-color;
|
||||
color: @white;
|
||||
font-size: 14px;
|
||||
font-size: @font-size-sm;
|
||||
|
||||
&:hover {
|
||||
background: @primary-hover;
|
||||
|
||||
@@ -69,19 +69,20 @@ function go(page: number): void {
|
||||
<style lang="less" scoped>
|
||||
.project-pager {
|
||||
.flex(row, flex-end, center);
|
||||
gap: 4px;
|
||||
margin-top: 15px;
|
||||
gap: @spacing-xs;
|
||||
margin-top: @spacing-lg;
|
||||
|
||||
&__btn {
|
||||
.flex(row, center, center);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid @border-color-dark;
|
||||
border-radius: 2px;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
padding: 0 6px;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-sm;
|
||||
background: @white;
|
||||
color: @heading-color;
|
||||
color: @text-color;
|
||||
font-size: @font-size-sm;
|
||||
transition: border-color 0.2s, color 0.2s;
|
||||
transition: border-color 0.2s, color 0.2s, background-color 0.2s;
|
||||
|
||||
&:hover:not(:disabled):not(.is-ellipsis) {
|
||||
border-color: @primary-color;
|
||||
@@ -90,7 +91,9 @@ function go(page: number): void {
|
||||
|
||||
&.is-active {
|
||||
border-color: @primary-color;
|
||||
background: @primary-light;
|
||||
color: @primary-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.is-ellipsis {
|
||||
|
||||
@@ -54,7 +54,7 @@ function progressLabel(value: number | null | undefined): string {
|
||||
<th>业务类型</th>
|
||||
<th>进度</th>
|
||||
<th>状态</th>
|
||||
<th />
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -108,7 +108,8 @@ function progressLabel(value: number | null | undefined): string {
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid @project-table-line;
|
||||
border: none;
|
||||
border-bottom: 1px solid @project-table-line;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: @font-size-sm;
|
||||
@@ -117,22 +118,27 @@ function progressLabel(value: number | null | undefined): string {
|
||||
th {
|
||||
height: 44px;
|
||||
background: @project-table-head-bg;
|
||||
color: @heading-color;
|
||||
font-weight: 600;
|
||||
color: @text-color-secondary;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
td {
|
||||
height: 76px;
|
||||
height: 64px;
|
||||
color: @heading-color;
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
|
||||
th:nth-child(1) { width: 6.09%; }
|
||||
th:nth-child(2) { width: 29.34%; }
|
||||
th:nth-child(3) { width: 21.76%; }
|
||||
th:nth-child(4) { width: 10.68%; }
|
||||
th:nth-child(5) { width: 14.37%; }
|
||||
th:nth-child(6) { width: 8.98%; }
|
||||
th:nth-child(7) { width: 8.78%; }
|
||||
tbody tr:hover td {
|
||||
background: @bg-color-light;
|
||||
}
|
||||
|
||||
th:nth-child(1) { width: 6%; }
|
||||
th:nth-child(2) { width: 18%; }
|
||||
th:nth-child(3) { width: 24%; }
|
||||
th:nth-child(4) { width: 14%; }
|
||||
th:nth-child(5) { width: 10%; }
|
||||
th:nth-child(6) { width: 12%; }
|
||||
th:nth-child(7) { width: 16%; }
|
||||
}
|
||||
|
||||
&__name {
|
||||
@@ -142,7 +148,7 @@ function progressLabel(value: number | null | undefined): string {
|
||||
|
||||
&__ops {
|
||||
.flex(row, center, center);
|
||||
gap: 10px;
|
||||
gap: @spacing-base;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
@@ -76,21 +76,28 @@ const keyword = computed({
|
||||
<style lang="less" scoped>
|
||||
.project-toolbar {
|
||||
.flex(row, flex-start, center);
|
||||
gap: 24px;
|
||||
gap: @spacing-base;
|
||||
|
||||
&__field {
|
||||
.flex(row, flex-start, center);
|
||||
position: relative;
|
||||
flex: 0 1 380px;
|
||||
flex: 0 1 360px;
|
||||
min-width: 0;
|
||||
height: 37px;
|
||||
height: 36px;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-round;
|
||||
background: @input-bg;
|
||||
background: @project-input-bg;
|
||||
transition: border-color 0.2s, background-color 0.2s;
|
||||
|
||||
&:focus-within {
|
||||
border-color: @primary-color;
|
||||
background: @white;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
left: @spacing-base;
|
||||
color: @text-color-disabled;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -113,10 +120,10 @@ const keyword = computed({
|
||||
|
||||
&__btn {
|
||||
flex-shrink: 0;
|
||||
height: 26px;
|
||||
padding: 0 22px;
|
||||
height: 36px;
|
||||
padding: 0 @spacing-lg;
|
||||
border-radius: @radius-round;
|
||||
background: @pill-bg;
|
||||
background: @project-pill-bg;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
transition: color 0.2s, background-color 0.2s;
|
||||
|
||||
@@ -92,75 +92,81 @@ onMounted(load)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container project-detail">
|
||||
<nav class="project-detail__breadcrumb text-secondary">
|
||||
<RouterLink to="/project" class="link">
|
||||
项目中心
|
||||
</RouterLink>
|
||||
<span> > </span>
|
||||
<span>项目详情</span>
|
||||
</nav>
|
||||
<div class="project-detail">
|
||||
<div class="container project-detail__inner">
|
||||
<nav class="project-detail__breadcrumb text-secondary">
|
||||
<RouterLink to="/project" class="link">
|
||||
项目中心
|
||||
</RouterLink>
|
||||
<span> > </span>
|
||||
<span>项目详情</span>
|
||||
</nav>
|
||||
|
||||
<template v-if="current">
|
||||
<div class="project-detail__info">
|
||||
<ProjectInfoCard :project="current" />
|
||||
</div>
|
||||
<template v-if="current">
|
||||
<div class="project-detail__panel">
|
||||
<div class="project-detail__info">
|
||||
<ProjectInfoCard :project="current" />
|
||||
</div>
|
||||
|
||||
<div class="project-detail__tabs">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
class="project-detail__tab"
|
||||
:class="{
|
||||
'is-active': activeTab === tab.value,
|
||||
'is-loading': loadingTab === tab.value,
|
||||
}"
|
||||
@click="onTabClick(tab.value)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="project-detail__tabs">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
class="project-detail__tab"
|
||||
:class="{
|
||||
'is-active': activeTab === tab.value,
|
||||
'is-loading': loadingTab === tab.value,
|
||||
}"
|
||||
@click="onTabClick(tab.value)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<template v-if="activeTab === 'progress'">
|
||||
<ProjectProgress
|
||||
:progress="current.progress"
|
||||
:start-time="current.startTime"
|
||||
:end-time="current.endTime"
|
||||
/>
|
||||
<ProjectMilestones :milestones="current.milestones" />
|
||||
<ProjectTeam :team="current.team" />
|
||||
<div class="project-detail__body">
|
||||
<template v-if="activeTab === 'progress'">
|
||||
<ProjectProgress
|
||||
:progress="current.progress"
|
||||
:start-time="current.startTime"
|
||||
:end-time="current.endTime"
|
||||
/>
|
||||
<ProjectMilestones :milestones="current.milestones" />
|
||||
<ProjectTeam :team="current.team" />
|
||||
</template>
|
||||
|
||||
<ProjectFiles
|
||||
v-if="activeTab === 'files'"
|
||||
:files="current.files"
|
||||
@delete="onDeleteFile"
|
||||
@preview="onPreviewFile"
|
||||
@download="onDownloadFile"
|
||||
/>
|
||||
|
||||
<ProjectFinance
|
||||
v-if="activeTab === 'finance'"
|
||||
:payment-plans="current.paymentPlans"
|
||||
:invoice-records="current.invoiceRecords"
|
||||
:contract-file="current.contractFile"
|
||||
@pay="onPay"
|
||||
@preview="onFinancePreview"
|
||||
@download="onFinanceDownload"
|
||||
/>
|
||||
|
||||
<ProjectAfterSales
|
||||
v-if="activeTab === 'afterSales'"
|
||||
:after-sales="current.afterSales"
|
||||
:project-status="current.status"
|
||||
@apply="onApplyAfterSales"
|
||||
@cancel="cancelVisible = true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<ProjectFiles
|
||||
v-if="activeTab === 'files'"
|
||||
:files="current.files"
|
||||
@delete="onDeleteFile"
|
||||
@preview="onPreviewFile"
|
||||
@download="onDownloadFile"
|
||||
/>
|
||||
|
||||
<ProjectFinance
|
||||
v-if="activeTab === 'finance'"
|
||||
:payment-plans="current.paymentPlans"
|
||||
:invoice-records="current.invoiceRecords"
|
||||
:contract-file="current.contractFile"
|
||||
@pay="onPay"
|
||||
@preview="onFinancePreview"
|
||||
@download="onFinanceDownload"
|
||||
/>
|
||||
|
||||
<ProjectAfterSales
|
||||
v-if="activeTab === 'afterSales'"
|
||||
:after-sales="current.afterSales"
|
||||
:project-status="current.status"
|
||||
@apply="onApplyAfterSales"
|
||||
@cancel="cancelVisible = true"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<p v-else class="project-detail__empty text-secondary">
|
||||
项目不存在或已取消
|
||||
</p>
|
||||
<p v-else class="project-detail__empty text-secondary">
|
||||
项目不存在或已取消
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
v-model:visible="cancelVisible"
|
||||
@@ -175,45 +181,52 @@ onMounted(load)
|
||||
|
||||
<style lang="less" scoped>
|
||||
.project-detail {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 0;
|
||||
min-height: 100%;
|
||||
padding-bottom: @spacing-page-bottom;
|
||||
background: @white;
|
||||
background: @bg-color;
|
||||
|
||||
&__inner {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
// 设计稿 el55 面包屑 y=116，header 底 72 → padding-top 44px。
|
||||
&__breadcrumb {
|
||||
padding-top: 44px;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 27px;
|
||||
padding-top: @spacing-lg;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: @project-breadcrumb;
|
||||
}
|
||||
|
||||
// 设计稿 el51 logo 盒 y=195（面包屑盒底 = 72+44+27 = 143）→ 间距 52px。
|
||||
&__info {
|
||||
margin-top: 52px;
|
||||
&__panel {
|
||||
margin-top: @spacing-base;
|
||||
padding: @spacing-lg;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
}
|
||||
|
||||
&__info {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// 设计稿 el42 tab 文字 y=264，meta 文字底 231+15=246。
|
||||
&__tabs {
|
||||
.flex(row, flex-start, center);
|
||||
gap: 16.45px;
|
||||
height: 41px;
|
||||
// 老大要求：信息卡与 tabs 栏之间留 20px 间距（原设计稿 2px 覆盖）。
|
||||
margin-top: 20px;
|
||||
gap: @spacing-lg;
|
||||
height: 40px;
|
||||
margin-top: @spacing-lg;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid @project-divider;
|
||||
border-bottom: 1px solid @border-color;
|
||||
}
|
||||
|
||||
&__tab {
|
||||
position: relative;
|
||||
padding: 0 0 24px;
|
||||
padding: 0 0 @spacing-base;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: @project-cell;
|
||||
font-size: 13px;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 400;
|
||||
line-height: 17px;
|
||||
line-height: 1.4;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
|
||||
@@ -242,6 +255,10 @@ onMounted(load)
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding-top: @spacing-lg;
|
||||
}
|
||||
|
||||
&__empty {
|
||||
padding: @spacing-xxl 0;
|
||||
text-align: center;
|
||||
|
||||
@@ -111,42 +111,44 @@ onMounted(() => {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.project {
|
||||
min-height: 100%;
|
||||
padding-bottom: @spacing-page-bottom;
|
||||
background: @bg-color;
|
||||
|
||||
&__head {
|
||||
padding: 16px 0 32px;
|
||||
padding: @spacing-lg 0;
|
||||
background: @white;
|
||||
border-bottom: 1px solid @border-color;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: @font-size-xxl;
|
||||
font-size: @font-size-title;
|
||||
font-weight: 600;
|
||||
color: @heading-color;
|
||||
line-height: 1.2;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
&__slogan {
|
||||
margin-top: 14px;
|
||||
margin-top: @spacing-sm;
|
||||
font-size: @font-size-base;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
|
||||
&__body {
|
||||
.flex(row, flex-start, stretch);
|
||||
gap: 17px;
|
||||
padding-top: 18px;
|
||||
gap: @spacing-lg;
|
||||
padding-top: @spacing-lg;
|
||||
}
|
||||
|
||||
&__main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 18px 12px 20px;
|
||||
padding: @spacing-lg;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
|
||||
// 搜索表单（ProjectToolbar）与下方项目表格间距 35px（老大指定）
|
||||
.project-toolbar + .project-table {
|
||||
margin-top: 35px;
|
||||
margin-top: @spacing-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,7 +60,7 @@ watch(
|
||||
<style lang="less" scoped>
|
||||
.chat-window {
|
||||
.flex(column, flex-start, stretch);
|
||||
border: 1px solid @service-card-line;
|
||||
border: none;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-sizing: border-box;
|
||||
@@ -68,10 +68,10 @@ watch(
|
||||
|
||||
&__header {
|
||||
.flex(row, flex-start, center);
|
||||
gap: 16px;
|
||||
height: 66px;
|
||||
padding: 0 22px;
|
||||
border-bottom: 1px solid @service-card-line;
|
||||
gap: @spacing-base;
|
||||
height: 56px;
|
||||
padding: 0 @spacing-lg;
|
||||
border-bottom: 1px solid @border-color;
|
||||
background: @white;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -29,7 +29,7 @@ onMounted(() => {
|
||||
slogan="在线客服为您提供需求咨询、项目进度查询、业务答疑，快速协助解决平台操作与项目相关问题"
|
||||
/>
|
||||
|
||||
<div class="service__wrap">
|
||||
<div class="container service__wrap">
|
||||
<ChatWindow
|
||||
:messages="messages"
|
||||
@send="onSend"
|
||||
@@ -44,12 +44,13 @@ onMounted(() => {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 60px;
|
||||
background: @message-page-bg;
|
||||
min-height: 100%;
|
||||
padding-bottom: @spacing-page-bottom;
|
||||
background: @bg-color;
|
||||
|
||||
&__wrap {
|
||||
width: 100%;
|
||||
padding: 0 70px;
|
||||
padding: @spacing-lg 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user