v2.0.6

1.修复行距带来的垂直不居中问题
2.优化操作条组件，新增多种样式
3.优化背景颜色（某些组件的默认背景调整,移除一些important）
4.更新动画扩展5.优化按钮,标签,头像的大小

demo/app.json

@@ -6,7 +6,6 @@
     "pages/basics/button/design",
     "pages/basics/tag/tag",
     "pages/basics/avatar/avatar",
-    "pages/basics/image/image",
     "pages/basics/progress/progress",
     "pages/basics/shadow/shadow",
     "pages/basics/background/background",
@@ -27,7 +26,14 @@
     "pages/plugin/home/home",
     "pages/plugin/indexes/indexes",
     "pages/plugin/gradual/gradual",
-    "pages/plugin/animation/animation"
+    "pages/plugin/animation/animation",
+    "pages/auth/auth",
+    "pages/about/about/about",
+    "pages/about/log/log",
+    "pages/about/test/list",
+    "pages/about/test/filter",
+    "pages/about/home/home",
+    "custom-tab-bar/index"
   ],
   "window": {
     "navigationBarBackgroundColor": "#39b54a",
@@ -35,8 +41,9 @@
     "navigationStyle": "custom",
     "navigationBarTextStyle": "white"
   },
-  "component": true,
+  "usingComponents": {},
   "tabBar": {
+    "custom": true,
     "color": "#aaa",
     "selectedColor": "#39b54a",
     "borderStyle": "black",
@@ -59,6 +66,12 @@
         "iconPath": "/images/tabbar/plugin.png",
         "selectedIconPath": "/images/tabbar/plugin_cur.png",
         "text": "扩展"
+      },
+      {
+        "pagePath": "pages/about/home/home",
+        "iconPath": "/images/tabbar/about.png",
+        "selectedIconPath": "/images/tabbar/about_cur.png",
+        "text": "关于"
       }
     ]
   }

demo/app.wxss

@@ -9,7 +9,6 @@
 }
 
 .nav-li {
-  color: #666;
   padding: 30rpx;
   border-radius: 12rpx;
   width: 45%;

demo/custom-tab-bar/index.js

@@ -0,0 +1,43 @@
+Component({
+  options: {
+    addGlobalClass: true,
+  },
+  data: {
+    selected: 0,
+    list: [{
+        pagePath: "/pages/basics/home/home",
+        iconPath: "/images/tabbar/basics.png",
+        selectedIconPath: "/images/tabbar/basics_cur.png",
+        text: "基础"
+      },
+      {
+        pagePath: "/pages/component/home/home",
+        iconPath: "/images/tabbar/component.png",
+        selectedIconPath: "/images/tabbar/component_cur.png",
+        text: "组件"
+      },
+      {
+        pagePath: "/pages/plugin/home/home",
+        iconPath: "/images/tabbar/plugin.png",
+        selectedIconPath: "/images/tabbar/plugin_cur.png",
+        text: "扩展"
+      },
+      {
+        pagePath: "/pages/about/home/home",
+        iconPath: "/images/tabbar/about.png",
+        selectedIconPath: "/images/tabbar/about_cur.png",
+        text: "关于"
+      }
+    ]
+  },
+  methods: {
+    switchTab(e) {      
+      const url = e.currentTarget.dataset.path
+      wx.switchTab({
+        url
+      })
+    }
+  },
+  pageLifetimes: {
+  },
+})

demo/custom-tab-bar/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

demo/custom-tab-bar/index.wxml

@@ -0,0 +1,8 @@
+<view class="cu-bar tabbar bg-white shadow">
+  <view class="action" wx:for="{{list}}" wx:key="index" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
+    <view class='icon-cu-image'>
+      <image src='{{selected === index ? item.selectedIconPath : item.iconPath}}' class='{{selected === index ? "animation" : "animation"}}'></image>
+    </view>
+    <view class='{{selected === index ? "text-green" : "text-gray"}}'>{{item.text}}</view>
+  </view>
+</view>

demo/icon.wxss

@@ -27,6 +27,7 @@
     font-style: normal;
 }
 
+
 @font-face {font-family: "iconfont";
   src: url('//at.alicdn.com/t/font_533566_yfq2d9wdij.eot?t=1545239985831'); /* IE9*/
   src: url('//at.alicdn.com/t/font_533566_yfq2d9wdij.eot?t=1545239985831#iefix') format('embedded-opentype'), /* IE6-IE8 */

demo/pages/about/about/about.js

@@ -1,66 +1,14 @@
-// pages/about/about/about.js
+const app = getApp();
 Page({
-
-  /**
-   * 页面的初始数据
-   */
   data: {
-
+    StatusBar: app.globalData.StatusBar,
+    CustomBar: app.globalData.CustomBar,
+    ColorList: app.globalData.ColorList,
   },
-
+  onLoad: function () { },
-  /**
+  pageBack() {
-   * 生命周期函数--监听页面加载
+    wx.navigateBack({
-   */
+      delta: 1
-  onLoad: function (options) {
+    });
-
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
   }
-})
+});

demo/pages/about/about/about.json

@@ -1,3 +1 @@
-{
+{}
-  "usingComponents": {}
-}

demo/pages/about/about/about.wxml

@@ -1,2 +1,18 @@
-<!--pages/about/about/about.wxml-->
+<view class="cu-custom" style="height:{{CustomBar}}px;">
-<text>pages/about/about/about.wxml</text>
+  <view class="cu-bar fixed bg-gradual-green" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+    <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
+      <text class='icon-back'></text> 关于
+    </navigator>
+  </view>
+</view>
+
+<view class='margin-xl bg-white padding-xl radius shadow-lg'>
+  <view class='text-center margin-bottom text-lg  text-grey'>关于ColorUI组件库</view>
+  <view class='text-content'>
+    <view>Hi！开发者~欢迎使用ColorUI组件库！</view>
+    <view class='margin-top-sm'>该项目是我个人开发的一款高颜值的微信小程序组件库。这个项目不仅有一些漂亮的基础元素，还有一些实用的组件。扩展中心也会不定期更新一些小程序的解决方案，或者你有一些好的想法可以在GitHub里提交给我，我会加入到扩展里。</view>
+    <view class='margin-top-sm'>项目是开源的，不收取任何费用，如果这个项目有帮到你，或者你觉得很赞，可以在GitHub里扫描赞赏码支持一下！</view>
+    <view class='margin-top-sm'>该项目你可以用到除组件库小程序的任何项目。作者我也是花了时间和精力的，我不希望你拷贝一份，做一些修改发布就变成了一个独立的项目，当然！扩展再发布是可以的，但前提是注明一下我这个原作者٩(๑❛ᴗ❛๑)۶</view>
+    <view class='margin-top-sm'>更多功能敬请期待！</view>
+  </view>
+</view>

demo/pages/about/about/about.wxss

