v2.0.6

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

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="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>	
+<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 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 round margin-left bg-red" >orange</view>
-  <view class="cu-avatar lg round margin-left bg-red" >orange</view>
-  <view class="cu-avatar xl 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">B</view>
+  <view class="cu-avatar lg round margin-left bg-red">C</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 round margin-left bg-red" >蔚蓝</view>
-  <view class="cu-avatar lg round margin-left bg-red" >蔚蓝</view>
-  <view class="cu-avatar xl 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 lg round margin-left bg-red">
+    <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: [
-      { title: '布局', name: 'layout', color: 'cyan', icon: 'newsfill' },
-      { title: '背景', name: 'background', color: 'blue', 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' },
+    elements: [{
+        title: '布局',
+        name: 'layout',
+        color: 'cyan',
+        icon: 'newsfill'
+      },
+      {
+        title: '背景',
+        name: 'background',
+        color: 'blue',
+        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) {
-    this.setData({
-      modalName: e.currentTarget.dataset.target
-    })
+  methods: {
+    onLoad() {
+      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) {
-    this.setData({
-      modalName: null
-    })
-  },
-  onShareAppMessage(){
-    return {
-      title: 'ColorUI-高颜值的小程序UI组件库',
-      imageUrl:'https://image.weilanwl.com/color2.0/share2215.jpg',
-      path: '/pages/basics/home/home'
-    }    
+  pageLifetimes: {
+    show() {
+      if (typeof this.getTabBar === 'function' && this.getTabBar()) {
+        this.getTabBar().setData({
+          selected: 0
+        })
+      }
+    }
   }
-})
+})

demo/pages/basics/home/home.wxss

@@ -1,3 +1,3 @@
-.weui-tabbar{
-  left: 0px !important;
+page{
+  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>