diff --git a/src/views/profile/address.vue b/src/views/profile/address.vue index 537f71f..52e3dc8 100644 --- a/src/views/profile/address.vue +++ b/src/views/profile/address.vue @@ -216,7 +216,15 @@ onMounted(() => { .address-row { position: relative; - .flex(row, flex-start, center); + display: grid; + grid-template-columns: + minmax(88px, 0.9fr) + minmax(110px, 1fr) + minmax(120px, 1.2fr) + minmax(160px, 1.8fr) + auto; + align-items: center; + gap: @spacing-base; min-height: 72px; padding: @spacing-base @spacing-lg; border: 1px solid @border-color; @@ -227,48 +235,40 @@ onMounted(() => { &__tag { position: absolute; top: -9px; - left: 28px; + left: @spacing-lg; height: 18px; padding: 0 10px; border-radius: @radius-sm; background: @primary-strong; color: @white; - font-size: 11px; + font-size: @font-size-xs; font-weight: 500; line-height: 18px; } &__col { - flex: 0 0 405px; min-width: 0; - padding-right: 24px; - box-sizing: border-box; - - &--detail { - flex: 1 1 auto; - } } &__label { + margin: 0; font-size: @font-size-sm; - color: @finance-axis-text; - line-height: 16px; + color: @text-color-secondary; + line-height: 1.4; } &__value { - margin-top: 6px; + margin-top: @spacing-xs; font-size: @font-size-base; font-weight: 600; color: @profile-ink; - line-height: 20px; - .ellipsis(); + line-height: 1.4; } &__actions { - .flex(row, flex-start, center); - flex-shrink: 0; - gap: 12px; - margin-left: 16px; + .flex(row, flex-end, center); + flex-wrap: wrap; + gap: @spacing-sm; } &__btn { @@ -277,8 +277,9 @@ onMounted(() => { border: 1px solid @border-color; border-radius: @radius-round; background: @white; - color: @finance-entry-text; + color: @text-color; font-size: @font-size-sm; + white-space: nowrap; cursor: pointer; transition: all 0.2s;