@@ -1 +1,27 @@
-/* pages/about/about/about.wxss */
+.UCenter-bg {
+  background-image: url(https://image.weilanwl.com/color2.0/index.jpg);
+  background-size: cover;
+  height: 700rpx;
+  display: flex;
+  justify-content: center;
+  padding-top: 40rpx;
+  overflow: hidden;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+  font-weight: 300;
+  text-shadow: 0 0 3px rgba(0,0,0,0.3);
+}
+.UCenter-bg text{
+  opacity: 0.8;
+}
+.UCenter-bg image {
+  width: 250rpx;
+  height: 250rpx;
+}
+
+.UCenter-bg .animation-wave {
+  position: absolute;
+  bottom: 0;
+}

demo/pages/about/home/home.js

@@ -1,66 +1,84 @@
-// pages/about/home/home.js
+Component({
-Page({
-
-  /**
-   * 页面的初始数据
-   */
   data: {
-
+    starCount: 0,
+    forksCount: 0,
+    visitTotal: 0,
   },
-
+  methods: {
-  /**
+    onLoad(options) {
-   * 生命周期函数--监听页面加载
+      let that = this;
-   */
+      wx.showLoading({
-  onLoad: function (options) {
+        title: '数据加载中',
-
+        mask: true,
+      })
+      let i = 0;
+      numDH();
+      function numDH() {
+        if (i < 20) {
+          setTimeout(function() {
+            that.setData({
+              visitTotal: i,
+              forksCount: i,
+              visitTotal: i
+            })
+            i++
+            numDH();
+          }, 20)
+        } else {
+          that.setData({
+            starCount: that.coutNum(999),
+            forksCount: that.coutNum(8888),
+            visitTotal: that.coutNum(77777)
+          })
+        }
+      }
+      wx.hideLoading()
+    },
+    coutNum(e) {
+      if (e > 1000 && e < 10000) {
+        e = (e / 1000).toFixed(1) + 'k'
+      }
+      if (e > 10000) {
+        e = (e / 10000).toFixed(1) + 'W'
+      }
+      return e
+    },
+    CopyLink(e) {
+      wx.setClipboardData({
+        data: e.currentTarget.dataset.link,
+        success: res => {
+          wx.showToast({
+            title: '已复制',
+            duration: 1000,
+          })
+        }
+      })
+    },
+    showModal(e) {
+      this.setData({
+        modalName: e.currentTarget.dataset.target
+      })
+    },
+    hideModal(e) {
+      this.setData({
+        modalName: null
+      })
+    },
+    showQrcode() {
+      wx.previewImage({
+        urls: ['https://image.weilanwl.com/color2.0/zanCode.jpg'],
+        current: 'https://image.weilanwl.com/color2.0/zanCode.jpg' // 当前显示图片的http链接      
+      })
+    },
   },
-
+  pageLifetimes: {
-  /**
+    show() {
-   * 生命周期函数--监听页面初次渲染完成
+      if (typeof this.getTabBar === 'function' &&
-   */
+        this.getTabBar()) {
-  onReady: function () {
+        this.getTabBar().setData({
-
+          selected: 3
-  },
+        })
-
+      }
-  /**
+    }
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
   }
 })

demo/pages/about/home/home.json

@@ -1,3 +1 @@
-{
+{}
-  "usingComponents": {}
-}

demo/pages/about/home/home.wxml

@@ -1,2 +1,80 @@
-<!--pages/about/home/home.wxml-->
+<view class='UCenter-bg'>
-<text>pages/about/home/home.wxml</text>
+  <image src='/images/logo.png' class='png' mode='widthFix'></image>
+  <view class='text-xl'>ColorUI组件库
+    <text class='text-df'>v2.0</text>
+  </view>
+  <view class='margin-top-sm'>
+    <text>By:文晓港</text>
+  </view>
+  <image src='https://image.weilanwl.com/gif/wave.gif' mode='scaleToFill' class='gif-wave'></image>
+</view>
+<view class='padding flex text-center text-grey bg-white shadow-warp'>
+  <view class='flex flex-sub flex-direction solid-right'>
+    <view class="text-xxl text-orange">{{visitTotal}}</view>
+    <view class="margin-top-sm">
+      <text class='icon-attentionfill'></text> View</view>
+  </view>
+  <view class='flex flex-sub flex-direction solid-right'>
+    <view class="text-xxl text-blue">{{starCount}}</view>
+    <view class="margin-top-sm">
+      <text class='icon-favorfill'></text> Star</view>
+  </view>
+  <view class='flex flex-sub flex-direction'>
+    <view class="text-xxl text-green">{{forksCount}}</view>
+    <view class="margin-top-sm">
+      <text class='icon-fork'></text> Fork</view>
+  </view>
+</view>
+<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
+  <view class="cu-item arrow">
+    <view class='content' bindtap='CopyLink' data-link='https://github.com/weilanwl/ColorUI'>
+      <text class='icon-github text-grey'></text>
+      <text class='text-grey'>GitHub</text>
+    </view>
+  </view>
+  <view class="cu-item arrow">
+    <navigator class='content' url='../about/about' hover-class='none'>
+      <image src='/images/logo.png' class='png' mode='aspectFit'></image>
+      <text class='text-grey'>关于ColorUI组件库</text>
+    </navigator>
+  </view>
+  <view class="cu-item arrow">
+    <navigator class='content' url='../log/log' hover-class='none'>
+      <text class='icon-formfill text-green'></text>
+      <text class='text-grey'>日志</text>
+    </navigator>
+  </view>
+  <view class="cu-item arrow">
+    <view class='content' bindtap="showQrcode">
+      <text class='icon-appreciatefill text-red'></text>
+      <text class='text-grey'>赞赏支持</text>
+    </view>
+  </view>
+  <view class="cu-item arrow">
+    <button class='cu-btn content' open-type='feedback'>
+      <text class='icon-writefill text-cyan'></text>
+      <text class='text-grey'>意见反馈</text>
+    </button>
+  </view>
+  <view class="cu-item arrow">
+    <navigator class='content' url='../test/list' hover-class='none'>
+      <text class='icon-creativefill text-orange'></text>
+      <text class='text-grey'>Bug测试</text>
+    </navigator>
+  </view>
+</view>
+
+<view class="cu-modal {{modalName=='QrcodeModal'?'show':''}}">
+  <view class="cu-dialog">
+    <view class="bg-img" style="background-image: url('https://image.weilanwl.com/color2.0/zanCode.jpg');height:544rpx;">
+      <view class="cu-bar justify-end none-bg text-white">
+        <view class='action' bindtap='hideModal'>
+          <text class='icon-close '></text>
+        </view>
+      </view>
+    </view>
+    <view class="cu-bar">
+      <view class='justify-center flex-sub' bindtap='SaveQrcode'>保存到相册</view>
+    </view>
+  </view>
+</view>

demo/pages/about/home/home.wxss

@@ -1 +1,39 @@
-/* pages/about/home/home.wxss */
+page{
+  padding-bottom: 100rpx;
+}
+.UCenter-bg {
+  background-image: url(https://image.weilanwl.com/color2.0/index.jpg);
+  background-size: cover;
+  height: 550rpx;
+  display: flex;
+  justify-content: center;
+  padding-top: 40rpx;
+  overflow: hidden;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+  font-weight: 300;
+  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+}
+
+.UCenter-bg text {
+  opacity: 0.8;
+}
+
+.UCenter-bg image {
+  width: 200rpx;
+  height: 200rpx;
+}
+
+.UCenter-bg .gif-wave{
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+  mix-blend-mode: screen;  
+  height: 100rpx;   
+}
+
+

demo/pages/about/log/log.js

@@ -1,66 +1,14 @@
-// pages/about/log/log.js
+const app = getApp();
 Page({
-
-  /**
-   * 页面的初始数据
-   */
   data: {
-
+    StatusBar: app.globalData.StatusBar,
+    CustomBar: app.globalData.CustomBar,
+    ColorList: app.globalData.ColorList,    
   },
-
+  onLoad: function () { },
-  /**
+  pageBack() {
-   * 生命周期函数--监听页面加载
+    wx.navigateBack({
-   */
+      delta: 1
-  onLoad: function (options) {
+    });
-
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
   }
-})
+});

demo/pages/about/log/log.json

@@ -1,3 +1 @@
-{
+{}
-  "usingComponents": {}
-}

demo/pages/about/log/log.wxml

@@ -1,2 +1,99 @@
-<!--pages/about/log/log.wxml-->
+<view class="cu-custom" style="height:{{CustomBar}}px;">
-<text>pages/about/log/log.wxml</text>
+  <view class="cu-bar fixed bg-gradual-green" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+    <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
+      <text class='icon-back'></text> <text class='text-cut'>日志</text>
+    </navigator>
+  </view>
+</view>
+<view class="cu-timeline">
+  <view class='cu-item text-green'>
+    <view class="bg-gradual-green content shadow-blur">
+      <view class="cu-capsule radius">
+        <view class="cu-tag bg-white text-green">v2.0.6</view>
+        <view class="cu-tag line-white">2019/02/09</view>
+      </view>
+      <view class='margin-top-sm text-content'>
+        <view>1.修复行距带来的垂直不居中问题</view>
+        <view>2.优化操作条组件，新增多种样式</view>
+        <view>3.优化背景颜色（某些组件的默认背景调整,移除一些important）</view>
+        <view>4.更新动画扩展</view>
+        <view>5.优化按钮,标签,头像的大小</view>
+      </view>
+    </view>
+  </view>
+  <view class='cu-item text-green'>
+    <view class="bg-green content shadow-blur">
+      <view class="cu-capsule radius">
+        <view class="cu-tag bg-white text-green">v2.0.5</view>
+        <view class="cu-tag line-white">2019/01/13</view>
+      </view>
+      <view class='margin-top-sm text-content'>
+        <view>1.修复时间线图标显示问题</view>
+        <view>2.switch、radio、checkbox单位改成px，抛弃小尺寸</view>
+        <view>3.更新多种窗口组件</view>
+        <view>4.更新多种动画</view>
+        <view>5.新增步骤条组件</view>
+        <view>6.优化列表组件，新增左滑操作</view>
+        <view>7.优化图标搜索</view>
+      </view>
+    </view>
+  </view>
+  <view class='cu-item text-green'>
+    <view class="bg-green content shadow-blur">
+      <view class="cu-capsule radius">
+        <view class="cu-tag bg-white text-green">v2.0.4</view>
+        <view class="cu-tag line-white">2019/01/10</view>
+      </view>
+      <view class='margin-top-sm text-content'>
+        <view>1.抛弃标签选择器，改成类名选择器</view>
+        <view>2.动画改成Gif，并新增动画</view>
+        <view>3.修复一些图标错位问题</view>
+        <view>4.修复头像文字显示问题</view>
+        <view>* 建议先备份，再全局替换标签。</view>
+      </view>
+    </view>
+  </view>
+  <view class='cu-item text-green'>
+    <view class="bg-green content shadow-blur">
+      <view class="cu-capsule radius">
+        <view class="cu-tag bg-white text-green">v2.0.3</view>
+        <view class="cu-tag line-white">2019/01/06</view>
+      </view>
+      <view class='margin-top-sm text-content'>
+        <view>1.修复一些单位错误（带输入框的操作条）</view>
+        <view>2.纠正一些单词拼写...</view>
+        <view>3.抛弃icon标签，改回text标签的写法</view>
+        <view>4.抛弃px单位的样式文件</view>
+        <view>5.优化一些组件的字体大小</view>
+        <view>6.新增两种加载样式</view>
+      </view>
+    </view>
+  </view>
+  <view class='cu-item text-green'>
+    <view class="bg-green content shadow-blur">
+      <view class="cu-capsule radius">
+        <view class="cu-tag bg-white text-green">v2.0.2</view>
+        <view class="cu-tag line-white">2018/12/24</view>
+      </view>
+      <view class='margin-top-sm text-content'>
+        <view>1.首页增加分享</view>
+        <view>2.卡片页修复switch开关问题</view>
+        <view>3.优化首页动画效果（ios表现不佳）</view>
+        <view>4.表单新增Picker</view>
+        <view>5.增加赞赏码！请多多支持！</view>
+        <view>6.新增反馈与Bug测试</view>
+        <view>7.优化轮播组件</view>
+        <view>8.优化Bar组件文字描述过多的场景</view>
+      </view>
+    </view>
+  </view>
+  <view class='cu-item text-green'>
+    <view class="bg-green content shadow-blur">
+      <view class="cu-capsule radius">
+        <view class="cu-tag bg-white text-green">v2.0.1</view>
+        <view class="cu-tag line-white">2018/12/20</view>
+      </view>
+      <view class='margin-top-sm text-content'>2.0新版本上线</view>
+    </view>
+  </view>
+</view>

demo/pages/about/log/log.wxss

@@ -1 +1,3 @@
-/* pages/about/log/log.wxss */
+page {
+  background: #fff;
+}

demo/pages/about/test/filter.js

@@ -1,66 +1,17 @@
-// pages/about/test/filter.js
+const app = getApp();
 Page({
-
-  /**
-   * 页面的初始数据
-   */
   data: {
-
+    StatusBar: app.globalData.StatusBar,
+    CustomBar: app.globalData.CustomBar,
+    ColorList: app.globalData.ColorList,
+    scrollLeft: 0,
+    TabCur: 0,
   },
-
+  tabSelect(e) {
-  /**
+    console.log(e);
-   * 生命周期函数--监听页面加载
+    this.setData({
-   */
+      TabCur: e.currentTarget.dataset.id,
-  onLoad: function (options) {
+      scrollLeft: (e.currentTarget.dataset.id - 1) * 60
-
+    })
   },
-
+});
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
-  }
-})

demo/pages/about/test/filter.wxml

@@ -1,2 +1,28 @@
-<!--pages/about/test/filter.wxml-->
+<view class="cu-custom" style="height:{{CustomBar}}px;">
-<text>pages/about/test/filter.wxml</text>
+  <view class="cu-bar fixed bg-gradual-green" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+    <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
+      <text class='icon-back'></text> <text>filter：blur引起的ios花屏测试</text>
+    </navigator>
+  </view>
+</view>
+<scroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}">
+  <view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{10}}" wx:key bindtap='tabSelect' data-id="{{index}}">
+    Tab{{index}}
+  </view>
+</scroll-view>
+
+<view class='padding margin'>
+  <view class="shadow-blur bg-red ABox" style='animation: show 1s 1;-webkit-animation: show 1s 1;'>阴影层</view>
+</view>
+
+<view class='padding margin'>
+  <view class="shadow-blur bg-orange ABox">去掉动画</view>
+</view>
+
+<view class='padding margin'>
+  <view class="shadow-blur bg-blue Box" style='animation: show 1s 1;-webkit-animation: show 1s 1;'>去掉after</view>
+</view>
+
+<view class='padding margin'>
+  <view class="shadow-blur bg-green Box">去掉动画和after</view>
+</view>

demo/pages/about/test/filter.wxss

@@ -1 +1,20 @@
-/* pages/about/test/filter.wxss */
+.ABox ,.Box {
+  padding: 30rpx;
+  border-radius: 12rpx;
+  position: relative;
+  z-index: 1;
+}
+
+.ABox::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  background-color: inherit;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  bottom: -20rpx;
+  border-radius: 10rpx;
+  opacity: 0.2;
+  transform: scale(0.9, 0.9);
+}

demo/pages/about/test/list.js

@@ -1,66 +1,17 @@
-// pages/about/test/list.js
+const app = getApp();
 Page({
-
-  /**
-   * 页面的初始数据
-   */
   data: {
-
+    StatusBar: app.globalData.StatusBar,
+    CustomBar: app.globalData.CustomBar,
+    ColorList: app.globalData.ColorList,
+    scrollLeft: 0,
+    TabCur: 0,
   },
-
+  tabSelect(e) {
-  /**
+    console.log(e);
-   * 生命周期函数--监听页面加载
+    this.setData({
-   */
+      TabCur: e.currentTarget.dataset.id,
-  onLoad: function (options) {
+      scrollLeft: (e.currentTarget.dataset.id - 1) * 60
-
+    })
   },
-
+});
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
-  }
-})

demo/pages/about/test/list.wxml

@@ -1,2 +1,15 @@
-<!--pages/about/test/list.wxml-->
+<view class="cu-custom" style="height:{{CustomBar}}px;">
-<text>pages/about/test/list.wxml</text>
+  <view class="cu-bar fixed bg-gradual-green" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+    <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
+      <text class='icon-back'></text> 测试
+    </navigator>
+  </view>
+</view>
+<view class='padding margin'>
+  <navigator url='filter' class='bg-grey padding radius'>
+    <text>filter：blur引起的ios花屏测试</text>
+  </navigator>
+  <!-- <navigator url='filter' class='bg-grey padding radius margin-top'>
+    <text>filter：blur引起的ios花屏测试</text>
+  </navigator> -->
+</view>

demo/pages/about/test/list.wxss

@@ -1 +1 @@
-/* pages/about/test/list.wxss */
+/* miniprogram/pages/about/test/list.wxss */

demo/pages/auth/auth.js

