diff --git a/demo/app.json b/demo/app.json
index 7687b49..dbb601c 100644
--- a/demo/app.json
+++ b/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": "关于"
       }
     ]
   }
diff --git a/demo/app.wxss b/demo/app.wxss
index 3fd985a..9569f3e 100644
--- a/demo/app.wxss
+++ b/demo/app.wxss
@@ -9,7 +9,6 @@
 }
 
 .nav-li {
-  color: #666;
   padding: 30rpx;
   border-radius: 12rpx;
   width: 45%;
diff --git a/demo/colorui.wxss b/demo/colorui.wxss
index a04f136..f5f9d6a 100644
--- a/demo/colorui.wxss
+++ b/demo/colorui.wxss
@@ -1,5 +1,5 @@
 /*
-  Color UI v2.0.5(修复v2) | by 文晓港 
+  Color UI v2.0.6 | by 文晓港 
   仅供学习交流，如作它用所承受的法律责任一概与作者无关   
   （QQ交流群：240787041）
   文档：http://www.color-ui.com/
@@ -13,7 +13,6 @@ page {
   background: #f1f1f1;
   font-size: 28rpx;
   color: #333;
-  line-height: 1;
   font-family: Helvetica Neue, Helvetica, sans-serif;
 }
 
@@ -22,6 +21,14 @@ image {
   box-sizing: border-box;
 }
 
+.round {
+  border-radius: 5000rpx;
+}
+
+.radius {
+  border-radius: 6rpx;
+}
+
 /* ==================
           图片
  ==================== */
@@ -76,10 +83,10 @@ switch, checkbox, radio {
 }
 
 switch::after, switch::before {
-  font-family: "iconfont" !important;
+  font-family: "iconfont";
   content: "\e645";
   position: absolute;
-  color: #fff;
+  color: #fff !important;
   top: 0%;
   left: 0rpx;
   font-size: 26rpx;
@@ -108,10 +115,10 @@ switch[checked]::before {
 }
 
 radio::before, checkbox::before {
-  font-family: "iconfont" !important;
+  font-family: "iconfont";
   content: "\e645";
   position: absolute;
-  color: #fff;
+  color: #fff !important;
   top: 50%;
   margin-top: -8px;
   right: 5px;
@@ -128,7 +135,6 @@ switch[checked]::before {
 }
 
 switch .wx-switch-input {
-  background: #aaa !important;
   border: none;
   padding: 0 24px;
   width: 48px;
@@ -137,23 +143,28 @@ switch .wx-switch-input {
   border-radius: 100rpx;
 }
 
+switch .wx-switch-input:not([class*="bg-"]) {
+  background: #aaa !important;
+}
+
 switch .wx-switch-input::after {
-  margin: auto !important;
-  width: 26px !important;
-  height: 26px !important;
+  margin: auto;
+  width: 26px;
+  height: 26px;
   border-radius: 100rpx;
-  left: 0rpx !important;
-  top: 0rpx !important;
-  bottom: 0rpx !important;
+  left: 0rpx;
+  top: 0rpx;
+  bottom: 0rpx;
   position: absolute;
-  transform: scale(0.9, 0.9) !important;
+  transform: scale(0.9, 0.9);
   transition: all 0.1s ease-in-out 0s;
 }
 
-switch .wx-switch-input-checked::after {
-  margin: auto !important;
-  left: 22px !important;
-  box-shadow: none !important;
+switch .wx-switch-input.wx-switch-input-checked::after {
+  margin: auto;
+  left: 22px;
+  box-shadow: none;
+  transform: scale(0.9, 0.9);
 }
 
 radio-group {
@@ -194,7 +205,7 @@ radio.radio[checked]::after {
   bottom: 0;
   margin: auto;
   border-radius: 200rpx;
-  border: 8px solid #fff;
+  border: 8px solid #fff !important;
 }
 
 .switch-sex::after {
@@ -207,7 +218,7 @@ radio.radio[checked]::after {
 
 .switch-sex .wx-switch-input {
   background: #e54d42 !important;
-  border-color: #e54d42;
+  border-color: #e54d42 !important;
 }
 
 .switch-sex[checked] .wx-switch-input {
@@ -215,545 +226,177 @@ radio.radio[checked]::after {
   border-color: #0081ff !important;
 }
 
-/* ==================
-          背景
- ==================== */
-
-.line-red::after, .lines-red::after, switch.red[checked] .wx-switch-input,
-checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input {
+switch.red[checked] .wx-switch-input, checkbox.red[checked] .wx-checkbox-input,
+radio.red[checked] .wx-radio-input {
   border-color: #e54d42 !important;
 }
 
-.line-orange::after, .lines-orange::after,
 switch.orange[checked] .wx-switch-input,
 checkbox.orange[checked] .wx-checkbox-input,
 radio.orange[checked] .wx-radio-input {
   border-color: #f37b1d !important;
 }
 
-.line-yellow::after, .lines-yellow::after,
 switch.yellow[checked] .wx-switch-input,
 checkbox.yellow[checked] .wx-checkbox-input,
 radio.yellow[checked] .wx-radio-input {
   border-color: #fbbd08 !important;
 }
 
-.line-olive::after, .lines-olive::after, switch.olive[checked] .wx-switch-input,
+switch.olive[checked] .wx-switch-input,
 checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input {
   border-color: #8dc63f !important;
 }
 
-.line-green::after, .lines-green::after, switch.green[checked] .wx-switch-input,
+switch.green[checked] .wx-switch-input,
 checkbox.green[checked] .wx-checkbox-input, checkbox[checked] .wx-checkbox-input,
 radio.green[checked] .wx-radio-input {
   border-color: #39b54a !important;
 }
 
-.line-cyan::after, .lines-cyan::after, switch.cyan[checked] .wx-switch-input,
-checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input {
+switch.cyan[checked] .wx-switch-input, checkbox.cyan[checked] .wx-checkbox-input,
+radio.cyan[checked] .wx-radio-input {
   border-color: #1cbbb4 !important;
 }
 
-.line-blue::after, .lines-blue::after, switch.blue[checked] .wx-switch-input,
-checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input {
+switch.blue[checked] .wx-switch-input, checkbox.blue[checked] .wx-checkbox-input,
+radio.blue[checked] .wx-radio-input {
   border-color: #0081ff !important;
 }
 
-.line-purple::after, .lines-purple::after,
 switch.purple[checked] .wx-switch-input,
 checkbox.purple[checked] .wx-checkbox-input,
 radio.purple[checked] .wx-radio-input {
   border-color: #6739b6 !important;
 }
 
-.line-mauve::after, .lines-mauve::after, switch.mauve[checked] .wx-switch-input,
+switch.mauve[checked] .wx-switch-input,
 checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input {
   border-color: #9c26b0 !important;
 }
 
-.line-pink::after, .lines-pink::after, switch.pink[checked] .wx-switch-input,
-checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input {
+switch.pink[checked] .wx-switch-input, checkbox.pink[checked] .wx-checkbox-input,
+radio.pink[checked] .wx-radio-input {
   border-color: #e03997 !important;
 }
 
-.line-brown::after, .lines-brown::after, switch.brown[checked] .wx-switch-input,
+switch.brown[checked] .wx-switch-input,
 checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input {
   border-color: #a5673f !important;
 }
 
-.line-grey::after, .lines-grey::after, switch.grey[checked] .wx-switch-input,
-checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input {
+switch.grey[checked] .wx-switch-input, checkbox.grey[checked] .wx-checkbox-input,
+radio.grey[checked] .wx-radio-input {
   border-color: #8799a3 !important;
 }
 
-.line-gray::after, .lines-gray::after, switch.gray[checked] .wx-switch-input,
-checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input {
+switch.gray[checked] .wx-switch-input, checkbox.gray[checked] .wx-checkbox-input,
+radio.gray[checked] .wx-radio-input {
   border-color: #aaa !important;
 }
 
-.line-black::after, .lines-black::after, switch.black[checked] .wx-switch-input,
+switch.black[checked] .wx-switch-input,
 checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input {
   border-color: #333 !important;
 }
 
-.line-white::after, .lines-white::after, switch.white[checked] .wx-switch-input,
+switch.white[checked] .wx-switch-input,
 checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input {
   border-color: #fff !important;
 }
 
-.bg-red, switch.red[checked] .wx-switch-input,
+switch.red[checked] .wx-switch-input.wx-switch-input-checked,
 checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input {
   background-color: #e54d42 !important;
   color: #fff !important;
 }
 
-.bg-orange, switch.orange[checked] .wx-switch-input,
+switch.orange[checked] .wx-switch-input,
 checkbox.orange[checked] .wx-checkbox-input,
 radio.orange[checked] .wx-radio-input {
   background-color: #f37b1d !important;
   color: #fff !important;
 }
 
-.bg-yellow, switch.yellow[checked] .wx-switch-input,
+switch.yellow[checked] .wx-switch-input,
 checkbox.yellow[checked] .wx-checkbox-input,
 radio.yellow[checked] .wx-radio-input {
   background-color: #fbbd08 !important;
   color: #333 !important;
 }
 
-.bg-olive, switch.olive[checked] .wx-switch-input,
+switch.olive[checked] .wx-switch-input,
 checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input {
   background-color: #8dc63f !important;
   color: #fff !important;
 }
 
-.bg-green, switch.green[checked] .wx-switch-input,
-switch[checked] .wx-switch-input, checkbox.green[checked] .wx-checkbox-input,
-checkbox[checked] .wx-checkbox-input, radio.green[checked] .wx-radio-input,
-radio[checked] .wx-radio-input {
+switch.green[checked] .wx-switch-input, switch[checked] .wx-switch-input,
+checkbox.green[checked] .wx-checkbox-input, checkbox[checked] .wx-checkbox-input,
+radio.green[checked] .wx-radio-input, radio[checked] .wx-radio-input {
   background-color: #39b54a !important;
   color: #fff !important;
 }
 
-.bg-cyan, switch.cyan[checked] .wx-switch-input,
-checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input {
+switch.cyan[checked] .wx-switch-input, checkbox.cyan[checked] .wx-checkbox-input,
+radio.cyan[checked] .wx-radio-input {
   background-color: #1cbbb4 !important;
   color: #fff !important;
 }
 
-.bg-blue, switch.blue[checked] .wx-switch-input,
-checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input {
+switch.blue[checked] .wx-switch-input, checkbox.blue[checked] .wx-checkbox-input,
+radio.blue[checked] .wx-radio-input {
   background-color: #0081ff !important;
   color: #fff !important;
 }
 
-.bg-purple, switch.purple[checked] .wx-switch-input,
+switch.purple[checked] .wx-switch-input,
 checkbox.purple[checked] .wx-checkbox-input,
 radio.purple[checked] .wx-radio-input {
   background-color: #6739b6 !important;
   color: #fff !important;
 }
 
-.bg-mauve, switch.mauve[checked] .wx-switch-input,
+switch.mauve[checked] .wx-switch-input,
 checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input {
   background-color: #9c26b0 !important;
   color: #fff !important;
 }
 
-.bg-pink, switch.pink[checked] .wx-switch-input,
-checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input {
+switch.pink[checked] .wx-switch-input, checkbox.pink[checked] .wx-checkbox-input,
+radio.pink[checked] .wx-radio-input {
   background-color: #e03997 !important;
   color: #fff !important;
 }
 
-.bg-brown, switch.brown[checked] .wx-switch-input,
+switch.brown[checked] .wx-switch-input,
 checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input {
   background-color: #a5673f !important;
   color: #fff !important;
 }
 
-.bg-grey, switch.grey[checked] .wx-switch-input,
-checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input {
+switch.grey[checked] .wx-switch-input, checkbox.grey[checked] .wx-checkbox-input,
+radio.grey[checked] .wx-radio-input {
   background-color: #8799a3 !important;
   color: #fff !important;
 }
 
-.bg-gray, switch.gray[checked] .wx-switch-input,
-checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input {
+switch.gray[checked] .wx-switch-input, checkbox.gray[checked] .wx-checkbox-input,
+radio.gray[checked] .wx-radio-input {
   background-color: #f0f0f0 !important;
   color: #666 !important;
 }
 
-.bg-black, switch.black[checked] .wx-switch-input,
+switch.black[checked] .wx-switch-input,
 checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input {
   background-color: #333 !important;
   color: #fff !important;
 }
 
-.bg-white, switch.white[checked] .wx-switch-input,
+switch.white[checked] .wx-switch-input,
 checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input {
   background-color: #fff !important;
-  color: #666;
-}
-
-.bg-shadeTop {
-  background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01)) !important;
-  color: #fff;
-}
-
-.bg-shadeBottom {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1)) !important;
-  color: #fff;
-}
-
-.none-bg, .line-white, .lines-white {
-  background-color: transparent !important;
-}
-
-.bg-red.light {
-  color: #e54d42 !important;
-  background: #fadbd9 !important;
-}
-
-.bg-orange.light {
-  color: #f37b1d !important;
-  background: #fde6d2 !important;
-}
-
-.bg-yellow.light {
-  color: #fbbd08 !important;
-  background: #fef2ce !important;
-}
-
-.bg-olive.light {
-  color: #8dc63f !important;
-  background: #e8f4d9 !important;
-}
-
-.bg-green.light {
-  color: #39b54a !important;
-  background: #d7f0db !important;
-}
-
-.bg-cyan.light {
-  color: #1cbbb4 !important;
-  background: #d2f1f0 !important;
-}
-
-.bg-blue.light {
-  color: #0081ff !important;
-  background: #cce6ff !important;
-}
-
-.bg-purple.light {
-  color: #6739b6 !important;
-  background: #e1d7f0 !important;
-}
-
-.bg-mauve.light {
-  color: #9c26b0 !important;
-  background: #ebd4ef !important;
-}
-
-.bg-pink.light {
-  color: #e03997 !important;
-  background: #f9d7ea !important;
-}
-
-.bg-brown.light {
-  color: #a5673f !important;
-  background: #ede1d9 !important;
-}
-
-.bg-grey.light {
-  color: #8799a3 !important;
-  background: #e7ebed !important;
-}
-
-.bg-gray.light {
   color: #666 !important;
-  background: #fadbd9 !important;
-}
-
-.bg-gray.light {
-  color: #888 !important;
-  background: #f1f1f1 !important;
-}
-
-.gradual-red {
-  background-image: linear-gradient(45deg, #f43f3b, #ec008c) !important;
-  color: #fff !important;
-}
-
-.gradual-orange {
-  background-image: linear-gradient(45deg, #ff9700, #ed1c24) !important;
-  color: #fff !important;
-}
-
-.gradual-green {
-  background-image: linear-gradient(45deg, #39b54a, #8dc63f) !important;
-  color: #fff !important;
-}
-
-.gradual-purple {
-  background-image: linear-gradient(45deg, #9000ff, #5e00ff) !important;
-  color: #fff !important;
-}
-
-.gradual-pink {
-  background-image: linear-gradient(45deg, #ec008c, #6739b6) !important;
-  color: #fff !important;
-}
-
-.gradual-blue {
-  background-image: linear-gradient(45deg, #0081ff, #1cbbb4) !important;
-  color: #fff !important;
-}
-
-.cu-btn.shadow[class*="-red"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(204, 69, 59, 0.2) !important;
-}
-
-.cu-btn.shadow[class*="-orange"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(217, 109, 26, 0.2) !important;
-}
-
-.cu-btn.shadow[class*="-yellow"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(224, 170, 7, 0.2) !important;
-}
-
-.cu-btn.shadow[class*="-olive"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(124, 173, 55, 0.2) !important;
-}
-
-.cu-btn.shadow[class*="-green"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(48, 156, 63, 0.2) !important;
-}
-
-.cu-btn.shadow[class*="-cyan"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(28, 187, 180, 0.2) !important;
-}
-
-.cu-btn.shadow[class*="-blue"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(0, 102, 204, 0.2) !important;
-}
-
-.cu-btn.shadow[class*="-purple"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(88, 48, 156, 0.2) !important;
-}
-
-.cu-btn.shadow[class*="-mauve"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(133, 33, 150, 0.2) !important;
-}
-
-.cu-btn.shadow[class*="-pink"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(199, 50, 134, 0.2) !important;
-}
-
-.cu-btn.shadow[class*="-brown"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(140, 88, 53, 0.2) !important;
-}
-
-.cu-btn.shadow[class*="-grey"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(114, 130, 138, 0.2) !important;
-}
-
-.cu-btn.shadow[class*="-gray"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(114, 130, 138, 0.2) !important;
-}
-
-.cu-btn.shadow[class*="-black"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2) !important;
-}
-
-.bg-img {
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.bg-mask {
-  background-color: #333;
-  position: relative;
-}
-
-.bg-mask::after {
-  content: "";
-  border-radius: inherit;
-  width: 100%;
-  height: 100%;
-  display: block;
-  background-color: rgba(0, 0, 0, 0.5);
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-}
-
-.bg-mask view, .bg-mask cover-view {
-  z-index: 5;
-  position: relative;
-}
-
-.bg-mask>cover-view {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-.bg-video {
-  position: relative;
-}
-
-.bg-video video {
-  display: block;
-  height: 100%;
-  width: 100%;
-  -o-object-fit: cover;
-  object-fit: cover;
-  position: absolute;
-  top: 0;
-  z-index: 0;
-  pointer-events: none;
-}
-
-/* ==================
-          文本
- ==================== */
-
-.text-xs {
-  font-size: 20rpx;
-}
-
-.text-sm {
-  font-size: 24rpx;
-}
-
-.text-df {
-  font-size: 28rpx;
-}
-
-.text-lg {
-  font-size: 32rpx;
-}
-
-.text-xl {
-  font-size: 36rpx;
-}
-
-.text-xxl {
-  font-size: 44rpx;
-}
-
-.text-sl {
-  font-size: 80rpx;
-}
-
-.text-xsl {
-  font-size: 120rpx;
-}
-
-.text-Abc {
-  text-transform: Capitalize;
-}
-
-.text-ABC {
-  text-transform: Uppercase;
-}
-
-.text-abc {
-  text-transform: Lowercase;
-}
-
-.text-price::before {
-  content: "¥";
-  font-size: 80%;
-  margin-right: 4rpx;
-}
-
-.text-cut {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.text-bold {
-  font-weight: bold;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-content {
-  line-height: 1.6;
-}
-
-.text-left {
-  text-align: left;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.text-red, .line-red, .lines-red {
-  color: #e54d42 !important;
-}
-
-.text-orange, .line-orange, .lines-orange {
-  color: #f37b1d !important;
-}
-
-.text-yellow, .line-yellow, .lines-yellow {
-  color: #fbbd08 !important;
-}
-
-.text-olive, .line-olive, .lines-olive {
-  color: #8dc63f !important;
-}
-
-.text-green, .line-green, .lines-green {
-  color: #39b54a !important;
-}
-
-.text-cyan, .line-cyan, .lines-cyan {
-  color: #1cbbb4 !important;
-}
-
-.text-blue, .line-blue, .lines-blue {
-  color: #0081ff !important;
-}
-
-.text-purple, .line-purple, .lines-purple {
-  color: #6739b6 !important;
-}
-
-.text-mauve, .line-mauve, .lines-mauve {
-  color: #9c26b0 !important;
-}
-
-.text-pink, .line-pink, .lines-pink {
-  color: #e03997 !important;
-}
-
-.text-brown, .line-brown, .lines-brown {
-  color: #a5673f !important;
-}
-
-.text-grey, .line-grey, .lines-grey {
-  color: #8799a3 !important;
-}
-
-.text-gray, .line-gray, .lines-gray {
-  color: #aaa !important;
-}
-
-.text-black, .line-black, .lines-black {
-  color: #333 !important;
-}
-
-.text-white, .line-white, .lines-white {
-  color: #fff !important;
 }
 
 /* ==================
@@ -905,60 +548,59 @@ checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input
           按钮
  ==================== */
 
-.round, button.icon {
-  border-radius: 5000rpx !important;
-}
-
-.radius {
-  border-radius: 6rpx !important;
-}
-
 .cu-btn {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  padding: 20rpx 30rpx 16rpx;
+  padding: 0 30rpx;
   font-size: 28rpx;
+  height: 64rpx;
   line-height: 1;
   text-align: center;
   text-decoration: none;
-  border-radius: 6rpx;
   overflow: visible;
-  color: #666;
-  background-color: #fff;
   margin-left: initial;
   transform: translate(0rpx, 0rpx);
   margin-right: initial;
 }
 
-.cu-btn::after, .cu-tag[class*="line-"]::after {
+.cu-btn::after {
+  display: none;
+}
+
+.cu-btn:not([class*="bg-"]) {
+  background-color: #f0f0f0;
+}
+
+.cu-btn[class*="line"] {
+  background-color: transparent;
+}
+
+.cu-btn[class*="line"]::after {
   content: " ";
+  display: block;
   width: 200%;
   height: 200%;
   position: absolute;
   top: 0;
   left: 0;
-  border: 1rpx solid rgba(0, 0, 0, 0.2);
+  border: 1rpx solid currentColor;
   transform: scale(0.5);
   transform-origin: 0 0;
   box-sizing: border-box;
-  border-radius: inherit;
+  border-radius: 24rpx;
   z-index: 1;
   pointer-events: none;
 }
 
-.cu-btn[class*="line"]::after, .cu-tag.radius[class*="line"]::after {
-  border-radius: 12rpx;
-}
-
-.cu-btn.round[class*="line"]::after, .cu-tag.round[class*="line"]::after {
+.cu-btn.round[class*="line"]::after {
   border-radius: 1000rpx;
 }
 
 .cu-btn[class*="lines"]::after {
-  border: 6rpx solid rgba(0, 0, 0, 0.2);
+  border: 6rpx solid currentColor;
 }
 
 .cu-btn[class*="bg-"]::after {
@@ -966,23 +608,26 @@ checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input
 }
 
 .cu-btn.sm {
-  padding: 14rpx 20rpx 10rpx;
-  font-size: 24rpx;
+  padding: 0 20rpx;
+  font-size: 20rpx;
+  height: 48rpx;
 }
 
 .cu-btn.lg {
-  padding: 32rpx 40rpx 28rpx;
+  padding: 0 40rpx;
   font-size: 32rpx;
+  height: 80rpx;
 }
 
 .cu-btn.icon.sm {
-  width: 56rpx;
-  height: 56rpx;
+  width: 48rpx;
+  height: 48rpx;
 }
 
 .cu-btn.icon {
-  width: 70rpx;
-  height: 70rpx;
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 500rpx;
   padding: 0;
 }
 
@@ -1021,19 +666,45 @@ button.icon.lg {
 
 .cu-tag {
   font-size: 24rpx;
-  color: #666;
   vertical-align: middle;
   position: relative;
   display: inline-flex;
-  align-items: stretch;
+  align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  padding: 12rpx 16rpx 10rpx;
-  line-height: 1;
-  background: #fff;
+  padding: 0rpx 16rpx;
+  height: 48rpx;
   font-family: Helvetica Neue, Helvetica, sans-serif;
 }
 
+.cu-tag:not([class*="bg"]):not([class*="line"]) {
+  background-color: #f1f1f1;
+}
+
+.cu-tag[class*="line-"]::after {
+  content: " ";
+  width: 200%;
+  height: 200%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 1rpx solid currentColor;
+  transform: scale(0.5);
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  border-radius: inherit;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.cu-tag.radius[class*="line"]::after {
+  border-radius: 12rpx;
+}
+
+.cu-tag.round[class*="line"]::after {
+  border-radius: 1000rpx;
+}
+
 .cu-tag[class*="line-"]::after {
   border-radius: 0;
 }
@@ -1044,7 +715,8 @@ button.icon.lg {
 
 .cu-tag.sm {
   font-size: 20rpx;
-  padding: 10rpx 14rpx 8rpx;
+  padding: 0rpx 12rpx;
+  height: 32rpx;
 }
 
 .cu-capsule {
@@ -1061,11 +733,11 @@ button.icon.lg {
 }
 
 .cu-capsule .cu-tag[class*="line-"]:last-child::after {
-  border-left: 0rpx solid transparent !important;
+  border-left: 0rpx solid transparent;
 }
 
 .cu-capsule .cu-tag[class*="line-"]:first-child::after {
-  border-right: 0rpx solid transparent !important;
+  border-right: 0rpx solid transparent;
 }
 
 .cu-capsule.radius .cu-tag:first-child {
@@ -1093,18 +765,28 @@ button.icon.lg {
 }
 
 .cu-tag.badge {
-  background: #dd514c;
+  background: #dd514c !important;
   border-radius: 200rpx;
   position: absolute;
   top: -10rpx;
   right: -10rpx;
   font-size: 20rpx;
-  padding: 6rpx 10rpx 4rpx;
+  padding: 0rpx 10rpx;
+  height: 28rpx;
   color: #fff;
 }
 
-.cu-tag:empty {
-  padding: 8rpx;
+.cu-tag:empty:not([class*="icon"]) {
+  padding: 0rpx;
+  width: 16rpx;
+  height: 16rpx;
+  top: -4rpx;
+  right: -4rpx;
+}
+
+.cu-tag[class*="icon"] {
+  width: 32rpx;
+  height: 32rpx;
   top: -4rpx;
   right: -4rpx;
 }
@@ -1117,86 +799,42 @@ button.icon.lg {
   font-variant: small-caps;
   margin: 0;
   padding: 0;
-  display: inline-block;
+  display: inline-flex;
   text-align: center;
+  justify-content: center;
+  align-items: center;
   background: #ccc;
   color: #fff;
   white-space: nowrap;
   position: relative;
   width: 64rpx;
   height: 64rpx;
-  line-height: 64rpx;
   background-size: cover;
   background-position: center;
   vertical-align: middle;
-  font-size: 0rpx;
-}
-
-.cu-avatar::first-letter, .cu-avatar text::first-letter {
-  font-size: 40rpx;
-}
-
-.cu-avatar text {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  transform-origin: 0 center;
-  transform: scale(1) translateX(-50%);
-  font-size: inherit;
+  font-size: 1.5em;
 }
 
 .cu-avatar.sm {
   width: 48rpx;
   height: 48rpx;
-  line-height: 48rpx;
-}
-
-.cu-avatar.sm::first-letter, .cu-avatar.sm text::first-letter {
-  font-size: 30rpx;
-}
-
-.cu-avatar>text[class*="icon"] {
-  position: absolute;
-  left: 50%;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  transform-origin: 0 center;
-  transform: scale(1.2) translateX(-50%);
-}
-
-.cu-avatar.sm>text[class*="icon"] {
-  transform: scale(0.75) translateX(-50%);
-}
-
-.cu-avatar.lg>text[class*="icon"] {
-  transform: scale(1.75) translateX(-50%);
-}
-
-.cu-avatar.xl>text[class*="icon"] {
-  transform: scale(2.2) translateX(-50%);
+  font-size: 1em;
 }
 
 .cu-avatar.lg {
-  width: 90rpx;
-  height: 90rpx;
-  line-height: 90rpx;
-  font-size: 22rpx;
-}
-
-.cu-avatar.lg::first-letter, .cu-avatar.lg text::first-letter {
-  font-size: 36rpx;
+  width: 96rpx;
+  height: 96rpx;
+  font-size: 2em;
 }
 
 .cu-avatar.xl {
   width: 128rpx;
   height: 128rpx;
-  line-height: 128rpx;
-  font-size: 24rpx;
+  font-size: 2.5em;
 }
 
-.cu-avatar.xl::first-letter, .cu-avatar.xl text::first-letter {
-  font-size: 40rpx;
+.cu-avatar .avatar-text {
+  font-size: 0.4em;
 }
 
 .cu-avatar-group {
@@ -1251,7 +889,6 @@ button.icon.lg {
   justify-content: space-around;
   font-size: 20rpx;
   color: #fff;
-  background: #0081ff;
   transition: width 0.6s ease;
 }
 
@@ -1297,7 +934,7 @@ button.icon.lg {
 }
 
 .cu-load::before {
-  font-family: "iconfont" !important;
+  font-family: "iconfont";
   display: inline-block;
   margin-right: 6rpx;
 }
@@ -1476,7 +1113,6 @@ button.icon.lg {
   padding: 0 30rpx;
 }
 
-
 .cu-list.menu>.cu-item::after {
   content: " ";
   width: 200%;
@@ -1561,7 +1197,7 @@ button.icon.lg {
 }
 
 .cu-list.menu>.cu-item.arrow::before {
-  font-family: "iconfont" !important;
+  font-family: "iconfont";
   display: block;
   content: "\e6a3";
   position: absolute;
@@ -1618,7 +1254,7 @@ button.icon.lg {
 
 .cu-list.grid {
   text-align: center;
-  background: #fff;  
+  background: #fff;
 }
 
 .cu-list.grid>.cu-item {
@@ -1689,21 +1325,23 @@ button.icon.lg {
 }
 
 .cu-list.grid.no-border>.cu-item::after {
-  border: none !important;
+  border: none;
 }
 
 .cu-list>.cu-item {
   transform: translateX(0rpx);
   transition: all 0.6s ease-in-out 0s;
 }
+
 .cu-list>.cu-item .move {
   display: flex;
   width: 260rpx;
   height: 100%;
   position: absolute;
   right: 0;
-  transform: translateX(100%);  
+  transform: translateX(100%);
 }
+
 .cu-list>.cu-item.move-cur {
   transform: translateX(-260rpx);
 }
@@ -1723,8 +1361,7 @@ button.icon.lg {
   display: flex;
   position: relative;
   align-items: center;
-  background: #fff;
-  height: 100rpx;
+  min-height: 100rpx;
   justify-content: space-between;
 }
 
@@ -1736,6 +1373,61 @@ button.icon.lg {
   max-width: 100%;
 }
 
+.cu-bar .action.border-title {
+  position: relative;
+  top: -10rpx;
+}
+
+.cu-bar .action.border-title text[class*="bg-"]:last-child {
+  position: absolute;
+  bottom: -0.5rem;
+  min-width: 2rem;
+  height: 6rpx;
+  left: 0;
+}
+
+.cu-bar .action.sub-title {
+  position: relative;
+  top: -0.2rem;
+}
+
+.cu-bar .action.sub-title text {
+  position: relative;
+  z-index: 1;
+}
+
+.cu-bar .action.sub-title text[class*="bg-"]:last-child {
+  position: absolute;
+  display: inline-block;
+  bottom: -0.2rem;
+  border-radius: 6rpx;
+  width: 100%;
+  height: 0.6rem;
+  left: 0.6rem;
+  opacity: 0.3;
+  z-index: 0;
+}
+
+.cu-bar .action.sub-title text[class*="text-"]:last-child {
+  position: absolute;
+  display: inline-block;
+  bottom: -0.7rem;
+  left: 0.5rem;
+  opacity: 0.2;
+  z-index: 0;
+  text-align: right;
+  font-weight: 900;
+  font-size: 36rpx;
+}
+
+.cu-bar.justify-center .action.border-title text:last-child,
+.cu-bar.justify-center .action.sub-title text:last-child {
+  left: 0;
+  right: 0;
+  margin: auto;
+  text-align: center;
+}
+
 .cu-bar .action:first-child {
   margin-left: 30rpx;
   font-size: 30rpx;
@@ -1759,14 +1451,10 @@ button.icon.lg {
   margin-right: 30rpx;
 }
 
-.cu-bar .action>text[class*="icon"] {
+.cu-bar .action > text[class*="icon"], .cu-bar .action > view[class*="icon"] {
   font-size: 36rpx;
 }
 
-.cu-bar .action>text[class*="icon"]::before {
-  vertical-align: 0.1em;
-}
-
 .cu-bar .action>text[class*="icon"]+text[class*="icon"] {
   margin-left: 0.5em;
 }
@@ -1777,10 +1465,10 @@ button.icon.lg {
   width: 400rpx;
   left: 0;
   right: 0;
-  bottom: 16rpx;
+  bottom: 20rpx;
   margin: auto;
   height: 60rpx;
-  font-size: 36rpx;
+  font-size: 32rpx;
   line-height: 60rpx;
   cursor: none;
   pointer-events: none;
@@ -1822,8 +1510,8 @@ button.icon.lg {
 .cu-bar .search-form input {
   flex: 1;
   padding-right: 20rpx;
-  height: 128rpx;
-  line-height: 128rpx;
+  height: 64rpx;
+  line-height: 64rpx;
   font-size: 26rpx;
 }
 
@@ -1851,67 +1539,133 @@ button.icon.lg {
   box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
 }
 
-.cu-bar.shop {
+.cu-bar.tabbar {
   padding: 0;
 }
 
-.cu-bar.shop .action {
-  font-size: 24rpx;
+.cu-bar.tabbar.shadow {
+  box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
+}
+
+.cu-bar.tabbar .action {
+  font-size: 22rpx;
   position: relative;
   flex: 1;
   text-align: center;
-  padding: 0 20rpx;
+  padding: 0;
   display: block;
-  height: auto !important;
+  height: auto;
   line-height: 1;
-  margin: 0 !important;
+  margin: 0;
+  background-color: inherit;
+  overflow: initial;
 }
 
-.cu-bar.shop button.action::after {
+.cu-bar.tabbar.shop .action {
+  width: 140rpx;
+  flex: initial;
+}
+
+.cu-bar.tabbar .action.add-action {
+  position: relative;
+  z-index: 2;
+  padding-top: 50rpx;
+}
+
+.cu-bar.tabbar .action.add-action [class*="icon"] {
+  position: absolute;
+  width: 70rpx;
+  z-index: 2;
+  height: 70rpx;
+  border-radius: 50%;
+  line-height: 70rpx;
+  font-size: 50rpx;
+  top: -35rpx;
+  left: 0;
+  right: 0;
+  margin: auto;
+  padding: 0;
+}
+
+.cu-bar.tabbar .action.add-action::after {
+  content: "";
+  position: absolute;
+  width: 100rpx;
+  height: 100rpx;
+  top: -50rpx;
+  left: 0;
+  right: 0;
+  margin: auto;
+  box-shadow: 0 -3rpx 8rpx rgba(0, 0, 0, 0.08);
+  border-radius: 50rpx;
+  background-color: inherit;
+  z-index: 0;
+}
+
+.cu-bar.tabbar .action.add-action::before {
+  content: "";
+  position: absolute;
+  width: 100rpx;
+  height: 30rpx;
+  bottom: 30rpx;
+  left: 0;
+  right: 0;
+  margin: auto;
+  background-color: inherit;
+  z-index: 1;
+}
+
+.cu-bar.tabbar .btn-group {
+  flex: 1;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0 10rpx;
+}
+
+.cu-bar.tabbar button.action::after {
   border: 0;
 }
 
-.cu-bar.shop [class*="icon"] {
-  width: 100rpx !important;
+.cu-bar.tabbar .action [class*="icon"] {
+  width: 100rpx;
   position: relative;
   display: block;
-  height: auto !important;
-  margin: 0 auto 10rpx !important;
+  height: auto;
+  margin: 0 auto 10rpx;
   text-align: center;
+  font-size: 40rpx;
 }
 
-.cu-bar.shop .submit {
+.cu-bar.tabbar .action .icon-cu-image {
+  margin: 0 auto;
+}
+
+.cu-bar.tabbar .action .icon-cu-image image {
+  width: 50rpx;
+  height: 50rpx;
+  display: inline-block;
+}
+
+.cu-bar.tabbar .submit {
   align-items: center;
   display: flex;
   justify-content: center;
   text-align: center;
   position: relative;
   flex: 2;
-  height: 100%;
+  align-self: stretch;
 }
 
-.cu-bar.shop .submit:last-child {
+.cu-bar.tabbar .submit:last-child {
   flex: 2.6;
 }
 
-.cu-bar.shop .submit+.submit {
+.cu-bar.tabbar .submit+.submit {
   flex: 2;
 }
 
-.cu-bar.shop .submit button {
-  margin-left: 20rpx;
-}
-
-.cu-bar.shop .submit:last-child button {
-  margin-left: 0rpx;
-}
-
-.cu-bar.shop .submit+.submit button {
-  margin-left: 0rpx;
-  margin-right: 20rpx;
-}
-
-.cu-bar.shop .action::after {
+.cu-bar.tabbar.border .action::before {
   content: " ";
   width: 200%;
   height: 200%;
@@ -1920,11 +1674,17 @@ button.icon.lg {
   left: 0;
   transform: scale(0.5);
   transform-origin: 0 0;
-  border-right: 1rpx solid rgba(0, 0, 0, 0.1) !important;
+  border-right: 1rpx solid rgba(0, 0, 0, 0.1);
+  z-index: 3;
+}
+
+.cu-bar.tabbar.border .action:last-child:before {
+  display: none;
 }
 
 .cu-bar.input {
   padding-right: 20rpx;
+  background-color: #fff;
 }
 
 .cu-bar.input input {
@@ -1954,6 +1714,41 @@ button.icon.lg {
   margin-left: 0rpx;
 }
 
+/* 
+.cu-bar.tabbar .action {
+  flex: 1;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.cu-bar.tabbar .action .tabbar-icon {
+  width: 54rpx;
+  height: 54rpx;
+  position: relative;
+}
+.cu-bar.tabbar .action image {  
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+.cu-bar.tabbar .action .tabbar-icon image:first-child,.cu-bar.tabbar .action.cur .tabbar-icon image:last-child {  
+  width: 0rpx;
+  height: 0rpx;
+}
+.cu-bar.tabbar .action .tabbar-icon image:last-child,.cu-bar.tabbar .action.cur .tabbar-icon image:first-child {
+  width: 54rpx;
+  height: 54rpx;
+}
+
+.cu-bar.tabbar .action view {
+  font-size: 20rpx;
+} */
+
 .cu-custom {
   display: block;
   position: relative;
@@ -1961,7 +1756,7 @@ button.icon.lg {
 
 .cu-custom .cu-bar {
   padding-right: 220rpx;
-  box-shadow: 0rpx 0rpx 0rpx !important;
+  box-shadow: 0rpx 0rpx 0rpx;
 }
 
 /* ==================
@@ -2010,10 +1805,13 @@ button.icon.lg {
   padding: 30rpx 30rpx 30rpx 120rpx;
   position: relative;
   display: block;
-  color: #ccc;
   z-index: 0;
 }
 
+.cu-timeline>.cu-item:not([class*="text-"]) {
+  color: #ccc;
+}
+
 .cu-timeline>.cu-item::after {
   content: "";
   display: block;
@@ -2056,14 +1854,17 @@ button.icon.lg {
 }
 
 .cu-timeline>.cu-item>.content {
-  background: #f1f1f1;
   padding: 30rpx;
   border-radius: 6rpx;
   display: block;
-  color: #666;
   line-height: 1.6;
 }
 
+.cu-timeline>.cu-item>.content:not([class*="bg-"]) {
+  background: #f1f1f1;
+  color: #666;
+}
+
 .cu-timeline>.cu-item>.content+.content {
   margin-top: 20rpx;
 }
@@ -2100,13 +1901,11 @@ button.icon.lg {
 }
 
 .cu-chat .cu-item>.main .content {
-  background: #fff;
   padding: 20rpx;
   border-radius: 6rpx;
   display: inline-flex;
   max-width: 100%;
   align-items: center;
-  color: #666;
   font-size: 30rpx;
   position: relative;
   min-height: 80rpx;
@@ -2114,6 +1913,11 @@ button.icon.lg {
   text-align: left;
 }
 
+.cu-chat .cu-item>.main .content:not([class*="bg-"]) {
+  background: #fff;
+  color: #666;
+}
+
 .cu-chat .cu-item .date {
   position: absolute;
   font-size: 24rpx;
@@ -2131,23 +1935,49 @@ button.icon.lg {
 
 .cu-chat .cu-item>.main .content::after {
   content: "";
-  top: 24rpx;
-  transform: rotate(180deg);
+  top: 27rpx;
+  transform: rotate(45deg);
   position: absolute;
   z-index: 100;
   display: inline-block;
-  width: 0;
-  height: 0;
-  vertical-align: middle;
-  border-bottom: 16rpx solid transparent;
-  border-top: 16rpx solid transparent;
   overflow: hidden;
-  border-right-color: #fff;
-  border-left: 16rpx solid #333;
-  border-right: 0 dotted;
-  border-left-color: #fff;
-  left: -14rpx;
+  width: 24rpx;
+  height: 24rpx;
+  left: -12rpx;
   right: initial;
+  background-color: inherit;
+}
+
+.cu-chat .cu-item.self>.main .content::after {
+  left: auto;
+  right: -12rpx;
+}
+
+.cu-chat .cu-item>.main .content::before {
+  content: "";
+  top: 30rpx;
+  transform: rotate(45deg);
+  position: absolute;
+  z-index: -1;
+  display: inline-block;
+  overflow: hidden;
+  width: 24rpx;
+  height: 24rpx;
+  left: -12rpx;
+  right: initial;
+  background-color: inherit;
+  filter: blur(5rpx);
+  opacity: 0.3;
+}
+
+.cu-chat .cu-item>.main .content:not([class*="bg-"])::before {
+  background-color: #333;
+  opacity: 0.1;
+}
+
+.cu-chat .cu-item.self>.main .content::before {
+  left: auto;
+  right: -12rpx;
 }
 
 .cu-chat .cu-item.self {
@@ -2155,17 +1985,6 @@ button.icon.lg {
   text-align: right;
 }
 
-.cu-chat .cu-item.self>.main .content::after {
-  left: auto;
-  right: -14rpx;
-  border-right: 16rpx solid #fff;
-  border-left: 0 dotted;
-}
-
-.cu-chat .cu-item.self>.main .bg-green.content::after {
-  border-right-color: #39b50a;
-}
-
 .cu-chat .cu-info {
   display: inline-block;
   margin: 20rpx auto;
@@ -2204,6 +2023,10 @@ button.icon.lg {
   border-radius: 0rpx;
 }
 
+.cu-card .grid.grid-square {
+  margin-bottom: -20rpx;
+}
+
 .cu-card.case .image {
   position: relative;
 }
@@ -2323,7 +2146,7 @@ button.icon.lg {
 
 .cu-form-group {
   background: #fff;
-  padding: 0 30rpx;
+  padding: 1rpx 30rpx;
   display: flex;
   align-items: center;
   min-height: 100rpx;
@@ -2379,7 +2202,7 @@ button.icon.lg {
 }
 
 .cu-form-group .grid-square {
-  margin: 30rpx 0 0 !important;
+  margin: 20rpx 0 0;
 }
 
 .cu-form-group picker {
@@ -2400,7 +2223,7 @@ button.icon.lg {
 }
 
 .cu-form-group picker::after {
-  font-family: iconfont !important;
+  font-family: iconfont;
   display: block;
   content: "\e6a3";
   position: absolute;
@@ -2522,23 +2345,23 @@ button.icon.lg {
 swiper.square-dot .wx-swiper-dot {
   background: #fff;
   opacity: 0.4;
-  width: 10rpx !important;
-  height: 10rpx !important;
-  border-radius: 20rpx !important;
-  transition: all 0.3s ease-in-out 0s !important;
+  width: 10rpx;
+  height: 10rpx;
+  border-radius: 20rpx;
+  transition: all 0.3s ease-in-out 0s;
 }
 
 swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active {
   opacity: 1;
-  width: 30rpx !important;
+  width: 30rpx;
 }
 
 swiper.round-dot .wx-swiper-dot {
   /* background: #39b54a; */
-  width: 10rpx !important;
-  height: 10rpx !important;
-  top: -4rpx !important;
-  transition: all 0.3s ease-in-out 0s !important;
+  width: 10rpx;
+  height: 10rpx;
+  top: -4rpx;
+  transition: all 0.3s ease-in-out 0s;
   position: relative;
 }
 
@@ -2557,9 +2380,9 @@ swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active::after {
 }
 
 swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active {
-  width: 18rpx !important;
-  height: 18rpx !important;
-  top: 0rpx !important;
+  width: 18rpx;
+  height: 18rpx;
+  top: 0rpx;
 }
 
 .screen-swiper {
@@ -2578,11 +2401,11 @@ swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active {
 }
 
 .card-swiper swiper-item {
-  width: 610rpx !important;
-  left: 70rpx !important;
+  width: 610rpx;
+  left: 70rpx;
   box-sizing: border-box;
   padding: 40rpx 0rpx 70rpx;
-  overflow: initial !important;
+  overflow: initial;
 }
 
 .card-swiper swiper-item .bg-img {
@@ -2626,6 +2449,135 @@ swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active {
   border-radius: 6rpx;
 }
 
+/* ==================
+          步骤条
+ ==================== */
+
+.cu-steps {
+  display: flex;
+}
+
+scroll-view.cu-steps {
+  display: block;
+  white-space: nowrap;
+}
+
+scroll-view.cu-steps .cu-item {
+  display: inline-block;
+}
+
+.cu-steps .cu-item {
+  flex: 1;
+  text-align: center;
+  position: relative;
+  min-width: 100rpx;
+}
+
+.cu-steps .cu-item:not([class*="text-"]) {
+  color: #aaa;
+}
+
+.cu-steps .cu-item [class*="icon"], .cu-steps .cu-item .num {
+  display: block;
+  font-size: 40rpx;
+  line-height: 80rpx;
+}
+
+.cu-steps .cu-item::before, .cu-steps .cu-item::after,
+.cu-steps.steps-arrow .cu-item::before, .cu-steps.steps-arrow .cu-item::after {
+  content: "";
+  display: block;
+  position: absolute;
+  height: 0px;
+  width: calc(100% - 80rpx);
+  border-bottom: 1px solid #ccc;
+  left: calc(0px - (100% - 80rpx) / 2);
+  top: 40rpx;
+  z-index: 0;
+}
+
+.cu-steps.steps-arrow .cu-item::before, .cu-steps.steps-arrow .cu-item::after {
+  content: "\e6a3";
+  font-family: 'iconfont';
+  height: 30rpx;
+  border-bottom-width: 0px;
+  line-height: 30rpx;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  color: #ccc;
+}
+
+.cu-steps.steps-bottom .cu-item::before, .cu-steps.steps-bottom .cu-item::after {
+  bottom: 40rpx;
+  top: initial;
+}
+
+.cu-steps .cu-item::after {
+  border-bottom: 1px solid currentColor;
+  width: 0px;
+  transition: all 0.3s ease-in-out 0s;
+}
+
+.cu-steps .cu-item[class*="text-"]::after {
+  width: calc(100% - 80rpx);
+  color: currentColor;
+}
+
+.cu-steps .cu-item:first-child::before, .cu-steps .cu-item:first-child::after {
+  display: none;
+}
+
+.cu-steps .cu-item .num {
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  line-height: 40rpx;
+  margin: 20rpx auto;
+  font-size: 24rpx;
+  border: 1px solid currentColor;
+  position: relative;
+  overflow: hidden;
+}
+
+.cu-steps .cu-item[class*="text-"] .num {
+  background-color: currentColor;
+}
+
+.cu-steps .cu-item .num::before, .cu-steps .cu-item .num::after {
+  content: attr(data-index);
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  transition: all 0.3s ease-in-out 0s;
+  transform: translateY(0rpx);
+}
+
+.cu-steps .cu-item[class*="text-"] .num::before {
+  transform: translateY(-40rpx);
+  color: #fff;
+}
+
+.cu-steps .cu-item .num::after {
+  transform: translateY(40rpx);
+  color: #fff;
+  transition: all 0.3s ease-in-out 0s;
+}
+
+.cu-steps .cu-item[class*="text-"] .num::after {
+  content: "\e645";
+  font-family: 'iconfont';
+  color: #fff;
+  transform: translateY(0rpx);
+}
+
+.cu-steps .cu-item[class*="text-"] .num.err::after {
+  content: "\e646";
+}
+
 /* ==================
           布局
  ==================== */
@@ -2740,7 +2692,6 @@ swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active {
 }
 
 .grid.grid-square {
-  margin-bottom: -20rpx;
   overflow: hidden;
 }
 
@@ -2839,7 +2790,7 @@ swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active {
 /*  -- 内外边距 -- */
 
 .margin-0 {
-  margin: 0 !important;
+  margin: 0;
 }
 
 .margin-xs {
@@ -2993,7 +2944,7 @@ swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active {
 }
 
 .padding-0 {
-  padding: 0 !important;
+  padding: 0;
 }
 
 .padding-xs {
@@ -3164,126 +3115,498 @@ swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active {
 .fr {
   float: right;
 }
+
 /* ==================
-          步骤条
+          背景
  ==================== */
-.cu-steps {
-  display: flex;
+
+.line-red::after, .lines-red::after {
+  border-color: #e54d42;
 }
 
-scroll-view.cu-steps {
-  display: block;
-  white-space: nowrap;
+.line-orange::after, .lines-orange::after {
+  border-color: #f37b1d;
 }
 
-scroll-view.cu-steps .cu-item {
-  display: inline-block;
+.line-yellow::after, .lines-yellow::after {
+  border-color: #fbbd08;
 }
 
-.cu-steps .cu-item {
-  flex: 1;
-  text-align: center;
-  color: #aaa;
+.line-olive::after, .lines-olive::after {
+  border-color: #8dc63f;
+}
+
+.line-green::after, .lines-green::after {
+  border-color: #39b54a;
+}
+
+.line-cyan::after, .lines-cyan::after {
+  border-color: #1cbbb4;
+}
+
+.line-blue::after, .lines-blue::after {
+  border-color: #0081ff;
+}
+
+.line-purple::after, .lines-purple::after {
+  border-color: #6739b6;
+}
+
+.line-mauve::after, .lines-mauve::after {
+  border-color: #9c26b0;
+}
+
+.line-pink::after, .lines-pink::after {
+  border-color: #e03997;
+}
+
+.line-brown::after, .lines-brown::after {
+  border-color: #a5673f;
+}
+
+.line-grey::after, .lines-grey::after {
+  border-color: #8799a3;
+}
+
+.line-gray::after, .lines-gray::after {
+  border-color: #aaa;
+}
+
+.line-black::after, .lines-black::after {
+  border-color: #333;
+}
+
+.line-white::after, .lines-white::after {
+  border-color: #fff;
+}
+
+.bg-red {
+  background-color: #e54d42;
+  color: #fff;
+}
+
+.bg-orange {
+  background-color: #f37b1d;
+  color: #fff;
+}
+
+.bg-yellow {
+  background-color: #fbbd08;
+  color: #333;
+}
+
+.bg-olive {
+  background-color: #8dc63f;
+  color: #fff;
+}
+
+.bg-green {
+  background-color: #39b54a;
+  color: #fff;
+}
+
+.bg-cyan {
+  background-color: #1cbbb4;
+  color: #fff;
+}
+
+.bg-blue {
+  background-color: #0081ff;
+  color: #fff;
+}
+
+.bg-purple {
+  background-color: #6739b6;
+  color: #fff;
+}
+
+.bg-mauve {
+  background-color: #9c26b0;
+  color: #fff;
+}
+
+.bg-pink {
+  background-color: #e03997;
+  color: #fff;
+}
+
+.bg-brown {
+  background-color: #a5673f;
+  color: #fff;
+}
+
+.bg-grey {
+  background-color: #8799a3;
+  color: #fff;
+}
+
+.bg-gray {
+  background-color: #f0f0f0;
+  color: #666;
+}
+
+.bg-black {
+  background-color: #333;
+  color: #fff;
+}
+
+.bg-white {
+  background-color: #fff;
+  color: #666;
+}
+
+.bg-shadeTop {
+  background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
+  color: #fff;
+}
+
+.bg-shadeBottom {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
+  color: #fff;
+}
+
+.bg-red.light {
+  color: #e54d42;
+  background: #fadbd9;
+}
+
+.bg-orange.light {
+  color: #f37b1d;
+  background: #fde6d2;
+}
+
+.bg-yellow.light {
+  color: #fbbd08;
+  background: #fef2ce;
+}
+
+.bg-olive.light {
+  color: #8dc63f;
+  background: #e8f4d9;
+}
+
+.bg-green.light {
+  color: #39b54a;
+  background: #d7f0db;
+}
+
+.bg-cyan.light {
+  color: #1cbbb4;
+  background: #d2f1f0;
+}
+
+.bg-blue.light {
+  color: #0081ff;
+  background: #cce6ff;
+}
+
+.bg-purple.light {
+  color: #6739b6;
+  background: #e1d7f0;
+}
+
+.bg-mauve.light {
+  color: #9c26b0;
+  background: #ebd4ef;
+}
+
+.bg-pink.light {
+  color: #e03997;
+  background: #f9d7ea;
+}
+
+.bg-brown.light {
+  color: #a5673f;
+  background: #ede1d9;
+}
+
+.bg-grey.light {
+  color: #8799a3;
+  background: #e7ebed;
+}
+
+.bg-gray.light {
+  color: #666;
+  background: #fadbd9;
+}
+
+.bg-gray.light {
+  color: #888;
+  background: #f1f1f1;
+}
+
+.bg-gradual-red {
+  background-image: linear-gradient(45deg, #f43f3b, #ec008c);
+  color: #fff;
+}
+
+.bg-gradual-orange {
+  background-image: linear-gradient(45deg, #ff9700, #ed1c24);
+  color: #fff;
+}
+
+.bg-gradual-green {
+  background-image: linear-gradient(45deg, #39b54a, #8dc63f);
+  color: #fff;
+}
+
+.bg-gradual-purple {
+  background-image: linear-gradient(45deg, #9000ff, #5e00ff);
+  color: #fff;
+}
+
+.bg-gradual-pink {
+  background-image: linear-gradient(45deg, #ec008c, #6739b6);
+  color: #fff;
+}
+
+.bg-gradual-blue {
+  background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
+  color: #fff;
+}
+
+.shadow[class*="-red"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(204, 69, 59, 0.2);
+}
+
+.shadow[class*="-orange"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(217, 109, 26, 0.2);
+}
+
+.shadow[class*="-yellow"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(224, 170, 7, 0.2);
+}
+
+.shadow[class*="-olive"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(124, 173, 55, 0.2);
+}
+
+.shadow[class*="-green"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(48, 156, 63, 0.2);
+}
+
+.shadow[class*="-cyan"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(28, 187, 180, 0.2);
+}
+
+.shadow[class*="-blue"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(0, 102, 204, 0.2);
+}
+
+.shadow[class*="-purple"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(88, 48, 156, 0.2);
+}
+
+.shadow[class*="-mauve"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(133, 33, 150, 0.2);
+}
+
+.shadow[class*="-pink"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(199, 50, 134, 0.2);
+}
+
+.cu-btn.shadow[class*="-brown"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(140, 88, 53, 0.2);
+}
+
+.cu-btn.shadow[class*="-grey"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(114, 130, 138, 0.2);
+}
+
+.cu-btn.shadow[class*="-gray"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(114, 130, 138, 0.2);
+}
+
+.cu-btn.shadow[class*="-black"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
+}
+
+.bg-img {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.bg-mask {
+  background-color: #333;
   position: relative;
-  min-width: 100rpx;
 }
 
-.cu-steps .cu-item [class*="icon"], .cu-steps .cu-item .num {
-  display: block;
-  font-size: 40rpx;
-  line-height: 80rpx;
-}
-
-.cu-steps .cu-item::before, .cu-steps .cu-item::after,.cu-steps.steps-arrow .cu-item::before, .cu-steps.steps-arrow .cu-item::after  {
+.bg-mask::after {
   content: "";
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
   display: block;
-  position: absolute;
-  height: 0px;
-  width: calc(100% - 80rpx);
-  border-bottom: 1px solid #ccc;
-  left: calc(0px - (100% - 80rpx) / 2);
-  top: 40rpx;
-  z-index: 0;
-}
-
-.cu-steps.steps-arrow .cu-item::before, .cu-steps.steps-arrow .cu-item::after {
-  content: "\e6a3";  
-  font-family: 'iconfont';
-  height: 30rpx;
-  border-bottom-width: 0px;  
-  line-height: 30rpx;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  color: #ccc;
-}
-
-.cu-steps.steps-bottom .cu-item::before, .cu-steps.steps-bottom .cu-item::after {
-  bottom: 40rpx;
-  top: initial;
-}
-
-.cu-steps .cu-item::after {
-  border-bottom: 1px solid currentColor;
-  width: 0px;
-  transition: all 0.3s ease-in-out 0s;
-}
-
-.cu-steps .cu-item[class*="text-"]::after {
-  width: calc(100% - 80rpx);
-  color: currentColor !important;
-}
-
-.cu-steps .cu-item:first-child::before, .cu-steps .cu-item:first-child::after {
-  display: none;
-}
-
-.cu-steps .cu-item .num {
-  width: 40rpx;
-  height: 40rpx;
-  border-radius: 50%;
-  line-height: 40rpx;
-  margin: 20rpx auto;
-  font-size: 24rpx;
-  border: 1px solid currentColor;
-  position: relative;
-  overflow: hidden;
-}
-
-.cu-steps .cu-item[class*="text-"] .num {
-  background-color: currentColor;
-}
-
-.cu-steps .cu-item .num::before, .cu-steps .cu-item .num::after {
-  content: attr(data-index);
+  background-color: rgba(0, 0, 0, 0.5);
   position: absolute;
   left: 0;
   right: 0;
-  top: 0;
   bottom: 0;
-  margin: auto;
-  transition: all 0.3s ease-in-out 0s;
-  transform: translateY(0rpx);
+  top: 0;
 }
 
-.cu-steps .cu-item[class*="text-"] .num::before {
-  transform: translateY(-40rpx);
+.bg-mask view, .bg-mask cover-view {
+  z-index: 5;
+  position: relative;
+}
+
+.bg-mask>cover-view {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.bg-video {
+  position: relative;
+}
+
+.bg-video video {
+  display: block;
+  height: 100%;
+  width: 100%;
+  -o-object-fit: cover;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+/* ==================
+          文本
+ ==================== */
+
+.text-xs {
+  font-size: 20rpx;
+}
+
+.text-sm {
+  font-size: 24rpx;
+}
+
+.text-df {
+  font-size: 28rpx;
+}
+
+.text-lg {
+  font-size: 32rpx;
+}
+
+.text-xl {
+  font-size: 36rpx;
+}
+
+.text-xxl {
+  font-size: 44rpx;
+}
+
+.text-sl {
+  font-size: 80rpx;
+}
+
+.text-xsl {
+  font-size: 120rpx;
+}
+
+.text-Abc {
+  text-transform: Capitalize;
+}
+
+.text-ABC {
+  text-transform: Uppercase;
+}
+
+.text-abc {
+  text-transform: Lowercase;
+}
+
+.text-price::before {
+  content: "¥";
+  font-size: 80%;
+  margin-right: 4rpx;
+}
+
+.text-cut {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-content {
+  line-height: 1.6;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-red, .line-red, .lines-red {
+  color: #e54d42;
+}
+
+.text-orange, .line-orange, .lines-orange {
+  color: #f37b1d;
+}
+
+.text-yellow, .line-yellow, .lines-yellow {
+  color: #fbbd08;
+}
+
+.text-olive, .line-olive, .lines-olive {
+  color: #8dc63f;
+}
+
+.text-green, .line-green, .lines-green {
+  color: #39b54a;
+}
+
+.text-cyan, .line-cyan, .lines-cyan {
+  color: #1cbbb4;
+}
+
+.text-blue, .line-blue, .lines-blue {
+  color: #0081ff;
+}
+
+.text-purple, .line-purple, .lines-purple {
+  color: #6739b6;
+}
+
+.text-mauve, .line-mauve, .lines-mauve {
+  color: #9c26b0;
+}
+
+.text-pink, .line-pink, .lines-pink {
+  color: #e03997;
+}
+
+.text-brown, .line-brown, .lines-brown {
+  color: #a5673f;
+}
+
+.text-grey, .line-grey, .lines-grey {
+  color: #8799a3;
+}
+
+.text-gray, .line-gray, .lines-gray {
+  color: #aaa;
+}
+
+.text-black, .line-black, .lines-black {
+  color: #333;
+}
+
+.text-white, .line-white, .lines-white {
   color: #fff;
 }
-
-.cu-steps .cu-item .num::after {
-  transform: translateY(40rpx);
-  color: #fff;
-  transition: all 0.3s ease-in-out 0s;
-}
-
-.cu-steps .cu-item[class*="text-"] .num::after {
-  content: "\e645";
-  font-family: 'iconfont';
-  color: #fff;
-  transform: translateY(0rpx);
-}
-
-.cu-steps .cu-item[class*="text-"] .num.err::after {
-  content: "\e646";
-}
diff --git a/demo/custom-tab-bar/index.js b/demo/custom-tab-bar/index.js
new file mode 100644
index 0000000..603b7e6
--- /dev/null
+++ b/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: {
+  },
+})
\ No newline at end of file
diff --git a/demo/custom-tab-bar/index.json b/demo/custom-tab-bar/index.json
new file mode 100644
index 0000000..32640e0
--- /dev/null
+++ b/demo/custom-tab-bar/index.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
\ No newline at end of file
diff --git a/demo/custom-tab-bar/index.wxml b/demo/custom-tab-bar/index.wxml
new file mode 100644
index 0000000..e0f934e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/demo/custom-tab-bar/index.wxss b/demo/custom-tab-bar/index.wxss
new file mode 100644
index 0000000..e69de29
diff --git a/demo/icon.wxss b/demo/icon.wxss
index 74edfe1..3bd84bd 100644
--- a/demo/icon.wxss
+++ b/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 */
diff --git a/demo/pages/about/about/about.js b/demo/pages/about/about/about.js
index 386ee94..7206e5e 100644
--- a/demo/pages/about/about/about.js
+++ b/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 (options) {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
+  onLoad: function () { },
+  pageBack() {
+    wx.navigateBack({
+      delta: 1
+    });
   }
-})
\ No newline at end of file
+});
diff --git a/demo/pages/about/about/about.json b/demo/pages/about/about/about.json
index 8835af0..9e26dfe 100644
--- a/demo/pages/about/about/about.json
+++ b/demo/pages/about/about/about.json
@@ -1,3 +1 @@
-{
-  "usingComponents": {}
-}
\ No newline at end of file
+{}
\ No newline at end of file
diff --git a/demo/pages/about/about/about.wxml b/demo/pages/about/about/about.wxml
index 7cfd7b9..d58792c 100644
--- a/demo/pages/about/about/about.wxml
+++ b/demo/pages/about/about/about.wxml
@@ -1,2 +1,18 @@
-<!--pages/about/about/about.wxml-->
-<text>pages/about/about/about.wxml</text>
+<view class="cu-custom" style="height:{{CustomBar}}px;">
+  <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>
\ No newline at end of file
diff --git a/demo/pages/about/about/about.wxss b/demo/pages/about/about/about.wxss
index 6eee00d..9c23a8f 100644
--- a/demo/pages/about/about/about.wxss
+++ b/demo/pages/about/about/about.wxss
@@ -1 +1,27 @@
-/* pages/about/about/about.wxss */
\ No newline at end of file
+.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;
+}
diff --git a/demo/pages/about/home/home.js b/demo/pages/about/home/home.js
index 7ec8c7c..9d9c704 100644
--- a/demo/pages/about/home/home.js
+++ b/demo/pages/about/home/home.js
@@ -1,66 +1,84 @@
-// pages/about/home/home.js
-Page({
-
-  /**
-   * 页面的初始数据
-   */
+Component({
   data: {
-
+    starCount: 0,
+    forksCount: 0,
+    visitTotal: 0,
   },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad: function (options) {
-
+  methods: {
+    onLoad(options) {
+      let that = this;
+      wx.showLoading({
+        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链接      
+      })
+    },
   },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
+  pageLifetimes: {
+    show() {
+      if (typeof this.getTabBar === 'function' &&
+        this.getTabBar()) {
+        this.getTabBar().setData({
+          selected: 3
+        })
+      }
+    }
   }
 })
\ No newline at end of file
diff --git a/demo/pages/about/home/home.json b/demo/pages/about/home/home.json
index 8835af0..9e26dfe 100644
--- a/demo/pages/about/home/home.json
+++ b/demo/pages/about/home/home.json
@@ -1,3 +1 @@
-{
-  "usingComponents": {}
-}
\ No newline at end of file
+{}
\ No newline at end of file
diff --git a/demo/pages/about/home/home.wxml b/demo/pages/about/home/home.wxml
index 7024580..26859d4 100644
--- a/demo/pages/about/home/home.wxml
+++ b/demo/pages/about/home/home.wxml
@@ -1,2 +1,80 @@
-<!--pages/about/home/home.wxml-->
-<text>pages/about/home/home.wxml</text>
+<view class='UCenter-bg'>
+  <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>
\ No newline at end of file
diff --git a/demo/pages/about/home/home.wxss b/demo/pages/about/home/home.wxss
index 99cc239..d67f2e1 100644
--- a/demo/pages/about/home/home.wxss
+++ b/demo/pages/about/home/home.wxss
@@ -1 +1,39 @@
-/* pages/about/home/home.wxss */
\ No newline at end of file
+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;   
+}
+
+
diff --git a/demo/pages/about/log/log.js b/demo/pages/about/log/log.js
index e6c6760..1441ea8 100644
--- a/demo/pages/about/log/log.js
+++ b/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 (options) {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
+  onLoad: function () { },
+  pageBack() {
+    wx.navigateBack({
+      delta: 1
+    });
   }
-})
\ No newline at end of file
+});
diff --git a/demo/pages/about/log/log.json b/demo/pages/about/log/log.json
index 8835af0..9e26dfe 100644
--- a/demo/pages/about/log/log.json
+++ b/demo/pages/about/log/log.json
@@ -1,3 +1 @@
-{
-  "usingComponents": {}
-}
\ No newline at end of file
+{}
\ No newline at end of file
diff --git a/demo/pages/about/log/log.wxml b/demo/pages/about/log/log.wxml
index ebb6a0a..a1a8bd8 100644
--- a/demo/pages/about/log/log.wxml
+++ b/demo/pages/about/log/log.wxml
@@ -1,2 +1,99 @@
-<!--pages/about/log/log.wxml-->
-<text>pages/about/log/log.wxml</text>
+<view class="cu-custom" style="height:{{CustomBar}}px;">
+  <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>
\ No newline at end of file
diff --git a/demo/pages/about/log/log.wxss b/demo/pages/about/log/log.wxss
index 441b07e..e81280c 100644
--- a/demo/pages/about/log/log.wxss
+++ b/demo/pages/about/log/log.wxss
@@ -1 +1,3 @@
-/* pages/about/log/log.wxss */
\ No newline at end of file
+page {
+  background: #fff;
+}
diff --git a/demo/pages/about/test/filter.js b/demo/pages/about/test/filter.js
index 8bdf3d0..14837bf 100644
--- a/demo/pages/about/test/filter.js
+++ b/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,
   },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad: function (options) {
-
+  tabSelect(e) {
+    console.log(e);
+    this.setData({
+      TabCur: e.currentTarget.dataset.id,
+      scrollLeft: (e.currentTarget.dataset.id - 1) * 60
+    })
   },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
-  }
-})
\ No newline at end of file
+});
diff --git a/demo/pages/about/test/filter.wxml b/demo/pages/about/test/filter.wxml
index f9f6f66..c273c03 100644
--- a/demo/pages/about/test/filter.wxml
+++ b/demo/pages/about/test/filter.wxml
@@ -1,2 +1,28 @@
-<!--pages/about/test/filter.wxml-->
-<text>pages/about/test/filter.wxml</text>
+<view class="cu-custom" style="height:{{CustomBar}}px;">
+  <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>
diff --git a/demo/pages/about/test/filter.wxss b/demo/pages/about/test/filter.wxss
index a5b136f..a4ca520 100644
--- a/demo/pages/about/test/filter.wxss
+++ b/demo/pages/about/test/filter.wxss
@@ -1 +1,20 @@
-/* pages/about/test/filter.wxss */
\ No newline at end of file
+.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);
+}
\ No newline at end of file
diff --git a/demo/pages/about/test/list.js b/demo/pages/about/test/list.js
index 51e08e2..14837bf 100644
--- a/demo/pages/about/test/list.js
+++ b/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,
   },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad: function (options) {
-
+  tabSelect(e) {
+    console.log(e);
+    this.setData({
+      TabCur: e.currentTarget.dataset.id,
+      scrollLeft: (e.currentTarget.dataset.id - 1) * 60
+    })
   },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
-  }
-})
\ No newline at end of file
+});
diff --git a/demo/pages/about/test/list.wxml b/demo/pages/about/test/list.wxml
index 870361f..68275f1 100644
--- a/demo/pages/about/test/list.wxml
+++ b/demo/pages/about/test/list.wxml
@@ -1,2 +1,15 @@
-<!--pages/about/test/list.wxml-->
-<text>pages/about/test/list.wxml</text>
+<view class="cu-custom" style="height:{{CustomBar}}px;">
+  <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>
\ No newline at end of file
diff --git a/demo/pages/about/test/list.wxss b/demo/pages/about/test/list.wxss
index a5499fa..e213789 100644
--- a/demo/pages/about/test/list.wxss
+++ b/demo/pages/about/test/list.wxss
@@ -1 +1 @@
-/* pages/about/test/list.wxss */
\ No newline at end of file
+/* miniprogram/pages/about/test/list.wxss */
\ No newline at end of file
diff --git a/demo/pages/auth/auth.js b/demo/pages/auth/auth.js
index c1ab869..b4df749 100644
--- a/demo/pages/auth/auth.js
+++ b/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,
   },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad: function (options) {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
+  onGetUserInfo: function (e) {
+    if (!this.logged && e.detail.userInfo) {
+      app.globalData.userInfo = e.detail.userInfo;
+      wx.switchTab({
+        url: '/pages/basics/home/home',
+      })
+    }
   }
-})
\ No newline at end of file
+});
diff --git a/demo/pages/auth/auth.json b/demo/pages/auth/auth.json
index 8835af0..9e26dfe 100644
--- a/demo/pages/auth/auth.json
+++ b/demo/pages/auth/auth.json
@@ -1,3 +1 @@
-{
-  "usingComponents": {}
-}
\ No newline at end of file
+{}
\ No newline at end of file
diff --git a/demo/pages/auth/auth.wxml b/demo/pages/auth/auth.wxml
index b75058d..85f1b3a 100644
--- a/demo/pages/auth/auth.wxml
+++ b/demo/pages/auth/auth.wxml
@@ -1,2 +1,12 @@
-<!--pages/auth/auth.wxml-->
-<text>pages/auth/auth.wxml</text>
+<view class='UCenter-bg'>
+  <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>
\ No newline at end of file
diff --git a/demo/pages/auth/auth.wxss b/demo/pages/auth/auth.wxss
index 656b39d..3328361 100644
--- a/demo/pages/auth/auth.wxss
+++ b/demo/pages/auth/auth.wxss
@@ -1 +1,34 @@
-/* pages/auth/auth.wxss */
\ No newline at end of file
+.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;
+}
\ No newline at end of file
diff --git a/demo/pages/basics/avatar/avatar.wxml b/demo/pages/basics/avatar/avatar.wxml
index e907bca..1e4bdb0 100644
--- a/demo/pages/basics/avatar/avatar.wxml
+++ b/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>
diff --git a/demo/pages/basics/background/background.wxml b/demo/pages/basics/background/background.wxml
index 3481b60..b466a4f 100644
--- a/demo/pages/basics/background/background.wxml
+++ b/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>
diff --git a/demo/pages/basics/button/button.wxml b/demo/pages/basics/button/button.wxml
index 3f5743e..691e0a4 100644
--- a/demo/pages/basics/button/button.wxml
+++ b/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>
diff --git a/demo/pages/basics/button/button.wxss b/demo/pages/basics/button/button.wxss
index 136d063..e69de29 100644
--- a/demo/pages/basics/button/button.wxss
+++ b/demo/pages/basics/button/button.wxss
@@ -1 +0,0 @@
-  
\ No newline at end of file
diff --git a/demo/pages/basics/button/design.wxml b/demo/pages/basics/button/design.wxml
index 708d07e..6ac4ee7 100644
--- a/demo/pages/basics/button/design.wxml
+++ b/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">
diff --git a/demo/pages/basics/home/home.js b/demo/pages/basics/home/home.js
index a6b7037..4b5d99d 100644
--- a/demo/pages/basics/home/home.js
+++ b/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
+        })
+      }
+    }
   }
-})
+})
\ No newline at end of file
diff --git a/demo/pages/basics/home/home.wxss b/demo/pages/basics/home/home.wxss
index dfb5579..6fc6f7a 100644
--- a/demo/pages/basics/home/home.wxss
+++ b/demo/pages/basics/home/home.wxss
@@ -1,3 +1,3 @@
-.weui-tabbar{
-  left: 0px !important;
+page{
+  padding-bottom: 100rpx;
 }
\ No newline at end of file
diff --git a/demo/pages/basics/icon/icon.wxml b/demo/pages/basics/icon/icon.wxml
index e20074d..acd011c 100644
--- a/demo/pages/basics/icon/icon.wxml
+++ b/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>
diff --git a/demo/pages/basics/image/image.js b/demo/pages/basics/image/image.js
deleted file mode 100644
index 52d317b..0000000
--- a/demo/pages/basics/image/image.js
+++ /dev/null
@@ -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 () {
-
-  }
-})
\ No newline at end of file
diff --git a/demo/pages/basics/image/image.json b/demo/pages/basics/image/image.json
deleted file mode 100644
index 8835af0..0000000
--- a/demo/pages/basics/image/image.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "usingComponents": {}
-}
\ No newline at end of file
diff --git a/demo/pages/basics/image/image.wxml b/demo/pages/basics/image/image.wxml
deleted file mode 100644
index 0b0d421..0000000
--- a/demo/pages/basics/image/image.wxml
+++ /dev/null
@@ -1,2 +0,0 @@
-<!--pages/basics/image/image.wxml-->
-<text>pages/basics/image/image.wxml</text>
diff --git a/demo/pages/basics/image/image.wxss b/demo/pages/basics/image/image.wxss
deleted file mode 100644
index 488b8bc..0000000
--- a/demo/pages/basics/image/image.wxss
+++ /dev/null
@@ -1 +0,0 @@
-/* pages/basics/image/image.wxss */
\ No newline at end of file
diff --git a/demo/pages/basics/layout/layout.wxml b/demo/pages/basics/layout/layout.wxml
index 2a4e073..42fe51a 100644
--- a/demo/pages/basics/layout/layout.wxml
+++ b/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>
diff --git a/demo/pages/basics/loading/loading.wxml b/demo/pages/basics/loading/loading.wxml
index c69046c..7c7d62d 100644
--- a/demo/pages/basics/loading/loading.wxml
+++ b/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>
diff --git a/demo/pages/basics/progress/progress.wxml b/demo/pages/basics/progress/progress.wxml
index 70e1a1b..098175c 100644
--- a/demo/pages/basics/progress/progress.wxml
+++ b/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>
diff --git a/demo/pages/basics/shadow/shadow.wxml b/demo/pages/basics/shadow/shadow.wxml
index 3dcd2a1..172c5db 100644
--- a/demo/pages/basics/shadow/shadow.wxml
+++ b/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>
diff --git a/demo/pages/basics/tag/tag.wxml b/demo/pages/basics/tag/tag.wxml
index 208a955..dda6863 100644
--- a/demo/pages/basics/tag/tag.wxml
+++ b/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>
diff --git a/demo/pages/basics/text/text.wxml b/demo/pages/basics/text/text.wxml
index c11184d..37e08b7 100644
--- a/demo/pages/basics/text/text.wxml
+++ b/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>
diff --git a/demo/pages/component/bar/bar.wxml b/demo/pages/component/bar/bar.wxml
index 184fb0b..6c70234 100644
--- a/demo/pages/component/bar/bar.wxml
+++ b/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='action'>
-    <text class='icon-back text-gray'></text>
-    <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-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-add'></text> </button>
+    <text class='icon-title text-green'></text>
+    <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-recordfill text-red'></text>
+    <text class='icon-title text-green'></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='action'>
-    <text class='icon-close'></text> 关闭
+  <view class="cu-bar 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>
-  <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>
\ No newline at end of file
diff --git a/demo/pages/component/bar/bar.wxss b/demo/pages/component/bar/bar.wxss
index e69de29..8c56dd2 100644
--- a/demo/pages/component/bar/bar.wxss
+++ b/demo/pages/component/bar/bar.wxss
@@ -0,0 +1,7 @@
+.box {  
+  margin: 20rpx; 
+}
+
+.box view.cu-bar {
+  margin-top: 20rpx; 
+}
diff --git a/demo/pages/component/card/card.wxml b/demo/pages/component/card/card.wxml
index d1cc97f..61efc80 100644
--- a/demo/pages/component/card/card.wxml
+++ b/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>
diff --git a/demo/pages/component/chat/chat.wxml b/demo/pages/component/chat/chat.wxml
index ad28815..ee2fbea 100644
--- a/demo/pages/component/chat/chat.wxml
+++ b/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>
diff --git a/demo/pages/component/form/form.wxml b/demo/pages/component/form/form.wxml
index b3cff46..2a07bf3 100644
--- a/demo/pages/component/form/form.wxml
+++ b/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>
diff --git a/demo/pages/component/home/home.js b/demo/pages/component/home/home.js
index 882fcde..e904af7 100644
--- a/demo/pages/component/home/home.js
+++ b/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
+        })
+      }
+    }
+  }
 })
diff --git a/demo/pages/component/home/home.json b/demo/pages/component/home/home.json
index 9e26dfe..8835af0 100644
--- a/demo/pages/component/home/home.json
+++ b/demo/pages/component/home/home.json
@@ -1 +1,3 @@
-{}
\ No newline at end of file
+{
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/demo/pages/component/home/home.wxss b/demo/pages/component/home/home.wxss
index e69de29..6fc6f7a 100644
--- a/demo/pages/component/home/home.wxss
+++ b/demo/pages/component/home/home.wxss
@@ -0,0 +1,3 @@
+page{
+  padding-bottom: 100rpx;
+}
\ No newline at end of file
diff --git a/demo/pages/component/list/list.wxml b/demo/pages/component/list/list.wxml
index 863553b..e2f4c42 100644
--- a/demo/pages/component/list/list.wxml
+++ b/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>
diff --git a/demo/pages/component/modal/modal.wxml b/demo/pages/component/modal/modal.wxml
index 82a3153..efbb407 100644
--- a/demo/pages/component/modal/modal.wxml
+++ b/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>
diff --git a/demo/pages/component/nav/nav.wxml b/demo/pages/component/nav/nav.wxml
index de7c7c8..324218b 100644
--- a/demo/pages/component/nav/nav.wxml
+++ b/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>
diff --git a/demo/pages/component/steps/steps.wxml b/demo/pages/component/steps/steps.wxml
index 83748e2..f712ce9 100644
--- a/demo/pages/component/steps/steps.wxml
+++ b/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>
diff --git a/demo/pages/component/swiper/swiper.wxml b/demo/pages/component/swiper/swiper.wxml
index 56a3464..d1ffe47 100644
--- a/demo/pages/component/swiper/swiper.wxml
+++ b/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>
diff --git a/demo/pages/component/timeline/timeline.wxml b/demo/pages/component/timeline/timeline.wxml
index 8ee5223..4f7084b 100644
--- a/demo/pages/component/timeline/timeline.wxml
+++ b/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">
diff --git a/demo/pages/plugin/animation/animation.js b/demo/pages/plugin/animation/animation.js
index 6849e45..93ef5a8 100644
--- a/demo/pages/plugin/animation/animation.js
+++ b/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)
+  }
+})
\ No newline at end of file
diff --git a/demo/pages/plugin/animation/animation.wxml b/demo/pages/plugin/animation/animation.wxml
index 267c8e3..3f6578e 100644
--- a/demo/pages/plugin/animation/animation.wxml
+++ b/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'>
diff --git a/demo/pages/plugin/animation/animation.wxss b/demo/pages/plugin/animation/animation.wxss
index 787a6f7..0958e03 100644
--- a/demo/pages/plugin/animation/animation.wxss
+++ b/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)
+    }
+}
\ No newline at end of file
diff --git a/demo/pages/plugin/gradual/gradual.wxml b/demo/pages/plugin/gradual/gradual.wxml
index cca93ee..077984b 100644
--- a/demo/pages/plugin/gradual/gradual.wxml
+++ b/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>
diff --git a/demo/pages/plugin/home/home.js b/demo/pages/plugin/home/home.js
index 16b0dc2..8034b52 100644
--- a/demo/pages/plugin/home/home.js
+++ b/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) {
-    wx.navigateTo({
-      url: e.currentTarget.dataset.url
-    })
+  methods: {
+    toChild(e) {
+      wx.navigateTo({
+        url: e.currentTarget.dataset.url
+      })
+    },
   },
-
+  pageLifetimes: {
+    show() {
+      if (typeof this.getTabBar === 'function' &&
+        this.getTabBar()) {
+        this.getTabBar().setData({
+          selected: 2
+        })
+      }
+    }
+  }
 });
\ No newline at end of file
diff --git a/demo/pages/plugin/home/home.wxss b/demo/pages/plugin/home/home.wxss
index 4329a34..e5bbb3b 100644
--- a/demo/pages/plugin/home/home.wxss
+++ b/demo/pages/plugin/home/home.wxss
@@ -1,4 +1,6 @@
-
+page{
+  padding-bottom: 100rpx;
+}
 .cu-bar .content image{
   height: 60rpx;
   width: 240rpx;
diff --git a/demo/pages/plugin/indexes/indexes.wxml b/demo/pages/plugin/indexes/indexes.wxml
index dede969..f0cc4d7 100644
--- a/demo/pages/plugin/indexes/indexes.wxml
+++ b/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">
diff --git a/demo/project.config.json b/demo/project.config.json
index 7f2efdb..65b8899 100644
--- a/demo/project.config.json
+++ b/demo/project.config.json
@@ -1,200 +1,230 @@
 {
-  "description": "项目配置文件",
-  "packOptions": {
-    "ignore": []
-  },
-  "setting": {
-    "urlCheck": true,
-    "es6": true,
-    "postcss": true,
-    "minified": true,
-    "newFeature": true
-  },
-  "compileType": "miniprogram",
-  "libVersion": "2.4.1",
-  "appid": "wxfd5241d66a07713f",
-  "projectname": "ColorUI2.0-test",
-  "debugOptions": {
-    "hidedInDevtools": []
-  },
-  "isGameTourist": false,
-  "condition": {
-    "search": {
-      "current": -1,
-      "list": []
-    },
-    "conversation": {
-      "current": -1,
-      "list": []
-    },
-    "plugin": {
-      "current": -1,
-      "list": []
-    },
-    "game": {
-      "currentL": -1,
-      "list": []
-    },
-    "miniprogram": {
-      "current": 2,
-      "list": [
-        {
-          "id": 0,
-          "name": "-----基础-首页-----",
-          "pathName": "pages/basics/home/home",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "1.1 基础-布局",
-          "pathName": "pages/basics/layout/layout",
-          "query": ""
-        },
-        {
-          "id": 2,
-          "name": "1.2 基础-背景",
-          "pathName": "pages/basics/background/background",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "1.3 基础-文本",
-          "pathName": "pages/basics/text/text",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "1.4 基础-图标",
-          "pathName": "pages/basics/icon/icon",
-          "query": ""
-        },
-        {
-          "id": 2,
-          "name": "1.5 基础-按钮",
-          "pathName": "pages/basics/button/button",
-          "query": ""
-        },
-        {
-          "id": 2,
-          "name": "1.5 -- 基础-按钮-设计",
-          "pathName": "pages/basics/button/design",
-          "query": ""
-        },
-        {
-          "id": 2,
-          "name": "1.6 基础-标签",
-          "pathName": "pages/basics/tag/tag",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "1.7 基础-头像",
-          "pathName": "pages/basics/avatar/avatar",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "1.8 基础-进度条",
-          "pathName": "pages/basics/progress/progress",
-          "query": ""
-        },
-        {
-          "id": 10,
-          "name": "1.9 基础-边框阴影",
-          "pathName": "pages/basics/shadow/shadow",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "1.10 基础-加载",
-          "pathName": "pages/basics/loading/loading",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "-----组件-首页-----",
-          "pathName": "pages/component/home/home",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "2.1 组件-操作条",
-          "pathName": "pages/component/bar/bar",
-          "query": ""
-        },
-        {
-          "id": 12,
-          "name": "2.2 组件-导航栏",
-          "pathName": "pages/component/nav/nav",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "2.3 组件-列表",
-          "pathName": "pages/component/list/list",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "2.4 组件-卡片",
-          "pathName": "pages/component/card/card",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "2.5 组件-表单",
-          "pathName": "pages/component/form/form",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "2.6 组件-时间轴",
-          "pathName": "pages/component/timeline/timeline",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "2.7 组件-聊天",
-          "pathName": "pages/component/chat/chat",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "2.8 组件-轮播",
-          "pathName": "pages/component/swiper/swiper",
-          "query": ""
-        },
-        {
-          "id": 20,
-          "name": "2.9 组件-模态框",
-          "pathName": "pages/component/modal/modal",
-          "query": ""
-        },
-        {
-          "id": 20,
-          "name": "2.10 组件-步骤条",
-          "pathName": "pages/component/steps/steps",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "-----扩展-首页-----",
-          "pathName": "pages/plugin/home/home",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "3.1 扩展-索引",
-          "pathName": "pages/plugin/indexes/indexes",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "3.2 扩展-动画",
-          "pathName": "pages/plugin/animation/animation",
-          "query": ""
-        }
-      ]
-    }
-  }
+	"description": "项目配置文件",
+	"packOptions": {
+		"ignore": []
+	},
+	"setting": {
+		"urlCheck": true,
+		"es6": true,
+		"postcss": true,
+		"minified": true,
+		"newFeature": true
+	},
+	"compileType": "miniprogram",
+	"libVersion": "2.5.2",
+	"appid": "wxfd5241d66a07713f",
+	"projectname": "ColorUI2.0-test",
+	"debugOptions": {
+		"hidedInDevtools": []
+	},
+	"isGameTourist": false,
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"plugin": {
+			"current": -1,
+			"list": []
+		},
+		"game": {
+			"currentL": -1,
+			"list": []
+		},
+		"miniprogram": {
+			"current": 2,
+			"list": [
+				{
+					"id": 0,
+					"name": "-----基础-首页-----",
+					"pathName": "pages/basics/home/home",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "1.1 基础-布局",
+					"pathName": "pages/basics/layout/layout",
+					"query": ""
+				},
+				{
+					"id": 2,
+					"name": "1.2 基础-背景",
+					"pathName": "pages/basics/background/background",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "1.3 基础-文本",
+					"pathName": "pages/basics/text/text",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "1.4 基础-图标",
+					"pathName": "pages/basics/icon/icon",
+					"query": ""
+				},
+				{
+					"id": 2,
+					"name": "1.5 基础-按钮",
+					"pathName": "pages/basics/button/button",
+					"query": ""
+				},
+				{
+					"id": 2,
+					"name": "1.5 -- 基础-按钮-设计",
+					"pathName": "pages/basics/button/design",
+					"query": ""
+				},
+				{
+					"id": 2,
+					"name": "1.6 基础-标签",
+					"pathName": "pages/basics/tag/tag",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "1.7 基础-头像",
+					"pathName": "pages/basics/avatar/avatar",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "1.8 基础-进度条",
+					"pathName": "pages/basics/progress/progress",
+					"query": ""
+				},
+				{
+					"id": 10,
+					"name": "1.9 基础-边框阴影",
+					"pathName": "pages/basics/shadow/shadow",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "1.10 基础-加载",
+					"pathName": "pages/basics/loading/loading",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "-----组件-首页-----",
+					"pathName": "pages/component/home/home",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "2.1 组件-操作条",
+					"pathName": "pages/component/bar/bar",
+					"query": ""
+				},
+				{
+					"id": 12,
+					"name": "2.2 组件-导航栏",
+					"pathName": "pages/component/nav/nav",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "2.3 组件-列表",
+					"pathName": "pages/component/list/list",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "2.4 组件-卡片",
+					"pathName": "pages/component/card/card",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "2.5 组件-表单",
+					"pathName": "pages/component/form/form",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "2.6 组件-时间轴",
+					"pathName": "pages/component/timeline/timeline",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "2.7 组件-聊天",
+					"pathName": "pages/component/chat/chat",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "2.8 组件-轮播",
+					"pathName": "pages/component/swiper/swiper",
+					"query": ""
+				},
+				{
+					"id": 20,
+					"name": "2.9 组件-模态框",
+					"pathName": "pages/component/modal/modal",
+					"query": ""
+				},
+				{
+					"id": 20,
+					"name": "2.10 组件-步骤条",
+					"pathName": "pages/component/steps/steps",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "-----扩展-首页-----",
+					"pathName": "pages/plugin/home/home",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "3.1 扩展-索引",
+					"pathName": "pages/plugin/indexes/indexes",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "3.2 扩展-动画",
+					"pathName": "pages/plugin/animation/animation",
+					"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": ""
+				}
+			]
+		}
+	}
 }
\ No newline at end of file