更新

Colorui-UniApp/App.vue

@@ -0,0 +1,256 @@
+<script>
+	import Vue from 'vue'
+	export default {
+		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 || MP-QQ
+					Vue.prototype.StatusBar = e.statusBarHeight;
+					let capsule = wx.getMenuButtonBoundingClientRect();
+					if (capsule) {
+						Vue.prototype.Custom = capsule;
+						// Vue.prototype.capsuleSafe = uni.upx2px(750) - capsule.left + uni.upx2px(750) - capsule.right;
+						Vue.prototype.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
+					} else {
+						Vue.prototype.CustomBar = e.statusBarHeight + 50;
+					}
+					// #endif		
+	
+
+					// #ifdef MP-ALIPAY
+					Vue.prototype.StatusBar = e.statusBarHeight;
+					Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
+					// #endif
+				}
+			})
+
+			Vue.prototype.ColorList = [{
+					title: '嫣红',
+					name: 'red',
+					color: '#e54d42'
+				},
+				{
+					title: '桔橙',
+					name: 'orange',
+					color: '#f37b1d'
+				},
+				{
+					title: '明黄',
+					name: 'yellow',
+					color: '#fbbd08'
+				},
+				{
+					title: '橄榄',
+					name: 'olive',
+					color: '#8dc63f'
+				},
+				{
+					title: '森绿',
+					name: 'green',
+					color: '#39b54a'
+				},
+				{
+					title: '天青',
+					name: 'cyan',
+					color: '#1cbbb4'
+				},
+				{
+					title: '海蓝',
+					name: 'blue',
+					color: '#0081ff'
+				},
+				{
+					title: '姹紫',
+					name: 'purple',
+					color: '#6739b6'
+				},
+				{
+					title: '木槿',
+					name: 'mauve',
+					color: '#9c26b0'
+				},
+				{
+					title: '桃粉',
+					name: 'pink',
+					color: '#e03997'
+				},
+				{
+					title: '棕褐',
+					name: 'brown',
+					color: '#a5673f'
+				},
+				{
+					title: '玄灰',
+					name: 'grey',
+					color: '#8799a3'
+				},
+				{
+					title: '草灰',
+					name: 'gray',
+					color: '#aaaaaa'
+				},
+				{
+					title: '墨黑',
+					name: 'black',
+					color: '#333333'
+				},
+				{
+					title: '雅白',
+					name: 'white',
+					color: '#ffffff'
+				},
+			]
+
+		},
+		onShow: function() {
+			console.log('App Show')
+		},
+		onHide: function() {
+			console.log('App Hide')
+		}
+
+	}
+</script>
+
+<style>
+	@import "colorui/main.css";
+	@import "colorui/icon.css";
+
+	.nav-list {
+		display: flex;
+		flex-wrap: wrap;
+		padding: 0px 40upx 0px;
+		justify-content: space-between;
+	}
+
+	.nav-li {
+		padding: 30upx;
+		border-radius: 12upx;
+		width: 45%;
+		margin: 0 2.5% 40upx;
+		background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);
+		background-size: cover;
+		background-position: center;
+		position: relative;
+		z-index: 1;
+	}
+
+	.nav-li::after {
+		content: "";
+		position: absolute;
+		z-index: -1;
+		background-color: inherit;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		bottom: -10%;
+		border-radius: 10upx;
+		opacity: 0.2;
+		transform: scale(0.9, 0.9);
+	}
+
+	.nav-li.cur {
+		color: #fff;
+		background: rgb(94, 185, 94);
+		box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
+	}
+
+	.nav-title {
+		font-size: 32upx;
+		font-weight: 300;
+	}
+
+	.nav-title::first-letter {
+		font-size: 40upx;
+		margin-right: 4upx;
+	}
+
+	.nav-name {
+		font-size: 28upx;
+		text-transform: Capitalize;
+		margin-top: 20upx;
+		position: relative;
+	}
+
+	.nav-name::before {
+		content: "";
+		position: absolute;
+		display: block;
+		width: 40upx;
+		height: 6upx;
+		background: #fff;
+		bottom: 0;
+		right: 0;
+		opacity: 0.5;
+	}
+
+	.nav-name::after {
+		content: "";
+		position: absolute;
+		display: block;
+		width: 100upx;
+		height: 1px;
+		background: #fff;
+		bottom: 0;
+		right: 40upx;
+		opacity: 0.3;
+	}
+
+	.nav-name::first-letter {
+		font-weight: bold;
+		font-size: 36upx;
+		margin-right: 1px;
+	}
+
+	.nav-li text {
+		position: absolute;
+		right: 30upx;
+		top: 30upx;
+		font-size: 52upx;
+		width: 60upx;
+		height: 60upx;
+		text-align: center;
+		line-height: 60upx;
+	}
+
+	.text-light {
+		font-weight: 300;
+	}
+
+	@keyframes show {
+		0% {
+			transform: translateY(-50px);
+		}
+
+		60% {
+			transform: translateY(40upx);
+		}
+
+		100% {
+			transform: translateY(0px);
+		}
+	}
+
+	@-webkit-keyframes show {
+		0% {
+			transform: translateY(-50px);
+		}
+
+		60% {
+			transform: translateY(40upx);
+		}
+
+		100% {
+			transform: translateY(0px);
+		}
+	}
+</style>

Colorui-UniApp/Readme.md