@@ -1,66 +1,16 @@
-// pages/auth/auth.js
+const app = getApp();
 Page({
-
-  /**
-   * 页面的初始数据
-   */
   data: {
-
+    StatusBar: app.globalData.StatusBar,
+    CustomBar: app.globalData.CustomBar,
+    ColorList: app.globalData.ColorList,
   },
-
+  onGetUserInfo: function (e) {
-  /**
+    if (!this.logged && e.detail.userInfo) {
-   * 生命周期函数--监听页面加载
+      app.globalData.userInfo = e.detail.userInfo;
-   */
+      wx.switchTab({
-  onLoad: function (options) {
+        url: '/pages/basics/home/home',
-
+      })
-  },
+    }
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
   }
-})
+});

demo/pages/auth/auth.json

@@ -1,3 +1 @@
-{
+{}
-  "usingComponents": {}
-}

demo/pages/auth/auth.wxml

@@ -1,2 +1,12 @@
-<!--pages/auth/auth.wxml-->
+<view class='UCenter-bg'>
-<text>pages/auth/auth.wxml</text>
+  <image src='/images/logo.png' class='png' mode='widthFix'></image>
+  <view class='text-xl'>ColorUI组件库
+    <text class='text-df'>v2.0</text>
+  </view>
+  <view class='margin-top-sm'>
+    <text>By:文晓港</text>
+  </view>
+</view>
+<view class='padding-xl'>
+  <button class='cu-btn  bg-green shadow lg block' open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">微信登录</button>
+</view>

demo/pages/auth/auth.wxss

