diff --git a/demo/pages/am-checkbox/index.js b/demo/pages/am-checkbox/index.js
index 238960c..7b6fdbf 100644
--- a/demo/pages/am-checkbox/index.js
+++ b/demo/pages/am-checkbox/index.js
@@ -15,15 +15,15 @@ Page({
     const { id } = e.currentTarget.dataset;
     const { value } = e.detail;
     const { items1 } = this.data;
-    items1.forEach((element) => {
-      if (element.id === id) {
-        // eslint-disable-next-line no-param-reassign
-        element.ctrlChecked = value;
+    const { length } = items1;
+    for (let index = 0; index < length; index += 1) {
+      if (items1[index].id === id) {
+        this.setData({
+          [`items1[${index}].ctrlChecked`]: value,
+        });
+        break;
       }
-    });
-    this.setData({
-      items1,
-    });
+    }
   },
   // 全选
   checkedON() {
@@ -34,11 +34,10 @@ Page({
     this.checkedAll(false);
   },
   checkedAll(status) {
-    const { items1 } = this.data;
-    items1.forEach((element) => {
-      // eslint-disable-next-line no-param-reassign
-      element.ctrlChecked = status;
-    });
+    const items1 = this.data.items1.map((element) => ({
+      ...element,
+      ctrlChecked: status,
+    }));
     this.setData({
       items1,
     });
diff --git a/demo/pages/am-switch/index.acss b/demo/pages/am-switch/index.acss
index bbe589f..351b3f6 100644
--- a/demo/pages/am-switch/index.acss
+++ b/demo/pages/am-switch/index.acss
@@ -1,3 +1,7 @@
 page {
   padding: 24rpx;
+}
+.page-description,
+.switch-item {
+  margin-bottom: 24rpx;
 }
\ No newline at end of file
diff --git a/demo/pages/button/index.acss b/demo/pages/button/index.acss
index aef5d9f..6835435 100644
--- a/demo/pages/button/index.acss
+++ b/demo/pages/button/index.acss
@@ -4,4 +4,30 @@
 
 .container button {
   margin-bottom: 24rpx;
+}
+
+.title {
+  padding-top: 24rpx;
+  font-weight: bold;
+}
+.inputItem {
+  margin: 16rpx 0 24rpx;
+  padding: 8rpx 16rpx;
+  font-size: 30rpx;
+  border: 1px solid #eee;
+}
+.radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 24rpx;
+}
+.radio {
+  display: flex;
+  align-items: center;
+  margin-right: 16rpx;
+}
+.changeItem {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24rpx;
 }
\ No newline at end of file
diff --git a/demo/pages/button/index.axml b/demo/pages/button/index.axml
index a472368..3c19eb8 100644
--- a/demo/pages/button/index.axml
+++ b/demo/pages/button/index.axml
@@ -3,35 +3,41 @@
     {{title}}
   </button>
 
-  <view>主标题</view>
-  <input value="{{title}}" onInput="titleChange"/>
-  <view>副标题</view>
-  <input value="{{subtitle}}" onInput="subtitleChange"/>
-  <view>按钮类型</view>
+  <view class="title">主标题</view>
+  <input value="{{title}}" onInput="titleChange" class="inputItem"/>
+  <view class="title">副标题</view>
+  <input value="{{subtitle}}" onInput="subtitleChange" class="inputItem"/>
+  <view class="title">按钮类型</view>
   <radio-group class="radio-group" onChange="typeChange" name="type">
     <label class="radio" a:for="{{types}}" key="label-{{index}}">
       <radio value="{{item.name}}" checked="{{item.checked}}" />
       <text class="radio-text">{{item.value}}</text>
     </label>
   </radio-group>
-  <view>形状</view>
+  <view class="title">形状</view>
   <radio-group class="radio-group" onChange="shapeChange" name="shape">
     <label class="radio" a:for="{{shapes}}" key="label-{{index}}">
       <radio value="{{item.name}}" checked="{{item.checked}}" />
       <text class="radio-text">{{item.value}}</text>
     </label>
   </radio-group>
-  <view>胶囊按钮大小</view>
+  <view class="title">胶囊按钮大小</view>
   <radio-group class="radio-group" onChange="sizeChange" name="size">
     <label class="radio" a:for="{{capsuleSizes}}" key="label-{{index}}">
       <radio value="{{item.name}}" checked="{{item.checked}}" />
       <text class="radio-text">{{item.value}}</text>
     </label>
   </radio-group>
-  <view>是否禁用</view>
-  <checkbox onChange='onDisableChange'/>
-  <view>是否限制胶囊按钮最小宽度</view>
-  <checkbox onChange='onMinWidthChange'/>
-  <view>是否现实loading</view>
-  <checkbox onChange='onLoadingChange'/>
+  <view class="changeItem">
+    <checkbox onChange='onDisableChange' id="disabled__"/>
+    <label for="disabled__" style="margin-left: 8rpx;">是否禁用</label>
+  </view>
+  <view class="changeItem">
+    <checkbox onChange='onMinWidthChange' id="miniBtn__"/>
+    <label for="miniBtn__" style="margin-left: 8rpx;">是否限制胶囊按钮最小宽度</label>
+  </view>
+  <view class="changeItem">
+    <checkbox onChange='onLoadingChange' id="loading__"/>
+    <label for="loading__" style="margin-left: 8rpx;">是否显示 loading</label>
+  </view>
 </view>
\ No newline at end of file
diff --git a/demo/pages/message/index.acss b/demo/pages/message/index.acss
index e69de29..e1f2ce0 100644
--- a/demo/pages/message/index.acss
+++ b/demo/pages/message/index.acss
@@ -0,0 +1,13 @@
+.radio-text,
+.btnLabel {
+  margin: 0 20rpx 0 4rpx;
+}
+.radio-group {
+  display: flex;
+  flex-wrap: wrap;
+}
+.radio,
+.showBtn {
+  display: flex;
+  align-items: center;
+}
\ No newline at end of file
diff --git a/demo/pages/message/index.axml b/demo/pages/message/index.axml
index 288180c..09e2529 100644
--- a/demo/pages/message/index.axml
+++ b/demo/pages/message/index.axml
@@ -8,17 +8,19 @@
     onTapMain="goBack">
     <view slot="tips">这里是通过 <text style="color: red;">slot</text> 插槽加入的内容，加入更多自定义内容。</view>
   </message>
-  <view style="padding: 20rpx;">
+  <view style="padding: 24rpx;">
     <radio-group class="radio-group" onChange="radioChange" name="lib">
       <label class="radio" a:for="{{items}}" key="label-{{index}}">
         <radio value="{{item.name}}" checked="{{item.checked}}" />
         <text class="radio-text">{{item.value}}</text>
       </label>
     </radio-group>
-    <view style="padding:20rpx 0;font-weight: bold;">主标题</view>
-    <input value="{{title}}" onInput="titleChange"/>
-    <view style="padding:20rpx 0;font-weight: bold;">副标题</view>
-    <textarea value="{{subTitle}}" onInput="subtitleChange" style="margin-bottom: 20rpx;" />
-    <checkbox onChange='onChange'/>显示按钮
+    <view style="padding:24rpx 0;font-weight: bold;">主标题</view>
+    <input value="{{title}}" onInput="titleChange" style="padding: 8rpx 16rpx;font-size: 30rpx;border: 1px solid #eee;"/>
+    <view style="padding:24rpx 0;font-weight: bold;">副标题</view>
+    <textarea value="{{subTitle}}" onInput="subtitleChange" style="margin-bottom: 24rpx;padding: 16rpx 16rpx 50rpx;font-size: 30rpx;border: 1px solid #eee;" />
+    <view class="showBtn">
+      <checkbox onChange='onChange' id="showBtn" /><label for="showBtn" class="btnLabel">显示按钮</label>
+    </view>
   </view>
 </view>
diff --git a/demo/pages/notice/index.acss b/demo/pages/notice/index.acss
index 360cb26..25ffcf9 100644
--- a/demo/pages/notice/index.acss
+++ b/demo/pages/notice/index.acss
@@ -1,11 +1,26 @@
 .demo-title {
   font-size: 15px;
   font-weight: 500;
-  padding: 10px 5px;
+  margin: 24rpx 16rpx;
+  padding-bottom: 24rpx;
   border-bottom: 1px solid #ccc;
 }
+.radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 24rpx 24rpx;
+}
+.radio-text {
+  margin-right: 24rpx;
+}
+input {
+  margin: 0 0 16rpx 24rpx;
+  padding: 8rpx 16rpx;
+  font-size: 30rpx;
+  border: 1px solid #eee;
+}
 .demo-item {
-  margin-bottom: 12px;
+  margin-bottom: 24rpx;
 }
 
 .nomore-notice {
@@ -14,4 +29,6 @@
 .itemSize {
   width: 30px;
   height: 30px;
+  margin-right: 24rpx;
+  vertical-align: middle;
 }
\ No newline at end of file
diff --git a/demo/pages/notice/index.axml b/demo/pages/notice/index.axml
index 6fc3fa1..c39796b 100644
--- a/demo/pages/notice/index.axml
+++ b/demo/pages/notice/index.axml
@@ -1,4 +1,3 @@
-<view class="demo-title">NoticeBar 通告栏</view>
 <view class="demo-item">
   <notice
     marqueeProps="{{marqueeProps}}"
@@ -74,9 +73,9 @@
 
 
 <view class="demo-title">胶囊通告栏 item: </view>
-<checkbox-group onChange="capsuleItemChange" name="capsule">
+<checkbox-group class="radio-group" onChange="capsuleItemChange" name="capsule">
   <label class="checkbox" a:for="{{capsuleItemList}}" key="label-{{index}}">
-    <checkbox value="{{item.name}}" checked="{{item.checked}}" />
+    <checkbox value="{{item.name}}" checked="{{item.checked}}" style="vertical-align: middle;" />
     <image src='{{item.value}}' class="itemSize" />
   </label>
 </checkbox-group>
\ No newline at end of file
diff --git a/demo/pages/pagination/index.axml b/demo/pages/pagination/index.axml
index 2385c87..3e9d8b8 100644
--- a/demo/pages/pagination/index.axml
+++ b/demo/pages/pagination/index.axml
@@ -14,12 +14,12 @@
   </pagination>
 </view>
 
-<view style="margin-top: 20px;">正常翻页样式</view>
+<view style="margin-top: 24rpx;padding-bottom: 16rpx;font-weight: bold;">正常翻页样式</view>
 <view style="padding: 20px 20px 0;background-color: #f8f8ba;">
   <pagination currentPage="{{3}}" max="{{10}}" height="200px" />
 </view>
 
-<view style="margin-top: 20px;">反白翻页样式</view>
+<view style="margin-top: 24rpx;padding-bottom: 16rpx;font-weight: bold;">反白翻页样式</view>
 <view style="padding: 20px 20px 0;background-color: #0e98d8;">
   <pagination currentPage="{{5}}" white="true" />
 </view>
diff --git a/demo/pages/search-bar/index.axml b/demo/pages/search-bar/index.axml
index 446dc10..90f6ad6 100644
--- a/demo/pages/search-bar/index.axml
+++ b/demo/pages/search-bar/index.axml
@@ -14,6 +14,6 @@
     onSubmit="handleSubmit"
     showCancelButton="{{false}}" />
 </view>
-<view>是否展示Voice图标
-<checkbox onChange='onChange'/>
+<view style="padding: 24rpx">
+  <checkbox onChange='onChange' id="showVoice"/><label for="showVoice">是否展示Voice图标</label>
 </view>
\ No newline at end of file
diff --git a/demo/pages/tabs/index.axml b/demo/pages/tabs/index.axml
index 24cece2..6603c04 100644
--- a/demo/pages/tabs/index.axml
+++ b/demo/pages/tabs/index.axml
@@ -1,4 +1,4 @@
-<view style="padding: 12px;">
+<view style="padding: 24rpx;">
   <tabs
     tabs="{{tabs}}"
     tabsName="activeTab"
@@ -7,13 +7,14 @@
     onPlusClick="handlePlusClick"
     activeTab="{{activeTab}}"
     showPlus="{{hasPlus}}"
-    swipeable="{{hasContentHeight}}"
+    swipeable="{{false}}"
     capsule="{{typeCapsule}}"
     hasSubTitle="{{typeHasSubTitle}}"
+    tabBarUnderlineWidth="20px"
   >
-    <block a:for="{{tabs}}" a:if="{{!hasContentHeight}}">
+    <block a:for="{{tabs}}">
       <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab}}" a:if="{{index === 0}}">
-        <view class="tab-content" style="height: 300px;">高度为 300px {{item.title}}</view>
+        <view class="tab-content" style="height: 130px;">高度为 130px {{item.title}}</view>
       </tab-content>
       <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab}}" a:elif="{{index === 2}}">
         <view class="tab-content" style="height: 200px;">改变 tab-content 高度为 200px {{item.title}}</view>
