diff --git a/Colorui-UniApp/App.vue b/Colorui-UniApp/App.vue
index bd28461..d82a4b3 100644
--- a/Colorui-UniApp/App.vue
+++ b/Colorui-UniApp/App.vue
@@ -4,7 +4,7 @@
 		onLaunch: function() {
 			uni.getSystemInfo({
 				success: function(e) {
-					// #ifndef MP-WEIXIN
+					// #ifndef MP
 					Vue.prototype.StatusBar = e.statusBarHeight;
 					if (e.platform == 'android') {
 						Vue.prototype.CustomBar = e.statusBarHeight + 50;
@@ -13,7 +13,7 @@
 					};
 					// #endif
 
-					// #ifdef MP-WEIXIN
+					// #ifdef MP
 					Vue.prototype.StatusBar = e.statusBarHeight;
 					let custom = wx.getMenuButtonBoundingClientRect();
 					Vue.prototype.Custom = custom;
@@ -110,8 +110,8 @@
 </script>
 
 <style>
-	@import "icon.css";
-	@import "colorui.css";
+	@import "colorui/main.css";
+	@import "colorui/icon.css";
 
 	.nav-list {
 		display: flex;
diff --git a/Colorui-UniApp/colorui/animation.css b/Colorui-UniApp/colorui/animation.css
new file mode 100644
index 0000000..931bb51
--- /dev/null
+++ b/Colorui-UniApp/colorui/animation.css
@@ -0,0 +1,184 @@
+/* 
+  Animation 微动画  
+  基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
+ */
+
+/* css 滤镜 控制黑白底色gif的 */
+.gif-black{  
+  mix-blend-mode: screen;  
+}
+.gif-white{  
+  mix-blend-mode: multiply; 
+}
+
+
+/* Animation css */
+[class*=animation-] {
+    animation-duration: .5s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: both
+}
+
+.animation-fade {
+    animation-name: fade;
+    animation-duration: .8s;
+    animation-timing-function: linear
+}
+
+.animation-scale-up {
+    animation-name: scale-up
+}
+
+.animation-scale-down {
+    animation-name: scale-down
+}
+
+.animation-slide-top {
+    animation-name: slide-top
+}
+
+.animation-slide-bottom {
+    animation-name: slide-bottom
+}
+
+.animation-slide-left {
+    animation-name: slide-left
+}
+
+.animation-slide-right {
+    animation-name: slide-right
+}
+
+.animation-shake {
+    animation-name: shake
+}
+
+.animation-reverse {
+    animation-direction: reverse
+}
+
+@keyframes fade {
+    0% {
+        opacity: 0
+    }
+
+    100% {
+        opacity: 1
+    }
+}
+
+@keyframes scale-up {
+    0% {
+        opacity: 0;
+        transform: scale(.2)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes scale-down {
+    0% {
+        opacity: 0;
+        transform: scale(1.8)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes slide-top {
+    0% {
+        opacity: 0;
+        transform: translateY(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes slide-bottom {
+    0% {
+        opacity: 0;
+        transform: translateY(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes shake {
+
+    0%,
+    100% {
+        transform: translateX(0)
+    }
+
+    10% {
+        transform: translateX(-9px)
+    }
+
+    20% {
+        transform: translateX(8px)
+    }
+
+    30% {
+        transform: translateX(-7px)
+    }
+
+    40% {
+        transform: translateX(6px)
+    }
+
+    50% {
+        transform: translateX(-5px)
+    }
+
+    60% {
+        transform: translateX(4px)
+    }
+
+    70% {
+        transform: translateX(-3px)
+    }
+
+    80% {
+        transform: translateX(2px)
+    }
+
+    90% {
+        transform: translateX(-1px)
+    }
+}
+
+@keyframes slide-left {
+    0% {
+        opacity: 0;
+        transform: translateX(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}
+
+@keyframes slide-right {
+    0% {
+        opacity: 0;
+        transform: translateX(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}
\ No newline at end of file
diff --git a/Colorui-UniApp/colorui/components/cu-custom.vue b/Colorui-UniApp/colorui/components/cu-custom.vue
new file mode 100644
index 0000000..a760e61
--- /dev/null
+++ b/Colorui-UniApp/colorui/components/cu-custom.vue
@@ -0,0 +1,65 @@
+<template>
+	<view>
+		<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>
+					<slot name="backText"></slot>
+				</view>
+				<view class="content" :style="[{top:StatusBar + 'px'}]">
+					<slot name="content"></slot>
+				</view>
+				<slot name="right"></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				StatusBar: this.StatusBar,
+				CustomBar: this.CustomBar
+			};
+		},
+		name: 'cu-custom',
+		computed: {
+			style() {
+				var StatusBar= this.StatusBar;
+				var CustomBar= this.CustomBar;
+				var bgImage = this.bgImage;
+				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
+				if (this.bgImage) {
+					style = `${style}background-image:url(${bgImage});`;
+				}
+				return style
+			}
+		},
+		props: {
+			bgColor: {
+				type: String,
+				default: ''
+			},
+			isBack: {
+				type: [Boolean, String],
+				default: false
+			},
+			bgImage: {
+				type: String,
+				default: ''
+			},
+		},
+		methods: {
+			BackPage() {
+				uni.navigateBack({
+					delta: 1
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>
diff --git a/Colorui-UniApp/icon.css b/Colorui-UniApp/colorui/icon.css
similarity index 100%
rename from Colorui-UniApp/icon.css
rename to Colorui-UniApp/colorui/icon.css
diff --git a/Colorui-UniApp/colorui.css b/Colorui-UniApp/colorui/main.css
similarity index 94%
rename from Colorui-UniApp/colorui.css
rename to Colorui-UniApp/colorui/main.css
index e34ec75..5be1329 100644
--- a/Colorui-UniApp/colorui.css
+++ b/Colorui-UniApp/colorui/main.css
@@ -11,7 +11,7 @@
         初始化
  ==================== */
 body {
-	background: #f1f1f1;
+	background-color: #f1f1f1;
 	font-size: 28upx;
 	color: 333;
 	font-family: Helvetica Neue, Helvetica, sans-serif;
@@ -72,7 +72,7 @@ image {
 
 image.loading::before {
 	content: "";
-	background: #f5f5f5;
+	background-color: #f5f5f5;
 	display: block;
 	position: absolute;
 	width: 100%;
@@ -248,7 +248,7 @@ radio .uni-radio-input::before {
 radio.radio[checked]::after,
 radio.radio .uni-radio-input-checked::after {
 	content: "";
-	background: transparent;
+	background-color: transparent;
 	display: block;
 	position: absolute;
 	width: 8px;
@@ -260,11 +260,11 @@ radio.radio .uni-radio-input-checked::after {
 	bottom: 0;
 	margin: auto;
 	border-radius: 200upx;
-	/* #ifdef H5 */
+	/* #ifndef MP */
 	border: 7px solid #fff !important;
 	/* #endif */
 
-	/* #ifdef MP-WEIXIN */
+	/* #ifdef MP */
 	border: 8px solid #fff !important;
 	/* #endif */
 }
@@ -883,6 +883,7 @@ button.icon.lg {
 	padding: 0upx 16upx;
 	height: 48upx;
 	font-family: Helvetica Neue, Helvetica, sans-serif;
+	white-space: nowrap;
 }
 
 .cu-tag:not([class*="bg"]):not([class*="line"]) {
@@ -984,7 +985,7 @@ button.icon.lg {
 }
 
 .cu-tag.badge:not([class*="bg-"]) {
-	background: #dd514c;
+	background-color: #dd514c;
 }
 
 .cu-tag:empty:not([class*="icon"]) {
@@ -1014,7 +1015,7 @@ button.icon.lg {
 	text-align: center;
 	justify-content: center;
 	align-items: center;
-	background: #ccc;
+	background-color: #ccc;
 	color: #fff;
 	white-space: nowrap;
 	position: relative;
@@ -1197,7 +1198,7 @@ button.icon.lg {
 	margin: auto;
 	width: 260upx;
 	height: 260upx;
-	background: #fff;
+	background-color: #fff;
 	border-radius: 10upx;
 	box-shadow: 0 0 0upx 2000upx rgba(0, 0, 0, 0.5);
 	display: flex;
@@ -1221,7 +1222,7 @@ button.icon.lg {
 .cu-load.load-modal::after {
 	content: "";
 	position: absolute;
-	background: #fff;
+	background-color: #fff;
 	border-radius: 50%;
 	width: 200upx;
 	height: 200upx;
@@ -1309,282 +1310,292 @@ button.icon.lg {
 	filter: grayscale(1);
 }
 
-.cu-list.menu {
-	display: block;
-	overflow: hidden;
+.cu-list+.cu-list {
+	margin-top: 30upx
 }
 
-.cu-list+.cu-list {
-	margin-top: 30upx;
+.cu-list>.cu-item {
+	transition: all .6s ease-in-out 0s;
+	transform: translateX(0upx)
+}
+
+.cu-list>.cu-item.move-cur {
+	transform: translateX(-260upx)
+}
+
+.cu-list>.cu-item .move {
+	position: absolute;
+	right: 0;
+	display: flex;
+	width: 260upx;
+	height: 100%;
+	transform: translateX(100%)
+}
+
+.cu-list>.cu-item .move view {
+	display: flex;
+	flex: 1;
+	justify-content: center;
+	align-items: center
+}
+
+.cu-list.menu-avatar>.cu-item {
+	position: relative;
+	display: flex;
+	padding-right: 30upx;
+	height: 140upx;
+	background-color: #fff;
+	justify-content: flex-end;
+	align-items: center
+}
+
+.cu-list.menu-avatar>.cu-item>.cu-avatar {
+	position: absolute;
+	left: 30upx
+}
+
+.cu-list.menu-avatar>.cu-item .flex .text-cut {
+	max-width: 510upx
+}
+
+.cu-list.menu-avatar>.cu-item .content {
+	position: absolute;
+	left: 146upx;
+	width: calc(100% - 96upx - 60upx - 120upx - 20upx);
+	line-height: 1.6em;
+}
+
+.cu-list.menu-avatar>.cu-item .content>view:first-child {
+	font-size: 30upx;
+	display: flex;
+	align-items: center
+}
+
+.cu-list.menu-avatar>.cu-item .content .cu-tag.sm {
+	display: inline-block;
+	margin-left: 10upx;
+	height: 28upx;
+	font-size: 16upx;
+	line-height: 32upx
+}
+
+.cu-list.menu-avatar>.cu-item .action {
+	width: 100upx;
+	text-align: center
+}
+
+.cu-list.menu-avatar>.cu-item .action view+view {
+	margin-top: 10upx
+}
+
+.cu-list.menu-avatar.comment>.cu-item {
+	padding-top: 30upx;
+	padding-bottom: 30upx;
+	padding-left: 120upx;
+	height: auto
+}
+
+.cu-list.menu-avatar.comment .cu-avatar {
+	align-self: flex-start
 }
 
 .cu-list.menu>.cu-item {
 	position: relative;
 	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	min-height: 100upx;
-	background: #fff;
 	padding: 0 30upx;
+	min-height: 100upx;
+	background-color: #fff;
+	justify-content: space-between;
+	align-items: center
 }
 
-.cu-list.menu>.cu-item::after {
-	content: " ";
-	width: 200%;
-	height: 200%;
+.cu-list.menu>.cu-item:last-child:after {
+	border: none
+}
+
+.cu-list.menu>.cu-item:after {
 	position: absolute;
 	top: 0;
 	left: 0;
-	border-radius: inherit;
-	transform: scale(0.5);
-	transform-origin: 0 0;
-	pointer-events: none;
 	box-sizing: border-box;
+	width: 200%;
+	height: 200%;
 	border-bottom: 1upx solid #ddd;
+	border-radius: inherit;
+	content: " ";
+	transform: scale(.5);
+	transform-origin: 0 0;
+	pointer-events: none
 }
 
-.cu-list.menu.sm-border>.cu-item::after {
-	width: calc(200% - 120upx);
-	left: 30upx;
-}
-
-.cu-list.menu>.cu-item:last-child::after {
-	border: none;
+.cu-list.menu>.cu-item.grayscale {
+	background-color: #f5f5f5
 }
 
 .cu-list.menu>.cu-item.cur {
-	background-color: #fcf7e9;
+	background-color: #fcf7e9
 }
 
-.cu-list.menu-avatar>.cu-item {
-	padding-left: 140upx;
+.cu-list.menu>.cu-item.arrow {
+	padding-right: 90upx
 }
 
-.cu-list.menu-avatar>.cu-item .cu-avatar {
-	left: 30upx;
-}
-
-.cu-list.menu>.cu-item .content {
-	line-height: 1.6em;
-	flex: 1;
-	font-size: 30upx;
-}
-
-.cu-list.menu>.cu-item .content>view:first-child {
-	display: flex;
-	align-items: center;
+.cu-list.menu>.cu-item.arrow:before {
+	position: absolute;
+	top: 0;
+	right: 30upx;
+	bottom: 0;
+	display: block;
+	margin: auto;
+	width: 30upx;
+	height: 30upx;
+	color: var(--grey);
+	content: "\e6a3";
+	text-align: center;
+	font-size: 34upx;
+	font-family: cuIcon;
+	line-height: 30upx
 }
 
 .cu-list.menu>.cu-item button.content {
 	padding: 0;
-	justify-content: flex-start;
 	background-color: transparent;
+	justify-content: flex-start
 }
 
-.cu-list.menu>.cu-item button.content::after {
-	display: none;
-}
-
-.cu-list.menu>.cu-item .content>text[class*="icon"] {
-	margin-right: 10upx;
-	display: inline-block;
-	width: 1.6em;
-	text-align: center;
-}
-
-.cu-list.menu>.cu-item .content>image {
-	margin-right: 10upx;
-	display: inline-block;
-	width: 1.6em;
-	height: 1.6em;
-	vertical-align: middle;
-}
-
-.cu-list.menu-avatar>.cu-item .action {
-	text-align: center;
-}
-
-.cu-list.menu-avatar>.cu-item .action view+view {
-	margin-top: 10upx;
-}
-
-.cu-list.menu>.cu-item.grayscale {
-	background-color: #f5f5f5;
-}
-
-.cu-list.menu>.cu-item .action .cu-tag:empty {
-	right: 10upx;
-}
-
-.cu-list.menu>.cu-item.arrow {
-	padding-right: 90upx;
-}
-
-.cu-list.menu>.cu-item.arrow::before {
-	font-family: "cuIcon";
-	display: block;
-	content: "\e6a3";
-	position: absolute;
-	font-size: 34upx;
-	color: var(--grey);
-	line-height: 30upx;
-	height: 30upx;
-	width: 30upx;
-	text-align: center;
-	top: 0upx;
-	bottom: 0;
-	right: 30upx;
-	margin: auto;
+.cu-list.menu>.cu-item button.content:after {
+	display: none
 }
 
 .cu-list.menu>.cu-item .cu-avatar-group .cu-avatar {
-	border-color: #fff;
+	border-color: #fff
 }
 
-.cu-list.card-menu {
-	margin-left: 30upx;
-	margin-right: 30upx;
-	border-radius: 20upx;
-	overflow: hidden;
+.cu-list.menu>.cu-item .content>view:first-child {
+	display: flex;
+	align-items: center
 }
 
-.cu-list.menu-avatar>.cu-item {
-	padding-left: 140upx;
-	height: 140upx;
+.cu-list.menu>.cu-item .content>text[class*=icon] {
+	display: inline-block;
+	margin-right: 10upx;
+	width: 1.6em;
+	text-align: center
 }
 
-.cu-list.menu-avatar>.cu-item>.cu-avatar {
-	position: absolute;
-	left: 30upx;
+.cu-list.menu>.cu-item .content>image {
+	display: inline-block;
+	margin-right: 10upx;
+	width: 1.6em;
+	height: 1.6em;
+	vertical-align: middle
 }
 
-.cu-list.menu-avatar>.cu-item .content view:first-child .text-cut {
-	max-width: calc(750upx - 320upx);
-}
-
-.cu-list.menu-avatar>.cu-item .flex .text-cut {
-	max-width: calc(750upx - 240upx);
-}
-
-.cu-list.menu-avatar.comment>.cu-item {
-	height: auto;
-	padding-top: 30upx;
-	padding-bottom: 30upx;
-	padding-left: 120upx;
-}
-
-.cu-list.menu-avatar.comment .cu-avatar {
-	align-self: flex-start;
+.cu-list.menu>.cu-item .content {
+	font-size: 30upx;
+	line-height: 1.6em;
+	flex: 1
 }
 
 .cu-list.menu>.cu-item .content .cu-tag.sm {
-	font-size: 16upx;
-	line-height: 32upx;
+	display: inline-block;
 	margin-left: 10upx;
 	height: 28upx;
-	display: inline-block;
+	font-size: 16upx;
+	line-height: 32upx
 }
 
-.cu-list.grid {
-	text-align: center;
-	background: #fff;
+.cu-list.menu>.cu-item .action .cu-tag:empty {
+	right: 10upx
+}
+
+.cu-list.menu {
+	display: block;
+	overflow: hidden
+}
+
+.cu-list.menu.sm-border>.cu-item:after {
+	left: 30upx;
+	width: calc(200% - 120upx)
 }
 
 .cu-list.grid>.cu-item {
-	display: flex;
-	flex-direction: column;
-	padding: 20upx 0 30upx;
 	position: relative;
+	display: flex;
+	padding: 20upx 0 30upx;
 	transition-duration: 0s;
+	flex-direction: column
 }
 
-.cu-list.grid>.cu-item [class*="icon"] {
-	display: block;
-	width: 100%;
-	position: relative;
-	font-size: 48upx;
-	margin-top: 20upx;
+.cu-list.grid>.cu-item:after {
+	position: absolute;
+	top: 0;
+	left: 0;
+	box-sizing: border-box;
+	width: 200%;
+	height: 200%;
+	border-right: 1px solid rgba(0, 0, 0, .1);
+	border-bottom: 1px solid rgba(0, 0, 0, .1);
+	border-radius: inherit;
+	content: " ";
+	transform: scale(.5);
+	transform-origin: 0 0;
+	pointer-events: none
 }
 
 .cu-list.grid>.cu-item text {
 	display: block;
-	color: #888;
 	margin-top: 10upx;
-	line-height: 40upx;
+	color: #888;
 	font-size: 26upx;
+	line-height: 40upx
+}
+
+.cu-list.grid>.cu-item [class*=icon] {
+	position: relative;
+	display: block;
+	margin-top: 20upx;
+	width: 100%;
+	font-size: 48upx
 }
 
 .cu-list.grid>.cu-item .cu-tag {
-	left: 50%;
 	right: auto;
-	margin-left: 20upx;
+	left: 50%;
+	margin-left: 20upx
 }
 
-.cu-list.grid>.cu-item::after {
-	content: " ";
-	width: 200%;
-	height: 200%;
-	position: absolute;
-	top: 0;
-	left: 0;
-	border-radius: inherit;
-	transform: scale(0.5);
-	transform-origin: 0 0;
-	pointer-events: none;
-	box-sizing: border-box;
-	border-right: 1px solid rgba(0, 0, 0, 0.1);
-	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.cu-list.grid.col-3>.cu-item:nth-child(3n)::after {
-	border-right-width: 0px;
-}
-
-.cu-list.grid.col-4>.cu-item:nth-child(4n)::after {
-	border-right-width: 0px;
-}
-
-.cu-list.grid.col-5>.cu-item:nth-child(5n)::after {
-	border-right-width: 0px;
-}
-
-.cu-list.grid.no-border {
-	padding: 20upx 10upx;
+.cu-list.grid {
+	background-color: #fff;
+	text-align: center
 }
 
 .cu-list.grid.no-border>.cu-item {
 	padding-top: 10upx;
-	padding-bottom: 20upx;
+	padding-bottom: 20upx
 }
 
-.cu-list.grid.no-border>.cu-item::after {
-	border: none;
+.cu-list.grid.no-border>.cu-item:after {
+	border: none
 }
 
-.cu-list>.cu-item {
-	transform: translateX(0upx);
-	transition: all 0.6s ease-in-out 0s;
+.cu-list.grid.no-border {
+	padding: 20upx 10upx
 }
 
-.cu-list>.cu-item .move {
-	display: flex;
-	width: 260upx;
-	height: 100%;
-	position: absolute;
-	right: 0;
-	transform: translateX(100%);
+.cu-list.grid.col-3>.cu-item:nth-child(3n):after,
+.cu-list.grid.col-4>.cu-item:nth-child(4n):after,
+.cu-list.grid.col-5>.cu-item:nth-child(5n):after {
+	border-right-width: 0
 }
 
-.cu-list>.cu-item.move-cur {
-	transform: translateX(-260upx);
+.cu-list.card-menu {
+	overflow: hidden;
+	margin-right: 30upx;
+	margin-left: 30upx;
+	border-radius: 20upx
 }
 
-.cu-list>.cu-item .move view {
-	flex: 1;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
 
 /* ==================
           操作条
@@ -1734,7 +1745,7 @@ button.icon.lg {
 }
 
 .cu-bar .search-form {
-	background: #f5f5f5;
+	background-color: #f5f5f5;
 	line-height: 64upx;
 	height: 64upx;
 	font-size: 24upx;
@@ -1975,7 +1986,7 @@ button.icon.lg {
 
 .cu-custom .cu-bar {
 	min-height: 0px;
-	/* #ifndef H5 */
+	/* #ifdef MP */
 	padding-right: 220upx;
 	/* #endif */
 	box-shadow: 0upx 0upx 0upx;
@@ -2060,7 +2071,7 @@ button.icon.lg {
 
 .cu-timeline {
 	display: block;
-	background: #fff;
+	background-color: #fff;
 }
 
 .cu-timeline .cu-time {
@@ -2088,7 +2099,7 @@ button.icon.lg {
 	display: block;
 	position: absolute;
 	width: 1upx;
-	background: #ddd;
+	background-color: #ddd;
 	left: 60upx;
 	height: 100%;
 	top: 0;
@@ -2101,7 +2112,7 @@ button.icon.lg {
 	position: absolute;
 	top: 36upx;
 	z-index: 9;
-	background: #fff;
+	background-color: #fff;
 	width: 50upx;
 	height: 50upx;
 	text-align: center;
@@ -2115,7 +2126,7 @@ button.icon.lg {
 }
 
 .cu-timeline>.cu-item[class*="icon"]::before {
-	background: #fff;
+	background-color: #fff;
 	width: 50upx;
 	height: 50upx;
 	text-align: center;
@@ -2132,7 +2143,7 @@ button.icon.lg {
 }
 
 .cu-timeline>.cu-item>.content:not([class*="bg-"]) {
-	background: #f1f1f1;
+	background-color: #f1f1f1;
 	color: #666;
 }
 
@@ -2185,7 +2196,7 @@ button.icon.lg {
 }
 
 .cu-chat .cu-item>.main .content:not([class*="bg-"]) {
-	background: #fff;
+	background-color: #fff;
 	color: #666;
 }
 
@@ -2279,7 +2290,7 @@ button.icon.lg {
 
 .cu-card>.cu-item {
 	display: block;
-	background: #fff;
+	background-color: #fff;
 	overflow: hidden;
 	border-radius: 10upx;
 	margin: 30upx;
@@ -2358,7 +2369,7 @@ button.icon.lg {
 
 /* card.dynamic>.cu-item .comment {
   padding: 20upx;
-  background: #f1f1f1;
+  background-color: #f1f1f1;
   margin: 0 30upx 30upx;
   border-radius: 6upx;
 } */
@@ -2410,7 +2421,7 @@ button.icon.lg {
  ==================== */
 
 .cu-form-group {
-	background: #fff;
+	background-color: #fff;
 	padding: 1upx 30upx;
 	display: flex;
 	align-items: center;
@@ -2569,7 +2580,7 @@ button.icon.lg {
 	margin-right: auto;
 	width: 680upx;
 	max-width: 100%;
-	background: #f8f8f8;
+	background-color: #f8f8f8;
 	border-radius: 10upx;
 	overflow: hidden;
 }
@@ -2622,7 +2633,7 @@ button.icon.lg {
 
 swiper.square-dot .wx-swiper-dot,
 swiper.square-dot .uni-swiper-dot {
-	background: #fff;
+	background-color: #fff;
 	opacity: 0.4;
 	width: 10upx;
 	height: 10upx;
@@ -2656,7 +2667,7 @@ swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active::after {
 	right: 0;
 	bottom: 0;
 	margin: auto;
-	background: #fff;
+	background-color: #fff;
 	border-radius: 20upx;
 }
 
@@ -2725,7 +2736,7 @@ swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active {
 	bottom: 0;
 	left: 50%;
 	margin: auto;
-	transition: all 0.3s ease-in 0s;
+	transition: all 0.2s ease-in 0s;
 	opacity: 1;
 }
 
@@ -3584,101 +3595,101 @@ scroll-view.cu-steps .cu-item {
 
 .bg-red.light {
 	color: var(--red);
-	background: #fadbd9;
+	background-color: #fadbd9;
 }
 
 .bg-orange.light {
 	color: var(--orange);
-	background: #fde6d2;
+	background-color: #fde6d2;
 }
 
 .bg-yellow.light {
 	color: var(--yellow);
-	background: #fef2ce;
+	background-color: #fef2ce;
 }
 
 .bg-olive.light {
 	color: var(--olive);
-	background: #e8f4d9;
+	background-color: #e8f4d9;
 }
 
 .bg-green.light {
 	color: var(--green);
-	background: #d7f0db;
+	background-color: #d7f0db;
 }
 
 .bg-cyan.light {
 	color: var(--cyan);
-	background: #d2f1f0;
+	background-color: #d2f1f0;
 }
 
 .bg-blue.light {
 	color: var(--blue);
-	background: #cce6ff;
+	background-color: #cce6ff;
 }
 
 .bg-purple.light {
 	color: var(--purple);
-	background: #e1d7f0;
+	background-color: #e1d7f0;
 }
 
 .bg-mauve.light {
 	color: var(--mauve);
-	background: #ebd4ef;
+	background-color: #ebd4ef;
 }
 
 .bg-pink.light {
 	color: var(--pink);
-	background: #f9d7ea;
+	background-color: #f9d7ea;
 }
 
 .bg-brown.light {
 	color: var(--brown);
-	background: #ede1d9;
+	background-color: #ede1d9;
 }
 
 .bg-grey.light {
 	color: var(--grey);
-	background: #e7ebed;
+	background-color: #e7ebed;
 }
 
 .bg-gray.light {
 	color: #666;
-	background: #fadbd9;
+	background-color: #fadbd9;
 }
 
 .bg-gray.light {
 	color: #888;
-	background: #f1f1f1;
+	background-color: #f1f1f1;
 }
 
 .bg-gradual-red {
-	background-image:var(--gradualRed);
+	background-image: var(--gradualRed);
 	color: #fff;
 }
 
 .bg-gradual-orange {
-	background-image:var(--gradualOrange);
+	background-image: var(--gradualOrange);
 	color: #fff;
 }
 
 .bg-gradual-green {
-	background-image:var(--gradualGreen);
+	background-image: var(--gradualGreen);
 	color: #fff;
 }
 
 .bg-gradual-purple {
-	background-image:var(--gradualPurple);
+	background-image: var(--gradualPurple);
 	color: #fff;
 }
 
 .bg-gradual-pink {
-	background-image:var(--gradualPink);
+	background-image: var(--gradualPink);
 	color: #fff;
 }
 
 .bg-gradual-blue {
-	background-image:var(--gradualBlue);
+	background-image: var(--gradualBlue);
 	color: #fff;
 }
 
diff --git a/Colorui-UniApp/images/BasicsBg.png b/Colorui-UniApp/images/BasicsBg.png
deleted file mode 100644
index 4c0a18b..0000000
Binary files a/Colorui-UniApp/images/BasicsBg.png and /dev/null differ
diff --git a/Colorui-UniApp/images/componentBg.png b/Colorui-UniApp/images/componentBg.png
deleted file mode 100644
index 4d6ed3c..0000000
Binary files a/Colorui-UniApp/images/componentBg.png and /dev/null differ
diff --git a/Colorui-UniApp/images/logo.png b/Colorui-UniApp/images/logo.png
deleted file mode 100644
index 8043b0d..0000000
Binary files a/Colorui-UniApp/images/logo.png and /dev/null differ
diff --git a/Colorui-UniApp/images/tabbar/about.png b/Colorui-UniApp/images/tabbar/about.png
deleted file mode 100644
index a2e5acc..0000000
Binary files a/Colorui-UniApp/images/tabbar/about.png and /dev/null differ
diff --git a/Colorui-UniApp/images/tabbar/about_cur.png b/Colorui-UniApp/images/tabbar/about_cur.png
deleted file mode 100644
index 36769f6..0000000
Binary files a/Colorui-UniApp/images/tabbar/about_cur.png and /dev/null differ
diff --git a/Colorui-UniApp/images/tabbar/basics.png b/Colorui-UniApp/images/tabbar/basics.png
deleted file mode 100644
index 8a5ce76..0000000
Binary files a/Colorui-UniApp/images/tabbar/basics.png and /dev/null differ
diff --git a/Colorui-UniApp/images/tabbar/basics_cur.png b/Colorui-UniApp/images/tabbar/basics_cur.png
deleted file mode 100644
index 5022f49..0000000
Binary files a/Colorui-UniApp/images/tabbar/basics_cur.png and /dev/null differ
diff --git a/Colorui-UniApp/images/tabbar/component.png b/Colorui-UniApp/images/tabbar/component.png
deleted file mode 100644
index 0a87a81..0000000
Binary files a/Colorui-UniApp/images/tabbar/component.png and /dev/null differ
diff --git a/Colorui-UniApp/images/tabbar/component_cur.png b/Colorui-UniApp/images/tabbar/component_cur.png
deleted file mode 100644
index 581eca6..0000000
Binary files a/Colorui-UniApp/images/tabbar/component_cur.png and /dev/null differ
diff --git a/Colorui-UniApp/images/tabbar/plugin.png b/Colorui-UniApp/images/tabbar/plugin.png
deleted file mode 100644
index a7b540b..0000000
Binary files a/Colorui-UniApp/images/tabbar/plugin.png and /dev/null differ
diff --git a/Colorui-UniApp/images/tabbar/plugin_cur.png b/Colorui-UniApp/images/tabbar/plugin_cur.png
deleted file mode 100644
index f541bd8..0000000
Binary files a/Colorui-UniApp/images/tabbar/plugin_cur.png and /dev/null differ
diff --git a/Colorui-UniApp/main.js b/Colorui-UniApp/main.js
index b7ac84e..eb9e545 100644
--- a/Colorui-UniApp/main.js
+++ b/Colorui-UniApp/main.js
@@ -7,8 +7,11 @@ Vue.component('basics',basics)
 import components from './pages/component/home.vue'
 Vue.component('components',components)
 
-import custom from './pages/custom/custom.vue'
-Vue.component('custom',custom)
+import plugin from './pages/plugin/home.vue'
+Vue.component('plugin',plugin)
+
+import cuCustom from './colorui/components/cu-custom.vue'
+Vue.component('cu-custom',cuCustom)
 
 Vue.config.productionTip = false
 
@@ -18,3 +21,8 @@ const app = new Vue({
     ...App
 })
 app.$mount()
+
+
+
+
+
diff --git a/Colorui-UniApp/pages.json b/Colorui-UniApp/pages.json
index 6d4d094..5c455eb 100644
--- a/Colorui-UniApp/pages.json
+++ b/Colorui-UniApp/pages.json
@@ -1,161 +1,181 @@
 {
-    "pages" : [
-        //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-        {
-            "path" : "pages/index/index",
-            "style" : {
-                "navigationBarTitleText" : "主页面"
-            }
-        },
-        {
-            "path" : "pages/basics/home",
-            "style" : {
-                "navigationBarTitleText" : "基础元素"
-            }
-        },
-        {
-            "path" : "pages/basics/layout",
-            "style" : {
-                "navigationBarTitleText" : "布局"
-            }
-        },
-        {
-            "path" : "pages/basics/background",
-            "style" : {
-                "navigationBarTitleText" : "背景"
-            }
-        },
-        {
-            "path" : "pages/basics/text",
-            "style" : {
-                "navigationBarTitleText" : "文本"
-            }
-        },
-        {
-            "path" : "pages/basics/icon",
-            "style" : {
-                "navigationBarTitleText" : "图标"
-            }
-        },
-        {
-            "path" : "pages/basics/button",
-            "style" : {
-                "navigationBarTitleText" : "按钮"
-            }
-        },
-        {
-            "path" : "pages/basics/design",
-            "style" : {
-                "navigationBarTitleText" : "按钮/设计"
-            }
-        },
-        {
-            "path" : "pages/basics/tag",
-            "style" : {
-                "navigationBarTitleText" : "标签"
-            }
-        },
-        {
-            "path" : "pages/basics/avatar",
-            "style" : {
-                "navigationBarTitleText" : "头像"
-            }
-        },
-        {
-            "path" : "pages/basics/progress",
-            "style" : {
-                "navigationBarTitleText" : "进度条"
-            }
-        },
-        {
-            "path" : "pages/basics/shadow",
-            "style" : {
-                "navigationBarTitleText" : "边框阴影"
-            }
-        },
-        {
-            "path" : "pages/basics/loading",
-            "style" : {
-                "navigationBarTitleText" : "加载"
-            }
-        },
-        {
-            "path" : "pages/component/home",
-            "style" : {
-                "navigationBarTitleText" : "交互组件"
-            }
-        },
-        {
-            "path" : "pages/component/bar",
-            "style" : {
-                "navigationBarTitleText" : "操作条"
-            }
-        },
-        {
-            "path" : "pages/custom/custom",
-            "style" : {
-                "navigationBarTitleText" : "列表"
-            }
-        },
-        {
-            "path" : "pages/component/nav",
-            "style" : {
-                "navigationBarTitleText" : "导航栏"
-            }
-        },
-        {
-            "path" : "pages/component/list",
-            "style" : {
-                "navigationBarTitleText" : "列表"
-            }
-        },
-        {
-            "path" : "pages/component/card",
-            "style" : {
-                "navigationBarTitleText" : "卡片"
-            }
-        },
-        {
-            "path" : "pages/component/form",
-            "style" : {
-                "navigationBarTitleText" : "表单"
-            }
-        },
-        {
-            "path" : "pages/component/timeline",
-            "style" : {
-                "navigationBarTitleText" : "时间轴"
-            }
-        },
-        {
-            "path" : "pages/component/chat",
-            "style" : {
-                "navigationBarTitleText" : "聊天"
-            }
-        },
-        {
-            "path" : "pages/component/swiper",
-            "style" : {
-                "navigationBarTitleText" : "轮播"
-            }
-        },
-        {
-            "path" : "pages/component/modal",
-            "style" : {
-                "navigationBarTitleText" : "模态框"
-            }
-        },
-        {
-            "path" : "pages/component/steps",
-            "style" : {
-                "navigationBarTitleText" : "步骤条"
-            }
-        }
-    ],
-    "globalStyle" : {
-        "navigationBarBackgroundColor" : "#39b54a",
-        "navigationBarTitleText" : "ColorUi for UniApp",
-        "navigationStyle" : "custom",
-        "navigationBarTextStyle" : "white"
-    }
+	"pages": [
+		//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": "主页面"
+			}
+		},
+		{
+			"path": "pages/basics/home",
+			"style": {
+				"navigationBarTitleText": "基础元素"
+			}
+		},
+		{
+			"path": "pages/basics/layout",
+			"style": {
+				"navigationBarTitleText": "布局"
+			}
+		},
+		{
+			"path": "pages/basics/background",
+			"style": {
+				"navigationBarTitleText": "背景"
+			}
+		},
+		{
+			"path": "pages/basics/text",
+			"style": {
+				"navigationBarTitleText": "文本"
+			}
+		},
+		{
+			"path": "pages/basics/icon",
+			"style": {
+				"navigationBarTitleText": "图标"
+			}
+		},
+		{
+			"path": "pages/basics/button",
+			"style": {
+				"navigationBarTitleText": "按钮"
+			}
+		},
+		{
+			"path": "pages/basics/design",
+			"style": {
+				"navigationBarTitleText": "按钮/设计"
+			}
+		},
+		{
+			"path": "pages/basics/tag",
+			"style": {
+				"navigationBarTitleText": "标签"
+			}
+		},
+		{
+			"path": "pages/basics/avatar",
+			"style": {
+				"navigationBarTitleText": "头像"
+			}
+		},
+		{
+			"path": "pages/basics/progress",
+			"style": {
+				"navigationBarTitleText": "进度条"
+			}
+		},
+		{
+			"path": "pages/basics/shadow",
+			"style": {
+				"navigationBarTitleText": "边框阴影"
+			}
+		},
+		{
+			"path": "pages/basics/loading",
+			"style": {
+				"navigationBarTitleText": "加载"
+			}
+		},
+		{
+			"path": "pages/component/home",
+			"style": {
+				"navigationBarTitleText": "交互组件"
+			}
+		},
+		{
+			"path": "pages/component/bar",
+			"style": {
+				"navigationBarTitleText": "操作条"
+			}
+		},
+		{
+			"path": "pages/component/nav",
+			"style": {
+				"navigationBarTitleText": "导航栏"
+			}
+		},
+		{
+			"path": "pages/component/list",
+			"style": {
+				"navigationBarTitleText": "列表"
+			}
+		},
+		{
+			"path": "pages/component/card",
+			"style": {
+				"navigationBarTitleText": "卡片"
+			}
+		},
+		{
+			"path": "pages/component/form",
+			"style": {
+				"navigationBarTitleText": "表单"
+			}
+		},
+		{
+			"path": "pages/component/timeline",
+			"style": {
+				"navigationBarTitleText": "时间轴"
+			}
+		},
+		{
+			"path": "pages/component/chat",
+			"style": {
+				"navigationBarTitleText": "聊天"
+			}
+		},
+		{
+			"path": "pages/component/swiper",
+			"style": {
+				"navigationBarTitleText": "轮播"
+			}
+		},
+		{
+			"path": "pages/component/modal",
+			"style": {
+				"navigationBarTitleText": "模态框"
+			}
+		},
+		{
+			"path": "pages/component/steps",
+			"style": {
+				"navigationBarTitleText": "步骤条"
+			}
+		}, {
+			"path": "pages/plugin/home",
+			"style": {
+				"navigationBarTitleText": "插件扩展"
+			}
+		}, {
+			"path": "pages/plugin/indexes",
+			"style": {
+				"navigationBarTitleText": "索引列表"
+			}
+		}, {
+			"path": "pages/plugin/animation",
+			"style": {
+				"navigationBarTitleText": "微动画"
+			}
+		}, {
+			"path": "pages/plugin/drawer",
+			"style": {
+				"navigationBarTitleText": "全屏抽屉"
+			}
+		}, {
+			"path": "pages/plugin/verticalnav",
+			"style": {
+				"navigationBarTitleText": "垂直导航"
+			}
+		}
+	],
+	"globalStyle": {
+		"navigationBarBackgroundColor": "#39b54a",
+		"navigationBarTitleText": "ColorUi for UniApp",
+		"navigationStyle": "custom",
+		"navigationBarTextStyle": "white"
+	},
+	"usingComponts":true
 }
diff --git a/Colorui-UniApp/pages/basics/avatar.vue b/Colorui-UniApp/pages/basics/avatar.vue
index 1c02a18..480131d 100644
--- a/Colorui-UniApp/pages/basics/avatar.vue
+++ b/Colorui-UniApp/pages/basics/avatar.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<custom>头像</custom>
+		<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>头像形状
diff --git a/Colorui-UniApp/pages/basics/background.vue b/Colorui-UniApp/pages/basics/background.vue
index 39868f0..baf99fd 100644
--- a/Colorui-UniApp/pages/basics/background.vue
+++ b/Colorui-UniApp/pages/basics/background.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<custom>背景</custom>
+		<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>深色背景
@@ -85,7 +85,7 @@
 				</view>
 			</view>
 		</view>
-		<!-- #ifdef MP-WEIXIN -->
+		<!-- #ifdef MP -->
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
 				<text class="icon-title text-blue"></text>视频背景
diff --git a/Colorui-UniApp/pages/basics/button.vue b/Colorui-UniApp/pages/basics/button.vue
index d2cf6e9..56cd205 100644
--- a/Colorui-UniApp/pages/basics/button.vue
+++ b/Colorui-UniApp/pages/basics/button.vue
@@ -1,16 +1,15 @@
 <template>
 	<view>
-		<custom>按钮
-			<block slot="right">
+		<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>
+			<view class="action">
 				<navigator class="action" url="design" hover-class="none">
 					<text class="icon-skinfill"></text>
 					<text class="text-df">设计</text>
 				</navigator>
-			</block>
-		</custom>
-		<view class="cu-bar bg-white solid-bottom">
-			<view class="action">
-				<text class="icon-title text-blue"></text>按钮形状
 			</view>
 		</view>
 		<view class="padding flex flex-wrap justify-between align-center bg-white">
diff --git a/Colorui-UniApp/pages/basics/design.vue b/Colorui-UniApp/pages/basics/design.vue
index 72f2493..db7a2da 100644
--- a/Colorui-UniApp/pages/basics/design.vue
+++ b/Colorui-UniApp/pages/basics/design.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<custom> 按钮 / 设计</custom>
+		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content"> 按钮 / 设计</block></cu-custom>
 		<view class="padding-xl">
 			<view class="box bg-white text-center radius">
 				<button class="cu-btn" :class="[border?bordersize?'lines-' + color:'line-' + color:'bg-'+ color,round?'round':'',size,shadow?'shadow':'']">我是一个按钮</button>
diff --git a/Colorui-UniApp/pages/basics/home.vue b/Colorui-UniApp/pages/basics/home.vue
index 5d1db5e..717865a 100644
--- a/Colorui-UniApp/pages/basics/home.vue
+++ b/Colorui-UniApp/pages/basics/home.vue
@@ -1,14 +1,18 @@
 <template>
 	<view>
-		<image src="https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358228-assets/web-upload/e256b4ce-d9a4-488b-8da2-032747213982.png" mode="widthFix" class="response"></image>	
-		<view class="nav-list">
-			<navigator hover-class="none" :url="'/pages/basics/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
-			 :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>
-			</navigator>
-		</view>
+		<scroll-view scroll-y class="page">
+			<image src="https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358228-assets/web-upload/e256b4ce-d9a4-488b-8da2-032747213982.png"
+			 mode="widthFix" class="response"></image>
+			<view class="nav-list">
+				<navigator hover-class="none" :url="'/pages/basics/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
+				 :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>
+				</navigator>
+			</view>
+			<view class="cu-tabbar-height"></view>
+		</scroll-view>
 	</view>
 </template>
 
@@ -83,5 +87,7 @@
 </script>
 
 <style>
-
+	.page {
+		height: 100vh;
+	}
 </style>
diff --git a/Colorui-UniApp/pages/basics/icon.vue b/Colorui-UniApp/pages/basics/icon.vue
index b629bda..a811b69 100644
--- a/Colorui-UniApp/pages/basics/icon.vue
+++ b/Colorui-UniApp/pages/basics/icon.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<custom>图标</custom>
+		<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>
diff --git a/Colorui-UniApp/pages/basics/layout.vue b/Colorui-UniApp/pages/basics/layout.vue
index e38fa26..6bbaf15 100644
--- a/Colorui-UniApp/pages/basics/layout.vue
+++ b/Colorui-UniApp/pages/basics/layout.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<custom>布局</custom>
+		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">布局</block></cu-custom>
 		<scroll-view scroll-x class="bg-white nav text-center fixed" :style="[{top:CustomBar + 'px'}]">
 			<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"
 			 :data-id="index">
diff --git a/Colorui-UniApp/pages/basics/loading.vue b/Colorui-UniApp/pages/basics/loading.vue
index fcca25c..279059e 100644
--- a/Colorui-UniApp/pages/basics/loading.vue
+++ b/Colorui-UniApp/pages/basics/loading.vue
@@ -1,12 +1,12 @@
 <template>
 	<view>
-		<custom>加载
+		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">加载</block>
 			<block slot="right">
 				<view class="action">
 					<view class="cu-load load-icon" :class="!isLoad?'loading':'over'"></view>
 				</view>
 			</block>
-		</custom>
+		</cu-custom>
 		<view class="cu-bar bg-white">
 			<view class="action">
 				<text class="icon-title text-blue"></text>背景
diff --git a/Colorui-UniApp/pages/basics/progress.vue b/Colorui-UniApp/pages/basics/progress.vue
index c9c3360..9639a82 100644
--- a/Colorui-UniApp/pages/basics/progress.vue
+++ b/Colorui-UniApp/pages/basics/progress.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<custom>进度条</custom>
+		<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>进度条形状
diff --git a/Colorui-UniApp/pages/basics/shadow.vue b/Colorui-UniApp/pages/basics/shadow.vue
index 904bf29..387f91e 100644
--- a/Colorui-UniApp/pages/basics/shadow.vue
+++ b/Colorui-UniApp/pages/basics/shadow.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<custom>边框阴影</custom>
+		<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>边框
diff --git a/Colorui-UniApp/pages/basics/tag.vue b/Colorui-UniApp/pages/basics/tag.vue
index f9222ca..733ff50 100644
--- a/Colorui-UniApp/pages/basics/tag.vue
+++ b/Colorui-UniApp/pages/basics/tag.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<custom>标签</custom>
+		<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>标签形状
diff --git a/Colorui-UniApp/pages/basics/text.vue b/Colorui-UniApp/pages/basics/text.vue
index 28a40b8..4c98f90 100644
--- a/Colorui-UniApp/pages/basics/text.vue
+++ b/Colorui-UniApp/pages/basics/text.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<custom>文本</custom>
+		<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>文字大小
diff --git a/Colorui-UniApp/pages/component/bar.vue b/Colorui-UniApp/pages/component/bar.vue
index 2f75144..0ff6cdc 100644
--- a/Colorui-UniApp/pages/component/bar.vue
+++ b/Colorui-UniApp/pages/component/bar.vue
@@ -1,7 +1,6 @@
 <template>
 	<view>
-		<custom bgColor="bg-gradual-pink">操作条</custom>
-
+		<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>
diff --git a/Colorui-UniApp/pages/component/card.vue b/Colorui-UniApp/pages/component/card.vue
index 3b56dd7..730d71e 100644
--- a/Colorui-UniApp/pages/component/card.vue
+++ b/Colorui-UniApp/pages/component/card.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<custom bgColor="bg-gradual-pink">卡片</custom>
+		<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> 案例类卡片
@@ -70,7 +70,7 @@
 					<text class="icon-messagefill margin-lr-xs"></text> 30
 				</view>
 
-				<view class="cu-list menu menu-avatar comment solids-top">
+				<view class="cu-list menu-avatar comment solids-top">
 					<view class="cu-item">
 						<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
 						<view class="content">
diff --git a/Colorui-UniApp/pages/component/chat.vue b/Colorui-UniApp/pages/component/chat.vue
index 12d5f30..39872ac 100644
--- a/Colorui-UniApp/pages/component/chat.vue
+++ b/Colorui-UniApp/pages/component/chat.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<custom bgColor="bg-gradual-pink">聊天</custom>
+		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">聊天</block></cu-custom>
 		<view class="cu-chat">
 			<view class="cu-item self">
 				<view class="main">
diff --git a/Colorui-UniApp/pages/component/form.vue b/Colorui-UniApp/pages/component/form.vue
index d62a858..c192ca0 100644
--- a/Colorui-UniApp/pages/component/form.vue
+++ b/Colorui-UniApp/pages/component/form.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<custom bgColor="bg-gradual-pink">表单</custom>
+		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">表单</block></cu-custom>
 		<form>
 			<view class="cu-form-group margin-top">
 				<view class="title">邮件</view>
diff --git a/Colorui-UniApp/pages/component/home.vue b/Colorui-UniApp/pages/component/home.vue
index df8bc95..51eac99 100644
--- a/Colorui-UniApp/pages/component/home.vue
+++ b/Colorui-UniApp/pages/component/home.vue
@@ -1,14 +1,17 @@
 <template>
 	<view>
-		<image src="/static/componentBg.png" mode="widthFix" class="response"></image>
-		<view class="nav-list">
-			<navigator hover-class='none' :url="'/pages/component/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
-			 :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>
-			</navigator>
-		</view>
+		<scroll-view scroll-y class="page">
+			<image src="/static/componentBg.png" mode="widthFix" class="response"></image>
+			<view class="nav-list">
+				<navigator hover-class='none' :url="'/pages/component/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
+				 :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>
+				</navigator>
+			</view>
+			<view class="cu-tabbar-height"></view>
+		</scroll-view>
 	</view>
 </template>
 
@@ -83,5 +86,7 @@
 </script>
 
 <style>
-
+	.page {
+		height: 100vh;
+	}
 </style>
diff --git a/Colorui-UniApp/pages/component/list.vue b/Colorui-UniApp/pages/component/list.vue
index 19b8692..e390929 100644
--- a/Colorui-UniApp/pages/component/list.vue
+++ b/Colorui-UniApp/pages/component/list.vue
@@ -1,6 +1,9 @@
 <template>
 	<view>
-		<custom bgColor="bg-gradual-pink">列表</custom>
+		<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 margin-top">
 			<view class="action">
 				<text class="icon-title text-orange "></text> 宫格列表
@@ -171,14 +174,14 @@
 				<text class="icon-title text-orange "></text> 消息列表
 			</view>
 		</view>
-		<view class="cu-list menu menu-avatar">
+		<view class="cu-list menu-avatar">
 			<view class="cu-item">
 				<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
 				<view class="content">
 					<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="icon-infofill text-red  margin-right-xs"></text> 我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
 						</text> </view>
 				</view>
 				<view class="action">
@@ -209,9 +212,8 @@
 			<view class="cu-item ">
 				<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
 				<view class="content">
-					<view>莫甘娜</view>
-					<view class="text-gray text-sm">
-						凯尔，你被自己的光芒变的盲目！</view>
+					<view class="text-pink"><text class="text-cut">莫甘娜</text></view>
+					<view class="text-gray text-sm flex"> <text class="text-cut">凯尔，你被自己的光芒变的盲目！</text></view>
 				</view>
 				<view class="action">
 					<view class="text-grey text-xs">22:20</view>
@@ -221,9 +223,10 @@
 			<view class="cu-item grayscale">
 				<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
 				<view class="content">
-					<view><text class="text-cut">伊泽瑞尔</text> <view class="cu-tag round bg-orange sm">断开连接...</view></view>
-					<view class="text-gray text-sm">
-						等我回来一个打十个</view>
+					<view><text class="text-cut">伊泽瑞尔</text>
+						<view class="cu-tag round bg-orange sm">断开连接...</view>
+					</view>
+					<view class="text-gray text-sm flex"> <text class="text-cut"> 等我回来一个打十个</text></view>
 				</view>
 				<view class="action">
 					<view class="text-grey text-xs">22:20</view>
@@ -239,9 +242,8 @@
 						<text class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</text>
 						<view class="cu-tag round bg-orange sm">6人</view>
 					</view>
-					<view class="text-gray text-sm">
-						伊泽瑞尔：
-						<text class="icon-locationfill text-orange margin-right-xs"></text> 传送中...</view>
+					<view class="text-gray text-sm flex">
+						<text class="text-cut"> 伊泽瑞尔：<text class="icon-locationfill text-orange margin-right-xs"></text> 传送中...</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 50af05d..799064c 100644
--- a/Colorui-UniApp/pages/component/modal.vue
+++ b/Colorui-UniApp/pages/component/modal.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<custom bgColor="bg-gradual-pink">模态窗口</custom>
+		<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-orange "></text> 普通窗口
diff --git a/Colorui-UniApp/pages/component/nav.vue b/Colorui-UniApp/pages/component/nav.vue
index c0d1864..d092691 100644
--- a/Colorui-UniApp/pages/component/nav.vue
+++ b/Colorui-UniApp/pages/component/nav.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<custom bgColor="bg-gradual-pink">导航栏</custom>
+		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">导航栏</block></cu-custom>
 		<view v-for="(item,index) in 10" :key="index" v-if="index==TabCur" class="bg-grey padding margin text-center">
 			Tab{{index}}
 		</view>
diff --git a/Colorui-UniApp/pages/component/steps.vue b/Colorui-UniApp/pages/component/steps.vue
index 63f9194..a9cd219 100644
--- a/Colorui-UniApp/pages/component/steps.vue
+++ b/Colorui-UniApp/pages/component/steps.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<custom bgColor="bg-gradual-pink">步骤条</custom>
+		<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> 基本用法
diff --git a/Colorui-UniApp/pages/component/swiper.vue b/Colorui-UniApp/pages/component/swiper.vue
index e684d3e..39a6f39 100644
--- a/Colorui-UniApp/pages/component/swiper.vue
+++ b/Colorui-UniApp/pages/component/swiper.vue
@@ -1,6 +1,8 @@
 <template>
 	<view>
-		<custom bgColor="bg-gradual-pink">轮播图</custom>
+		<cu-custom bgColor="bg-gradual-pink" :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-pink"></text> 全屏限高轮播
@@ -33,23 +35,17 @@
 		</swiper>
 		<view class="cu-bar bg-white margin-top">
 			<view class="action">
-				<text class="icon-title text-pink"></text> 堆叠式轮播
+				<text class="icon-title text-pink"></text> 堆叠式轮播 
 			</view>
 		</view>
 		<view class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
-			<!-- #ifdef H5  -->
-			<view class="tower-item" :class="item.zIndex==1?'none':''" v-for="(item,index) in swiperList" :key="index" :style="[{transform: 'scale('+ (0.5 + item.zIndex / 10)+')',marginLeft:item.mLeft*100-150+'upx',zIndex:item.zIndex}]">
-			<!-- #endif -->
-			<!-- #ifdef MP-WEIXIN  -->
-			<view class="tower-item" :class="item.zIndex==1?'none':''" v-for="(item,index) in swiperList" :key="index" :style="[{transform: 'scale('+ (0.5 + item.zIndex / 10)+')',marginLeft:item.mLeft*100-150+'rpx',zIndex:item.zIndex}]">
-			<!-- #endif -->
+			<view class="tower-item" :class="item.zIndex==1?'none':''" v-for="(item,index) in swiperList" :key="index" :style="[{'--index': item.zIndex,'--left':item.mLeft}]" :data-direction="direction">
 				<view class="swiper-item">
 					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
 					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
 				</view>
 			</view>
 		</view>
-
 	</view>
 </template>
 
@@ -64,13 +60,12 @@
 					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
 				}, {
 					id: 1,
-					// #ifdef MP-WEIXIN
+					// #ifdef MP
 					type: 'video',
 					url: 'https://yz.lol.qq.com/v1/assets/videos/aatrox-splashvideo.webm',
 					// #endif
 
-
-					// #ifndef MP-WEIXIN
+					// #ifndef MP
 					type: 'image',
 					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
 					// #endif
@@ -97,7 +92,7 @@
 					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
 				}],
 				dotStyle: false,
-				towerStart:0,
+				towerStart: 0,
 				direction: ''
 			};
 		},
@@ -141,27 +136,33 @@
 				if (direction == 'right') {
 					let mLeft = list[0].mLeft;
 					let zIndex = list[0].zIndex;
-					for (let i = 1; i < list.length; i++) {
+					for (let i = 1; i < this.swiperList.length; i++) {
 						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
 						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
-				console.log('end')
 					}
 					this.swiperList[list.length - 1].mLeft = mLeft;
 					this.swiperList[list.length - 1].zIndex = zIndex;
 				} else {
 					let mLeft = list[list.length - 1].mLeft;
 					let zIndex = list[list.length - 1].zIndex;
-					for (let i = list.length - 1; i > 0; i--) {
+					for (let i = this.swiperList.length - 1; i > 0; i--) {
 						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
 						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
 					}
 					this.swiperList[0].mLeft = mLeft;
 					this.swiperList[0].zIndex = zIndex;
 				}
+				this.direction = ""
+				this.swiperList = this.swiperList
 			},
 		}
 	}
 </script>
 
 <style>
+	.tower-swiper .tower-item {
+		transform: scale(calc(0.5 + var(--index) / 10));
+		margin-left: calc(var(--left) * 100upx - 150upx);
+		z-index: var(--index);
+	}
 </style>
diff --git a/Colorui-UniApp/pages/component/timeline.vue b/Colorui-UniApp/pages/component/timeline.vue
index bd1d4aa..2882f4a 100644
--- a/Colorui-UniApp/pages/component/timeline.vue
+++ b/Colorui-UniApp/pages/component/timeline.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<custom bgColor="bg-gradual-pink">时间轴</custom>
+		<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">
diff --git a/Colorui-UniApp/pages/index/index.vue b/Colorui-UniApp/pages/index/index.vue
index e3d52b7..0fd1d0a 100644
--- a/Colorui-UniApp/pages/index/index.vue
+++ b/Colorui-UniApp/pages/index/index.vue
@@ -2,7 +2,7 @@
 	<view>
 		<basics v-if="PageCur=='basics'"></basics>
 		<components v-if="PageCur=='component'"></components>
-		<view class="cu-tabbar-height"></view>
+		<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'>
@@ -16,6 +16,12 @@
 				</view>
 				<view :class="PageCur=='component'?'text-green':'text-gray'">组件</view>
 			</view>
+			<view class="action" @click="NavChange" data-cur="plugin">
+				<view class='icon-cu-image'>
+					<image :src="'/static/tabbar/plugin' + [PageCur == 'plugin'?'_cur':''] + '.png'"></image>
+				</view>
+				<view :class="PageCur=='plugin'?'text-green':'text-gray'">扩展</view>
+			</view>
 		</view>
 	</view>
 </template>
diff --git a/Colorui-UniApp/pages/plugin/animation.vue b/Colorui-UniApp/pages/plugin/animation.vue
new file mode 100644
index 0000000..6b86ec9
--- /dev/null
+++ b/Colorui-UniApp/pages/plugin/animation.vue
@@ -0,0 +1,145 @@
+<template>
+	<view>
+		<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg" :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-orange"></text> 默认效果
+			</view>
+		</view>
+		<view class="padding-sm">
+			<view class="flex flex-wrap justify-around">
+				<button class="cu-btn margin-sm basis-sm shadow" :class="['bg-' + item.color,animation==item.name?'animation-' +item.name :'']"
+				 @tap="Toggle" :data-class="item.name" v-for="(item,index) in list" :key="index">{{item.name}}</button>
+			</view>
+		</view>
+		<view class="cu-bar bg-white">
+			<view class="action">
+				<text class="icon-title text-orange"></text> 反向动画
+			</view>
+		</view>
+
+		<view class="padding-sm">
+			<view class="flex flex-wrap justify-around">
+				<button class="cu-btn animation-reverse margin-sm basis-sm shadow" :class="['bg-' + item.color,animation==item.name+'s'?'animation-' +item.name:'']"
+				 @tap="Toggle" :data-class="item.name+'s'" v-for="(item,index) in list" :key="index">{{item.name}}</button>
+			</view>
+		</view>
+		<view class="cu-bar bg-white">
+			<view class="action">
+				<text class="icon-title text-orange"></text> 延迟执行
+			</view>
+			<view class="action">
+				<button class="cu-btn bg-cyan shadow" @tap="ToggleDelay">开始执行</button>
+			</view>
+		</view>
+
+		<view class="padding-sm">
+			<view class="flex flex-wrap justify-around">
+				<button class="margin-sm basis-sm shadow cu-btn" :class="['bg-' + item.color,toggleDelay?'animation-slide-bottom':'']"
+				 :style="[{animationDelay: (index + 1)*0.1 + 's'}]" v-for="(item,index) in list" :key="index">0.{{index+1}}s</button>
+			</view>
+		</view>
+		<view class="cu-bar bg-white">
+			<view class="action">
+				<text class="icon-title text-orange"></text> Gif动画
+			</view>
+		</view>
+		<view class="margin radius bg-gradual-green shadow-blur">
+			<image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100rpx"></image>
+		</view>
+		<view class="margin flex">
+			<view class="bg-black flex-sub margin-right radius shadow-lg">
+				<image src="https://image.weilanwl.com/gif/loading-black.gif" mode="aspectFit" class="gif-black response" style="height:240rpx"></image>
+			</view>
+			<view class="bg-white flex-sub radius shadow-lg">
+				<image src="https://image.weilanwl.com/gif/loading-white.gif" mode="aspectFit" class="gif-white response" style="height:240rpx"></image>
+			</view>
+		</view>
+		<view class="margin flex">
+			<view class="bg-gradual-blue flex-sub margin-right radius shadow-lg">
+				<image src="https://image.weilanwl.com/gif/rhomb-black.gif" mode="aspectFit" class="gif-black response" style="height:240rpx"></image>
+			</view>
+			<view class="bg-white flex-sub radius shadow-lg">
+				<image src="https://image.weilanwl.com/gif/rhomb-white.gif" mode="aspectFit" class="gif-white response" style="height:240rpx"></image>
+			</view>
+		</view>
+		<view class="margin flex">
+			<view class="bg-white flex-sub margin-right radius shadow-lg">
+				<image src="https://image.weilanwl.com/gif/loading-1.gif" mode="aspectFit" class="gif-white response" style="height:240rpx"></image>
+			</view>
+			<view class="bg-black flex-sub radius shadow-lg">
+				<image src="https://image.weilanwl.com/gif/loading-2.gif" mode="aspectFit" class="gif-black response" style="height:240rpx"></image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				animation:'',
+				list: [{
+						name: 'fade',
+						color: 'red'
+					},
+					{
+						name: 'scale-up',
+						color: 'orange'
+					},
+					{
+						name: 'scale-down',
+						color: 'olive'
+					},
+					{
+						name: 'slide-top',
+						color: 'green'
+					}, {
+						name: 'slide-bottom',
+						color: 'cyan'
+					},
+					{
+						name: 'slide-left',
+						color: 'blue'
+					},
+					{
+						name: 'slide-right',
+						color: 'purple'
+					},
+					{
+						name: 'shake',
+						color: 'mauve'
+					}
+				],
+				toggleDelay: false
+
+			};
+		},
+		methods: {
+			Toggle(e) {
+				var anmiaton = e.currentTarget.dataset.class;
+				this.animation= anmiaton;
+				setTimeout(()=>{
+					this.animation= '';
+				}, 1000)
+			},
+			ToggleDelay() {
+				this.toggleDelay= true;
+				setTimeout(()=>{
+					this.toggleDelay= false
+				}, 1000)
+			}
+		},
+	}
+</script>
+
+<style>
+	@import "../../colorui/animation.css";
+	
+	image[class*="gif-"] {
+		border-radius: 6upx;
+		display: block;
+	}
+</style>
\ No newline at end of file
diff --git a/Colorui-UniApp/pages/plugin/drawer.vue b/Colorui-UniApp/pages/plugin/drawer.vue
new file mode 100644
index 0000000..568281c
--- /dev/null
+++ b/Colorui-UniApp/pages/plugin/drawer.vue
@@ -0,0 +1,170 @@
+<template>
+	<view class="bg-gradual-blue">
+		<scroll-view scroll-y class="DrawerPage" :class="modalName=='viewModal'?'show':''">
+			<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block>
+				<block slot="content">全屏抽屉</block>
+			</cu-custom>			
+			<view class='padding margin text-center'>
+				<view class='cu-btn bg-green lg block shadow radius margin-xl' @tap="showModal" data-target="viewModal">
+					打开抽屉
+				</view>
+			</view>
+			<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="text-grey">{{index +1}}</text>
+					</view>
+				</view>
+			</view>
+			
+			<view class='padding margin text-center'>
+				<view class='cu-btn bg-green lg block shadow radius margin-xl' @tap="showModal" data-target="viewModal">
+					打开抽屉
+				</view>
+			</view>
+		</scroll-view>
+		<view class="DrawerClose" :class="modalName=='viewModal'?'show':''" @tap="hideModal">
+			<text class="icon-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="text-grey">{{index +1}}</text>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				modalName:null
+			};
+		},
+		methods: {
+			showModal(e) {
+				this.modalName = e.currentTarget.dataset.target
+			},
+			hideModal(e) {
+				this.modalName = null
+			},
+			tabSelect(e) {
+				this.TabCur = e.currentTarget.dataset.id;
+				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
+			}
+		},
+	}
+</script>
+
+<style>
+	page {
+		background-image: var(--gradualBlue);
+		width: 750upx;
+		overflow: hidden;
+	}
+
+	.DrawerPage {
+		position: absolute;
+		width: 100vw;
+		height: 100vh;
+		left: 0vw;
+		background-color: #f1f1f1;
+		transition: all 0.6s;
+	}
+
+	.DrawerPage.show {
+		transform: scale(0.9, 0.9);
+		left: 85vw;
+		box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
+		transform-origin: 0;
+	}
+
+	.DrawerWindow {
+		position: absolute;
+		width: 85vw;
+		height: 100vh;
+		left: 0;
+		top: 0;
+		transform: scale(0.9, 0.9) translateX(-100%);
+		opacity: 0;
+		pointer-events: none;
+		transition: all 0.6s;
+		padding: 100upx 0;
+	}
+
+	.DrawerWindow.show {
+		transform: scale(1, 1) translateX(0%);
+		opacity: 1;
+		pointer-events: all;
+	}
+
+	.DrawerClose {
+		position: absolute;
+		width: 40vw;
+		height: 100vh;
+		right: 0;
+		top: 0;
+		color: transparent;
+		padding-bottom: 30upx;
+		display: flex;
+		align-items: flex-end;
+		justify-content: center;
+		background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
+		letter-spacing: 5px;
+		font-size: 50upx;
+		opacity: 0;
+		pointer-events: none;
+		transition: all 0.6s;
+	}
+
+	.DrawerClose.show {
+		opacity: 1;
+		pointer-events: all;
+		width: 15vw;
+		color: #fff;
+	}
+
+	.DrawerPage .cu-bar.tabbar .action button.icon {
+		width: 64upx;
+		height: 64upx;
+		line-height: 64upx;
+		margin: 0;
+		display: inline-block;
+	}
+
+	.DrawerPage .cu-bar.tabbar .action .cu-avatar {
+		margin: 0;
+	}
+
+	.DrawerPage .nav {
+		flex: 1;
+	}
+
+	.DrawerPage .nav .cu-item.cur {
+		border-bottom: 0;
+		position: relative;
+	}
+
+	.DrawerPage .nav .cu-item.cur::after {
+		content: "";
+		width: 10upx;
+		height: 10upx;
+		background-color: currentColor;
+		position: absolute;
+		bottom: 10upx;
+		border-radius: 10upx;
+		left: 0;
+		right: 0;
+		margin: auto;
+	}
+
+	.DrawerPage .cu-bar.tabbar .action {
+		flex: initial;
+	}
+</style>
diff --git a/Colorui-UniApp/pages/plugin/home.vue b/Colorui-UniApp/pages/plugin/home.vue
new file mode 100644
index 0000000..9918645
--- /dev/null
+++ b/Colorui-UniApp/pages/plugin/home.vue
@@ -0,0 +1,107 @@
+<template>
+	<view>
+		<scroll-view scroll-y class="page">
+			<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/cjkz2329.jpg">
+				<block slot="content">
+					<image src="/static/cjkz.png" mode="widthFix"></image>
+				</block>
+			</cu-custom>
+			<view class="cu-card">
+				<view class="cu-item bg-img shadow-blur" :style="[{backgroundImage:'url('+item.img+')'}]" @tap="toChild" :data-url="item.url"
+				 v-for="(item,index) in list" :key="index">
+					<view class="cardTitle">
+						{{item.title}}
+					</view>
+				</view>
+			</view>
+			<view class="cu-tabbar-height"></view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				StatusBar: this.StatusBar,
+				CustomBar: this.CustomBar,
+				list: [{
+						title: '索引列表',
+						img: 'https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg',
+						url: '../plugin/indexes'
+					},
+					{
+						title: '微动画',
+						img: 'https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg',
+						url: '../plugin/animation'
+					},
+					{
+						title: '全屏抽屉',
+						img: 'https://image.weilanwl.com/color2.0/plugin/qpct2148.jpg',
+						url: '../plugin/drawer'
+					},
+					{
+						title: '垂直导航',
+						img: 'https://image.weilanwl.com/color2.0/plugin/qpczdh2307.jpg',
+						url: '../plugin/verticalnav'
+					}
+				]
+			};
+		},
+		methods: {
+			toChild(e) {
+				uni.navigateTo({
+					url: e.currentTarget.dataset.url
+				})
+			},
+		},
+	}
+</script>
+
+<style>
+	.page {
+		height: 100vh;
+	}
+
+	.cu-bar .content image {
+		height: 60upx;
+		width: 240upx;
+	}
+
+	.cardTitle {
+		color: #fff;
+		padding: 90upx 60upx;
+		font-size: 40upx;
+		font-weight: 300;
+		transform: skew(-10deg, 0deg);
+		position: relative;
+		text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
+	}
+
+	.cardTitle::before {
+		content: "";
+		position: absolute;
+		width: 60upx;
+		height: 6upx;
+		border-radius: 20upx;
+		background-color: #fff;
+		display: block;
+		top: 60upx;
+		left: 50upx;
+		transform: skew(10deg, 0deg);
+	}
+
+	.cardTitle::after {
+		content: "";
+		position: absolute;
+		width: 140upx;
+		border-radius: 6upx;
+		height: 24upx;
+		background-color: #fff;
+		display: block;
+		bottom: 76upx;
+		left: 90upx;
+		transform: skew(10deg, 0deg);
+		opacity: 0.1;
+	}
+</style>
diff --git a/Colorui-UniApp/pages/plugin/indexes.vue b/Colorui-UniApp/pages/plugin/indexes.vue
new file mode 100644
index 0000000..3624fb5
--- /dev/null
+++ b/Colorui-UniApp/pages/plugin/indexes.vue
@@ -0,0 +1,197 @@
+<template>
+	<view>
+		<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg" :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>
+				<input type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
+			</view>
+			<view class="action">
+				<button class="cu-btn bg-gradual-green shadow-blur round">搜索</button>
+			</view>
+		</view>
+		<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]"
+		 :scroll-with-animation="true" :enable-back-to-top="true" @scroll="scroll">
+			<block v-for="(item,index) in list" :key="index">
+				<view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name">
+					<view class="padding">{{item.name}}</view>
+					<view class="cu-list menu menu-avatar no-padding">
+						<view class="cu-item" v-for="(items,sub) in 2" :key="sub">
+							<view class="cu-avatar round lg">{{item.name}}</view>
+							<view class="content">
+								<view class="text-grey">{{item.name}}<text class="text-abc">{{list[sub].name}}</text>君</view>
+								<view class="text-gray text-sm">
+									有{{sub+2}}个主子需要伺候
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</block>
+		</scroll-view>
+		<view class="indexBar" :style="[{height:'calc(100vh - ' + CustomBar + 'px - 50px)'}]">
+			<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
+				<view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index" @touchstart="getCur" @touchend="setCur"> {{item.name}}</view>
+			</view>
+		</view>
+		<!--选择显示-->
+		<view v-show="!hidden" class="indexToast">
+			{{listCur}}
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				StatusBar: this.StatusBar,
+				CustomBar: this.CustomBar,
+				hidden: true,
+				listCurID: '',
+				list: [],
+				listCur: '',
+			};
+		},
+		onLoad() {
+			let list = [{}];
+			for (let i = 0; i < 26; i++) {
+				list[i] = {};
+				list[i].name = String.fromCharCode(65 + i);
+			}
+			this.list = list;
+			this.listCur = list[0];
+		},
+		onReady() {
+			let that = this;
+			uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
+				that.boxTop = res.top
+			}).exec();
+			uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
+				that.barTop = res.top
+			}).exec()
+		},
+		methods: {
+			//获取文字信息
+			getCur(e) {
+				this.hidden = false;
+				this.listCur = this.list[e.target.id].name;
+			},
+			setCur(e) {
+				this.hidden = true;
+				this.listCur = this.listCur
+			},
+			//滑动选择Item
+			tMove(e) {
+				let y = e.touches[0].clientY,
+					offsettop = this.boxTop,
+					that = this;
+				//判断选择区域,只有在选择区才会生效
+				if (y > offsettop) {
+					let num = parseInt((y - offsettop) / 20);
+					this.listCur = that.list[num].name
+				};
+			},
+
+			//触发全部开始选择
+			tStart() {
+				this.hidden = false
+			},
+
+			//触发结束选择
+			tEnd() {
+				this.hidden = true;
+				this.listCurID = this.listCur
+			},
+			indexSelect(e) {
+				let that = this;
+				let barHeight = this.barHeight;
+				let list = this.list;
+				let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
+				for (let i = 0; i < list.length; i++) {
+					if (scrollY < i + 1) {
+						that.listCur = list[i].name;
+						that.movableY = i * 20
+						return false
+					}
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+	page {
+		padding-top: 100upx;
+	}
+
+	.indexes {
+		position: relative;
+	}
+
+	.indexBar {
+		position: fixed;
+		right: 0px;
+		bottom: 0px;
+		padding: 20upx 20upx 20upx 60upx;
+		display: flex;
+		align-items: center;
+	}
+
+	.indexBar .indexBar-box {
+		width: 40upx;
+		height: auto;
+		background: #fff;
+		display: flex;
+		flex-direction: column;
+		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
+		border-radius: 5px;
+	}
+
+	.indexBar-item {
+		flex: 1;
+		width: 40upx;
+		height: 40upx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 24upx;
+		color: #888;
+	}
+
+	movable-view.indexBar-item {
+		width: 40upx;
+		height: 40upx;
+		z-index: 9;
+		position: relative;
+	}
+
+	movable-view.indexBar-item::before {
+		content: "";
+		display: block;
+		position: absolute;
+		left: 0;
+		top: 10upx;
+		height: 20upx;
+		width: 4upx;
+		background-color: #f37b1d;
+	}
+
+	.indexToast {
+		position: fixed;
+		top: 0;
+		right: 80upx;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.5);
+		width: 100upx;
+		height: 100upx;
+		border-radius: 10upx;
+		margin: auto;
+		color: #fff;
+		line-height: 100upx;
+		text-align: center;
+		font-size: 48upx;
+	}
+</style>
diff --git a/Colorui-UniApp/pages/plugin/verticalnav.vue b/Colorui-UniApp/pages/plugin/verticalnav.vue
new file mode 100644
index 0000000..8635f3c
--- /dev/null
+++ b/Colorui-UniApp/pages/plugin/verticalnav.vue
@@ -0,0 +1,223 @@
+<template>
+	<view>
+		<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">
+			<swiper-item v-for="(item,index) in 4" :key="index">
+				<image :src="'https://ossweb-img.qq.com/images/lol/web201310/skin/big3900'+index+ '.jpg'" mode="aspectFill"></image>
+			</swiper-item>
+		</swiper>
+		<view class="VerticalBox">
+			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh - 375upx)">
+				<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in list" :key="index" @tap="TabSelect"
+				 :data-id="index">
+					Tab-{{item.name}}
+				</view>
+			</scroll-view>
+			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375rpx)"
+			 :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
+				<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>
+					</view>
+					<view class="cu-list menu-avatar">
+						<view class="cu-item">
+							<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
+							<view class="content">
+								<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> </view>
+							</view>
+							<view class="action">
+								<view class="text-grey text-xs">22:20</view>
+								<view class="cu-tag round bg-grey sm">5</view>
+							</view>
+						</view>
+						<view class="cu-item">
+							<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);">
+								<view class="cu-tag badge">99+</view>
+							</view>
+							<view class="content">
+								<view class="text-grey">
+									<text class="text-cut">瓦洛兰之盾-塔里克</text>
+									<view class="cu-tag round bg-orange sm">战士</view>
+								</view>
+								<view class="text-gray text-sm flex">
+									<text class="text-cut">
+										塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。
+									</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>
+						</view>
+						<view class="cu-item ">
+							<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
+							<view class="content">
+								<view class="text-pink"><text class="text-cut">莫甘娜</text></view>
+								<view class="text-gray text-sm flex"> <text class="text-cut">凯尔，你被自己的光芒变的盲目！</text></view>
+							</view>
+							<view class="action">
+								<view class="text-grey text-xs">22:20</view>
+								<view class="cu-tag round bg-red sm">5</view>
+							</view>
+						</view>
+						<view class="cu-item grayscale">
+							<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
+							<view class="content">
+								<view><text class="text-cut">伊泽瑞尔</text>
+									<view class="cu-tag round bg-orange sm">断开连接...</view>
+								</view>
+								<view class="text-gray text-sm flex"> <text class="text-cut"> 等我回来一个打十个</text></view>
+							</view>
+							<view class="action">
+								<view class="text-grey text-xs">22:20</view>
+								<view class="cu-tag round bg-red sm">5</view>
+							</view>
+						</view>
+						<view class="cu-item cur">
+							<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);">
+								<view class="cu-tag badge"></view>
+							</view>
+							<view class="content">
+								<view>
+									<text class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</text>
+									<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>
+							</view>
+							<view class="action">
+								<view class="text-grey text-xs">22:20</view>
+								<view class="icon-notice_forbid_fill text-gray"></view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [],
+				tabCur: 0,
+				mainCur: 0,
+				verticalNavTop: 0,
+				load: true
+			};
+		},
+		onLoad() {
+			uni.showLoading({
+				title: '加载中...',
+				mask: true
+			});
+			let list = [{}];
+			for (let i = 0; i < 26; i++) {
+				list[i] = {};
+				list[i].name = String.fromCharCode(65 + i);
+				list[i].id = i;
+			}
+			this.list = list;
+			this.listCur = list[0];
+		},
+		onReady() {
+			uni.hideLoading()
+		},
+		methods: {
+			TabSelect(e) {
+				this.tabCur = e.currentTarget.dataset.id;
+				this.mainCur = e.currentTarget.dataset.id;
+				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
+			},
+			VerticalMain(e) {
+				let that = this;
+				let tabHeight = 0;
+				if (this.load) {
+					for (let i = 0; i < this.list.length; i++) {
+						let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
+						view.fields({
+							size: true
+						}, data => {
+							this.list[i].top = tabHeight;
+							tabHeight = tabHeight + data.height;
+							this.list[i].bottom = tabHeight;
+						}).exec();
+					}
+					this.load = false
+				}
+				let scrollTop = e.detail.scrollTop + 10;
+				for (let i = 0; i < this.list.length; i++) {
+					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
+						this.verticalNavTop = (this.list[i].id - 1) * 50
+						this.tabCur = this.list[i].id
+						console.log(scrollTop)
+						return false
+					}
+				}
+			}
+		},
+	}
+</script>
+
+<style>
+	.fixed {
+		position: fixed;
+		z-index: 99;
+	}
+
+	.VerticalNav.nav {
+		width: 200upx;
+		white-space: initial;
+	}
+
+	.VerticalNav.nav .cu-item {
+		width: 100%;
+		text-align: center;
+		background-color: #fff;
+		margin: 0;
+		border: none;
+		height: 50px;
+		position: relative;
+	}
+
+	.VerticalNav.nav .cu-item.cur {
+		background-color: #f1f1f1;
+	}
+
+	.VerticalNav.nav .cu-item.cur::after {
+		content: "";
+		width: 8upx;
+		height: 30upx;
+		border-radius: 10upx 0 0 10upx;
+		position: absolute;
+		background-color: currentColor;
+		top: 0;
+		right: 0upx;
+		bottom: 0;
+		margin: auto;
+	}
+
+	.VerticalBox {
+		display: flex;
+	}
+
+	.VerticalMain {
+		background-color: #f1f1f1;
+	}
+</style>
diff --git a/Colorui-UniApp/static/cjkz.png b/Colorui-UniApp/static/cjkz.png
new file mode 100644
index 0000000..ec9eb2a
Binary files /dev/null and b/Colorui-UniApp/static/cjkz.png differ