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

feat 案例样式整改

Browse Source
This commit is contained in:
Ironsp
2026-10-13 15:14:47 +08:00
parent b0e9fe6450
commit d0779fe37c
15 changed files with 129 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/AppFooter.vue
View File

@@ -121,17 +121,17 @@ const coreBusiness = [
} }
&__name { &__name {
font-size: 28px; font-size: @font-size-xl;
font-weight: 500; font-weight: 500;
line-height: 41px; line-height: 1.4;
color: @white; color: @white;
} }
&__desc { &__desc {
margin-top: 0; margin-top: 0;
font-size: 16px; font-size: @font-size-sm;
font-weight: 500; font-weight: 400;
line-height: 23px; line-height: 1.5;
} }
&__col { &__col {
@@ -154,18 +154,18 @@ const coreBusiness = [
} }
&__title { &__title {
margin-bottom: 20px; margin-bottom: @spacing-base;
font-size: 28px; font-size: @font-size-lg;
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.8;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
transition: color 0.2s; transition: color 0.2s;

27
src/components/AppHeader.vue
View File

@@ -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;
} }
} }

6
src/views/contract/cpns/ContractSignPanel.vue
View File

@@ -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 {

6
src/views/finance/checkout.vue
View File

@@ -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 {

17
src/views/finance/pay-result.vue
View File

@@ -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;
} }

14
src/views/home/cpns/HomeServiceContents.vue
View File

@@ -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;
} }

29
src/views/home/cpns/HomeServiceTypes.vue
View File

@@ -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;

16
src/views/profile/address.vue
View File

@@ -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;

6
src/views/profile/cpns/FeedbackForm.vue
View File

@@ -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 {

26
src/views/profile/cpns/HotlinePanel.vue
View File

@@ -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>

16
src/views/profile/cpns/QualificationCard.vue
View File

@@ -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;

29
src/views/profile/cpns/SecurityPanel.vue
View File

@@ -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;

2
src/views/profile/delete-account.vue
View File

@@ -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;

10
src/views/profile/favorites.vue
View File

@@ -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 {

15
src/views/project/after-sales.vue
View File

@@ -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> &gt; </span> <span> &gt; </span>
<span>项目详情</span> <RouterLink :to="`/project/${projectId}`" class="link">
项目详情
</RouterLink>
<span> &gt; </span>
<span>申请售后</span>
</nav> </nav>
<header class="after-sales__header"> <header class="after-sales__header">
@@ -301,15 +306,19 @@ onMounted(() => {
</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%; min-height: 100%;
padding-bottom: @spacing-page-bottom; padding-bottom: @spacing-page-bottom;
background: @bg-color; background: @bg-color;
&__inner {
.flex(column, flex-start, stretch);
}
&__breadcrumb { &__breadcrumb {
padding-top: @spacing-lg; padding-top: @spacing-lg;
font-size: @font-size-sm; font-size: @font-size-sm;