@@ -22,44 +23,9 @@
         <view class="tab-content">content of {{item.title}}</view>
       </tab-content>
     </block>
-    <block a:for="{{tabs}}" a:if="{{hasContentHeight}}">
-      <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab}}">
-        <view class="tab-content" style="height: 200px;">固定高度为 200px {{item.title}}，可滑动内容区域，tabs 跟随变化。</view>
-      </tab-content>
-    </block>
-  </tabs>
-</view>
-<view style="padding: 30px;">
-  <tabs
-    tabs="{{tabs2}}"
-    tabsName="activeTab2"
-    onTabClick="handleTabClick"
-    onChange="handleTabChange"
-    onPlusClick="handlePlusClick"
-    activeTab="{{activeTab2}}"
-    showPlus="{{hasPlus}}"
-    swipeable="{{hasContentHeight}}"
-    capsule="{{typeCapsule}}"
-    hasSubTitle="{{typeHasSubTitle}}"
-  >
-    <block a:for="{{tabs2}}" a:if="{{!hasContentHeight}}">
-      <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab2}}" a:if="{{index === 0}}">
-        <view class="tab-content" style="height: 300px;">高度为 300px {{item.title}}</view>
-      </tab-content>
-      <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab2}}" a:elif="{{index === 2}}">
-        <view class="tab-content" style="height: 200px;">改变 tab-content 高度为 200px {{item.title}}</view>
-      </tab-content>
-      <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab2}}" a:else>
-        <view class="tab-content">content of {{item.title}}</view>
-      </tab-content>
-    </block>
-    <block a:for="{{tabs2}}" a:if="{{hasContentHeight}}">
-      <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab2}}">
-        <view class="tab-content" style="height: 200px;">固定高度为 200px {{item.title}}，可滑动内容区域，tabs 跟随变化。</view>
-      </tab-content>
-    </block>
   </tabs>
 </view>
