feat 个人中心_地址整改
This commit is contained in:
@@ -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) {
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user