feat(Input): 调整 Input 样式

src/components/input/index.js

@@ -92,7 +92,7 @@ class AtInput extends Taro.Component {
         {
           error
             ? <View className='at-input__icon' onClick={this.handleClickErrIcon.bind(this)} >
-              <AtIcon value='alert-circle' color='#e93b3d' size='15' />
+              <AtIcon value='alert-circle' color='#FF4949' size='15' />
             </View>
             : null
         }

src/components/input/index.scss

@@ -2,21 +2,31 @@
 @import "../../style/mixins/index.scss";
 
 .at-input {
+  padding: $spacing-v-lg 0;
   background-color: $color-bg;
-  padding: $spacing-v-md 0;
+  color: $color-text-base;
   @include border-thin-bottom;
 
   &__container {
     display: flex;
     align-items: center;
   }
 
+  &__title {
+    margin-right: $spacing-h-md;
+    width: 172px;
+    font-size: $font-size-lg;
+    line-height: $line-height-zh;
+    vertical-align: middle;
+    text-align: left;
+  }
+
   &__input {
     flex: 1;
-    font-size: $font-size-base;
-    line-height: normal;
-    padding-right: $spacing-v-md;
     display: inline-block;
+    padding-right: $spacing-v-md;
+    font-size: $font-size-lg;
+    line-height: $line-height-zh;
     vertical-align: middle;
   }
 
@@ -29,16 +39,7 @@
     display: inline-block;
     padding-right: $spacing-v-md;
     text-align: center;
-    font-size: $font-size-base;
-  }
-
-  &__title {
-    width: 150px;
-    margin-right: $spacing-h-md;
-    font-size: $font-size-base;
-    line-height: $line-height-zh;
-    vertical-align: middle;
-    text-align: left;
+    font-size: $font-size-lg;
   }
 
   &__children {
@@ -51,11 +52,11 @@
     text,
     image,
     .taro-img {
-      font-size: $font-size-base;
       display: inline-block;
-      text-align: center;
       padding: 0 $spacing-v-md;
       color: $color-brand-dark;
+      font-size: $font-size-lg;
+      text-align: center;
     }
 
     > image,

src/pages/form/input/index.js

@@ -82,10 +82,12 @@ export default class Index extends Taro.Component {
         {/* S Header */}
         <DocsHeader title='Input 输入框'></DocsHeader>
         {/* E Header */}
+
         {/* S Body */}
         <View className='doc-body'>
+          {/* 基础用法 */}
           <View className='panel'>
-            <View className='panel__title'>输入框标题</View>
+            <View className='panel__title'>基础用法</View>
             <View className='panel__content no-padding'>
               <View className='component-item'>
                 <AtForm>
@@ -96,6 +98,8 @@ export default class Index extends Taro.Component {
               </View>
             </View>
           </View>
+
+          {/* 输入框类型 */}
           <View className='panel'>
             <View className='panel__title'>输入框类型</View>
             <View className='panel__content no-padding'>
@@ -111,19 +115,23 @@ export default class Index extends Taro.Component {
               </View>
             </View>
           </View>
+
+          {/* 状态 */}
           <View className='panel'>
             <View className='panel__title'>状态</View>
             <View className='panel__content no-padding'>
               <View className='component-item'>
                 <AtForm>
                   <AtInput disabled title='禁用' type='text' placeholder='禁止输入' value={this.state.value10} onChange={this.handleInput.bind(this, 'value10')} />
                   <AtInput error title='出现错误' type='text' placeholder='点击按钮触发回调' value={this.state.value11} onChange={this.handleInput.bind(this, 'value11')} onErrorClick={this.onClickErrorIcon.bind(this)} />
-                  <AtInput editable={false} title='不可编辑' type='text' placeholder='不可编辑' value={this.state.value12} onChange={this.handleInput.bind(this, 'value12')} />
+                  <AtInput editable={false} title='不可编辑' type='text' placeholder='不可编辑' value='不可编辑的内容' onChange={this.handleInput.bind(this, 'value12')} />
                   <AtInput border={false} clear title='清除按钮' type='text' placeholder='点击清除按钮清空内容' value={this.state.value13} onChange={this.handleInput.bind(this, 'value13')} />
                 </AtForm>
               </View>
             </View>
           </View>
+
+          {/* 自定义右边栏 */}
           <View className='panel'>
             <View className='panel__title'>自定义右边栏</View>
             <View className='panel__content no-padding'>
@@ -135,7 +143,8 @@ export default class Index extends Taro.Component {
                   <AtInput border={false} type='phone' clear placeholder='请输入手机号码' value={this.state.value15} onChange={this.handleInput.bind(this, 'value15')}>
                     <View
                       style={{
-                        'color': this.state.disabled ? '#e93b3d' : '',
+                        'color': this.state.disabled ? '#FF4949' : '',
+                        'fontSize': '12px',
                         'width': '90px'
                       }}
                       onClick={this.sendCode.bind(this)}

src/style/mixins/libs/border.scss

@@ -9,7 +9,7 @@
 ) {
   @each $value in $directions {
     /* prettier-ignore */
-    border-#{$value}: 1PX $color $style; /* stylelint-disable-line unit-no-unknown */
+    border-#{$value}: 1px $color $style; /* stylelint-disable-line unit-no-unknown */
   }
 }
 

src/style/theme/default.scss

@@ -33,7 +33,7 @@ $color-grey-6: #F7F7F7;
 $color-white: #FFF;
 
 /* Text Color */
-$color-text-base: #000; // 文字的基本色
+$color-text-base: #333; // 文字的基本色
 $color-text-base-inverse: #FFF; // 反色
 $color-text-secondary: #36D57D; // 辅助色
 $color-text-placeholder: #C9C9C9;