+
 <view class="demo-title">tab 类型: </view>
 <radio-group class="radio-group" onChange="typeChange" name="type">
   <label class="radio" a:for="{{type}}" key="label-{{index}}">
@@ -76,16 +42,8 @@
   </label>
 </radio-group>
 
-<view class="demo-title">内容区域是否固定高度: </view>
-<radio-group class="radio-group" onChange="heightChange" name="contentHeight">
-  <label class="radio" a:for="{{contentHeight}}" key="label-{{index}}">
-    <radio value="{{item.name}}" checked="{{item.checked}}" />
-    <text class="radio-text">{{item.value}}</text>
-  </label>
-</radio-group>
-
-<view class="demo-title" a:if="{{!hasContentHeight}}">tabs选项数量: </view>
-<radio-group class="radio-group" onChange="tabsNumberChange" name="tabsNumber" a:if="{{!hasContentHeight}}">
+<view class="demo-title">tabs选项数量: </view>
+<radio-group class="radio-group" onChange="tabsNumberChange" name="tabsNumber">
   <label class="radio" a:for="{{tabsNumber}}" key="label-{{index}}">
     <radio value="{{item.name}}" checked="{{item.checked}}" />
     <text class="radio-text">{{item.value}}</text>
diff --git a/demo/pages/tabs/index.js b/demo/pages/tabs/index.js
index f6ed028..959bd98 100644
--- a/demo/pages/tabs/index.js
+++ b/demo/pages/tabs/index.js
@@ -1,45 +1,8 @@
 Page({
   data: {
-    tabs2: [
-      {
-        title: '选项',
-        subTitle: '描述文案',
-      },
-      {
-        title: '选选',
-        subTitle: '描述文案',
-      },
-      {
-        title: '二二',
-        subTitle: '描述文案',
-      },
-      {
-        title: '选二',
-        subTitle: '描述文案',
-      },
-      {
-        title: '项二',
-        subTitle: '描述文案',
-        number: '6',
-      },
-      {
-        title: '二二',
-        subTitle: '描述文案',
-      },
-      {
-        title: '选二',
-        subTitle: '描述文案',
-      },
-      {
-        title: '项二',
-        subTitle: '描述文案',
-        number: '6',
-      },
-    ],
-    activeTab2: 0,
     tabs: [
       {
-        title: '选项选项二选项二选项二',
+        title: '选项',
         subTitle: '描述文案',
         number: '6',
         showBadge: true,
@@ -61,7 +24,7 @@ Page({
       {
         title: '3 Tab',
         subTitle: '描述',
-        number: '文字',
+        number: '99+',
         showBadge: true,
         badge: {
           arrow: true,
@@ -72,8 +35,8 @@ Page({
         showBadge: true,
         number: 0,
       },
-      { title: '5 Tab5 Tab5 Tab',
-        subTitle: '描述描述描述',
+      { title: '5 Tab',
+        subTitle: '描述描述',
         number: '99+',
         showBadge: false,
       },
@@ -81,7 +44,7 @@ Page({
         subTitle: '描述',
         showBadge: false,
       },
-      { title: '4 Tab选项二选项二选项二选项二',
+      { title: '4 Tab',
         subTitle: '描述',
       },
       { title: '15 Tab',
@@ -102,10 +65,10 @@ Page({
     ],
     hasPlus: true,
     contentHeight: [
-      { name: 'has', value: '是', checked: true },
-      { name: 'hasnt', value: '否' },
+      { name: 'has', value: '是' },
+      { name: 'hasnt', value: '否', checked: true },
     ],
-    hasContentHeight: true,
+    // hasContentHeight: false,
     tabsNumber: [
       { name: '1', value: '一条' },
       { name: '2', value: '两条' },
@@ -113,61 +76,6 @@ Page({
       { name: '-1', value: '很多', checked: true },
     ],
   },
-  typeChange(e) {
-    if (e.detail.value === 'hasSubTitle') {
-      this.setData({
-        typeCapsule: true,
-        typeHasSubTitle: true,
-      });
-    } else if (e.detail.value === 'capsule') {
-      this.setData({
-        typeCapsule: true,
-        typeHasSubTitle: false,
-      });
-    } else {
-      this.setData({
-        typeCapsule: false,
-        typeHasSubTitle: false,
-      });
-    }
-  },
-  plusChange(e) {
-    if (e.detail.value === 'hasnt') {
-      this.setData({
-        hasPlus: false,
-      });
-    } else {
-      this.setData({
-        hasPlus: true,
-      });
-    }
-  },
-  heightChange(e) {
-    if (e.detail.value === 'hasnt') {
-      this.setData({
-        hasContentHeight: false,
-      });
-    } else {
-      this.setData({
-        hasContentHeight: true,
-      });
-    }
-  },
-  handleTabClick({ index, tabsName }) {
-    this.setData({
-      [tabsName]: index,
-    });
-  },
-  handleTabChange({ index, tabsName }) {
-    this.setData({
-      [tabsName]: index,
-    });
-  },
-  handlePlusClick() {
-    my.alert({
-      content: 'plus clicked',
-    });
-  },
   tabsNumberChange(e) {
     if (e.detail.value === '1') {
       this.setData({
@@ -235,7 +143,7 @@ Page({
       this.setData({
         tabs: [
           {
-            title: '选项选项二选项二选项二',
+            title: '选项',
             subTitle: '描述文案',
             number: '6',
             showBadge: true,
@@ -268,8 +176,8 @@ Page({
             showBadge: true,
             number: 0,
           },
-          { title: '5 Tab5 Tab5 Tab',
-            subTitle: '描述描述描述',
+          { title: '5 Tab',
+            subTitle: '描述描述',
             number: '99+',
             showBadge: false,
           },
@@ -277,7 +185,7 @@ Page({
             subTitle: '描述',
             showBadge: false,
           },
-          { title: '4 Tab选项二选项二选项二选项二',
+          { title: '4 Tab',
             subTitle: '描述',
           },
           { title: '15 Tab',
@@ -287,4 +195,59 @@ Page({
       });
     }
   },
+  typeChange(e) {
+    if (e.detail.value === 'hasSubTitle') {
+      this.setData({
+        typeCapsule: true,
+        typeHasSubTitle: true,
+      });
+    } else if (e.detail.value === 'capsule') {
+      this.setData({
+        typeCapsule: true,
+        typeHasSubTitle: false,
+      });
+    } else {
+      this.setData({
+        typeCapsule: false,
+        typeHasSubTitle: false,
+      });
+    }
+  },
+  plusChange(e) {
+    if (e.detail.value === 'hasnt') {
+      this.setData({
+        hasPlus: false,
+      });
+    } else {
+      this.setData({
+        hasPlus: true,
+      });
+    }
+  },
+  // heightChange(e) {
+  //   if (e.detail.value === 'hasnt') {
+  //     this.setData({
+  //       hasContentHeight: false,
+  //     });
+  //   } else {
+  //     this.setData({
+  //       hasContentHeight: true,
+  //     });
+  //   }
+  // },
+  handleTabClick({ index, tabsName }) {
+    this.setData({
+      [tabsName]: index,
+    });
+  },
+  handleTabChange({ index, tabsName }) {
+    this.setData({
+      [tabsName]: index,
+    });
+  },
+  handlePlusClick() {
+    my.alert({
+      content: 'plus clicked',
+    });
+  },
 });
diff --git a/src/am-switch/index.less b/src/am-switch/index.less
index e472f2a..f780a70 100644
--- a/src/am-switch/index.less
+++ b/src/am-switch/index.less
@@ -2,13 +2,11 @@
 
 .am-switch {
   .checkbox {
+    width: 102 * @pixelSize;
+    height: 62 * @pixelSize;
     border-radius: @corner-radius-circle;
     border-radius: var(--am-switch-corner-radius, @corner-radius-circle);
   }
-  .a-switch-checkbox.a-switch-checkbox:checked ~ .checkbox {
-    background: @color-fill-primary;
-    background: var(--am-switch-background, @color-fill-primary);
-  }
   .checkbox:after {
     left: 4 * @pixelSize;
     top: 4 * @pixelSize;
@@ -25,4 +23,26 @@
     border-radius: @corner-radius-circle;
     border-radius: var(--am-switch-corner-radius, @corner-radius-circle);
   }
+  &.a-switch-android .checkbox {
+    width: 144 * @pixelSize;
+    height: 46 * @pixelSize;
+    border-radius: 6 * @pixelSize;
+  }
+  &.a-switch-android .checkbox:after {
+    width: 70 * @pixelSize;
+    height: 42 * @pixelSize;
+    border-radius: 4 * @pixelSize;
+    left: 2 * @pixelSize;
+    top: 2 * @pixelSize;
+  }
+  .a-switch-checkbox.a-switch-checkbox:checked ~ .checkbox {
+    background: @color-fill-primary;
+    background: var(--am-switch-background, @color-fill-primary);
+  }
+  .a-switch-checkbox.a-switch-checkbox:checked ~ .checkbox::after {
+    transform: translateX(40 * @pixelSize);
+  }
+  &.a-switch-android .a-switch-checkbox.a-switch-checkbox:checked ~ .checkbox::after {
+    transform: translateX(70 * @pixelSize);
+  }
 }
diff --git a/src/input-item/index.less b/src/input-item/index.less
index 83c8978..519ec52 100644
--- a/src/input-item/index.less
+++ b/src/input-item/index.less
@@ -24,8 +24,6 @@
     min-height: @size-12;
     min-height: var(--am-input-line-min-height, @size-12);
     overflow: hidden;
-    font-size: @font-size-list;
-    font-size: var(--am-input-font-size, @font-size-list);
   }
 
   &-label {
@@ -33,6 +31,8 @@
     min-width: @size-20;
     min-width: var(--am-input-label-min-width, @size-20);
     margin-right: 2px;
+    font-size: @font-size-list;
+    font-size: var(--am-input-label-font-size, @font-size-list);
     color: @color-text-title;
     color: var(--am-input-item-label-color, @color-text-title);
   }
@@ -42,11 +42,14 @@
     flex: 1;
     &-vertical {
       flex-direction: column;
-      padding: 12px 0;
+      padding: @v-spacing-large 0;
+      padding: var(--am-input-vlabel-paddingTB, @v-spacing-large) 0;
       .am-input-label {
         align-self: flex-start;
         font-size: @font-size-subtitle;
+        font-size: var(--am-input-vlabel-font-size, @font-size-subtitle);
         color: @color-text-subtitle;
+        color: var(--am-input-vlabel-color, @color-text-subtitle);
       }
       .a-input-placeholder {
         margin-left: -3px;
@@ -57,10 +60,12 @@
   &-content {
     flex: 1;
     display: flex;
-    color: @color-text-title;
-    color: var(--am-input-item-label-color, @color-text-title);
-    text-align: left;
     padding: 0;
+    font-size: @font-size-list;
+    font-size: var(--am-input-font-size, @font-size-list);
+    text-align: left;
+    color: @color-text-title;
+    color: var(--am-input-item-color, @color-text-title);
   }
 
   &-content .a-input-wrap {
diff --git a/src/list/list-item/index.less b/src/list/list-item/index.less
index b9f4a79..cc79125 100644
--- a/src/list/list-item/index.less
+++ b/src/list/list-item/index.less
@@ -132,7 +132,8 @@
     }
   }
   &-arrow {
-    display: block;
+    display: flex;
+    align-items: center;
     margin-left: @h-spacing-large;
     margin-left: var(--am-list-item-arrow-margin, @h-spacing-large);
     height: @icon-size-sm;
diff --git a/src/picker-item/index.less b/src/picker-item/index.less
index f15c1dc..efeee8b 100644
--- a/src/picker-item/index.less
+++ b/src/picker-item/index.less
@@ -20,8 +20,6 @@
     min-height: @size-12;
     min-height: var(--am-picker-line-min-height, @size-12);
     overflow: hidden;
-    font-size: @font-size-list;
-    font-size: var(--am-picker-font-size, @font-size-list);
   }
 
   &-label {
@@ -29,6 +27,8 @@
     min-width: @size-20;
     min-width: var(--am-picker-label-min-width, @size-20);
     margin-right: 2px;
+    font-size: @font-size-list;
+    font-size: var(--am-picker-label-font-size, @font-size-list);
     color: @color-text-title;
     color: var(--am-picker-label-color, @color-text-title);
   }
@@ -39,8 +39,10 @@
     height: @size-6;
     height: var(--am-picker-wrapper-height, @size-6);
     align-items: center;
-    overflow: hidden;
     padding-left: 3px;
+    overflow: hidden;
+    font-size: @font-size-list;
+    font-size: var(--am-picker-font-size, @font-size-list);
   }
 
   &-layer {
@@ -48,11 +50,14 @@
     flex: 1;
     &-vertical {
       flex-direction: column;
-      padding: 12px 0;
+      padding: @v-spacing-large 0;
+      padding: var(--am-picker-vlabel-paddingTB, @v-spacing-large) 0;
       .am-picker-label {
         align-self: flex-start;
         font-size: @font-size-subtitle;
+        font-size: var(--am-picker-vlabel-font-size, @font-size-subtitle);
         color: @color-text-subtitle;
+        color: var(--am-picker-vlabel-color, @color-text-subtitle);
       }
       .am-picker-wrapper {
         padding-left: 0;
@@ -85,11 +90,6 @@
     display: none;
   }
 
-  &-text {
-    // padding-left: @size-2;
-    // padding-left: var(--am-picker-text-padding-left, @size-2);
-  }
-
   &-content-placeholder {
     color: @color-text-weak;
     color: var(--am-picker-placeholder-color, @color-text-weak);
@@ -102,7 +102,8 @@
 
   &-arrow {
     display: block;
-    margin-left: 8px;
+    margin-left: @h-spacing-standard;
+    margin-left: var(--am-picker-arrow-marginLeft, @h-spacing-standard);
     line-height: 1;
   }
 }
diff --git a/src/popover/index.md b/src/popover/index.md
index 9ec42c2..26f9cf3 100644
--- a/src/popover/index.md
+++ b/src/popover/index.md
@@ -45,46 +45,105 @@
 
 ### axml
 ```xml
-<popover
-  position="{{position}}"
-  show="{{show}}"
-  showMask="{{showMask}}"
-  onMaskClick="onMaskClick"
->
-  <view onTap="onShowPopoverTap">点击显示</view>
-  <view slot="items">
-    <popover-item onItemClick="itemTap1">
-      <text>line1</text>
-    </popover-item>
-    <popover-item>
-      <text>line2</text>
-    </popover-item>
-  </view>
-</popover>
+<view class="demo-popover">
+  <popover
+    position="{{position}}"
+    show="{{show}}"
+    showMask="{{showMask}}"
+    onMaskClick="onMaskClick"
+  >
+    <view class="demo-popover-btn" onTap="onShowPopoverTap">点击{{show ? '隐藏' : '显示'}}</view>
+    <view slot="items">
+      <popover-item onItemClick="itemTap1" iconType="{{showIcon ? 'qr' : ''}}" data-direction="{{position}}">
+        <text>{{position}}</text>
+      </popover-item>
+      <popover-item onItemClick="itemTap2" iconType="{{showIcon ? 'qr' : ''}}" data-index="{{2}}">
+        <text>line2</text>
+      </popover-item>
+    </view>
+  </popover>
+</view>
+<view class="demo-popover-test-btns">
+  <button class="demo-popover-test-btn" onTap="onNextPositionTap">下个位置</button>
+  <button class="demo-popover-test-btn" onTap="onMaskChangeTap">蒙层{{showMask ? '隐藏' : '显示'}}</button>
+  <button class="demo-popover-test-btn" onTap="onIconChangeTap">显示/隐藏图标</button>
+</view>
 ```
 
 ### js
 ```javascript
+const position = ['top', 'topRight', 'rightTop', 'right', 'rightBottom', 'bottomRight', 'bottom', 'bottomLeft', 'leftBottom', 'left', 'leftTop', 'topLeft'];
 Page({
   data: {
-    position: 'bottomRight',
+    position: position[0],
     show: false,
     showMask: true,
+    showIcon: true,
   },
-  onMaskClick() {
+  onShowPopoverTap() {
     this.setData({
-      show: false,
+      show: !this.data.show,
     });
   },
-  onShowPopoverTap() {
+  onNextPositionTap() {
+    let index = position.indexOf(this.data.position);
+    index = index >= position.length - 1 ? 0 : index + 1;
     this.setData({
       show: true,
+      position: position[index],
+    });
+  },
+  onMaskChangeTap() {
+    this.setData({
+      showMask: !this.data.showMask,
+    });
+  },
+  onIconChangeTap() {
+    this.setData({
+      showIcon: !this.data.showIcon,
+    });
+  },
+  onMaskClick() {
+    this.setData({
+      show: false,
+    });
+  },
+  itemTap1(e) {
+    my.alert({
+      content: `点击_${e.currentTarget.dataset.direction}`,
     });
   },
-  itemTap1() {
+  itemTap2(e) {
     my.alert({
-      content: '点击1',
+      content: `点击_${e.currentTarget.dataset.index}`,
     });
   },
 });
+```
+
+### acss
+```css
+.demo-popover {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 400px;
+}
+.demo-popover-btn {
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+  background-color: #fff;
+  border: 1px solid #dddddd;
+  border-radius: 2px;
+}
+.demo-popover-test-btns {
+  display: flex;
+  justify-content: space-around;
+}
+.demo-popover-test-btn {
+  width: 45%;
+}
 ```
\ No newline at end of file
diff --git a/src/style/themes/default.less b/src/style/themes/default.less
index fca7d8f..e05407c 100644
--- a/src/style/themes/default.less
+++ b/src/style/themes/default.less
@@ -17,8 +17,10 @@
   /* input-item */
   /* color | 暗提示字体颜色 */
   --am-input-item-placeholder-color: var(--am-color-text-weak);
-  /* color | 输入框标签字体颜色 */
+  /* color | 输入框 label 字体颜色 */
   --am-input-item-label-color: var(--am-color-text-title);
+  /* color | 输入框文字颜色 */
+  --am-input-item-color: var(--am-color-text-title);
   /* spacing | 输入框主体左侧间距 */
   --am-input-item-padding-left: var(--am-h-spacing-large);
   /* color | 输入框主体背景色 */
@@ -27,20 +29,26 @@
   --am-input-line-padding-right: var(--am-h-spacing-large);
   /* size | 输入框内容最小高度 */
   --am-input-line-min-height: var(--am-size-12);
-  /* size | 输入框内容最小高度 */
+  /* size | 输入框内容最小宽度 */
   --am-input-label-min-width: var(--am-size-20);
-  /* color | 输入框内容最小高度 */
-  --am-input-label-color: var(--am-color-text-title);
   /* size | 输入框用户输入区最小高度 */
   --am-input-content-height: var(--am-size-6);
   /* size | 输入框清除按钮大小 */
   --am-input-clear-size: var(--am-size-8);
   /* font-size | 输入框字体大小 */
   --am-input-font-size: var(--am-font-size-list);
+  /* font-size | 输入框 label 字体大小 */
+  --am-input-label-font-size: var(--am-font-size-list);
   /* icon-size | 图标大小 */
   --am-input-icon-size: var(--am-icon-size-sm);
   /* line-height | 图标行高 */
   --am-input-icon-line-height: var(--am-line-height-base);
+  /* spacing | 竖向内间距 */
+  --am-input-vlabel-paddingTB: var(--am-v-spacing-large);
+  /* font-size | 竖向 label 文字大小 */
+  --am-input-vlabel-font-size: var(--am-font-size-subtitle);
+  /* color | 竖向 label 文字颜色 */
+  --am-input-vlabel-color: var(--am-color-text-subtitle);
 
   /* picker-item */
   /* color | 暗提示字体颜色 */
@@ -65,8 +73,18 @@
   --am-picker-arrow-size: var(--am-size-4);
   /* font-size | 输入框字体大小 */
   --am-picker-font-size: var(--am-font-size-list);
+  /* font-size | 横向 label 字体大小 */
+  --am-picker-label-font-size: var(--am-font-size-list);
+  /* font-size | 竖向 label 字体大小 */
+  --am-picker-vlabel-font-size: var(--am-font-size-subtitle);
+  /* color | 竖向 label 文字颜色 */
+  --am-picker-vlabel-color: var(--am-color-text-subtitle);
+  /* spacing | 竖向内间距 */
+  --am-picker-vlabel-paddingTB: var(--am-v-spacing-large);
   /* color | 内容字体颜色 */
   --am-picker-content-value-color: var(--am-color-text-title);
+  /* spacing | 箭头左边距 */
+  --am-picker-arrow-marginLeft: var(--am-h-spacing-standard);
 
   /* verify-code */
   /* color | 暗提示字体颜色 */
diff --git a/src/tabs/index.axml b/src/tabs/index.axml
index 3b5ac18..f612141 100644
--- a/src/tabs/index.axml
+++ b/src/tabs/index.axml
@@ -41,7 +41,10 @@
                   (!hasSubTitle && capsule?
                   (index === activeTab ? 'background-color:' + tabBarUnderlineColor + ';' : '')
                   :'') }}">
-                <view a:if="{{ !hasSubTitle && !capsule && index === activeTab}}" class="am-tabs-bar-title-underline" style="background-color: {{tabBarUnderlineColor}};"></view>
+                <view a:if="{{ !hasSubTitle && !capsule && index === activeTab}}" class="am-tabs-bar-title-underline" 
+                  style="background-color: {{tabBarUnderlineColor}};
+                    {{tabBarUnderlineWidth?`width: ${tabBarUnderlineWidth};`:''}}
+                    {{tabBarUnderlineHeight?`height: ${tabBarUnderlineHeight};`:''}}"></view>
                 <view class="am-tabs-bar-tab-mainTitle" style="{{index === activeTab?'font-weight: bold;':''}}">{{item.title}}
                   <badge className="am-tabs-bar-tab-badge" a:if="{{item.showBadge}}"
                   dot="{{item.number ? false : true}}" 
diff --git a/src/tabs/index.less b/src/tabs/index.less
index 6a77a71..9a56e12 100644
--- a/src/tabs/index.less
+++ b/src/tabs/index.less
@@ -173,9 +173,9 @@
     }
     &-underline {
       position: absolute;
-      left: 0;
+      left: 50%;
       bottom: 0;
-      right: 0;
+      width: 100%;
       height: 4 * @pixelSize;
       overflow: hidden;
       font-size: 0;
@@ -219,9 +219,9 @@
 
 @keyframes underlineShow {
   0% {
-    transform: scale(0.1);
+    transform: scale(0.1) translateX(-100%);
   }
   100% {
-    transform: scale(1);
+    transform: scale(1) translateX(-50%);
   }
 }
diff --git a/src/tabs/index.md b/src/tabs/index.md
index e92d650..e5ed9f0 100644
--- a/src/tabs/index.md
+++ b/src/tabs/index.md
@@ -49,6 +49,8 @@ tabs 横向选项卡主要是由 `<tabs>` 和 `<tab-content>` 两个标签组成
 | onTabClick | EventHandle | (index: Number) => void | - | tab 被点击的回调 | - | - |
 | onChange | EventHandle | (index: Number) => void | - | tab 变化时触发 | - | - |
 | tabsName | String | - | - | tab 选项卡的名字，与 `activeTab` 的 key 值相同 | - | true |
+| tabBarUnderlineWidth | String | 100% | - | 设置 tab 选项卡选中态的下划线宽度 | [1.0.10](https://www.npmjs.com/package/mini-ali-ui?activeTab=versions) | - |
+| tabBarUnderlineHeight | String | 2px | - | 设置 tab 选项卡选中态的下划线高度 | [1.0.10](https://www.npmjs.com/package/mini-ali-ui?activeTab=versions) | - |
 
 ### tab-content
 
@@ -102,6 +104,7 @@ tabs 组件内容区域高度是否能够自适应，需要注意 `swipeable` 
   showPlus="{{true}}"
   capsule="{{false}}"
   hasSubTitle="{{false}}"
+  tabBarUnderlineWidth="20px"
 >
   <block a:for="{{tabs2}}">
     <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab2}}" a:if="{{index === 0}}">
diff --git a/src/tabs/index.ts b/src/tabs/index.ts
index 9f7a2f9..c3e2ee0 100644
--- a/src/tabs/index.ts
+++ b/src/tabs/index.ts
@@ -38,6 +38,10 @@ Component({
     floorNumber: [],
     elevatorTop: '0px',
     showBadge: false,
+    // 选中选项卡下划线宽度
+    tabBarUnderlineWidth: '',
+    // 选中选项卡下划线高度
+    tabBarUnderlineHeight: '',
   },
   data: {
     windowWidth,