diff --git a/Colorui-UniApp/App.vue b/Colorui-UniApp/App.vue
index 763e269..3469497 100644
--- a/Colorui-UniApp/App.vue
+++ b/Colorui-UniApp/App.vue
@@ -116,8 +116,8 @@
 </script>
 
 <style>
-	@import "colorui/main.css";
 	@import "colorui/icon.css";
+	@import "colorui/main.css";
 
 	.nav-list {
 		display: flex;
@@ -247,4 +247,7 @@
 			transform: translateY(0px);
 		}
 	}
+	html{
+		font-size: 18.75px !important;
+	}
 </style>
diff --git a/Colorui-UniApp/Colorui-UniApp214.zip b/Colorui-UniApp/Colorui-UniApp214.zip
new file mode 100644
index 0000000..dd4b0b4
Binary files /dev/null and b/Colorui-UniApp/Colorui-UniApp214.zip differ
diff --git a/Colorui-UniApp/README-GitHub.md b/Colorui-UniApp/README-GitHub.md
new file mode 100644
index 0000000..4a70085
--- /dev/null
+++ b/Colorui-UniApp/README-GitHub.md
@@ -0,0 +1,158 @@
+<p style="text-align: center;"><img src="https://image.weilanwl.com/uni/UniAppReadme.jpg" alt="ColorUI简介"></img></p>
+
+## 前言
+ColorUI是一个css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作我也有简单写，可以为你开发提供一些思路。
+## 交流
+微信群：加入微信群请先添加开发者微信，备注UniApp插件市场。QQ群：240787041 或扫描二维码。
+<p align="center"><img src="https://image.weilanwl.com/colorui/githubQrcode.jpg" alt="" style="max-width:100%;" width="748"></p>				  
+
+## 素材
+ColorUI在语雀有个群友共同在维护的知识库，里面有一些群友改的模板和UI素材供开发使用哦！
+[语雀-ColorUI群资源](https://www.yuque.com/colorui)
+
+## 使用UniApp开发
+### 开始
+下载源码解压获得`/Colorui-UniApp`文件夹，复制目录下的 `/colorui` 文件夹到你的项目根目录
+
+`App.vue` 引入关键Css `main.css` `icon.css`
+```
+<style>
+    @import "colorui/main.css";
+	@import "colorui/icon.css";
+	@import "app.css"; /* 你的项目css */
+	....
+</style>
+```
+
+### 使用自定义导航栏
+导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。
+
+`App.vue` 获得系统信息
+```
+onLaunch: function() {
+	uni.getSystemInfo({
+		success: function(e) {
+			// #ifndef MP
+			Vue.prototype.StatusBar = e.statusBarHeight;
+			if (e.platform == 'android') {
+				Vue.prototype.CustomBar = e.statusBarHeight + 50;
+			} else {
+				Vue.prototype.CustomBar = e.statusBarHeight + 45;
+			};
+			// #endif
+			// #ifdef MP-WEIXIN
+			Vue.prototype.StatusBar = e.statusBarHeight;
+			let custom = wx.getMenuButtonBoundingClientRect();
+			Vue.prototype.Custom = custom;
+			Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
+			// #endif		
+			// #ifdef MP-ALIPAY
+			Vue.prototype.StatusBar = e.statusBarHeight;
+			Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
+			// #endif
+		}
+	})
+},
+```
+
+`pages.json` 配置取消系统导航栏
+```
+"globalStyle": {
+	"navigationStyle": "custom"
+},
+```
+复制代码结构可以直接使用，注意全局变量的获取。
+
+使用封装,在`main.js` 引入 `cu-custom` 组件。
+```
+import cuCustom from './colorui/components/cu-custom.vue'
+Vue.component('cu-custom',cuCustom)
+```
+
+`page.vue` 页面可以直接调用了
+```
+<cu-custom bgColor="bg-gradual-blue" :isBack="true">
+	<block slot="backText">返回</block>
+	<block slot="content">导航栏</block>
+</cu-custom>
+```
+| 参数       | 作用   |类型    |  默认值 |
+| --------   | -----:  |-----:  | :----:  |
+| bgColor    | 背景颜色类名 |String  |   ''    |
+| isBack     | 是否开启返回 | Boolean |   false |
+| bgImage    | 背景图片路径 | String  |  ''     |
+
+| slot块       | 作用   |
+| --------   | -----:  |
+| backText    | 返回时的文字 | 
+| content     | 中间区域 | 
+| right    | 右侧区域(小程序端可使用范围很窄！)  | 
+
+## 使用原生小程序开发
+### 从现有项目开始 
+下载源码解压获得`/demo`，复制目录下的 `/colorui` 文件夹到你的项目根目录
+
+`App.wxss` 引入关键Css `main.wxss` `icon.wxss`
+```
+@import "colorui/main.wxss";
+@import "colorui/icon.wxss";
+@import "app.css"; /* 你的项目css */
+	....
+```
+
+### 使用自定义导航栏
+导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。
+
+`App.js` 获得系统信息
+```
+ onLaunch: function() {
+    wx.getSystemInfo({
+      success: e => {
+        this.globalData.StatusBar = e.statusBarHeight;
+        let custom = wx.getMenuButtonBoundingClientRect();
+        this.globalData.Custom = custom;  
+        this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
+      }
+    })
+},
+```
+
+`App.json` 配置取消系统导航栏,并全局引入组件
+```
+"window": {
+	"navigationStyle": "custom"
+},
+"usingComponents": {
+    "cu-custom":"/colorui/components/cu-custom"
+}
+```
+
+`page.wxml` 页面可以直接调用了
+```
+<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
+	<view slot="backText">返回</view>
+	<view slot="content">导航栏</view>
+</cu-custom>
+
+```
+| 参数       | 作用   |类型    |  默认值 |
+| --------   | -----:  |-----:  | :----:  |
+| bgColor    | 背景颜色类名 |String  |   ''    |
+| isBack     | 是否开启返回 | Boolean |   false |
+| isCustom   | 是否开启左侧胶囊 | Boolean |   false |
+| bgImage    | 背景图片路径 | String  |  ''     |
+
+| slot块       | 作用   |
+| --------   | -----:  |
+| backText    | 返回时的文字 | 
+| content     | 中间区域 | 
+| right    | 右侧区域(小程序端可使用范围很窄！)  | 
+
+### 从新项目开始
+下载源码解压获得`/template`，复制`/template`并重命名为你的项目，导入到小程序开发工具既可以开始你的新项目了
+
+## 赞赏
+<p align="center"><img src="https://image.weilanwl.com/colorui/githubAppreciate.jpg" alt="" style="max-width:100%;" width="600"></p>
+
+
+
diff --git a/Colorui-UniApp/Readme.md b/Colorui-UniApp/Readme.md
index 0c65808..29b71a9 100644
--- a/Colorui-UniApp/Readme.md
+++ b/Colorui-UniApp/Readme.md
@@ -5,6 +5,7 @@ ColorUI是一个css库！！！在你引入样式后可以根据class来调用
 
 ## 交流
 微信群：加入微信群请先添加开发者微信，备注UniApp插件市场。QQ群：240787041 或扫描二维码。
+<p style="text-align: center;"><img src="https://image.weilanwl.com/colorui/githubQrcode.jpg" alt="" style="max-width:100%;" width="748"></p>				  
 
 ## 素材
 ColorUI在语雀有个群友共同在维护的知识库，里面有一些群友改的模板和UI素材供开发使用哦！
@@ -41,12 +42,15 @@ onLaunch: function() {
 				Vue.prototype.CustomBar = e.statusBarHeight + 45;
 			};
 			// #endif
-			
-			// #ifdef MP
+			// #ifdef MP-WEIXIN
 			Vue.prototype.StatusBar = e.statusBarHeight;
 			let custom = wx.getMenuButtonBoundingClientRect();
 			Vue.prototype.Custom = custom;
 			Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
+			// #endif		
+			// #ifdef MP-ALIPAY
+			Vue.prototype.StatusBar = e.statusBarHeight;
+			Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
 			// #endif
 		}
 	})
@@ -99,6 +103,13 @@ Vue.component('cu-custom',cuCustom)
 
 ## 更新日志
 
+ * 2019年4月14日 v2.1.4
+    *  新增多种阴影
+	*  修复一些var属性的错误
+	*  修复轮播图控制点隐藏不了
+	*  修改图标类名
+
+ 
  * 2019年4月01日 v2.1.3
     *  优化代码,支持支付宝小程序
 	*  textarea 样式还原
diff --git a/Colorui-UniApp/colorui/components/cu-custom.vue b/Colorui-UniApp/colorui/components/cu-custom.vue
index 23ecf6a..b09f70d 100644
--- a/Colorui-UniApp/colorui/components/cu-custom.vue
+++ b/Colorui-UniApp/colorui/components/cu-custom.vue
@@ -3,7 +3,7 @@
 		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
 			<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
 				<view class="action" @tap="BackPage" v-if="isBack">
-					<text class="icon-back"></text>
+					<text class="cuIcon-back"></text>
 					<slot name="backText"></slot>
 				</view>
 				<view class="content" :style="[{top:StatusBar + 'px'}]">
diff --git a/Colorui-UniApp/colorui/icon.css b/Colorui-UniApp/colorui/icon.css
index 4848771..791d354 100644
--- a/Colorui-UniApp/colorui/icon.css
+++ b/Colorui-UniApp/colorui/icon.css
@@ -22,9 +22,7 @@
 	display: inline-block;
 }
 