@@ -0,0 +1,144 @@
+<p style="text-align: center;"><img src="https://image.weilanwl.com/uni/UniAppReadme.jpg" alt="ColorUI简介"></img></p>
+
+## 前言
+ColorUI是一个css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作我也有简单写，可以为你开发提供一些思路。插件市场版本如果和更新日志不一样，请移步Github下载。有组件需求或者Bug提交也可以移步到issues。
+
+## 交流
+微信群：加入微信群请先添加开发者微信，备注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素材供开发使用哦！
+[语雀-ColorUI群资源](https://www.yuque.com/colorui)
+ 
+## 开始使用
+下载源码解压，复制根目录的 `/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    | 右侧区域(小程序端可使用范围很窄！)  | 
+
+
+------
+
+
+## 使用自定义Tabbar
+这部分暂时没有封装，思路可以参考下我的源码，原理是一个主页面引入多个页面，在主页面进行切换显示。这样可以解决切换时闪烁的问题。
+
+
+------
+
+
+## 更新日志
+
+ * 2019年4月25日 v2.1.6
+    *  删除var变量 向下兼容安卓APP
+	*  优化单选等表单控件
+
+ * 2019年4月25日 v2.1.5
+    *  优化图片上传
+    *  优化一些点击区域过小
+    *  优化图标旋转
+    *  优化demo显示
+    *  优化阴影
+    *  修复支付宝小程序编译出错
+
+ * 2019年4月14日 v2.1.4
+    *  新增多种阴影
+	*  修复一些var属性的错误
+	*  修复轮播图控制点隐藏不了
+	*  修改图标类名
+	*  修复表单组件里上传图片 ios没有图片显示问题
+
+ 
+ * 2019年4月01日 v2.1.3
+    *  优化代码,支持支付宝小程序
+	*  textarea 样式还原
+
+ * 2019年3月28日 v2.1.2
+	*  修复列表组件样式
+	*  优化主样式代码
+
+ * 2019年3月27日 v2.1.1
+    *  新增多种扩展
+    *  优化堆叠轮播图
+    *  优化消息列表
+	*  优化导航栏的封装
+	*  修复卡片评论错位(3月27日16:32:17)
+
+* 2019年3月25日 v2.1.0
+    *  完成元素，组件移植
+	*  icon文件更改名称，避免图标冲突
+	*  针对不同端口做了优化

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)
+    }
+}

Colorui-UniApp/colorui/components/cu-custom.vue

@@ -0,0 +1,69 @@
+<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="cuIcon-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() {
+				if (getCurrentPages().length < 2 && 'undefined' !== typeof __wxConfig) {
+					let url = '/' + __wxConfig.pages[0]
+					return uni.redirectTo({url})
+				}
+				uni.navigateBack({
+					delta: 1
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

Colorui-UniApp/main.js

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import App from './App'
+
+import basics from './pages/basics/home.vue'
+Vue.component('basics',basics)
+
+import components from './pages/component/home.vue'
+Vue.component('components',components)
+
+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
+
+App.mpType = 'app'
+
+const app = new Vue({
+    ...App
+})
+app.$mount()
+
+ 
+
+
+

Colorui-UniApp/manifest.json

@@ -0,0 +1,61 @@
+{
+    "name" : "ColorUi for UniApp",
+    "appid" : "",
+    "description" : "",
+    "versionName" : "ColorUi for UniApp 2.1.4",
+    "versionCode" : 214,
+    "transformPx" : false,
+    "app-plus" : {
+        /* 5+App特有相关 */
+        "modules" : {},
+        /* 模块配置 */
+        "distribute" : {
+            /* 应用发布信息 */
+            "android" : {
+                /* android打包配置 */
+                "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            "ios" : {},
+            /* ios打包配置 */
+            "sdkConfigs" : {}
+        }
+    },
+    /* SDK配置 */
+    "quickapp" : {},
+    /* 快应用特有相关 */
+    "mp-weixin" : {
+        /* 小程序特有相关 */
+        "appid" : "",
+        "setting" : {
+            "urlCheck" : false,
+            "es6" : true
+        }
+    },
+    "h5" : {
+        "title" : "ColorUi for UniApp",
+        "domain" : "demo.color-ui.com"
+    }
+}

Colorui-UniApp/node_modules/.bin/prettier

@@ -0,0 +1,15 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  "$basedir/node"  "$basedir/../prettier/bin-prettier.js" "$@"
+  ret=$?
+else 
+  node  "$basedir/../prettier/bin-prettier.js" "$@"
+  ret=$?
+fi
+exit $ret

Colorui-UniApp/node_modules/.bin/prettier.cmd

@@ -0,0 +1,7 @@
+@IF EXIST "%~dp0\node.exe" (
+  "%~dp0\node.exe"  "%~dp0\..\prettier\bin-prettier.js" %*
+) ELSE (
+  @SETLOCAL
+  @SET PATHEXT=%PATHEXT:;.JS;=;%
+  node  "%~dp0\..\prettier\bin-prettier.js" %*
+)

Colorui-UniApp/node_modules/prettier/README.md

@@ -0,0 +1,96 @@
+![Prettier Banner](https://raw.githubusercontent.com/prettier/prettier-logo/master/images/prettier-banner-light.png)
+
+<h2 align="center">Opinionated Code Formatter</h2>
+
+<p align="center">
+  <em>
+  JavaScript
+  · Flow
+  · TypeScript
+  · CSS
+  · SCSS
+  · Less
+  · JSX
+  · Vue
+  · GraphQL
+  · JSON
+  · Markdown
+  · <a href="https://prettier.io/docs/en/plugins.html">
+      Your favorite language?
+    </a>
+  </em>
+</p>
+
+<p align="center">
+  <a href="https://gitter.im/jlongster/prettier">
+    <img alt="Gitter" src="https://img.shields.io/gitter/room/jlongster/prettier.svg?style=flat-square">
+  </a>
+  <a href="https://travis-ci.org/prettier/prettier">
+    <img alt="Travis" src="https://img.shields.io/travis/prettier/prettier/master.svg?style=flat-square">
+  </a>
+  <a href="https://codecov.io/gh/prettier/prettier">
+    <img alt="Codecov" src="https://img.shields.io/codecov/c/github/prettier/prettier.svg?style=flat-square">
+  </a>
+  <a href="https://www.npmjs.com/package/prettier">
+    <img alt="npm version" src="https://img.shields.io/npm/v/prettier.svg?style=flat-square">
+  </a>
+  <a href="https://www.npmjs.com/package/prettier">
+    <img alt="monthly downloads" src="https://img.shields.io/npm/dm/prettier.svg?style=flat-square">
+  </a>
+  <a href="#badge">
+    <img alt="code style: prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square">
+  </a>
+  <a href="https://twitter.com/PrettierCode">
+    <img alt="Follow+Prettier+on+Twitter" src="https://img.shields.io/twitter/follow/prettiercode.svg?label=follow+prettier&style=flat-square">
+  </a>
+</p>
+
+## Intro
+
+Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
+
+### Input
+
+<!-- prettier-ignore -->
+```js
+foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
+```
+
+### Output
+
+```js
+foo(
+  reallyLongArg(),
+  omgSoManyParameters(),
+  IShouldRefactorThis(),
+  isThereSeriouslyAnotherOne()
+);
+```
+
+Prettier can be run [in your editor](http://prettier.io/docs/en/editors.html) on-save, in a [pre-commit hook](https://prettier.io/docs/en/precommit.html), or in [CI environments](https://prettier.io/docs/en/cli.html#list-different) to ensure your codebase has a consistent style without devs ever having to post a nit-picky comment on a code review ever again!
+
+---
+
+**[Documentation](https://prettier.io/docs/en/)**
+
+<!-- prettier-ignore -->
+[Install](https://prettier.io/docs/en/install.html) ·
+[Options](https://prettier.io/docs/en/options.html) ·
+[CLI](https://prettier.io/docs/en/cli.html) ·
+[API](https://prettier.io/docs/en/api.html)
+
+**[Playground](https://prettier.io/playground/)**
+
+---
+
+## Badge
+
+Show the world you're using _Prettier_ → [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+
+```md
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+```
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md).

Colorui-UniApp/node_modules/prettier/package.json

@@ -0,0 +1,86 @@
+{
+  "_from": "prettier@~1.12.0",
+  "_id": "prettier@1.12.1",
+  "_inBundle": false,
+  "_integrity": "sha1-wa0g6APndJ+vkFpAnSNn4Gu+cyU=",
+  "_location": "/prettier",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "range",
+    "registry": true,
+    "raw": "prettier@~1.12.0",
+    "name": "prettier",
+    "escapedName": "prettier",
+    "rawSpec": "~1.12.0",
+    "saveSpec": null,
+    "fetchSpec": "~1.12.0"
+  },
+  "_requiredBy": [
+    "#USER",
+    "/"
+  ],
+  "_resolved": "http://registry.npm.taobao.org/prettier/download/prettier-1.12.1.tgz",
+  "_shasum": "c1ad20e803e7749faf905a409d2367e06bbe7325",
+  "_spec": "prettier@~1.12.0",
+  "_where": "E:\\weilanwlSVN\\colorui\\github\\ColorUI\\Colorui-UniApp",
+  "author": {
+    "name": "James Long"
+  },
+  "bin": {
+    "prettier": "./bin-prettier.js"
+  },
+  "bugs": {
+    "url": "https://github.com/prettier/prettier/issues"
+  },
+  "bundleDependencies": false,
+  "deprecated": false,
+  "description": "Prettier is an opinionated code formatter",
+  "devDependencies": {
+    "babel-cli": "6.24.1",
+    "babel-preset-es2015": "6.24.1",
+    "codecov": "2.2.0",
+    "cross-env": "5.0.5",
+    "eslint": "4.18.2",
+    "eslint-config-prettier": "2.9.0",
+    "eslint-friendly-formatter": "3.0.0",
+    "eslint-plugin-import": "2.9.0",
+    "eslint-plugin-prettier": "2.6.0",
+    "eslint-plugin-react": "7.7.0",
+    "jest": "21.1.0",
+    "mkdirp": "0.5.1",
+    "prettier": "1.12.0",
+    "prettylint": "1.0.0",
+    "rimraf": "2.6.2",
+    "rollup": "0.47.6",
+    "rollup-plugin-commonjs": "8.2.6",
+    "rollup-plugin-json": "2.1.1",
+    "rollup-plugin-node-builtins": "2.0.0",
+    "rollup-plugin-node-globals": "1.1.0",
+    "rollup-plugin-node-resolve": "2.0.0",
+    "rollup-plugin-replace": "1.2.1",
+    "shelljs": "0.8.1",
+    "snapshot-diff": "0.2.2",
+    "strip-ansi": "4.0.0",
+    "tempy": "0.2.1",
+    "uglify-es": "3.3.9",
+    "webpack": "2.6.1"
+  },
+  "engines": {
+    "node": ">=4"
+  },
+  "files": [
+    "*.js"
+  ],
+  "homepage": "https://prettier.io",
+  "license": "MIT",
+  "main": "./index.js",
+  "name": "prettier",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/prettier/prettier.git"
+  },
+  "scripts": {
+    "prepublishOnly": "node -e \"assert.equal(require('.').version, require('..').version)\""
+  },
+  "version": "1.12.1"
+}

Colorui-UniApp/package-lock.json

@@ -0,0 +1,11 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "prettier": {
+      "version": "1.12.1",
+      "resolved": "http://registry.npm.taobao.org/prettier/download/prettier-1.12.1.tgz",
+      "integrity": "sha1-wa0g6APndJ+vkFpAnSNn4Gu+cyU="
+    }
+  }
+}

Colorui-UniApp/pages.json

@@ -0,0 +1,127 @@
+{
+	"pages": [
+		//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/index/index",
+			"style": {}
+		},
+		{
+			"path": "pages/basics/layout",
+			"style": {}
+		},
+		{
+			"path": "pages/basics/background",
+			"style": {}
+		},
+		{
+			"path": "pages/basics/text",
+			"style": {}
+		},
+		{
+			"path": "pages/basics/icon",
+			"style": {}
+		},
+		{
+			"path": "pages/basics/button",
+			"style": {}
+		},
+		{
+			"path": "pages/basics/design",
+			"style": {}
+		},
+		{
+			"path": "pages/basics/tag",
+			"style": {}
+		},
+		{
+			"path": "pages/basics/avatar",
+			"style": {}
+		},
+		{
+			"path": "pages/basics/progress",
+			"style": {}
+		},
+		{
+			"path": "pages/basics/shadow",
+			"style": {}
+		},
+		{
+			"path": "pages/basics/loading",
+			"style": {}
+		},
+		{
+			"path": "pages/component/bar",
+			"style": {}
+		},
+		{
+			"path": "pages/component/nav",
+			"style": {}
+		},
+		{
+			"path": "pages/component/list",
+			"style": {}
+		},
+		{
+			"path": "pages/component/card",
+			"style": {}
+		},
+		{
+			"path": "pages/component/form",
+			"style": {}
+		},
+		{
+			"path": "pages/component/timeline",
+			"style": {}
+		},
+		{
+			"path": "pages/component/chat",
+			"style": {}
+		},
+		{
+			"path": "pages/component/swiper",
+			"style": {}
+		},
+		{
+			"path": "pages/component/modal",
+			"style": {}
+		},
+		{
+			"path": "pages/component/steps",
+			"style": {}
+		}, {
+			"path": "pages/plugin/indexes",
+			"style": {}
+		}, {
+			"path": "pages/plugin/animation",
+			"style": {}
+		}, {
+			"path": "pages/plugin/drawer",
+			"style": {}
+		}, {
+			"path": "pages/plugin/verticalnav",
+			"style": {}
+		}
+	],
+	"globalStyle": {
+		"mp-alipay": {
+			/* 支付宝小程序特有相关 */
+			"transparentTitle": "always",
+			"allowsBounceVertical": "NO"
+		},
+		"navigationBarBackgroundColor": "#0081ff",
+		"navigationBarTitleText": "ColorUi for UniApp",
+		"navigationStyle": "custom",
+		"navigationBarTextStyle": "white"
+	},
+	"usingComponts": true,
+		"condition": { //模式配置，仅开发期间生效
+		"current": 0, //当前激活的模式(list 的索引项)
+		"list": [{
+				"name": "表单", //模式名称
+				"path": "pages/component/form", //启动页面
+				"query": "" //启动参数
+			}
+		]
+	}
+
+}

Colorui-UniApp/pages/basics/avatar.vue

@@ -0,0 +1,108 @@
+<template>
+	<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">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>头像形状
+			</view>
+		</view>
+		<view class="padding">
+			<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)"></view>
+			<view class="cu-avatar radius margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
+		</view>
+		<view class="cu-bar bg-white margin-top">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>头像尺寸
+			</view>
+		</view>
+		<view class="padding">
+			<view class="cu-avatar sm round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)"></view>
+			<view class="cu-avatar round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
+			<view class="cu-avatar lg round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
+			<view class="cu-avatar xl round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg);"></view>
+		</view>
+		<view class="padding">
+			<view class="cu-avatar sm round margin-left bg-red"> A</view>
+			<view class="cu-avatar round margin-left bg-red">B</view>
+			<view class="cu-avatar lg round margin-left bg-red">C</view>
+			<view class="cu-avatar xl round margin-left bg-red">D</view>
+		</view>
+		<view class="padding">
+			<view class="cu-avatar sm round margin-left bg-red"> 蔚</view>
+			<view class="cu-avatar round margin-left bg-red">蓝</view>
+			<view class="cu-avatar lg round margin-left bg-red">
+				<text>wl</text>
+			</view>
+			<view class="cu-avatar xl round margin-left bg-red">
+				<text class="avatar-text">网络</text>
+			</view>
+		</view>
+		<view class="cu-bar bg-white margin-top">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>内嵌文字(图标)
+			</view>
+		</view>
+		<view class="padding">
+			<view class="cu-avatar radius">
+				<text class="cuIcon-people"></text>
+			</view>
+			<view class="cu-avatar radius margin-left">
+				<text>港</text>
+			</view>
+		</view>
+
+		<view class="cu-bar bg-white margin-top">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>头像颜色
+			</view>
+		</view>
+		<view class="padding-sm">
+			<view class="cu-avatar round lg margin-xs" :class="'bg-' + item.name" v-for="(item,index) in ColorList" :key="index">
+				<text class="avatar-text">{{item.name}}</text>
+			</view>
+		</view>
+		<view class="cu-bar bg-white margin-top">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>头像组
+			</view>
+		</view>
+		<view class="padding">
+			<view class="cu-avatar-group">
+				<view class="cu-avatar round lg" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
+			</view>
+		</view>
+
+		<view class="cu-bar bg-white margin-top">
+			<view class="action">
+				<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?'cuIcon-female bg-pink':'cuIcon-male bg-blue'"></view>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				ColorList: this.ColorList,
+				avatar: [
+					'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
+					'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
+					'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
+					'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg'
+				],
+
+			};
+		}
+	}
+</script>
+
+<style>
+
+</style>

Colorui-UniApp/pages/basics/background.vue

@@ -0,0 +1,141 @@
+<template>
+	<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='cuIcon-title text-blue'></text>深色背景
+			</view>
+		</view>
+		<view class="grid col-3 padding-sm">
+			<view class="padding-sm" v-for="(item,index) in ColorList" :key="index">
+				<view class="padding radius text-center shadow-blur" :class="'bg-' + item.name">
+					<view class="text-lg">{{item.title}}</view>
+					<view class="margin-top-sm text-Abc">{{item.name}}</view>
+				</view>
+			</view>
+		</view>
+		<view class="cu-bar bg-white solid-bottom">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>淡色背景
+			</view>
+		</view>
+		<view class="grid col-3 bg-white padding-sm">
+			<view class="padding-sm" v-for="(item,index) in ColorList" :key="index" v-if="index<12">
+				<view class="padding radius text-center light" :class="'bg-' + item.name">
+					<view class="text-lg">{{item.title}}</view>
+					<view class="margin-top-sm text-Abc">{{item.name}}</view>
+				</view>
+			</view>
+		</view>
+		<view class="cu-bar bg-white solid-bottom margin-top">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>渐变背景
+			</view>
+		</view>
+		<view class="grid col-2 padding-sm">
+			<view class="padding-sm">
+				<view class="bg-gradual-red padding radius text-center shadow-blur">
+					<view class="text-lg">魅红</view>
+					<view class="margin-top-sm text-Abc">#f43f3b - #ec008c</view>
+				</view>
+			</view>
+			<view class="padding-sm">
+				<view class="bg-gradual-orange padding radius text-center shadow-blur">
+					<view class="text-lg">鎏金</view>
+					<view class="margin-top-sm text-Abc">#ff9700 - #ed1c24</view>
+				</view>
+			</view>
+			<view class="padding-sm">
+				<view class="bg-gradual-green padding radius text-center shadow-blur">
+					<view class="text-lg">翠柳</view>
+					<view class="margin-top-sm text-Abc">#39b54a - #8dc63f</view>
+				</view>
+			</view>
+			<view class="padding-sm">
+				<view class="bg-gradual-blue padding radius text-center shadow-blur">
+					<view class="text-lg">靛青</view>
+					<view class="margin-top-sm text-Abc">#0081ff - #1cbbb4</view>
+				</view>
+			</view>
+			<view class="padding-sm">
+				<view class="bg-gradual-purple padding radius text-center shadow-blur">
+					<view class="text-lg">惑紫</view>
+					<view class="margin-top-sm text-Abc">#9000ff - #5e00ff</view>
+				</view>
+			</view>
+			<view class="padding-sm">
+				<view class="bg-gradual-pink padding radius text-center shadow-blur">
+					<view class="text-lg">霞彩</view>
+					<view class="margin-top-sm text-Abc">#ec008c - #6739b6</view>
+				</view>
+			</view>
+		</view>
+		<view class="cu-bar bg-white margin-top">
+			<view class="action">
+				<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;">
+			<view class="padding-xl text-white">
+				<view class="padding-xs text-xxl text-bold">
+					钢铁之翼
+				</view>
+				<view class="padding-xs text-lg">
+					Only the guilty need fear me.
+				</view>
+			</view>
+		</view>
+<!-- 		<view class="cu-bar bg-white margin-top">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>视频背景
+			</view>
+		</view>
+		<view class="bg-video bg-mask flex align-center" style="height: 422upx;">
+			<video src="https://yz.lol.qq.com/v1/assets/videos/aatrox-splashvideo.webm" autoplay loop muted :show-play-btn="false"
+			 :controls="false" objectFit="cover"></video>
+			<cover-view class="padding-xl text-white ">
+				<cover-view class="padding-xs  text-xxl text-bold">
+					暗裔剑魔
+				</cover-view>
+				<cover-view class="padding-xs">
+					我必须连同希望一起毁坏……
+				</cover-view>
+			</cover-view>
+		</view> -->
+		
+		<view class="cu-bar bg-white margin-top">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>透明背景(文字层)
+			</view>
+		</view>
+		<view class="grid col-2">
+			<view class="bg-img padding-bottom-xl" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10007.jpg');height: 207upx;">
+				<view class="bg-shadeTop padding padding-bottom-xl">
+					上面开始
+				</view>
+			</view>
+			<view class="bg-img padding-top-xl flex align-end" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg');height: 207upx;">
+				<view class="bg-shadeBottom padding padding-top-xl flex-sub">
+					下面开始
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				ColorList: this.ColorList,
+			};
+		}
+	}
+</script>
+
+<style>
+
+</style>

Colorui-UniApp/pages/basics/button.vue

@@ -0,0 +1,123 @@
+<template>
+	<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="cuIcon-title text-blue"></text>按钮形状
+			</view>
+			<view class="action">
+				<navigator class="action" url="design" hover-class="none">
+					<text class="cuIcon-skinfill"></text>
+					<text class="text-df">设计</text>
+				</navigator>
+			</view>
+		</view>
+		<view class="padding flex flex-wrap justify-between align-center bg-white">
+			<button class="cu-btn">默认</button>
+			<button class="cu-btn round">圆角</button>
+			<button class="cu-btn cuIcon">
+				<text class="cuIcon-emojifill"></text>
+			</button>
+		</view>
+		<view class="cu-bar margin-top bg-white solid-bottom">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>按钮尺寸
+			</view>
+		</view>
+		<view class="padding flex flex-wrap justify-between align-center bg-white">
+			<button class="cu-btn round sm">小尺寸</button>
+			<button class="cu-btn round">默认</button>
+			<button class="cu-btn round lg">大尺寸</button>
+		</view>
+		<view class="cu-bar margin-top bg-white">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>按钮颜色
+			</view>
+			<view class="action">
+				<text class="text-df margin-right-sm">阴影</text>
+				<switch @change="SetShadow" :class="shadow?'checked':''" color="#39B54A"></switch>
+			</view>
+		</view>
+		<view class="grid col-5 padding-sm">
+			<view class="margin-tb-sm text-center" v-for="(item,index) in ColorList" :key="index">
+				<button class="cu-btn round" :class="['bg-' + item.name , shadow?'shadow':'']">{{item.title}}</button>
+			</view>
+		</view>
+		<view class="cu-bar margin-top bg-white">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>镂空按钮
+			</view>
+			<view class="action">
+				<radio-group @change="SetBorderSize">
+					<label class="margin-left-sm">
+						<radio class="blue radio" value="" checked></radio>
+						<text class="margin-left-sm">小</text>
+					</label>
+					<label class="margin-left-sm">
+						<radio class="blue radio" value="s"></radio>
+						<text class="margin-left-sm">大</text>
+					</label>
+				</radio-group>
+			</view>
+		</view>
+		<view class="grid col-5 padding-sm">
+			<view class="margin-tb-sm text-center" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='white'">
+				<button class="cu-btn round" :class="[bordersize?'lines-' + item.name:'line-' + item.name, shadow?'shadow':'']">{{item.title}}</button>
+			</view>
+		</view>
+		<view class="cu-bar margin-top bg-white">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>块状按钮
+			</view>
+		</view>
+		<view class="padding flex flex-direction">
+			<button class="cu-btn bg-grey lg">玄灰</button>
+			<button class="cu-btn bg-red margin-tb-sm lg">嫣红</button>
+		</view>
+		<view class="cu-bar margin-top bg-white">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>无效状态
+			</view>
+		</view>
+		<view class="padding">
+			<button class="cu-btn block bg-blue margin-tb-sm lg" disabled type="">无效状态</button>
+			<button class="cu-btn block line-blue margin-tb-sm lg" disabled>无效状态</button>
+		</view>
+		<view class="cu-bar margin-top bg-white">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>按钮加图标
+			</view>
+		</view>
+		<view class="padding-xl">
+			<button class="cu-btn block line-orange lg">
+				<text class="cuIcon-upload"></text> 图标</button>
+			<button class="cu-btn block bg-blue margin-tb-sm lg">
+				<text class="cuIcon-loading2 cuIconfont-spin"></text> 加载</button>
+			<button class="cu-btn block bg-black margin-tb-sm lg" loading> 原生加载</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				ColorList: this.ColorList,
+				shadow: false,
+				bordersize: ''
+			};
+		},
+		methods: {
+			SetShadow(e) {
+				this.shadow = e.detail.value
+			},
+			SetBorderSize(e) {
+				this.bordersize = e.detail.value
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

Colorui-UniApp/pages/basics/design.vue

@@ -0,0 +1,130 @@
+<template>
+	<view>
+		<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>
+			</view>
+			<view class="padding text-center">
+				class="cu-btn <text v-if="color">{{' '}} {{border?bordersize?'lines-' + color:'line-' + color:'bg-'+ color}} {{round?'round':''}} {{size}} {{shadow?'shadow':''}}</text>"
+			</view>
+		</view>
+		<view class="cu-form-group margin-top" @tap="showModal" data-target="ColorModal">
+			<view class="title">选择颜色</view>
+			<view class="padding solid radius shadow-blur" :class="'bg-'+color"></view>
+		</view>
+		<view class="cu-form-group">
+			<view class="title">是否圆角</view>
+			<switch @change="SetRound" class="blue" :class="round?'checked':''"></switch>
+		</view>
+		<view class="cu-form-group">
+			<view class="title">选择尺寸</view>
+			<radio-group @change="SetSize">
+				<label class="margin-left-sm">
+					<radio class="blue radio" value="sm"></radio>
+					<text class="margin-left-sm"> 小</text>
+				</label>
+				<label class="margin-left-sm">
+					<radio class="blue radio" value="" checked></radio>
+					<text class="margin-left-sm"> 中</text>
+				</label>
+				<label class="margin-left-sm">
+					<radio class="blue radio" value="lg"></radio>
+					<text class="margin-left-sm"> 大</text>
+				</label>
+			</radio-group>
+		</view>
+		<view class="cu-form-group">
+			<view class="title">是否添加阴影</view>
+			<switch @change="SetShadow" :class="shadow?'checked':''"></switch>
+		</view>
+		<view class="cu-form-group">
+			<view class="title">是否镂空</view>
+			<switch @change="SetBorder" :class="border?'checked':''"></switch>
+		</view>
+		<view class="cu-form-group" v-if="border">
+			<view class="title">边框大小</view>
+			<radio-group @change="SetBorderSize">
+				<label class="margin-left-sm">
+					<radio class="blue radio" value="" checked></radio>
+					<text class="margin-left-sm"> 小</text>
+				</label>
+				<label class="margin-left-sm">
+					<radio class="blue radio" value="s"></radio>
+					<text class="margin-left-sm"> 大</text>
+				</label>
+			</radio-group>
+		</view>
+		<view class="cu-modal" :class="modalName=='ColorModal'?'show':''">
+			<view class="cu-dialog">
+				<view class="cu-bar justify-end solid-bottom">
+					<view class="content">选择颜色</view>
+					<view class="action" @tap="hideModal">
+						<text class="cuIcon-close text-red"></text>
+					</view>
+				</view>
+				<view class="grid col-5 padding">
+					<view class="padding-xs" v-for="(item,index) in ColorList" :key="index" @tap="SetColor" :data-color="item.name" v-if="item.name!='white'">
+						<view class="padding-tb radius" :class="'bg-' + item.name"> {{item.title}} </view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				ColorList: this.ColorList,
+				modalName: '',
+				round: false,
+				size: '',
+				color: 'red',
+				shadow: false,
+				border: false,
+				bordersize: ''
+			};
+		},
+		methods: {
+			showModal(e) {
+				this.modalName = e.currentTarget.dataset.target
+			},
+			hideModal(e) {
+				this.modalName = null
+			},
+			SetRound(e) {
+				this.round = e.detail.value
+			},
+			SetSize(e) {
+				this.size = e.detail.value
+			},
+			SetColor(e) {
+				this.color = e.currentTarget.dataset.color;
+				this.modalName = null
+			},
+			SetShadow(e) {
+				this.shadow = e.detail.value
+			},
+			SetBorder(e) {
+				this.border = e.detail.value
+				if (!e.detail.value) {
+					this.bordersize = false
+				}
+			},
+			SetBorderSize(e) {
+				this.bordersize = e.detail.value
+			}
+		}
+	}
+</script>
+
+<style>
+	.box {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100px;
+	}
+</style>

Colorui-UniApp/pages/basics/home.vue

@@ -0,0 +1,97 @@
+<template name="basics">
+	<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="'cuIcon-' + item.cuIcon"></text>
+				</navigator>
+			</view>
+			<view class="cu-tabbar-height"></view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "basics",
+		data() {
+			return {
+				elements: [{
+						title: '布局',
+						name: 'layout',
+						color: 'cyan',
+						cuIcon: 'newsfill'
+					},
+					{
+						title: '背景',
+						name: 'background',
+						color: 'blue',
+						cuIcon: 'colorlens'
+					},
+					{
+						title: '文本',
+						name: 'text',
+						color: 'purple',
+						cuIcon: 'font'
+					},
+					{
+						title: '图标 ',
+						name: 'icon',
+						color: 'mauve',
+						cuIcon: 'cuIcon'
+					},
+					{
+						title: '按钮',
+						name: 'button',
+						color: 'pink',
+						cuIcon: 'btn'
+					},
+					{
+						title: '标签',
+						name: 'tag',
+						color: 'brown',
+						cuIcon: 'tagfill'
+					},
+					{
+						title: '头像',
+						name: 'avatar',
+						color: 'red',
+						cuIcon: 'myfill'
+					},
+					{
+						title: '进度条',
+						name: 'progress',
+						color: 'orange',
+						cuIcon: 'icloading'
+					},
+					{
+						title: '边框阴影',
+						name: 'shadow',
+						color: 'olive',
+						cuIcon: 'copy'
+					},
+					{
+						title: '加载',
+						name: 'loading',
+						color: 'green',
+						cuIcon: 'loading2'
+					}
+				],
+			};
+		},
+		onShow() {
+			console.log("success")
+		}
+	}
+</script>
+
+<style>
+	.page {
+		height: 100vh;
+	}
+</style>

Colorui-UniApp/pages/basics/icon.vue

@@ -0,0 +1,939 @@
+<template>
+	<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 search fixed" :style="[{top:CustomBar + 'px'}]">
+			<view class="search-form round">
+				<text class="cuIcon-search"></text>
+				<input type="text" placeholder="搜索cuIcon" confirm-type="search" @input="searchIcon"></input>
+			</view>
+		</view>
+		<view class="cu-list grid col-3">
+			<view class="cu-item" v-for="(item,index) in cuIcon" :key="index" v-if="item.isShow">
+				<text class="lg text-gray" :class="'cuIcon-' + item.name"></text>
+				<text>{{item.name}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				CustomBar: this.CustomBar,
+				cuIcon: [{
+					name: 'appreciate',
+					isShow: true
+				}, {
+					name: 'check',
+					isShow: true
+				}, {
+					name: 'close',
+					isShow: true
+				}, {
+					name: 'edit',
+					isShow: true
+				}, {
+					name: 'emoji',
+					isShow: true
+				}, {
+					name: 'favorfill',
+					isShow: true
+				}, {
+					name: 'favor',
+					isShow: true
+				}, {
+					name: 'loading',
+					isShow: true
+				}, {
+					name: 'locationfill',
+					isShow: true
+				}, {
+					name: 'location',
+					isShow: true
+				}, {
+					name: 'phone',
+					isShow: true
+				}, {
+					name: 'roundcheckfill',
+					isShow: true
+				}, {
+					name: 'roundcheck',
+					isShow: true
+				}, {
+					name: 'roundclosefill',
+					isShow: true
+				}, {
+					name: 'roundclose',
+					isShow: true
+				}, {
+					name: 'roundrightfill',
+					isShow: true
+				}, {
+					name: 'roundright',
+					isShow: true
+				}, {
+					name: 'search',
+					isShow: true
+				}, {
+					name: 'taxi',
+					isShow: true
+				}, {
+					name: 'timefill',
+					isShow: true
+				}, {
+					name: 'time',
+					isShow: true
+				}, {
+					name: 'unfold',
+					isShow: true
+				}, {
+					name: 'warnfill',
+					isShow: true
+				}, {
+					name: 'warn',
+					isShow: true
+				}, {
+					name: 'camerafill',
+					isShow: true
+				}, {
+					name: 'camera',
+					isShow: true
+				}, {
+					name: 'commentfill',
+					isShow: true
+				}, {
+					name: 'comment',
+					isShow: true
+				}, {
+					name: 'likefill',
+					isShow: true
+				}, {
+					name: 'like',
+					isShow: true
+				}, {
+					name: 'notificationfill',
+					isShow: true
+				}, {
+					name: 'notification',
+					isShow: true
+				}, {
+					name: 'order',
+					isShow: true
+				}, {
+					name: 'samefill',
+					isShow: true
+				}, {
+					name: 'same',
+					isShow: true
+				}, {
+					name: 'deliver',
+					isShow: true
+				}, {
+					name: 'evaluate',
+					isShow: true
+				}, {
+					name: 'pay',
+					isShow: true
+				}, {
+					name: 'send',
+					isShow: true
+				}, {
+					name: 'shop',
+					isShow: true
+				}, {
+					name: 'ticket',
+					isShow: true
+				}, {
+					name: 'back',
+					isShow: true
+				}, {
+					name: 'cascades',
+					isShow: true
+				}, {
+					name: 'discover',
+					isShow: true
+				}, {
+					name: 'list',
+					isShow: true
+				}, {
+					name: 'more',
+					isShow: true
+				}, {
+					name: 'scan',
+					isShow: true
+				}, {
+					name: 'settings',
+					isShow: true
+				}, {
+					name: 'questionfill',
+					isShow: true
+				}, {
+					name: 'question',
+					isShow: true
+				}, {
+					name: 'shopfill',
+					isShow: true
+				}, {
+					name: 'form',
+					isShow: true
+				}, {
+					name: 'pic',
+					isShow: true
+				}, {
+					name: 'filter',
+					isShow: true
+				}, {
+					name: 'footprint',
+					isShow: true
+				}, {
+					name: 'top',
+					isShow: true
+				}, {
+					name: 'pulldown',
+					isShow: true
+				}, {
+					name: 'pullup',
+					isShow: true
+				}, {
+					name: 'right',
+					isShow: true
+				}, {
+					name: 'refresh',
+					isShow: true
+				}, {
+					name: 'moreandroid',
+					isShow: true
+				}, {
+					name: 'deletefill',
+					isShow: true
+				}, {
+					name: 'refund',
+					isShow: true
+				}, {
+					name: 'cart',
+					isShow: true
+				}, {
+					name: 'qrcode',
+					isShow: true
+				}, {
+					name: 'remind',
+					isShow: true
+				}, {
+					name: 'delete',
+					isShow: true
+				}, {
+					name: 'profile',
+					isShow: true
+				}, {
+					name: 'home',
+					isShow: true
+				}, {
+					name: 'cartfill',
+					isShow: true
+				}, {
+					name: 'discoverfill',
+					isShow: true
+				}, {
+					name: 'homefill',
+					isShow: true
+				}, {
+					name: 'message',
+					isShow: true
+				}, {
+					name: 'addressbook',
+					isShow: true
+				}, {
+					name: 'link',
+					isShow: true
+				}, {
+					name: 'lock',
+					isShow: true
+				}, {
+					name: 'unlock',
+					isShow: true
+				}, {
+					name: 'vip',
+					isShow: true
+				}, {
+					name: 'weibo',
+					isShow: true
+				}, {
+					name: 'activity',
+					isShow: true
+				}, {
+					name: 'friendaddfill',
+					isShow: true
+				}, {
+					name: 'friendadd',
+					isShow: true
+				}, {
+					name: 'friendfamous',
+					isShow: true
+				}, {
+					name: 'friend',
+					isShow: true
+				}, {
+					name: 'goods',
+					isShow: true
+				}, {
+					name: 'selection',
+					isShow: true
+				}, {
+					name: 'explore',
+					isShow: true
+				}, {
+					name: 'present',
+					isShow: true
+				}, {
+					name: 'squarecheckfill',
+					isShow: true
+				}, {
+					name: 'square',
+					isShow: true
+				}, {
+					name: 'squarecheck',
+					isShow: true
+				}, {
+					name: 'round',
+					isShow: true
+				}, {
+					name: 'roundaddfill',
+					isShow: true
+				}, {
+					name: 'roundadd',
+					isShow: true
+				}, {
+					name: 'add',
+					isShow: true
+				}, {
+					name: 'notificationforbidfill',
+					isShow: true
+				}, {
+					name: 'explorefill',
+					isShow: true
+				}, {
+					name: 'fold',
+					isShow: true
+				}, {
+					name: 'game',
+					isShow: true
+				}, {
+					name: 'redpacket',
+					isShow: true
+				}, {
+					name: 'selectionfill',
+					isShow: true
+				}, {
+					name: 'similar',
+					isShow: true
+				}, {
+					name: 'appreciatefill',
+					isShow: true
+				}, {
+					name: 'infofill',
+					isShow: true
+				}, {
+					name: 'info',
+					isShow: true
+				}, {
+					name: 'forwardfill',
+					isShow: true
+				}, {
+					name: 'forward',
+					isShow: true
+				}, {
+					name: 'rechargefill',
+					isShow: true
+				}, {
+					name: 'recharge',
+					isShow: true
+				}, {
+					name: 'vipcard',
+					isShow: true
+				}, {
+					name: 'voice',
+					isShow: true
+				}, {
+					name: 'voicefill',
+					isShow: true
+				}, {
+					name: 'friendfavor',
+					isShow: true
+				}, {
+					name: 'wifi',
+					isShow: true
+				}, {
+					name: 'share',
+					isShow: true
+				}, {
+					name: 'wefill',
+					isShow: true
+				}, {
+					name: 'we',
+					isShow: true
+				}, {
+					name: 'lightauto',
+					isShow: true
+				}, {
+					name: 'lightforbid',
+					isShow: true
+				}, {
+					name: 'lightfill',
+					isShow: true
+				}, {
+					name: 'camerarotate',
+					isShow: true
+				}, {
+					name: 'light',
+					isShow: true
+				}, {
+					name: 'barcode',
+					isShow: true
+				}, {
+					name: 'flashlightclose',
+					isShow: true
+				}, {
+					name: 'flashlightopen',
+					isShow: true
+				}, {
+					name: 'searchlist',
+					isShow: true
+				}, {
+					name: 'service',
+					isShow: true
+				}, {
+					name: 'sort',
+					isShow: true
+				}, {
+					name: 'down',
+					isShow: true
+				}, {
+					name: 'mobile',
+					isShow: true
+				}, {
+					name: 'mobilefill',
+					isShow: true
+				}, {
+					name: 'copy',
+					isShow: true
+				}, {
+					name: 'countdownfill',
+					isShow: true
+				}, {
+					name: 'countdown',
+					isShow: true
+				}, {
+					name: 'noticefill',
+					isShow: true
+				}, {
+					name: 'notice',
+					isShow: true
+				}, {
+					name: 'upstagefill',
+					isShow: true
+				}, {
+					name: 'upstage',
+					isShow: true
+				}, {
+					name: 'babyfill',
+					isShow: true
+				}, {
+					name: 'baby',
+					isShow: true
+				}, {
+					name: 'brandfill',
+					isShow: true
+				}, {
+					name: 'brand',
+					isShow: true
+				}, {
+					name: 'choicenessfill',
+					isShow: true
+				}, {
+					name: 'choiceness',
+					isShow: true
+				}, {
+					name: 'clothesfill',
+					isShow: true
+				}, {
+					name: 'clothes',
+					isShow: true
+				}, {
+					name: 'creativefill',
+					isShow: true
+				}, {
+					name: 'creative',
+					isShow: true
+				}, {
+					name: 'female',
+					isShow: true
+				}, {
+					name: 'keyboard',
+					isShow: true
+				}, {
+					name: 'male',
+					isShow: true
+				}, {
+					name: 'newfill',
+					isShow: true
+				}, {
+					name: 'new',
+					isShow: true
+				}, {
+					name: 'pullleft',
+					isShow: true
+				}, {
+					name: 'pullright',
+					isShow: true
+				}, {
+					name: 'rankfill',
+					isShow: true
+				}, {
+					name: 'rank',
+					isShow: true
+				}, {
+					name: 'bad',
+					isShow: true
+				}, {
+					name: 'cameraadd',
+					isShow: true
+				}, {
+					name: 'focus',
+					isShow: true
+				}, {
+					name: 'friendfill',
+					isShow: true
+				}, {
+					name: 'cameraaddfill',
+					isShow: true
+				}, {
+					name: 'apps',
+					isShow: true
+				}, {
+					name: 'paintfill',
+					isShow: true
+				}, {
+					name: 'paint',
+					isShow: true
+				}, {
+					name: 'picfill',
+					isShow: true
+				}, {
+					name: 'refresharrow',
+					isShow: true
+				}, {
+					name: 'colorlens',
+					isShow: true
+				}, {
+					name: 'markfill',
+					isShow: true
+				}, {
+					name: 'mark',
+					isShow: true
+				}, {
+					name: 'presentfill',
+					isShow: true
+				}, {
+					name: 'repeal',
+					isShow: true
+				}, {
+					name: 'album',
+					isShow: true
+				}, {
+					name: 'peoplefill',
+					isShow: true
+				}, {
+					name: 'people',
+					isShow: true
+				}, {
+					name: 'servicefill',
+					isShow: true
+				}, {
+					name: 'repair',
+					isShow: true
+				}, {
+					name: 'file',
+					isShow: true
+				}, {
+					name: 'repairfill',
+					isShow: true
+				}, {
+					name: 'taoxiaopu',
+					isShow: true
+				}, {
+					name: 'weixin',
+					isShow: true
+				}, {
+					name: 'attentionfill',
+					isShow: true
+				}, {
+					name: 'attention',
+					isShow: true
+				}, {
+					name: 'commandfill',
+					isShow: true
+				}, {
+					name: 'command',
+					isShow: true
+				}, {
+					name: 'communityfill',
+					isShow: true
+				}, {
+					name: 'community',
+					isShow: true
+				}, {
+					name: 'read',
+					isShow: true
+				}, {
+					name: 'calendar',
+					isShow: true
+				}, {
+					name: 'cut',
+					isShow: true
+				}, {
+					name: 'magic',
+					isShow: true
+				}, {
+					name: 'backwardfill',
+					isShow: true
+				}, {
+					name: 'playfill',
+					isShow: true
+				}, {
+					name: 'stop',
+					isShow: true
+				}, {
+					name: 'tagfill',
+					isShow: true
+				}, {
+					name: 'tag',
+					isShow: true
+				}, {
+					name: 'group',
+					isShow: true
+				}, {
+					name: 'all',
+					isShow: true
+				}, {
+					name: 'backdelete',
+					isShow: true
+				}, {
+					name: 'hotfill',
+					isShow: true
+				}, {
+					name: 'hot',
+					isShow: true
+				}, {
+					name: 'post',
+					isShow: true
+				}, {
+					name: 'radiobox',
+					isShow: true
+				}, {
+					name: 'rounddown',
+					isShow: true
+				}, {
+					name: 'upload',
+					isShow: true
+				}, {
+					name: 'writefill',
+					isShow: true
+				}, {
+					name: 'write',
+					isShow: true
+				}, {
+					name: 'radioboxfill',
+					isShow: true
+				}, {
+					name: 'punch',
+					isShow: true
+				}, {
+					name: 'shake',
+					isShow: true
+				}, {
+					name: 'move',
+					isShow: true
+				}, {
+					name: 'safe',
+					isShow: true
+				}, {
+					name: 'activityfill',
+					isShow: true
+				}, {
+					name: 'crownfill',
+					isShow: true
+				}, {
+					name: 'crown',
+					isShow: true
+				}, {
+					name: 'goodsfill',
+					isShow: true
+				}, {
+					name: 'messagefill',
+					isShow: true
+				}, {
+					name: 'profilefill',
+					isShow: true
+				}, {
+					name: 'sound',
+					isShow: true
+				}, {
+					name: 'sponsorfill',
+					isShow: true
+				}, {
+					name: 'sponsor',
+					isShow: true
+				}, {
+					name: 'upblock',
+					isShow: true
+				}, {
+					name: 'weblock',
+					isShow: true
+				}, {
+					name: 'weunblock',
+					isShow: true
+				}, {
+					name: 'my',
+					isShow: true
+				}, {
+					name: 'myfill',
+					isShow: true
+				}, {
+					name: 'emojifill',
+					isShow: true
+				}, {
+					name: 'emojiflashfill',
+					isShow: true
+				}, {
+					name: 'flashbuyfill',
+					isShow: true
+				}, {
+					name: 'text',
+					isShow: true
+				}, {
+					name: 'goodsfavor',
+					isShow: true
+				}, {
+					name: 'musicfill',
+					isShow: true
+				}, {
+					name: 'musicforbidfill',
+					isShow: true
+				}, {
+					name: 'card',
+					isShow: true
+				}, {
+					name: 'triangledownfill',
+					isShow: true
+				}, {
+					name: 'triangleupfill',
+					isShow: true
+				}, {
+					name: 'roundleftfill-copy',
+					isShow: true
+				}, {
+					name: 'font',
+					isShow: true
+				}, {
+					name: 'title',
+					isShow: true
+				}, {
+					name: 'recordfill',
+					isShow: true
+				}, {
+					name: 'record',
+					isShow: true
+				}, {
+					name: 'cardboardfill',
+					isShow: true
+				}, {
+					name: 'cardboard',
+					isShow: true
+				}, {
+					name: 'formfill',
+					isShow: true
+				}, {
+					name: 'coin',
+					isShow: true
+				}, {
+					name: 'cardboardforbid',
+					isShow: true
+				}, {
+					name: 'circlefill',
+					isShow: true
+				}, {
+					name: 'circle',
+					isShow: true
+				}, {
+					name: 'attentionforbid',
+					isShow: true
+				}, {
+					name: 'attentionforbidfill',
+					isShow: true
+				}, {
+					name: 'attentionfavorfill',
+					isShow: true
+				}, {
+					name: 'attentionfavor',
+					isShow: true
+				}, {
+					name: 'titles',
+					isShow: true
+				}, {
+					name: 'icloading',
+					isShow: true
+				}, {
+					name: 'full',
+					isShow: true
+				}, {
+					name: 'mail',
+					isShow: true
+				}, {
+					name: 'peoplelist',
+					isShow: true
+				}, {
+					name: 'goodsnewfill',
+					isShow: true
+				}, {
+					name: 'goodsnew',
+					isShow: true
+				}, {
+					name: 'medalfill',
+					isShow: true
+				}, {
+					name: 'medal',
+					isShow: true
+				}, {
+					name: 'newsfill',
+					isShow: true
+				}, {
+					name: 'newshotfill',
+					isShow: true
+				}, {
+					name: 'newshot',
+					isShow: true
+				}, {
+					name: 'news',
+					isShow: true
+				}, {
+					name: 'videofill',
+					isShow: true
+				}, {
+					name: 'video',
+					isShow: true
+				}, {
+					name: 'exit',
+					isShow: true
+				}, {
+					name: 'skinfill',
+					isShow: true
+				}, {
+					name: 'skin',
+					isShow: true
+				}, {
+					name: 'moneybagfill',
+					isShow: true
+				}, {
+					name: 'usefullfill',
+					isShow: true
+				}, {
+					name: 'usefull',
+					isShow: true
+				}, {
+					name: 'moneybag',
+					isShow: true
+				}, {
+					name: 'redpacket_fill',
+					isShow: true
+				}, {
+					name: 'subscription',
+					isShow: true
+				}, {
+					name: 'loading1',
+					isShow: true
+				}, {
+					name: 'github',
+					isShow: true
+				}, {
+					name: 'global',
+					isShow: true
+				}, {
+					name: 'settingsfill',
+					isShow: true
+				}, {
+					name: 'back_android',
+					isShow: true
+				}, {
+					name: 'expressman',
+					isShow: true
+				}, {
+					name: 'evaluate_fill',
+					isShow: true
+				}, {
+					name: 'group_fill',
+					isShow: true
+				}, {
+					name: 'play_forward_fill',
+					isShow: true
+				}, {
+					name: 'deliver_fill',
+					isShow: true
+				}, {
+					name: 'notice_forbid_fill',
+					isShow: true
+				}, {
+					name: 'fork',
+					isShow: true
+				}, {
+					name: 'pick',
+					isShow: true
+				}, {
+					name: 'wenzi',
+					isShow: true
+				}, {
+					name: 'ellipse',
+					isShow: true
+				}, {
+					name: 'qr_code',
+					isShow: true
+				}, {
+					name: 'dianhua',
+					isShow: true
+				}, {
+					name: 'cuIcon',
+					isShow: true
+				}, {
+					name: 'loading2',
+					isShow: true
+				}, {
+					name: 'btn',
+					isShow: true
+				}]
+
+			};
+		},
+		methods: {
+			searchIcon(e) {
+				let key = e.detail.value.toLowerCase();
+				let list = this.cuIcon;
+				for (let i = 0; i < list.length; i++) {
+					let a = key;
+					let b = list[i].name.toLowerCase();
+					if (b.search(a) != -1) {
+						list[i].isShow = true
+					} else {
+						list[i].isShow = false
+					}
+				}
+				this.cuIcon = list
+			}
+		}
+	}
+</script>
+
+<style>
+	page {
+		padding-top: 50px;
+	}
+</style>

Colorui-UniApp/pages/basics/layout.vue

@@ -0,0 +1,207 @@
+<template>
+	<view>
+		<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">
+				{{tabNav[index]}}
+			</view>
+		</scroll-view>
+		<block v-if="TabCur==0">
+			<view class="cu-bar bg-white solid-bottom margin-top">
+				<view class="action">
+					<text class="cuIcon-title text-blue"></text>固定尺寸
+				</view>
+			</view>
+			<view class="padding bg-white">
+				<view class="flex flex-wrap">
+					<view class="basis-xs bg-grey margin-xs padding-sm radius">xs(20%)</view>
+					<view class="basis-df"></view>
+					<view class="basis-sm bg-grey margin-xs padding-sm radius">sm(40%)</view>
+					<view class="basis-df"></view>
+					<view class="basis-df bg-grey margin-xs padding-sm radius">sub(50%)</view>
+					<view class="basis-lg bg-grey margin-xs padding-sm radius">lg(60%)</view>
+					<view class="basis-xl bg-grey margin-xs padding-sm radius">xl(80%)</view>
+				</view>
+			</view>
+			<view class="cu-bar bg-white  margin-top solid-bottom">
+				<view class="action">
+					<text class="cuIcon-title text-blue"></text>比例布局
+				</view>
+			</view>
+			<view class="padding bg-white">
+				<view class="flex">
+					<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
+					<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
+				</view>
+				<view class="flex  p-xs margin-bottom-sm mb-sm">
+					<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
+					<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
+				</view>
+				<view class="flex  p-xs margin-bottom-sm mb-sm">
+					<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
+					<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
+					<view class="flex-treble bg-grey padding-sm margin-xs radius">3</view>
+				</view>
+			</view>
+			<view class="cu-bar bg-white  margin-top solid-bottom">
+				<view class="action">
+					<text class="cuIcon-title text-blue"></text>水平对齐(justify)
+				</view>
+			</view>
+			<view class="bg-white">
+				<view class="flex solid-bottom padding justify-start">
+					<view class="bg-grey padding-sm margin-xs radius">start</view>
+					<view class="bg-grey padding-sm margin-xs radius">start</view>
+				</view>
+				<view class="flex solid-bottom padding justify-end">
+					<view class="bg-grey padding-sm margin-xs radius">end</view>
+					<view class="bg-grey padding-sm margin-xs radius">end</view>
+				</view>
+				<view class="flex solid-bottom padding justify-center">
+					<view class="bg-grey padding-sm margin-xs radius">center</view>
+					<view class="bg-grey padding-sm margin-xs radius">center</view>
+				</view>
+				<view class="flex solid-bottom padding justify-between">
+					<view class="bg-grey padding-sm margin-xs radius">between</view>
+					<view class="bg-grey padding-sm margin-xs radius">between</view>
+				</view>
+				<view class="flex solid-bottom padding justify-around">
+					<view class="bg-grey padding-sm margin-xs radius">around</view>
+					<view class="bg-grey padding-sm margin-xs radius">around</view>
+				</view>
+			</view>
+			<view class="cu-bar bg-white  margin-top solid-bottom">
+				<view class="action">
+					<text class="cuIcon-title text-blue"></text>垂直对齐(align)
+				</view>
+			</view>
+			<view class="bg-white">
+				<view class="flex solid-bottom padding align-start">
+					<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
+					<view class="bg-grey padding-sm margin-xs radius">start</view>
+				</view>
+				<view class="flex solid-bottom padding align-end">
+					<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
+					<view class="bg-grey padding-sm margin-xs radius">end</view>
+				</view>
+				<view class="flex solid-bottom padding align-center">
+					<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
+					<view class="bg-grey padding-sm margin-xs radius">center</view>
+				</view>
+			</view>
+		</block>
+		<block v-if="TabCur==1">
+			<view class="cu-bar bg-white  margin-top solid-bottom">
+				<view class="action">
+					<text class="cuIcon-title text-blue"></text>等分列
+				</view>
+				<view class="action"></view>
+			</view>
+			<view class="bg-white padding">
+				<view class="grid margin-bottom text-center" v-for="(item,index) in 5" :key="index" :class="'col-' + (index+1)">
+					<view class="padding" :class="indexs%2==0?'bg-cyan':'bg-blue'" v-for="(item,indexs) in (index+1)*2" :key="indexs">{{indexs+1}}</view>
+				</view>
+			</view>
+			<view class="cu-bar bg-white  margin-top solid-bottom">
+				<view class="action">
+					<text class="cuIcon-title text-blue"></text>等高
+				</view>
+				<view class="action"></view>
+			</view>
+			<view class="bg-white padding">
+				<view class="grid col-4 grid-square">
+					<view class="bg-img" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
+				</view>
+			</view>
+		</block>
+		<block v-if="TabCur==2">
+			<view class="cu-bar bg-white margin-top solid-bottom">
+				<view class="action">
+					<text class="cuIcon-title text-blue"></text>浮动
+				</view>
+			</view>
+			<view class="bg-white padding">
+				<view class=" cf padding-sm">
+					<view class="bg-grey radius fl padding-sm">ColorUi fl</view>
+					<view class="bg-grey radius fr padding-sm">ColorUi fr</view>
+				</view>
+			</view>
+			<view class="cu-bar bg-white  solid-bottom margin-top solid-bottom">
+				<view class="action">
+					<text class="cuIcon-title text-blue"></text>内外边距
+				</view>
+			</view>
+			<view class="bg-white">
+				<view class="padding bg-gray">{size}的尺寸有xs/sm/df/lg/xl</view>
+				<view class="flex flex-wrap padding solid-top">
+					<view class="basis-df padding-bottom-xs">外边距</view>
+					<view class="basis-df padding-bottom-xs">内边距</view>
+					<view class="basis-df">.margin-{size}</view>
+					<view class="basis-df">.padding-{size}</view>
+				</view>
+				<view class="flex flex-wrap padding solid-top">
+					<view class="basis-df padding-bottom-xs">水平方向外边距</view>
+					<view class="basis-df padding-bottom-xs">水平方向内边距</view>
+					<view class="basis-df">.margin-lr-{size}</view>
+					<view class="basis-df">.padding-lr-{size}</view>
+				</view>
+				<view class="flex flex-wrap padding solid-top">
+					<view class="basis-df padding-bottom-xs">垂直方向外边距</view>
+					<view class="basis-df padding-bottom-xs">垂直方向内边距</view>
+					<view class="basis-df">.margin-tb-{size}</view>
+					<view class="basis-df">.padding-tb-{size}</view>
+				</view>
+				<view class="flex flex-wrap padding solid-top">
+					<view class="basis-df padding-bottom-xs">上外边距</view>
+					<view class="basis-df padding-bottom-xs">上内边距</view>
+					<view class="basis-df">.margin-top-{size}</view>
+					<view class="basis-df">.padding-top-{size}</view>
+				</view>
+				<view class="flex flex-wrap padding solid-top">
+					<view class="basis-df padding-bottom-xs">右外边距</view>
+					<view class="basis-df padding-bottom-xs">右内边距</view>
+					<view class="basis-df">.margin-right-{size}</view>
+					<view class="basis-df">.padding-right-{size}</view>
+				</view>
+				<view class="flex flex-wrap padding solid-top">
+					<view class="basis-df padding-bottom-xs">下外边距</view>
+					<view class="basis-df padding-bottom-xs">下内边距</view>
+					<view class="basis-df">margin-bottom-{size}</view>
+					<view class="basis-df">.padding-bottom-{size}</view>
+				</view>
+				<view class="flex flex-wrap padding solid-top">
+					<view class="basis-df padding-bottom-xs">左外边距</view>
+					<view class="basis-df padding-bottom-xs">左内边距</view>
+					<view class="basis-df">.margin-left-{size}</view>
+					<view class="basis-df">.padding-left-{size}</view>
+				</view>
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				CustomBar: this.CustomBar,
+				TabCur: 0,
+				avatar:['https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'],
+				tabNav: ['Flex布局', 'Grid布局', '辅助布局']
+			};
+		},
+		methods: {
+			tabSelect(e) {
+				this.TabCur = e.currentTarget.dataset.id;
+				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
+			}
+		}
+	}
+</script>
+
+<style>
+	page {
+		padding-top: 45px;
+	}
+</style>

Colorui-UniApp/pages/basics/loading.vue

@@ -0,0 +1,101 @@
+<template>
+	<view>
+		<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-cuIcon" :class="!isLoad?'loading':'over'"></view>
+				</view>
+			</block>
+		</cu-custom>
+		<view class="cu-bar bg-white">
+			<view class="action">
+				<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="cuIcon-title text-blue"></text>加载状态
+			</view>
+			<view class="action">
+				<switch @change="isLoading" :class="isLoad?'checked':''"></switch>
+			</view>
+		</view>
+		<view class="cu-load bg-grey" :class="!isLoad?'loading':'over'"></view>
+		<view class="cu-bar bg-white margin-top">
+			<view class="action">
+				<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="cuIcon-title text-blue"></text>弹框加载
+			</view>
+			<view class="action">
+				<button class="cu-btn bg-green shadow" @tap="LoadModal">
+					点我
+				</button>
+			</view>
+		</view>
+		<view class="cu-load load-modal" v-if="loadModal">
+			<!-- <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="cuIcon-title text-blue"></text>进度条加载
+			</view>
+			<view class="action">
+				<button class="cu-btn bg-green shadow" @tap="LoadProgress">
+					点我
+				</button>
+			</view>
+		</view>
+		<view class="load-progress" :class="loadProgress!=0?'show':'hide'" :style="[{top:CustomBar+'px'}]">
+			<view class="load-progress-bar bg-green" :style="[{transform: 'translate3d(-' + (100-loadProgress) + '%, 0px, 0px)'}]"></view>
+			<view class="load-progress-spinner text-green"></view>
+		</view>
+	</view>
+</template>
+
+
+<script>
+	export default {
+		data() {
+			return {
+				CustomBar: this.CustomBar,
+				isLoad:false,
+				loadModal: false,
+				loadProgress: 0
+			};
+		},
+		methods: {
+			isLoading(e) {
+				this.isLoad = e.detail.value;
+			},
+			LoadModal(e) {
+				this.loadModal = true;
+				setTimeout(() => {
+					this.loadModal = false;
+				}, 2000)
+			},
+			LoadProgress(e) {
+				this.loadProgress = this.loadProgress + 3;
+				if (this.loadProgress < 100) {
+					setTimeout(() => {
+						this.LoadProgress();
+					}, 100)
+				} else {
+					this.loadProgress = 0;
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

Colorui-UniApp/pages/basics/progress.vue

@@ -0,0 +1,153 @@
+<template>
+	<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="cuIcon-title text-blue"></text>进度条形状
+			</view>
+		</view>
+		<view class="padding bg-white">
+			<view class="cu-progress">
+				<view class="bg-red" :style="[{ width:loading?'61.8%':''}]">61.8%</view>
+			</view>
+			<view class="cu-progress radius margin-top">
+				<view class="bg-red" :style="[{ width:loading?'61.8%':''}]">61.8%</view>
+			</view>
+			<view class="cu-progress round margin-top">
+				<view class="bg-red" :style="[{ width:loading?'61.8%':''}]">61.8%</view>
+			</view>
+		</view>
+		<view class="cu-bar bg-white solid-bottom margin-top">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>进度条尺寸
+			</view>
+		</view>
+		<view class="padding bg-white">
+			<view class="cu-progress round">
+				<view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
+			</view>
+			<view class="cu-progress round margin-top sm">
+				<view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
+			</view>
+			<view class="cu-progress round margin-top xs">
+				<view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
+			</view>
+		</view>
+
+		<view class="cu-bar bg-white solid-bottom margin-top" @tap="showModal" data-target="ColorModal">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>进度条颜色
+			</view>
+			<view class="action">
+				<view class="padding solid radius shadow-blur" :class="'bg-' + color"></view>
+			</view>
+		</view>
+		<view class="padding" :class="color=='white'?'bg-grey':'bg-white'">
+			<view class="cu-progress round">
+				<view :class="'bg-' + color" :style="[{ width:loading?'61.8%':''}]"></view>
+			</view>
+		</view>
+
+
+		<view class="cu-bar bg-white solid-bottom margin-top">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>进度条条纹
+			</view>
+			<switch class="margin-right-sm" :class="active?'checked':''" @change="SetActive"></switch>
+		</view>
+		<view class="padding bg-white">
+			<view class="cu-progress round sm striped" :class="active?'active':''">
+				<view class="bg-green" :style="[{ width:loading?'60%':''}]"></view>
+			</view>
+			<view class="cu-progress round sm margin-top-sm striped" :class="active?'active':''">
+				<view class="bg-black" :style="[{ width:loading?'40%':''}]"></view>
+			</view>
+		</view>
+		<view class="cu-bar bg-white solid-bottom margin-top">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>进度条比例
+			</view>
+		</view>
+		<view class="padding bg-white">
+			<view class="cu-progress radius striped active">
+				<view class="bg-red" :style="[{ width:loading?'30%':''}]">30%</view>
+				<view class="bg-olive" :style="[{ width:loading?'45%':''}]">45%</view>
+				<view class="bg-cyan" :style="[{ width:loading?'25%':''}]">25%</view>
+			</view>
+		</view>
+		<view class="cu-bar bg-white solid-bottom margin-top">
+			<view class="action">
+				<text class="cuIcon-title text-blue"></text>进度条布局
+			</view>
+		</view>
+		<view class="padding bg-white ">
+			<view class="flex">
+				<view class="cu-progress round">
+					<view class="bg-green" :style="[{ width:loading?'100%':''}]"></view>
+				</view>
+				<text class="cuIcon-roundcheckfill text-green margin-left-sm"></text>
+			</view>
+			<view class="flex margin-top">
+				<view class="cu-progress round">
+					<view class="bg-green" :style="[{ width:loading?'80%':''}]"></view>
+				</view>
+				<text class="margin-left">80%</text>
+			</view>
+		</view>
+
+		<view class="cu-modal" :class="modalName=='ColorModal'?'show':''">
+			<view class="cu-dialog">
+				<view class="cu-bar justify-end solid-bottom">
+					<view class="content">选择颜色</view>
+					<view class="action" @tap="hideModal">
+						<text class="cuIcon-close text-red"></text>
+					</view>
+				</view>
+				<view class="grid col-5 padding">
+					<view class="padding-xs" v-for="(item,index) in ColorList" :key="index" @tap="SetColor" :data-color="item.name" v-if="item.name!='gray' && item.name!='white'">
+						<view class="padding-tb radius" :class="'bg-' + item.name"> {{item.title}} </view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				ColorList: this.ColorList,
+				color: 'red',
+				loading: false,
+				modalName: '',
+				active: false
+			};
+		},
+		onLoad: function() {
+			let that = this;
+			setTimeout(function() {
+				that.loading = true
+			}, 500)
+		},
+		methods: {
+			showModal(e) {
+				this.modalName = e.currentTarget.dataset.target
+			},
+			hideModal(e) {
+				this.modalName = null
+			},
+			SetColor(e) {
+				this.color = e.currentTarget.dataset.color;
+				this.modalName = null
+			},
+			SetActive(e) {
+				this.active = e.detail.value
+			},
+		}
+	}
+</script>
+
+<style>
+
+</style>

Colorui-UniApp/pages/basics/shadow.vue

@@ -0,0 +1,54 @@
+<template>
+	<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="cuIcon-title text-blue"></text>边框
+			</view>
+			<view class="action">
+				<switch class="sm" @change="SetSize" :class="size?'checked':''"></switch>
+			</view>
+		</view>
+		<view class="padding bg-white text-center">
+			<view class="padding" :class="size?'solids':'solid'">四周</view>
+			<view class="padding margin-top" :class="size?'solids-top':'solid-top'">上</view>
+			<view class="padding margin-top" :class="size?'solids-right':'solid-right'">右</view>
+			<view class="padding margin-top" :class="size?'solids-bottom':'solid-bottom'">下</view>
+			<view class="padding margin-top" :class="size?'solids-left':'solid-left'">左</view>
+		</view>
+		<view class="cu-bar bg-white margin-top">
+			<view class="action">
+				<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 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 bg-img" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg);">
+				<view>根据背景图而改变的阴影</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				size: false
+			};
+		},
+		methods: {
+			SetSize(e) {
+				this.size = e.detail.value
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

Colorui-UniApp/pages/basics/tag.vue

@@ -0,0 +1,130 @@
+<template>
+	<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='cuIcon-title text-blue'></text>标签形状
+			</view>
+		</view>
+		<view class="padding bg-white solid-bottom">
+			<view class='cu-tag'>默认</view>
+			<view class='cu-tag round'>椭圆</view>
+			<view class='cu-tag radius'>圆角</view>
+		</view>
+
+		<view class="cu-bar bg-white margin-top">
+			<view class='action'>
+				<text class='cuIcon-title text-blue'></text>标签尺寸
+			</view>
+		</view>
+		<view class="padding bg-white">
+			<view class='cu-tag radius sm'>小尺寸</view>
+			<view class='cu-tag radius'>普通尺寸</view>
+		</view>
+		<view class="cu-bar bg-white margin-top">
+			<view class='action'>
+				<text class='cuIcon-title text-blue'></text>标签颜色
+			</view>
+		</view>
+		<view class='padding-sm flex flex-wrap'>
+			<view class="padding-xs" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='gray'">
+				<view class='cu-tag' :class="'bg-' + item.name">{{item.title}}</view>
+			</view>
+			<view class="padding-xs" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='gray' && item.name!='black' && item.name!='white'">
+				<view class='cu-tag light' :class="'bg-' + item.name">{{item.title}}</view>
+			</view>
+		</view>
+		<view class="cu-bar bg-white margin-top">
+			<view class='action'>
+				<text class='cuIcon-title text-blue'></text>镂空标签
+			</view>
+		</view>
+		<view class='padding-sm flex flex-wrap'>
+			<view class="padding-xs" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='white'">
+				<view class='cu-tag' :class="'line-' + item.name">{{item.title}}</view>
+			</view>
+		</view>
+		<view class="cu-bar bg-white margin-top">
+			<view class='action'>
+				<text class='cuIcon-title text-blue'></text>胶囊样式
+			</view>
+		</view>
+		<view class="padding">
+			<view class="cu-capsule">
+				<view class='cu-tag bg-red'>
+					<text class='cuIcon-likefill'></text>
+				</view>
+				<view class="cu-tag line-red">
+					12
+				</view>
+			</view>
+			<view class="cu-capsule round">
+				<view class='cu-tag bg-blue '>
+					<text class='cuIcon-likefill'></text>
+				</view>
+				<view class="cu-tag line-blue">
+					23
+				</view>
+			</view>
+			<view class="cu-capsule round">
+				<view class='cu-tag bg-blue '>
+					说明
+				</view>
+				<view class="cu-tag line-blue">
+					123
+				</view>
+			</view>
+			<view class="cu-capsule radius">
+				<view class='cu-tag bg-grey '>
+					<text class='cuIcon-likefill'></text>
+				</view>
+				<view class="cu-tag line-grey">
+					23
+				</view>
+			</view>
+			<view class="cu-capsule radius">
+				<view class='cu-tag bg-brown sm'>
+					<text class='cuIcon-likefill'></text>
+				</view>
+				<view class="cu-tag line-brown sm">
+					23
+				</view>
+			</view>
+		</view>
+		<view class="cu-bar bg-white margin-top">
+			<view class='action'>
+				<text class='cuIcon-title text-blue'></text>数字标签
+			</view>
+		</view>
+		<view class="padding flex justify-between align-center">
+			<view class='cu-avatar xl radius'>
+				港
+				<view class="cu-tag badge">99+</view>
+			</view>
+			<view class='cu-avatar xl radius' style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)">
+				<view class='cu-tag badge'>9</view>
+			</view>
+			<view class='cu-avatar xl radius'>
+				<view class='cu-tag badge'>99</view>
+				<text class='cuIcon-people'></text>
+			</view>
+			<view class='cu-avatar xl radius'>
+				<view class='cu-tag badge'>99+</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				ColorList: this.ColorList,
+			};
+		}
+	}
+</script>
+
+<style>
+
+</style>

Colorui-UniApp/pages/basics/text.vue

@@ -0,0 +1,169 @@
+<template>
+	<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="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=" cuIcon-roundcheckfill text-green"></text>
+					</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=" cuIcon-roundcheckfill text-green"></text>
+					</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>
+					<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>
+					<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>
+					<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>
+			</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>
+					<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>
+					<view class="padding">说明文本，标签文字等关注度低的文字</view>
+				</view>
+			</view>
+		</view>
+		<view class="cu-bar bg-white solid-bottom margin-top">
+			<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">
+					{{item.title}}
+				</view>
+			</view>
+		</view>
+		<view class="cu-bar bg-white solid-bottom margin-top">
+			<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 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="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>
+		<view class="cu-bar bg-white solid-bottom margin-top">
+			<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>
+		<view class="cu-bar bg-white solid-bottom margin-top">
+			<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>
+			<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 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 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>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				ColorList: this.ColorList,
+			};
+		}
+	}
+</script>
+
+<style>
+
+</style>

Colorui-UniApp/pages/component/bar.vue

@@ -0,0 +1,448 @@
+<template>
+	<view>
+		<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="cuIcon-title text-green"></text>
+				<text>底部操作条</text>
+			</view>
+		</view>
+		<view class="box">
+			<view class="cu-bar tabbar bg-white">
+				<view class="action">
+					<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="cuIcon-cu-image">
+						<image src="/static/tabbar/component.png"></image>
+					</view>
+					<view class="text-gray">组件</view>
+				</view>
+				<view class="action">
+					<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="cuIcon-cu-image">
+						<image src="/static/tabbar/about.png"></image>
+						<view class="cu-tag badge"></view>
+					</view>
+					<view class="text-gray">关于</view>
+				</view>
+			</view>
+			<view class="cu-bar tabbar margin-bottom-xl bg-black">
+				<view class="action text-orange">
+					<view class="cuIcon-homefill"></view> 首页
+				</view>
+				<view class="action text-gray">
+					<view class="cuIcon-similar"></view> 分类
+				</view>
+				<view class="action text-gray">
+					<view class="cuIcon-recharge"></view>
+					积分
+				</view>
+				<view class="action text-gray">
+					<view class="cuIcon-cart">
+						<view class="cu-tag badge">99</view>
+					</view>
+					购物车
+				</view>
+				<view class="action text-gray">
+					<view class="cuIcon-my">
+						<view class="cu-tag badge"></view>
+					</view>
+					我的
+				</view>
+			</view>
+			<view class="cu-bar tabbar margin-bottom-xl bg-white">
+				<view class="action text-green">
+					<view class="cuIcon-homefill"></view> 首页
+				</view>
+				<view class="action text-gray">
+					<view class="cuIcon-similar"></view> 分类
+				</view>
+				<view class="action text-gray add-action">
+					<button class="cu-btn cuIcon-add bg-green shadow"></button>
+					发布
+				</view>
+				<view class="action text-gray">
+					<view class="cuIcon-cart">
+						<view class="cu-tag badge">99</view>
+					</view>
+					购物车
+				</view>
+				<view class="action text-gray">
+					<view class="cuIcon-my">
+						<view class="cu-tag badge"></view>
+					</view>
+					我的
+				</view>
+			</view>
+			<view class="cu-bar tabbar bg-black">
+				<view class="action text-green">
+					<view class="cuIcon-homefill"></view> 首页
+				</view>
+				<view class="action text-gray">
+					<view class="cuIcon-similar"></view> 分类
+				</view>
+				<view class="action text-gray add-action">
+					<button class="cu-btn cuIcon-add bg-green shadow"></button>
+					发布
+				</view>
+				<view class="action text-gray">
+					<view class="cuIcon-cart">
+						<view class="cu-tag badge">99</view>
+					</view>
+					购物车
+				</view>
+				<view class="action text-gray">
+					<view class="cuIcon-my">
+						<view class="cu-tag badge"></view>
+					</view>
+					我的
+				</view>
+			</view>
+
+			<view class="cu-bar bg-white tabbar border shop">
+				<button class="action" open-type="contact">
+					<view class="cuIcon-service text-green">
+						<view class="cu-tag badge"></view>
+					</view>
+					客服
+				</button>
+				<view class="action text-orange">
+					<view class="cuIcon-favorfill"></view> 已收藏
+				</view>
+				<view class="action">
+					<view class="cuIcon-cart">
+						<view class="cu-tag badge">99</view>
+					</view>
+					购物车
+				</view>
+				<view class="bg-red submit">立即订购</view>
+			</view>
+
+			<view class="cu-bar bg-white tabbar border shop">
+				<button class="action" open-type="contact">
+					<view class="cuIcon-service text-green">
+						<view class="cu-tag badge"></view>
+					</view>
+					客服
+				</button>
+				<view class="action">
+					<view class="cuIcon-cart">
+						<view class="cu-tag badge">99</view>
+					</view>
+					购物车
+				</view>
+				<view class="bg-orange submit">加入购物车</view>
+				<view class="bg-red submit">立即订购</view>
+			</view>
+
+			<view class="cu-bar bg-white tabbar border shop">
+				<button class="action" open-type="contact">
+					<view class="cuIcon-service text-green">
+						<view class="cu-tag badge"></view>
+					</view>
+					客服
+				</button>
+				<view class="action">
+					<view class=" cuIcon-shop"></view> 店铺
+				</view>
+				<view class="action">
+					<view class="cuIcon-cart">
+						<view class="cu-tag badge">99</view>
+					</view>
+					购物车
+				</view>
+				<view class="btn-group">
+					<button class="cu-btn bg-red round shadow-blur">立即订购</button>
+				</view>
+			</view>
+			<view class="cu-bar bg-white tabbar border shop">
+				<button class="action" open-type="contact">
+					<view class="cuIcon-service text-green">
+						<view class="cu-tag badge"></view>
+					</view> 客服
+				</button>
+				<view class="action">
+					<view class="cuIcon-cart">
+						<view class="cu-tag badge">99</view>
+					</view>
+					购物车
+				</view>
+				<view class="btn-group">
+					<button class="cu-btn bg-orange round shadow-blur">加入购物车</button>
+					<button class="cu-btn bg-red round shadow-blur">立即订购</button>
+				</view>
+			</view>
+		</view>
+
+		<view class="cu-bar bg-white">
+			<view class="action">
+				<text class="cuIcon-title text-green"></text>
+				<text>标题操作条</text>
+			</view>
+		</view>
+		<view class="box" v-if="false">
+			<view class="cu-bar justify-center bg-white">
+				<view class="action border-title">
+					<text class="text-xl text-bold">关于我们</text>
+					<text class="bg-grey" style="width:2rem"></text>
+					<!-- 底部样式 last-child选择器-->
+				</view>
+			</view>
+			<view class="cu-bar justify-center bg-white">
+				<view class="action border-title">
+					<text class="text-xl text-bold text-blue">关于我们</text>
+					<text class="bg-gradual-blue" style="width:3rem"></text>
+				</view>
+			</view>
+			<view class="cu-bar justify-center bg-white">
+				<view class="action sub-title">
+					<text class="text-xl text-bold text-green">关于我们</text>
+					<text class="bg-green" style="width:2rem"></text>
+					<!-- last-child选择器-->
+				</view>
+			</view>
+			<view class="cu-bar justify-center bg-white">
+				<view class="action sub-title">
+					<text class="text-xl text-bold text-blue">关于我们</text>
+					<text class="text-ABC text-blue">about</text>
+					<!-- last-child选择器-->
+				</view>
+			</view>
+		</view>
+		<view class="box">
+			<view class="cu-bar bg-white">
+				<view class="action border-title">
+					<text class="text-xl text-bold">关于我们</text>
+					<text class="bg-grey" style="width:2rem"></text>
+					<!-- 底部样式 last-child选择器-->
+				</view>
+			</view>
+			<view class="cu-bar bg-white">
+				<view class="action border-title">
+					<text class="text-xl text-bold text-blue">关于我们</text>
+					<text class="bg-gradual-blue" style="width:3rem"></text>
+				</view>
+			</view>
+			<view class="cu-bar bg-white">
+				<view class="action sub-title">
+					<text class="text-xl text-bold text-green">关于我们</text>
+					<text class="bg-green"></text>
+					<!-- last-child选择器-->
+				</view>
+			</view>
+			<view class="cu-bar bg-white">
+				<view class="action sub-title">
+					<text class="text-xl text-bold text-blue">关于我们</text>
+					<text class="text-ABC text-blue">about</text>
+					<!-- last-child选择器-->
+				</view>
+			</view>
+			<view class="cu-bar bg-white">
+				<view class="action title-style-3">
+					<text class="text-xl text-bold">关于我们</text>
+					<text class="text-Abc text-gray self-end margin-left-sm">about</text>
+				</view>
+			</view>
+			<view class="cu-bar bg-white">
+				<view class="action">
+					<text class="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="cuIcon-titles text-green"></text>
+					<text class="text-xl text-bold">关于我们</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="cu-bar bg-white">
+			<view class="action">
+				<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="cuIcon-back text-gray"></text> 返回
+				</view>
+				<view class="content text-bold">
+					操作条
+				</view>
+			</view>
+			<view class="cu-bar bg-white">
+				<view class="action">
+					<text class="cuIcon-homefill text-gray"></text> 首页
+				</view>
+				<view class="content text-bold">
+					鲜亮的高饱和色彩，专注视觉的小程序组件库
+				</view>
+				<view class="action">
+					<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="cuIcon-close"></text> 关闭
+				</view>
+				<view class="content text-bold">
+					海蓝
+				</view>
+			</view>
+			<view class="cu-bar bg-black search">
+				<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg);"></view>
+				<view class="content">
+					ColorUI
+				</view>
+				<view class="action">
+					<text class="cuIcon-more"></text>
+				</view>
+			</view>
+		</view>
+
+
+		<view class="cu-bar bg-white">
+			<view class="action">
+				<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="cuIcon-search"></text>
+					<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
+				</view>
+				<view class="action">
+					<button class="cu-btn bg-green shadow-blur round">搜索</button>
+				</view>
+			</view>
+			<view class="cu-bar search bg-white">
+				<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big11010.jpg"></view>
+				<view class="search-form round">
+					<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="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="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="cuIcon-triangledownfill"></text>
+				</view>
+			</view>
+			<view class="cu-bar bg-cyan search">
+				<view class="search-form radius">
+					<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="cuIcon-close"></text>
+					<text>取消</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="cu-bar bg-white">
+			<view class="action">
+				<text class="cuIcon-title text-green"></text>
+				<text>操作条按钮组</text>
+			</view>
+		</view>
+
+		<view class="box">
+			<view class="cu-bar btn-group">
+				<button class="cu-btn bg-green shadow-blur round lg">保存</button>
+			</view>
+			<view class="cu-bar btn-group">
+				<button class="cu-btn bg-green shadow-blur">保存</button>
+				<button class="cu-btn text-green line-green shadow">上传</button>
+			</view>
+			<view class="cu-bar btn-group">
+				<button class="cu-btn bg-green shadow-blur round">保存</button>
+				<button class="cu-btn bg-blue shadow-blur round">提交</button>
+			</view>
+		</view>
+
+
+		<view class="cu-bar bg-white">
+			<view class="action">
+				<text class="cuIcon-title text-green"></text>
+				<text>输入操作条</text>
+			</view>
+		</view>
+		<view class="box">
+			<view class="cu-bar input">
+				<view class="action">
+					<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="cuIcon-emojifill text-grey"></text>
+				</view>
+				<button class="cu-btn bg-green shadow-blur">发送</button>
+			</view>
+
+			<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="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="cuIcon-emojifill text-grey"></text>
+				</view>
+				<button class="cu-btn bg-green shadow-blur">发送</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				InputBottom: 0
+			};
+		},
+		methods: {
+			InputFocus(e) {
+				this.InputBottom = e.detail.height
+			},
+			InputBlur(e) {
+				this.InputBottom = 0
+			}
+		}
+	}
+</script>
+
+<style>
+	.box {
+		margin: 20upx 0;
+	}
+
+	.box view.cu-bar {
+		margin-top: 20upx;
+	}
+</style>

Colorui-UniApp/pages/component/card.vue

@@ -0,0 +1,167 @@
+<template>
+	<view>
+		<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="cuIcon-titles text-orange"></text> 案例类卡片
+			</view>
+			<view class="action">
+				<switch :class="isCard?'checked':''" :checked="isCard?true:false" @change="IsCard"></switch>
+			</view>
+		</view>
+		<view class="cu-card case" :class="isCard?'no-card':''">
+			<view class="cu-item shadow">
+				<view class="image">
+					<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
+					 mode="widthFix"></image>
+					<view class="cu-tag bg-blue">史诗</view>
+					<view class="cu-bar bg-shadeBottom"> <text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text></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/big10006.jpg);"></view>
+						<view class="content flex-sub">
+							<view class="text-grey">正义天使 凯尔</view>
+							<view class="text-gray text-sm flex justify-between">
+								十天前
+								<view class="text-gray text-sm">
+									<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>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="cu-bar bg-white solid-bottom" :class="isCard?'margin-top':''">
+			<view class="action">
+				<text class="cuIcon-titles text-orange "></text> 动态类卡片
+			</view>
+			<view class="action">
+				<switch :class="isCard?'checked':''" :checked="isCard?true:false" @change="IsCard"></switch>
+			</view>
+		</view>
+		<view class="cu-card dynamic" :class="isCard?'no-card':''">
+			<view class="cu-item shadow">
+				<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/big10006.jpg);"></view>
+						<view class="content flex-sub">
+							<view>凯尔</view>
+							<view class="text-gray text-sm flex justify-between">
+								2019年12月3日
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="text-content">
+					折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！
+				</view>
+				<view class="grid flex-sub padding-lr" :class="isCard?'col-3 grid-square':'col-1'">
+					<view class="bg-img" :class="isCard?'':'only-img'" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"
+					 v-for="(item,index) in isCard?9:1" :key="index">
+					</view>
+				</view>
+				<view class="text-gray text-sm text-right padding">
+					<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">
+					<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">
+							<view class="text-grey">莫甘娜</view>
+							<view class="text-gray text-content text-df">
+								凯尔，你被自己的光芒变的盲目。
+							</view>
+							<view class="bg-grey padding-sm radius margin-top-sm  text-sm">
+								<view class="flex">
+									<view>凯尔：</view>
+									<view class="flex-sub">妹妹，你在帮他们给黑暗找借口吗?</view>
+								</view>
+							</view>
+							<view class="margin-top-sm flex justify-between">
+								<view class="text-gray text-df">2018年12月4日</view>
+								<view>
+									<text class="cuIcon-appreciatefill text-red"></text>
+									<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
+								</view>
+							</view>
+						</view>
+					</view>
+
+					<view class="cu-item">
+						<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
+						<view class="content">
+							<view class="text-grey">凯尔</view>
+							<view class="text-gray text-content text-df">
+								妹妹，如果不是为了飞翔，我们要这翅膀有什么用?
+							</view>
+							<view class="bg-grey padding-sm radius margin-top-sm  text-sm">
+								<view class="flex">
+									<view>莫甘娜：</view>
+									<view class="flex-sub">如果不能立足于大地，要这双脚又有何用?</view>
+								</view>
+							</view>
+							<view class="margin-top-sm flex justify-between">
+								<view class="text-gray text-df">2018年12月4日</view>
+								<view>
+									<text class="cuIcon-appreciate text-gray"></text>
+									<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="cu-bar bg-white solid-bottom margin-top">
+			<view class="action">
+				<text class="cuIcon-titles text-orange "></text> 文章类卡片
+			</view>
+			<view class="action">
+				<switch :class="isCard?'checked':''" :checked="isCard?true:false" @change="IsCard"></switch>
+			</view>
+		</view>
+		<view class="cu-card article" :class="isCard?'no-card':''">
+			<view class="cu-item shadow">
+				<view class="title"><view class="text-cut">无意者 烈火焚身;以正义的烈火拔出黑暗。我有自己的正义，见证至高的烈火吧。</view></view>
+				<view class="content">
+					<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
+					 mode="aspectFill"></image>
+					<view class="desc">
+						<view class="text-content"> 折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！真正的恩典因不完整而美丽，因情感而真诚，因脆弱而自由！</view>
+						<view>
+							<view class="cu-tag bg-red light sm round">正义天使</view>
+							<view class="cu-tag bg-green light sm round">史诗</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				isCard: false
+			};
+		},
+		methods: {
+			IsCard(e) {
+				this.isCard = e.detail.value
+			},
+		}
+	}
+</script>
+
+<style>
+
+</style>

Colorui-UniApp/pages/component/chat.vue

@@ -0,0 +1,113 @@
+<template>
+	<view>
+		<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">
+					<view class="content bg-green shadow">
+						<text>喵喵喵！喵喵喵！喵喵喵！喵喵！喵喵！！喵！喵喵喵！</text>
+					</view>
+				</view>
+				<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
+				<view class="date">2018年3月23日 13:23</view>
+			</view>
+			<view class="cu-info round">对方撤回一条消息!</view>
+			<view class="cu-item">
+				<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
+				<view class="main">
+					<view class="content shadow">
+						<text>喵喵喵！喵喵喵！</text>
+					</view>
+				</view>
+				<view class="date "> 13:23</view>
+			</view>
+			<view class="cu-info">
+				<text class="cuIcon-roundclosefill text-red "></text> 对方拒绝了你的消息
+			</view>
+			<view class="cu-info">
+				对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
+				<text class="text-blue">发送好友验证</text>
+			</view>
+			<view class="cu-item self">
+				<view class="main">
+					<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" class="radius" mode="widthFix"></image>
+				</view>
+				<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
+				<view class="date"> 13:23</view>
+			</view>
+			<view class="cu-item self">
+				<view class="main">
+					<view class="action text-bold text-grey">
+						3"
+					</view>
+					<view class="content shadow">
+						<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>
+				<view class="date">13:23</view>
+			</view>
+			<view class="cu-item self">
+				<view class="main">
+					<view class="action">
+						<text class="cuIcon-locationfill text-orange text-xxl"></text>
+					</view>
+					<view class="content shadow">
+						喵星球，喵喵市
+					</view>
+				</view>
+				<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
+				<view class="date">13:23</view>
+			</view>
+			<view class="cu-item">
+				<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
+				<view class="main">
+					<view class="content shadow">
+						@#$^&**
+					</view>
+					<view class="action text-grey">
+						<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>
+			</view>
+		</view>
+
+		<view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
+			<view class="action">
+				<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="cuIcon-emojifill text-grey"></text>
+			</view>
+			<button class="cu-btn bg-green shadow">发送</button>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				InputBottom: 0
+			};
+		},
+		methods: {
+			InputFocus(e) {
+				this.InputBottom = e.detail.height
+			},
+			InputBlur(e) {
+				this.InputBottom = 0
+			}
+		}
+	}
+</script>
+
+<style>
+page{
+  padding-bottom: 100upx;
+}
+</style>

Colorui-UniApp/pages/component/form.vue

@@ -0,0 +1,413 @@
+<template>
+	<view>
+		<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>
+				<input placeholder="两字短标题" name="input"></input>
+			</view>
+			<view class="cu-form-group">
+				<view class="title">输入框</view>
+				<input placeholder="三字标题" name="input"></input>
+			</view>
+			<view class="cu-form-group">
+				<view class="title">收货地址</view>
+				<input placeholder="统一标题的宽度" name="input"></input>
+			</view>
+			<view class="cu-form-group">
+				<view class="title">收货地址</view>
+				<input placeholder="输入框带个图标" name="input"></input>
+				<text class='cuIcon-locationfill text-orange'></text>
+			</view>
+			<view class="cu-form-group">
+				<view class="title">验证码</view>
+				<input placeholder="输入框带个按钮" name="input"></input>
+				<button class='cu-btn bg-green shadow'>验证码</button>
+			</view>
+			<view class="cu-form-group">
+				<view class="title">手机号码</view>
+				<input placeholder="输入框带标签" name="input"></input>
+				<view class="cu-capsule radius">
+					<view class='cu-tag bg-blue '>
+						+86
+					</view>
+					<view class="cu-tag line-blue">
+						中国大陆
+					</view>
+				</view>
+			</view>
+			<view class="cu-form-group margin-top">
+				<view class="title">普通选择</view>
+				<picker @change="PickerChange" :value="index" :range="picker">
+					<view class="picker">
+						{{index>-1?picker[index]:'禁止换行，超出容器部分会以 ... 方式截断'}}
+					</view>
+				</picker>
+			</view>
+			<!-- #ifndef MP-ALIPAY -->
+			<view class="cu-form-group">
+				<view class="title">多列选择</view>
+				<picker mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :value="multiIndex" :range="multiArray">
+					<view class="picker">
+						{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
+					</view>
+				</picker>
+			</view>
+			<!-- #endif -->
+			<view class="cu-form-group">
+				<view class="title">时间选择</view>
+				<picker mode="time" :value="time" start="09:01" end="21:01" @change="TimeChange">
+					<view class="picker">
+						{{time}}
+					</view>
+				</picker>
+			</view>
+			<view class="cu-form-group">
+				<view class="title">日期选择</view>
+				<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="DateChange">
+					<view class="picker">
+						{{date}}
+					</view>
+				</picker>
+			</view>
+			<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
+			<view class="cu-form-group">
+				<view class="title">地址选择</view>
+				<picker mode="region" @change="RegionChange" :value="region">
+					<view class="picker">
+						{{region[0]}}，{{region[1]}}，{{region[2]}}
+					</view>
+				</picker>
+			</view>
+			<!-- #endif -->
+			<view class="cu-form-group margin-top">
+				<view class="title">开关选择</view>
+				<switch @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
+			</view>
+			<view class="cu-form-group">
+				<view class="title">定义颜色</view>
+				<!-- #ifdef MP-ALIPAY -->
+				<switch class='red' @change="SwitchB" :class="switchB?'checked':''" :checked="switchB?true:false" color="#e54d42"></switch>
+				<!-- #endif -->
+
+				<!-- #ifndef MP-ALIPAY -->
+				<switch class='red' @change="SwitchB" :class="switchB?'checked':''" :checked="switchB?true:false"></switch>
+				<!-- #endif -->
+			</view>
+			<view class="cu-form-group">
+				<view class="title">定义图标</view>
+				<switch class='switch-sex' @change="SwitchC" :class="switchC?'checked':''" :checked="switchC?true:false"></switch>
+			</view>
+			<!-- #ifndef MP-ALIPAY -->
+			<view class="cu-form-group">
+				<view class="title">方形开关</view>
+				<switch class='orange radius' @change="SwitchD" :class="switchD?'checked':''" :checked="switchD?true:false"></switch>
+			</view>
+			<!-- #endif -->
+			<radio-group class="block" @change="RadioChange">
+				<view class="cu-form-group margin-top">
+					<view class="title">单选操作(radio)</view>
+					<radio :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false" value="A"></radio>
+				</view>
+				<!-- #ifndef MP-ALIPAY -->
+				<view class="cu-form-group">
+					<view class="title">定义样式</view>
+					<radio class='radio' :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false" value="B"></radio>
+				</view>
+				<view class="cu-form-group">
+					<view class="title">定义颜色</view>
+					<view>
+						<radio class='blue radio' :class="radio=='C'?'checked':''" :checked="radio=='C'?true:false" value="C"></radio>
+						<radio class='red margin-left-sm' :class="radio=='D'?'checked':''" :checked="radio=='D'?true:false" value="D"></radio>
+					</view>
+				</view>
+				<!-- #endif -->
+			</radio-group>
+			<checkbox-group class="block" @change="CheckboxChange">
+				<view class="cu-form-group margin-top">
+					<view class="title">复选选操作(checkbox)</view>
+					<checkbox :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false" value="A"></checkbox>
+				</view>
+				<!-- #ifndef MP-ALIPAY -->
+				<view class="cu-form-group">
+					<view class="title">定义形状</view>
+					<checkbox class='round' :class="checkbox[1].checked?'checked':''" :checked="checkbox[1].checked?true:false" value="B"></checkbox>
+				</view>
+				<view class="cu-form-group">
+					<view class="title">定义颜色</view>
+					<checkbox class='round blue' :class="checkbox[2].checked?'checked':''" :checked="checkbox[2].checked?true:false"
+					 value="C"></checkbox>
+				</view>
+				<!-- #endif -->
+			</checkbox-group>
+			<view class="cu-bar bg-white margin-top">
+				<view class="action">
+					图片上传
+				</view>
+				<view class="action">
+					{{imgList.length}}/4
+				</view>
+			</view>
+			<view class="cu-form-group">
+				<view class="grid col-4 grid-square flex-sub">
+					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
+					 <image :src="imgList[index]" mode="aspectFill"></image>
+						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
+							<text class='cuIcon-close'></text>
+						</view>
+					</view>
+					<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
+						<text class='cuIcon-cameraadd'></text>
+					</view>
+				</view>
+			</view>
+			<view class="cu-form-group margin-top">
+				<view class="title">头像</view>
+				<view class="cu-avatar radius bg-gray"></view>
+			</view>
+			<!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 -->
+			<view class="cu-form-group margin-top">
+				<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaAInput" placeholder="多行文本输入框"></textarea>
+			</view>
+			<view class="cu-form-group align-start">
+				<view class="title">文本框</view>
+				<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaBInput" placeholder="多行文本输入框"></textarea>
+			</view>
+		</form>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				index: -1,
+				picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
+				multiArray: [
+					['无脊柱动物', '脊柱动物'],
+					['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
+					['猪肉绦虫', '吸血虫']
+				],
+				objectMultiArray: [
+					[{
+							id: 0,
+							name: '无脊柱动物'
+						},
+						{
+							id: 1,
+							name: '脊柱动物'
+						}
+					],
+					[{
+							id: 0,
+							name: '扁性动物'
+						},
+						{
+							id: 1,
+							name: '线形动物'
+						},
+						{
+							id: 2,
+							name: '环节动物'
+						},
+						{
+							id: 3,
+							name: '软体动物'
+						},
+						{
+							id: 3,
+							name: '节肢动物'
+						}
+					],
+					[{
+							id: 0,
+							name: '猪肉绦虫'
+						},
+						{
+							id: 1,
+							name: '吸血虫'
+						}
+					]
+				],
+				multiIndex: [0, 0, 0],
+				time: '12:01',
+				date: '2018-12-25',
+				region: ['广东省', '广州市', '海珠区'],
+				switchA: false,
+				switchB: true,
+				switchC: false,
+				switchD: false,
+				radio: 'A',
+				checkbox: [{
+					value: 'A',
+					checked: true
+				}, {
+					value: 'B',
+					checked: true
+				}, {
+					value: 'C',
+					checked: false
+				}],
+				imgList: [],
+				modalName: null,
+				textareaAValue: '',
+				textareaBValue: ''
+			};
+		},
+		methods: {
+			PickerChange(e) {
+				this.index = e.detail.value
+			},
+			MultiChange(e) {
+				this.multiIndex = e.detail.value
+			},
+			MultiColumnChange(e) {
+				let data = {
+					multiArray: this.multiArray,
+					multiIndex: this.multiIndex
+				};
+				data.multiIndex[e.detail.column] = e.detail.value;
+				switch (e.detail.column) {
+					case 0:
+						switch (data.multiIndex[0]) {
+							case 0:
+								data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
+								data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
+								break;
+							case 1:
+								data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
+								data.multiArray[2] = ['鲫鱼', '带鱼'];
+								break;
+						}
+						data.multiIndex[1] = 0;
+						data.multiIndex[2] = 0;
+						break;
+					case 1:
+						switch (data.multiIndex[0]) {
+							case 0:
+								switch (data.multiIndex[1]) {
+									case 0:
+										data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
+										break;
+									case 1:
+										data.multiArray[2] = ['蛔虫'];
+										break;
+									case 2:
+										data.multiArray[2] = ['蚂蚁', '蚂蟥'];
+										break;
+									case 3:
+										data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
+										break;
+									case 4:
+										data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
+										break;
+								}
+								break;
+							case 1:
+								switch (data.multiIndex[1]) {
+									case 0:
+										data.multiArray[2] = ['鲫鱼', '带鱼'];
+										break;
+									case 1:
+										data.multiArray[2] = ['青蛙', '娃娃鱼'];
+										break;
+									case 2:
+										data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
+										break;
+								}
+								break;
+						}
+						data.multiIndex[2] = 0;
+						break;
+				}
+				this.multiArray = data.multiArray;
+				this.multiIndex = data.multiIndex;
+			},
+			TimeChange(e) {
+				this.time = e.detail.value
+			},
+			DateChange(e) {
+				this.date = e.detail.value
+			},
+			RegionChange(e) {
+				this.region = e.detail.value
+			},
+			SwitchA(e) {
+				this.switchA = e.detail.value
+			},
+			SwitchB(e) {
+				this.switchB = e.detail.value
+			},
+			SwitchC(e) {
+				this.switchC = e.detail.value
+			},
+			SwitchD(e) {
+				this.switchD = e.detail.value
+			},
+			RadioChange(e) {
+				this.radio = e.detail.value
+			},
+			CheckboxChange(e) {
+				var items = this.checkbox,
+					values = e.detail.value;
+				for (var i = 0, lenI = items.length; i < lenI; ++i) {
+					items[i].checked = false;
+					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
+						if (items[i].value == values[j]) {
+							items[i].checked = true;
+							break
+						}
+					}
+				}
+			},
+			ChooseImage() {
+				uni.chooseImage({
+					count: 4, //默认9
+					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+					sourceType: ['album'], //从相册选择
+					success: (res) => {
+						if (this.imgList.length != 0) {
+							this.imgList = this.imgList.concat(res.tempFilePaths)
+						} else {
+							this.imgList = res.tempFilePaths
+						}
+					}
+				});
+			},
+			ViewImage(e) {
+				uni.previewImage({
+					urls: this.imgList,
+					current: e.currentTarget.dataset.url
+				});
+			},
+			DelImg(e) {
+				uni.showModal({
+					title: '召唤师',
+					content: '确定要删除这段回忆吗？',
+					cancelText: '再看看',
+					confirmText: '再见',
+					success: res => {
+						if (res.confirm) {
+							this.imgList.splice(e.currentTarget.dataset.index, 1)
+						}
+					}
+				})
+			},
+			textareaAInput(e) {
+				this.textareaAValue = e.detail.value
+			},
+			textareaBInput(e) {
+				this.textareaBValue = e.detail.value
+			}
+		}
+	}
+</script>
+
+<style>
+	.cu-form-group .title {
+		min-width: calc(4em + 15px);
+	}
+</style>

Colorui-UniApp/pages/component/home.vue

@@ -0,0 +1,92 @@
+<template name="components">
+	<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="'cuIcon-' + item.cuIcon"></text>
+				</navigator>
+			</view>
+			<view class="cu-tabbar-height"></view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				elements: [{
+						title: '操作条',
+						name: 'bar',
+						color: 'purple',
+						cuIcon: 'vipcard'
+					},
+					{
+						title: '导航栏 ',
+						name: 'nav',
+						color: 'mauve',
+						cuIcon: 'formfill'
+					},
+					{
+						title: '列表',
+						name: 'list',
+						color: 'pink',
+						cuIcon: 'list'
+					},
+					{
+						title: '卡片',
+						name: 'card',
+						color: 'brown',
+						cuIcon: 'newsfill'
+					},
+					{
+						title: '表单',
+						name: 'form',
+						color: 'red',
+						cuIcon: 'formfill'
+					},
+					{
+						title: '时间轴',
+						name: 'timeline',
+						color: 'orange',
+						cuIcon: 'timefill'
+					},
+					{
+						title: '聊天',
+						name: 'chat',
+						color: 'green',
+						cuIcon: 'messagefill'
+					},
+					{
+						title: '轮播',
+						name: 'swiper',
+						color: 'olive',
+						cuIcon: 'album'
+					},
+					{
+						title: '模态框',
+						name: 'modal',
+						color: 'grey',
+						cuIcon: 'squarecheckfill'
+					},
+					{
+						title: '步骤条',
+						name: 'steps',
+						color: 'cyan',
+						cuIcon: 'roundcheckfill'
+					}
+				],
+			};
+		}
+	}
+</script>
+
+<style>
+	.page {
+		height: 100vh;
+	}
+</style>

Colorui-UniApp/pages/component/list.vue

@@ -0,0 +1,425 @@
+<template>
+	<view>
+		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
+			<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="cuIcon-title text-orange "></text> 宫格列表
+				</view>
+				<view class="action">
+					<button class="cu-btn bg-green shadow" @tap="showModal" data-target="gridModal">设置</button>
+				</view>
+			</view>
+			<view class="cu-modal" :class="modalName=='gridModal'?'show':''" @tap="hideModal">
+				<view class="cu-dialog" @tap.stop>
+					<radio-group class="block" @change="Gridchange">
+						<view class="cu-list menu text-left">
+							<view class="cu-item" v-for="(item,index) in 3" :key="index">
+								<label class="flex justify-between align-center flex-sub">
+									<view class="flex-sub">{{index +3}} 列</view>
+									<radio class="round" :value="(index + 3) + ''" :class="gridCol==index+3?'checked':''" :checked="gridCol==index+3"></radio>
+								</label>
+							</view>
+						</view>
+					</radio-group>
+					<view class="cu-list menu text-left solid-top">
+						<view class="cu-item">
+							<view class="content">
+								<text class="text-grey">边框</text>
+							</view>
+							<view class="action">
+								<switch @change="Gridswitch" :class="gridBorder?'checked':''" :checked="gridBorder?true:false"></switch>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
+				<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*2">
+					<view :class="['cuIcon-' + item.cuIcon,'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>
+					</view>
+					<text>{{item.name}}</text>
+				</view>
+			</view>
+
+
+			<view class="cu-bar bg-white solid-bottom margin-top">
+				<view class="action">
+					<text class="cuIcon-title text-orange"></text> 菜单列表
+				</view>
+				<view class="action">
+					<button class="cu-btn bg-green shadow" @tap="showModal" data-target="menuModal">设置</button>
+				</view>
+			</view>
+			<view class="cu-modal" :class="modalName=='menuModal'?'show':''" @tap="hideModal">
+				<view class="cu-dialog" @tap.stop>
+					<view class="cu-list menu text-left solid-top">
+						<view class="cu-item">
+							<view class="content">
+								<text class="text-grey">短边框</text>
+							</view>
+							<view class="action">
+								<switch @change="MenuBorder" :class="menuBorder?'checked':''" :checked="menuBorder?true:false"></switch>
+							</view>
+						</view>
+						<view class="cu-item">
+							<view class="content">
+								<text class="text-grey">箭头</text>
+							</view>
+							<view class="action">
+								<switch @change="MenuArrow" :class="menuArrow?'checked':''" :checked="menuArrow?true:false"></switch>
+							</view>
+						</view>
+						<view class="cu-item">
+							<view class="content">
+								<text class="text-grey">卡片</text>
+							</view>
+							<view class="action">
+								<switch @change="MenuCard" :class="menuCard?'checked':''" :checked="menuCard?true:false"></switch>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<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="cuIcon-circlefill text-grey"></text>
+						<text class="text-grey">图标 + 标题</text>
+					</view>
+				</view>
+				<view class="cu-item" :class="menuArrow?'arrow':''">
+					<view class="content">
+						<image src="/static/logo.png" class="png" mode="aspectFit"></image>
+						<text class="text-grey">图片 + 标题</text>
+					</view>
+				</view>
+				<view class="cu-item" :class="menuArrow?'arrow':''">
+					<button class="cu-btn content" open-type="contact">
+						<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="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="cuIcon-emojiflashfill text-pink"></text>
+						<text class="text-grey">头像组</text>
+					</view>
+					<view class="action">
+						<view class="cu-avatar-group">
+							<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
+							<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
+							<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
+							<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg);"></view>
+						</view>
+						<text class="text-grey text-sm">4 人</text>
+					</view>
+				</view>
+				<view class="cu-item" :class="menuArrow?'arrow':''">
+					<view class="content">
+						<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="cuIcon-upload"></text> 上传</button>
+					</view>
+				</view>
+				<view class="cu-item" :class="menuArrow?'arrow':''">
+					<view class="content">
+						<text class="cuIcon-tagfill text-red  margin-right-xs"></text>
+						<text class="text-grey">标签</text>
+					</view>
+					<view class="action">
+						<view class="cu-tag round bg-orange light">音乐</view>
+						<view class="cu-tag round bg-olive light">电影</view>
+						<view class="cu-tag round bg-blue light">旅行</view>
+					</view>
+				</view>
+				<view class="cu-item" :class="menuArrow?'arrow':''">
+					<view class="content">
+						<text class="cuIcon-warn text-green"></text>
+						<text class="text-grey">文本</text>
+					</view>
+					<view class="action">
+						<text class="text-grey text-sm">小目标还没有实现！</text>
+					</view>
+				</view>
+				<view class="cu-item">
+					<view class="content padding-tb-sm">
+						<view>
+							<text class="cuIcon-clothesfill text-blue margin-right-xs"></text> 多行Item</view>
+						<view class="text-gray text-sm">
+							<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>
+					</view>
+				</view>
+			</view>
+
+			<view class="cu-bar bg-white solid-bottom margin-top">
+				<view class="action">
+					<text class="cuIcon-title text-orange "></text> 消息列表
+				</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">
+							<view class="text-cut">
+								<text class="cuIcon-infofill text-red  margin-right-xs"></text>
+								我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
+							</view> </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">
+							<view class="text-cut">瓦洛兰之盾-塔里克</view>
+							<view class="cu-tag round bg-orange sm">战士</view>
+						</view>
+						<view class="text-gray text-sm flex">
+							<view class="text-cut">
+								塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。
+							</view>
+						</view>
+					</view>
+					<view class="action">
+						<view class="text-grey text-xs">22:20</view>
+						<view class="cuIcon-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"><view class="text-cut">莫甘娜</view></view>
+						<view class="text-gray text-sm flex"> <view class="text-cut">凯尔，你被自己的光芒变的盲目！</view></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><view class="text-cut">伊泽瑞尔</view>
+							<view class="cu-tag round bg-orange sm">断开连接...</view>
+						</view>
+						<view class="text-gray text-sm flex"> <view class="text-cut"> 等我回来一个打十个</view></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>
+							<view class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</view>
+							<view class="cu-tag round bg-orange sm">6人</view>
+						</view>
+						<view class="text-gray text-sm flex">
+							<view class="text-cut"> 伊泽瑞尔：<text class="cuIcon-locationfill text-orange margin-right-xs"></text> 传送中...</view></view>
+					</view>
+					<view class="action">
+						<view class="text-grey text-xs">22:20</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="cuIcon-title text-orange "></text> 列表左滑
+				</view>
+			</view>
+			<view class="cu-list menu-avatar">
+				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in 4" :key="index"
+				 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
+					<view class="cu-avatar round lg" :style="[{backgroundImage:'url(https://ossweb-img.qq.com/images/lol/web201310/skin/big2100'+ (index+2) +'.jpg)'}]"></view>
+					<view class="content">
+						<view class="text-grey">文晓港</view>
+						<view class="text-gray text-sm">
+							<text class="cuIcon-infofill text-red  margin-right-xs"></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 class="move">
+						<view class="bg-grey">置顶</view>
+						<view class="bg-red">删除</view>
+					</view>
+				</view>
+			</view>
+
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				cuIconList: [{
+					cuIcon: 'cardboardfill',
+					color: 'red',
+					badge: 120,
+					name: 'VR'
+				}, {
+					cuIcon: 'recordfill',
+					color: 'orange',
+					badge: 1,
+					name: '录像'
+				}, {
+					cuIcon: 'picfill',
+					color: 'yellow',
+					badge: 0,
+					name: '图像'
+				}, {
+					cuIcon: 'noticefill',
+					color: 'olive',
+					badge: 22,
+					name: '通知'
+				}, {
+					cuIcon: 'upstagefill',
+					color: 'cyan',
+					badge: 0,
+					name: '排行榜'
+				}, {
+					cuIcon: 'clothesfill',
+					color: 'blue',
+					badge: 0,
+					name: '皮肤'
+				}, {
+					cuIcon: 'discoverfill',
+					color: 'purple',
+					badge: 0,
+					name: '发现'
+				}, {
+					cuIcon: 'questionfill',
+					color: 'mauve',
+					badge: 0,
+					name: '帮助'
+				}, {
+					cuIcon: 'commandfill',
+					color: 'purple',
+					badge: 0,
+					name: '问答'
+				}, {
+					cuIcon: 'brandfill',
+					color: 'mauve',
+					badge: 0,
+					name: '版权'
+				}],
+				modalName: null,
+				gridCol: 3,
+				gridBorder: false,
+				menuBorder: false,
+				menuArrow: false,
+				menuCard: false,
+				skin: false,
+				listTouchStart: 0,
+				listTouchDirection: null,
+			};
+		},
+		methods: {
+			showModal(e) {
+				this.modalName = e.currentTarget.dataset.target
+			},
+			hideModal(e) {
+				this.modalName = null
+			},
+			Gridchange(e) {
+				this.gridCol = e.detail.value
+			},
+			Gridswitch(e) {
+				this.gridBorder = e.detail.value
+			},
+			MenuBorder(e) {
+				this.menuBorder = e.detail.value
+			},
+			MenuArrow(e) {
+				this.menuArrow = e.detail.value
+			},
+			MenuCard(e) {
+				this.menuCard = e.detail.value
+			},
+			SwitchSex(e) {
+				this.skin = e.detail.value
+			},
+
+			// ListTouch触摸开始
+			ListTouchStart(e) {
+				this.listTouchStart = e.touches[0].pageX
+			},
+
+			// ListTouch计算方向
+			ListTouchMove(e) {
+				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
+			},
+
+			// ListTouch计算滚动
+			ListTouchEnd(e) {
+				if (this.listTouchDirection == 'left') {
+					this.modalName = e.currentTarget.dataset.target
+				} else {
+					this.modalName = null
+				}
+				this.listTouchDirection = null
+			}
+		}
+	}
+</script>
+
+<style>
+	.page {
+		height: 100Vh;
+		width: 100vw;
+	}
+
+	.page.show {
+		overflow: hidden;
+	}
+
+	.switch-sex::after {
+		content: "\e716";
+	}
+
+	.switch-sex::before {
+		content: "\e7a9";
+	}
+
+	.switch-music::after {
+		content: "\e66a";
+	}
+
+	.switch-music::before {
+		content: "\e6db";
+	}
+</style>

Colorui-UniApp/pages/component/modal.vue

@@ -0,0 +1,279 @@
+<template>
+	<view>
+		<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="cuIcon-title text-orange "></text> 普通窗口
+			</view>
+			<view class="action">
+				<button class="cu-btn bg-green shadow" @tap="showModal" data-target="Modal">Modal</button>
+			</view>
+		</view>
+		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
+			<view class="cu-dialog">
+				<view class="cu-bar bg-white justify-end">
+					<view class="content">Modal标题</view>
+					<view class="action" @tap="hideModal">
+						<text class="cuIcon-close text-red"></text>
+					</view>
+				</view>
+				<view class="padding-xl">
+					Modal 内容。
+				</view>
+			</view>
+		</view>
+
+		<view class="cu-bar bg-white margin-top">
+			<view class="action">
+				<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>
+			</view>
+		</view>
+		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
+			<view class="cu-dialog">
+				<view class="cu-bar bg-white">
+					<view class="action text-green">确定</view>
+					<view class="action text-blue" @tap="hideModal">取消</view>
+				</view>
+				<view class="padding-xl">
+					Modal 内容。
+				</view>
+			</view>
+		</view>
+
+		<view class="cu-bar bg-white margin-top">
+			<view class="action">
+				<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>
+				<button class="cu-btn bg-blue shadow margin-left" @tap="showModal" data-target="DialogModal2">Dialog</button>
+			</view>
+		</view>
+		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
+			<view class="cu-dialog">
+				<view class="cu-bar bg-white justify-end">
+					<view class="content">Modal标题</view>
+					<view class="action" @tap="hideModal">
+						<text class="cuIcon-close text-red"></text>
+					</view>
+				</view>
+				<view class="padding-xl">
+					Modal 内容。
+				</view>
+				<view class="cu-bar bg-white justify-end">
+					<view class="action">
+						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
+						<button class="cu-btn bg-green margin-left" @tap="hideModal">确定</button>
+
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="cu-modal" :class="modalName=='DialogModal2'?'show':''">
+			<view class="cu-dialog">
+				<view class="cu-bar bg-white justify-end">
+					<view class="content">Modal标题</view>
+					<view class="action" @tap="hideModal">
+						<text class="cuIcon-close text-red"></text>
+					</view>
+				</view>
+				<view class="padding-xl">
+					Modal 内容。
+				</view>
+				<view class="cu-bar bg-white">
+					<view class="action margin-0 flex-sub text-green " @tap="hideModal">
+						<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>
+			</view>
+		</view>
+
+		<view class="cu-bar bg-white margin-top">
+			<view class="action">
+				<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>
+			</view>
+		</view>
+
+		<view class="cu-modal" :class="modalName=='Image'?'show':''">
+			<view class="cu-dialog">
+				<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="cuIcon-close "></text>
+						</view>
+					</view>
+				</view>
+				<view class="cu-bar bg-white">
+					<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">我知道了</view>
+				</view>
+			</view>
+		</view>
+
+
+		<view class="cu-bar bg-white margin-top">
+			<view class="action">
+				<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>
+			</view>
+		</view>
+
+		<view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
+			<view class="cu-dialog" @tap.stop="">
+				<radio-group class="block" @change="RadioChange">
+					<view class="cu-list menu text-left">
+						<view class="cu-item" v-for="(item,index) in 5" :key="index">
+							<label class="flex justify-between align-center flex-sub">
+								<view class="flex-sub">Item {{index +1}}</view>
+								<radio class="round" :class="radio=='radio' + index?'checked':''" :checked="radio=='radio' + index?true:false"
+								 :value="'radio' + index"></radio>
+							</label>
+						</view>
+					</view>
+				</radio-group>
+			</view>
+		</view>
+
+		<view class="cu-bar bg-white margin-top">
+			<view class="action">
+				<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>
+			</view>
+		</view>
+		<view class="cu-modal bottom-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
+			<view class="cu-dialog" @tap.stop="">
+				<view class="cu-bar bg-white">
+					<view class="action text-blue" @tap="hideModal">取消</view>
+					<view class="action text-green" @tap="hideModal">确定</view>
+				</view>
+				<view class="grid col-3 padding-sm">
+					<view v-for="(item,index) in checkbox" class="padding-xs" :key="index">
+						<button class="cu-btn orange lg block" :class="item.checked?'bg-orange':'line-orange'" @tap="ChooseCheckbox"
+						 :data-value="item.value"> {{item.name}}
+							<view class="cu-tag sm round" :class="item.checked?'bg-white text-orange':'bg-orange'" v-if="item.hot">HOT</view>
+						</button>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="cu-bar bg-white margin-top">
+			<view class="action">
+				<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>
+				<button class="cu-btn bg-blue shadow margin-left" @tap="showModal" data-target="DrawerModalR">Right</button>
+			</view>
+		</view>
+		<view class="cu-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''" @tap="hideModal">
+			<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
+				<view class="cu-list menu text-left">
+					<view class="cu-item arrow" v-for="(item,index) in 5" :key="index">
+						<view class="content">
+							<view>Item {{index +1}}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="cu-modal drawer-modal justify-end" :class="modalName=='DrawerModalR'?'show':''" @tap="hideModal">
+			<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
+				<view class="cu-list menu text-left">
+					<view class="cu-item arrow" v-for="(item,index) in 5" :key="index">
+						<view class="content">
+							<view>Item {{index +1}}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				CustomBar: this.CustomBar,
+				modalName: null,
+				radio: 'radio1',
+				checkbox: [{
+					value: 0,
+					name: '10元',
+					checked: false,
+					hot: false,
+				}, {
+					value: 1,
+					name: '20元',
+					checked: true,
+					hot: false,
+				}, {
+					value: 2,
+					name: '30元',
+					checked: true,
+					hot: true,
+				}, {
+					value: 3,
+					name: '60元',
+					checked: false,
+					hot: true,
+				}, {
+					value: 4,
+					name: '80元',
+					checked: false,
+					hot: false,
+				}, {
+					value: 5,
+					name: '100元',
+					checked: false,
+					hot: false,
+				}]
+			};
+		},
+		methods: {
+			showModal(e) {
+				this.modalName = e.currentTarget.dataset.target
+			},
+			hideModal(e) {
+				this.modalName = null
+			},
+			RadioChange(e) {
+				this.radio = e.detail.value
+			},
+			ChooseCheckbox(e) {
+				let items = this.checkbox;
+				let values = e.currentTarget.dataset.value;
+				for (let i = 0, lenI = items.length; i < lenI; ++i) {
+					if (items[i].value == values) {
+						items[i].checked = !items[i].checked;
+						break
+					}
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+	button .cu-tag {
+		position: absolute;
+		top: 8upx;
+		right: 8upx;
+	}
+</style>

Colorui-UniApp/pages/component/nav.vue

@@ -0,0 +1,90 @@
+<template>
+	<view>
+		<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>
+		<view class="cu-bar bg-white solid-bottom">
+			<view class="action">
+				<text class="cuIcon-title text-orange"></text> 默认
+			</view>
+		</view>
+		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
+			<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in 10" :key="index" @tap="tabSelect" :data-id="index">
+				Tab{{index}}
+			</view>
+		</scroll-view>
+
+		<view class="cu-bar bg-white margin-top solid-bottom">
+			<view class="action">
+				<text class="cuIcon-title text-orange"></text> 居中
+			</view>
+		</view>
+		<scroll-view scroll-x class="bg-white nav text-center">
+			<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in 3" :key="index" @tap="tabSelect" :data-id="index">
+				Tab{{index}}
+			</view>
+		</scroll-view>
+
+		<view class="cu-bar bg-white margin-top solid-bottom">
+			<view class="action">
+				<text class="cuIcon-title text-orange"></text> 平分
+			</view>
+		</view>
+		<scroll-view scroll-x class="bg-white nav">
+			<view class="flex text-center">
+				<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in 4" :key="index" @tap="tabSelect" :data-id="index">
+					Tab{{index}}
+				</view>
+			</view>
+		</scroll-view>
+		<view class="cu-bar bg-white margin-top solid-bottom">
+			<view class="action">
+				<text class="cuIcon-title text-orange"></text> 背景
+			</view>
+		</view>
+		<scroll-view scroll-x class="bg-red nav text-center">
+			<view class="cu-item" :class="index==TabCur?'text-white cur':''" v-for="(item,index) in 3" :key="index" @tap="tabSelect" :data-id="index">
+				Tab{{index}}
+			</view>
+		</scroll-view>
+		<view class="cu-bar bg-white margin-top solid-bottom">
+			<view class="action">
+				<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="cuIcon-camerafill"></text> 数码
+			</view>
+			<view class="cu-item" :class="1==TabCur?'text-white cur':''" @tap="tabSelect" data-id="1">
+				<text class="cuIcon-upstagefill"></text> 排行榜
+			</view>
+			<view class="cu-item" :class="2==TabCur?'text-white cur':''" @tap="tabSelect" data-id="2">
+				<text class="cuIcon-clothesfill"></text> 皮肤
+			</view>
+		</scroll-view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				TabCur: 0,
+				scrollLeft: 0
+			};
+		},
+		methods: {
+			tabSelect(e) {
+				this.TabCur = e.currentTarget.dataset.id;
+				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

Colorui-UniApp/pages/component/steps.vue

@@ -0,0 +1,114 @@
+<template>
+	<view>
+		<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="cuIcon-title text-orange"></text> 基本用法
+			</view>
+			<view class="action">
+				<button class="cu-btn bg-green shadow" @tap="BasicsSteps">下一步</button>
+			</view>
+		</view>
+		<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="'cuIcon-' + item.cuIcon"></text> {{item.name}}
+				</view>
+			</view>
+		</view>
+
+		<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?'cuIcon-title':'cuIcon-' + item.cuIcon"></text> {{item.name}}
+				</view>
+			</view>
+		</view>
+
+		<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="'cuIcon-' + item.cuIcon"></text> {{item.name}}
+				</view>
+			</view>
+		</view>
+		<view class="cu-bar bg-white solid-bottom margin-top">
+			<view class="action">
+				<text class="cuIcon-title text-orange"></text> 数字完成
+			</view>
+			<view class="action">
+				<button class="cu-btn bg-green shadow" @tap="NumSteps">下一步</button>
+			</view>
+		</view>
+		<view class="bg-white padding">
+			<view class="cu-steps">
+				<view class="cu-item" :class="index>num?'':'text-blue'" v-for="(item,index) in numList" :key="index">
+					<text class="num" :class="index==2?'err':''" :data-index="index + 1"></text> {{item.name}}
+				</view>
+			</view>
+		</view>
+		<view class="cu-bar bg-white solid-bottom margin-top">
+			<view class="action">
+				<text class="cuIcon-title text-orange"></text> 多级显示
+			</view>
+			<view class="action">
+				<button class="cu-btn bg-green shadow" @tap="ScrollSteps">下一步</button>
+			</view>
+		</view>
+		<scroll-view scroll-x class="bg-white padding response cu-steps steps-bottom" :scroll-into-view="'scroll-' + scroll"
+		 scroll-with-animation>
+			<view class="cu-item padding-lr-xl" :class="index>scroll?'':'text-blue'" v-for="(item,index) in 10" :key="index" :id="'scroll-' + index">
+				Level {{index + 1}} <text class="num" :data-index="index + 1"></text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				basicsList: [{
+					cuIcon: 'usefullfill',
+					name: '开始'
+				}, {
+					cuIcon: 'radioboxfill',
+					name: '等待'
+				}, {
+					cuIcon: 'roundclosefill',
+					name: '错误'
+				}, {
+					cuIcon: 'roundcheckfill',
+					name: '完成'
+				}, ],
+				basics: 0,
+				numList: [{
+					name: '开始'
+				}, {
+					name: '等待'
+				}, {
+					name: '错误'
+				}, {
+					name: '完成'
+				}, ],
+				num: 0,
+				scroll: 0
+			};
+		},
+		methods: {
+			BasicsSteps() {
+				this.basics= this.basics == this.basicsList.length - 1 ? 0 : this.basics + 1				
+			},
+			NumSteps() {
+				this.num= this.num == this.numList.length - 1 ? 0 : this.num + 1				
+			},
+			ScrollSteps() {
+				this.scroll= this.scroll == 9 ? 0 : this.scroll + 1				
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

Colorui-UniApp/pages/component/swiper.vue

@@ -0,0 +1,162 @@
+<template>
+	<view>
+		<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="cuIcon-title text-pink"></text> 全屏限高轮播
+			</view>
+			<view class="action">
+				<switch @change="DotStyle" :class="dotStyle?'checked':''" :checked="dotStyle?true:false"></switch>
+			</view>
+		</view>
+		<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
+		 :autoplay="true" interval="5000" duration="500">
+			<swiper-item v-for="(item,index) in swiperList" :key="index">
+				<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>
+			</swiper-item>
+		</swiper>
+		<!-- #ifndef MP-ALIPAY -->
+		<view class="cu-bar bg-white margin-top">
+			<view class="action">
+				<text class="cuIcon-title text-pink"></text> 卡片式轮播
+			</view>
+		</view>
+		<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
+		 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
+		 indicator-active-color="#0081ff">
+			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
+				<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>
+			</swiper-item>
+		</swiper>
+		<view class="cu-bar bg-white margin-top">
+			<view class="action">
+				<text class="cuIcon-title text-pink"></text> 堆叠式轮播 
+			</view>
+		</view>
+		<view class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
+			<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>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				cardCur: 0,
+				swiperList: [{
+					id: 0,
+					type: 'image',
+					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
+				}, {
+					id: 1,
+					type: 'image',
+					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
+				}, {
+					id: 2,
+					type: 'image',
+					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
+				}, {
+					id: 3,
+					type: 'image',
+					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
+				}, {
+					id: 4,
+					type: 'image',
+					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
+				}, {
+					id: 5,
+					type: 'image',
+					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
+				}, {
+					id: 6,
+					type: 'image',
+					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
+				}],
+				dotStyle: false,
+				towerStart: 0,
+				direction: ''
+			};
+		},
+		onLoad() {
+			this.TowerSwiper('swiperList');
+			// 初始化towerSwiper 传已有的数组名即可
+		},
+		methods: {
+			DotStyle(e) {
+				this.dotStyle = e.detail.value
+			},
+			// cardSwiper
+			cardSwiper(e) {
+				this.cardCur = e.detail.current
+			},
+			// towerSwiper
+			// 初始化towerSwiper
+			TowerSwiper(name) {
+				let list = this[name];
+				for (let i = 0; i < list.length; i++) {
+					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
+					list[i].mLeft = i - parseInt(list.length / 2)
+				}
+				this.swiperList = list
+			},
+
+			// towerSwiper触摸开始
+			TowerStart(e) {
+				this.towerStart = e.touches[0].pageX
+			},
+
+			// towerSwiper计算方向
+			TowerMove(e) {
+				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
+			},
+
+			// towerSwiper计算滚动
+			TowerEnd(e) {
+				let direction = this.direction;
+				let list = this.swiperList;
+				if (direction == 'right') {
+					let mLeft = list[0].mLeft;
+					let zIndex = list[0].zIndex;
+					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
+					}
+					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 = 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>

Colorui-UniApp/pages/component/timeline.vue

@@ -0,0 +1,101 @@
+<template>
+	<view>
+		<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 cuIcon-noticefill">
+				<view class="content bg-green shadow-blur">
+					<text>22:22</text> 【广州市】快件已到达地球
+				</view>
+			</view>
+			<view class="cu-item text-red cuIcon-attentionforbidfill">
+				<view class="content bg-red shadow-blur">
+					这是第一次，我家的铲屎官走了这么久。久到足足有三天！！
+				</view>
+			</view>
+			<view class="cu-item text-grey cuIcon-evaluate_fill">
+				<view class="content bg-grey shadow-blur">
+					这是第一次，我家的铲屎官走了这么久。
+				</view>
+			</view>
+			<view class="cu-item text-blue">
+				<view class="bg-blue content">
+					<text>20:00</text> 【月球】快件已到达月球，准备发往地球
+				</view>
+				<view class="bg-cyan content">
+					<text>10:00</text> 【银河系】快件已到达银河系，准备发往月球
+				</view>
+			</view>
+		</view>
+
+		<view class="cu-timeline">
+			<view class="cu-time">06-17</view>
+			<view class="cu-item">
+				<view class="content">
+					<text>01:30</text> 【喵星】 MX-12138 已揽收，准备发往银河系
+				</view>
+			</view>
+		</view>
+
+		<view class="cu-timeline">
+			<view class="cu-time">06-17</view>
+			<view class="cu-item">
+				<view class="content">
+					<view class="cu-capsule radius">
+						<view class="cu-tag bg-cyan">上午</view>
+						<view class="cu-tag line-cyan">10:00</view>
+					</view>
+					<view class="margin-top">这是第一次，我家的铲屎官走了这么久。久到足足有三天！！ 在听到他的脚步声响在楼梯间的那一刻，我简直想要破门而出，对着他狠狠地吼上10分钟，然后再看心情要不要他进门。</view>
+				</view>
+			</view>
+			<view class="cu-item text-blue">
+				<view class="bg-blue shadow-blur content">
+					<view class="cu-list menu-avatar radius">
+						<view class="cu-item">
+							<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
+							<view class="content">
+								<view class="text-grey">文晓港</view>
+								<view class="text-gray text-sm">
+									<text class="cuIcon-infofill text-red"></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/web201310/skin/big10006.jpg);">
+								<view class="cu-tag badge">99+</view>
+							</view>
+							<view class="content">
+								<view class="text-grey">文晓港
+									<view class="cu-tag round orange sm">SVIP</view>
+								</view>
+								<view class="text-gray text-sm">
+									<text class="cuIcon-redpacket_fill text-red"></text> 收到红包</view>
+							</view>
+							<view class="action">
+								<view class="text-grey text-xs">22:20</view>
+								<text class="cuIcon-notice_forbid_fill text-gray"></text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			};
+		}
+	}
+</script>
+
+<style>
+
+</style>

Colorui-UniApp/pages/index/index.vue

@@ -0,0 +1,46 @@
+<template>
+	<view>
+		<basics v-if="PageCur=='basics'"></basics>
+		<components v-if="PageCur=='component'"></components>
+		<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='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='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='cuIcon-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>
+
+<script>
+	export default {
+		data() {
+		return {
+				PageCur: 'basics'
+			}
+		},
+		methods: {
+			NavChange: function(e) {
+				this.PageCur = e.currentTarget.dataset.cur
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

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="cuIcon-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="cuIcon-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="cuIcon-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="cuIcon-title text-orange"></text> Gif动画
+			</view>
+		</view>
+		<view class="margin radius bg-gradual-green shadow-blur">
+			<image src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/demo/images/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100upx"></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:240upx"></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:240upx"></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:240upx"></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:240upx"></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:240upx"></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:240upx"></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>

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="cuIcon-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="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="cuIcon-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: 100vw;
+		overflow: hidden;
+	}
+
+	.DrawerPage {
+		position: fixed;
+		width: 100vw;
+		height: 100vh;
+		left: 0vw;
+		background-color: #f1f1f1;
+		transition: all 0.4s;
+	}
+
+	.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.4s;
+		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.4s;
+	}
+
+	.DrawerClose.show {
+		opacity: 1;
+		pointer-events: all;
+		width: 15vw;
+		color: #fff;
+	}
+
+	.DrawerPage .cu-bar.tabbar .action button.cuIcon {
+		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>

Colorui-UniApp/pages/plugin/home.vue

@@ -0,0 +1,103 @@
+<template name="components">
+	<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="aspectFill" style="width: 240upx;height: 60upx;"></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 {
+		name: "components",
+		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;
+	}
+
+	.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>

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="cuIcon-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">
+			<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-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: 10upx;
+	}
+
+	.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>

Colorui-UniApp/pages/plugin/verticalnav.vue

@@ -0,0 +1,226 @@
+<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 - 375upx)"
+			 :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="cuIcon-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="cuIcon-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="cuIcon-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="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="cuIcon-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) {
+				// #ifdef MP-ALIPAY
+				   return false  //支付宝小程序暂时不支持双向联动 
+				// #endif
+				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;
+		flex: 1;
+	}
+</style>

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 weilanwl
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.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?a=1" 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 */
+....
+```
+
+### 从新项目开始
+下载源码解压获得`/template`，复制`/template`并重命名为你的项目，导入到小程序开发工具既可以开始你的新项目了
+
+### 使用自定义导航栏
+导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。
+
+`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    | 右侧区域(小程序端可使用范围很窄！)  | 
+
+## 赞赏
+<p align="center"><img src="https://image.weilanwl.com/colorui/githubAppreciate.jpg" alt="" style="max-width:100%;" width="600"></p>
+
+
+

demo/app.js

@@ -0,0 +1,100 @@
+//app.js
+App({
+  onLaunch: function() {
+    if (wx.cloud) {
+      wx.cloud.init({
+        traceUser: true
+      })
+    }
+    wx.getSystemInfo({
+      success: e => {
+        this.globalData.StatusBar = e.statusBarHeight;
+        let capsule = wx.getMenuButtonBoundingClientRect();
+		if (capsule) {
+		 	this.globalData.Custom = capsule;
+			this.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
+		} else {
+			this.globalData.CustomBar = e.statusBarHeight + 50;
+		}
+      }
+    })
+  },
+  globalData: {
+    ColorList: [{
+        title: '嫣红',
+        name: 'red',
+        color: '#e54d42'
+      },
+      {
+        title: '桔橙',
+        name: 'orange',
+        color: '#f37b1d'
+      },
+      {
+        title: '明黄',
+        name: 'yellow',
+        color: '#fbbd08'
+      },
+      {
+        title: '橄榄',
+        name: 'olive',
+        color: '#8dc63f'
+      },
+      {
+        title: '森绿',
+        name: 'green',
+        color: '#39b54a'
+      },
+      {
+        title: '天青',
+        name: 'cyan',
+        color: '#1cbbb4'
+      },
+      {
+        title: '海蓝',
+        name: 'blue',
+        color: '#0081ff'
+      },
+      {
+        title: '姹紫',
+        name: 'purple',
+        color: '#6739b6'
+      },
+      {
+        title: '木槿',
+        name: 'mauve',
+        color: '#9c26b0'
+      },
+      {
+        title: '桃粉',
+        name: 'pink',
+        color: '#e03997'
+      },
+      {
+        title: '棕褐',
+        name: 'brown',
+        color: '#a5673f'
+      },
+      {
+        title: '玄灰',
+        name: 'grey',
+        color: '#8799a3'
+      },
+      {
+        title: '草灰',
+        name: 'gray',
+        color: '#aaaaaa'
+      },
+      {
+        title: '墨黑',
+        name: 'black',
+        color: '#333333'
+      },
+      {
+        title: '雅白',
+        name: 'white',
+        color: '#ffffff'
+      },
+    ]
+  }
+})

demo/app.json

@@ -0,0 +1,49 @@
+{
+  "pages": [
+    "pages/index/index",
+    "pages/basics/home/home",
+    "pages/basics/layout/layout",
+    "pages/basics/button/button",
+    "pages/basics/button/design",
+    "pages/basics/tag/tag",
+    "pages/basics/avatar/avatar",
+    "pages/basics/progress/progress",
+    "pages/basics/shadow/shadow",
+    "pages/basics/background/background",
+    "pages/basics/text/text",
+    "pages/basics/icon/icon",
+    "pages/basics/loading/loading",
+    "pages/component/home/home",
+    "pages/component/list/list",
+    "pages/component/bar/bar",
+    "pages/component/timeline/timeline",
+    "pages/component/chat/chat",
+    "pages/component/form/form",
+    "pages/component/nav/nav",
+    "pages/component/card/card",
+    "pages/component/swiper/swiper",
+    "pages/component/modal/modal",
+    "pages/component/steps/steps",
+    "pages/plugin/home/home",
+    "pages/plugin/indexes/indexes",
+    "pages/plugin/gradual/gradual",
+    "pages/plugin/animation/animation",
+    "pages/about/about/about",
+    "pages/about/log/log",
+    "pages/about/test/list",
+    "pages/about/test/filter",
+    "pages/about/home/home",
+    "pages/plugin/drawer/drawer",
+    "pages/plugin/verticalnav/verticalnav"
+  ],
+  "window": {
+    "navigationBarBackgroundColor": "#39b54a",
+    "navigationBarTitleText": "Color UI",
+    "navigationStyle": "custom",
+    "navigationBarTextStyle": "white"
+  },
+  "usingComponents": {
+    "cu-custom": "/colorui/components/cu-custom"
+  },
+  "sitemapLocation": "sitemap21.json"
+}

demo/app.wxss

@@ -0,0 +1,107 @@
+@import "colorui/main.wxss";
+@import "colorui/icon.wxss";
+
+.scrollPage {
+  height: 100vh;
+}
+
+.nav-list {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0px 40rpx 0px;
+  justify-content: space-between;
+}
+
+.nav-li {
+  padding: 30rpx;
+  border-radius: 12rpx;
+  width: 45%;
+  margin: 0 2.5% 40rpx;
+  background-image: url(https://image.weilanwl.com/color2.0/cardBg.png);
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  z-index: 1;
+}
+
+.nav-li::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  background-color: inherit;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  bottom: -10%;
+  border-radius: 10rpx;
+  opacity: 0.2;
+  transform: scale(0.9, 0.9);
+}
+
+.nav-li.cur {
+  color: #fff;
+  background: rgb(94, 185, 94);
+  box-shadow: 4rpx 4rpx 6rpx rgba(94, 185, 94, 0.4);
+}
+
+.nav-title {
+  font-size: 32rpx;
+  font-weight: 300;
+}
+
+.nav-title::first-letter {
+  font-size: 40rpx;
+  margin-right: 4rpx;
+}
+
+.nav-name {
+  font-size: 28rpx;
+  text-transform: Capitalize;
+  margin-top: 20rpx;
+  position: relative;
+}
+
+.nav-name::before {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 40rpx;
+  height: 6rpx;
+  background: #fff;
+  bottom: 0;
+  right: 0;
+  opacity: 0.5;
+}
+
+.nav-name::after {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 100rpx;
+  height: 1px;
+  background: #fff;
+  bottom: 0;
+  right: 40rpx;
+  opacity: 0.3;
+}
+
+.nav-name::first-letter {
+  font-weight: bold;
+  font-size: 36rpx;
+  margin-right: 1px;
+}
+
+.nav-li text {
+  position: absolute;
+  right: 30rpx;
+  top: 30rpx;
+  font-size: 52rpx;
+  width: 60rpx;
+  height: 60rpx;
+  text-align: center;
+  line-height: 60rpx;
+}
+
+.text-light {
+  font-weight: 300;
+}

demo/colorui/animation.wxss

@@ -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)
+    }
+}

demo/colorui/components/cu-custom.js

@@ -0,0 +1,54 @@
+const app = getApp();
+Component({
+  /**
+   * 组件的一些选项
+   */
+  options: {
+    addGlobalClass: true,
+    multipleSlots: true
+  },
+  /**
+   * 组件的对外属性
+   */
+  properties: {
+    bgColor: {
+      type: String,
+      default: ''
+    }, 
+    isCustom: {
+      type: [Boolean, String],
+      default: false
+    },
+    isBack: {
+      type: [Boolean, String],
+      default: false
+    },
+    bgImage: {
+      type: String,
+      default: ''
+    },
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    StatusBar: app.globalData.StatusBar,
+    CustomBar: app.globalData.CustomBar,
+    Custom: app.globalData.Custom
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    BackPage() {
+      wx.navigateBack({
+        delta: 1
+      });
+    },
+    toHome(){
+      wx.reLaunch({
+        url: '/pages/index/index',
+      })
+    }
+  }
+})

demo/colorui/components/cu-custom.json

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

demo/colorui/components/cu-custom.wxml

@@ -0,0 +1,16 @@
+<view class="cu-custom" style="height:{{CustomBar}}px">
+  <view class="cu-bar fixed {{bgImage!=''?'none-bg text-white bg-img':''}} {{bgColor}}" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;{{bgImage?'background-image:url(' + bgImage+')':''}}">
+    <view class="action" bindtap="BackPage" wx:if="{{isBack}}">
+      <text class="cuIcon-back"></text>
+      <slot name="backText"></slot>
+    </view>
+    <view class="action border-custom"  wx:if="{{isCustom}}" style="width:{{Custom.width}}px;height:{{Custom.height}}px;margin-left:calc(750rpx - {{Custom.right}}px)">
+      <text class="cuIcon-back" bindtap="BackPage"></text>
+      <text class="cuIcon-homefill" bindtap="toHome"></text>
+    </view>
+    <view class="content" style="top:{{StatusBar}}px">
+      <slot name="content"></slot>
+    </view>
+    <slot name="right"></slot>
+  </view>
+</view>

demo/colorui/components/cu-custom.wxss

@@ -0,0 +1 @@
+/* colorui/components/cu-custom.wxss */

demo/pages/about/about/about.js

@@ -0,0 +1,14 @@
+const app = getApp();
+Page({
+  data: {
+    StatusBar: app.globalData.StatusBar,
+    CustomBar: app.globalData.CustomBar,
+    ColorList: app.globalData.ColorList,
+  },
+  onLoad: function () { },
+  pageBack() {
+    wx.navigateBack({
+      delta: 1
+    });
+  }
+});

demo/pages/about/about/about.json

@@ -0,0 +1 @@
+{}

demo/pages/about/about/about.wxml

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