@@ -1 +1,34 @@
-/* pages/auth/auth.wxss */
+.UCenter-bg {
+  background-image: url(https://image.weilanwl.com/color2.0/index.jpg);
+  background-size: cover;
+  height: 700rpx;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+  font-weight: 300;
+  text-shadow: 0 0 3px rgba(0,0,0,0.3);
+}
+.UCenter-bg::after {
+ content: "";
+ position: absolute;
+ width: 100vw;
+ height: 50vw;
+ background-color: #f1f1f1;
+ transform: rotate(-10deg) scale(2,2);
+ bottom: -60vw;
+ left: 0;
+ right: 0;
+ margin: auto;
+
+}
+.UCenter-bg text{
+  opacity: 0.8;
+}
+.UCenter-bg image {
+  width: 250rpx;
+  height: 250rpx;
+}

demo/pages/basics/avatar/avatar.wxml

@@ -1,20 +1,20 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 头像
     </navigator>
   </view>
 </view>
-<view class="cu-bar">
+<view class="cu-bar bg-white">
   <view class='action'>
     <text class='icon-title text-blue'></text>头像形状
   </view>
 </view>
-<view class="padding">	
+<view class="padding">
-  <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>	
+  <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
   <view class="cu-avatar radius margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
 </view>
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>头像尺寸
   </view>
@@ -26,18 +26,22 @@
   <view class="cu-avatar xl round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></view>
 </view>
 <view class="padding">
-  <view class="cu-avatar sm round margin-left bg-red" > orange</view>
+  <view class="cu-avatar sm round margin-left bg-red"> A</view>
-  <view class="cu-avatar round margin-left bg-red" >orange</view>
+  <view class="cu-avatar round margin-left bg-red">B</view>
-  <view class="cu-avatar lg round margin-left bg-red" >orange</view>
+  <view class="cu-avatar lg round margin-left bg-red">C</view>
-  <view class="cu-avatar xl round margin-left bg-red" >orange</view>
+  <view class="cu-avatar xl round margin-left bg-red">D</view>
 </view>
 <view class="padding">
-  <view class="cu-avatar sm round margin-left bg-red" > 蔚蓝</view>
+  <view class="cu-avatar sm round margin-left bg-red"> 蔚</view>
-  <view class="cu-avatar round margin-left bg-red" >蔚蓝</view>
+  <view class="cu-avatar round margin-left bg-red">蓝</view>
-  <view class="cu-avatar lg round margin-left bg-red" >蔚蓝</view>
+  <view class="cu-avatar lg round margin-left bg-red">
-  <view class="cu-avatar xl round margin-left bg-red" >蔚蓝</view>
+    <text>wl</text>
+  </view>
+  <view class="cu-avatar xl round margin-left bg-red">
+    <text class='avatar-text'>网络</text>
+  </view>
 </view>
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>内嵌文字(图标)
   </view>
@@ -51,17 +55,17 @@
   </view>
 </view>
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>头像颜色
   </view>
 </view>
 <view class="padding-sm">
   <view class="cu-avatar round lg bg-{{item.name}} margin-xs" wx:for="{{ColorList}}" wx:key>
-    <text>{{item.name}}</text>
+    <text class='avatar-text'>{{item.name}}</text>
   </view>
 </view>
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>头像组
   </view>
@@ -72,7 +76,7 @@
   </view>
 </view>
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>头像标签
   </view>

demo/pages/basics/background/background.wxml

@@ -1,12 +1,12 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 背景颜色
     </navigator>
   </view>
 </view>
 
-<view class="cu-bar solid-bottom">
+<view class="cu-bar bg-white solid-bottom">
   <view class='action'>
     <text class='icon-title text-blue'></text>深色背景
   </view>
@@ -20,7 +20,7 @@
   </view>
 </view>
 
-<view class="cu-bar solid-bottom">
+<view class="cu-bar bg-white solid-bottom">
   <view class='action'>
     <text class='icon-title text-blue'></text>淡色背景
   </view>
@@ -33,50 +33,50 @@
     </view>
   </view>
 </view>
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>渐变背景
   </view>
 </view>
 <view class='grid col-2 padding-sm'>
   <view class='padding-sm'>
-    <view class='gradual-red padding radius text-center shadow-blur'>
+    <view class='bg-gradual-red padding radius text-center shadow-blur'>
       <view class="text-lg">魅红</view>
       <view class='margin-top-sm text-Abc'>#f43f3b - #ec008c</view>
     </view>
   </view>
   <view class='padding-sm'>
-    <view class='gradual-orange padding radius text-center shadow-blur'>
+    <view class='bg-gradual-orange padding radius text-center shadow-blur'>
       <view class="text-lg">鎏金</view>
       <view class='margin-top-sm text-Abc'>#ff9700 - #ed1c24</view>
     </view>
   </view>
   <view class='padding-sm'>
-    <view class='gradual-green padding radius text-center shadow-blur'>
+    <view class='bg-gradual-green padding radius text-center shadow-blur'>
       <view class="text-lg">翠柳</view>
       <view class='margin-top-sm text-Abc'>#39b54a - #8dc63f</view>
     </view>
   </view>
   <view class='padding-sm'>
-    <view class='gradual-blue padding radius text-center shadow-blur'>
+    <view class='bg-gradual-blue padding radius text-center shadow-blur'>
       <view class="text-lg">靛青</view>
       <view class='margin-top-sm text-Abc'>#0081ff - #1cbbb4</view>
     </view>
   </view>
   <view class='padding-sm'>
-    <view class='gradual-purple padding radius text-center shadow-blur'>
+    <view class='bg-gradual-purple padding radius text-center shadow-blur'>
       <view class="text-lg">惑紫</view>
       <view class='margin-top-sm text-Abc'>#9000ff - #5e00ff</view>
     </view>
   </view>
   <view class='padding-sm'>
-    <view class='gradual-pink padding radius text-center shadow-blur'>
+    <view class='bg-gradual-pink padding radius text-center shadow-blur'>
       <view class="text-lg">霞彩</view>
       <view class='margin-top-sm text-Abc'>#ec008c - #6739b6</view>
     </view>
   </view>
 </view>
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>图片背景
   </view>
@@ -91,7 +91,7 @@
     </view>
   </view>
 </view>
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>视频背景
   </view>
@@ -107,7 +107,7 @@
     </cover-view>
   </cover-view>
 </view>
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>透明背景(文字层)
   </view>

demo/pages/basics/button/button.wxml

@@ -1,5 +1,5 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 按钮
     </navigator>
@@ -9,34 +9,34 @@
     </navigator>
   </view>
 </view>
-<view class="cu-bar">
+<view class="cu-bar bg-white solid-bottom">
   <view class='action'>
     <text class='icon-title text-blue'></text>按钮形状
   </view>
 </view>
-<view class="padding flex flex-wrap justify-between align-center">
+<view class="padding flex flex-wrap justify-between align-center bg-white">
   <button class='cu-btn'>默认</button>
   <button class='cu-btn round'>圆角</button>
   <button class='cu-btn icon'>
     <text class='icon-emojifill'></text>
   </button>
 </view>
-<view class="cu-bar margin-top ">
+<view class="cu-bar margin-top bg-white solid-bottom">
   <view class='action'>
     <text class='icon-title text-blue'></text>按钮尺寸
   </view>
 </view>
-<view class="padding flex flex-wrap justify-between align-center">
+<view class="padding flex flex-wrap justify-between align-center bg-white">
   <button class='cu-btn round sm'>小尺寸</button>
   <button class='cu-btn round'>默认</button>
   <button class='cu-btn round lg'>大尺寸</button>
 </view>
-<view class="cu-bar margin-top ">
+<view class="cu-bar margin-top bg-white">
   <view class='action'>
     <text class='icon-title text-blue'></text>按钮颜色
   </view>
   <view class='action'>
-    <text class='text-df'>阴影</text>
+    <text class='text-df margin-right-sm'>阴影</text>
     <switch class='sm' bindchange='SetShadow'></switch>
   </view>
 </view>
@@ -45,7 +45,7 @@
     <button class='cu-btn round bg-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
   </view>
 </view>
-<view class="cu-bar margin-top ">
+<view class="cu-bar margin-top bg-white">
   <view class='action'>
     <text class='icon-title text-blue'></text>镂空按钮
   </view>
@@ -63,11 +63,11 @@
   </view>
 </view>
 <view class='grid col-5 padding-sm'>
-  <view class='margin-tb-sm text-center' wx:for="{{ColorList}}">
+  <view class='margin-tb-sm text-center' wx:for="{{ColorList}}" wx:key>
     <button class='cu-btn round line{{bordersize?bordersize:""}}-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
   </view>
 </view>
-<view class="cu-bar margin-top ">
+<view class="cu-bar margin-top bg-white">
   <view class='action'>
     <text class='icon-title text-blue'></text>块状按钮
   </view>
@@ -76,7 +76,7 @@
   <button class='cu-btn bg-grey lg'>玄灰</button>
   <button class='cu-btn bg-red margin-tb-sm lg'>嫣红</button>
 </view>
-<view class="cu-bar margin-top ">
+<view class="cu-bar margin-top bg-white">
   <view class='action'>
     <text class='icon-title text-blue'></text>无效状态
   </view>
@@ -85,7 +85,7 @@
   <button class='cu-btn block bg-blue margin-tb-sm lg' disabled type=''>无效状态</button>
   <button class='cu-btn block line-blue margin-tb-sm lg' disabled>无效状态</button>
 </view>
-<view class="cu-bar margin-top ">
+<view class="cu-bar margin-top bg-white">
   <view class='action'>
     <text class='icon-title text-blue'></text>按钮加图标
   </view>

demo/pages/basics/button/button.wxss

@@ -1 +0,0 @@
-  

demo/pages/basics/button/design.wxml

@@ -1,5 +1,5 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 按钮 / 设计
     </navigator>
@@ -9,7 +9,7 @@
   <view class="box bg-white text-center radius {{block?'flex-direction':''}}">
     <button class='cu-btn {{border?"line":"bg"}}{{bordersize?bordersize:""}}-{{color}} {{round?"round":""}} {{size}} {{shadow?"shadow":""}} {{block?"block":""}}'>我是一个按钮</button>
   </view>
-  <view class='padding text-center'> class="<text wx:if="{{color}}">{{border?"line":"bg"}}{{bordersize?bordersize:""}}-{{color}} {{round?"round":""}} {{size}} {{shadow?"shadow":""}} {{block?"block":""}}</text>" </view>
+  <view class='padding text-center'> class="cu-btn<text wx:if="{{color}}"> {{border?"line":"bg"}}{{bordersize?bordersize:""}}-{{color}} {{round?"round":""}} {{size}} {{shadow?"shadow":""}} {{block?"block":""}}</text>" </view>
 </view>
 
 <view class="cu-form-group margin-top" bindtap="showModal" data-target="ColorModal">

demo/pages/basics/home/home.js

@@ -1,33 +1,106 @@
-Page({
+Component({
   data: {
-    elements: [
+    elements: [{
-      { title: '布局', name: 'layout', color: 'cyan', icon: 'newsfill' },
+        title: '布局',
-      { title: '背景', name: 'background', color: 'blue', icon: 'colorlens' },
+        name: 'layout',
-      { title: '文本', name: 'text', color: 'purple', icon: 'font' },
+        color: 'cyan',
-      { title: '图标 ', name: 'icon', color: 'mauve', icon: 'icon' },
+        icon: 'newsfill'
-      { title: '按钮', name: 'button', color: 'pink', icon: 'btn' },
+      },
-      { title: '标签', name: 'tag', color: 'brown', icon: 'tagfill' },
+      {
-      { title: '头像', name: 'avatar', color: 'red', icon: 'myfill' },
+        title: '背景',
-      { title: '进度条', name: 'progress', color: 'orange', icon: 'icloading' },
+        name: 'background',
-      { title: '边框阴影', name: 'shadow', color: 'olive', icon: 'copy' },
+        color: 'blue',
-      { title: '加载', name: 'loading', color: 'green', icon: 'loading2' },
+        icon: 'colorlens'
+      },
+      {
+        title: '文本',
+        name: 'text',
+        color: 'purple',
+        icon: 'font'
+      },
+      {
+        title: '图标 ',
+        name: 'icon',
+        color: 'mauve',
+        icon: 'icon'
+      },
+      {
+        title: '按钮',
+        name: 'button',
+        color: 'pink',
+        icon: 'btn'
+      },
+      {
+        title: '标签',
+        name: 'tag',
+        color: 'brown',
+        icon: 'tagfill'
+      },
+      {
+        title: '头像',
+        name: 'avatar',
+        color: 'red',
+        icon: 'myfill'
+      },
+      {
+        title: '进度条',
+        name: 'progress',
+        color: 'orange',
+        icon: 'icloading'
+      },
+      {
+        title: '边框阴影',
+        name: 'shadow',
+        color: 'olive',
+        icon: 'copy'
+      },
+      {
+        title: '加载',
+        name: 'loading',
+        color: 'green',
+        icon: 'loading2'
+      },
     ],
   },
-  showModal(e) {
+  methods: {
-    this.setData({
+    onLoad() {
-      modalName: e.currentTarget.dataset.target
+      let that = this;
-    })
+      // 获取用户信息
+      wx.getSetting({
+        success: res => {
+          if (!res.authSetting['scope.userInfo']) {
+            wx.redirectTo({
+              url: '/pages/auth/auth'
+            })
+          }
+        }
+      })
+    },
+    showModal(e) {
+      this.setData({
+        modalName: e.currentTarget.dataset.target
+      })
+    },
+    hideModal(e) {
+      this.setData({
+        modalName: null
+      })
+    },
+    onShareAppMessage() {
+      return {
+        title: 'ColorUI-高颜值的小程序UI组件库',
+        imageUrl: 'https://image.weilanwl.com/color2.0/share2215.jpg',
+        path: '/pages/basics/home/home'
+      }
+    },
   },
-  hideModal(e) {
+  pageLifetimes: {
-    this.setData({
+    show() {
-      modalName: null
+      if (typeof this.getTabBar === 'function' && this.getTabBar()) {
-    })
+        this.getTabBar().setData({
-  },
+          selected: 0
-  onShareAppMessage(){
+        })
-    return {
+      }
-      title: 'ColorUI-高颜值的小程序UI组件库',
+    }
-      imageUrl:'https://image.weilanwl.com/color2.0/share2215.jpg',
-      path: '/pages/basics/home/home'
-    }    
   }
-})
+})

demo/pages/basics/home/home.wxss

@@ -1,3 +1,3 @@
-.weui-tabbar{
+page{
-  left: 0px !important;
+  padding-bottom: 100rpx;
 }

demo/pages/basics/icon/icon.wxml

@@ -1,11 +1,11 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 图标
     </navigator>
   </view>
 </view>
-<view class="cu-bar search fixed" style="top:{{CustomBar}}px">
+<view class="cu-bar bg-white search fixed" style="top:{{CustomBar}}px">
   <view class='search-form round'>
     <text class="icon-search"></text>
     <input type="text" placeholder="搜索icon" confirm-type="search" bindinput='searchIcon'></input>

demo/pages/basics/image/image.js

@@ -1,66 +0,0 @@
-// pages/basics/image/image.js
-Page({
-
-  /**
-   * 页面的初始数据
-   */
-  data: {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad: function (options) {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
-  }
-})

demo/pages/basics/image/image.json

@@ -1,3 +0,0 @@
-{
-  "usingComponents": {}
-}

demo/pages/basics/image/image.wxml

@@ -1,2 +0,0 @@
-<!--pages/basics/image/image.wxml-->
-<text>pages/basics/image/image.wxml</text>

demo/pages/basics/image/image.wxss

@@ -1 +0,0 @@
-/* pages/basics/image/image.wxss */

demo/pages/basics/layout/layout.wxml

@@ -1,5 +1,5 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 布局
     </navigator>
@@ -11,7 +11,7 @@
   </view>
 </scroll-view>
 <block wx:if="{{TabCur==0}}">
-  <view class="cu-bar solid-bottom margin-top">
+  <view class="cu-bar bg-white solid-bottom margin-top">
     <view class='action'>
       <text class='icon-title text-blue'></text>固定尺寸
     </view>
@@ -27,7 +27,7 @@
       <view class='basis-xl bg-grey margin-xs padding-sm radius'>xl(80%)</view>
     </view>
   </view>
-  <view class="cu-bar margin-top solid-bottom">
+  <view class="cu-bar bg-white margin-top solid-bottom">
     <view class='action'>
       <text class='icon-title text-blue'></text>比例布局
     </view>
@@ -47,7 +47,7 @@
       <view class='flex-treble bg-grey padding-sm margin-xs radius'>3</view>
     </view>
   </view>
-  <view class="cu-bar margin-top solid-bottom">
+  <view class="cu-bar bg-white margin-top solid-bottom">
     <view class='action'>
       <text class='icon-title text-blue'></text>水平对齐(justify)
     </view>
@@ -74,7 +74,7 @@
       <view class='bg-grey padding-sm margin-xs radius'>around</view>
     </view>
   </view>
-  <view class="cu-bar margin-top solid-bottom">
+  <view class="cu-bar bg-white margin-top solid-bottom">
     <view class='action'>
       <text class='icon-title text-blue'></text>垂直对齐(align)
     </view>
@@ -95,7 +95,7 @@
   </view>
 </block>
 <block wx:if="{{TabCur==1}}">
-  <view class="cu-bar margin-top solid-bottom">
+  <view class="cu-bar bg-white margin-top solid-bottom">
     <view class='action'>
       <text class='icon-title text-blue'></text>等分列
     </view>
@@ -106,7 +106,7 @@
       <view class="{{index%2==0?'bg-cyan':'bg-blue'}} padding" wx:for="{{(index+1)*2}}" wx:key>{{index+1}}</view>
     </view>
   </view>
-  <view class="cu-bar margin-top solid-bottom">
+  <view class="cu-bar bg-white margin-top solid-bottom">
     <view class='action'>
       <text class='icon-title text-blue'></text>等高
     </view>
@@ -119,7 +119,7 @@
   </view>
 </block>
 <block wx:if="{{TabCur==2}}">
-  <view class="cu-bar margin-top solid-bottom">
+  <view class="cu-bar bg-white margin-top solid-bottom">
     <view class='action'>
       <text class='icon-title text-blue'></text>浮动
     </view>
@@ -132,7 +132,7 @@
   </view>
 </block>
 <block wx:if="{{TabCur==3}}">
-  <view class="cu-bar margin-top solid-bottom">
+  <view class="cu-bar bg-white margin-top solid-bottom">
     <view class='action'>
       <text class='icon-title text-blue'></text>内外边距
     </view>

demo/pages/basics/loading/loading.wxml

@@ -1,5 +1,5 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 加载
     </navigator>
@@ -8,13 +8,13 @@
     </view>
   </view>
 </view>
-<view class="cu-bar">
+<view class="cu-bar bg-white">
   <view class='action'>
     <text class='icon-title text-blue'></text>背景
   </view>
 </view>
 <view class="cu-load bg-blue {{!isLoad?'loading':'over'}}"></view>
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>加载状态
   </view>
@@ -23,14 +23,14 @@
   </view>
 </view>
 <view class="cu-load bg-grey {{!isLoad?'loading':'over'}}"></view>
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>加载错误
   </view>
 </view>
 <view class="cu-load bg-red erro"></view>
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>弹框加载
   </view>
@@ -45,7 +45,7 @@
     <image src='/images/logo.png' class='png' mode='aspectFit'></image>
     <view class='gray-text'>加载中...</view>
 </view>
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>进度条加载
   </view>

demo/pages/basics/progress/progress.wxml

@@ -1,11 +1,11 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 进度条
     </navigator>
   </view>
 </view>
-<view class="cu-bar solid-bottom">
+<view class="cu-bar bg-white solid-bottom">
   <view class='action'>
     <text class='icon-title text-blue'></text>进度条形状
   </view>
@@ -21,7 +21,7 @@
     <view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
   </view>
 </view>
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>进度条尺寸
   </view>
@@ -38,7 +38,7 @@
   </view>
 </view>
 
-<view class="cu-bar solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
+<view class="cu-bar bg-white solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
   <view class='action'>
     <text class='icon-title text-blue'></text>进度条颜色
   </view>
@@ -53,7 +53,7 @@
 </view>
 
 
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>进度条条纹
   </view>
@@ -67,7 +67,7 @@
     <view class='bg-black' style="width:{{loading?'40%':''}};"></view>
   </view>
 </view>
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>进度条比例
   </view>
@@ -79,7 +79,7 @@
     <view class='bg-cyan' style="width:{{loading?'25%':''}};">25%</view>
   </view>
 </view>
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>进度条布局
   </view>

demo/pages/basics/shadow/shadow.wxml

@@ -1,11 +1,11 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 边框阴影
     </navigator>
   </view>
 </view>
-<view class="cu-bar solid-bottom">
+<view class="cu-bar bg-white solid-bottom">
   <view class='action'>
     <text class='icon-title text-blue'></text>边框
   </view>  
@@ -20,7 +20,7 @@
   <view class='padding solid{{size?"s":""}}-bottom margin-top'>下</view>
   <view class='padding solid{{size?"s":""}}-left margin-top'>左</view>
 </view>
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>阴影
   </view>

demo/pages/basics/tag/tag.wxml

@@ -1,32 +1,32 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 标签
     </navigator>
   </view>
 </view>
 
-<view class="cu-bar">
+<view class="cu-bar bg-white solid-bottom">
   <view class='action'>
     <text class='icon-title text-blue'></text>标签形状
   </view>
 </view>
-<view class="padding">
+<view class="padding bg-white solid-bottom">
   <view class='cu-tag'>默认</view>
   <view class='cu-tag round'>椭圆</view>
   <view class='cu-tag radius'>圆角</view>
 </view>
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>标签尺寸
   </view>
 </view>
-<view class="padding">
+<view class="padding bg-white">
   <view class='cu-tag radius sm'>小尺寸</view>
   <view class='cu-tag radius'>普通尺寸</view>
 </view>
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>标签颜色
   </view>
@@ -39,7 +39,7 @@
     <view class='cu-tag bg-{{item.name}} light'>{{item.title}}</view>
   </view>
 </view>
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>镂空标签
   </view>
@@ -49,7 +49,7 @@
     <view class='cu-tag line-{{item.name}}'>{{item.title}}</view>
   </view>
 </view>
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>胶囊样式
   </view>
@@ -96,7 +96,7 @@
     </view>
   </view>
 </view>
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>数字标签
   </view>

demo/pages/basics/text/text.wxml

@@ -1,5 +1,5 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 文本
     </navigator>
@@ -8,7 +8,7 @@
     </view>
   </view>
 </view>
-<view class="cu-bar solid-bottom">
+<view class="cu-bar bg-white solid-bottom">
   <view class='action'>
     <text class='icon-title text-blue'></text>文字大小
   </view>
@@ -85,7 +85,7 @@
     </view>
   </view>
 </view>
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>文字颜色
   </view>
@@ -97,7 +97,7 @@
     </view>
   </view>
 </view>
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>文字截断
   </view>
@@ -105,7 +105,7 @@
 <view class='padding bg-white'>
   <view class='text-cut padding bg-grey radius' style='width:220px'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
 </view>
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>文字对齐
   </view>
@@ -115,7 +115,7 @@
   <view class='text-center padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
   <view class='text-right padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
 </view>
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>特殊文字
   </view>

demo/pages/component/bar/bar.wxml

@@ -1,5 +1,5 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text>
       <text>操作条</text>
@@ -7,239 +7,418 @@
   </view>
 </view>
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
-  <view class='action'>
-    <text class='icon-back text-gray'></text>
-    <text>返回</text>
-  </view>
-</view>
-
-<view class="cu-bar margin-top">
   <view class='action'>
     <text class='icon-title text-green'></text>
-    <text>案例</text>
+    <text>底部操作条</text>
   </view>
+</view>
+<view class='box'>
+  <view class="cu-bar tabbar bg-white">
+    <view class="action">
+      <view class='icon-cu-image'>
+        <image src='/images/tabbar/basics_cur.png'></image>
+      </view>
+      <view class='text-green'>元素</view>
+    </view>
+    <view class="action">
+      <view class='icon-cu-image'>
+        <image src='/images/tabbar/component.png'></image>
+      </view>
+      <view class='text-gray'>组件</view>
+    </view>
+    <view class="action">
+      <view class='icon-cu-image'>
+        <image src='/images/tabbar/plugin.png'></image>
+        <view class='cu-tag badge'>99</view>
+      </view>
+      <view class='text-gray'>扩展</view>
+    </view>
+    <view class="action">
+      <view class='icon-cu-image'>
+        <image src='/images/tabbar/about.png'></image>
+        <view class='cu-tag badge'></view>
+      </view>
+      <view class='text-gray'>关于</view>
+    </view>
+  </view>
+  <view class="cu-bar tabbar margin-bottom-xl bg-black">
+    <view class="action text-orange">
+      <view class='icon-homefill'></view> 首页
+    </view>
+    <view class="action text-gray">
+      <view class='icon-similar'></view> 分类
+    </view>
+    <view class="action text-gray">
+      <view class='icon-recharge'></view>
+      积分
+    </view>
+    <view class="action text-gray">
+      <view class='icon-cart'>
+        <view class='cu-tag badge'>99</view>
+      </view>
+      购物车
+    </view>
+    <view class="action text-gray">
+      <view class='icon-my'>
+        <view class='cu-tag badge'></view>
+      </view>
+      我的
+    </view>
+  </view>
+  <view class="cu-bar tabbar margin-bottom-xl bg-white">
+    <view class="action text-green">
+      <view class='icon-homefill'></view> 首页
+    </view>
+    <view class="action text-gray">
+      <view class='icon-similar'></view> 分类
+    </view>
+    <view class="action text-gray add-action">
+      <button class='cu-btn icon-add bg-green shadow'></button>
+      发布
+    </view>
+    <view class="action text-gray">
+      <view class='icon-cart'>
+        <view class='cu-tag badge'>99</view>
+      </view>
+      购物车
+    </view>
+    <view class="action text-gray">
+      <view class='icon-my'>
+        <view class='cu-tag badge'></view>
+      </view>
+      我的
+    </view>
+  </view>
+  <view class="cu-bar tabbar bg-black">
+    <view class="action text-green">
+      <view class='icon-homefill'></view> 首页
+    </view>
+    <view class="action text-gray">
+      <view class='icon-similar'></view> 分类
+    </view>
+    <view class="action text-gray add-action">
+      <button class='cu-btn icon-add bg-green shadow'></button>
+      发布
+    </view>
+    <view class="action text-gray">
+      <view class='icon-cart'>
+        <view class='cu-tag badge'>99</view>
+      </view>
+      购物车
+    </view>
+    <view class="action text-gray">
+      <view class='icon-my'>
+        <view class='cu-tag badge'></view>
+      </view>
+      我的
+    </view>
+  </view>
+
+  <view class="cu-bar bg-white tabbar border shop">
+    <button class="action" open-type='contact'>
+      <view class='icon-service text-green'>
+        <view class='cu-tag badge'></view>
+      </view>
+      客服
+    </button>
+    <view class="action text-orange">
+      <view class='icon-favorfill'></view> 已收藏
+    </view>
+    <view class="action">
+      <view class='icon-cart'>
+        <view class='cu-tag badge'>99</view>
+      </view>
+      购物车
+    </view>
+    <view class='bg-red submit'>立即订购</view>
+  </view>
+
+  <view class="cu-bar bg-white tabbar border shop">
+    <button class="action" open-type='contact'>
+      <view class='icon-service text-green'>
+        <view class='cu-tag badge'></view>
+      </view>
+      客服
+    </button>
+    <view class="action">
+      <view class='icon-cart'>
+        <view class='cu-tag badge'>99</view>
+      </view>
+      购物车
+    </view>
+    <view class='bg-orange submit'>加入购物车</view>
+    <view class='bg-red submit'>立即订购</view>
+  </view>
+
+  <view class="cu-bar bg-white tabbar border shop">
+    <button class="action" open-type='contact'>
+      <view class='icon-service text-green'>
+        <view class='cu-tag badge'></view>
+      </view>
+      客服
+    </button>
+    <view class="action">
+      <view class=' icon-shop'></view> 店铺
+    </view>
+    <view class="action">
+      <view class='icon-cart'>
+        <view class='cu-tag badge'>99</view>
+      </view>
+      购物车
+    </view>
+    <view class='btn-group'>
+      <button class='cu-btn bg-red round shadow-blur'>立即订购</button>
+    </view>
+  </view>
+  <view class="cu-bar bg-white tabbar border shop">
+    <button class="action" open-type='contact'>
+      <view class='icon-service text-green'>
+        <view class='cu-tag badge'></view>
+      </view> 客服
+    </button>
+    <view class="action">
+      <view class='icon-cart'>
+        <view class='cu-tag badge'>99</view>
+      </view>
+      购物车
+    </view>
+    <view class='btn-group'>
+      <button class='cu-btn bg-orange round shadow-blur'>加入购物车</button>
+      <button class='cu-btn bg-red round shadow-blur'>立即订购</button>
+    </view>
+  </view>
+</view>
+
+<view class="cu-bar bg-white">
   <view class='action'>
-    <button class='cu-btn bg-green shadow-blur sm'>添加
+    <text class='icon-title text-green'></text>
-      <text class='icon-add'></text> </button>
+    <text>标题操作条</text>
+  </view>
+</view>
+<view class='box' wx:if="{{false}}">
+  <view class="cu-bar justify-center bg-white">
+    <view class='action border-title'>
+      <text class='text-xl text-bold'>关于我们</text>
+      <text class='bg-grey' style='width:2rem'></text>
+      <!-- 底部样式 last-child选择器-->
+    </view>
+  </view>
+  <view class="cu-bar justify-center bg-white">
+    <view class='action border-title'>
+      <text class='text-xl text-bold text-blue'>关于我们</text>
+      <text class='bg-gradual-blue' style='width:3rem'></text>
+    </view>
+  </view>
+  <view class="cu-bar justify-center bg-white">
+    <view class='action sub-title'>
+      <text class='text-xl text-bold text-green'>关于我们</text>
+      <text class='bg-green' style='width:2rem'></text>
+      <!-- last-child选择器-->
+    </view>
+  </view>
+  <view class="cu-bar justify-center bg-white">
+    <view class='action sub-title'>
+      <text class='text-xl text-bold text-blue'>关于我们</text>
+      <text class='text-ABC text-blue'>about</text>
+      <!-- last-child选择器-->
+    </view>
+  </view>
+</view>
+<view class='box'>
+  <view class="cu-bar bg-white">
+    <view class='action border-title'>
+      <text class='text-xl text-bold'>关于我们</text>
+      <text class='bg-grey' style='width:2rem'></text>
+      <!-- 底部样式 last-child选择器-->
+    </view>
+  </view>
+  <view class="cu-bar bg-white">
+    <view class='action border-title'>
+      <text class='text-xl text-bold text-blue'>关于我们</text>
+      <text class='bg-gradual-blue' style='width:3rem'></text>
+    </view>
+  </view>
+  <view class="cu-bar bg-white">
+    <view class='action sub-title'>
+      <text class='text-xl text-bold text-green'>关于我们</text>
+      <text class='bg-green'></text>
+      <!-- last-child选择器-->
+    </view>
+  </view>
+  <view class="cu-bar bg-white">
+    <view class='action sub-title'>
+      <text class='text-xl text-bold text-blue'>关于我们</text>
+      <text class='text-ABC text-blue'>about</text>
+      <!-- last-child选择器-->
+    </view>
+  </view>
+  <view class="cu-bar bg-white">
+    <view class='action title-style-3'>
+      <text class='text-xl text-bold'>关于我们</text>
+      <text class='text-Abc text-gray self-end margin-left-sm'>about</text>
+    </view>
+  </view>
+  <view class="cu-bar bg-white">
+    <view class='action'>
+      <text class='icon-title text-green'></text>
+      <text class='text-xl text-bold'>关于我们</text>
+    </view>
+  </view>
+  <view class="cu-bar bg-white">
+    <view class='action'>
+      <text class='icon-titles text-green'></text>
+      <text class='text-xl text-bold'>关于我们</text>
+    </view>
   </view>
 </view>
 
-<view class="cu-bar margin-top justify-end">
+<view class="cu-bar bg-white">
   <view class='action'>
-    <text class='icon-close text-red'></text>
+    <text class='icon-title text-green'></text>
+    <text>顶部操作条</text>
+  </view>
+</view>
+<view class='box'>
+  <view class="cu-bar bg-white">
+    <view class='action'>
+      <text class='icon-back text-gray'></text> 返回
+    </view>
+    <view class='content text-bold'>
+      操作条
+    </view>
+  </view>
+  <view class="cu-bar bg-white">
+    <view class='action'>
+      <text class='icon-homefill text-gray'></text> 首页
+    </view>
+    <view class='content text-bold'>
+      鲜亮的高饱和色彩，专注视觉的小程序组件库
+    </view>
+    <view class='action'>
+      <text class='icon-cardboardfill text-grey'></text>
+      <text class='icon-recordfill text-red'></text>
+    </view>
+  </view>
+  <view class="cu-bar bg-blue">
+    <view class='action'>
+      <text class='icon-close'></text> 关闭
+    </view>
+    <view class='content text-bold'>
+      海蓝
+    </view>
+  </view>
+  <view class="cu-bar bg-black search">
+    <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
+    <view class='content'>
+      ColorUI
+    </view>
+    <view class='action'>
+      <text class="icon-more"></text>
+    </view>
   </view>
 </view>
 
-<view class="cu-bar margin-top">
+
+<view class="cu-bar bg-white">
   <view class='action'>
-    <text class='icon-back text-gray'></text> 返回
+    <text class='icon-title text-green'></text>
+    <text>搜索操作条</text>
   </view>
-  <view class='content'>
+</view>
-    操作条
+<view class='box'>
+  <view class="cu-bar search bg-white">
+    <view class='search-form round'>
+      <text class="icon-search"></text>
+      <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
+    </view>
+    <view class='action'>
+      <button class='cu-btn bg-green shadow-blur round'>搜索</button>
+    </view>
+  </view>
+  <view class="cu-bar search bg-white">
+    <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
+    <view class='search-form round'>
+      <text class="icon-search"></text>
+      <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
+    </view>
+    <view class='action'>
+      <text>广州</text>
+      <text class="icon-triangledownfill"></text>
+    </view>
+  </view>
+  <view class="cu-bar bg-red search">
+    <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
+    <view class='search-form radius'>
+      <text class="icon-search"></text>
+      <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
+    </view>
+    <view class='action'>
+      <text>广州</text>
+      <text class="icon-triangledownfill"></text>
+    </view>
+  </view>
+  <view class="cu-bar bg-cyan search">
+    <view class='search-form radius'>
+      <text class="icon-search"></text>
+      <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
+    </view>
+    <view class='action'>
+      <text class='icon-close'></text>
+      <text>取消</text>
+    </view>
   </view>
 </view>
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white">
   <view class='action'>
-    <text class='icon-homefill text-gray'></text> 首页
+    <text class='icon-title text-green'></text>
+    <text>操作条按钮组</text>
   </view>
-  <view class='content'>
+</view>
-    鲜亮的高饱和色彩，专注视觉的小程序组件库
+
+<view class='box'>
+  <view class="cu-bar btn-group">
+    <button class='cu-btn bg-green shadow-blur round lg'>保存</button>
   </view>
+  <view class="cu-bar btn-group">
+    <button class='cu-btn bg-green shadow-blur'>保存</button>
+    <button class='cu-btn text-green line-green shadow'>上传</button>
+  </view>
+  <view class="cu-bar btn-group">
+    <button class='cu-btn bg-green shadow-blur round'>保存</button>
+    <button class='cu-btn bg-blue shadow-blur round'>提交</button>
+  </view>
+</view>
+
+
+<view class="cu-bar bg-white">
   <view class='action'>
-    <text class='icon-cardboardfill text-grey'></text>
+    <text class='icon-title text-green'></text>
-    <text class='icon-recordfill text-red'></text>
+    <text>输入操作条</text>
   </view>
 </view>
+<view class='box'>
+  <view class="cu-bar input">
+    <view class='action'>
+      <text class='icon-sound text-grey'></text>
+    </view>
+    <input class='solid-bottom' focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
+    <view class='action'>
+      <text class='icon-emojifill text-grey'></text>
+    </view>
+    <button class='cu-btn bg-green shadow-blur'>发送</button>
+  </view>
 
-<view class="cu-bar margin-top bg-blue">
+  <view class="cu-bar input">
-  <view class='action'>
+    <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
-    <text class='icon-close'></text> 关闭
+    <view class='action'>
+      <text class='icon-roundaddfill text-grey'></text>
+    </view>
+    <input class='solid-bottom' maxlength="300" cursor-spacing="10"></input>
+    <view class='action'>
+      <text class='icon-emojifill text-grey'></text>
+    </view>
+    <button class='cu-btn bg-green shadow-blur'>发送</button>
   </view>
-  <view class='content'>
-    海蓝
-  </view>
-</view>
-<view class="cu-bar margin-top bg-orange">
-  <view class='action'>
-    <text class='icon-back'></text> 返回
-  </view>
-  <view class='content'>
-    操作条
-  </view>
-</view>
-
-<view class="cu-bar margin-top bg-black search">
-  <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
-  <view class='content'>
-    ColorUI
-  </view>
-  <view class='action'>
-    <text class="icon-more"></text>
-  </view>
-</view>
-
-<view class="cu-bar margin-top bg-red search">
-  <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
-  <view class='search-form radius'>
-    <text class="icon-search"></text>
-    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
-  </view>
-  <view class='action'>
-    <text>广州</text>
-    <text class="icon-triangledownfill"></text>
-  </view>
-</view>
-
-<view class="cu-bar margin-top search">
-  <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
-  <view class='search-form round'>
-    <text class="icon-search"></text>
-    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
-  </view>
-  <view class='action'>
-    <text>广州</text>
-    <text class="icon-triangledownfill"></text>
-  </view>
-</view>
-
-<view class="cu-bar margin-top bg-cyan search">
-  <view class='search-form radius'>
-    <text class="icon-search"></text>
-    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
-  </view>
-  <view class='action'>
-    <text class='icon-close'></text>
-    <text>取消</text>
-  </view>
-</view>
-
-<view class="cu-bar margin-top search">
-  <view class='search-form round'>
-    <text class="icon-search"></text>
-    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
-  </view>
-  <view class='action'>
-    <button class='cu-btn bg-green shadow-blur round'>搜索</button>
-  </view>
-</view>
-
-<view class="cu-bar margin-top btn-group">
-  <button class='cu-btn bg-green shadow-blur round'>保存</button>
-</view>
-
-<view class="cu-bar margin-top btn-group">
-  <button class='cu-btn bg-green shadow-blur round lg'>保存</button>
-</view>
-
-<view class="cu-bar margin-top btn-group">
-  <button class='cu-btn bg-green shadow-blur'>保存</button>
-  <button class='cu-btn text-green line-green shadow'>上传</button>
-</view>
-
-<view class="cu-bar margin-top btn-group">
-  <button class='cu-btn bg-green shadow-blur round'>保存</button>
-  <button class='cu-btn bg-blue shadow-blur round'>提交</button>
-</view>
-
-<view class="cu-bar margin-top shop">
-  <button class="cu-btn action"  open-type='contact'>
-    <text class='icon-service text-green'>
-      <view class='cu-tag badge'></view>
-    </text>
-    客服
-  </button>
-  <view class="action text-orange">
-    <text class='icon-favorfill'></text> 已收藏
-  </view>
-  <view class="action">
-    <text class='icon-cart'>
-      <view class='cu-tag badge'>99</view>
-    </text>
-    购物车
-  </view>
-  <view class='bg-red submit'>立即订购</view>
-</view>
-
-<view class="cu-bar margin-top shop">
-  <button class="cu-btn action"  open-type='contact'>
-    <text class='icon-service text-green'>
-      <view class='cu-tag badge'></view>
-    </text>
-    客服
-  </button>
-  <view class="action">
-    <text class='icon-cart'>
-      <view class='cu-tag badge'>99</view>
-    </text>
-    购物车
-  </view>
-  <view class='bg-orange submit'>加入购物车</view>
-  <view class='bg-red submit'>立即订购</view>
-</view>
-
-<view class="cu-bar margin-top shop">
-  <button class="cu-btn action"  open-type='contact'>
-    <text class='icon-service text-green'>
-      <view class='cu-tag badge'></view>
-    </text>
-    客服
-  </button>
-  <view class="action">
-    <text class=' icon-shop'></text> 店铺
-  </view>
-  <view class="action">
-    <text class='icon-cart'>
-      <view class='cu-tag badge'>99</view>
-    </text>
-    购物车
-  </view>
-  <view class='submit'>
-    <button class='cu-btn bg-red round shadow-blur'>立即订购</button>
-  </view>
-</view>
-
-<view class="cu-bar margin-top shop">
-  <button class="cu-btn action"  open-type='contact'>
-    <text class='icon-service text-green'>
-      <view class='cu-tag badge'></view>
-    </text>
-    客服
-  </button>
-  <view class="action">
-    <text class='icon-cart'>
-      <view class='cu-tag badge'>99</view>
-    </text>
-    购物车
-  </view>
-  <view class='submit'>
-    <button class='cu-btn bg-orange round shadow-blur'>加入购物车</button>
-  </view>
-  <view class='submit'>
-    <button class='cu-btn bg-red round shadow-blur'>立即订购</button>
-  </view>
-</view>
-
-<view class="cu-bar margin-top input">
-  <view class='action'>
-    <text class='icon-sound text-grey'></text>
-  </view>
-  <input class='solid-bottom' focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
-  <view class='action'>
-    <text class='icon-emojifill text-grey'></text>
-  </view>
-  <button class='cu-btn bg-green shadow-blur'>发送</button>
-</view>
-
-<view class="cu-bar margin-top input">
-  <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
-  <view class='action'>
-    <text class='icon-roundaddfill text-grey'></text>
-  </view>
-  <input class='solid-bottom' maxlength="300" cursor-spacing="10"></input>
-  <view class='action'>
-    <text class='icon-emojifill text-grey'></text>
-  </view>
-  <button class='cu-btn bg-green shadow-blur'>发送</button>
 </view>

demo/pages/component/bar/bar.wxss

@@ -0,0 +1,7 @@
+.box {  
+  margin: 20rpx; 
+}
+
+.box view.cu-bar {
+  margin-top: 20rpx; 
+}

demo/pages/component/card/card.wxml

@@ -1,11 +1,11 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 卡片
     </navigator>
   </view>
 </view>
-<view class="cu-bar solid-bottom">
+<view class="cu-bar bg-white solid-bottom">
   <view class='action'>
     <text class='icon-titles text-orange '></text> 案例类卡片
   </view>
@@ -38,7 +38,7 @@
     </view>
   </view>
 </view>
-<view class="cu-bar solid-bottom {{isCard?'margin-top':''}}">
+<view class="cu-bar bg-white solid-bottom {{isCard?'margin-top':''}}">
   <view class='action'>
     <text class='icon-titles text-orange '></text> 动态类卡片
   </view>
@@ -98,7 +98,7 @@
   </view>
 </view>
 
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-titles text-orange '></text> 文章类卡片
   </view>

demo/pages/component/chat/chat.wxml

@@ -1,5 +1,5 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text>
       聊天
@@ -10,7 +10,7 @@
 <view class="cu-chat">
   <view class="cu-item self">
     <view class="main">
-      <view class='content bg-green shadow-blur'>
+      <view class='content bg-green shadow'>
         <text>喵喵喵！喵喵喵！喵喵喵！喵喵！喵喵！！喵！喵喵喵！</text>
       </view>
     </view>
@@ -87,5 +87,5 @@
   <view class='action'>
     <text class='icon-emojifill text-grey'></text>
   </view>
-  <button class='cu-btn bg-green shadow-blur'>发送</button>
+  <button class='cu-btn bg-green shadow'>发送</button>
 </view>

demo/pages/component/form/form.wxml

@@ -1,5 +1,5 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 表单
     </navigator>

demo/pages/component/home/home.js

@@ -1,4 +1,4 @@
-Page({
+Component({
   data: {
     elements: [
       { title: '操作条', name: 'bar', color: 'purple', icon: 'vipcard' },
@@ -15,4 +15,14 @@ Page({
   },
   onLoad: function () {
   },
+  pageLifetimes: {
+    show() {
+      if (typeof this.getTabBar === 'function' &&
+        this.getTabBar()) {
+        this.getTabBar().setData({
+          selected: 1
+        })
+      }
+    }
+  }
 })

demo/pages/component/home/home.json

@@ -1 +1,3 @@
-{}
+{
+  "usingComponents": {}
+}

demo/pages/component/home/home.wxss

@@ -0,0 +1,3 @@
+page{
+  padding-bottom: 100rpx;
+}

demo/pages/component/list/list.wxml

@@ -1,11 +1,11 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 列表
     </navigator>
   </view>
 </view>
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 宫格列表
   </view>
@@ -49,7 +49,7 @@
 </view>
 
 
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 菜单列表
   </view>
@@ -170,7 +170,7 @@
   </view>
 </view>
 
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 消息列表
   </view>
@@ -248,7 +248,7 @@
 </view>
 
 
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 列表左滑
   </view>

demo/pages/component/modal/modal.wxml

@@ -1,12 +1,12 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 模态窗口
     </navigator>
   </view>
 </view>
 
-<view class="cu-bar">
+<view class="cu-bar bg-white">
   <view class='action'>
     <text class='icon-title text-orange '></text> 模态窗口
   </view>
@@ -16,7 +16,7 @@
 </view>
 <view class="cu-modal {{modalName=='Modal'?'show':''}}">
   <view class="cu-dialog">
-    <view class="cu-bar justify-end">
+    <view class="cu-bar bg-white justify-end">
       <view class='content'>Modal标题</view>
       <view class='action' bindtap='hideModal'>
         <text class='icon-close text-red'></text>
@@ -28,7 +28,7 @@
   </view>
 </view>
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 底部窗口
   </view>
@@ -38,7 +38,7 @@
 </view>
 <view class="cu-modal bottom-modal {{modalName=='bottomModal'?'show':''}}">
   <view class="cu-dialog">
-    <view class="cu-bar">
+    <view class="cu-bar bg-white">
       <view class='action text-green'>确定</view>
       <view class='action text-blue' bindtap='hideModal'>取消</view>
     </view>
@@ -48,7 +48,7 @@
   </view>
 </view>
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 对话窗口
   </view>
@@ -59,7 +59,7 @@
 </view>
 <view class="cu-modal {{modalName=='DialogModal1'?'show':''}}">
   <view class="cu-dialog">
-    <view class="cu-bar justify-end">
+    <view class="cu-bar bg-white justify-end">
       <view class='content'>Modal标题</view>
       <view class='action' bindtap='hideModal'>
         <text class='icon-close text-red'></text>
@@ -68,7 +68,7 @@
     <view class='padding-xl'>
       Modal 内容。
     </view>
-    <view class="cu-bar justify-end">
+    <view class="cu-bar bg-white justify-end">
       <view class='action'>
         <button class='cu-btn line-green text-green' bindtap='hideModal'>取消</button>
         <button class='cu-btn bg-green margin-left' bindtap='hideModal'>确定</button>
@@ -80,7 +80,7 @@
 
 <view class="cu-modal {{modalName=='DialogModal2'?'show':''}}">
   <view class="cu-dialog">
-    <view class="cu-bar justify-end">
+    <view class="cu-bar bg-white justify-end">
       <view class='content'>Modal标题</view>
       <view class='action' bindtap='hideModal'>
         <text class='icon-close text-red'></text>
@@ -89,7 +89,7 @@
     <view class='padding-xl'>
       Modal 内容。
     </view>
-    <view class="cu-bar">
+    <view class="cu-bar bg-white">
       <view class='action margin-0 flex-sub text-green ' bindtap='hideModal'>
         <text class='icon-moneybag'></text>微信支付</view>
       <view class='action margin-0 flex-sub text-green solid-left' bindtap='hideModal'>取消</view>
@@ -98,7 +98,7 @@
   </view>
 </view>
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 图片窗口
   </view>
@@ -110,20 +110,20 @@
 <view class="cu-modal {{modalName=='Image'?'show':''}}">
   <view class="cu-dialog">
     <view class="bg-img" style="background-image: url('https://albedo-theme.com/wp-content/uploads/2016/08/pexels-photo-26180.jpg');height:200px;">
-      <view class="cu-bar justify-end none-bg text-white">
+      <view class="cu-bar justify-end text-white">
         <view class='action' bindtap='hideModal'>
           <text class='icon-close '></text>
         </view>
       </view>
     </view>
-    <view class="cu-bar">
+    <view class="cu-bar bg-white">
       <view class='action margin-0 flex-sub  solid-left' bindtap='hideModal'>我知道了</view>
     </view>
   </view>
 </view>
 
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 单选窗口
   </view>
@@ -147,7 +147,7 @@
   </view>
 </view>
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 多选窗口
   </view>
@@ -157,7 +157,7 @@
 </view>
 <view class="cu-modal bottom-modal {{modalName=='ChooseModal'?'show':''}}" bindtap='hideModal'>
   <view class="cu-dialog" catchtap>
-    <view class="cu-bar">
+    <view class="cu-bar bg-white">
       <view class='action text-green'>确定</view>
       <view class='action text-blue' bindtap='hideModal'>取消</view>
     </view>
@@ -169,7 +169,7 @@
   </view>
 </view>
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 侧边抽屉
   </view>

demo/pages/component/nav/nav.wxml

@@ -1,5 +1,5 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 导航栏
     </navigator>
@@ -8,7 +8,7 @@
 <view wx:for="{{10}}" wx:key wx:if="{{index==TabCur}}" class='bg-grey padding margin text-center'>
   Tab{{index}}
 </view>
-<view class="cu-bar solid-bottom">
+<view class="cu-bar bg-white solid-bottom">
   <view class='action'>
     <text class='icon-titles text-orange '></text> 默认
   </view>
@@ -19,7 +19,7 @@
   </view>
 </scroll-view>
 
-<view class="cu-bar margin-top solid-bottom">
+<view class="cu-bar bg-white margin-top solid-bottom">
   <view class='action'>
     <text class='icon-title text-orange'></text> 居中
   </view>
@@ -30,7 +30,7 @@
   </view>
 </scroll-view>
 
-<view class="cu-bar margin-top solid-bottom">
+<view class="cu-bar bg-white margin-top solid-bottom">
   <view class='action'>
     <text class='icon-title text-orange'></text> 平分
   </view>
@@ -42,7 +42,7 @@
     </view>
   </view>
 </scroll-view>
-<view class="cu-bar margin-top solid-bottom">
+<view class="cu-bar bg-white margin-top solid-bottom">
   <view class='action'>
     <text class='icon-title text-orange'></text> 背景
   </view>
@@ -52,7 +52,7 @@
     Tab{{index}}
   </view>
 </scroll-view>
-<view class="cu-bar margin-top solid-bottom">
+<view class="cu-bar bg-white margin-top solid-bottom">
   <view class='action'>
     <text class='icon-title text-orange'></text> 图标
   </view>
@@ -69,7 +69,7 @@
   </view>
 </scroll-view>
 
-<view class="cu-bar margin-top solid-bottom">
+<view class="cu-bar bg-white margin-top solid-bottom">
   <view class='action'>
     <text class='icon-title text-orange'></text> 定位
   </view>

demo/pages/component/steps/steps.wxml

@@ -1,11 +1,11 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 步骤条
     </navigator>
   </view>
 </view>
-<view class="cu-bar solid-bottom">
+<view class="cu-bar bg-white solid-bottom">
   <view class='action'>
     <text class='icon-title text-orange'></text> 基本用法
   </view>
@@ -36,7 +36,7 @@
     </view>
   </view>
 </view>
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-orange'></text> 数字完成
   </view>
@@ -51,7 +51,7 @@
     </view>
   </view>
 </view>
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-orange'></text> 多级显示
   </view>

demo/pages/component/swiper/swiper.wxml

@@ -1,11 +1,11 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 轮播图
     </navigator>
   </view>
 </view>
-<view class="cu-bar">
+<view class="cu-bar bg-white">
   <view class='action'>
     <text class='icon-title text-pink'></text> 全屏限高轮播
   </view>
@@ -18,7 +18,7 @@
     <image src="https://image.weilanwl.com/img/4x3-{{index+1}}.jpg" mode='aspectFill'></image>
   </swiper-item>
 </swiper>
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-pink'></text> 卡片式轮播
   </view>
@@ -29,7 +29,7 @@
   </swiper-item>
 </swiper>
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-pink'></text> 堆叠式轮播
   </view>

demo/pages/component/timeline/timeline.wxml

@@ -1,5 +1,5 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text>
       时间轴
@@ -65,7 +65,7 @@
           </view>
           <view class='action'>
             <view class='text-grey text-xs'>22:20</view>
-            <view class="cu-tag round grey sm">5</view>
+            <view class="cu-tag round bg-grey sm">5</view>
           </view>
         </view>
         <view class="cu-item">

demo/pages/plugin/animation/animation.js

@@ -3,6 +3,62 @@ Page({
   data: {
     StatusBar: app.globalData.StatusBar,
     CustomBar: app.globalData.CustomBar,
+    list: [{
+        name: 'fade',
+        color: 'red'
+      },
+      {
+        name: 'scale-up',
+        color: 'orange'
+      },
+      {
+        name: 'scale-down',
+        color: 'olive'
+      },
+      {
+        name: 'slide-top',
+        color: 'green'
+      }, {
+        name: 'slide-bottom',
+        color: 'cyan'
+      },
+      {
+        name: 'slide-left',
+        color: 'blue'
+      },
+      {
+        name: 'slide-right',
+        color: 'purple'
+      },
+      {
+        name: 'shake',
+        color: 'mauve'
+      }
+    ],
+    toggleDelay: false
   },
- 
+  toggle(e) {
-});
+    console.log(e);
+    var anmiaton = e.currentTarget.dataset.class;
+    var that = this;
+    that.setData({
+      animation: anmiaton
+    })
+    setTimeout(function() {
+      that.setData({
+        animation: ''
+      })
+    }, 1000)
+  },
+  toggleDelay() {
+    var that = this;
+    that.setData({
+      toggleDelay: true
+    })
+    setTimeout(function() {
+      that.setData({
+        toggleDelay: false
+      })
+    }, 1000)
+  }
+})

demo/pages/plugin/animation/animation.wxml

@@ -5,7 +5,47 @@
     </navigator>
   </view>
 </view>
-<view class="margin radius gradual-green shadow-blur">
+<view class="cu-bar bg-white">
+  <view class='action'>
+    <text class='icon-title text-orange'></text> 默认效果
+  </view>
+</view>
+<view class="padding-sm">
+  <view class='flex flex-wrap justify-around'>
+    <button class='cu-btn bg-{{item.color}} animation-{{animation==item.name? item.name :""}} margin-sm basis-sm shadow' bindtap='toggle' data-class='{{item.name}}' wx:for="{{list}}">{{item.name}}</button>
+  </view>
+</view>
+<view class="cu-bar bg-white">
+  <view class='action'>
+    <text class='icon-title text-orange'></text> 反向动画
+  </view>
+</view>
+
+<view class="padding-sm">
+  <view class='flex flex-wrap justify-around'>
+    <button class='cu-btn bg-{{item.color}} animation-{{animation==item.name+"s"? item.name :""}} animation-reverse margin-sm basis-sm shadow' bindtap='toggle' data-class='{{item.name+"s"}}' wx:for="{{list}}">{{item.name}}</button>
+  </view>
+</view>
+<view class="cu-bar bg-white">
+  <view class='action'>
+    <text class='icon-title text-orange'></text> 延迟执行
+  </view>
+  <view class='action'>
+    <button class='cu-btn bg-cyan shadow' bindtap='toggleDelay'>开始执行</button>
+  </view>
+</view>
+
+<view class="padding-sm">
+  <view class='flex flex-wrap justify-around'>
+    <button class=' bg-{{item.color}} cu-btn {{toggleDelay?"animation-slide-bottom":""}} margin-sm basis-sm shadow' style='animation-delay: {{(index+1)*0.1}}s;' wx:for="{{list}}">0.{{index+1}}s</button>
+  </view>
+</view>
+<view class="cu-bar bg-white">
+  <view class='action'>
+    <text class='icon-title text-orange'></text> Gif动画
+  </view>
+</view>
+<view class="margin radius bg-gradual-green shadow-blur">
   <image src='https://image.weilanwl.com/gif/wave.gif' mode='scaleToFill' class='gif-black response' style='height:100rpx'></image>
 </view>
 <view class="margin flex">
@@ -17,7 +57,7 @@
   </view>
 </view>
 <view class="margin flex">
-  <view class='gradual-blue flex-sub margin-right radius shadow-lg'>
+  <view class='bg-gradual-blue flex-sub margin-right radius shadow-lg'>
     <image src='https://image.weilanwl.com/gif/rhomb-black.gif' mode='aspectFit' class='gif-black response' style='height:240rpx'></image>
   </view>
   <view class='bg-white flex-sub radius shadow-lg'>

demo/pages/plugin/animation/animation.wxss

@@ -9,3 +9,174 @@ image[class*="gif-"]{
 .gif-white{  
   mix-blend-mode: multiply; 
 }
+
+
+[class*=animation-] {
+    animation-duration: .5s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: both
+}
+
+.animation-fade {
+    animation-name: fade;
+    animation-duration: .8s;
+    animation-timing-function: linear
+}
+
+.animation-scale-up {
+    animation-name: scale-up
+}
+
+.animation-scale-down {
+    animation-name: scale-down
+}
+
+.animation-slide-top {
+    animation-name: slide-top
+}
+
+.animation-slide-bottom {
+    animation-name: slide-bottom
+}
+
+.animation-slide-left {
+    animation-name: slide-left
+}
+
+.animation-slide-right {
+    animation-name: slide-right
+}
+
+.animation-shake {
+    animation-name: shake
+}
+
+.animation-reverse {
+    animation-direction: reverse
+}
+
+@keyframes fade {
+    0% {
+        opacity: 0
+    }
+
+    100% {
+        opacity: 1
+    }
+}
+
+@keyframes scale-up {
+    0% {
+        opacity: 0;
+        transform: scale(.2)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes scale-down {
+    0% {
+        opacity: 0;
+        transform: scale(1.8)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes slide-top {
+    0% {
+        opacity: 0;
+        transform: translateY(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes slide-bottom {
+    0% {
+        opacity: 0;
+        transform: translateY(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes shake {
+
+    0%,
+    100% {
+        transform: translateX(0)
+    }
+
+    10% {
+        transform: translateX(-9px)
+    }
+
+    20% {
+        transform: translateX(8px)
+    }
+
+    30% {
+        transform: translateX(-7px)
+    }
+
+    40% {
+        transform: translateX(6px)
+    }
+
+    50% {
+        transform: translateX(-5px)
+    }
+
+    60% {
+        transform: translateX(4px)
+    }
+
+    70% {
+        transform: translateX(-3px)
+    }
+
+    80% {
+        transform: translateX(2px)
+    }
+
+    90% {
+        transform: translateX(-1px)
+    }
+}
+
+@keyframes slide-left {
+    0% {
+        opacity: 0;
+        transform: translateX(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}
+
+@keyframes slide-right {
+    0% {
+        opacity: 0;
+        transform: translateX(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}

demo/pages/plugin/gradual/gradual.wxml

@@ -1,5 +1,5 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-orange" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-orange" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 渐变
     </navigator>

demo/pages/plugin/home/home.js

@@ -1,5 +1,5 @@
 const app = getApp();
-Page({
+Component({
   data: {
     StatusBar: app.globalData.StatusBar,
     CustomBar: app.globalData.CustomBar,
@@ -15,10 +15,21 @@ Page({
       }
     ]
   },
-  toChild(e) {
+  methods: {
-    wx.navigateTo({
+    toChild(e) {
-      url: e.currentTarget.dataset.url
+      wx.navigateTo({
-    })
+        url: e.currentTarget.dataset.url
+      })
+    },
   },
-
+  pageLifetimes: {
+    show() {
+      if (typeof this.getTabBar === 'function' &&
+        this.getTabBar()) {
+        this.getTabBar().setData({
+          selected: 2
+        })
+      }
+    }
+  }
 });

demo/pages/plugin/home/home.wxss

@@ -1,4 +1,6 @@
-
+page{
+  padding-bottom: 100rpx;
+}
 .cu-bar .content image{
   height: 60rpx;
   width: 240rpx;

demo/pages/plugin/indexes/indexes.wxml

@@ -5,13 +5,13 @@
     </navigator>
   </view>
 </view>
-<view class="cu-bar search fixed" style="top:{{CustomBar}}px;">
+<view class="cu-bar bg-white search fixed" style="top:{{CustomBar}}px;">
   <view class='search-form round'>
     <text class="icon-search"></text>
     <input type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
   </view>
   <view class='action'>
-    <button class='cu-btn gradual-green shadow-blur round'>搜索</button>
+    <button class='cu-btn bg-gradual-green shadow-blur round'>搜索</button>
   </view>
 </view>
 <scroll-view scroll-y class="indexes" scroll-into-view="indexes-{{listCurID}}" style='height:calc(100vh - {{CustomBar}}px - 50px)' scroll-with-animation="true" enable-back-to-top="true">

demo/project.config.json

@@ -1,200 +1,230 @@
 {
-  "description": "项目配置文件",
+	"description": "项目配置文件",
-  "packOptions": {
+	"packOptions": {
-    "ignore": []
+		"ignore": []
-  },
+	},
-  "setting": {
+	"setting": {
-    "urlCheck": true,
+		"urlCheck": true,
-    "es6": true,
+		"es6": true,
-    "postcss": true,
+		"postcss": true,
-    "minified": true,
+		"minified": true,
-    "newFeature": true
+		"newFeature": true
-  },
+	},
-  "compileType": "miniprogram",
+	"compileType": "miniprogram",
-  "libVersion": "2.4.1",
+	"libVersion": "2.5.2",
-  "appid": "wxfd5241d66a07713f",
+	"appid": "wxfd5241d66a07713f",
-  "projectname": "ColorUI2.0-test",
+	"projectname": "ColorUI2.0-test",
-  "debugOptions": {
+	"debugOptions": {
-    "hidedInDevtools": []
+		"hidedInDevtools": []
-  },
+	},
-  "isGameTourist": false,
+	"isGameTourist": false,
-  "condition": {
+	"condition": {
-    "search": {
+		"search": {
-      "current": -1,
+			"current": -1,
-      "list": []
+			"list": []
-    },
+		},
-    "conversation": {
+		"conversation": {
-      "current": -1,
+			"current": -1,
-      "list": []
+			"list": []
-    },
+		},
-    "plugin": {
+		"plugin": {
-      "current": -1,
+			"current": -1,
-      "list": []
+			"list": []
-    },
+		},
-    "game": {
+		"game": {
-      "currentL": -1,
+			"currentL": -1,
-      "list": []
+			"list": []
-    },
+		},
-    "miniprogram": {
+		"miniprogram": {
-      "current": 2,
+			"current": 2,
-      "list": [
+			"list": [
-        {
+				{
-          "id": 0,
+					"id": 0,
-          "name": "-----基础-首页-----",
+					"name": "-----基础-首页-----",
-          "pathName": "pages/basics/home/home",
+					"pathName": "pages/basics/home/home",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": -1,
+					"id": -1,
-          "name": "1.1 基础-布局",
+					"name": "1.1 基础-布局",
-          "pathName": "pages/basics/layout/layout",
+					"pathName": "pages/basics/layout/layout",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": 2,
+					"id": 2,
-          "name": "1.2 基础-背景",
+					"name": "1.2 基础-背景",
-          "pathName": "pages/basics/background/background",
+					"pathName": "pages/basics/background/background",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": -1,
+					"id": -1,
-          "name": "1.3 基础-文本",
+					"name": "1.3 基础-文本",
-          "pathName": "pages/basics/text/text",
+					"pathName": "pages/basics/text/text",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": -1,
+					"id": -1,
-          "name": "1.4 基础-图标",
+					"name": "1.4 基础-图标",
-          "pathName": "pages/basics/icon/icon",
+					"pathName": "pages/basics/icon/icon",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": 2,
+					"id": 2,
-          "name": "1.5 基础-按钮",
+					"name": "1.5 基础-按钮",
-          "pathName": "pages/basics/button/button",
+					"pathName": "pages/basics/button/button",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": 2,
+					"id": 2,
-          "name": "1.5 -- 基础-按钮-设计",
+					"name": "1.5 -- 基础-按钮-设计",
-          "pathName": "pages/basics/button/design",
+					"pathName": "pages/basics/button/design",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": 2,
+					"id": 2,
-          "name": "1.6 基础-标签",
+					"name": "1.6 基础-标签",
-          "pathName": "pages/basics/tag/tag",
+					"pathName": "pages/basics/tag/tag",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": -1,
+					"id": -1,
-          "name": "1.7 基础-头像",
+					"name": "1.7 基础-头像",
-          "pathName": "pages/basics/avatar/avatar",
+					"pathName": "pages/basics/avatar/avatar",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": -1,
+					"id": -1,
-          "name": "1.8 基础-进度条",
+					"name": "1.8 基础-进度条",
-          "pathName": "pages/basics/progress/progress",
+					"pathName": "pages/basics/progress/progress",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": 10,
+					"id": 10,
-          "name": "1.9 基础-边框阴影",
+					"name": "1.9 基础-边框阴影",
-          "pathName": "pages/basics/shadow/shadow",
+					"pathName": "pages/basics/shadow/shadow",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": -1,
+					"id": -1,
-          "name": "1.10 基础-加载",
+					"name": "1.10 基础-加载",
-          "pathName": "pages/basics/loading/loading",
+					"pathName": "pages/basics/loading/loading",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": -1,
+					"id": -1,
-          "name": "-----组件-首页-----",
+					"name": "-----组件-首页-----",
-          "pathName": "pages/component/home/home",
+					"pathName": "pages/component/home/home",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": -1,
+					"id": -1,
-          "name": "2.1 组件-操作条",
+					"name": "2.1 组件-操作条",
-          "pathName": "pages/component/bar/bar",
+					"pathName": "pages/component/bar/bar",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": 12,
+					"id": 12,
-          "name": "2.2 组件-导航栏",
+					"name": "2.2 组件-导航栏",
-          "pathName": "pages/component/nav/nav",
+					"pathName": "pages/component/nav/nav",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": -1,
+					"id": -1,
-          "name": "2.3 组件-列表",
+					"name": "2.3 组件-列表",
-          "pathName": "pages/component/list/list",
+					"pathName": "pages/component/list/list",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": -1,
+					"id": -1,
-          "name": "2.4 组件-卡片",
+					"name": "2.4 组件-卡片",
-          "pathName": "pages/component/card/card",
+					"pathName": "pages/component/card/card",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": -1,
+					"id": -1,
-          "name": "2.5 组件-表单",
+					"name": "2.5 组件-表单",
-          "pathName": "pages/component/form/form",
+					"pathName": "pages/component/form/form",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": -1,
+					"id": -1,
-          "name": "2.6 组件-时间轴",
+					"name": "2.6 组件-时间轴",
-          "pathName": "pages/component/timeline/timeline",
+					"pathName": "pages/component/timeline/timeline",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": -1,
+					"id": -1,
-          "name": "2.7 组件-聊天",
+					"name": "2.7 组件-聊天",
-          "pathName": "pages/component/chat/chat",
+					"pathName": "pages/component/chat/chat",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": -1,
+					"id": -1,
-          "name": "2.8 组件-轮播",
+					"name": "2.8 组件-轮播",
-          "pathName": "pages/component/swiper/swiper",
+					"pathName": "pages/component/swiper/swiper",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": 20,
+					"id": 20,
-          "name": "2.9 组件-模态框",
+					"name": "2.9 组件-模态框",
-          "pathName": "pages/component/modal/modal",
+					"pathName": "pages/component/modal/modal",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": 20,
+					"id": 20,
-          "name": "2.10 组件-步骤条",
+					"name": "2.10 组件-步骤条",
-          "pathName": "pages/component/steps/steps",
+					"pathName": "pages/component/steps/steps",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": -1,
+					"id": -1,
-          "name": "-----扩展-首页-----",
+					"name": "-----扩展-首页-----",
-          "pathName": "pages/plugin/home/home",
+					"pathName": "pages/plugin/home/home",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": -1,
+					"id": -1,
-          "name": "3.1 扩展-索引",
+					"name": "3.1 扩展-索引",
-          "pathName": "pages/plugin/indexes/indexes",
+					"pathName": "pages/plugin/indexes/indexes",
-          "query": ""
+					"query": ""
-        },
+				},
-        {
+				{
-          "id": -1,
+					"id": -1,
-          "name": "3.2 扩展-动画",
+					"name": "3.2 扩展-动画",
-          "pathName": "pages/plugin/animation/animation",
+					"pathName": "pages/plugin/animation/animation",
-          "query": ""
+					"query": ""
-        }
+				},
-      ]
+				{
-    }
+					"id": -1,
-  }
+					"name": "-----关于-首页-----",
+					"pathName": "pages/about/home/home",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "4.1 关于",
+					"pathName": "pages/about/about/about",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "4.2 关于-日志",
+					"pathName": "pages/about/log/log",
+					"query": ""
+				},
+				{
+					"id": 28,
+					"name": "4.3 测试列表",
+					"pathName": "pages/about/test/list",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "4.3 --- filter：blur引起的ios花屏测试",
+					"pathName": "pages/about/test/filter",
+					"query": ""
+				}
+			]
+		}
+	}
 }