-text[class*="icon-"],
-view[class*="icon-"],
-button[class*="icon-"] {
+[class*="cuIcon-"] {
 	font-family: "cuIcon";
 	font-size: inherit;
 	font-style: normal;
@@ -43,1186 +41,1186 @@ button[class*="icon-"] {
 	/* iOS 4.1- */
 }
 
-.icon-appreciate:before {
+.cuIcon-appreciate:before {
 	content: "\e644";
 }
 
-.icon-check:before {
+.cuIcon-check:before {
 	content: "\e645";
 }
 
-.icon-close:before {
+.cuIcon-close:before {
 	content: "\e646";
 }
 
-.icon-edit:before {
+.cuIcon-edit:before {
 	content: "\e649";
 }
 
-.icon-emoji:before {
+.cuIcon-emoji:before {
 	content: "\e64a";
 }
 
-.icon-favorfill:before {
+.cuIcon-favorfill:before {
 	content: "\e64b";
 }
 
-.icon-favor:before {
+.cuIcon-favor:before {
 	content: "\e64c";
 }
 
-.icon-loading:before {
+.cuIcon-loading:before {
 	content: "\e64f";
 }
 
-.icon-locationfill:before {
+.cuIcon-locationfill:before {
 	content: "\e650";
 }
 
-.icon-location:before {
+.cuIcon-location:before {
 	content: "\e651";
 }
 
-.icon-phone:before {
+.cuIcon-phone:before {
 	content: "\e652";
 }
 
-.icon-roundcheckfill:before {
+.cuIcon-roundcheckfill:before {
 	content: "\e656";
 }
 
-.icon-roundcheck:before {
+.cuIcon-roundcheck:before {
 	content: "\e657";
 }
 
-.icon-roundclosefill:before {
+.cuIcon-roundclosefill:before {
 	content: "\e658";
 }
 
-.icon-roundclose:before {
+.cuIcon-roundclose:before {
 	content: "\e659";
 }
 
-.icon-roundrightfill:before {
+.cuIcon-roundrightfill:before {
 	content: "\e65a";
 }
 
-.icon-roundright:before {
+.cuIcon-roundright:before {
 	content: "\e65b";
 }
 
-.icon-search:before {
+.cuIcon-search:before {
 	content: "\e65c";
 }
 
-.icon-taxi:before {
+.cuIcon-taxi:before {
 	content: "\e65d";
 }
 
-.icon-timefill:before {
+.cuIcon-timefill:before {
 	content: "\e65e";
 }
 
-.icon-time:before {
+.cuIcon-time:before {
 	content: "\e65f";
 }
 
-.icon-unfold:before {
+.cuIcon-unfold:before {
 	content: "\e661";
 }
 
-.icon-warnfill:before {
+.cuIcon-warnfill:before {
 	content: "\e662";
 }
 
-.icon-warn:before {
+.cuIcon-warn:before {
 	content: "\e663";
 }
 
-.icon-camerafill:before {
+.cuIcon-camerafill:before {
 	content: "\e664";
 }
 
-.icon-camera:before {
+.cuIcon-camera:before {
 	content: "\e665";
 }
 
-.icon-commentfill:before {
+.cuIcon-commentfill:before {
 	content: "\e666";
 }
 
-.icon-comment:before {
+.cuIcon-comment:before {
 	content: "\e667";
 }
 
-.icon-likefill:before {
+.cuIcon-likefill:before {
 	content: "\e668";
 }
 
-.icon-like:before {
+.cuIcon-like:before {
 	content: "\e669";
 }
 
-.icon-notificationfill:before {
+.cuIcon-notificationfill:before {
 	content: "\e66a";
 }
 
-.icon-notification:before {
+.cuIcon-notification:before {
 	content: "\e66b";
 }
 
-.icon-order:before {
+.cuIcon-order:before {
 	content: "\e66c";
 }
 
-.icon-samefill:before {
+.cuIcon-samefill:before {
 	content: "\e66d";
 }
 
-.icon-same:before {
+.cuIcon-same:before {
 	content: "\e66e";
 }
 
-.icon-deliver:before {
+.cuIcon-deliver:before {
 	content: "\e671";
 }
 
-.icon-evaluate:before {
+.cuIcon-evaluate:before {
 	content: "\e672";
 }
 
-.icon-pay:before {
+.cuIcon-pay:before {
 	content: "\e673";
 }
 
-.icon-send:before {
+.cuIcon-send:before {
 	content: "\e675";
 }
 
-.icon-shop:before {
+.cuIcon-shop:before {
 	content: "\e676";
 }
 
-.icon-ticket:before {
+.cuIcon-ticket:before {
 	content: "\e677";
 }
 
-.icon-back:before {
+.cuIcon-back:before {
 	content: "\e679";
 }
 
-.icon-cascades:before {
+.cuIcon-cascades:before {
 	content: "\e67c";
 }
 
-.icon-discover:before {
+.cuIcon-discover:before {
 	content: "\e67e";
 }
 
-.icon-list:before {
+.cuIcon-list:before {
 	content: "\e682";
 }
 
-.icon-more:before {
+.cuIcon-more:before {
 	content: "\e684";
 }
 
-.icon-scan:before {
+.cuIcon-scan:before {
 	content: "\e689";
 }
 
-.icon-settings:before {
+.cuIcon-settings:before {
 	content: "\e68a";
 }
 
-.icon-questionfill:before {
+.cuIcon-questionfill:before {
 	content: "\e690";
 }
 
-.icon-question:before {
+.cuIcon-question:before {
 	content: "\e691";
 }
 
-.icon-shopfill:before {
+.cuIcon-shopfill:before {
 	content: "\e697";
 }
 
-.icon-form:before {
+.cuIcon-form:before {
 	content: "\e699";
 }
 
-.icon-pic:before {
+.cuIcon-pic:before {
 	content: "\e69b";
 }
 
-.icon-filter:before {
+.cuIcon-filter:before {
 	content: "\e69c";
 }
 
-.icon-footprint:before {
+.cuIcon-footprint:before {
 	content: "\e69d";
 }
 
-.icon-top:before {
+.cuIcon-top:before {
 	content: "\e69e";
 }
 
-.icon-pulldown:before {
+.cuIcon-pulldown:before {
 	content: "\e69f";
 }
 
-.icon-pullup:before {
+.cuIcon-pullup:before {
 	content: "\e6a0";
 }
 
-.icon-right:before {
+.cuIcon-right:before {
 	content: "\e6a3";
 }
 
-.icon-refresh:before {
+.cuIcon-refresh:before {
 	content: "\e6a4";
 }
 
-.icon-moreandroid:before {
+.cuIcon-moreandroid:before {
 	content: "\e6a5";
 }
 
-.icon-deletefill:before {
+.cuIcon-deletefill:before {
 	content: "\e6a6";
 }
 
-.icon-refund:before {
+.cuIcon-refund:before {
 	content: "\e6ac";
 }
 
-.icon-cart:before {
+.cuIcon-cart:before {
 	content: "\e6af";
 }
 
-.icon-qrcode:before {
+.cuIcon-qrcode:before {
 	content: "\e6b0";
 }
 
-.icon-remind:before {
+.cuIcon-remind:before {
 	content: "\e6b2";
 }
 
-.icon-delete:before {
+.cuIcon-delete:before {
 	content: "\e6b4";
 }
 
-.icon-profile:before {
+.cuIcon-profile:before {
 	content: "\e6b7";
 }
 
-.icon-home:before {
+.cuIcon-home:before {
 	content: "\e6b8";
 }
 
-.icon-cartfill:before {
+.cuIcon-cartfill:before {
 	content: "\e6b9";
 }
 
-.icon-discoverfill:before {
+.cuIcon-discoverfill:before {
 	content: "\e6ba";
 }
 
-.icon-homefill:before {
+.cuIcon-homefill:before {
 	content: "\e6bb";
 }
 
-.icon-message:before {
+.cuIcon-message:before {
 	content: "\e6bc";
 }
 
-.icon-addressbook:before {
+.cuIcon-addressbook:before {
 	content: "\e6bd";
 }
 
-.icon-link:before {
+.cuIcon-link:before {
 	content: "\e6bf";
 }
 
-.icon-lock:before {
+.cuIcon-lock:before {
 	content: "\e6c0";
 }
 
-.icon-unlock:before {
+.cuIcon-unlock:before {
 	content: "\e6c2";
 }
 
-.icon-vip:before {
+.cuIcon-vip:before {
 	content: "\e6c3";
 }
 
-.icon-weibo:before {
+.cuIcon-weibo:before {
 	content: "\e6c4";
 }
 
-.icon-activity:before {
+.cuIcon-activity:before {
 	content: "\e6c5";
 }
 
-.icon-friendaddfill:before {
+.cuIcon-friendaddfill:before {
 	content: "\e6c9";
 }
 
-.icon-friendadd:before {
+.cuIcon-friendadd:before {
 	content: "\e6ca";
 }
 
-.icon-friendfamous:before {
+.cuIcon-friendfamous:before {
 	content: "\e6cb";
 }
 
-.icon-friend:before {
+.cuIcon-friend:before {
 	content: "\e6cc";
 }
 
-.icon-goods:before {
+.cuIcon-goods:before {
 	content: "\e6cd";
 }
 
-.icon-selection:before {
+.cuIcon-selection:before {
 	content: "\e6ce";
 }
 
-.icon-explore:before {
+.cuIcon-explore:before {
 	content: "\e6d2";
 }
 
-.icon-present:before {
+.cuIcon-present:before {
 	content: "\e6d3";
 }
 
-.icon-squarecheckfill:before {
+.cuIcon-squarecheckfill:before {
 	content: "\e6d4";
 }
 
-.icon-square:before {
+.cuIcon-square:before {
 	content: "\e6d5";
 }
 
-.icon-squarecheck:before {
+.cuIcon-squarecheck:before {
 	content: "\e6d6";
 }
 
-.icon-round:before {
+.cuIcon-round:before {
 	content: "\e6d7";
 }
 
-.icon-roundaddfill:before {
+.cuIcon-roundaddfill:before {
 	content: "\e6d8";
 }
 
-.icon-roundadd:before {
+.cuIcon-roundadd:before {
 	content: "\e6d9";
 }
 
-.icon-add:before {
+.cuIcon-add:before {
 	content: "\e6da";
 }
 
-.icon-notificationforbidfill:before {
+.cuIcon-notificationforbidfill:before {
 	content: "\e6db";
 }
 
-.icon-explorefill:before {
+.cuIcon-explorefill:before {
 	content: "\e6dd";
 }
 
-.icon-fold:before {
+.cuIcon-fold:before {
 	content: "\e6de";
 }
 
-.icon-game:before {
+.cuIcon-game:before {
 	content: "\e6df";
 }
 
-.icon-redpacket:before {
+.cuIcon-redpacket:before {
 	content: "\e6e0";
 }
 
-.icon-selectionfill:before {
+.cuIcon-selectionfill:before {
 	content: "\e6e1";
 }
 
-.icon-similar:before {
+.cuIcon-similar:before {
 	content: "\e6e2";
 }
 
-.icon-appreciatefill:before {
+.cuIcon-appreciatefill:before {
 	content: "\e6e3";
 }
 
-.icon-infofill:before {
+.cuIcon-infofill:before {
 	content: "\e6e4";
 }
 
-.icon-info:before {
+.cuIcon-info:before {
 	content: "\e6e5";
 }
 
-.icon-forwardfill:before {
+.cuIcon-forwardfill:before {
 	content: "\e6ea";
 }
 
-.icon-forward:before {
+.cuIcon-forward:before {
 	content: "\e6eb";
 }
 
-.icon-rechargefill:before {
+.cuIcon-rechargefill:before {
 	content: "\e6ec";
 }
 
-.icon-recharge:before {
+.cuIcon-recharge:before {
 	content: "\e6ed";
 }
 
-.icon-vipcard:before {
+.cuIcon-vipcard:before {
 	content: "\e6ee";
 }
 
-.icon-voice:before {
+.cuIcon-voice:before {
 	content: "\e6ef";
 }
 
-.icon-voicefill:before {
+.cuIcon-voicefill:before {
 	content: "\e6f0";
 }
 
-.icon-friendfavor:before {
+.cuIcon-friendfavor:before {
 	content: "\e6f1";
 }
 
-.icon-wifi:before {
+.cuIcon-wifi:before {
 	content: "\e6f2";
 }
 
-.icon-share:before {
+.cuIcon-share:before {
 	content: "\e6f3";
 }
 
-.icon-wefill:before {
+.cuIcon-wefill:before {
 	content: "\e6f4";
 }
 
-.icon-we:before {
+.cuIcon-we:before {
 	content: "\e6f5";
 }
 
-.icon-lightauto:before {
+.cuIcon-lightauto:before {
 	content: "\e6f6";
 }
 
-.icon-lightforbid:before {
+.cuIcon-lightforbid:before {
 	content: "\e6f7";
 }
 
-.icon-lightfill:before {
+.cuIcon-lightfill:before {
 	content: "\e6f8";
 }
 
-.icon-camerarotate:before {
+.cuIcon-camerarotate:before {
 	content: "\e6f9";
 }
 
-.icon-light:before {
+.cuIcon-light:before {
 	content: "\e6fa";
 }
 
-.icon-barcode:before {
+.cuIcon-barcode:before {
 	content: "\e6fb";
 }
 
-.icon-flashlightclose:before {
+.cuIcon-flashlightclose:before {
 	content: "\e6fc";
 }
 
-.icon-flashlightopen:before {
+.cuIcon-flashlightopen:before {
 	content: "\e6fd";
 }
 
-.icon-searchlist:before {
+.cuIcon-searchlist:before {
 	content: "\e6fe";
 }
 
-.icon-service:before {
+.cuIcon-service:before {
 	content: "\e6ff";
 }
 
-.icon-sort:before {
+.cuIcon-sort:before {
 	content: "\e700";
 }
 
-.icon-down:before {
+.cuIcon-down:before {
 	content: "\e703";
 }
 
-.icon-mobile:before {
+.cuIcon-mobile:before {
 	content: "\e704";
 }
 
-.icon-mobilefill:before {
+.cuIcon-mobilefill:before {
 	content: "\e705";
 }
 
-.icon-copy:before {
+.cuIcon-copy:before {
 	content: "\e706";
 }
 
-.icon-countdownfill:before {
+.cuIcon-countdownfill:before {
 	content: "\e707";
 }
 
-.icon-countdown:before {
+.cuIcon-countdown:before {
 	content: "\e708";
 }
 
-.icon-noticefill:before {
+.cuIcon-noticefill:before {
 	content: "\e709";
 }
 
-.icon-notice:before {
+.cuIcon-notice:before {
 	content: "\e70a";
 }
 
-.icon-upstagefill:before {
+.cuIcon-upstagefill:before {
 	content: "\e70e";
 }
 
-.icon-upstage:before {
+.cuIcon-upstage:before {
 	content: "\e70f";
 }
 
-.icon-babyfill:before {
+.cuIcon-babyfill:before {
 	content: "\e710";
 }
 
-.icon-baby:before {
+.cuIcon-baby:before {
 	content: "\e711";
 }
 
-.icon-brandfill:before {
+.cuIcon-brandfill:before {
 	content: "\e712";
 }
 
-.icon-brand:before {
+.cuIcon-brand:before {
 	content: "\e713";
 }
 
-.icon-choicenessfill:before {
+.cuIcon-choicenessfill:before {
 	content: "\e714";
 }
 
-.icon-choiceness:before {
+.cuIcon-choiceness:before {
 	content: "\e715";
 }
 
-.icon-clothesfill:before {
+.cuIcon-clothesfill:before {
 	content: "\e716";
 }
 
-.icon-clothes:before {
+.cuIcon-clothes:before {
 	content: "\e717";
 }
 
-.icon-creativefill:before {
+.cuIcon-creativefill:before {
 	content: "\e718";
 }
 
-.icon-creative:before {
+.cuIcon-creative:before {
 	content: "\e719";
 }
 
-.icon-female:before {
+.cuIcon-female:before {
 	content: "\e71a";
 }
 
-.icon-keyboard:before {
+.cuIcon-keyboard:before {
 	content: "\e71b";
 }
 
-.icon-male:before {
+.cuIcon-male:before {
 	content: "\e71c";
 }
 
-.icon-newfill:before {
+.cuIcon-newfill:before {
 	content: "\e71d";
 }
 
-.icon-new:before {
+.cuIcon-new:before {
 	content: "\e71e";
 }
 
-.icon-pullleft:before {
+.cuIcon-pullleft:before {
 	content: "\e71f";
 }
 
-.icon-pullright:before {
+.cuIcon-pullright:before {
 	content: "\e720";
 }
 
-.icon-rankfill:before {
+.cuIcon-rankfill:before {
 	content: "\e721";
 }
 
-.icon-rank:before {
+.cuIcon-rank:before {
 	content: "\e722";
 }
 
-.icon-bad:before {
+.cuIcon-bad:before {
 	content: "\e723";
 }
 
-.icon-cameraadd:before {
+.cuIcon-cameraadd:before {
 	content: "\e724";
 }
 
-.icon-focus:before {
+.cuIcon-focus:before {
 	content: "\e725";
 }
 
-.icon-friendfill:before {
+.cuIcon-friendfill:before {
 	content: "\e726";
 }
 
-.icon-cameraaddfill:before {
+.cuIcon-cameraaddfill:before {
 	content: "\e727";
 }
 
-.icon-apps:before {
+.cuIcon-apps:before {
 	content: "\e729";
 }
 
-.icon-paintfill:before {
+.cuIcon-paintfill:before {
 	content: "\e72a";
 }
 
-.icon-paint:before {
+.cuIcon-paint:before {
 	content: "\e72b";
 }
 
-.icon-picfill:before {
+.cuIcon-picfill:before {
 	content: "\e72c";
 }
 
-.icon-refresharrow:before {
+.cuIcon-refresharrow:before {
 	content: "\e72d";
 }
 
-.icon-colorlens:before {
+.cuIcon-colorlens:before {
 	content: "\e6e6";
 }
 
-.icon-markfill:before {
+.cuIcon-markfill:before {
 	content: "\e730";
 }
 
-.icon-mark:before {
+.cuIcon-mark:before {
 	content: "\e731";
 }
 
-.icon-presentfill:before {
+.cuIcon-presentfill:before {
 	content: "\e732";
 }
 
-.icon-repeal:before {
+.cuIcon-repeal:before {
 	content: "\e733";
 }
 
-.icon-album:before {
+.cuIcon-album:before {
 	content: "\e734";
 }
 
-.icon-peoplefill:before {
+.cuIcon-peoplefill:before {
 	content: "\e735";
 }
 
-.icon-people:before {
+.cuIcon-people:before {
 	content: "\e736";
 }
 
-.icon-servicefill:before {
+.cuIcon-servicefill:before {
 	content: "\e737";
 }
 
-.icon-repair:before {
+.cuIcon-repair:before {
 	content: "\e738";
 }
 
-.icon-file:before {
+.cuIcon-file:before {
 	content: "\e739";
 }
 
-.icon-repairfill:before {
+.cuIcon-repairfill:before {
 	content: "\e73a";
 }
 
-.icon-taoxiaopu:before {
+.cuIcon-taoxiaopu:before {
 	content: "\e73b";
 }
 
-.icon-weixin:before {
+.cuIcon-weixin:before {
 	content: "\e612";
 }
 
-.icon-attentionfill:before {
+.cuIcon-attentionfill:before {
 	content: "\e73c";
 }
 
-.icon-attention:before {
+.cuIcon-attention:before {
 	content: "\e73d";
 }
 
-.icon-commandfill:before {
+.cuIcon-commandfill:before {
 	content: "\e73e";
 }
 
-.icon-command:before {
+.cuIcon-command:before {
 	content: "\e73f";
 }
 
-.icon-communityfill:before {
+.cuIcon-communityfill:before {
 	content: "\e740";
 }
 
-.icon-community:before {
+.cuIcon-community:before {
 	content: "\e741";
 }
 
-.icon-read:before {
+.cuIcon-read:before {
 	content: "\e742";
 }
 
-.icon-calendar:before {
+.cuIcon-calendar:before {
 	content: "\e74a";
 }
 
-.icon-cut:before {
+.cuIcon-cut:before {
 	content: "\e74b";
 }
 
-.icon-magic:before {
+.cuIcon-magic:before {
 	content: "\e74c";
 }
 
-.icon-backwardfill:before {
+.cuIcon-backwardfill:before {
 	content: "\e74d";
 }
 
-.icon-playfill:before {
+.cuIcon-playfill:before {
 	content: "\e74f";
 }
 
-.icon-stop:before {
+.cuIcon-stop:before {
 	content: "\e750";
 }
 
-.icon-tagfill:before {
+.cuIcon-tagfill:before {
 	content: "\e751";
 }
 
-.icon-tag:before {
+.cuIcon-tag:before {
 	content: "\e752";
 }
 
-.icon-group:before {
+.cuIcon-group:before {
 	content: "\e753";
 }
 
-.icon-all:before {
+.cuIcon-all:before {
 	content: "\e755";
 }
 
-.icon-backdelete:before {
+.cuIcon-backdelete:before {
 	content: "\e756";
 }
 
-.icon-hotfill:before {
+.cuIcon-hotfill:before {
 	content: "\e757";
 }
 
-.icon-hot:before {
+.cuIcon-hot:before {
 	content: "\e758";
 }
 
-.icon-post:before {
+.cuIcon-post:before {
 	content: "\e759";
 }
 
-.icon-radiobox:before {
+.cuIcon-radiobox:before {
 	content: "\e75b";
 }
 
-.icon-rounddown:before {
+.cuIcon-rounddown:before {
 	content: "\e75c";
 }
 
-.icon-upload:before {
+.cuIcon-upload:before {
 	content: "\e75d";
 }
 
-.icon-writefill:before {
+.cuIcon-writefill:before {
 	content: "\e760";
 }
 
-.icon-write:before {
+.cuIcon-write:before {
 	content: "\e761";
 }
 
-.icon-radioboxfill:before {
+.cuIcon-radioboxfill:before {
 	content: "\e763";
 }
 
-.icon-punch:before {
+.cuIcon-punch:before {
 	content: "\e764";
 }
 
-.icon-shake:before {
+.cuIcon-shake:before {
 	content: "\e765";
 }
 
-.icon-move:before {
+.cuIcon-move:before {
 	content: "\e768";
 }
 
-.icon-safe:before {
+.cuIcon-safe:before {
 	content: "\e769";
 }
 
-.icon-activityfill:before {
+.cuIcon-activityfill:before {
 	content: "\e775";
 }
 
-.icon-crownfill:before {
+.cuIcon-crownfill:before {
 	content: "\e776";
 }
 
-.icon-crown:before {
+.cuIcon-crown:before {
 	content: "\e777";
 }
 
-.icon-goodsfill:before {
+.cuIcon-goodsfill:before {
 	content: "\e778";
 }
 
-.icon-messagefill:before {
+.cuIcon-messagefill:before {
 	content: "\e779";
 }
 
-.icon-profilefill:before {
+.cuIcon-profilefill:before {
 	content: "\e77a";
 }
 
-.icon-sound:before {
+.cuIcon-sound:before {
 	content: "\e77b";
 }
 
-.icon-sponsorfill:before {
+.cuIcon-sponsorfill:before {
 	content: "\e77c";
 }
 
-.icon-sponsor:before {
+.cuIcon-sponsor:before {
 	content: "\e77d";
 }
 
-.icon-upblock:before {
+.cuIcon-upblock:before {
 	content: "\e77e";
 }
 
-.icon-weblock:before {
+.cuIcon-weblock:before {
 	content: "\e77f";
 }
 
-.icon-weunblock:before {
+.cuIcon-weunblock:before {
 	content: "\e780";
 }
 
-.icon-my:before {
+.cuIcon-my:before {
 	content: "\e78b";
 }
 
-.icon-myfill:before {
+.cuIcon-myfill:before {
 	content: "\e78c";
 }
 
-.icon-emojifill:before {
+.cuIcon-emojifill:before {
 	content: "\e78d";
 }
 
-.icon-emojiflashfill:before {
+.cuIcon-emojiflashfill:before {
 	content: "\e78e";
 }
 
-.icon-flashbuyfill:before {
+.cuIcon-flashbuyfill:before {
 	content: "\e78f";
 }
 
-.icon-text:before {
+.cuIcon-text:before {
 	content: "\e791";
 }
 
-.icon-goodsfavor:before {
+.cuIcon-goodsfavor:before {
 	content: "\e794";
 }
 
-.icon-musicfill:before {
+.cuIcon-musicfill:before {
 	content: "\e795";
 }
 
-.icon-musicforbidfill:before {
+.cuIcon-musicforbidfill:before {
 	content: "\e796";
 }
 
-.icon-card:before {
+.cuIcon-card:before {
 	content: "\e624";
 }
 
-.icon-triangledownfill:before {
+.cuIcon-triangledownfill:before {
 	content: "\e79b";
 }
 
-.icon-triangleupfill:before {
+.cuIcon-triangleupfill:before {
 	content: "\e79c";
 }
 
-.icon-roundleftfill-copy:before {
+.cuIcon-roundleftfill-copy:before {
 	content: "\e79e";
 }
 
-.icon-font:before {
+.cuIcon-font:before {
 	content: "\e76a";
 }
 
-.icon-title:before {
+.cuIcon-title:before {
 	content: "\e82f";
 }
 
-.icon-recordfill:before {
+.cuIcon-recordfill:before {
 	content: "\e7a4";
 }
 
-.icon-record:before {
+.cuIcon-record:before {
 	content: "\e7a6";
 }
 
-.icon-cardboardfill:before {
+.cuIcon-cardboardfill:before {
 	content: "\e7a9";
 }
 
-.icon-cardboard:before {
+.cuIcon-cardboard:before {
 	content: "\e7aa";
 }
 
-.icon-formfill:before {
+.cuIcon-formfill:before {
 	content: "\e7ab";
 }
 
-.icon-coin:before {
+.cuIcon-coin:before {
 	content: "\e7ac";
 }
 
-.icon-cardboardforbid:before {
+.cuIcon-cardboardforbid:before {
 	content: "\e7af";
 }
 
-.icon-circlefill:before {
+.cuIcon-circlefill:before {
 	content: "\e7b0";
 }
 
-.icon-circle:before {
+.cuIcon-circle:before {
 	content: "\e7b1";
 }
 
-.icon-attentionforbid:before {
+.cuIcon-attentionforbid:before {
 	content: "\e7b2";
 }
 
-.icon-attentionforbidfill:before {
+.cuIcon-attentionforbidfill:before {
 	content: "\e7b3";
 }
 
-.icon-attentionfavorfill:before {
+.cuIcon-attentionfavorfill:before {
 	content: "\e7b4";
 }
 
-.icon-attentionfavor:before {
+.cuIcon-attentionfavor:before {
 	content: "\e7b5";
 }
 
-.icon-titles:before {
+.cuIcon-titles:before {
 	content: "\e701";
 }
 
-.icon-icloading:before {
+.cuIcon-icloading:before {
 	content: "\e67a";
 }
 
-.icon-full:before {
+.cuIcon-full:before {
 	content: "\e7bc";
 }
 
-.icon-mail:before {
+.cuIcon-mail:before {
 	content: "\e7bd";
 }
 
-.icon-peoplelist:before {
+.cuIcon-peoplelist:before {
 	content: "\e7be";
 }
 
-.icon-goodsnewfill:before {
+.cuIcon-goodsnewfill:before {
 	content: "\e7bf";
 }
 
-.icon-goodsnew:before {
+.cuIcon-goodsnew:before {
 	content: "\e7c0";
 }
 
-.icon-medalfill:before {
+.cuIcon-medalfill:before {
 	content: "\e7c1";
 }
 
-.icon-medal:before {
+.cuIcon-medal:before {
 	content: "\e7c2";
 }
 
-.icon-newsfill:before {
+.cuIcon-newsfill:before {
 	content: "\e7c3";
 }
 
-.icon-newshotfill:before {
+.cuIcon-newshotfill:before {
 	content: "\e7c4";
 }
 
-.icon-newshot:before {
+.cuIcon-newshot:before {
 	content: "\e7c5";
 }
 
-.icon-news:before {
+.cuIcon-news:before {
 	content: "\e7c6";
 }
 
-.icon-videofill:before {
+.cuIcon-videofill:before {
 	content: "\e7c7";
 }
 
-.icon-video:before {
+.cuIcon-video:before {
 	content: "\e7c8";
 }
 
-.icon-exit:before {
+.cuIcon-exit:before {
 	content: "\e7cb";
 }
 
-.icon-skinfill:before {
+.cuIcon-skinfill:before {
 	content: "\e7cc";
 }
 
-.icon-skin:before {
+.cuIcon-skin:before {
 	content: "\e7cd";
 }
 
-.icon-moneybagfill:before {
+.cuIcon-moneybagfill:before {
 	content: "\e7ce";
 }
 
-.icon-usefullfill:before {
+.cuIcon-usefullfill:before {
 	content: "\e7cf";
 }
 
-.icon-usefull:before {
+.cuIcon-usefull:before {
 	content: "\e7d0";
 }
 
-.icon-moneybag:before {
+.cuIcon-moneybag:before {
 	content: "\e7d1";
 }
 
-.icon-redpacket_fill:before {
+.cuIcon-redpacket_fill:before {
 	content: "\e7d3";
 }
 
-.icon-subscription:before {
+.cuIcon-subscription:before {
 	content: "\e7d4";
 }
 
-.icon-loading1:before {
+.cuIcon-loading1:before {
 	content: "\e633";
 }
 
-.icon-github:before {
+.cuIcon-github:before {
 	content: "\e692";
 }
 
-.icon-global:before {
+.cuIcon-global:before {
 	content: "\e7eb";
 }
 
-.icon-settingsfill:before {
+.cuIcon-settingsfill:before {
 	content: "\e6ab";
 }
 
-.icon-back_android:before {
+.cuIcon-back_android:before {
 	content: "\e7ed";
 }
 
-.icon-expressman:before {
+.cuIcon-expressman:before {
 	content: "\e7ef";
 }
 
-.icon-evaluate_fill:before {
+.cuIcon-evaluate_fill:before {
 	content: "\e7f0";
 }
 
-.icon-group_fill:before {
+.cuIcon-group_fill:before {
 	content: "\e7f5";
 }
 
-.icon-play_forward_fill:before {
+.cuIcon-play_forward_fill:before {
 	content: "\e7f6";
 }
 
-.icon-deliver_fill:before {
+.cuIcon-deliver_fill:before {
 	content: "\e7f7";
 }
 
-.icon-notice_forbid_fill:before {
+.cuIcon-notice_forbid_fill:before {
 	content: "\e7f8";
 }
 
-.icon-fork:before {
+.cuIcon-fork:before {
 	content: "\e60c";
 }
 
-.icon-pick:before {
+.cuIcon-pick:before {
 	content: "\e7fa";
 }
 
-.icon-wenzi:before {
+.cuIcon-wenzi:before {
 	content: "\e6a7";
 }
 
-.icon-ellipse:before {
+.cuIcon-ellipse:before {
 	content: "\e600";
 }
 
-.icon-qr_code:before {
+.cuIcon-qr_code:before {
 	content: "\e61b";
 }
 
-.icon-dianhua:before {
+.cuIcon-dianhua:before {
 	content: "\e64d";
 }
 
-.icon-icon:before {
+.cuIcon-icon:before {
 	content: "\e602";
 }
 
-.icon-loading2:before {
+.cuIcon-loading2:before {
 	content: "\e7f1";
 }
 
-.icon-btn:before {
+.cuIcon-btn:before {
 	content: "\e601";
 }
diff --git a/Colorui-UniApp/colorui/main.css b/Colorui-UniApp/colorui/main.css
index da60465..bc7f6d1 100644
--- a/Colorui-UniApp/colorui/main.css
+++ b/Colorui-UniApp/colorui/main.css
@@ -1,24 +1,18 @@
 /*
-  ColorUi for uniApp  v2.1.3 | by 文晓港 2019年4月1日22:58:47
+  ColorUi for uniApp  v2.1.4 | by 文晓港 2019年04月14日04:16:13
   仅供学习交流，如作它用所承受的法律责任一概与作者无关
   使用ColorUi开发扩展与插件时，请注明基于ColorUi开发
   
   （QQ交流群：240787041）
-  文档：http://www.color-ui.com/
 */
-html {
-	max-width: 750px;
-}
 
 /* ==================
         初始化
  ==================== */
 body {
-	background-color: #f1f1f1;
-	font-size: 28upx;
-	color: #333;
-	font-family: Helvetica Neue, Helvetica, sans-serif;
 	/* Color 可以自定义相关配色 */
+	/* var属性兼容性 --> https://www.caniuse.com/#feat=css-variables */
+	/* 标准色 */
 	--red: #e54d42;
 	--orange: #f37b1d;
 	--yellow: #fbbd08;
@@ -31,9 +25,12 @@ body {
 	--pink: #e03997;
 	--brown: #a5673f;
 	--grey: #8799a3;
-	--gray: #aaaaaa;
 	--black: #333333;
+	--darkGray: #666666;
+	--gray: #aaaaaa;
+	--ghostWhite: #f1f1f1;
 	--white: #ffffff;
+	/* 浅色 */
 	--redLight: #fadbd9;
 	--orangeLight: #fde6d2;
 	--yellowLight: #fef2ce;
@@ -46,12 +43,34 @@ body {
 	--pinkLight: #f9d7ea;
 	--brownLight: #ede1d9;
 	--greyLight: #e7ebed;
+	/* 渐变色 */
 	--gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
 	--gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
 	--gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
 	--gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
 	--gradualPink: linear-gradient(45deg, #ec008c, #6739b6);
 	--gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);
+	/* 阴影透明色 */
+	--ShadowSize: 6upx 6upx 8upx;
+	--redShadow: rgba(204, 69, 59, 0.2);
+	--orangeShadow: rgba(217, 109, 26, 0.2);
+	--yellowShadow: rgba(224, 170, 7, 0.2);
+	--oliveShadow: rgba(124, 173, 55, 0.2);
+	--greenShadow: rgba(48, 156, 63, 0.2);
+	--cyanShadow: rgba(28, 187, 180, 0.2);
+	--blueShadow: rgba(0, 102, 204, 0.2);
+	--purpleShadow: rgba(88, 48, 156, 0.2);
+	--mauveShadow: rgba(133, 33, 150, 0.2);
+	--pinkShadow: rgba(199, 50, 134, 0.2);
+	--brownShadow: rgba(140, 88, 53, 0.2);
+	--greyShadow: rgba(114, 130, 138, 0.2);
+	--grayShadow: rgba(114, 130, 138, 0.2);
+	--blackShadow: rgba(26, 26, 26, 0.2);
+
+	background-color: var(--ghostWhite);
+	font-size: 28upx;
+	color: var(--black);
+	font-family: Helvetica Neue, Helvetica, sans-serif;
 }
 
 view,
@@ -110,8 +129,8 @@ image.loading::after {
 	font-size: 32upx;
 	margin: auto;
 	color: #ccc;
-	-webkit-animation: icon-spin 2s infinite linear;
-	animation: icon-spin 2s infinite linear;
+	-webkit-animation: cuIcon-spin 2s infinite linear;
+	animation: cuIcon-spin 2s infinite linear;
 	display: block;
 }
 
@@ -583,7 +602,7 @@ switch.gray.checked .uni-switch-input,
 checkbox.gray.checked .uni-checkbox-input,
 radio.gray.checked .uni-radio-input {
 	background-color: #f0f0f0 !important;
-	color: #666 !important;
+	color: var(--) !important;
 }
 
 switch.black[checked] .wx-switch-input,
@@ -603,7 +622,7 @@ switch.white.checked .uni-switch-input,
 checkbox.white.checked .uni-checkbox-input,
 radio.white.checked .uni-radio-input {
 	background-color: var(--white) !important;
-	color: #666 !important;
+	color: var(--) !important;
 }
 
 /* ==================
@@ -723,11 +742,11 @@ radio.white.checked .uni-radio-input {
 /* -- 阴影 -- */
 
 .shadow {
-	box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
+	--ShadowSize: 0 1upx 6upx;
 }
 
 .shadow-lg {
-	box-shadow: 0upx 40upx 100upx 0upx rgba(0, 0, 0, 0.07);
+	--ShadowSize: 0upx 40upx 100upx 0upx;
 }
 
 .shadow-warp {
@@ -911,7 +930,7 @@ button.icon.lg {
 }
 
 .cu-tag:not([class*="bg"]):not([class*="line"]) {
-	background-color: #f1f1f1;
+	background-color: var(--ghostWhite);
 }
 
 .cu-tag[class*="line-"]::after {
@@ -1012,7 +1031,7 @@ button.icon.lg {
 	background-color: #dd514c;
 }
 
-.cu-tag:empty:not([class*="icon"]) {
+.cu-tag:empty:not([class*="cuIcon-"]) {
 	padding: 0upx;
 	width: 16upx;
 	height: 16upx;
@@ -1020,7 +1039,7 @@ button.icon.lg {
 	right: -4upx;
 }
 
-.cu-tag[class*="icon"] {
+.cu-tag[class*="cuIcon-"] {
 	width: 32upx;
 	height: 32upx;
 	top: -4upx;
@@ -1082,13 +1101,13 @@ button.icon.lg {
 
 .cu-avatar-group .cu-avatar {
 	margin-left: -30upx;
-	border: 4upx solid #f1f1f1;
+	border: 4upx solid var(--ghostWhite);
 	vertical-align: middle;
 }
 
 .cu-avatar-group .cu-avatar.sm {
 	margin-left: -20upx;
-	border: 1upx solid #f1f1f1;
+	border: 1upx solid var(--ghostWhite);
 }
 
 /* ==================
@@ -1133,7 +1152,7 @@ button.icon.lg {
 	align-items: center;
 	display: flex;
 	font-size: 20upx;
-	color: #666;
+	color: var(--);
 	text-indent: 10upx;
 }
 
@@ -1178,7 +1197,7 @@ button.icon.lg {
 
 .cu-load.loading::before {
 	content: "\e67a";
-	animation: icon-spin 2s infinite linear;
+	animation: cuIcon-spin 2s infinite linear;
 }
 
 .cu-load.loading::after {
@@ -1234,7 +1253,7 @@ button.icon.lg {
 	line-height: 2.4em;
 }
 
-.cu-load.load-modal [class*="icon"] {
+.cu-load.load-modal [class*="cuIcon-"] {
 	font-size: 60upx;
 }
 
@@ -1255,7 +1274,7 @@ button.icon.lg {
 	border-right: 6upx solid rgba(0, 0, 0, 0.05);
 	border-bottom: 6upx solid rgba(0, 0, 0, 0.05);
 	border-left: 6upx solid var(--orange);
-	animation: icon-spin 1s infinite linear;
+	animation: cuIcon-spin 1s infinite linear;
 	z-index: -1;
 }
 
@@ -1513,7 +1532,7 @@ button.icon.lg {
 	align-items: center
 }
 
-.cu-list.menu>.cu-item .content>text[class*=icon] {
+.cu-list.menu>.cu-item .content>text[class*=cuIcon] {
 	display: inline-block;
 	margin-right: 10upx;
 	width: 1.6em;
@@ -1588,7 +1607,7 @@ button.icon.lg {
 	line-height: 40upx
 }
 
-.cu-list.grid>.cu-item [class*=icon] {
+.cu-list.grid>.cu-item [class*=cuIcon] {
 	position: relative;
 	display: block;
 	margin-top: 20upx;
@@ -1723,7 +1742,7 @@ button.icon.lg {
 	margin-left: 20upx;
 }
 
-.cu-bar .action:first-child>text[class*="icon"] {
+.cu-bar .action:first-child>text[class*="cuIcon-"] {
 	margin-left: -0.3em;
 	margin-right: 0.3em;
 }
@@ -1732,12 +1751,12 @@ button.icon.lg {
 	margin-right: 30upx;
 }
 
-.cu-bar .action>text[class*="icon"],
-.cu-bar .action>view[class*="icon"] {
+.cu-bar .action>text[class*="cuIcon-"],
+.cu-bar .action>view[class*="cuIcon-"] {
 	font-size: 36upx;
 }
 
-.cu-bar .action>text[class*="icon"]+text[class*="icon"] {
+.cu-bar .action>text[class*="cuIcon-"]+text[class*="cuIcon-"] {
 	margin-left: 0.5em;
 }
 
@@ -1786,31 +1805,31 @@ button.icon.lg {
 	line-height: 64upx;
 	height: 64upx;
 	font-size: 24upx;
-	color: #666;
+	color: var(--);
 	flex: 1;
 	display: flex;
 	align-items: center;
-	margin: 0 20upx;
+	margin: 0 30upx;
 }
 
 .cu-bar .search-form+.action {
-	margin-right: 20upx;
+	margin-right: 30upx;
 }
 
 .cu-bar .search-form input {
 	flex: 1;
-	padding-right: 20upx;
+	padding-right: 30upx;
 	height: 64upx;
 	line-height: 64upx;
 	font-size: 26upx;
 	background-color: transparent;
 }
 
-.cu-bar .search-form [class*="icon"] {
+.cu-bar .search-form [class*="cuIcon-"] {
 	margin: 0 0.5em 0 0.8em;
 }
 
-.cu-bar .search-form [class*="icon"]::before {
+.cu-bar .search-form [class*="cuIcon-"]::before {
 	top: 0upx;
 }
 
@@ -1871,7 +1890,7 @@ button.icon.lg {
 	padding-top: 50upx;
 }
 
-.cu-bar.tabbar .action.add-action [class*="icon"] {
+.cu-bar.tabbar .action.add-action [class*="cuIcon-"] {
 	position: absolute;
 	width: 70upx;
 	z-index: 2;
@@ -1926,7 +1945,7 @@ button.icon.lg {
 	border: 0;
 }
 
-.cu-bar.tabbar .action [class*="icon"] {
+.cu-bar.tabbar .action [class*="cuIcon-"] {
 	width: 100upx;
 	position: relative;
 	display: block;
@@ -1936,11 +1955,11 @@ button.icon.lg {
 	font-size: 40upx;
 }
 
-.cu-bar.tabbar .action .icon-cu-image {
+.cu-bar.tabbar .action .cuIcon-cu-image {
 	margin: 0 auto;
 }
 
-.cu-bar.tabbar .action .icon-cu-image image {
+.cu-bar.tabbar .action .cuIcon-cu-image image {
 	width: 50upx;
 	height: 50upx;
 	display: inline-block;
@@ -2000,7 +2019,7 @@ button.icon.lg {
 	margin-left: 20upx;
 }
 
-.cu-bar.input .action [class*="icon"] {
+.cu-bar.input .action [class*="cuIcon-"] {
 	font-size: 48upx;
 }
 
@@ -2009,7 +2028,7 @@ button.icon.lg {
 	margin-left: 0upx;
 }
 
-.cu-bar.input .action:first-child [class*="icon"] {
+.cu-bar.input .action:first-child [class*="cuIcon-"] {
 	margin-left: 0upx;
 }
 
@@ -2023,7 +2042,7 @@ button.icon.lg {
 }
 
 /* #ifdef MP-ALIPAY */
-.cu-custom .cu-bar .action .icon-back {
+.cu-custom .cu-bar .action .cuIcon-back {
 	opacity: 0;
 }
 
@@ -2174,11 +2193,11 @@ button.icon.lg {
 	left: 36upx;
 }
 
-.cu-timeline>.cu-item:not([class*="icon-"])::before {
+.cu-timeline>.cu-item:not([class*="cuIcon-"])::before {
 	content: "\e763";
 }
 
-.cu-timeline>.cu-item[class*="icon"]::before {
+.cu-timeline>.cu-item[class*="cuIcon-"]::before {
 	background-color: var(--white);
 	width: 50upx;
 	height: 50upx;
@@ -2196,8 +2215,8 @@ button.icon.lg {
 }
 
 .cu-timeline>.cu-item>.content:not([class*="bg-"]) {
-	background-color: #f1f1f1;
-	color: #666;
+	background-color: var(--ghostWhite);
+	color: var(--);
 }
 
 .cu-timeline>.cu-item>.content+.content {
@@ -2250,7 +2269,7 @@ button.icon.lg {
 
 .cu-chat .cu-item>.main .content:not([class*="bg-"]) {
 	background-color: var(--white);
-	color: #666;
+	color: var(--);
 }
 
 .cu-chat .cu-item .date {
@@ -2422,7 +2441,7 @@ button.icon.lg {
 
 /* card.dynamic>.cu-item .comment {
   padding: 20upx;
-  background-color: #f1f1f1;
+  background-color: var(--ghostWhite);
   margin: 0 30upx 30upx;
   border-radius: 6upx;
 } */
@@ -2502,7 +2521,7 @@ button.icon.lg {
 	padding-right: 20upx;
 }
 
-.cu-form-group>text[class*="icon"] {
+.cu-form-group>text[class*="cuIcon-"] {
 	font-size: 36upx;
 	padding: 0;
 	box-sizing: border-box;
@@ -2669,9 +2688,9 @@ swiper .a-swiper-dot {
 	vertical-align: middle;
 }
 
-swiper .wx-swiper-dots,
-swiper .a-swiper-dots,
-swiper .uni-swiper-dots {
+swiper[class*="-dot"] .wx-swiper-dots,
+swiper[class*="-dot"] .a-swiper-dots,
+swiper[class*="-dot"] .uni-swiper-dots {
 	display: flex;
 	align-items: center;
 	width: 100%;
@@ -2829,7 +2848,7 @@ scroll-view.cu-steps .cu-item {
 	color: var(--grey);
 }
 
-.cu-steps .cu-item [class*="icon"],
+.cu-steps .cu-item [class*="cuIcon-"],
 .cu-steps .cu-item .num {
 	display: block;
 	font-size: 40upx;
@@ -3064,7 +3083,7 @@ scroll-view.cu-steps .cu-item {
 	background-color: rgba(0, 0, 0, 0.5);
 }
 
-.grid.grid-square>view>text[class*="icon"] {
+.grid.grid-square>view>text[class*="cuIcon-"] {
 	font-size: 52upx;
 	position: absolute;
 	color: var(--grey);
@@ -3620,7 +3639,7 @@ scroll-view.cu-steps .cu-item {
 
 .bg-gray {
 	background-color: #f0f0f0;
-	color: #666;
+	color: var(--);
 }
 
 .bg-black {
@@ -3630,7 +3649,7 @@ scroll-view.cu-steps .cu-item {
 
 .bg-white {
 	background-color: var(--white);
-	color: #666;
+	color: var(--darkGray);
 }
 
 .bg-shadeTop {
@@ -3645,62 +3664,62 @@ scroll-view.cu-steps .cu-item {
 
 .bg-red.light {
 	color: var(--red);
-	background-color: #fadbd9;
+	background-color: var(--redLight);
 }
 
 .bg-orange.light {
 	color: var(--orange);
-	background-color: #fde6d2;
+	background-color: var(--orangeLight);
 }
 
 .bg-yellow.light {
 	color: var(--yellow);
-	background-color: #fef2ce;
+	background-color: var(--yellowLight);
 }
 
 .bg-olive.light {
 	color: var(--olive);
-	background-color: #e8f4d9;
+	background-color: var(--oliveLight);
 }
 
 .bg-green.light {
 	color: var(--green);
-	background-color: #d7f0db;
+	background-color: var(--greenLight);
 }
 
 .bg-cyan.light {
 	color: var(--cyan);
-	background-color: #d2f1f0;
+	background-color: var(--cyanLight);
 }
 
 .bg-blue.light {
 	color: var(--blue);
-	background-color: #cce6ff;
+	background-color: var(--blueLight);
 }
 
 .bg-purple.light {
 	color: var(--purple);
-	background-color: #e1d7f0;
+	background-color: var(--purpleLight);
 }
 
 .bg-mauve.light {
 	color: var(--mauve);
-	background-color: #ebd4ef;
+	background-color: var(--mauveLight);
 }
 
 .bg-pink.light {
 	color: var(--pink);
-	background-color: #f9d7ea;
+	background-color: var(--pinkLight);
 }
 
 .bg-brown.light {
 	color: var(--brown);
-	background-color: #ede1d9;
+	background-color: var(--brownLight);
 }
 
 .bg-grey.light {
 	color: var(--grey);
-	background-color: #e7ebed;
+	background-color: var(--greyLight);
 }
 
 .bg-gradual-red {
@@ -3734,59 +3753,119 @@ scroll-view.cu-steps .cu-item {
 }
 
 .shadow[class*="-red"] {
-	box-shadow: 6upx 6upx 8upx rgba(204, 69, 59, 0.2);
+	box-shadow: var(--ShadowSize) var(--redShadow);
 }
 
 .shadow[class*="-orange"] {
-	box-shadow: 6upx 6upx 8upx rgba(217, 109, 26, 0.2);
+	box-shadow: var(--ShadowSize) var(--orangeShadow);
 }
 
 .shadow[class*="-yellow"] {
-	box-shadow: 6upx 6upx 8upx rgba(224, 170, 7, 0.2);
+	box-shadow: var(--ShadowSize) var(--yellowShadow);
 }
 
 .shadow[class*="-olive"] {
-	box-shadow: 6upx 6upx 8upx rgba(124, 173, 55, 0.2);
+	box-shadow: var(--ShadowSize) var(--oliveShadow);
 }
 
 .shadow[class*="-green"] {
-	box-shadow: 6upx 6upx 8upx rgba(48, 156, 63, 0.2);
+	box-shadow: var(--ShadowSize) var(--greenShadow);
 }
 
 .shadow[class*="-cyan"] {
-	box-shadow: 6upx 6upx 8upx rgba(28, 187, 180, 0.2);
+	box-shadow: var(--ShadowSize) var(--cyanShadow);
 }
 
 .shadow[class*="-blue"] {
-	box-shadow: 6upx 6upx 8upx rgba(0, 102, 204, 0.2);
+	box-shadow: var(--ShadowSize) var(--blueShadow);
 }
 
 .shadow[class*="-purple"] {
-	box-shadow: 6upx 6upx 8upx rgba(88, 48, 156, 0.2);
+	box-shadow: var(--ShadowSize) var(--purpleShadow);
 }
 
 .shadow[class*="-mauve"] {
-	box-shadow: 6upx 6upx 8upx rgba(133, 33, 150, 0.2);
+	box-shadow: var(--ShadowSize) var(--mauveShadow);
 }
 
 .shadow[class*="-pink"] {
-	box-shadow: 6upx 6upx 8upx rgba(199, 50, 134, 0.2);
+	box-shadow: var(--ShadowSize) var(--pinkShadow);
 }
 
-.cu-btn.shadow[class*="-brown"] {
-	box-shadow: 6upx 6upx 8upx rgba(140, 88, 53, 0.2);
+.shadow[class*="-brown"] {
+	box-shadow: var(--ShadowSize) var(--brownShadow);
 }
 
-.cu-btn.shadow[class*="-grey"] {
-	box-shadow: 6upx 6upx 8upx rgba(114, 130, 138, 0.2);
+.shadow[class*="-grey"] {
+	box-shadow: var(--ShadowSize) var(--greyShadow);
 }
 
-.cu-btn.shadow[class*="-gray"] {
-	box-shadow: 6upx 6upx 8upx rgba(114, 130, 138, 0.2);
+.shadow[class*="-gray"] {
+	box-shadow: var(--ShadowSize) var(--grayShadow);
 }
 
-.cu-btn.shadow[class*="-black"] {
-	box-shadow: 6upx 6upx 8upx rgba(26, 26, 26, 0.2);
+.shadow[class*="-black"] {
+	box-shadow: var(--ShadowSize) var(--blackShadow);
+}
+
+.shadow[class*="-white"] {
+	box-shadow: var(--ShadowSize) var(--blackShadow);
+}
+
+.text-shadow[class*="-red"] {
+	text-shadow: var(--ShadowSize) var(--redShadow);
+}
+
+.text-shadow[class*="-orange"] {
+	text-shadow: var(--ShadowSize) var(--orangeShadow);
+}
+
+.text-shadow[class*="-yellow"] {
+	text-shadow: var(--ShadowSize) var(--yellowShadow);
+}
+
+.text-shadow[class*="-olive"] {
+	text-shadow: var(--ShadowSize) var(--oliveShadow);
+}
+
+.text-shadow[class*="-green"] {
+	text-shadow: var(--ShadowSize) var(--greenShadow);
+}
+
+.text-shadow[class*="-cyan"] {
+	text-shadow: var(--ShadowSize) var(--cyanShadow);
+}
+
+.text-shadow[class*="-blue"] {
+	text-shadow: var(--ShadowSize) var(--blueShadow);
+}
+
+.text-shadow[class*="-purple"] {
+	text-shadow: var(--ShadowSize) var(--purpleShadow);
+}
+
+.text-shadow[class*="-mauve"] {
+	text-shadow: var(--ShadowSize) var(--mauveShadow);
+}
+
+.text-shadow[class*="-pink"] {
+	text-shadow: var(--ShadowSize) var(--pinkShadow);
+}
+
+.text-shadow[class*="-brown"] {
+	text-shadow: var(--ShadowSize) var(--brownShadow);
+}
+
+.text-shadow[class*="-grey"] {
+	text-shadow: var(--ShadowSize) var(--greyShadow);
+}
+
+.text-shadow[class*="-gray"] {
+	text-shadow: var(--ShadowSize) var(--grayShadow);
+}
+
+.text-shadow[class*="-black"] {
+	text-shadow: var(--ShadowSize) var(--blackShadow);
 }
 
 .bg-img {
@@ -3991,7 +4070,7 @@ scroll-view.cu-steps .cu-item {
 .text-gray,
 .line-gray,
 .lines-gray {
-	color: var(--grey);
+	color: var(--gray);
 }
 
 .text-black,
@@ -4005,7 +4084,3 @@ scroll-view.cu-steps .cu-item {
 .lines-white {
 	color: var(--white);
 }
-
-.text-shadow {
-	text-shadow: 2upx 4upx 6upx rgba(0, 0, 0, 0.4);
-}
diff --git a/Colorui-UniApp/manifest.json b/Colorui-UniApp/manifest.json
index 2cf7d54..62e4bfe 100644
--- a/Colorui-UniApp/manifest.json
+++ b/Colorui-UniApp/manifest.json
@@ -1,9 +1,9 @@
 {
     "name" : "ColorUi for UniApp",
-    "appid" : "__UNI__239DC72",
+    "appid" : "",
     "description" : "",
-    "versionName" : "1.0.0",
-    "versionCode" : 213,
+    "versionName" : "ColorUi for UniApp 2.1.4",
+    "versionCode" : 214,
     "transformPx" : false,
     "app-plus" : {
         /* 5+App特有相关 */
diff --git a/Colorui-UniApp/pages.json b/Colorui-UniApp/pages.json
index d2b78e7..f482cfd 100644
--- a/Colorui-UniApp/pages.json
+++ b/Colorui-UniApp/pages.json
@@ -13,6 +13,12 @@
 				"navigationBarTitleText": ""
 			}
 		},
+		{
+			"path": "pages/basics/home",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		},
 		{
 			"path": "pages/basics/background",
 			"style": {
diff --git a/Colorui-UniApp/pages/basics/avatar.vue b/Colorui-UniApp/pages/basics/avatar.vue
index 480131d..f2eb2fc 100644
--- a/Colorui-UniApp/pages/basics/avatar.vue
+++ b/Colorui-UniApp/pages/basics/avatar.vue
@@ -3,7 +3,7 @@
 		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">头像</block></cu-custom>
 		<view class="cu-bar bg-white">
 			<view class="action">
-				<text class="icon-title text-blue"></text>头像形状
+				<text class="cuIcon-title text-blue"></text>头像形状
 			</view>
 		</view>
 		<view class="padding">
@@ -12,7 +12,7 @@
 		</view>
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-blue"></text>头像尺寸
+				<text class="cuIcon-title text-blue"></text>头像尺寸
 			</view>
 		</view>
 		<view class="padding">
@@ -39,12 +39,12 @@
 		</view>
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-blue"></text>内嵌文字(图标)
+				<text class="cuIcon-title text-blue"></text>内嵌文字(图标)
 			</view>
 		</view>
 		<view class="padding">
 			<view class="cu-avatar radius">
-				<text class="icon-people"></text>
+				<text class="cuIcon-people"></text>
 			</view>
 			<view class="cu-avatar radius margin-left">
 				<text>港</text>
@@ -53,7 +53,7 @@
 
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-blue"></text>头像颜色
+				<text class="cuIcon-title text-blue"></text>头像颜色
 			</view>
 		</view>
 		<view class="padding-sm">
@@ -63,7 +63,7 @@
 		</view>
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-blue"></text>头像组
+				<text class="cuIcon-title text-blue"></text>头像组
 			</view>
 		</view>
 		<view class="padding">
@@ -74,12 +74,12 @@
 
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-blue"></text>头像标签
+				<text class="cuIcon-title text-blue"></text>头像标签
 			</view>
 		</view>
 		<view class="padding">
 			<view class="cu-avatar round lg margin-left"  v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]">
-				<view class="cu-tag badge" :class="index%2==0?'icon-female bg-pink':'icon-male bg-blue'"></view>
+				<view class="cu-tag badge" :class="index%2==0?'cuIcon-female bg-pink':'cuIcon-male bg-blue'"></view>
 			</view>
 		</view>
 
diff --git a/Colorui-UniApp/pages/basics/background.vue b/Colorui-UniApp/pages/basics/background.vue
index 2fa6559..ca0c530 100644
--- a/Colorui-UniApp/pages/basics/background.vue
+++ b/Colorui-UniApp/pages/basics/background.vue
@@ -6,7 +6,7 @@
 		</cu-custom>
 		<view class="cu-bar bg-white solid-bottom">
 			<view class="action">
-				<text class='icon-title text-blue'></text>深色背景
+				<text class='cuIcon-title text-blue'></text>深色背景
 			</view>
 		</view>
 		<view class="grid col-3 padding-sm">
@@ -19,7 +19,7 @@
 		</view>
 		<view class="cu-bar bg-white solid-bottom">
 			<view class="action">
-				<text class="icon-title text-blue"></text>淡色背景
+				<text class="cuIcon-title text-blue"></text>淡色背景
 			</view>
 		</view>
 		<view class="grid col-3 bg-white padding-sm">
@@ -32,7 +32,7 @@
 		</view>
 		<view class="cu-bar bg-white solid-bottom margin-top">
 			<view class="action">
-				<text class="icon-title text-blue"></text>渐变背景
+				<text class="cuIcon-title text-blue"></text>渐变背景
 			</view>
 		</view>
 		<view class="grid col-2 padding-sm">
@@ -75,7 +75,7 @@
 		</view>
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-blue"></text>图片背景
+				<text class="cuIcon-title text-blue"></text>图片背景
 			</view>
 		</view>
 		<view class="bg-img bg-mask flex align-center" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414upx;">
@@ -90,7 +90,7 @@
 		</view>
 <!-- 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-blue"></text>视频背景
+				<text class="cuIcon-title text-blue"></text>视频背景
 			</view>
 		</view>
 		<view class="bg-video bg-mask flex align-center" style="height: 422upx;">
@@ -108,7 +108,7 @@
 		
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-blue"></text>透明背景(文字层)
+				<text class="cuIcon-title text-blue"></text>透明背景(文字层)
 			</view>
 		</view>
 		<view class="grid col-2">
diff --git a/Colorui-UniApp/pages/basics/button.vue b/Colorui-UniApp/pages/basics/button.vue
index a0d02d1..6ed0741 100644
--- a/Colorui-UniApp/pages/basics/button.vue
+++ b/Colorui-UniApp/pages/basics/button.vue
@@ -3,11 +3,11 @@
 		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">按钮</block></cu-custom>
 		<view class="cu-bar bg-white solid-bottom">
 			<view class="action">
-				<text class="icon-title text-blue"></text>按钮形状
+				<text class="cuIcon-title text-blue"></text>按钮形状
 			</view>
 			<view class="action">
 				<navigator class="action" url="design" hover-class="none">
-					<text class="icon-skinfill"></text>
+					<text class="cuIcon-skinfill"></text>
 					<text class="text-df">设计</text>
 				</navigator>
 			</view>
@@ -16,12 +16,12 @@
 			<button class="cu-btn">默认</button>
 			<button class="cu-btn round">圆角</button>
 			<button class="cu-btn icon">
-				<text class="icon-emojifill"></text>
+				<text class="cuIcon-emojifill"></text>
 			</button>
 		</view>
 		<view class="cu-bar margin-top bg-white solid-bottom">
 			<view class="action">
-				<text class="icon-title text-blue"></text>按钮尺寸
+				<text class="cuIcon-title text-blue"></text>按钮尺寸
 			</view>
 		</view>
 		<view class="padding flex flex-wrap justify-between align-center bg-white">
@@ -31,7 +31,7 @@
 		</view>
 		<view class="cu-bar margin-top bg-white">
 			<view class="action">
-				<text class="icon-title text-blue"></text>按钮颜色
+				<text class="cuIcon-title text-blue"></text>按钮颜色
 			</view>
 			<view class="action">
 				<text class="text-df margin-right-sm">阴影</text>
@@ -45,7 +45,7 @@
 		</view>
 		<view class="cu-bar margin-top bg-white">
 			<view class="action">
-				<text class="icon-title text-blue"></text>镂空按钮
+				<text class="cuIcon-title text-blue"></text>镂空按钮
 			</view>
 			<view class="action">
 				<radio-group @change="SetBorderSize">
@@ -67,7 +67,7 @@
 		</view>
 		<view class="cu-bar margin-top bg-white">
 			<view class="action">
-				<text class="icon-title text-blue"></text>块状按钮
+				<text class="cuIcon-title text-blue"></text>块状按钮
 			</view>
 		</view>
 		<view class="padding flex flex-direction">
@@ -76,7 +76,7 @@
 		</view>
 		<view class="cu-bar margin-top bg-white">
 			<view class="action">
-				<text class="icon-title text-blue"></text>无效状态
+				<text class="cuIcon-title text-blue"></text>无效状态
 			</view>
 		</view>
 		<view class="padding">
@@ -85,14 +85,14 @@
 		</view>
 		<view class="cu-bar margin-top bg-white">
 			<view class="action">
-				<text class="icon-title text-blue"></text>按钮加图标
+				<text class="cuIcon-title text-blue"></text>按钮加图标
 			</view>
 		</view>
 		<view class="padding-xl">
 			<button class="cu-btn block line-orange lg">
-				<text class="icon-upload"></text> 图标</button>
+				<text class="cuIcon-upload"></text> 图标</button>
 			<button class="cu-btn block bg-blue margin-tb-sm lg">
-				<text class="icon-loading2 iconfont-spin"></text> 加载</button>
+				<text class="cuIcon-loading2 iconfont-spin"></text> 加载</button>
 			<button class="cu-btn block bg-black margin-tb-sm lg" loading> 原生加载</button>
 		</view>
 	</view>
diff --git a/Colorui-UniApp/pages/basics/design.vue b/Colorui-UniApp/pages/basics/design.vue
index db7a2da..818b01a 100644
--- a/Colorui-UniApp/pages/basics/design.vue
+++ b/Colorui-UniApp/pages/basics/design.vue
@@ -61,7 +61,7 @@
 				<view class="cu-bar justify-end solid-bottom">
 					<view class="content">选择颜色</view>
 					<view class="action" @tap="hideModal">
-						<text class="icon-close text-red"></text>
+						<text class="cuIcon-close text-red"></text>
 					</view>
 				</view>
 				<view class="grid col-5 padding">
diff --git a/Colorui-UniApp/pages/basics/home.vue b/Colorui-UniApp/pages/basics/home.vue
index 6456f5d..70308a3 100644
--- a/Colorui-UniApp/pages/basics/home.vue
+++ b/Colorui-UniApp/pages/basics/home.vue
@@ -8,7 +8,7 @@
 				 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
 					<view class="nav-title">{{item.title}}</view>
 					<view class="nav-name">{{item.name}}</view>
-					<text :class="'icon-' + item.icon"></text>
+					<text :class="'cuIcon-' + item.icon"></text>
 				</navigator>
 			</view>
 			<view class="cu-tabbar-height"></view>
diff --git a/Colorui-UniApp/pages/basics/icon.vue b/Colorui-UniApp/pages/basics/icon.vue
index a811b69..6535a99 100644
--- a/Colorui-UniApp/pages/basics/icon.vue
+++ b/Colorui-UniApp/pages/basics/icon.vue
@@ -3,13 +3,13 @@
 		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">图标</block></cu-custom>
 		<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
 			<view class="search-form round">
-				<text class="icon-search"></text>
+				<text class="cuIcon-search"></text>
 				<input type="text" placeholder="搜索icon" confirm-type="search" @input="searchIcon"></input>
 			</view>
 		</view>
 		<view class="cu-list grid col-3">
 			<view class="cu-item" v-for="(item,index) in icon" :key="index" v-if="item.isShow">
-				<text class="lg text-gray" :class="'icon-' + item.name"></text>
+				<text class="lg text-gray" :class="'cuIcon-' + item.name"></text>
 				<text>{{item.name}}</text>
 			</view>
 		</view>
diff --git a/Colorui-UniApp/pages/basics/layout.vue b/Colorui-UniApp/pages/basics/layout.vue
index 6bbaf15..853dc8c 100644
--- a/Colorui-UniApp/pages/basics/layout.vue
+++ b/Colorui-UniApp/pages/basics/layout.vue
@@ -10,7 +10,7 @@
 		<block v-if="TabCur==0">
 			<view class="cu-bar bg-white solid-bottom margin-top">
 				<view class="action">
-					<text class="icon-title text-blue"></text>固定尺寸
+					<text class="cuIcon-title text-blue"></text>固定尺寸
 				</view>
 			</view>
 			<view class="padding bg-white">
@@ -26,7 +26,7 @@
 			</view>
 			<view class="cu-bar bg-white  margin-top solid-bottom">
 				<view class="action">
-					<text class="icon-title text-blue"></text>比例布局
+					<text class="cuIcon-title text-blue"></text>比例布局
 				</view>
 			</view>
 			<view class="padding bg-white">
@@ -46,7 +46,7 @@
 			</view>
 			<view class="cu-bar bg-white  margin-top solid-bottom">
 				<view class="action">
-					<text class="icon-title text-blue"></text>水平对齐(justify)
+					<text class="cuIcon-title text-blue"></text>水平对齐(justify)
 				</view>
 			</view>
 			<view class="bg-white">
@@ -73,7 +73,7 @@
 			</view>
 			<view class="cu-bar bg-white  margin-top solid-bottom">
 				<view class="action">
-					<text class="icon-title text-blue"></text>垂直对齐(align)
+					<text class="cuIcon-title text-blue"></text>垂直对齐(align)
 				</view>
 			</view>
 			<view class="bg-white">
@@ -94,7 +94,7 @@
 		<block v-if="TabCur==1">
 			<view class="cu-bar bg-white  margin-top solid-bottom">
 				<view class="action">
-					<text class="icon-title text-blue"></text>等分列
+					<text class="cuIcon-title text-blue"></text>等分列
 				</view>
 				<view class="action"></view>
 			</view>
@@ -105,7 +105,7 @@
 			</view>
 			<view class="cu-bar bg-white  margin-top solid-bottom">
 				<view class="action">
-					<text class="icon-title text-blue"></text>等高
+					<text class="cuIcon-title text-blue"></text>等高
 				</view>
 				<view class="action"></view>
 			</view>
@@ -118,7 +118,7 @@
 		<block v-if="TabCur==2">
 			<view class="cu-bar bg-white margin-top solid-bottom">
 				<view class="action">
-					<text class="icon-title text-blue"></text>浮动
+					<text class="cuIcon-title text-blue"></text>浮动
 				</view>
 			</view>
 			<view class="bg-white padding">
@@ -129,7 +129,7 @@
 			</view>
 			<view class="cu-bar bg-white  solid-bottom margin-top solid-bottom">
 				<view class="action">
-					<text class="icon-title text-blue"></text>内外边距
+					<text class="cuIcon-title text-blue"></text>内外边距
 				</view>
 			</view>
 			<view class="bg-white">
diff --git a/Colorui-UniApp/pages/basics/loading.vue b/Colorui-UniApp/pages/basics/loading.vue
index 279059e..6ccebea 100644
--- a/Colorui-UniApp/pages/basics/loading.vue
+++ b/Colorui-UniApp/pages/basics/loading.vue
@@ -9,13 +9,13 @@
 		</cu-custom>
 		<view class="cu-bar bg-white">
 			<view class="action">
-				<text class="icon-title text-blue"></text>背景
+				<text class="cuIcon-title text-blue"></text>背景
 			</view>
 		</view>
 		<view class="cu-load bg-blue" :class="!isLoad?'loading':'over'"></view>
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-blue"></text>加载状态
+				<text class="cuIcon-title text-blue"></text>加载状态
 			</view>
 			<view class="action">
 				<switch @change="isLoading" :class="isLoad?'checked':''"></switch>
@@ -24,14 +24,14 @@
 		<view class="cu-load bg-grey" :class="!isLoad?'loading':'over'"></view>
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-blue"></text>加载错误
+				<text class="cuIcon-title text-blue"></text>加载错误
 			</view>
 		</view>
 		<view class="cu-load bg-red erro"></view>
 
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-blue"></text>弹框加载
+				<text class="cuIcon-title text-blue"></text>弹框加载
 			</view>
 			<view class="action">
 				<button class="cu-btn bg-green shadow" @tap="LoadModal">
@@ -40,13 +40,13 @@
 			</view>
 		</view>
 		<view class="cu-load load-modal" v-if="loadModal">
-			<!-- <view class="icon-emojifill text-orange"></view> -->
+			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
 			<image src="/static/logo.png" mode="aspectFit"></image>
 			<view class="gray-text">加载中...</view>
 		</view>
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-blue"></text>进度条加载
+				<text class="cuIcon-title text-blue"></text>进度条加载
 			</view>
 			<view class="action">
 				<button class="cu-btn bg-green shadow" @tap="LoadProgress">
diff --git a/Colorui-UniApp/pages/basics/progress.vue b/Colorui-UniApp/pages/basics/progress.vue
index 9639a82..fed6338 100644
--- a/Colorui-UniApp/pages/basics/progress.vue
+++ b/Colorui-UniApp/pages/basics/progress.vue
@@ -3,7 +3,7 @@
 		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">进度条</block></cu-custom>
 		<view class="cu-bar bg-white solid-bottom">
 			<view class="action">
-				<text class="icon-title text-blue"></text>进度条形状
+				<text class="cuIcon-title text-blue"></text>进度条形状
 			</view>
 		</view>
 		<view class="padding bg-white">
@@ -19,7 +19,7 @@
 		</view>
 		<view class="cu-bar bg-white solid-bottom margin-top">
 			<view class="action">
-				<text class="icon-title text-blue"></text>进度条尺寸
+				<text class="cuIcon-title text-blue"></text>进度条尺寸
 			</view>
 		</view>
 		<view class="padding bg-white">
@@ -36,7 +36,7 @@
 
 		<view class="cu-bar bg-white solid-bottom margin-top" @tap="showModal" data-target="ColorModal">
 			<view class="action">
-				<text class="icon-title text-blue"></text>进度条颜色
+				<text class="cuIcon-title text-blue"></text>进度条颜色
 			</view>
 			<view class="action">
 				<view class="padding-sm solid radius shadow-blur" :class="'bg-' + color"></view>
@@ -51,7 +51,7 @@
 
 		<view class="cu-bar bg-white solid-bottom margin-top">
 			<view class="action">
-				<text class="icon-title text-blue"></text>进度条条纹
+				<text class="cuIcon-title text-blue"></text>进度条条纹
 			</view>
 			<switch class="margin-right-sm" :class="active?'checked':''" @change="SetActive"></switch>
 		</view>
@@ -65,7 +65,7 @@
 		</view>
 		<view class="cu-bar bg-white solid-bottom margin-top">
 			<view class="action">
-				<text class="icon-title text-blue"></text>进度条比例
+				<text class="cuIcon-title text-blue"></text>进度条比例
 			</view>
 		</view>
 		<view class="padding bg-white">
@@ -77,7 +77,7 @@
 		</view>
 		<view class="cu-bar bg-white solid-bottom margin-top">
 			<view class="action">
-				<text class="icon-title text-blue"></text>进度条布局
+				<text class="cuIcon-title text-blue"></text>进度条布局
 			</view>
 		</view>
 		<view class="padding bg-white ">
@@ -85,7 +85,7 @@
 				<view class="cu-progress round">
 					<view class="bg-green" :style="[{ width:loading?'100%':''}]"></view>
 				</view>
-				<text class="icon-roundcheckfill text-green margin-left-sm"></text>
+				<text class="cuIcon-roundcheckfill text-green margin-left-sm"></text>
 			</view>
 			<view class="flex margin-top">
 				<view class="cu-progress round">
@@ -100,7 +100,7 @@
 				<view class="cu-bar justify-end solid-bottom">
 					<view class="content">选择颜色</view>
 					<view class="action" @tap="hideModal">
-						<text class="icon-close text-red"></text>
+						<text class="cuIcon-close text-red"></text>
 					</view>
 				</view>
 				<view class="grid col-5 padding">
diff --git a/Colorui-UniApp/pages/basics/shadow.vue b/Colorui-UniApp/pages/basics/shadow.vue
index 387f91e..23a1133 100644
--- a/Colorui-UniApp/pages/basics/shadow.vue
+++ b/Colorui-UniApp/pages/basics/shadow.vue
@@ -3,7 +3,7 @@
 		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">边框阴影</block></cu-custom>
 		<view class="cu-bar bg-white solid-bottom">
 			<view class="action">
-				<text class="icon-title text-blue"></text>边框
+				<text class="cuIcon-title text-blue"></text>边框
 			</view>
 			<view class="action">
 				<switch class="sm" @change="SetSize" :class="size?'checked':''"></switch>
@@ -18,16 +18,17 @@
 		</view>
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-blue"></text>阴影
+				<text class="cuIcon-title text-blue"></text>阴影
 			</view>
 		</view>
 		<view class="padding text-center">
-			<view class="padding-xl radius shadow bg-white"> 默认阴影</view>
-			<view class="padding-xl radius shadow-lg bg-white margin-top">长阴影</view>
+			<view class="padding-xl radius shadow bg-white">默认阴影</view>
+			<view class="padding-xl radius shadow bg-blue margin-top">根据背景颜色而改变的阴影</view>
+			<view class="padding-xl radius shadow shadow-lg bg-white margin-top">长阴影</view>
+			<view class="padding-xl radius shadow shadow-lg bg-blue margin-top">长阴影</view>
 			<view class="padding-xl radius shadow-warp bg-white margin-top">翘边阴影</view>
-			<view class="padding-xl radius shadow-blur bg-red margin-top">根据背景颜色而改变的阴影</view>
 			<view class="padding-xl radius shadow-blur bg-red margin-top bg-img" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg);">
-				<view>根据背景颜色而改变的阴影</view>
+				<view>根据背景图而改变的阴影</view>
 			</view>
 		</view>
 	</view>
diff --git a/Colorui-UniApp/pages/basics/tag.vue b/Colorui-UniApp/pages/basics/tag.vue
index 733ff50..71f826a 100644
--- a/Colorui-UniApp/pages/basics/tag.vue
+++ b/Colorui-UniApp/pages/basics/tag.vue
@@ -3,7 +3,7 @@
 		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">标签</block></cu-custom>
 		<view class="cu-bar bg-white solid-bottom">
 			<view class='action'>
-				<text class='icon-title text-blue'></text>标签形状
+				<text class='cuIcon-title text-blue'></text>标签形状
 			</view>
 		</view>
 		<view class="padding bg-white solid-bottom">
@@ -14,7 +14,7 @@
 
 		<view class="cu-bar bg-white margin-top">
 			<view class='action'>
-				<text class='icon-title text-blue'></text>标签尺寸
+				<text class='cuIcon-title text-blue'></text>标签尺寸
 			</view>
 		</view>
 		<view class="padding bg-white">
@@ -23,7 +23,7 @@
 		</view>
 		<view class="cu-bar bg-white margin-top">
 			<view class='action'>
-				<text class='icon-title text-blue'></text>标签颜色
+				<text class='cuIcon-title text-blue'></text>标签颜色
 			</view>
 		</view>
 		<view class='padding-sm flex flex-wrap'>
@@ -36,7 +36,7 @@
 		</view>
 		<view class="cu-bar bg-white margin-top">
 			<view class='action'>
-				<text class='icon-title text-blue'></text>镂空标签
+				<text class='cuIcon-title text-blue'></text>镂空标签
 			</view>
 		</view>
 		<view class='padding-sm flex flex-wrap'>
@@ -46,13 +46,13 @@
 		</view>
 		<view class="cu-bar bg-white margin-top">
 			<view class='action'>
-				<text class='icon-title text-blue'></text>胶囊样式
+				<text class='cuIcon-title text-blue'></text>胶囊样式
 			</view>
 		</view>
 		<view class="padding">
 			<view class="cu-capsule">
 				<view class='cu-tag bg-red'>
-					<text class='icon-likefill'></text>
+					<text class='cuIcon-likefill'></text>
 				</view>
 				<view class="cu-tag line-red">
 					12
@@ -60,7 +60,7 @@
 			</view>
 			<view class="cu-capsule round">
 				<view class='cu-tag bg-blue '>
-					<text class='icon-likefill'></text>
+					<text class='cuIcon-likefill'></text>
 				</view>
 				<view class="cu-tag line-blue">
 					23
@@ -76,7 +76,7 @@
 			</view>
 			<view class="cu-capsule radius">
 				<view class='cu-tag bg-grey '>
-					<text class='icon-likefill'></text>
+					<text class='cuIcon-likefill'></text>
 				</view>
 				<view class="cu-tag line-grey">
 					23
@@ -84,7 +84,7 @@
 			</view>
 			<view class="cu-capsule radius">
 				<view class='cu-tag bg-brown sm'>
-					<text class='icon-likefill'></text>
+					<text class='cuIcon-likefill'></text>
 				</view>
 				<view class="cu-tag line-brown sm">
 					23
@@ -93,7 +93,7 @@
 		</view>
 		<view class="cu-bar bg-white margin-top">
 			<view class='action'>
-				<text class='icon-title text-blue'></text>数字标签
+				<text class='cuIcon-title text-blue'></text>数字标签
 			</view>
 		</view>
 		<view class="padding flex justify-between align-center">
@@ -106,7 +106,7 @@
 			</view>
 			<view class='cu-avatar xl radius'>
 				<view class='cu-tag badge'>99</view>
-				<text class='icon-people'></text>
+				<text class='cuIcon-people'></text>
 			</view>
 			<view class='cu-avatar xl radius'>
 				<view class='cu-tag badge'>99+</view>
diff --git a/Colorui-UniApp/pages/basics/text.vue b/Colorui-UniApp/pages/basics/text.vue
index 4c98f90..976ce87 100644
--- a/Colorui-UniApp/pages/basics/text.vue
+++ b/Colorui-UniApp/pages/basics/text.vue
@@ -2,141 +2,153 @@
 	<view>
 		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">文本</block></cu-custom>
 		<view class="cu-bar bg-white solid-bottom">
-			<view class='action'>
-				<text class='icon-title text-blue'></text>文字大小
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>文字大小
 			</view>
 		</view>
-		<view class='bg-white padding-lr'>
-			<view class='solids-bottom padding-xs flex align-center'>
-				<view class='padding'>60</view>
-				<view class='flex-sub text-center'>
-					<view class='solid-bottom text-xsl padding'>
-						<text class=' icon-roundcheckfill text-green'></text>
+		<view class="bg-white padding-lr">
+			<view class="solids-bottom padding-xs flex align-center">
+				<view class="padding">60</view>
+				<view class="flex-sub text-center">
+					<view class="solid-bottom text-xsl padding">
+						<text class=" cuIcon-roundcheckfill text-green"></text>
 					</view>
-					<view class='padding'>用于图标、数字等特大显示</view>
+					<view class="padding">用于图标、数字等特大显示</view>
 				</view>
 			</view>
-			<view class='solids-bottom padding-xs flex align-center'>
-				<view class='padding'>40</view>
-				<view class='flex-sub text-center'>
-					<view class='solid-bottom text-sl padding'>
-						<text class=' icon-roundcheckfill text-green'></text>
+			<view class="solids-bottom padding-xs flex align-center">
+				<view class="padding">40</view>
+				<view class="flex-sub text-center">
+					<view class="solid-bottom text-sl padding">
+						<text class=" cuIcon-roundcheckfill text-green"></text>
 					</view>
-					<view class='padding'>用于图标、数字等较大显示</view>
+					<view class="padding">用于图标、数字等较大显示</view>
 				</view>
 			</view>
-			<view class='solids-bottom padding-xs flex align-center'>
-				<view class='padding'>22</view>
-				<view class='flex-sub text-center'>
-					<view class='solid-bottom text-xxl padding'>
-						<text class='text-price text-red'>80.00</text>
+			<view class="solids-bottom padding-xs flex align-center">
+				<view class="padding">22</view>
+				<view class="flex-sub text-center">
+					<view class="solid-bottom text-xxl padding">
+						<text class="text-price text-red">80.00</text>
 					</view>
-					<view class='padding'>用于金额数字等信息</view>
+					<view class="padding">用于金额数字等信息</view>
 				</view>
 			</view>
-			<view class='solids-bottom padding-xs flex align-center'>
-				<view class='padding'>18</view>
-				<view class='flex-sub text-center'>
-					<view class='solid-bottom text-xl padding'>
-						<text class='text-black text-bold'>您的订单已提交成功！</text>
+			<view class="solids-bottom padding-xs flex align-center">
+				<view class="padding">18</view>
+				<view class="flex-sub text-center">
+					<view class="solid-bottom text-xl padding">
+						<text class="text-black text-bold">您的订单已提交成功！</text>
 					</view>
-					<view class='padding'>页面大标题，用于结果页等单一信息页</view>
+					<view class="padding">页面大标题，用于结果页等单一信息页</view>
 				</view>
 			</view>
-			<view class='solids-bottom padding-xs flex align-center'>
-				<view class='padding'>16</view>
-				<view class='flex-sub text-center'>
-					<view class='solid-bottom text-lg padding'>
-						<text class='text-black'>ColorUI组件库</text>
+			<view class="solids-bottom padding-xs flex align-center">
+				<view class="padding">16</view>
+				<view class="flex-sub text-center">
+					<view class="solid-bottom text-lg padding">
+						<text class="text-black">ColorUI组件库</text>
 					</view>
-					<view class='padding'>页面小标题，首要层级显示内容</view>
+					<view class="padding">页面小标题，首要层级显示内容</view>
 				</view>
 			</view>
-			<view class='solids-bottom padding-xs flex align-center'>
-				<view class='padding'>14</view>
-				<view class='flex-sub text-center'>
-					<view class='solid-bottom text-df padding'>专注视觉的小程序组件库</view>
-					<view class='padding'>页面默认字号，用于摘要或阅读文本</view>
+			<view class="solids-bottom padding-xs flex align-center">
+				<view class="padding">14</view>
+				<view class="flex-sub text-center">
+					<view class="solid-bottom text-df padding">专注视觉的小程序组件库</view>
+					<view class="padding">页面默认字号，用于摘要或阅读文本</view>
 				</view>
 			</view>
-			<view class='solids-bottom padding-xs flex align-center'>
-				<view class='padding'>12</view>
-				<view class='flex-sub text-center'>
-					<view class='solid-bottom text-sm padding'>
-						<text class='text-grey'>衬衫的价格是9磅15便士</text>
+			<view class="solids-bottom padding-xs flex align-center">
+				<view class="padding">12</view>
+				<view class="flex-sub text-center">
+					<view class="solid-bottom text-sm padding">
+						<text class="text-grey">衬衫的价格是9磅15便士</text>
 					</view>
-					<view class='padding'>页面辅助信息，次级内容等</view>
+					<view class="padding">页面辅助信息，次级内容等</view>
 				</view>
 			</view>
-			<view class='padding-xs flex align-center'>
-				<view class='padding'>10</view>
-				<view class='flex-sub text-center'>
-					<view class='solid-bottom text-xs padding'>
-						<text class='text-gray'>我于杀戮之中绽放 亦如黎明中的花朵</text>
+			<view class="padding-xs flex align-center">
+				<view class="padding">10</view>
+				<view class="flex-sub text-center">
+					<view class="solid-bottom text-xs padding">
+						<text class="text-gray">我于杀戮之中绽放 亦如黎明中的花朵</text>
 					</view>
-					<view class='padding'>说明文本，标签文字等关注度低的文字</view>
+					<view class="padding">说明文本，标签文字等关注度低的文字</view>
 				</view>
 			</view>
 		</view>
 		<view class="cu-bar bg-white solid-bottom margin-top">
-			<view class='action'>
-				<text class='icon-title text-blue'></text>文字颜色
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>文字颜色
 			</view>
 		</view>
-		<view class='grid col-5 padding-sm'>
-			<view class='padding-sm' v-for="(item,index) in ColorList" :key="index">
-				<view class='text-center' :class="'text-' + item.name">
+		<view class="grid col-5 padding-sm">
+			<view class="padding-sm" v-for="(item,index) in ColorList" :key="index">
+				<view class="text-center" :class="'text-' + item.name">
 					{{item.title}}
 				</view>
 			</view>
 		</view>
 		<view class="cu-bar bg-white solid-bottom margin-top">
-			<view class='action'>
-				<text class='icon-title text-blue'></text>文字截断
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>文字阴影
 			</view>
 		</view>
-		<view class='padding bg-white'>
-			<view class='text-cut padding bg-grey radius' style='width:220px'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
+		<view class="grid col-5 padding-sm">
+			<view class="padding-sm" v-for="(item,index) in ColorList" :key="index">
+				<view class="text-center text-shadow" :class="'text-' + item.name">
+					<view class="cuIcon-ellipse text-xxl"></view>
+				</view>
+			</view>
 		</view>
 		<view class="cu-bar bg-white solid-bottom margin-top">
-			<view class='action'>
-				<text class='icon-title text-blue'></text>文字对齐
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>文字截断
 			</view>
 		</view>
-		<view class='padding bg-white'>
-			<view class='text-left padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
-			<view class='text-center padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
-			<view class='text-right padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
+		<view class="padding bg-white">
+			<view class="text-cut padding bg-grey radius" style="width:220px">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
 		</view>
 		<view class="cu-bar bg-white solid-bottom margin-top">
-			<view class='action'>
-				<text class='icon-title text-blue'></text>特殊文字
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>文字对齐
 			</view>
 		</view>
-		<view class='padding text-center'>
-			<view class='padding-lr bg-white'>
-				<view class='solid-bottom padding'>
-					<text class='text-price'>80.00</text>
-				</view>
-				<view class='padding'>价格文本，利用伪元素添加"¥"符号</view>
+		<view class="padding bg-white">
+			<view class="text-left padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
+			<view class="text-center padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
+			<view class="text-right padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
+		</view>
+		<view class="cu-bar bg-white solid-bottom margin-top">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>特殊文字
 			</view>
-			<view class='padding-lr bg-white margin-top'>
-				<view class='solid-bottom padding'>
-					<text class='text-Abc'>color Ui</text>
+		</view>
+		<view class="padding text-center">
+			<view class="padding-lr bg-white">
+				<view class="solid-bottom padding">
+					<text class="text-price">80.00</text>
 				</view>
-				<view class='padding'>英文单词首字母大写</view>
+				<view class="padding">价格文本，利用伪元素添加"¥"符号</view>
 			</view>
-			<view class='padding-lr bg-white margin-top'>
-				<view class='solid-bottom padding'>
-					<text class='text-ABC'>color Ui</text>
+			<view class="padding-lr bg-white margin-top">
+				<view class="solid-bottom padding">
+					<text class="text-Abc">color Ui</text>
 				</view>
-				<view class='padding'>全部字母大写</view>
+				<view class="padding">英文单词首字母大写</view>
 			</view>
-			<view class='padding-lr bg-white margin-top'>
-				<view class='solid-bottom padding'>
-					<text class='text-abc'>color Ui</text>
+			<view class="padding-lr bg-white margin-top">
+				<view class="solid-bottom padding">
+					<text class="text-ABC">color Ui</text>
 				</view>
-				<view class='padding'>全部字母小写</view>
+				<view class="padding">全部字母大写</view>
+			</view>
+			<view class="padding-lr bg-white margin-top">
+				<view class="solid-bottom padding">
+					<text class="text-abc">color Ui</text>
+				</view>
+				<view class="padding">全部字母小写</view>
 			</view>
 		</view>
 	</view>
diff --git a/Colorui-UniApp/pages/component/bar.vue b/Colorui-UniApp/pages/component/bar.vue
index c2afd57..28690bc 100644
--- a/Colorui-UniApp/pages/component/bar.vue
+++ b/Colorui-UniApp/pages/component/bar.vue
@@ -3,33 +3,33 @@
 		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">操作条</block></cu-custom>
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-green"></text>
+				<text class="cuIcon-title text-green"></text>
 				<text>底部操作条</text>
 			</view>
 		</view>
 		<view class="box">
 			<view class="cu-bar tabbar bg-white">
 				<view class="action">
-					<view class="icon-cu-image">
+					<view class="cuIcon-cu-image">
 						<image src="/static/tabbar/basics_cur.png"></image>
 					</view>
 					<view class="text-green">元素</view>
 				</view>
 				<view class="action">
-					<view class="icon-cu-image">
+					<view class="cuIcon-cu-image">
 						<image src="/static/tabbar/component.png"></image>
 					</view>
 					<view class="text-gray">组件</view>
 				</view>
 				<view class="action">
-					<view class="icon-cu-image">
+					<view class="cuIcon-cu-image">
 						<image src="/static/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">
+					<view class="cuIcon-cu-image">
 						<image src="/static/tabbar/about.png"></image>
 						<view class="cu-tag badge"></view>
 					</view>
@@ -38,23 +38,23 @@
 			</view>
 			<view class="cu-bar tabbar margin-bottom-xl bg-black">
 				<view class="action text-orange">
-					<view class="icon-homefill"></view> 首页
+					<view class="cuIcon-homefill"></view> 首页
 				</view>
 				<view class="action text-gray">
-					<view class="icon-similar"></view> 分类
+					<view class="cuIcon-similar"></view> 分类
 				</view>
 				<view class="action text-gray">
-					<view class="icon-recharge"></view>
+					<view class="cuIcon-recharge"></view>
 					积分
 				</view>
 				<view class="action text-gray">
-					<view class="icon-cart">
+					<view class="cuIcon-cart">
 						<view class="cu-tag badge">99</view>
 					</view>
 					购物车
 				</view>
 				<view class="action text-gray">
-					<view class="icon-my">
+					<view class="cuIcon-my">
 						<view class="cu-tag badge"></view>
 					</view>
 					我的
@@ -62,23 +62,23 @@
 			</view>
 			<view class="cu-bar tabbar margin-bottom-xl bg-white">
 				<view class="action text-green">
-					<view class="icon-homefill"></view> 首页
+					<view class="cuIcon-homefill"></view> 首页
 				</view>
 				<view class="action text-gray">
-					<view class="icon-similar"></view> 分类
+					<view class="cuIcon-similar"></view> 分类
 				</view>
 				<view class="action text-gray add-action">
-					<button class="cu-btn icon-add bg-green shadow"></button>
+					<button class="cu-btn cuIcon-add bg-green shadow"></button>
 					发布
 				</view>
 				<view class="action text-gray">
-					<view class="icon-cart">
+					<view class="cuIcon-cart">
 						<view class="cu-tag badge">99</view>
 					</view>
 					购物车
 				</view>
 				<view class="action text-gray">
-					<view class="icon-my">
+					<view class="cuIcon-my">
 						<view class="cu-tag badge"></view>
 					</view>
 					我的
@@ -86,23 +86,23 @@
 			</view>
 			<view class="cu-bar tabbar bg-black">
 				<view class="action text-green">
-					<view class="icon-homefill"></view> 首页
+					<view class="cuIcon-homefill"></view> 首页
 				</view>
 				<view class="action text-gray">
-					<view class="icon-similar"></view> 分类
+					<view class="cuIcon-similar"></view> 分类
 				</view>
 				<view class="action text-gray add-action">
-					<button class="cu-btn icon-add bg-green shadow"></button>
+					<button class="cu-btn cuIcon-add bg-green shadow"></button>
 					发布
 				</view>
 				<view class="action text-gray">
-					<view class="icon-cart">
+					<view class="cuIcon-cart">
 						<view class="cu-tag badge">99</view>
 					</view>
 					购物车
 				</view>
 				<view class="action text-gray">
-					<view class="icon-my">
+					<view class="cuIcon-my">
 						<view class="cu-tag badge"></view>
 					</view>
 					我的
@@ -111,16 +111,16 @@
 
 			<view class="cu-bar bg-white tabbar border shop">
 				<button class="action" open-type="contact">
-					<view class="icon-service text-green">
+					<view class="cuIcon-service text-green">
 						<view class="cu-tag badge"></view>
 					</view>
 					客服
 				</button>
 				<view class="action text-orange">
-					<view class="icon-favorfill"></view> 已收藏
+					<view class="cuIcon-favorfill"></view> 已收藏
 				</view>
 				<view class="action">
-					<view class="icon-cart">
+					<view class="cuIcon-cart">
 						<view class="cu-tag badge">99</view>
 					</view>
 					购物车
@@ -130,13 +130,13 @@
 
 			<view class="cu-bar bg-white tabbar border shop">
 				<button class="action" open-type="contact">
-					<view class="icon-service text-green">
+					<view class="cuIcon-service text-green">
 						<view class="cu-tag badge"></view>
 					</view>
 					客服
 				</button>
 				<view class="action">
-					<view class="icon-cart">
+					<view class="cuIcon-cart">
 						<view class="cu-tag badge">99</view>
 					</view>
 					购物车
@@ -147,16 +147,16 @@
 
 			<view class="cu-bar bg-white tabbar border shop">
 				<button class="action" open-type="contact">
-					<view class="icon-service text-green">
+					<view class="cuIcon-service text-green">
 						<view class="cu-tag badge"></view>
 					</view>
 					客服
 				</button>
 				<view class="action">
-					<view class=" icon-shop"></view> 店铺
+					<view class=" cuIcon-shop"></view> 店铺
 				</view>
 				<view class="action">
-					<view class="icon-cart">
+					<view class="cuIcon-cart">
 						<view class="cu-tag badge">99</view>
 					</view>
 					购物车
@@ -167,12 +167,12 @@
 			</view>
 			<view class="cu-bar bg-white tabbar border shop">
 				<button class="action" open-type="contact">
-					<view class="icon-service text-green">
+					<view class="cuIcon-service text-green">
 						<view class="cu-tag badge"></view>
 					</view> 客服
 				</button>
 				<view class="action">
-					<view class="icon-cart">
+					<view class="cuIcon-cart">
 						<view class="cu-tag badge">99</view>
 					</view>
 					购物车
@@ -186,7 +186,7 @@
 
 		<view class="cu-bar bg-white">
 			<view class="action">
-				<text class="icon-title text-green"></text>
+				<text class="cuIcon-title text-green"></text>
 				<text>标题操作条</text>
 			</view>
 		</view>
@@ -255,13 +255,13 @@
 			</view>
 			<view class="cu-bar bg-white">
 				<view class="action">
-					<text class="icon-title text-green"></text>
+					<text class="cuIcon-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="cuIcon-titles text-green"></text>
 					<text class="text-xl text-bold">关于我们</text>
 				</view>
 			</view>
@@ -269,14 +269,14 @@
 
 		<view class="cu-bar bg-white">
 			<view class="action">
-				<text class="icon-title text-green"></text>
+				<text class="cuIcon-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> 返回
+					<text class="cuIcon-back text-gray"></text> 返回
 				</view>
 				<view class="content text-bold">
 					操作条
@@ -284,19 +284,19 @@
 			</view>
 			<view class="cu-bar bg-white">
 				<view class="action">
-					<text class="icon-homefill text-gray"></text> 首页
+					<text class="cuIcon-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>
+					<text class="cuIcon-cardboardfill text-grey"></text>
+					<text class="cuIcon-recordfill text-red"></text>
 				</view>
 			</view>
 			<view class="cu-bar bg-blue">
 				<view class="action">
-					<text class="icon-close"></text> 关闭
+					<text class="cuIcon-close"></text> 关闭
 				</view>
 				<view class="content text-bold">
 					海蓝
@@ -308,7 +308,7 @@
 					ColorUI
 				</view>
 				<view class="action">
-					<text class="icon-more"></text>
+					<text class="cuIcon-more"></text>
 				</view>
 			</view>
 		</view>
@@ -316,14 +316,14 @@
 
 		<view class="cu-bar bg-white">
 			<view class="action">
-				<text class="icon-title text-green"></text>
+				<text class="cuIcon-title text-green"></text>
 				<text>搜索操作条</text>
 			</view>
 		</view>
 		<view class="box">
 			<view class="cu-bar search bg-white">
 				<view class="search-form round">
-					<text class="icon-search"></text>
+					<text class="cuIcon-search"></text>
 					<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
 				</view>
 				<view class="action">
@@ -333,32 +333,32 @@
 			<view class="cu-bar search bg-white">
 				<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big11010.jpg"></view>
 				<view class="search-form round">
-					<text class="icon-search"></text>
+					<text class="cuIcon-search"></text>
 					<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
 				</view>
 				<view class="action">
 					<text>广州</text>
-					<text class="icon-triangledownfill"></text>
+					<text class="cuIcon-triangledownfill"></text>
 				</view>
 			</view>
 			<view class="cu-bar bg-red search">
 				<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big114004.jpg);"></view>
 				<view class="search-form radius">
-					<text class="icon-search"></text>
+					<text class="cuIcon-search"></text>
 					<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
 				</view>
 				<view class="action">
 					<text>广州</text>
-					<text class="icon-triangledownfill"></text>
+					<text class="cuIcon-triangledownfill"></text>
 				</view>
 			</view>
 			<view class="cu-bar bg-cyan search">
 				<view class="search-form radius">
-					<text class="icon-search"></text>
+					<text class="cuIcon-search"></text>
 					<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
 				</view>
 				<view class="action">
-					<text class="icon-close"></text>
+					<text class="cuIcon-close"></text>
 					<text>取消</text>
 				</view>
 			</view>
@@ -366,7 +366,7 @@
 
 		<view class="cu-bar bg-white">
 			<view class="action">
-				<text class="icon-title text-green"></text>
+				<text class="cuIcon-title text-green"></text>
 				<text>操作条按钮组</text>
 			</view>
 		</view>
@@ -388,18 +388,18 @@
 
 		<view class="cu-bar bg-white">
 			<view class="action">
-				<text class="icon-title text-green"></text>
+				<text class="cuIcon-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>
+					<text class="cuIcon-sound text-grey"></text>
 				</view>
 				<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" class="solid-bottom" :focus="false" maxlength="300" cursor-spacing="10"></input>
 				<view class="action">
-					<text class="icon-emojifill text-grey"></text>
+					<text class="cuIcon-emojifill text-grey"></text>
 				</view>
 				<button class="cu-btn bg-green shadow-blur">发送</button>
 			</view>
@@ -407,11 +407,11 @@
 			<view class="cu-bar input">
 				<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg);"></view>
 				<view class="action">
-					<text class="icon-roundaddfill text-grey"></text>
+					<text class="cuIcon-roundaddfill text-grey"></text>
 				</view>
 				<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" class="solid-bottom" maxlength="300" cursor-spacing="10"></input>
 				<view class="action">
-					<text class="icon-emojifill text-grey"></text>
+					<text class="cuIcon-emojifill text-grey"></text>
 				</view>
 				<button class="cu-btn bg-green shadow-blur">发送</button>
 			</view>
diff --git a/Colorui-UniApp/pages/component/card.vue b/Colorui-UniApp/pages/component/card.vue
index 103e48b..b29d8ae 100644
--- a/Colorui-UniApp/pages/component/card.vue
+++ b/Colorui-UniApp/pages/component/card.vue
@@ -3,7 +3,7 @@
 		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">卡片</block></cu-custom>
 		<view class="cu-bar bg-white solid-bottom">
 			<view class="action">
-				<text class="icon-titles text-orange"></text> 案例类卡片
+				<text class="cuIcon-titles text-orange"></text> 案例类卡片
 			</view>
 			<view class="action">
 				<switch :class="isCard?'checked':''" :checked="isCard?true:false" @change="IsCard"></switch>
@@ -25,9 +25,9 @@
 							<view class="text-gray text-sm flex justify-between">
 								十天前
 								<view class="text-gray text-sm">
-									<text class="icon-attentionfill margin-lr-xs"></text> 10
-									<text class="icon-appreciatefill margin-lr-xs"></text> 20
-									<text class="icon-messagefill margin-lr-xs"></text> 30
+									<text class="cuIcon-attentionfill margin-lr-xs"></text> 10
+									<text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
+									<text class="cuIcon-messagefill margin-lr-xs"></text> 30
 								</view>
 							</view>
 						</view>
@@ -37,7 +37,7 @@
 		</view>
 		<view class="cu-bar bg-white solid-bottom" :class="isCard?'margin-top':''">
 			<view class="action">
-				<text class="icon-titles text-orange "></text> 动态类卡片
+				<text class="cuIcon-titles text-orange "></text> 动态类卡片
 			</view>
 			<view class="action">
 				<switch :class="isCard?'checked':''" :checked="isCard?true:false" @change="IsCard"></switch>
@@ -65,9 +65,9 @@
 					</view>
 				</view>
 				<view class="text-gray text-sm text-right padding">
-					<text class="icon-attentionfill margin-lr-xs"></text> 10
-					<text class="icon-appreciatefill margin-lr-xs"></text> 20
-					<text class="icon-messagefill margin-lr-xs"></text> 30
+					<text class="cuIcon-attentionfill margin-lr-xs"></text> 10
+					<text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
+					<text class="cuIcon-messagefill margin-lr-xs"></text> 30
 				</view>
 
 				<view class="cu-list menu-avatar comment solids-top">
@@ -87,8 +87,8 @@
 							<view class="margin-top-sm flex justify-between">
 								<view class="text-gray text-df">2018年12月4日</view>
 								<view>
-									<text class="icon-appreciatefill text-red"></text>
-									<text class="icon-messagefill text-gray margin-left-sm"></text>
+									<text class="cuIcon-appreciatefill text-red"></text>
+									<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
 								</view>
 							</view>
 						</view>
@@ -110,8 +110,8 @@
 							<view class="margin-top-sm flex justify-between">
 								<view class="text-gray text-df">2018年12月4日</view>
 								<view>
-									<text class="icon-appreciate text-gray"></text>
-									<text class="icon-messagefill text-gray margin-left-sm"></text>
+									<text class="cuIcon-appreciate text-gray"></text>
+									<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
 								</view>
 							</view>
 						</view>
@@ -122,7 +122,7 @@
 
 		<view class="cu-bar bg-white solid-bottom margin-top">
 			<view class="action">
-				<text class="icon-titles text-orange "></text> 文章类卡片
+				<text class="cuIcon-titles text-orange "></text> 文章类卡片
 			</view>
 			<view class="action">
 				<switch :class="isCard?'checked':''" :checked="isCard?true:false" @change="IsCard"></switch>
diff --git a/Colorui-UniApp/pages/component/chat.vue b/Colorui-UniApp/pages/component/chat.vue
index 33990bf..960caed 100644
--- a/Colorui-UniApp/pages/component/chat.vue
+++ b/Colorui-UniApp/pages/component/chat.vue
@@ -22,7 +22,7 @@
 				<view class="date "> 13:23</view>
 			</view>
 			<view class="cu-info">
-				<text class="icon-roundclosefill text-red "></text> 对方拒绝了你的消息
+				<text class="cuIcon-roundclosefill text-red "></text> 对方拒绝了你的消息
 			</view>
 			<view class="cu-info">
 				对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
@@ -41,7 +41,7 @@
 						3"
 					</view>
 					<view class="content shadow">
-						<text class="icon-sound text-xxl padding-right-xl"> </text>
+						<text class="cuIcon-sound text-xxl padding-right-xl"> </text>
 					</view>
 				</view>
 				<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
@@ -50,7 +50,7 @@
 			<view class="cu-item self">
 				<view class="main">
 					<view class="action">
-						<text class="icon-locationfill text-orange text-xxl"></text>
+						<text class="cuIcon-locationfill text-orange text-xxl"></text>
 					</view>
 					<view class="content shadow">
 						喵星球，喵喵市
@@ -66,7 +66,7 @@
 						@#$^&**
 					</view>
 					<view class="action text-grey">
-						<text class="icon-warnfill text-red text-xxl"></text> <text class="text-sm margin-left-sm">翻译错误</text>
+						<text class="cuIcon-warnfill text-red text-xxl"></text> <text class="text-sm margin-left-sm">翻译错误</text>
 					</view>
 				</view>
 				<view class="date">13:23</view>
@@ -75,12 +75,12 @@
 
 		<view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
 			<view class="action">
-				<text class="icon-sound text-grey"></text>
+				<text class="cuIcon-sound text-grey"></text>
 			</view>
 			<input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
 			 @focus="InputFocus" @blur="InputBlur"></input>
 			<view class="action">
-				<text class="icon-emojifill text-grey"></text>
+				<text class="cuIcon-emojifill text-grey"></text>
 			</view>
 			<button class="cu-btn bg-green shadow">发送</button>
 		</view>
diff --git a/Colorui-UniApp/pages/component/form.vue b/Colorui-UniApp/pages/component/form.vue
index aa249ab..d9c61d4 100644
--- a/Colorui-UniApp/pages/component/form.vue
+++ b/Colorui-UniApp/pages/component/form.vue
@@ -20,7 +20,7 @@
 			<view class="cu-form-group">
 				<view class="title">收货地址</view>
 				<input placeholder="输入框带个图标" name="input"></input>
-				<text class='icon-locationfill text-orange'></text>
+				<text class='cuIcon-locationfill text-orange'></text>
 			</view>
 			<view class="cu-form-group">
 				<view class="title">验证码</view>
@@ -153,17 +153,21 @@
 			</view>
 			<view class="cu-form-group">
 				<view class="grid col-4 grid-square flex-sub">
-					<view class="padding-xs bg-img" :style="'background-image:url(' + imgList[index] +')'" v-for="(item,index) in imgList"
+					<view class="padding-xs bg-img" :style="[{backgroundImage:'url(' + imgList[index] +')'}]" v-for="(item,index) in imgList"
 					 :key="index" @tap="ViewImage" :data-url="imgList[index]">
 						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
-							<text class='icon-close'></text>
+							<text class='cuIcon-close'></text>
 						</view>
 					</view>
 					<view class="padding-xs solids" @tap="ChooseImage" v-if="imgList.length<4">
-						<text class='icon-cameraadd'></text>
+						<text class='cuIcon-cameraadd'></text>
 					</view>
 				</view>
 			</view>
+			<view class="cu-form-group margin-top">
+				<view class="title">头像</view>
+				<view class="cu-avatar radius lg bg-gray"></view>
+			</view>
 			<!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 -->
 			<view class="cu-form-group margin-top">
 				<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaAInput" placeholder="多行文本输入框"></textarea>
diff --git a/Colorui-UniApp/pages/component/home.vue b/Colorui-UniApp/pages/component/home.vue
index 13f3eab..e2e5e55 100644
--- a/Colorui-UniApp/pages/component/home.vue
+++ b/Colorui-UniApp/pages/component/home.vue
@@ -7,7 +7,7 @@
 				 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
 					<view class="nav-title">{{item.title}}</view>
 					<view class="nav-name">{{item.name}}</view>
-					<text :class="'icon-' + item.icon"></text>
+					<text :class="'cuIcon-' + item.icon"></text>
 				</navigator>
 			</view>
 			<view class="cu-tabbar-height"></view>
diff --git a/Colorui-UniApp/pages/component/list.vue b/Colorui-UniApp/pages/component/list.vue
index a9d9012..a8635cc 100644
--- a/Colorui-UniApp/pages/component/list.vue
+++ b/Colorui-UniApp/pages/component/list.vue
@@ -7,7 +7,7 @@
 			</cu-custom>
 			<view class="cu-bar bg-white solid-bottom margin-top">
 				<view class="action">
-					<text class="icon-title text-orange "></text> 宫格列表
+					<text class="cuIcon-title text-orange "></text> 宫格列表
 				</view>
 				<view class="action">
 					<button class="cu-btn bg-green shadow" @tap="showModal" data-target="gridModal">设置</button>
@@ -39,7 +39,7 @@
 			</view>
 			<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
 				<view class="cu-item" v-for="(item,index) in iconList" :key="index" v-if="index<gridCol*2">
-					<view :class="['icon-' + item.icon,'text-' + item.color]">
+					<view :class="['cuIcon-' + item.icon,'text-' + item.color]">
 						<view class="cu-tag badge" v-if="item.badge!=0">
 							<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
 						</view>
@@ -51,7 +51,7 @@
 
 			<view class="cu-bar bg-white solid-bottom margin-top">
 				<view class="action">
-					<text class="icon-title text-orange"></text> 菜单列表
+					<text class="cuIcon-title text-orange"></text> 菜单列表
 				</view>
 				<view class="action">
 					<button class="cu-btn bg-green shadow" @tap="showModal" data-target="menuModal">设置</button>
@@ -90,7 +90,7 @@
 			<view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
 				<view class="cu-item" :class="menuArrow?'arrow':''">
 					<view class="content">
-						<text class="icon-circlefill text-grey"></text>
+						<text class="cuIcon-circlefill text-grey"></text>
 						<text class="text-grey">图标 + 标题</text>
 					</view>
 				</view>
@@ -102,19 +102,19 @@
 				</view>
 				<view class="cu-item" :class="menuArrow?'arrow':''">
 					<button class="cu-btn content" open-type="contact">
-						<text class="icon-btn text-olive"></text>
+						<text class="cuIcon-btn text-olive"></text>
 						<text class="text-grey">Open-type 按钮</text>
 					</button>
 				</view>
 				<view class="cu-item" :class="menuArrow?'arrow':''">
 					<navigator class="content" hover-class="none" url="../list/list" open-type="redirect">
-						<text class="icon-discoverfill text-orange"></text>
+						<text class="cuIcon-discoverfill text-orange"></text>
 						<text class="text-grey">Navigator 跳转</text>
 					</navigator>
 				</view>
 				<view class="cu-item" :class="menuArrow?'arrow':''">
 					<view class="content">
-						<text class="icon-emojiflashfill text-pink"></text>
+						<text class="cuIcon-emojiflashfill text-pink"></text>
 						<text class="text-grey">头像组</text>
 					</view>
 					<view class="action">
@@ -129,17 +129,17 @@
 				</view>
 				<view class="cu-item" :class="menuArrow?'arrow':''">
 					<view class="content">
-						<text class="icon-btn text-green"></text>
+						<text class="cuIcon-btn text-green"></text>
 						<text class="text-grey">按钮</text>
 					</view>
 					<view class="action">
 						<button class="cu-btn round bg-green shadow">
-							<text class="icon-upload"></text> 上传</button>
+							<text class="cuIcon-upload"></text> 上传</button>
 					</view>
 				</view>
 				<view class="cu-item" :class="menuArrow?'arrow':''">
 					<view class="content">
-						<text class="icon-tagfill text-red  margin-right-xs"></text>
+						<text class="cuIcon-tagfill text-red  margin-right-xs"></text>
 						<text class="text-grey">标签</text>
 					</view>
 					<view class="action">
@@ -150,7 +150,7 @@
 				</view>
 				<view class="cu-item" :class="menuArrow?'arrow':''">
 					<view class="content">
-						<text class="icon-warn text-green"></text>
+						<text class="cuIcon-warn text-green"></text>
 						<text class="text-grey">文本</text>
 					</view>
 					<view class="action">
@@ -160,9 +160,9 @@
 				<view class="cu-item">
 					<view class="content padding-tb-sm">
 						<view>
-							<text class="icon-clothesfill text-blue margin-right-xs"></text> 多行Item</view>
+							<text class="cuIcon-clothesfill text-blue margin-right-xs"></text> 多行Item</view>
 						<view class="text-gray text-sm">
-							<text class="icon-infofill margin-right-xs"></text> 小目标还没有实现！</view>
+							<text class="cuIcon-infofill margin-right-xs"></text> 小目标还没有实现！</view>
 					</view>
 					<view class="action">
 						<switch class="switch-sex" @change="SwitchSex" :class="skin?'checked':''" :checked="skin?true:false"></switch>
@@ -172,7 +172,7 @@
 
 			<view class="cu-bar bg-white solid-bottom margin-top">
 				<view class="action">
-					<text class="icon-title text-orange "></text> 消息列表
+					<text class="cuIcon-title text-orange "></text> 消息列表
 				</view>
 			</view>
 			<view class="cu-list menu-avatar">
@@ -182,7 +182,7 @@
 						<view class="text-grey">凯尔</view>
 						<view class="text-gray text-sm flex">
 							<text class="text-cut">
-								<text class="icon-infofill text-red  margin-right-xs"></text>
+								<text class="cuIcon-infofill text-red  margin-right-xs"></text>
 								我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
 							</text> </view>
 					</view>
@@ -208,7 +208,7 @@
 					</view>
 					<view class="action">
 						<view class="text-grey text-xs">22:20</view>
-						<view class="icon-notice_forbid_fill text-gray"></view>
+						<view class="cuIcon-notice_forbid_fill text-gray"></view>
 					</view>
 				</view>
 				<view class="cu-item ">
@@ -245,17 +245,17 @@
 							<view class="cu-tag round bg-orange sm">6人</view>
 						</view>
 						<view class="text-gray text-sm flex">
-							<text class="text-cut"> 伊泽瑞尔：<text class="icon-locationfill text-orange margin-right-xs"></text> 传送中...</text></view>
+							<text class="text-cut"> 伊泽瑞尔：<text class="cuIcon-locationfill text-orange margin-right-xs"></text> 传送中...</text></view>
 					</view>
 					<view class="action">
 						<view class="text-grey text-xs">22:20</view>
-						<view class="icon-notice_forbid_fill text-gray"></view>
+						<view class="cuIcon-notice_forbid_fill text-gray"></view>
 					</view>
 				</view>
 			</view>
 			<view class="cu-bar bg-white solid-bottom margin-top">
 				<view class="action">
-					<text class="icon-title text-orange "></text> 列表左滑
+					<text class="cuIcon-title text-orange "></text> 列表左滑
 				</view>
 			</view>
 			<view class="cu-list menu-avatar">
@@ -265,7 +265,7 @@
 					<view class="content">
 						<view class="text-grey">文晓港</view>
 						<view class="text-gray text-sm">
-							<text class="icon-infofill text-red  margin-right-xs"></text> 消息未送达</view>
+							<text class="cuIcon-infofill text-red  margin-right-xs"></text> 消息未送达</view>
 					</view>
 					<view class="action">
 						<view class="text-grey text-xs">22:20</view>
diff --git a/Colorui-UniApp/pages/component/modal.vue b/Colorui-UniApp/pages/component/modal.vue
index db292f8..6752ca9 100644
--- a/Colorui-UniApp/pages/component/modal.vue
+++ b/Colorui-UniApp/pages/component/modal.vue
@@ -6,7 +6,7 @@
 		</cu-custom>
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-orange "></text> 普通窗口
+				<text class="cuIcon-title text-orange "></text> 普通窗口
 			</view>
 			<view class="action">
 				<button class="cu-btn bg-green shadow" @tap="showModal" data-target="Modal">Modal</button>
@@ -17,7 +17,7 @@
 				<view class="cu-bar bg-white justify-end">
 					<view class="content">Modal标题</view>
 					<view class="action" @tap="hideModal">
-						<text class="icon-close text-red"></text>
+						<text class="cuIcon-close text-red"></text>
 					</view>
 				</view>
 				<view class="padding-xl">
@@ -28,7 +28,7 @@
 
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-orange "></text> 底部窗口
+				<text class="cuIcon-title text-orange "></text> 底部窗口
 			</view>
 			<view class="action">
 				<button class="cu-btn bg-green shadow" @tap="showModal" data-target="bottomModal">Bottom</button>
@@ -48,7 +48,7 @@
 
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-orange "></text> 对话窗口
+				<text class="cuIcon-title text-orange "></text> 对话窗口
 			</view>
 			<view class="action">
 				<button class="cu-btn bg-green shadow" @tap="showModal" data-target="DialogModal1">Dialog</button>
@@ -60,7 +60,7 @@
 				<view class="cu-bar bg-white justify-end">
 					<view class="content">Modal标题</view>
 					<view class="action" @tap="hideModal">
-						<text class="icon-close text-red"></text>
+						<text class="cuIcon-close text-red"></text>
 					</view>
 				</view>
 				<view class="padding-xl">
@@ -81,7 +81,7 @@
 				<view class="cu-bar bg-white justify-end">
 					<view class="content">Modal标题</view>
 					<view class="action" @tap="hideModal">
-						<text class="icon-close text-red"></text>
+						<text class="cuIcon-close text-red"></text>
 					</view>
 				</view>
 				<view class="padding-xl">
@@ -89,7 +89,7 @@
 				</view>
 				<view class="cu-bar bg-white">
 					<view class="action margin-0 flex-sub text-green " @tap="hideModal">
-						<text class="icon-moneybag"></text>微信支付</view>
+						<text class="cuIcon-moneybag"></text>微信支付</view>
 					<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">取消</view>
 					<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">确定</view>
 				</view>
@@ -98,7 +98,7 @@
 
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-orange "></text> 图片窗口
+				<text class="cuIcon-title text-orange "></text> 图片窗口
 			</view>
 			<view class="action">
 				<button class="cu-btn bg-green shadow" @tap="showModal" data-target="Image">Image</button>
@@ -110,7 +110,7 @@
 				<view class="bg-img" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg');height:200px;">
 					<view class="cu-bar justify-end text-white">
 						<view class="action" @tap="hideModal">
-							<text class="icon-close "></text>
+							<text class="cuIcon-close "></text>
 						</view>
 					</view>
 				</view>
@@ -123,7 +123,7 @@
 
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-orange "></text> 单选窗口
+				<text class="cuIcon-title text-orange "></text> 单选窗口
 			</view>
 			<view class="action">
 				<button class="cu-btn bg-green shadow" @tap="showModal" data-target="RadioModal">Radio</button>
@@ -148,7 +148,7 @@
 
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-orange "></text> 多选窗口
+				<text class="cuIcon-title text-orange "></text> 多选窗口
 			</view>
 			<view class="action">
 				<button class="cu-btn bg-green shadow" @tap="showModal" data-target="ChooseModal">Choose</button>
@@ -173,7 +173,7 @@
 
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-orange "></text> 侧边抽屉
+				<text class="cuIcon-title text-orange "></text> 侧边抽屉
 			</view>
 			<view class="action">
 				<button class="cu-btn bg-green shadow" @tap="showModal" data-target="DrawerModalL">Left</button>
diff --git a/Colorui-UniApp/pages/component/nav.vue b/Colorui-UniApp/pages/component/nav.vue
index d092691..a4ad890 100644
--- a/Colorui-UniApp/pages/component/nav.vue
+++ b/Colorui-UniApp/pages/component/nav.vue
@@ -6,7 +6,7 @@
 		</view>
 		<view class="cu-bar bg-white solid-bottom">
 			<view class="action">
-				<text class="icon-title text-orange"></text> 默认
+				<text class="cuIcon-title text-orange"></text> 默认
 			</view>
 		</view>
 		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
@@ -17,7 +17,7 @@
 
 		<view class="cu-bar bg-white margin-top solid-bottom">
 			<view class="action">
-				<text class="icon-title text-orange"></text> 居中
+				<text class="cuIcon-title text-orange"></text> 居中
 			</view>
 		</view>
 		<scroll-view scroll-x class="bg-white nav text-center">
@@ -28,7 +28,7 @@
 
 		<view class="cu-bar bg-white margin-top solid-bottom">
 			<view class="action">
-				<text class="icon-title text-orange"></text> 平分
+				<text class="cuIcon-title text-orange"></text> 平分
 			</view>
 		</view>
 		<scroll-view scroll-x class="bg-white nav">
@@ -40,7 +40,7 @@
 		</scroll-view>
 		<view class="cu-bar bg-white margin-top solid-bottom">
 			<view class="action">
-				<text class="icon-title text-orange"></text> 背景
+				<text class="cuIcon-title text-orange"></text> 背景
 			</view>
 		</view>
 		<scroll-view scroll-x class="bg-red nav text-center">
@@ -50,18 +50,18 @@
 		</scroll-view>
 		<view class="cu-bar bg-white margin-top solid-bottom">
 			<view class="action">
-				<text class="icon-title text-orange"></text> 图标
+				<text class="cuIcon-title text-orange"></text> 图标
 			</view>
 		</view>
 		<scroll-view scroll-x class="bg-green nav text-center">
 			<view class="cu-item" :class="0==TabCur?'text-white cur':''" @tap="tabSelect" data-id="0">
-				<text class="icon-camerafill"></text> 数码
+				<text class="cuIcon-camerafill"></text> 数码
 			</view>
 			<view class="cu-item" :class="1==TabCur?'text-white cur':''" @tap="tabSelect" data-id="1">
-				<text class="icon-upstagefill"></text> 排行榜
+				<text class="cuIcon-upstagefill"></text> 排行榜
 			</view>
 			<view class="cu-item" :class="2==TabCur?'text-white cur':''" @tap="tabSelect" data-id="2">
-				<text class="icon-clothesfill"></text> 皮肤
+				<text class="cuIcon-clothesfill"></text> 皮肤
 			</view>
 		</scroll-view>
 
diff --git a/Colorui-UniApp/pages/component/steps.vue b/Colorui-UniApp/pages/component/steps.vue
index a9cd219..92fa609 100644
--- a/Colorui-UniApp/pages/component/steps.vue
+++ b/Colorui-UniApp/pages/component/steps.vue
@@ -3,7 +3,7 @@
 		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">步骤条</block></cu-custom>
 		<view class="cu-bar bg-white solid-bottom">
 			<view class="action">
-				<text class="icon-title text-orange"></text> 基本用法
+				<text class="cuIcon-title text-orange"></text> 基本用法
 			</view>
 			<view class="action">
 				<button class="cu-btn bg-green shadow" @tap="BasicsSteps">下一步</button>
@@ -12,7 +12,7 @@
 		<view class="bg-white padding">
 			<view class="cu-steps">
 				<view class="cu-item" :class="index>basics?'':'text-red'" v-for="(item,index) in basicsList" :key="index">
-					<text :class="'icon-' + item.icon"></text> {{item.name}}
+					<text :class="'cuIcon-' + item.icon"></text> {{item.name}}
 				</view>
 			</view>
 		</view>
@@ -20,7 +20,7 @@
 		<view class="bg-white padding margin-top-xs">
 			<view class="cu-steps">
 				<view class="cu-item" :class="index>basics?'':'text-orange'" v-for="(item,index) in basicsList" :key="index">
-					<text :class="index>basics?'icon-title':'icon-' + item.icon"></text> {{item.name}}
+					<text :class="index>basics?'cuIcon-title':'cuIcon-' + item.icon"></text> {{item.name}}
 				</view>
 			</view>
 		</view>
@@ -28,13 +28,13 @@
 		<view class="bg-white padding  margin-top-xs">
 			<view class="cu-steps steps-arrow">
 				<view class="cu-item" :class="index>basics?'':'text-blue'" v-for="(item,index) in basicsList" :key="index">
-					<text :class="'icon-' + item.icon"></text> {{item.name}}
+					<text :class="'cuIcon-' + item.icon"></text> {{item.name}}
 				</view>
 			</view>
 		</view>
 		<view class="cu-bar bg-white solid-bottom margin-top">
 			<view class="action">
-				<text class="icon-title text-orange"></text> 数字完成
+				<text class="cuIcon-title text-orange"></text> 数字完成
 			</view>
 			<view class="action">
 				<button class="cu-btn bg-green shadow" @tap="NumSteps">下一步</button>
@@ -49,7 +49,7 @@
 		</view>
 		<view class="cu-bar bg-white solid-bottom margin-top">
 			<view class="action">
-				<text class="icon-title text-orange"></text> 多级显示
+				<text class="cuIcon-title text-orange"></text> 多级显示
 			</view>
 			<view class="action">
 				<button class="cu-btn bg-green shadow" @tap="ScrollSteps">下一步</button>
diff --git a/Colorui-UniApp/pages/component/swiper.vue b/Colorui-UniApp/pages/component/swiper.vue
index 9ce06d2..ff60706 100644
--- a/Colorui-UniApp/pages/component/swiper.vue
+++ b/Colorui-UniApp/pages/component/swiper.vue
@@ -5,7 +5,7 @@
 		</cu-custom>
 		<view class="cu-bar bg-white">
 			<view class="action">
-				<text class="icon-title text-pink"></text> 全屏限高轮播
+				<text class="cuIcon-title text-pink"></text> 全屏限高轮播
 			</view>
 			<view class="action">
 				<switch @change="DotStyle" :class="dotStyle?'checked':''" :checked="dotStyle?true:false"></switch>
@@ -21,7 +21,7 @@
 		<!-- #ifndef MP-ALIPAY -->
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-pink"></text> 卡片式轮播
+				<text class="cuIcon-title text-pink"></text> 卡片式轮播
 			</view>
 		</view>
 		<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
@@ -36,7 +36,7 @@
 		</swiper>
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-pink"></text> 堆叠式轮播 
+				<text class="cuIcon-title text-pink"></text> 堆叠式轮播 
 			</view>
 		</view>
 		<view class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
diff --git a/Colorui-UniApp/pages/component/timeline.vue b/Colorui-UniApp/pages/component/timeline.vue
index e1fcd54..a690ed6 100644
--- a/Colorui-UniApp/pages/component/timeline.vue
+++ b/Colorui-UniApp/pages/component/timeline.vue
@@ -3,17 +3,17 @@
 		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">时间轴</block></cu-custom>
 		<view class="cu-timeline">
 			<view class="cu-time">昨天</view>
-			<view class="cu-item cur icon-noticefill">
+			<view class="cu-item cur cuIcon-noticefill">
 				<view class="content bg-green shadow-blur">
 					<text>22:22</text> 【广州市】快件已到达地球
 				</view>
 			</view>
-			<view class="cu-item text-red icon-attentionforbidfill">
+			<view class="cu-item text-red cuIcon-attentionforbidfill">
 				<view class="content bg-red shadow-blur">
 					这是第一次，我家的铲屎官走了这么久。久到足足有三天！！
 				</view>
 			</view>
-			<view class="cu-item text-grey icon-evaluate_fill">
+			<view class="cu-item text-grey cuIcon-evaluate_fill">
 				<view class="content bg-grey shadow-blur">
 					这是第一次，我家的铲屎官走了这么久。
 				</view>
@@ -56,7 +56,7 @@
 							<view class="content">
 								<view class="text-grey">文晓港</view>
 								<view class="text-gray text-sm">
-									<text class="icon-infofill text-red"></text> 消息未送达</view>
+									<text class="cuIcon-infofill text-red"></text> 消息未送达</view>
 							</view>
 							<view class="action">
 								<view class="text-grey text-xs">22:20</view>
@@ -72,11 +72,11 @@
 									<view class="cu-tag round orange sm">SVIP</view>
 								</view>
 								<view class="text-gray text-sm">
-									<text class="icon-redpacket_fill text-red"></text> 收到红包</view>
+									<text class="cuIcon-redpacket_fill text-red"></text> 收到红包</view>
 							</view>
 							<view class="action">
 								<view class="text-grey text-xs">22:20</view>
-								<text class="icon-notice_forbid_fill text-gray"></text>
+								<text class="cuIcon-notice_forbid_fill text-gray"></text>
 							</view>
 						</view>
 					</view>
diff --git a/Colorui-UniApp/pages/index/index.vue b/Colorui-UniApp/pages/index/index.vue
index 0fd1d0a..27dfc0b 100644
--- a/Colorui-UniApp/pages/index/index.vue
+++ b/Colorui-UniApp/pages/index/index.vue
@@ -5,19 +5,19 @@
 		<plugin v-if="PageCur=='plugin'"></plugin>
 		<view class="cu-bar tabbar bg-white shadow foot">
 			<view class="action" @click="NavChange" data-cur="basics">
-				<view class='icon-cu-image'>
+				<view class='cuIcon-cu-image'>
 					<image :src="'/static/tabbar/basics' + [PageCur=='basics'?'_cur':''] + '.png'"></image>
 				</view>
 				<view :class="PageCur=='basics'?'text-green':'text-gray'">元素</view>
 			</view>
 			<view class="action" @click="NavChange" data-cur="component">
-				<view class='icon-cu-image'>
+				<view class='cuIcon-cu-image'>
 					<image :src="'/static/tabbar/component' + [PageCur == 'component'?'_cur':''] + '.png'"></image>
 				</view>
 				<view :class="PageCur=='component'?'text-green':'text-gray'">组件</view>
 			</view>
 			<view class="action" @click="NavChange" data-cur="plugin">
-				<view class='icon-cu-image'>
+				<view class='cuIcon-cu-image'>
 					<image :src="'/static/tabbar/plugin' + [PageCur == 'plugin'?'_cur':''] + '.png'"></image>
 				</view>
 				<view :class="PageCur=='plugin'?'text-green':'text-gray'">扩展</view>
diff --git a/Colorui-UniApp/pages/plugin/animation.vue b/Colorui-UniApp/pages/plugin/animation.vue
index 0e0e03c..da59755 100644
--- a/Colorui-UniApp/pages/plugin/animation.vue
+++ b/Colorui-UniApp/pages/plugin/animation.vue
@@ -5,7 +5,7 @@
 		</cu-custom>
 		<view class="cu-bar bg-white">
 			<view class="action">
-				<text class="icon-title text-orange"></text> 默认效果
+				<text class="cuIcon-title text-orange"></text> 默认效果
 			</view>
 		</view>
 		<view class="padding-sm">
@@ -16,7 +16,7 @@
 		</view>
 		<view class="cu-bar bg-white">
 			<view class="action">
-				<text class="icon-title text-orange"></text> 反向动画
+				<text class="cuIcon-title text-orange"></text> 反向动画
 			</view>
 		</view>
 
@@ -28,7 +28,7 @@
 		</view>
 		<view class="cu-bar bg-white">
 			<view class="action">
-				<text class="icon-title text-orange"></text> 延迟执行
+				<text class="cuIcon-title text-orange"></text> 延迟执行
 			</view>
 			<view class="action">
 				<button class="cu-btn bg-cyan shadow" @tap="ToggleDelay">开始执行</button>
@@ -43,7 +43,7 @@
 		</view>
 		<view class="cu-bar bg-white">
 			<view class="action">
-				<text class="icon-title text-orange"></text> Gif动画
+				<text class="cuIcon-title text-orange"></text> Gif动画
 			</view>
 		</view>
 		<view class="margin radius bg-gradual-green shadow-blur">
diff --git a/Colorui-UniApp/pages/plugin/drawer.vue b/Colorui-UniApp/pages/plugin/drawer.vue
index ec71828..a8fd65f 100644
--- a/Colorui-UniApp/pages/plugin/drawer.vue
+++ b/Colorui-UniApp/pages/plugin/drawer.vue
@@ -12,7 +12,7 @@
 			<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
 				<view class="cu-item arrow" v-for="(item,index) in 20" :key="index">
 					<view class="content">
-						<text class="icon-github text-grey"></text>
+						<text class="cuIcon-github text-grey"></text>
 						<text class="text-grey">{{index +1}}</text>
 					</view>
 				</view>
@@ -25,13 +25,13 @@
 			</view>
 		</scroll-view>
 		<view class="DrawerClose" :class="modalName=='viewModal'?'show':''" @tap="hideModal">
-			<text class="icon-pullright"></text>
+			<text class="cuIcon-pullright"></text>
 		</view>
 		<scroll-view scroll-y class="DrawerWindow" :class="modalName=='viewModal'?'show':''">
 			<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
 				<view class="cu-item arrow" v-for="(item,index) in 20" :key="index">
 					<view class="content">
-						<text class="icon-github text-grey"></text>
+						<text class="cuIcon-github text-grey"></text>
 						<text class="text-grey">{{index +1}}</text>
 					</view>
 				</view>
diff --git a/Colorui-UniApp/pages/plugin/indexes.vue b/Colorui-UniApp/pages/plugin/indexes.vue
index 53c9af9..8efc60a 100644
--- a/Colorui-UniApp/pages/plugin/indexes.vue
+++ b/Colorui-UniApp/pages/plugin/indexes.vue
@@ -5,7 +5,7 @@
 		</cu-custom>
 		<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
 			<view class="search-form round">
-				<text class="icon-search"></text>
+				<text class="cuIcon-search"></text>
 				<input type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
 			</view>
 			<view class="action">
diff --git a/Colorui-UniApp/pages/plugin/verticalnav.vue b/Colorui-UniApp/pages/plugin/verticalnav.vue
index 1e0369d..3736542 100644
--- a/Colorui-UniApp/pages/plugin/verticalnav.vue
+++ b/Colorui-UniApp/pages/plugin/verticalnav.vue
@@ -1,11 +1,10 @@
 <template>
 	<view>
-		<view class=" fixed ">
+		<view class="fixed">
 			<cu-custom :isBack="true" bgColor="bg-shadeTop text-white">
 				<block slot="backText">返回</block>
 				<block slot="content">垂直导航</block>
 			</cu-custom>
-
 		</view>
 		<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
 		 duration="500">
@@ -25,7 +24,7 @@
 				<view class="padding-top padding-lr" v-for="(item,index) in list" :key="index" :id="'main-'+index">
 					<view class="cu-bar solid-bottom bg-white">
 						<view class="action">
-							<text class="icon-title text-green"></text> Tab-{{item.name}}</view>
+							<text class="cuIcon-title text-green"></text> Tab-{{item.name}}</view>
 					</view>
 					<view class="cu-list menu-avatar">
 						<view class="cu-item">
@@ -34,7 +33,7 @@
 								<view class="text-grey">凯尔</view>
 								<view class="text-gray text-sm flex">
 									<text class="text-cut">
-										<text class="icon-infofill text-red  margin-right-xs"></text>
+										<text class="cuIcon-infofill text-red  margin-right-xs"></text>
 										我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
 									</text> </view>
 							</view>
@@ -60,7 +59,7 @@
 							</view>
 							<view class="action">
 								<view class="text-grey text-xs">22:20</view>
-								<view class="icon-notice_forbid_fill text-gray"></view>
+								<view class="cuIcon-notice_forbid_fill text-gray"></view>
 							</view>
 						</view>
 						<view class="cu-item ">
@@ -97,11 +96,11 @@
 									<view class="cu-tag round bg-orange sm">6人</view>
 								</view>
 								<view class="text-gray text-sm flex">
-									<text class="text-cut"> 伊泽瑞尔：<text class="icon-locationfill text-orange margin-right-xs"></text> 传送中...</text></view>
+									<text class="text-cut"> 伊泽瑞尔：<text class="cuIcon-locationfill text-orange margin-right-xs"></text> 传送中...</text></view>
 							</view>
 							<view class="action">
 								<view class="text-grey text-xs">22:20</view>
-								<view class="icon-notice_forbid_fill text-gray"></view>
+								<view class="cuIcon-notice_forbid_fill text-gray"></view>
 							</view>
 						</view>
 					</view>