capsule支持不同类型及自定义颜色 (#34)

* style: badge上标大小改变更加灵活

* style: panel-title的行高跟随字号

* style: 绝对定位的元素width或height为auto，left，right，top，bottom不为auto时，auto的margin将计算为0，同初始值

* style: 修复作为组件使用时dialog的定位问题

* style: 修正示例

* style: add

* style: capsule

* style: modify readme

* style: add noticebar

* style: modify readme

* style: noticebar优化

* style: add popup

* style: remove

* style: 左右反了...

* style: 通告栏支持同一页面多个

* style: 独立管理不同noticebar的动画数据

* style: add

* style: 删除多余文件

* style: capsule自定义颜色

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>

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;
 }

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;
 }

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>
 

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>