diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue index 31a311d..0352797 100644 --- a/src/components/AppFooter.vue +++ b/src/components/AppFooter.vue @@ -121,17 +121,17 @@ const coreBusiness = [ } &__name { - font-size: 28px; + font-size: @font-size-xl; font-weight: 500; - line-height: 41px; + line-height: 1.4; color: @white; } &__desc { margin-top: 0; - font-size: 16px; - font-weight: 500; - line-height: 23px; + font-size: @font-size-sm; + font-weight: 400; + line-height: 1.5; } &__col { @@ -154,18 +154,18 @@ const coreBusiness = [ } &__title { - margin-bottom: 20px; - font-size: 28px; + margin-bottom: @spacing-base; + font-size: @font-size-lg; font-weight: 500; - line-height: 41px; + line-height: 1.4; white-space: nowrap; color: @white; } &__link { - font-size: 16px; - font-weight: 500; - line-height: 23px; + font-size: @font-size-sm; + font-weight: 400; + line-height: 1.8; white-space: nowrap; cursor: pointer; transition: color 0.2s; diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index d5202be..3807597 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -106,16 +106,16 @@ onMounted(() => void messageStore.fetchUnreadCount()) &__nav { .flex(row, center); - gap: @header-nav-gap; + gap: clamp(@spacing-lg, 4vw, 56px); height: 100%; &-item { position: relative; .flex(row, center); height: 100%; - font-size: 18px; + font-size: @font-size-md; font-weight: 500; - color: @black; + color: @heading-color; transition: color 0.2s; &:hover, @@ -127,8 +127,8 @@ onMounted(() => void messageStore.fetchUnreadCount()) content: ''; position: absolute; left: 50%; - bottom: 11px; - width: 29px; + bottom: 12px; + width: 24px; height: 2px; border-radius: 1px; background: @home-tab-active; @@ -139,20 +139,21 @@ onMounted(() => void messageStore.fetchUnreadCount()) &__actions { .flex(row, flex-end, center); - gap: 29px; + gap: @spacing-base; margin-left: auto; flex-shrink: 0; } &__action { .flex(row, center); - gap: 5px; - width: 106px; + gap: @spacing-xs; + min-width: 96px; height: 36px; - border-radius: @radius-sm; + padding: 0 @spacing-base; + border-radius: @radius-round; background: @primary-color; color: @white; - font-size: 16px; + font-size: @font-size-sm; font-weight: 500; transition: opacity 0.2s; @@ -161,8 +162,8 @@ onMounted(() => void messageStore.fetchUnreadCount()) } &-icon { - width: 18px; - height: 18px; + width: 16px; + height: 16px; } } @@ -196,7 +197,7 @@ onMounted(() => void messageStore.fetchUnreadCount()) } &__login { - font-size: 16px; + font-size: @font-size-base; font-weight: 500; } } diff --git a/src/views/contract/cpns/ContractSignPanel.vue b/src/views/contract/cpns/ContractSignPanel.vue index e7478ea..18fd4d1 100644 --- a/src/views/contract/cpns/ContractSignPanel.vue +++ b/src/views/contract/cpns/ContractSignPanel.vue @@ -25,9 +25,9 @@ const emit = defineEmits<{ refresh: [] }>() diff --git a/src/views/profile/cpns/QualificationCard.vue b/src/views/profile/cpns/QualificationCard.vue index 21a0251..d4cf5ee 100644 --- a/src/views/profile/cpns/QualificationCard.vue +++ b/src/views/profile/cpns/QualificationCard.vue @@ -75,11 +75,11 @@ const STATUS_CLASS: Record = { .qual-row { position: relative; .flex(row, flex-start, center); - min-height: 78px; - padding: 14px 24px 14px 52px; - border: 1px solid @profile-card-border; - border-radius: @radius-lg; - background: @white; + min-height: 72px; + padding: @spacing-base @spacing-lg; + border: 1px solid @border-color; + border-radius: @radius-base; + background: @bg-color-light; box-sizing: border-box; &__col { @@ -139,9 +139,9 @@ const STATUS_CLASS: Record = { &__btn { height: 28px; - padding: 0 14px; - border: 1px solid @profile-card-border; - border-radius: @radius-base; + padding: 0 @spacing-sm; + border: 1px solid @border-color; + border-radius: @radius-round; background: @white; color: @finance-entry-text; font-size: @font-size-sm; diff --git a/src/views/profile/cpns/SecurityPanel.vue b/src/views/profile/cpns/SecurityPanel.vue index caf8638..e6fdfe9 100644 --- a/src/views/profile/cpns/SecurityPanel.vue +++ b/src/views/profile/cpns/SecurityPanel.vue @@ -121,12 +121,12 @@ function goDeleteAccount(): void { &__title { position: relative; - padding-left: 14px; - margin-bottom: 22px; + padding-left: @spacing-base; + margin-bottom: @spacing-base; font-size: @font-size-base; font-weight: 600; color: @profile-ink; - line-height: 20px; + line-height: 1.4; &::before { content: ''; @@ -142,22 +142,23 @@ function goDeleteAccount(): void { &__row { .flex(row, flex-start, center); - height: 85px; - padding: 0 48px 0 52px; - border: 1px solid @profile-line; + min-height: 72px; + padding: 0 @spacing-lg; + border: 1px solid @border-color; border-radius: @radius-base; - background: @white; + background: @bg-color-light; box-sizing: border-box; cursor: pointer; - transition: border-color 0.2s; + transition: border-color 0.2s, background-color 0.2s; &:hover { - border-color: @profile-nav-active-bg; + border-color: @primary-color; + background: @filter-selected-bg; } } &__row + &__row { - margin-top: 16px; + margin-top: @spacing-base; } &__icon { @@ -227,10 +228,10 @@ function goDeleteAccount(): void { &__delete { width: 100%; - height: 48px; - margin-top: 108px; - border: 1px solid @profile-line; - border-radius: @profile-radius; + height: 40px; + margin-top: @spacing-xxl; + border: 1px solid @border-color; + border-radius: @radius-round; background: @white; color: @finance-axis-text; font-size: @font-size-base; diff --git a/src/views/profile/delete-account.vue b/src/views/profile/delete-account.vue index 3321e55..0a8b957 100644 --- a/src/views/profile/delete-account.vue +++ b/src/views/profile/delete-account.vue @@ -253,7 +253,7 @@ function onDeleteAccount(): void { border: 2px solid @danger-color; border-radius: @radius-round; color: @danger-color; - font-size: 26px; + font-size: @font-size-xl; font-weight: 700; font-style: italic; line-height: 1; diff --git a/src/views/profile/favorites.vue b/src/views/profile/favorites.vue index 6423bb9..ad41c9b 100644 --- a/src/views/profile/favorites.vue +++ b/src/views/profile/favorites.vue @@ -95,19 +95,21 @@ onMounted(() => {