diff --git a/dist/capsule/index.wxml b/dist/capsule/index.wxml
index b7ed859a..da86deba 100644
--- a/dist/capsule/index.wxml
+++ b/dist/capsule/index.wxml
@@ -1,6 +1,12 @@
 <template name="capsule">
-  <view class="zan-capsule">
-    <view class="zan-capsule__left">{{ leftText }}</view>
-    <view class="zan-capsule__right">{{ rightText }}</view>
+  <view class="zan-capsule zan-capsule--{{type}}">
+    <block wx:if="{{color}}">
+      <view class="zan-capsule__left" style="background: {{ color }}; border-color: {{ color }}">{{ leftText }}</view>
+      <view class="zan-capsule__right" style="color: {{ color }}; border-color: {{ color }}">{{ rightText }}</view>
+    </block>
+    <block wx:else>
+      <view class="zan-capsule__left">{{ leftText }}</view>
+      <view class="zan-capsule__right">{{ rightText }}</view>
+    </block>
   </view>
 </template>
\ No newline at end of file
diff --git a/dist/capsule/index.wxss b/dist/capsule/index.wxss
index 7fbf4c98..48be9a49 100644
--- a/dist/capsule/index.wxss
+++ b/dist/capsule/index.wxss
@@ -15,14 +15,25 @@
 }
 .zan-capsule__left {
   padding: 0 2px;
-  color: #fff;
-  background: #F24544;
+  color: #FFF;
+  background: #999;
   border-radius: 2px 0 0 2px;
-  border: 1rpx solid #F24544;
+  border: 1rpx solid #999;
 }
 .zan-capsule__right {
   padding: 0 5px;
-  color: #F24544;
+  color: #999;
   border-radius: 0 2px 2px 0;
-  border: 1rpx solid #F24544;
+  border: 1rpx solid #999;
+}
+
+.zan-capsule--danger .zan-capsule__left {
+  color: #FFF;
+  background: #F24544;
+  border-color: #F24544;
+}
+
+.zan-capsule--danger .zan-capsule__right {
+  color: #F24544;
+  border-color: #F24544;
 }
diff --git a/dist/cell/index.wxss b/dist/cell/index.wxss
index 43ca13ed..e8cb1d3a 100644
--- a/dist/cell/index.wxss
+++ b/dist/cell/index.wxss
@@ -16,15 +16,26 @@
   background: #e5e5e5;
   content: ' ';
 }
+.zan-cell__icon {
+  margin-right: 5px;
+}
 .zan-cell__bd {
   flex: 1;
 }
+.zan-cell__text {
+  line-height: 24px;
+  font-size: 14px;
+}
+.zan-cell__desc {
+  line-height: 1.2;
+  font-size: 12px;
+  color: #666;
+}
 .zan-cell__ft {
   position: relative;
   text-align: right;
   color: #666;
 }
-
 .zan-cell__no-pading{
   padding: 0;
 }
diff --git a/example/capsule/index.wxml b/example/capsule/index.wxml
index e8063549..d4041257 100644
--- a/example/capsule/index.wxml
+++ b/example/capsule/index.wxml
@@ -4,9 +4,18 @@
 
   <view class="doc-title">CAPSULE</view>
 
+  <view class="zan-panel-title">基本用法</view>
   <view class="zan-panel">
     <view class="zan-cell zan-cell--last-child">
       <template is="capsule" data="{{ leftText: '1折', rightText: '限购一份'}}" />
+      <template is="capsule" data="{{ leftText: '1折', rightText: '限购一份', type: 'danger' }}" />
+    </view>
+  </view>
+
+  <view class="zan-panel-title">自定义颜色</view>
+  <view class="zan-panel">
+    <view class="zan-cell zan-cell--last-child">
+      <template is="capsule" data="{{ leftText: '1折', rightText: '限购一份', color: '#38f' }}" />
     </view>
   </view>
 
diff --git a/example/cell/index.wxml b/example/cell/index.wxml
index f361da96..0e0f6d53 100644
--- a/example/cell/index.wxml
+++ b/example/cell/index.wxml
@@ -17,6 +17,24 @@
     </view>
   </view>
 
+  <view class="zan-panel">
+    <view class="zan-cell">
+      <view class="zan-cell__icon zan-icon zan-icon-checked" style="color:#38f;"></view>
+      <view class="zan-cell__bd">单行列表</view>
+      <view class="zan-cell__ft">详细信息</view>
+    </view>
+  </view>
+
+  <view class="zan-panel">
+    <view class="zan-cell">
+      <view class="zan-cell__bd">
+        <view class="zan-cell__text">单行列表</view>
+        <view class="zan-cell__desc">附加描述</view>
+      </view>
+      <view class="zan-cell__ft">详细信息</view>
+    </view>
+  </view>
+
   <view class="zan-panel">
     <view class="zan-cell zan-cell--access">
       <view class="zan-cell__bd">单行列表</view>
diff --git a/example/tab/index.wxss b/example/tab/index.wxss
deleted file mode 100644
index e69de29b..00000000