From e1f67fa898485c79eddc563a49e5a82a7b80b5f3 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 20 Jun 2020 16:56:25 +0800
Subject: [PATCH] style(Field): label width adjusted to 84px (#6583)

---
 src/field/README.md       | 2 +-
 src/field/README.zh-CN.md | 2 +-
 src/field/index.less      | 1 +
 src/form/README.md        | 2 +-
 src/form/README.zh-CN.md  | 2 +-
 src/sku/index.less        | 3 ++-
 src/style/var.less        | 3 ++-
 7 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/field/README.md b/src/field/README.md
index 6f3fa2e84..4dfbd891a 100644
--- a/src/field/README.md
+++ b/src/field/README.md
@@ -241,7 +241,7 @@ Use `input-align` prop to align the input value
 | format-trigger `v2.8.7` | When to format value，can be set to `onBlur` | _string_ | `onChange` |
 | arrow-direction `v2.0.4` | Can be set to `left` `up` `down` | _string_ | `right` |
 | label-class | Label className | _any_ | - |
-| label-width | Label width | _number \| string_ | `90px` |
+| label-width | Label width | _number \| string_ | `84px` |
 | label-align | Label align, can be set to `center` `right` | _string_ | `left` |
 | input-align | Input align, can be set to `center` `right` | _string_ | `left` |
 | error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` |
diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md
index e783b24b7..f88868cf6 100644
--- a/src/field/README.zh-CN.md
+++ b/src/field/README.zh-CN.md
@@ -266,7 +266,7 @@ export default {
 | format-trigger `v2.8.7` | 格式化函数触发的时机，可选值为 `onBlur` | _string_ | `onChange` |
 | arrow-direction `v2.0.4` | 箭头方向，可选值为 `left` `up` `down` | _string_ | `right` |
 | label-class | 左侧文本额外类名 | _any_ | - |
-| label-width | 左侧文本宽度，默认单位为`px` | _number \| string_ | `90px` |
+| label-width | 左侧文本宽度，默认单位为`px` | _number \| string_ | `84px` |
 | label-align | 左侧文本对齐方式，可选值为 `center` `right` | _string_ | `left` |
 | input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` |
 | error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` |
diff --git a/src/field/index.less b/src/field/index.less
index c39238a8d..86ff0eb6b 100644
--- a/src/field/index.less
+++ b/src/field/index.less
@@ -5,6 +5,7 @@
     flex: none;
     box-sizing: border-box;
     width: @field-label-width;
+    margin-right: @field-label-margin-right;
     color: @field-label-color;
     text-align: left;
 
diff --git a/src/form/README.md b/src/form/README.md
index e2e49b016..754c1b29b 100644
--- a/src/form/README.md
+++ b/src/form/README.md
@@ -424,7 +424,7 @@ export default {
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
-| label-width | Field label width | _number \| string_ | `90px` |
+| label-width | Field label width | _number \| string_ | `84px` |
 | label-align | Field label align, can be set to `center` `right` | _string_ | `left` |
 | input-align | Field input align, can be set to `center` `right` | _string_ | `left` |
 | error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` |
diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md
index 83327109d..5148a7131 100644
--- a/src/form/README.zh-CN.md
+++ b/src/form/README.zh-CN.md
@@ -459,7 +459,7 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| label-width | 表单项 label 宽度，默认单位为`px` | _number \| string_ | `90px` |
+| label-width | 表单项 label 宽度，默认单位为`px` | _number \| string_ | `84px` |
 | label-align |  表单项 label 对齐方式，可选值为 `center` `right` | _string_ | `left` |
 | input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` |
 | error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` |
diff --git a/src/sku/index.less b/src/sku/index.less
index 7acc3c2ac..1cc28c67e 100644
--- a/src/sku/index.less
+++ b/src/sku/index.less
@@ -234,7 +234,8 @@
 
     &__image-cell {
       .van-cell__title {
-        max-width: 90px;
+        max-width: @field-label-width;
+        margin-right: @field-label-margin-right;
       }
 
       .van-cell__value {
diff --git a/src/style/var.less b/src/style/var.less
index 54941ab33..ec0c8a36d 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -343,8 +343,9 @@
 @empty-bottom-margin-top: 24px;
 
 // Field
-@field-label-width: 90px;
+@field-label-width: 84px;
 @field-label-color: @gray-7;
+@field-label-margin-right: @padding-sm;
 @field-input-text-color: @text-color;
 @field-input-error-text-color: @red;
 @field-input-disabled-text-color: @gray-5;