feat 个人中心_地址整改

This commit is contained in:
Ironsp
2026-10-13 15:48:57 +08:00
parent f917062d76
commit 77dbabb1f1
3 changed files with 38 additions and 41 deletions

View File

@@ -78,7 +78,7 @@ onMounted(() => {
class="address-row" class="address-row"
> >
<span v-if="address.isDefault" class="address-row__tag">默认</span> <span v-if="address.isDefault" class="address-row__tag">默认</span>
<div class="address-row__col address-row__col--name"> <div class="address-row__col">
<p class="address-row__label">收货人姓名</p> <p class="address-row__label">收货人姓名</p>
<EllipsisText class="address-row__value" :text="address.receiverName" /> <EllipsisText class="address-row__value" :text="address.receiverName" />
</div> </div>
@@ -90,7 +90,7 @@ onMounted(() => {
<p class="address-row__label">所在地区</p> <p class="address-row__label">所在地区</p>
<EllipsisText class="address-row__value" :text="address.region" /> <EllipsisText class="address-row__value" :text="address.region" />
</div> </div>
<div class="address-row__col address-row__col--detail"> <div class="address-row__col">
<p class="address-row__label">详细地址</p> <p class="address-row__label">详细地址</p>
<EllipsisText class="address-row__value" :text="address.detailAddress" /> <EllipsisText class="address-row__value" :text="address.detailAddress" />
</div> </div>
@@ -144,8 +144,9 @@ onMounted(() => {
<style lang="less" scoped> <style lang="less" scoped>
.address-page { .address-page {
.flex(column, flex-start); .flex(column, flex-start);
gap: 20px; gap: @spacing-lg;
width: 100%; width: 100%;
min-width: 0;
&__head { &__head {
.flex(row, space-between, center); .flex(row, space-between, center);
@@ -158,7 +159,7 @@ onMounted(() => {
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: '';
@@ -174,7 +175,7 @@ onMounted(() => {
&__create { &__create {
height: 32px; height: 32px;
padding: 0 14px; padding: 0 @spacing-base;
border: none; border: none;
border-radius: @profile-radius; border-radius: @profile-radius;
background: @primary-strong; background: @primary-strong;
@@ -191,15 +192,16 @@ onMounted(() => {
&__list { &__list {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
gap: 15px; gap: @spacing-base;
width: 100%; width: 100%;
min-width: 0;
} }
&__empty { &__empty {
padding: @spacing-xxl 0; padding: @spacing-xxl 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 13px; font-size: @font-size-sm;
} }
:deep(.pagination) { :deep(.pagination) {

View File

@@ -148,10 +148,10 @@ function onSave(): void {
&__title { &__title {
position: relative; position: relative;
padding-left: 12px; padding-left: 12px;
font-size: 12px; font-size: @font-size-base;
font-weight: 700; font-weight: 600;
color: @heading-color; color: @heading-color;
line-height: 20px; line-height: 1.4;
&::before { &::before {
content: ''; content: '';
@@ -172,7 +172,7 @@ function onSave(): void {
} }
&__label { &__label {
font-size: 11px; font-size: @font-size-sm;
font-weight: 500; font-weight: 500;
color: @heading-color; color: @heading-color;
} }
@@ -180,11 +180,11 @@ function onSave(): void {
&__input, &__input,
&__textarea { &__textarea {
width: 100%; width: 100%;
padding: 0 12px; padding: 0 @spacing-base;
border: 1px solid @profile-input-border; border: 1px solid @profile-input-border;
border-radius: @profile-radius; border-radius: @profile-radius;
background: @white; background: @white;
font-size: 11px; font-size: @font-size-sm;
color: @text-color; color: @text-color;
outline: none; outline: none;
transition: border-color 0.2s; transition: border-color 0.2s;
@@ -195,7 +195,7 @@ function onSave(): void {
} }
&::placeholder { &::placeholder {
color: @heading-color; color: @text-color-secondary;
} }
} }
@@ -218,7 +218,7 @@ function onSave(): void {
.app-button { .app-button {
flex: 1; flex: 1;
height: 36px; height: 36px;
font-size: 12px; font-size: @font-size-sm;
font-weight: 500; font-weight: 500;
border-radius: @profile-radius; border-radius: @profile-radius;
} }

View File

@@ -74,7 +74,17 @@ const STATUS_CLASS: Record<QualificationStatus, string> = {
<style lang="less" scoped> <style lang="less" scoped>
.qual-row { .qual-row {
position: relative; position: relative;
.flex(row, flex-start, center); display: grid;
grid-template-columns:
minmax(72px, 0.9fr)
minmax(100px, 1.2fr)
minmax(100px, 1.1fr)
minmax(100px, 1.1fr)
minmax(140px, 1.4fr)
minmax(64px, 0.7fr)
auto;
align-items: center;
gap: @spacing-base;
min-height: 72px; min-height: 72px;
padding: @spacing-base @spacing-lg; padding: @spacing-base @spacing-lg;
border: 1px solid @border-color; border: 1px solid @border-color;
@@ -83,37 +93,22 @@ const STATUS_CLASS: Record<QualificationStatus, string> = {
box-sizing: border-box; box-sizing: border-box;
&__col { &__col {
flex: 0 0 200px;
min-width: 0; min-width: 0;
padding-right: 20px;
box-sizing: border-box;
&--name {
flex: 0 0 270px;
}
&--valid {
flex: 0 0 250px;
}
&--status {
flex: 0 0 100px;
}
} }
&__label { &__label {
margin: 0;
font-size: @font-size-sm; font-size: @font-size-sm;
color: @finance-axis-text; color: @text-color-secondary;
line-height: 16px; line-height: 1.4;
} }
&__value { &__value {
margin-top: 6px; margin-top: @spacing-xs;
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;
.ellipsis();
} }
&__status { &__status {
@@ -131,10 +126,9 @@ const STATUS_CLASS: Record<QualificationStatus, string> = {
} }
&__actions { &__actions {
.flex(row, flex-start, center); .flex(row, flex-end, center);
flex-shrink: 0; flex-wrap: wrap;
gap: 12px; gap: @spacing-sm;
margin-left: auto;
} }
&__btn { &__btn {
@@ -143,8 +137,9 @@ const STATUS_CLASS: Record<QualificationStatus, string> = {
border: 1px solid @border-color; border: 1px solid @border-color;
border-radius: @radius-round; border-radius: @radius-round;
background: @white; background: @white;
color: @finance-entry-text; color: @text-color;
font-size: @font-size-sm; font-size: @font-size-sm;
white-space: nowrap;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;