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