feat(Form): 优化样式

jd-opensource · Aug 16, 2018 · b0ff170 · b0ff170
1 parent 684be22
commit b0ff170
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 24 deletions.
diff --git a/src/components/input-number/index.js b/src/components/input-number/index.js
@@ -57,11 +57,11 @@ class AtInputNumber extends Taro.Component {
     const inputStyle = `width: ${Taro.pxTransform(width)}`
     const rootCls = ['at-input-number']
     if (size) {
-      rootCls.push('at-input-number--sm')
+      rootCls.push('at-input-number--lg')
     }
     return <View className={rootCls} >
       <View className='at-input-number__btn' onClick={this.handleMinus.bind(this)}>
-        <AtIcon value='subtract' color={value <= min || disabled ? '#ccc' : '#6190e8'} size='20' />
+        <AtIcon value='subtract' color={value <= min || disabled ? '#ccc' : '#6190e8'} size='18' />
       </View>
       <Input className='at-input-number__input'
         style={inputStyle}
@@ -71,15 +71,15 @@ class AtInputNumber extends Taro.Component {
         onInput={this.handleInput.bind(this)}
       />
       <View className='at-input-number__btn' onClick={this.handlePlus.bind(this)}>
-        <AtIcon value='add' color={value >= max || disabled ? '#ccc' : '#6190e8'} size='20' />
+        <AtIcon value='add' color={value >= max || disabled ? '#ccc' : '#6190e8'} size='18' />
       </View>
     </View>
   }
 }
 AtInputNumber.defaultProps = {
   disabled: false,
   value: 1,
-  width: 120,
+  width: 80,
   min: 0,
   max: 100,
   step: 1,

diff --git a/src/components/input-number/index.scss b/src/components/input-number/index.scss
@@ -1,15 +1,16 @@
 @import '../../style/theme/default.scss';
 @import "../../style/mixins/index.scss";
 
-$input-number-btn-padding: 20px;
-$input-number-btn-padding-sm: 5px;
-$input-number-size-min: 120px;
+$input-number-btn-padding: 12px;
+$input-number-btn-padding-lg: 20px;
+$input-number-size-min: 80px;
+$input-number-size-min-lg: 120px;
 
 .at-input-number {
   display: inline-flex;
-  @include border-thin;
+  @include border-thin($width: 1PX);
 
-  font-size: $font-size-xl;
+  font-size: $font-size-base;
   border-radius: $border-radius-md;
   background-color: $color-bg;
   overflow: hidden;
@@ -20,7 +21,7 @@ $input-number-size-min: 120px;
     align-items: center;
     justify-content: center;
     padding: $input-number-btn-padding;
-    font-size: $font-size-xl;
+    font-size: $font-size-sm;
     text-align: center;
     line-height: 1;
     overflow: hidden;
@@ -29,24 +30,23 @@ $input-number-size-min: 120px;
 
   &__input {
     display: inline-block;
-    padding: $spacing-v-sm;
     width: $input-number-size-min;
     height: auto;
-    font-size: $font-size-xl;
+    font-size: $font-size-base;
     text-align: center;
     line-height: $line-height-zh;
-    @include border-thin($directions:left right);
+    @include border-thin($width: 1PX, $directions: left right);
   }
 
-  &--sm {
+  &--lg {
     .at-input-number__btn {
-      padding: $input-number-btn-padding-sm;
-      font-size: $font-size-base;
+      padding: $input-number-btn-padding-lg;
+      font-size: $font-size-xl;
     }
 
     .at-input-number__input {
-      padding: $spacing-v-xs;
-      font-size: $font-size-base;
+      padding: $spacing-v-sm;
+      font-size: $font-size-xl;
     }
   }
 }
diff --git a/src/pages/form/input-number/index.js b/src/pages/form/input-number/index.js
@@ -74,12 +74,12 @@ export default class Index extends Taro.Component {
             </View>
           </View>
 
-          {/* 自定义宽度 */}
+          {/* 大尺寸 */}
           <View className='panel'>
-            <View className='panel__title'>小规格</View>
+            <View className='panel__title'>大尺寸</View>
             <View className='panel__content'>
               <View className='example-item'>
-                <AtInputNumber size='sm' min={0} max={10} step={1} value={this.state.number5} onChange={this.handleNumberChange.bind(this, 'number5')} />
+                <AtInputNumber size='lg' min={0} max={10} step={1} value={this.state.number5} onChange={this.handleNumberChange.bind(this, 'number5')} />
               </View>
             </View>
           </View>

diff --git a/src/pages/navigation/navbar/index.js b/src/pages/navigation/navbar/index.js
@@ -67,7 +67,7 @@ export default class Index extends Taro.Component {
                   onClickLeftIcon={this.handleClick.bind(this, '返回')}
                   title='NavBar 导航栏示例'
                   leftIconType='chevron-left'
-                  rightSecondIconType='user'
+                  rightFirstIconType='user'
                 />
               </View>
             </View>

diff --git a/src/pages/view/timeline/index.js b/src/pages/view/timeline/index.js
@@ -49,9 +49,9 @@ export default class TimelinePage extends Taro.Component {
             </View>
           </View>
 
-          {/* pending态 */}
+          {/* 幽灵节点 */}
           <View className='panel'>
-            <View className='panel__title'>pending态</View>
+            <View className='panel__title'>幽灵节点</View>
             <View className='panel__content'>
               <View className='example-item'>
                 <AtTimeline pending items={[{ title: '刷牙洗脸' }, { title: '吃早餐' }, { title: '上班' }, { title: '睡觉' }]}>