diff --git a/components/qk/qk-send-sms-code/qk-send-sms-code.vue b/components/qk/qk-send-sms-code/qk-send-sms-code.vue
new file mode 100644
index 0000000..385d707
--- /dev/null
+++ b/components/qk/qk-send-sms-code/qk-send-sms-code.vue
@@ -0,0 +1,130 @@
+<template>
+	<view class="short-code-btn" hover-class="hover" @click="start">
+		<text class="inner-text" :class="reverseNumber==0?'inner-text-active':''">{{innerText}}</text>
+	</view>
+</template>
+
+<script>
+	function debounce(func, wait) {
+		let timer;
+		wait = wait || 500;
+		return function() {
+			let context = this;
+			let args = arguments;
+			if (timer) clearTimeout(timer);
+			let callNow = !timer;
+			timer = setTimeout(() => {
+				timer = null;
+			}, wait)
+			if (callNow) func.apply(context, args);
+		}
+	}
+	export default {
+		name: "uni-send-sms-code",
+		props: {
+			/**
+			 * 倒计时时长 s
+			 */
+			count: {
+				type: [String, Number],
+				default: 60
+			},
+			/**
+			 * 手机号码
+			 */
+			phone: {
+				type: [String, Number],
+				default: ''
+			},
+			/*
+				验证码类型，用于防止不同功能的验证码混用，目前支持的类型login登录、register注册、bind绑定手机、unbind解绑手机
+			*/
+			codeType:{
+				type: String,
+				default(){
+					return 'login'
+				}
+			}
+		},
+		data() {
+			return {
+				reverseNumber: 0,
+				reverseTimer: null
+			};
+		},
+		computed: {
+			innerText() {
+				if (this.reverseNumber == 0) return '获取验证码';
+				return this.reverseNumber + 's后获取';
+			}
+		},
+		created() {
+			this.initClick();
+		},
+		methods: {
+			initClick() {
+				this.start = debounce(() => {
+					if (this.reverseNumber != 0) return;
+					this.sendMsg();
+				})
+			},
+			sendMsg() {
+				let reg_phone = /^1\d{10}$/;
+				if(!reg_phone.test(this.phone))return uni.showToast({
+					title: '手机号格式错误',
+					icon: 'none'
+				});
+				uniCloud.callFunction({
+					name:'uni-id-cf',
+					data:{
+						action:'sendSmsCode',
+						params:{
+							"mobile": this.phone,
+							"type": this.codeType
+						},
+					},
+					success: ({result}) => {
+						console.log(result);
+						uni.showToast({
+							title: "短信验证码发送成功",
+							icon: 'none'
+						});
+						this.reverseNumber = Number(this.count);
+						this.getCode();
+						this.$emit('getCode');
+					}
+				})
+			},
+			getCode() {
+				if (this.reverseNumber == 0) {
+					clearTimeout(this.reverseTimer);
+					this.reverseTimer = null;
+					return;
+				}
+				this.reverseNumber--;
+				this.reverseTimer = setTimeout(() => {
+					this.getCode();
+				}, 1000)
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.short-code-btn {
+		width: 200rpx;
+		height: 85rpx;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+	}
+	.inner-text {
+		font-size: 26rpx;
+		color: #AAAAAA;
+	}
+	.inner-text-active {
+		color: #007aff;
+	}
+</style>
diff --git a/components/qk/qk-statusbar-block/qk-statusbar-block.vue b/components/qk/qk-statusbar-block/qk-statusbar-block.vue
new file mode 100644
index 0000000..f5b8142
--- /dev/null
+++ b/components/qk/qk-statusbar-block/qk-statusbar-block.vue
@@ -0,0 +1,20 @@
+<template>
+<view class="qk-statusbar-block" :style="{height: `${statusBarHeight}px`}">
+</view>
+</template>
+
+<script>
+export default {
+	data () {
+		return {
+			// 导航栏高度
+			statusBarHeight: uni.getSystemInfoSync()['statusBarHeight']
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.qk-statusbar-block {
+}
+</style>
diff --git a/components/thorui/tui-actionsheet/tui-actionsheet.vue b/components/thorui/tui-actionsheet/tui-actionsheet.vue
new file mode 100644
index 0000000..a21427a
--- /dev/null
+++ b/components/thorui/tui-actionsheet/tui-actionsheet.vue
@@ -0,0 +1,186 @@
+<template>
+	<view @touchmove.stop.prevent>
+		<view class="tui-actionsheet" :class="{'tui-actionsheet-show':show,'tui-actionsheet-radius':radius}">
+			<view class="tui-actionsheet-tips" :style="{fontSize:size+'rpx',color:color}" v-if="tips">
+				{{tips}}
+			</view>
+			<view :class="[isCancel?'tui-operate-box':'']">
+				<block v-for="(item,index) in itemList" :key="index">
+					<view class="tui-actionsheet-btn tui-actionsheet-divider" :class="{'tui-btn-last':!isCancel && index==itemList.length-1}"
+					 hover-class="tui-actionsheet-hover" :hover-stay-time="150" :data-index="index" :style="{color:item.color || '#2B2B2B'}"
+					 @tap="handleClickItem">{{item.text}}</view>
+				</block>
+			</view>
+			<view class="tui-actionsheet-btn tui-actionsheet-cancel" hover-class="tui-actionsheet-hover" :hover-stay-time="150"
+			 v-if="isCancel" @tap="handleClickCancel">取消</view>
+		</view>
+		<view class="tui-actionsheet-mask" :class="{'tui-mask-show':show}" @tap="handleClickMask"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tuiActionsheet",
+		props: {
+			//点击遮罩 是否可关闭
+			maskClosable: {
+				type: Boolean,
+				default: true
+			},
+			//显示操作菜单
+			show: {
+				type: Boolean,
+				default: false
+			},
+			//菜单按钮数组，自定义文本颜色，红色参考色：#e53a37
+			itemList: {
+				type: Array,
+				default: function() {
+					return [{
+						text: "确定",
+						color: "#2B2B2B"
+					}]
+				}
+			},
+			//提示文字
+			tips: {
+				type: String,
+				default: ""
+			},
+			//提示文字颜色
+			color: {
+				type: String,
+				default: "#808080"
+			},
+			//提示文字大小 rpx
+			size: {
+				type: Number,
+				default: 26
+			},
+			//是否需要圆角
+			radius: {
+				type: Boolean,
+				default: true
+			},
+			//是否需要取消按钮
+			isCancel: {
+				type: Boolean,
+				default: true
+			}
+		},
+		methods: {
+			handleClickMask() {
+				if (!this.maskClosable) return;
+				this.handleClickCancel();
+			},
+			handleClickItem(e) {
+				if (!this.show) return;
+				const index = Number(e.currentTarget.dataset.index);
+				this.$emit('click', {
+					index: index,
+					...this.itemList[index]
+				});
+			},
+			handleClickCancel() {
+				this.$emit('cancel');
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-actionsheet {
+		width: 100%;
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 9999;
+		visibility: hidden;
+		transform: translate3d(0, 100%, 0);
+		transform-origin: center;
+		transition: all 0.25s ease-in-out;
+		background-color: #F7F7F7;
+		min-height: 100rpx;
+	}
+
+	.tui-actionsheet-radius {
+		border-top-left-radius: 20rpx;
+		border-top-right-radius: 20rpx;
+		overflow: hidden;
+	}
+
+	.tui-actionsheet-show {
+		transform: translate3d(0, 0, 0);
+		visibility: visible;
+	}
+
+	.tui-actionsheet-tips {
+		width: 100%;
+		padding: 40rpx 60rpx;
+		box-sizing: border-box;
+		text-align: center;
+		background-color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.tui-operate-box {
+		padding-bottom: 12rpx;
+	}
+
+	.tui-actionsheet-btn {
+		width: 100%;
+		height: 100rpx;
+		background-color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		font-size: 34rpx;
+		position: relative;
+	}
+
+	.tui-btn-last {
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+
+	.tui-actionsheet-divider::before {
+		content: '';
+		width: 100%;
+		border-top: 1rpx solid #E7E7E7;
+		position: absolute;
+		top: 0;
+		left: 0;
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+	}
+
+	.tui-actionsheet-cancel {
+		color: #1a1a1a;
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+
+	.tui-actionsheet-hover {
+		background-color: #f7f7f9;
+	}
+
+	.tui-actionsheet-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.6);
+		z-index: 9996;
+		transition: all 0.3s ease-in-out;
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.tui-mask-show {
+		opacity: 1;
+		visibility: visible;
+	}
+</style>
diff --git a/components/thorui/tui-alert/tui-alert.vue b/components/thorui/tui-alert/tui-alert.vue
new file mode 100644
index 0000000..adb7b9e
--- /dev/null
+++ b/components/thorui/tui-alert/tui-alert.vue
@@ -0,0 +1,134 @@
+<template>
+	<view>
+		<view class="tui-alert-class tui-alert-box" :class="[show?'tui-alert-show':'']">
+			<view class="tui-alert-content" :style="{fontSize:size+'rpx',color:color}">
+				<slot></slot>
+			</view>
+			<view class="tui-alert-btn" :style="{color:btnColor}" hover-class="tui-alert-btn-hover" :hover-stay-time="150"
+			 @tap.stop="handleClick">{{btnText}}</view>
+		</view>
+		<view class="tui-alert-mask" :class="[show?'tui-alert-mask-show':'']" @tap.stop="handleClickCancel"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"tuiAlert",
+		props: {
+			//控制显示
+			show: {
+				type: Boolean,
+				default: false
+			},
+			//提示信息字体大小
+			size: {
+				type: Number,
+				default: 30
+			},
+			//提示信息字体颜色
+			color: {
+				type: String,
+				default: "#333"
+			},
+			//按钮字体颜色
+			btnColor: {
+				type: String,
+				default: "#EB0909"
+			},
+			btnText:{
+				type: String,
+				default: "确定"
+			},
+			//点击遮罩 是否可关闭
+			maskClosable: {
+				type: Boolean,
+				default: false
+			}
+		},
+		methods: {
+			handleClick(e) {
+				if (!this.show) return;
+				this.$emit('click', {});
+			},
+			handleClickCancel() {
+				if (!this.maskClosable) return;
+				this.$emit('cancel');
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-alert-box {
+		position: fixed;
+		width: 560rpx;
+		left: 50%;
+		top: 50%;
+		background-color: #fff;
+		transition: all 0.3s ease-in-out;
+		transform: translate(-50%, -50%) scale(0);
+		opacity: 0;
+		border-radius: 6rpx;
+		overflow: hidden;
+		z-index: 99998;
+	}
+
+	.tui-alert-show {
+		transform: translate(-50%, -50%) scale(1);
+		opacity: 1;
+	}
+
+	.tui-alert-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 99996;
+		transition: all 0.3s ease-in-out;
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.tui-alert-mask-show {
+		visibility: visible;
+		opacity: 1;
+	}
+
+	.tui-alert-content {
+		text-align: center;
+		color: #333333;
+		padding: 98rpx 48rpx 92rpx 48rpx;
+		box-sizing: border-box;
+		word-break: break-all;
+	}
+
+	.tui-alert-btn {
+		width: 100%;
+		height: 90rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: #fff;
+		box-sizing: border-box;
+		position: relative;
+		font-size: 32rpx;
+		line-height: 32rpx;
+	}
+
+	.tui-alert-btn-hover {
+		background-color: #f7f7f7;
+	}
+
+	.tui-alert-btn::before {
+		width: 100%;
+		content: "";
+		position: absolute;
+		border-top: 1rpx solid #E0E0E0;
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+		left: 0;
+		top: 0;
+	}
+</style>
diff --git a/components/thorui/tui-badge/tui-badge.vue b/components/thorui/tui-badge/tui-badge.vue
new file mode 100644
index 0000000..208aaa6
--- /dev/null
+++ b/components/thorui/tui-badge/tui-badge.vue
@@ -0,0 +1,155 @@
+<template>
+	<view :class="[dot ? 'tui-badge-dot' : 'tui-badge', 'tui-' + type, !dot ? 'tui-badge-scale' : '']" :style="{ top: top, right: right, position: absolute ? 'absolute' : 'static', transform: getStyle, margin: margin }"
+	 @tap="handleClick">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'tuiBadge',
+		props: {
+			//primary,warning,green,danger,white，black，gray,white_red
+			type: {
+				type: String,
+				default: 'primary'
+			},
+			//是否是圆点
+			dot: {
+				type: Boolean,
+				default: false
+			},
+			margin: {
+				type: String,
+				default: '0'
+			},
+			//是否绝对定位
+			absolute: {
+				type: Boolean,
+				default: false
+			},
+			top: {
+				type: String,
+				default: '-8rpx'
+			},
+			right: {
+				type: String,
+				default: '0'
+			},
+			//缩放比例
+			scaleRatio: {
+				type: Number,
+				default: 1
+			},
+			//水平方向移动距离
+			translateX: {
+				type: String,
+				default: '0'
+			}
+		},
+		computed: {
+			getStyle() {
+				return `scale(${this.scaleRatio}) translateX(${this.translateX})`;
+			}
+		},
+		methods: {
+			handleClick() {
+				this.$emit('click', {});
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	/* color start*/
+
+	.tui-primary {
+		background-color: #5677fc;
+		color: #fff;
+	}
+
+	.tui-danger {
+		background-color: #ed3f14;
+		color: #fff;
+	}
+
+	.tui-red {
+		background-color: #F74D54;
+		color: #fff;
+	}
+
+	.tui-warning {
+		background-color: #ff7900;
+		color: #fff;
+	}
+
+	.tui-green {
+		background-color: #19be6b;
+		color: #fff;
+	}
+
+	.tui-white {
+		background-color: #fff;
+		color: #333;
+	}
+
+	.tui-white_red {
+		background-color: #fff;
+		color: #F74D54;
+	}
+
+	.tui-white_primary {
+		background-color: #fff;
+		color: #5677fc;
+	}
+
+	.tui-white_green {
+		background-color: #fff;
+		color: #19be6b;
+	}
+
+	.tui-white_warning {
+		background-color: #fff;
+		color: #ff7900;
+	}
+
+	.tui-black {
+		background-color: #000;
+		color: #fff;
+	}
+
+	.tui-gray {
+		background-color: #ededed;
+		color: #999;
+	}
+
+	/* color end*/
+
+	/* badge start*/
+
+	.tui-badge-dot {
+		height: 8px;
+		width: 8px;
+		border-radius: 50%;
+	}
+
+	.tui-badge {
+		font-size: 24rpx;
+		line-height: 24rpx;
+		height: 36rpx;
+		min-width: 36rpx;
+		padding: 0 10rpx;
+		box-sizing: border-box;
+		border-radius: 100rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 10;
+	}
+
+	.tui-badge-scale {
+		transform-origin: center center;
+	}
+
+	/* badge end*/
+</style>
diff --git a/components/thorui/tui-bottom-navigation/tui-bottom-navigation.vue b/components/thorui/tui-bottom-navigation/tui-bottom-navigation.vue
new file mode 100644
index 0000000..b676c3f
--- /dev/null
+++ b/components/thorui/tui-bottom-navigation/tui-bottom-navigation.vue
@@ -0,0 +1,387 @@
+<template>
+	<view @touchmove.stop.prevent="stop">
+		<view class="tui-bottom-navigation" :class="{ 'tui-navigation-fixed': isFixed, 'tui-remove-splitLine': unlined }">
+			<view
+				class="tui-navigation-item"
+				:class="{ 'tui-item-after_height': splitLineScale, 'tui-last-item': index == itemList.length - 1 }"
+				:style="{ backgroundColor: isDarkMode ? '#202020' : backgroundColor }"
+				v-for="(item, index) in itemList"
+				:key="index"
+			>
+				<view class="tui-item-inner" @tap="menuClick(index, item.parameter, item.type)">
+					<image
+						:src="current | getIcon(index, item)"
+						class="tui-navigation-img"
+						v-if="item.iconPath || (current == index && item.selectedIconPath && item.type == 1)"
+					></image>
+					<text
+						class="tui-navigation-text"
+						:style="{
+							color: isDarkMode ? '#fff' : current == index && item.type == 1 ? selectedColor : item.color || color,
+							fontWeight: current == index && bold && item.type == 1 ? 'bold' : 'normal',
+							fontSize: fontSize
+						}"
+					>
+						{{ item.text }}
+					</text>
+				</view>
+				<view
+					class="tui-navigation-popup"
+					:class="{ 'tui-navigation-popup_show': showMenuIndex == index }"
+					:style="{ backgroundColor: isDarkMode ? '#4c4c4c' : subMenuBgColor, left: item.popupLeft || '50%' }"
+					v-if="item.itemList"
+				>
+					<view
+						class="tui-popup-cell"
+						:class="{ 'tui-first-cell': subIndex === 0, 'tui-last-cell': subIndex === item.itemList.length - 1 }"
+						:hover-class="subMenuHover ? (isDarkMode ? 'tui-item-dark_hover' : 'tui-item-hover') : ''"
+						:hover-stay-time="150"
+						v-for="(subItem, subIndex) in item.itemList || []"
+						:key="subIndex"
+						@tap="subMenuClick(index, item.type, subIndex, subItem.parameter)"
+					>
+						<text class="tui-ellipsis" :style="{ color: isDarkMode ? '#fff' : subMenuColor, fontSize: subMenufontSize, lineHeight: subMenufontSize }">
+							{{ subItem.text }}
+						</text>
+					</view>
+					<view class="tui-popup-triangle" :style="{ borderTopColor: isDarkMode ? '#4c4c4c' : subMenuBgColor }"></view>
+				</view>
+			</view>
+		</view>
+		<view class="tui-navigation-mask" :class="{ 'tui-navigation-mask_show': showMenuIndex != -1 }" @tap="handleClose"></view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiBottomNavigation',
+	props: {
+		//当前索引
+		current: {
+			type: Number,
+			default: 0
+		},
+		/**
+		 * {
+				text: 'ThorUI',
+				iconPath: '/static/images/common/icon_menu_gray.png',
+				selectedIconPath: '/static/images/common/icon_menu_gray.png',
+				color: '#666',
+				//1-选中切换，2-跳转、请求、其他操作，3-菜单
+				type: 3,
+				//自定义参数，类型自定义
+				parameter: null,
+				//子菜单left值,不传默认50%,当菜单贴近左右两边可用此参数调整
+				popupLeft: '',
+				itemList: [
+					{
+						//不建议超过6个字，请自行控制
+						text: '自定义参',
+						//自定义参数，类型自定义
+						parameter: null
+					},
+					{
+						text: '自定义参数',
+						//自定义参数，类型自定义
+						parameter: null
+					}
+				]
+			}
+		 * 
+		 * */
+		itemList: {
+			type: Array,
+			default: () => {
+				return [];
+			}
+		},
+		//颜色
+		color: {
+			type: String,
+			default: '#666'
+		},
+		//选中颜色
+		selectedColor: {
+			type: String,
+			default: '#5677fc'
+		},
+		fontSize: {
+			type: String,
+			default: '28rpx'
+		},
+		//选中后字体是否加粗
+		bold: {
+			type: Boolean,
+			default: true
+		},
+		//导航条背景颜色
+		backgroundColor: {
+			type: String,
+			default: '#F8F8F8'
+		},
+		//item分割线高度是否缩小
+		splitLineScale: {
+			type: Boolean,
+			default: true
+		},
+		//二级菜单字体颜色
+		subMenuColor: {
+			type: String,
+			default: '#333'
+		},
+		//二级菜单字体大小
+		subMenufontSize: {
+			type: String,
+			default: '28rpx'
+		},
+		//二级菜单背景色  深色：#4c4c4c
+		subMenuBgColor: {
+			type: String,
+			default: '#fff'
+		},
+		//二级菜单是否有点击效果
+		subMenuHover: {
+			type: Boolean,
+			default: true
+		},
+		//是否固定在底部
+		isFixed: {
+			type: Boolean,
+			default: true
+		},
+		//去除导航栏顶部的线条
+		unlined: {
+			type: Boolean,
+			default: false
+		},
+		//是否暗黑模式 (true：所有设置颜色失效)
+		isDarkMode: {
+			type: Boolean,
+			default: false
+		}
+	},
+	filters: {
+		getIcon: function(current, index, item) {
+			let url = item.iconPath;
+			if (item.type == 1) {
+				url = current == index ? item.selectedIconPath || item.iconPath : item.iconPath;
+			}
+			return url;
+		}
+	},
+	data() {
+		return {
+			showMenuIndex: -1 //显示的菜单index
+		};
+	},
+	methods: {
+		stop() {
+			return false;
+		},
+		handleClose() {
+			this.showMenuIndex = -1;
+		},
+		menuClick(index, parameter, type) {
+			//type：1-选中切换，2-跳转、请求、其他操作，3-菜单
+			if (type == 3) {
+				this.showMenuIndex = this.showMenuIndex == index ? -1 : index;
+			} else {
+				this.showMenuIndex = -1;
+				this.$emit('click', {
+					menu: 'main', //main,sub 主菜单，子菜单
+					type: type,
+					index: index,
+					parameter: parameter || ''
+				});
+			}
+		},
+		subMenuClick(index, type, subIndex, parameter) {
+			this.showMenuIndex = -1;
+			this.$emit('click', {
+				menu: 'sub', //main,sub 主菜单，子菜单
+				type: type,
+				index: index,
+				subIndex: subIndex,
+				parameter: parameter || ''
+			});
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-bottom-navigation {
+	width: 100%;
+	height: 100rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	position: relative;
+	z-index: 999;
+}
+
+.tui-navigation-fixed {
+	position: fixed !important;
+	left: 0;
+	bottom: 0;
+	padding-bottom: env(safe-area-inset-bottom);
+}
+
+.tui-bottom-navigation::after {
+	content: '';
+	width: 100%;
+	border-top: 1rpx solid #bfbfbf;
+	position: absolute;
+	top: 0;
+	left: 0;
+	transform: scaleY(0.5) translateZ(0);
+	transform-origin: 0 0;
+	z-index: 1000;
+}
+.tui-remove-splitLine::before {
+	border-top: 0 !important;
+}
+
+.tui-navigation-item {
+	flex: 1;
+	height: 100rpx;
+	position: relative;
+	box-sizing: border-box;
+}
+
+.tui-item-inner {
+	width: 100%;
+	height: 100rpx;
+	display: flex;
+	text-align: center;
+	align-items: center;
+	justify-content: center;
+}
+
+.tui-navigation-item::after {
+	height: 100%;
+	content: '';
+	position: absolute;
+	border-right: 1rpx solid #bfbfbf;
+	transform: scaleX(0.5) translateZ(0);
+	right: 0;
+	top: 0;
+}
+
+.tui-item-after_height::after {
+	height: 40% !important;
+	top: 30% !important;
+}
+
+.tui-last-item::after {
+	border-right: 0 !important;
+}
+
+.tui-navigation-img {
+	width: 32rpx;
+	height: 32rpx;
+	margin-right: 8rpx;
+}
+
+.tui-navigation-popup {
+	max-width: 160%;
+	width: auto;
+	position: absolute;
+	border-radius: 8rpx;
+	visibility: hidden;
+	opacity: 0;
+	transform: translate3d(-50%, 0, 0);
+	transform-origin: center;
+	transition: all 0.12s ease-in-out;
+	bottom: 0;
+	z-index: -1;
+}
+
+.tui-navigation-popup_show {
+	transform: translate3d(-50%, -124rpx, 0);
+	visibility: visible;
+	opacity: 1;
+}
+
+.tui-popup-triangle {
+	position: absolute;
+	width: 0;
+	height: 0;
+	border-left: 9rpx solid transparent;
+	border-right: 9rpx solid transparent;
+	border-top: 18rpx solid;
+	left: 50%;
+	bottom: -18rpx;
+	-webkit-transform: translateX(-50%);
+	transform: translateX(-50%);
+	z-index: 997;
+}
+
+.tui-popup-cell {
+	width: 100%;
+	padding: 32rpx 20rpx;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex: 1;
+	position: relative;
+}
+
+.tui-ellipsis {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.tui-popup-cell::after {
+	content: '';
+	position: absolute;
+	border-bottom: 1rpx solid #eaeef1;
+	-webkit-transform: scaleY(0.5);
+	transform: scaleY(0.5);
+	bottom: 0;
+	right: 24rpx;
+	left: 24rpx;
+}
+
+.tui-item-hover {
+	background-color: #f1f1f1;
+}
+
+.tui-item-dark_hover {
+	background-color: #555;
+}
+
+.tui-first-cell {
+	border-top-left-radius: 8rpx;
+	border-top-right-radius: 8rpx;
+}
+
+.tui-last-cell {
+	border-bottom-left-radius: 8rpx;
+	border-bottom-right-radius: 8rpx;
+}
+
+.tui-last-cell::after {
+	border-bottom: 0 !important;
+}
+
+.tui-navigation-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 995;
+	transition: all 0.3s ease-in-out;
+	opacity: 0;
+	visibility: hidden;
+	background-color: rgba(0, 0, 0, 0);
+}
+
+.tui-navigation-mask_show {
+	opacity: 1;
+	visibility: visible;
+}
+</style>
diff --git a/components/thorui/tui-bottom-popup/tui-bottom-popup.vue b/components/thorui/tui-bottom-popup/tui-bottom-popup.vue
new file mode 100644
index 0000000..a8fb45c
--- /dev/null
+++ b/components/thorui/tui-bottom-popup/tui-bottom-popup.vue
@@ -0,0 +1,106 @@
+<template>
+	<view @touchmove.stop.prevent>
+		<view class="tui-popup-class tui-bottom-popup" :class="{ 'tui-popup-show': show, 'tui-popup-radius': radius }" :style="{ backgroundColor: backgroundColor, height: height ? height + 'rpx' : 'auto', zIndex: zIndex,transform:`translate3d(0, ${show?translateY:'100%'}, 0)`}">
+			<slot></slot>
+		</view>
+		<view class="tui-popup-mask" :class="[show ? 'tui-mask-show' : '']" :style="{ zIndex: maskZIndex }" v-if="mask" @tap="handleClose"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'tuiBottomPopup',
+		props: {
+			//是否需要mask
+			mask: {
+				type: Boolean,
+				default: true
+			},
+			//控制显示
+			show: {
+				type: Boolean,
+				default: false
+			},
+			//背景颜色
+			backgroundColor: {
+				type: String,
+				default: '#fff'
+			},
+			//高度 rpx
+			height: {
+				type: Number,
+				default: 0
+			},
+			//设置圆角
+			radius: {
+				type: Boolean,
+				default: true
+			},
+			zIndex: {
+				type: [Number, String],
+				default: 997
+			},
+			maskZIndex: {
+				type: [Number, String],
+				default: 996
+			},
+			//弹层显示时，垂直方向移动的距离
+			translateY: {
+				type: String,
+				default: '0'
+			}
+		},
+		methods: {
+			handleClose() {
+				if (!this.show) {
+					return;
+				}
+				this.$emit('close', {});
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.tui-bottom-popup {
+		width: 100%;
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		opacity: 0;
+		transform: translate3d(0, 100%, 0);
+		transform-origin: center;
+		transition: all 0.3s ease-in-out;
+		min-height: 20rpx;
+	}
+
+	.tui-popup-radius {
+		border-top-left-radius: 24rpx;
+		border-top-right-radius: 24rpx;
+		padding-bottom: env(safe-area-inset-bottom);
+		overflow: hidden;
+	}
+
+	.tui-popup-show {
+		opacity: 1;
+		/* transform: translate3d(0, 0, 0); */
+	}
+
+	.tui-popup-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.6);
+		transition: all 0.3s ease-in-out;
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.tui-mask-show {
+		opacity: 1;
+		visibility: visible;
+	}
+</style>
diff --git a/components/thorui/tui-bubble-popup/tui-bubble-popup.vue b/components/thorui/tui-bubble-popup/tui-bubble-popup.vue
new file mode 100644
index 0000000..a8991e7
--- /dev/null
+++ b/components/thorui/tui-bubble-popup/tui-bubble-popup.vue
@@ -0,0 +1,203 @@
+<template>
+	<view :class="{ 'tui-flex-end': flexEnd }">
+		<view class="tui-popup-list" :class="{ 'tui-popup-show': show,'tui-z_index':show && position!='relative' }" :style="{ width: width, backgroundColor: backgroundColor, borderRadius: radius, color: color, position: position, left: left, right: right, bottom: bottom, top: top,transform:`translate(${translateX},${translateY})` }">
+			<view class="tui-triangle" :style="{
+					borderWidth: borderWidth,
+					borderColor: `transparent transparent ${backgroundColor} transparent`,
+					left: triangleLeft,
+					right: triangleRight,
+					top: triangleTop,
+					bottom: triangleBottom
+				}"
+			 v-if="direction == 'top'"></view>
+			<view class="tui-triangle" :style="{
+					borderWidth: borderWidth,
+					borderColor: `${backgroundColor}  transparent transparent transparent`,
+					left: triangleLeft,
+					right: triangleRight,
+					top: triangleTop,
+					bottom: triangleBottom
+				}"
+			 v-if="direction == 'bottom'"></view>
+			<view class="tui-triangle" :style="{
+					borderWidth: borderWidth,
+					borderColor: `transparent  ${backgroundColor} transparent transparent`,
+					left: triangleLeft,
+					right: triangleRight,
+					top: triangleTop,
+					bottom: triangleBottom
+				}"
+			 v-if="direction == 'left'"></view>
+			<view class="tui-triangle" :style="{
+					borderWidth: borderWidth,
+					borderColor: `transparent transparent  transparent ${backgroundColor}`,
+					left: triangleLeft,
+					right: triangleRight,
+					top: triangleTop,
+					bottom: triangleBottom
+				}"
+			 v-if="direction == 'right'"></view>
+			<slot />
+		</view>
+		<view @touchmove.stop.prevent="stop" class="tui-popup-mask" :class="{ 'tui-popup-show': show }" :style="{ backgroundColor: maskBgColor }"
+		 v-if="mask" @tap="handleClose"></view>
+	</view>
+</template>
+<script>
+	export default {
+		name: 'tuiBubblePopup',
+		props: {
+			//宽度
+			width: {
+				type: String,
+				default: '300rpx'
+			},
+			//popup圆角
+			radius: {
+				type: String,
+				default: '8rpx'
+			},
+			//popup 定位 left right top bottom值
+			left: {
+				type: String,
+				default: 'auto'
+			},
+			right: {
+				type: String,
+				default: 'auto'
+			},
+			top: {
+				type: String,
+				default: 'auto'
+			},
+			bottom: {
+				type: String,
+				default: 'auto'
+			},
+			translateX:{
+				type: String,
+				default: '0'
+			},
+			translateY:{
+				type: String,
+				default: '0'
+			},
+			//背景颜色
+			backgroundColor: {
+				type: String,
+				default: '#4c4c4c'
+			},
+			//字体颜色
+			color: {
+				type: String,
+				default: '#fff'
+			},
+			//三角border-width
+			borderWidth: {
+				type: String,
+				default: '12rpx'
+			},
+			//三角形方向 top left right bottom
+			direction: {
+				type: String,
+				default: 'top'
+			},
+			//定位 left right top bottom值
+			triangleLeft: {
+				type: String,
+				default: 'auto'
+			},
+			triangleRight: {
+				type: String,
+				default: 'auto'
+			},
+			triangleTop: {
+				type: String,
+				default: 'auto'
+			},
+			triangleBottom: {
+				type: String,
+				default: 'auto'
+			},
+			//定位 relative absolute  fixed
+			position: {
+				type: String,
+				default: 'fixed'
+			},
+			//flex-end
+			flexEnd: {
+				type: Boolean,
+				default: false
+			},
+			//是否需要mask
+			mask: {
+				type: Boolean,
+				default: true
+			},
+			maskBgColor: {
+				type: String,
+				default: 'rgba(0, 0, 0, 0.4)'
+			},
+			//控制显示
+			show: {
+				type: Boolean,
+				default: false
+			}
+		},
+		methods: {
+			handleClose() {
+				if (!this.show) {
+					return;
+				}
+				this.$emit('close', {});
+			},
+			stop() {
+				return false;
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.tui-popup-list {
+		z-index: 1;
+		transition: all 0.3s ease-in-out;
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.tui-flex-end {
+		width: 100%;
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.tui-triangle {
+		position: absolute;
+		width: 0;
+		height: 0;
+		border-style: solid;
+		z-index: 997;
+	}
+
+	.tui-popup-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 995;
+		transition: all 0.3s ease-in-out;
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.tui-popup-show {
+		opacity: 1;
+		visibility: visible;
+	}
+
+	.tui-z_index {
+		z-index: 996;
+	}
+</style>
diff --git a/components/thorui/tui-button/tui-button.vue b/components/thorui/tui-button/tui-button.vue
new file mode 100644
index 0000000..03cf517
--- /dev/null
+++ b/components/thorui/tui-button/tui-button.vue
@@ -0,0 +1,519 @@
+<template>
+	<button
+		class="tui-btn"
+		:class="[
+			plain ? 'tui-' + type + '-outline' : 'tui-btn-' + (type || 'primary'),
+			getDisabledClass(disabled, type, plain),
+			getShapeClass(shape, plain),
+			getShadowClass(type, shadow, plain),
+			bold ? 'tui-text-bold' : '',
+			link ? 'tui-btn__link' : ''
+		]"
+		:hover-class="getHoverClass(disabled, type, plain)"
+		:style="{ width: width, height: height, lineHeight: height, fontSize: size + 'rpx', margin: margin }"
+		:loading="loading"
+		:form-type="formType"
+		:open-type="openType"
+		@getuserinfo="bindgetuserinfo"
+		@getphonenumber="bindgetphonenumber"
+		@contact="bindcontact"
+		@error="binderror"
+		:disabled="disabled"
+		@tap="handleClick"
+	>
+		<slot></slot>
+	</button>
+</template>
+
+<script>
+export default {
+	name: 'tuiButton',
+	// #ifndef MP-QQ
+	behaviors: ['wx://form-field-button'],
+	// #endif
+	props: {
+		//样式类型 primary, white, danger, warning, green,blue, gray，black,brown,gray-primary,gray-danger,gray-warning,gray-green
+		type: {
+			type: String,
+			default: 'primary'
+		},
+		//是否加阴影
+		shadow: {
+			type: Boolean,
+			default: false
+		},
+		// 宽度 rpx或 %
+		width: {
+			type: String,
+			default: '100%'
+		},
+		//高度 rpx
+		height: {
+			type: String,
+			default: '96rpx'
+		},
+		//字体大小 rpx
+		size: {
+			type: Number,
+			default: 32
+		},
+		bold: {
+			type: Boolean,
+			default: false
+		},
+		margin: {
+			type: String,
+			default: '0'
+		},
+		//形状 circle(圆角), square(默认方形)，rightAngle(平角)
+		shape: {
+			type: String,
+			default: 'square'
+		},
+		plain: {
+			type: Boolean,
+			default: false
+		},
+		//link样式，去掉边框，结合plain一起使用
+		link: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		//禁用后背景是否为灰色 （非空心button生效）
+		disabledGray: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		formType: {
+			type: String,
+			default: ''
+		},
+		openType: {
+			type: String,
+			default: ''
+		},
+		index: {
+			type: [Number, String],
+			default: 0
+		},
+		//是否需要阻止重复点击【默认200ms】
+		preventClick: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			time: 0
+		};
+	},
+	methods: {
+		handleClick() {
+			if (this.disabled) return;
+			if (this.preventClick) {
+				if(new Date().getTime() - this.time <= 200) return;
+				this.time = new Date().getTime();
+				setTimeout(() => {
+					this.time = 0;
+				}, 200);
+			}
+			this.$emit('click', {
+				index: Number(this.index)
+			});
+		},
+		bindgetuserinfo({ detail = {} } = {}) {
+			this.$emit('getuserinfo', detail);
+		},
+		bindcontact({ detail = {} } = {}) {
+			this.$emit('contact', detail);
+		},
+		bindgetphonenumber({ detail = {} } = {}) {
+			this.$emit('getphonenumber', detail);
+		},
+		binderror({ detail = {} } = {}) {
+			this.$emit('error', detail);
+		},
+		getShadowClass: function(type, shadow, plain) {
+			let className = '';
+			if (shadow && type != 'white' && !plain) {
+				className = 'tui-shadow-' + type;
+			}
+			return className;
+		},
+		getDisabledClass: function(disabled, type, plain) {
+			let className = '';
+			if (disabled && type != 'white' && type.indexOf('-') == -1) {
+				let classVal = this.disabledGray ? 'tui-gray-disabled' : 'tui-dark-disabled';
+				className = plain ? 'tui-dark-disabled-outline' : classVal;
+			}
+			return className;
+		},
+		getShapeClass: function(shape, plain) {
+			let className = '';
+			if (shape == 'circle') {
+				className = plain ? 'tui-outline-fillet' : 'tui-fillet';
+			} else if (shape == 'rightAngle') {
+				className = plain ? 'tui-outline-rightAngle' : 'tui-rightAngle';
+			}
+			return className;
+		},
+		getHoverClass: function(disabled, type, plain) {
+			let className = '';
+			if (!disabled) {
+				className = plain ? 'tui-outline-hover' : 'tui-' + (type || 'primary') + '-hover';
+			}
+			return className;
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-btn-primary {
+	background: #5677fc !important;
+	color: #fff;
+}
+
+.tui-shadow-primary {
+	box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
+}
+
+.tui-btn-danger {
+	background: #eb0909 !important;
+	color: #fff;
+}
+
+.tui-shadow-danger {
+	box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.2);
+}
+
+.tui-btn-warning {
+	background: #fc872d !important;
+	color: #fff;
+}
+
+.tui-shadow-warning {
+	box-shadow: 0 10rpx 14rpx 0 rgba(252, 135, 45, 0.2);
+}
+
+.tui-btn-green {
+	background: #07c160 !important;
+	color: #fff;
+}
+
+.tui-shadow-green {
+	box-shadow: 0 10rpx 14rpx 0 rgba(7, 193, 96, 0.2);
+}
+
+.tui-btn-blue {
+	background: #007aff !important;
+	color: #fff;
+}
+
+.tui-shadow-blue {
+	box-shadow: 0 10rpx 14rpx 0 rgba(0, 122, 255, 0.2);
+}
+
+.tui-btn-white {
+	background: #fff !important;
+	color: #333 !important;
+}
+
+.tui-btn-gray {
+	background: #bfbfbf !important;
+	color: #fff !important;
+}
+
+.tui-btn-black {
+	background: #333 !important;
+	color: #fff !important;
+}
+.tui-btn-brown{
+	background: #ac9157 !important;
+	color: #fff !important;
+}
+
+.tui-btn-gray-black {
+	background: #f2f2f2 !important;
+	color: #333;
+}
+
+.tui-btn-gray-primary {
+	background: #f2f2f2 !important;
+	color: #5677fc !important;
+}
+
+.tui-gray-primary-hover {
+	background: #d9d9d9 !important;
+}
+
+.tui-btn-gray-green {
+	background: #f2f2f2 !important;
+	color: #07c160 !important;
+}
+
+.tui-gray-green-hover {
+	background: #d9d9d9 !important;
+}
+
+.tui-btn-gray-danger {
+	background: #f2f2f2 !important;
+	color: #eb0909 !important;
+}
+
+.tui-gray-danger-hover {
+	background: #d9d9d9 !important;
+}
+
+.tui-btn-gray-warning {
+	background: #f2f2f2 !important;
+	color: #fc872d !important;
+}
+
+.tui-gray-warning-hover {
+	background: #d9d9d9 !important;
+}
+
+.tui-shadow-gray {
+	box-shadow: 0 10rpx 14rpx 0 rgba(191, 191, 191, 0.2);
+}
+
+.tui-hover-gray {
+	background: #f7f7f9 !important;
+}
+
+.tui-black-hover {
+	background: #555 !important;
+	color: #e5e5e5 !important;
+}
+.tui-brown-hover{
+	background: #A37F49 !important;
+	color: #e5e5e5 !important;
+}
+
+/* button start*/
+
+.tui-btn {
+	width: 100%;
+	position: relative;
+	border: 0 !important;
+	border-radius: 6rpx;
+	padding-left: 0;
+	padding-right: 0;
+	overflow: visible;
+}
+
+.tui-btn::after {
+	content: '';
+	position: absolute;
+	width: 200%;
+	height: 200%;
+	transform-origin: 0 0;
+	transform: scale(0.5, 0.5) translateZ(0);
+	box-sizing: border-box;
+	left: 0;
+	top: 0;
+	border-radius: 12rpx;
+	border: 0;
+}
+
+.tui-text-bold {
+	font-weight: bold;
+}
+
+.tui-btn-white::after {
+	border: 1px solid #bfbfbf;
+}
+
+.tui-white-hover {
+	background: #e5e5e5 !important;
+	color: #2e2e2e !important;
+}
+
+.tui-dark-disabled {
+	opacity: 0.6 !important;
+	color: #fafbfc !important;
+}
+
+.tui-dark-disabled-outline {
+	opacity: 0.5 !important;
+}
+
+.tui-gray-disabled {
+	background: #f3f3f3 !important;
+	color: #919191 !important;
+	box-shadow: none;
+}
+
+.tui-outline-hover {
+	opacity: 0.5;
+}
+
+.tui-primary-hover {
+	background: #4a67d6 !important;
+	color: #e5e5e5 !important;
+}
+
+.tui-primary-outline::after {
+	border: 1px solid #5677fc !important;
+}
+
+.tui-primary-outline {
+	color: #5677fc !important;
+	background: transparent;
+}
+
+.tui-danger-hover {
+	background: #c80808 !important;
+	color: #e5e5e5 !important;
+}
+
+.tui-danger-outline {
+	color: #eb0909 !important;
+	background: transparent;
+}
+
+.tui-danger-outline::after {
+	border: 1px solid #eb0909 !important;
+}
+
+.tui-warning-hover {
+	background: #d67326 !important;
+	color: #e5e5e5 !important;
+}
+
+.tui-warning-outline {
+	color: #fc872d !important;
+	background: transparent;
+}
+
+.tui-warning-outline::after {
+	border: 1px solid #fc872d !important;
+}
+
+.tui-green-hover {
+	background: #06ad56 !important;
+	color: #e5e5e5 !important;
+}
+
+.tui-green-outline {
+	color: #07c160 !important;
+	background: transparent;
+}
+
+.tui-green-outline::after {
+	border: 1px solid #07c160 !important;
+}
+
+.tui-blue-hover {
+	background: #0062cc !important;
+	color: #e5e5e5 !important;
+}
+
+.tui-blue-outline {
+	color: #007aff !important;
+	background: transparent;
+}
+
+.tui-blue-outline::after {
+	border: 1px solid #007aff !important;
+}
+
+/* #ifndef APP-NVUE */
+.tui-btn-gradual {
+	background: linear-gradient(90deg, rgb(255, 89, 38), rgb(240, 14, 44)) !important;
+	color: #fff !important;
+}
+
+.tui-shadow-gradual {
+	box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.15);
+}
+
+/* #endif */
+
+.tui-gray-hover {
+	background: #a3a3a3 !important;
+	color: #898989;
+}
+
+/* #ifndef APP-NVUE */
+.tui-gradual-hover {
+	background: linear-gradient(90deg, #d74620, #cd1225) !important;
+	color: #fff !important;
+}
+
+/* #endif */
+
+.tui-gray-outline {
+	color: #999 !important;
+	background: transparent !important;
+}
+
+.tui-white-outline {
+	color: #fff !important;
+	background: transparent !important;
+}
+
+.tui-black-outline {
+	background: transparent !important;
+	color: #333 !important;
+}
+
+.tui-gray-outline::after {
+	border: 1px solid #ccc !important;
+}
+
+.tui-white-outline::after {
+	border: 1px solid #fff !important;
+}
+
+.tui-black-outline::after {
+	border: 1px solid #333 !important;
+}
+
+.tui-brown-outline {
+	color: #ac9157 !important;
+	background: transparent;
+}
+.tui-brown-outline::after {
+	border: 1px solid #ac9157 !important;
+}
+
+/*圆角 */
+
+.tui-fillet {
+	border-radius: 50rpx;
+}
+
+.tui-btn-white.tui-fillet::after {
+	border-radius: 98rpx;
+}
+
+.tui-outline-fillet::after {
+	border-radius: 98rpx;
+}
+
+/*平角*/
+.tui-rightAngle {
+	border-radius: 0;
+}
+
+.tui-btn-white.tui-rightAngle::after {
+	border-radius: 0;
+}
+
+.tui-outline-rightAngle::after {
+	border-radius: 0;
+}
+.tui-btn__link::after {
+	border: 0 !important;
+}
+</style>
diff --git a/components/thorui/tui-calendar/tui-calendar.js b/components/thorui/tui-calendar/tui-calendar.js
new file mode 100644
index 0000000..8d10e6d
--- /dev/null
+++ b/components/thorui/tui-calendar/tui-calendar.js
@@ -0,0 +1,562 @@
+/**
+ * @1900-2100区间内的公历、农历互转
+ * @公历转农历：solar2lunar(1987,11,01); 
+ * @农历转公历：lunar2solar(1987,09,10); 
+ */
+let calendar = {
+	/**
+	 * 农历1900-2100的润大小信息表
+	 * @Array Of Property
+	 * @return Hex
+	 */
+	lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, //1900-1909
+		0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, //1910-1919
+		0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, //1920-1929
+		0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, //1930-1939
+		0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, //1940-1949
+		0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, //1950-1959
+		0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, //1960-1969
+		0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, //1970-1979
+		0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, //1980-1989
+		0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, //1990-1999
+		0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, //2000-2009
+		0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, //2010-2019
+		0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, //2020-2029
+		0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, //2030-2039
+		0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, //2040-2049
+		0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, //2050-2059
+		0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, //2060-2069
+		0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, //2070-2079
+		0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, //2080-2089
+		0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, //2090-2099
+		0x0d520
+	], //2100
+	/**
+	 * 公历每个月份的天数普通表
+	 * @Array Of Property
+	 * @return Number
+	 */
+	solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
+	/**
+	 * 天干地支之天干速查表
+	 * @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
+	 * @return Cn string
+	 */
+	Gan: ["\u7532", "\u4e59", "\u4e19", "\u4e01", "\u620a", "\u5df1", "\u5e9a", "\u8f9b", "\u58ec", "\u7678"],
+	/**
+	 * 天干地支之地支速查表
+	 * @Array Of Property
+	 * @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
+	 * @return Cn string
+	 */
+	Zhi: ["\u5b50", "\u4e11", "\u5bc5", "\u536f", "\u8fb0", "\u5df3", "\u5348", "\u672a", "\u7533", "\u9149", "\u620c",
+		"\u4ea5"
+	],
+	/**
+	 * 天干地支之地支速查表<=>生肖
+	 * @Array Of Property
+	 * @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
+	 * @return Cn string
+	 */
+	Animals: ["\u9f20", "\u725b", "\u864e", "\u5154", "\u9f99", "\u86c7", "\u9a6c", "\u7f8a", "\u7334", "\u9e21",
+		"\u72d7", "\u732a"
+	],
+	/**
+	 * 24节气速查表
+	 * @Array Of Property
+	 * @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
+	 * @return Cn string
+	 */
+	solarTerm: ["\u5c0f\u5bd2", "\u5927\u5bd2", "\u7acb\u6625", "\u96e8\u6c34", "\u60ca\u86f0", "\u6625\u5206",
+		"\u6e05\u660e", "\u8c37\u96e8", "\u7acb\u590f", "\u5c0f\u6ee1", "\u8292\u79cd", "\u590f\u81f3", "\u5c0f\u6691",
+		"\u5927\u6691", "\u7acb\u79cb", "\u5904\u6691", "\u767d\u9732", "\u79cb\u5206", "\u5bd2\u9732", "\u971c\u964d",
+		"\u7acb\u51ac", "\u5c0f\u96ea", "\u5927\u96ea", "\u51ac\u81f3"
+	],
+	/**
+	 * 1900-2100各年的24节气日期速查表
+	 * @Array Of Property
+	 * @return 0x string For splice
+	 */
+	sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
+		'97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+		'97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
+		'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
+		'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
+		'97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
+		'97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
+		'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
+		'97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+		'97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+		'97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
+		'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
+		'97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+		'97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+		'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
+		'9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
+		'97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
+		'97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
+		'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
+		'7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+		'97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+		'97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
+		'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
+		'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+		'97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+		'97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
+		'9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
+		'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
+		'97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
+		'9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
+		'7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
+		'7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+		'97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
+		'9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
+		'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
+		'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+		'97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
+		'9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
+		'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
+		'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
+		'977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
+		'7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+		'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
+		'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
+		'977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
+		'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+		'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
+		'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
+		'977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
+		'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
+		'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
+		'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
+		'7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+		'7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
+		'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
+		'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
+		'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
+		'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
+		'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
+		'7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
+		'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
+		'7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
+		'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
+		'665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+		'7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
+		'7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
+		'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'
+	],
+	/**
+	 * 数字转中文速查表
+	 * @Array Of Property
+	 * @trans ['日','一','二','三','四','五','六','七','八','九','十']
+	 * @return Cn string
+	 */
+	nStr1: ["\u65e5", "\u4e00", "\u4e8c", "\u4e09", "\u56db", "\u4e94", "\u516d", "\u4e03", "\u516b", "\u4e5d", "\u5341"],
+	/**
+	 * 日期转农历称呼速查表
+	 * @Array Of Property
+	 * @trans ['初','十','廿','卅']
+	 * @return Cn string
+	 */
+	nStr2: ["\u521d", "\u5341", "\u5eff", "\u5345"],
+	/**
+	 * 月份转农历称呼速查表
+	 * @Array Of Property
+	 * @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
+	 * @return Cn string
+	 */
+	nStr3: ["\u6b63", "\u4e8c", "\u4e09", "\u56db", "\u4e94", "\u516d", "\u4e03", "\u516b", "\u4e5d", "\u5341", "\u51ac",
+		"\u814a"
+	],
+	/**
+	 * 返回农历y年一整年的总天数
+	 * @param lunar Year
+	 * @return Number
+	 * @eg:let count = calendar.lYearDays(1987) ;//count=387
+	 */
+	lYearDays: function(y) {
+		let i, sum = 348;
+		for (i = 0x8000; i > 0x8; i >>= 1) {
+			sum += (calendar.lunarInfo[y - 1900] & i) ? 1 : 0;
+		}
+		return (sum + calendar.leapDays(y));
+	},
+	/**
+	 * 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
+	 * @param lunar Year
+	 * @return Number (0-12)
+	 * @eg:let leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
+	 */
+	leapMonth: function(y) { //闰字编码 \u95f0
+		return (calendar.lunarInfo[y - 1900] & 0xf);
+	},
+	/**
+	 * 返回农历y年闰月的天数 若该年没有闰月则返回0
+	 * @param lunar Year
+	 * @return Number (0、29、30)
+	 * @eg:let leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
+	 */
+	leapDays: function(y) {
+		if (calendar.leapMonth(y)) {
+			return ((calendar.lunarInfo[y - 1900] & 0x10000) ? 30 : 29);
+		}
+		return (0);
+	},
+	/**
+	 * 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
+	 * @param lunar Year
+	 * @return Number (-1、29、30)
+	 * @eg:let MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
+	 */
+	monthDays: function(y, m) {
+		if (m > 12 || m < 1) {
+			return -1
+		} //月份参数从1至12，参数错误返回-1
+		return ((calendar.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29);
+	},
+	/**
+	 * 返回公历(!)y年m月的天数
+	 * @param solar Year
+	 * @return Number (-1、28、29、30、31)
+	 * @eg:let solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
+	 */
+	solarDays: function(y, m) {
+		if (m > 12 || m < 1) {
+			return -1
+		} //若参数错误 返回-1
+		let ms = m - 1;
+		if (ms == 1) { //2月份的闰平规律测算后确认返回28或29
+			return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28);
+		} else {
+			return (calendar.solarMonth[ms]);
+		}
+	},
+	/**
+	 * 农历年份转换为干支纪年
+	 * @param lYear 农历年的年份数
+	 * @return Cn string
+	 */
+	toGanZhiYear: function(lYear) {
+		let ganKey = (lYear - 3) % 10;
+		let zhiKey = (lYear - 3) % 12;
+		if (ganKey == 0) ganKey = 10; //如果余数为0则为最后一个天干
+		if (zhiKey == 0) zhiKey = 12; //如果余数为0则为最后一个地支
+		return calendar.Gan[ganKey - 1] + calendar.Zhi[zhiKey - 1];
+	},
+	/**
+	 * 公历月、日判断所属星座
+	 * @param cMonth [description]
+	 * @param cDay [description]
+	 * @return Cn string
+	 */
+	toAstro: function(cMonth, cDay) {
+		let s =
+			"\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf";
+		let arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22];
+		return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + "\u5ea7"; //座
+	},
+	/**
+	 * 传入offset偏移量返回干支
+	 * @param offset 相对甲子的偏移量
+	 * @return Cn string
+	 */
+	toGanZhi: function(offset) {
+		return calendar.Gan[offset % 10] + calendar.Zhi[offset % 12];
+	},
+	/**
+	 * 传入公历(!)y年获得该年第n个节气的公历日期
+	 * @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
+	 * @return day Number
+	 * @eg:let _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
+	 */
+	getTerm: function(y, n) {
+		if (y < 1900 || y > 2100) {
+			return -1;
+		}
+		if (n < 1 || n > 24) {
+			return -1;
+		}
+		let _table = calendar.sTermInfo[y - 1900];
+		let _info = [
+			parseInt('0x' + _table.substr(0, 5)).toString(),
+			parseInt('0x' + _table.substr(5, 5)).toString(),
+			parseInt('0x' + _table.substr(10, 5)).toString(),
+			parseInt('0x' + _table.substr(15, 5)).toString(),
+			parseInt('0x' + _table.substr(20, 5)).toString(),
+			parseInt('0x' + _table.substr(25, 5)).toString()
+		];
+		let _calday = [
+			_info[0].substr(0, 1),
+			_info[0].substr(1, 2),
+			_info[0].substr(3, 1),
+			_info[0].substr(4, 2),
+			_info[1].substr(0, 1),
+			_info[1].substr(1, 2),
+			_info[1].substr(3, 1),
+			_info[1].substr(4, 2),
+			_info[2].substr(0, 1),
+			_info[2].substr(1, 2),
+			_info[2].substr(3, 1),
+			_info[2].substr(4, 2),
+			_info[3].substr(0, 1),
+			_info[3].substr(1, 2),
+			_info[3].substr(3, 1),
+			_info[3].substr(4, 2),
+			_info[4].substr(0, 1),
+			_info[4].substr(1, 2),
+			_info[4].substr(3, 1),
+			_info[4].substr(4, 2),
+			_info[5].substr(0, 1),
+			_info[5].substr(1, 2),
+			_info[5].substr(3, 1),
+			_info[5].substr(4, 2),
+		];
+		return parseInt(_calday[n - 1]);
+	},
+	/**
+	 * 传入农历数字月份返回汉语通俗表示法
+	 * @param lunar month
+	 * @return Cn string
+	 * @eg:let cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
+	 */
+	toChinaMonth: function(m) { // 月 => \u6708
+		if (m > 12 || m < 1) {
+			return -1
+		} //若参数错误 返回-1
+		let s = calendar.nStr3[m - 1];
+		s += "\u6708"; //加上月字
+		return s;
+	},
+	/**
+	 * 传入农历日期数字返回汉字表示法
+	 * @param lunar day
+	 * @return Cn string
+	 * @eg:let cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
+	 */
+	toChinaDay: function(d) { //日 => \u65e5
+		let s;
+		switch (d) {
+			case 10:
+				s = '\u521d\u5341';
+				break;
+			case 20:
+				s = '\u4e8c\u5341';
+				break;
+				break;
+			case 30:
+				s = '\u4e09\u5341';
+				break;
+				break;
+			default:
+				s = calendar.nStr2[Math.floor(d / 10)];
+				s += calendar.nStr1[d % 10];
+		}
+		return (s);
+	},
+	/**
+	 * 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
+	 * @param y year
+	 * @return Cn string
+	 * @eg:let animal = calendar.getAnimal(1987) ;//animal='兔'
+	 */
+	getAnimal: function(y) {
+		return calendar.Animals[(y - 4) % 12]
+	},
+	/**
+	 * 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
+	 * @param y solar year
+	 * @param m solar month
+	 * @param d solar day
+	 * @return JSON object
+	 * @eg:console.log(calendar.solar2lunar(1987,11,01));
+	 */
+	solar2lunar: function(y, m, d) { //参数区间1900.1.31~2100.12.31
+		if (y < 1900 || y > 2100) {
+			return -1;
+		} //年份限定、上限
+		if (y == 1900 && m == 1 && d < 31) {
+			return -1;
+		} //下限
+		let objDate;
+		if (!y) { //未传参 获得当天
+			 objDate = new Date();
+		} else {
+			 objDate = new Date(y, parseInt(m) - 1, d)
+		}
+		let i, leap = 0,
+			temp = 0;
+		//修正ymd参数
+		y = objDate.getFullYear();
+		m = objDate.getMonth() + 1;
+		d = objDate.getDate();
+		let offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) /
+			86400000;
+		for (i = 1900; i < 2101 && offset > 0; i++) {
+			temp = calendar.lYearDays(i);
+			offset -= temp;
+		}
+		if (offset < 0) {
+			offset += temp;
+			i--;
+		}
+		//是否今天
+		let isTodayObj = new Date(),
+			isToday = false;
+		if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
+			isToday = true;
+		}
+		//星期几
+		let nWeek = objDate.getDay(),
+			cWeek = calendar.nStr1[nWeek];
+		if (nWeek == 0) {
+			nWeek = 7;
+		} //数字表示周几顺应天朝周一开始的惯例
+		//农历年
+		let year = i;
+		leap = calendar.leapMonth(i); //闰哪个月
+		let isLeap = false;
+		//效验闰月
+		for (i = 1; i < 13 && offset > 0; i++) {
+			//闰月
+			if (leap > 0 && i == (leap + 1) && isLeap == false) {
+				--i;
+				isLeap = true;
+				temp = calendar.leapDays(year); //计算农历闰月天数
+			} else {
+				temp = calendar.monthDays(year, i); //计算农历普通月天数
+			}
+			//解除闰月
+			if (isLeap == true && i == (leap + 1)) {
+				isLeap = false;
+			}
+			offset -= temp;
+		}
+		if (offset == 0 && leap > 0 && i == leap + 1)
+			if (isLeap) {
+				isLeap = false;
+			} else {
+				isLeap = true;
+				--i;
+			}
+		if (offset < 0) {
+			offset += temp;
+			--i;
+		}
+		//农历月
+		let month = i;
+		//农历日
+		let day = offset + 1;
+		//天干地支处理
+		let sm = m - 1;
+		let gzY = calendar.toGanZhiYear(year);
+		//月柱 1900年1月小寒以前为 丙子月(60进制12)
+		let firstNode = calendar.getTerm(year, (m * 2 - 1)); //返回当月「节」为几日开始
+		let secondNode = calendar.getTerm(year, (m * 2)); //返回当月「节」为几日开始
+		//依据12节气修正干支月
+		let gzM = calendar.toGanZhi((y - 1900) * 12 + m + 11);
+		if (d >= firstNode) {
+			gzM = calendar.toGanZhi((y - 1900) * 12 + m + 12);
+		}
+		//传入的日期的节气与否
+		let isTerm = false;
+		let Term = null;
+		if (firstNode == d) {
+			isTerm = true;
+			Term = calendar.solarTerm[m * 2 - 2];
+		}
+		if (secondNode == d) {
+			isTerm = true;
+			Term = calendar.solarTerm[m * 2 - 1];
+		}
+		//日柱 当月一日与 1900/1/1 相差天数
+		let dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10;
+		let gzD = calendar.toGanZhi(dayCyclical + d - 1);
+		//该日期所属的星座
+		let astro = calendar.toAstro(m, d);
+		return {
+			'lYear': year,
+			'lMonth': month,
+			'lDay': day,
+			'Animal': calendar.getAnimal(year),
+			'IMonthCn': (isLeap ? "\u95f0" : '') + calendar.toChinaMonth(month),
+			'IDayCn': calendar.toChinaDay(day),
+			'cYear': y,
+			'cMonth': m,
+			'cDay': d,
+			'gzYear': gzY,
+			'gzMonth': gzM,
+			'gzDay': gzD,
+			'isToday': isToday,
+			'isLeap': isLeap,
+			'nWeek': nWeek,
+			'ncWeek': "\u661f\u671f" + cWeek,
+			'isTerm': isTerm,
+			'Term': Term,
+			'astro': astro
+		};
+	},
+	/**
+	 * 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
+	 * @param y lunar year
+	 * @param m lunar month
+	 * @param d lunar day
+	 * @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
+	 * @return JSON object
+	 * @eg:console.log(calendar.lunar2solar(1987,9,10));
+	 */
+	lunar2solar: function(y, m, d, isLeapMonth) { //参数区间1900.1.31~2100.12.1
+		isLeapMonth = !!isLeapMonth;
+		let leapOffset = 0;
+		let leapMonth = calendar.leapMonth(y);
+		let leapDay = calendar.leapDays(y);
+		if (isLeapMonth && (leapMonth != m)) {
+			return -1;
+		} //传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
+		if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) {
+			return -1;
+		} //超出了最大极限值
+		let day = calendar.monthDays(y, m);
+		let _day = day;
+		//bugFix 2016-9-25
+		//if month is leap, _day use leapDays method
+		if (isLeapMonth) {
+			_day = calendar.leapDays(y, m);
+		}
+		if (y < 1900 || y > 2100 || d > _day) {
+			return -1;
+		} //参数合法性效验
+		//计算农历的时间差
+		let offset = 0;
+		for (let i = 1900; i < y; i++) {
+			offset += calendar.lYearDays(i);
+		}
+		let leap = 0,
+			isAdd = false;
+		for (let i = 1; i < m; i++) {
+			leap = calendar.leapMonth(y);
+			if (!isAdd) { //处理闰月
+				if (leap <= i && leap > 0) {
+					offset += calendar.leapDays(y);
+					isAdd = true;
+				}
+			}
+			offset += calendar.monthDays(y, i);
+		}
+		//转换闰月农历 需补充该年闰月的前一个月的时差
+		if (isLeapMonth) {
+			offset += day;
+		}
+		//1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
+		let stmap = Date.UTC(1900, 1, 30, 0, 0, 0);
+		let calObj = new Date((offset + d - 31) * 86400000 + stmap);
+		let cY = calObj.getUTCFullYear();
+		let cM = calObj.getUTCMonth() + 1;
+		let cD = calObj.getUTCDate();
+		return calendar.solar2lunar(cY, cM, cD);
+	}
+};
+
+module.exports = {
+	solar2lunar: calendar.solar2lunar,
+	lunar2solar: calendar.lunar2solar
+};
diff --git a/components/thorui/tui-calendar/tui-calendar.vue b/components/thorui/tui-calendar/tui-calendar.vue
new file mode 100644
index 0000000..8d4eee0
--- /dev/null
+++ b/components/thorui/tui-calendar/tui-calendar.vue
@@ -0,0 +1,925 @@
+<template>
+	<view @touchmove.stop.prevent="stop" v-if="isFixed">
+		<view class="tui-bottom-popup" :class="{'tui-popup-show': isShow}">
+			<view class="tui-calendar-header" :class="{ 'tui-calendar-radius': radius }" >
+				<view>日期选择</view>
+				<view class="tui-iconfont tui-font-close" hover-class="tui-opacity" :hover-stay-time="150" @tap="hide"></view>
+			</view>
+
+			<view class="tui-date-box">
+				<view
+					class="tui-iconfont tui-font-arrowleft"
+					:style="{ color: yearArrowColor }"
+					hover-class="tui-opacity"
+					:hover-stay-time="150"
+					v-if="arrowType == 1"
+					@tap="changeYear(0)"
+				></view>
+				<view class="tui-iconfont tui-font-arrowleft" :style="{ color: monthArrowColor }" hover-class="tui-opacity" :hover-stay-time="150" @tap="changeMonth(0)"></view>
+				<view class="tui-date_time">{{ showTitle }}</view>
+				<view class="tui-iconfont tui-font-arrowright" :style="{ color: monthArrowColor }" hover-class="tui-opacity" :hover-stay-time="150" @tap="changeMonth(1)"></view>
+				<view
+					class="tui-iconfont tui-font-arrowright"
+					:style="{ color: yearArrowColor }"
+					hover-class="tui-opacity"
+					:hover-stay-time="150"
+					v-if="arrowType == 1"
+					@tap="changeYear(1)"
+				></view>
+			</view>
+			<view class="tui-date-header">
+				<view class="tui-date">日</view>
+				<view class="tui-date">一</view>
+				<view class="tui-date">二</view>
+				<view class="tui-date">三</view>
+				<view class="tui-date">四</view>
+				<view class="tui-date">五</view>
+				<view class="tui-date">六</view>
+			</view>
+			<view class="tui-date-content" :class="{ 'tui-flex-start': isFixed && fixedHeight }" :style="{ height: isFixed && fixedHeight ? dateHeight * 6 + 'px' : 'auto' }">
+				<block v-for="(item, index) in weekdayArr" :key="index"><view class="tui-date"></view></block>
+				<view
+					class="tui-date"
+					:class="{
+						'tui-date-pd_0': isFixed && fixedHeight,
+						'tui-opacity': openDisAbled(year, month, index + 1),
+						'tui-start-date': (type == 2 && startDate == `${year}-${month}-${index + 1}`) || type == 1,
+						'tui-end-date': (type == 2 && endDate == `${year}-${month}-${index + 1}`) || type == 1
+					}"
+					:style="{ backgroundColor: isFixed ? getColor(index, 1) : 'transparent', height: isFixed && fixedHeight ? dateHeight + 'px' : 'auto' }"
+					v-for="(item, index) in daysArr"
+					:key="index"
+					@tap="dateClick(index)"
+				>
+					<view class="tui-date-text" :style="{ color: isFixed ? getColor(index, 2) : getStatusData(3, index), backgroundColor: getStatusData(2, index) }">
+						<view v-if="isFixed || !getStatusData(4, index)">{{ index + 1 }}</view>
+						<view v-if="!getStatusData(4, index)" class="tui-custom-desc" :class="{ 'tui-lunar-unshow': !lunar && isFixed }">
+							{{ getDescText(index, startDate, endDate) }}
+						</view>
+						<text class="tui-iconfont tui-font-check" v-if="getStatusData(4, index)"></text>
+					</view>
+					<view class="tui-date-desc" :style="{ color: activeColor }" v-if="!lunar && type == 2 && startDate == `${year}-${month}-${index + 1}` && startDate != endDate">
+						{{ startText }}
+					</view>
+					<view class="tui-date-desc" :style="{ color: activeColor }" v-if="!lunar && type == 2 && endDate == `${year}-${month}-${index + 1}`">{{ endText }}</view>
+				</view>
+				<view class="tui-bg-month">{{ month }}</view>
+			</view>
+
+			<view class="tui-calendar-op">
+				<view class="tui-calendar-result">
+					<text>{{ type == 1 ? activeDate : startDate }}</text>
+					<text v-if="endDate">至{{ endDate }}</text>
+				</view>
+				<view class="tui-calendar-btn_box"><tui-button :type="btnType" height="72rpx" shape="circle" :size="28" @click="btnFix(false)">确定</tui-button></view>
+			</view>
+		</view>
+
+		<view class="tui-popup-mask" :class="[isShow ? 'tui-mask-show' : '']"  @tap="hide"></view>
+	</view>
+	<view v-else>
+		<view class="tui-date-box">
+			<view
+				class="tui-iconfont tui-font-arrowleft"
+				:style="{ color: yearArrowColor }"
+				hover-class="tui-opacity"
+				:hover-stay-time="150"
+				v-if="arrowType == 1"
+				@tap="changeYear(0)"
+			></view>
+			<view class="tui-iconfont tui-font-arrowleft" :style="{ color: monthArrowColor }" hover-class="tui-opacity" :hover-stay-time="150" @tap="changeMonth(0)"></view>
+			<view class="tui-date_time">{{ showTitle }}</view>
+			<view class="tui-iconfont tui-font-arrowright" :style="{ color: monthArrowColor }" hover-class="tui-opacity" :hover-stay-time="150" @tap="changeMonth(1)"></view>
+			<view
+				class="tui-iconfont tui-font-arrowright"
+				:style="{ color: yearArrowColor }"
+				hover-class="tui-opacity"
+				:hover-stay-time="150"
+				v-if="arrowType == 1"
+				@tap="changeYear(1)"
+			></view>
+		</view>
+		<view class="tui-date-header">
+			<view class="tui-date">日</view>
+			<view class="tui-date">一</view>
+			<view class="tui-date">二</view>
+			<view class="tui-date">三</view>
+			<view class="tui-date">四</view>
+			<view class="tui-date">五</view>
+			<view class="tui-date">六</view>
+		</view>
+		<view class="tui-date-content" :style="{ height: isFixed && fixedHeight ? dateHeight * 6 + 'px' : 'auto' }">
+			<block v-for="(item, index) in weekdayArr" :key="index"><view class="tui-date"></view></block>
+			<view
+				class="tui-date"
+				:class="{
+					'tui-date-pd_0': isFixed && fixedHeight,
+					'tui-opacity': openDisAbled(year, month, index + 1),
+					'tui-start-date': (type == 2 && startDate == `${year}-${month}-${index + 1}`) || type == 1,
+					'tui-end-date': (type == 2 && endDate == `${year}-${month}-${index + 1}`) || type == 1
+				}"
+				:style="{ backgroundColor: isFixed ? getColor(index, 1) : 'transparent', height: isFixed && fixedHeight ? dateHeight + 'px' : 'auto' }"
+				v-for="(item, index) in daysArr"
+				:key="index"
+				@tap="dateClick(index)"
+			>
+				<view class="tui-date-text" :style="{ color: isFixed ? getColor(index, 2) : getStatusData(3, index), backgroundColor: getStatusData(2, index) }">
+					<view v-if="isFixed || !getStatusData(4, index)">{{ index + 1 }}</view>
+					<view v-if="!getStatusData(4, index)" class="tui-custom-desc" :class="{ 'tui-lunar-unshow': !lunar && isFixed }">
+						{{ getDescText(index, startDate, endDate) }}
+					</view>
+					<text class="tui-iconfont tui-font-check" v-if="getStatusData(4, index)"></text>
+				</view>
+				<view class="tui-date-desc" :style="{ color: activeColor }" v-if="!lunar && type == 2 && startDate == `${year}-${month}-${index + 1}` && startDate != endDate">
+					{{ startText }}
+				</view>
+				<view class="tui-date-desc" :style="{ color: activeColor }" v-if="!lunar && type == 2 && endDate == `${year}-${month}-${index + 1}`">{{ endText }}</view>
+			</view>
+			<view class="tui-bg-month">{{ month }}</view>
+		</view>
+	</view>
+</template>
+<script>
+//easycom组件模式 无需手动引入
+// import tuiButton from "../tui-button/tui-button"
+const calendar = require('./tui-calendar.js');
+export default {
+	name: 'tuiCalendar',
+	// components:{
+	// 	tuiButton
+	// },
+	props: {
+		//1-切换月份和年份 2-切换月份
+		arrowType: {
+			type: [Number, String],
+			default: 1
+		},
+		//1-单个日期选择 2-开始日期+结束日期选择
+		type: {
+			type: Number,
+			default: 1
+		},
+		//可切换最大年份
+		maxYear: {
+			type: Number,
+			default: 2030
+		},
+		//可切换最小年份
+		minYear: {
+			type: Number,
+			default: 1920
+		},
+		//最小可选日期(不在范围内日期禁用不可选)
+		minDate: {
+			type: String,
+			default: '1920-01-01'
+		},
+		/**
+		 * 最大可选日期
+		 * 默认最大值为今天，之后的日期不可选
+		 * 2030-12-31
+		 * */
+		maxDate: {
+			type: String,
+			default: ''
+		},
+		//显示圆角
+		radius: {
+			type: Boolean,
+			default: true
+		},
+		//状态 数据顺序与当月天数一致，index=>day
+		/**
+				 * [{
+					 * text:"", 描述：2字以内
+					 * value:"",状态值 
+					 * bgColor:"",背景色
+					 * color:""  文字颜色,
+					 * check:false //是否显示对勾
+					 * 
+				 }]
+				 * 
+				 * **/
+		status: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		//月份切换箭头颜色
+		monthArrowColor: {
+			type: String,
+			default: '#999'
+		},
+		//年份切换箭头颜色
+		yearArrowColor: {
+			type: String,
+			default: '#bcbcbc'
+		},
+		//默认日期字体颜色
+		color: {
+			type: String,
+			default: '#333'
+		},
+		//选中|起始结束日期背景色
+		activeBgColor: {
+			type: String,
+			default: '#5677fc'
+		},
+		//选中|起始结束日期字体颜色
+		activeColor: {
+			type: String,
+			default: '#fff'
+		},
+		//范围内日期背景色
+		rangeBgColor: {
+			type: String,
+			default: 'rgba(86,119,252,0.1)'
+		},
+		//范围内日期字体颜色
+		rangeColor: {
+			type: String,
+			default: '#5677fc'
+		},
+		//type=2时生效，起始日期自定义文案
+		startText: {
+			type: String,
+			default: '开始'
+		},
+		//type=2时生效，结束日期自定义文案
+		endText: {
+			type: String,
+			default: '结束'
+		},
+		//按钮样式类型
+		btnType: {
+			type: String,
+			default: 'primary'
+		},
+		//固定在底部
+		isFixed: {
+			type: Boolean,
+			default: false
+		},
+		//固定日历容器高度，isFixed=true时生效
+		fixedHeight: {
+			type: Boolean,
+			default: true
+		},
+		//当前选中日期带选中效果
+		isActiveCurrent: {
+			type: Boolean,
+			default: true
+		},
+		//切换年月是否触发事件 type=1时生效
+		isChange: {
+			type: Boolean,
+			default: false
+		},
+		//是否显示农历
+		lunar: {
+			type: Boolean,
+			default: false
+		},
+		//初始化起始选中日期 格式： 2020-06-06 或 2020/06/06 【type=1 or 2】
+		initStartDate: {
+			type: String,
+			default: ''
+		},
+		//初始化结束日期 格式： 2020-06-06 或 2020/06/06【type=2】
+		initEndDate: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			isShow: false,
+			weekday: 1, // 星期几,值为1-7
+			weekdayArr: [],
+			days: 0, //当前月有多少天
+			daysArr: [],
+			showTitle: '',
+			year: 2020,
+			month: 0,
+			day: 0,
+			startYear: 0,
+			startMonth: 0,
+			startDay: 0,
+			endYear: 0,
+			endMonth: 0,
+			endDay: 0,
+			today: '',
+			activeDate: '',
+			startDate: '',
+			endDate: '',
+			isStart: true,
+			min: null,
+			max: null,
+			dateHeight: 20
+		};
+	},
+	computed: {
+		dataChange() {
+			return `${this.type}-${this.minDate}-${this.maxDate}-${this.initStartDate}-${this.initEndDate}`;
+		}
+	},
+	watch: {
+		dataChange(val) {
+			this.init();
+		},
+		fixedHeight(val) {
+			if (val) {
+				this.initDateHeight();
+			}
+		}
+	},
+	created() {
+		this.init();
+	},
+	methods: {
+		getColor(index, type) {
+			let color = type == 1 ? '' : this.color;
+			let day = index + 1;
+			let date = `${this.year}-${this.month}-${day}`;
+			let timestamp = new Date(date.replace(/\-/g, '/')).getTime();
+			let start = this.startDate.replace(/\-/g, '/');
+			let end = this.endDate.replace(/\-/g, '/');
+			if ((this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) {
+				color = type == 1 ? this.activeBgColor : this.activeColor;
+			} else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) {
+				color = type == 1 ? this.rangeBgColor : this.rangeColor;
+			}
+			return color;
+		},
+		//获取状态数据
+		getStatusData(type, index) {
+			//1-描述text,2-bgColor背景色,3-color文字颜色 4-check 是否显示对勾
+			let val = ['', 'transparent', '#333', ''][type - 1];
+			if (!this.isFixed && this.status && this.status.length > 0) {
+				let item = this.status[index];
+				if (item) {
+					switch (type) {
+						case 1:
+							val = item.text;
+							break;
+						case 2:
+							val = item.bgColor;
+							break;
+						case 3:
+							val = item.color;
+							break;
+						case 4:
+							val = item.check;
+							break;
+						default:
+							break;
+					}
+				}
+			}
+			return val;
+		},
+		getDescText(index, startDate, endDate) {
+			let text = this.lunar ? this.getLunar(this.year, this.month, index + 1) : '';
+			if (this.isFixed && this.type == 2) {
+				//此判断不能与上面条件一起判断
+				if (this.lunar) {
+					let date = `${this.year}-${this.month}-${index + 1}`;
+					if (startDate == date && startDate != endDate) {
+						text = this.startText;
+					} else if (endDate == date) {
+						text = this.endText;
+					}
+				}
+			} else {
+				let status = this.getStatusData(1, index);
+				if (status) text = status;
+			}
+			return text;
+		},
+		getLunar(year, month, day) {
+			let obj = calendar.solar2lunar(year, month, day);
+			return obj.IDayCn;
+		},
+		initDateHeight() {
+			if (this.fixedHeight && this.isFixed) {
+				this.dateHeight = uni.getSystemInfoSync().windowWidth / 7;
+			}
+		},
+		init() {
+			this.initDateHeight();
+			let now = new Date();
+			this.year = now.getFullYear();
+			this.month = now.getMonth() + 1;
+			this.day = now.getDate();
+			this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
+			this.activeDate = this.today;
+			this.min = this.initDate(this.minDate);
+			this.max = this.initDate(this.maxDate || this.today);
+			this.startDate = '';
+			this.startYear = 0;
+			this.startMonth = 0;
+			this.startDay = 0;
+			if (this.initStartDate) {
+				let start = new Date(this.initStartDate.replace(/\-/g, '/'));
+				if (this.type == 1) {
+					this.year = start.getFullYear();
+					this.month = start.getMonth() + 1;
+					this.day = start.getDate();
+					this.activeDate = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`;
+				} else {
+					this.startDate = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`;
+					this.startYear = start.getFullYear();
+					this.startMonth = start.getMonth() + 1;
+					this.startDay = start.getDate();
+					this.activeDate = '';
+				}
+				
+			}
+			this.endYear = 0;
+			this.endMonth = 0;
+			this.endDay = 0;
+			this.endDate = '';
+			if (this.initEndDate && this.type == 2) {
+				let end = new Date(this.initEndDate.replace(/\-/g, '/'));
+				this.endDate = `${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`;
+				this.endYear = end.getFullYear();
+				this.endMonth = end.getMonth() + 1;
+				this.endDay = end.getDate();
+				this.activeDate = '';
+				this.year = end.getFullYear();
+				this.month = end.getMonth() + 1;
+				this.day = end.getDate();
+			}
+			this.isStart = true;
+			this.changeData();
+		},
+		//日期处理
+		initDate(date) {
+			let fdate = date.split('-');
+			return {
+				year: Number(fdate[0] || 1920),
+				month: Number(fdate[1] || 1),
+				day: Number(fdate[2] || 1)
+			};
+		},
+		openDisAbled: function(year, month, day) {
+			let bool = true;
+			let date = `${year}/${month}/${day}`;
+			// let today = this.today.replace(/\-/g, '/');
+			let min = `${this.min.year}/${this.min.month}/${this.min.day}`;
+			let max = `${this.max.year}/${this.max.month}/${this.max.day}`;
+			let timestamp = new Date(date).getTime();
+			if (timestamp >= new Date(min).getTime() && timestamp <= new Date(max).getTime()) {
+				bool = false;
+			}
+			return bool;
+		},
+		generateArray: function(start, end) {
+			return Array.from(new Array(end + 1).keys()).slice(start);
+		},
+		formatNum: function(num) {
+			return num < 10 ? '0' + num : num + '';
+		},
+		stop() {
+			return false;
+		},
+		//一个月有多少天
+		getMonthDay(year, month) {
+			let days = new Date(year, month, 0).getDate();
+			return days;
+		},
+		getWeekday(year, month) {
+			let date = new Date(`${year}/${month}/01 00:00:00`);
+			return date.getDay();
+		},
+		checkRange(year) {
+			let overstep = false;
+			if (year < this.minYear || year > this.maxYear) {
+				uni.showToast({
+					title: '日期超出范围啦~',
+					icon: 'none'
+				});
+				overstep = true;
+			}
+			return overstep;
+		},
+		changeMonth(isAdd) {
+			if (isAdd) {
+				let month = this.month + 1;
+				let year = month > 12 ? this.year + 1 : this.year;
+				if (!this.checkRange(year)) {
+					this.month = month > 12 ? 1 : month;
+					this.year = year;
+					this.changeData();
+				}
+			} else {
+				let month = this.month - 1;
+				let year = month < 1 ? this.year - 1 : this.year;
+				if (!this.checkRange(year)) {
+					this.month = month < 1 ? 12 : month;
+					this.year = year;
+					this.changeData();
+				}
+			}
+		},
+		changeYear(isAdd) {
+			let year = isAdd ? this.year + 1 : this.year - 1;
+			if (!this.checkRange(year)) {
+				this.year = year;
+				this.changeData();
+			}
+		},
+		changeData() {
+			this.days = this.getMonthDay(this.year, this.month);
+			this.daysArr = this.generateArray(1, this.days);
+			this.weekday = this.getWeekday(this.year, this.month);
+			this.weekdayArr = this.generateArray(1, this.weekday);
+			this.showTitle = `${this.year}年${this.month}月`;
+			if (this.isChange && this.type == 1) {
+				this.btnFix(true);
+			}
+		},
+		dateClick: function(day) {
+			day += 1;
+			if (!this.openDisAbled(this.year, this.month, day)) {
+				this.day = day;
+				let date = `${this.year}-${this.month}-${day}`;
+				if (this.type == 1) {
+					this.activeDate = date;
+				} else {
+					let compare = new Date(date.replace(/\-/g, '/')).getTime() < new Date(this.startDate.replace(/\-/g, '/')).getTime();
+					if (this.isStart || compare) {
+						this.startDate = date;
+						this.startYear = this.year;
+						this.startMonth = this.month;
+						this.startDay = this.day;
+						this.endYear = 0;
+						this.endMonth = 0;
+						this.endDay = 0;
+						this.endDate = '';
+						this.activeDate = '';
+						this.isStart = false;
+					} else {
+						this.endDate = date;
+						this.endYear = this.year;
+						this.endMonth = this.month;
+						this.endDay = this.day;
+						this.isStart = true;
+					}
+				}
+				if (!this.isFixed) {
+					this.btnFix();
+				}
+			}
+		},
+		show() {
+			this.isShow = true;
+		},
+		hide() {
+			this.isShow = false;
+			this.$emit('hide', {})
+		},
+		getWeekText(date) {
+			date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
+			let week = date.getDay();
+			return '星期' + ['日', '一', '二', '三', '四', '五', '六'][week];
+		},
+		btnFix(show) {
+			if (!show) {
+				this.hide();
+			}
+			if (this.type == 1) {
+				let arr = this.activeDate.split('-');
+				let year = this.isChange ? this.year : Number(arr[0]);
+				let month = this.isChange ? this.month : Number(arr[1]);
+				let day = this.isChange ? this.day : Number(arr[2]);
+				//当前月有多少天
+				let days = this.getMonthDay(year, month);
+				let result = `${year}-${this.formatNum(month)}-${this.formatNum(day)}`;
+				let weekText = this.getWeekText(result);
+				let isToday = false;
+				if (`${year}-${month}-${day}` == this.today) {
+					//今天
+					isToday = true;
+				}
+				let lunar = calendar.solar2lunar(year, month, day);
+				this.$emit('change', {
+					year: year,
+					month: month,
+					day: day,
+					days: days,
+					result: result,
+					week: weekText,
+					isToday: isToday,
+					switch: show, //是否是切换年月操作
+					lunar: lunar
+				});
+			} else {
+				if (!this.startDate || !this.endDate) return;
+				let startMonth = this.formatNum(this.startMonth);
+				let startDay = this.formatNum(this.startDay);
+				let startDate = `${this.startYear}-${startMonth}-${startDay}`;
+				let startWeek = this.getWeekText(startDate);
+				let startLunar = calendar.solar2lunar(this.startYear, startMonth, startDay);
+
+				let endMonth = this.formatNum(this.endMonth);
+				let endDay = this.formatNum(this.endDay);
+				let endDate = `${this.endYear}-${endMonth}-${endDay}`;
+				let endWeek = this.getWeekText(endDate);
+				let endLunar = calendar.solar2lunar(this.endYear, endMonth, endDay);
+				this.$emit('change', {
+					startYear: this.startYear,
+					startMonth: this.startMonth,
+					startDay: this.startDay,
+					startDate: startDate,
+					startWeek: startWeek,
+					startLunar: startLunar,
+					endYear: this.endYear,
+					endMonth: this.endMonth,
+					endDay: this.endDay,
+					endDate: endDate,
+					endWeek: endWeek,
+					endLunar: endLunar
+				});
+			}
+		}
+	}
+};
+</script>
+
+<style scoped>
+@font-face {
+	font-family: 'tuiDateFont';
+	src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA0AAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAFRAAAABoAAAAci0/w50dERUYAAAUkAAAAHgAAAB4AKQANT1MvMgAAAaAAAABDAAAAVjxuSNNjbWFwAAAB+AAAAEoAAAFS5iPQt2dhc3AAAAUcAAAACAAAAAj//wADZ2x5ZgAAAlQAAAFHAAABvPf29TBoZWFkAAABMAAAADAAAAA2GMsN3WhoZWEAAAFgAAAAHQAAACQHjAOFaG10eAAAAeQAAAATAAAAFgzQAPJsb2NhAAACRAAAABAAAAAQAOoBSG1heHAAAAGAAAAAHgAAACABEwA3bmFtZQAAA5wAAAFJAAACiCnmEVVwb3N0AAAE6AAAADQAAABLUwjqHHjaY2BkYGAAYp5Gj5/x/DZfGbhZGEDg1tUn7+F00P/LzOuY9YFcDgYmkCgAa0gNlHjaY2BkYGBu+N/AEMPCAALM6xgYGVABCwBT4AMaAAAAeNpjYGRgYGBn0GZgYgABEMkFhAwM/8F8BgANaAFLAAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PGJ49ZG7438AQw9zA0AAUZgTJAQDrcAy8AHjaY2GAABYIDgLCBQx1AAcEAc8AeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMzxifcTx7+P8/kMUAYUkxS/6VVIXqAgNGNgY4lxGoB6QPBTAyDHsAADDkDYkAAAAAAAAAAAAAADQAagC2AN542m2QsU7DMBCG/Tt1bNPUiUnkSgiVtqKpxJAgVLVbeAa6MaK+B4JXgJWBjY21UtW5gpkdMTFX7dzApaJLhXU6n8+n//ttxtn458N79XJWZ8eMxS00C4wy9A1EP8PQncAlIQzS4WgsVtPpSmwzV3OFRqLetH5TSQMK939X61ptPZ2p2EAttNMLBRMrtschQblDeS34aY50cIkCzg/B2Y5C+VpyQxhFkRgu515O8jvU5mmPM2O0wJ5Z27vhX+yMsV437WvCdTM+GI40MgwKfuGammC0uURqeqFMfe9cxaJclkt5GMaB1hIR1VobOgpEiKq+sLZcIrJWhO3/Jw7qWlYj1Jf21FaCtmd5bevrlk28O/7A4spXTl4KTh9MTlqQ8PESBRstReic+sRj0Dni9fIqmNS/pXNWCvWOeYBmx5S9Bsn9Ah+5WtAAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAO2MGiTIxMjMyMLIys7GmJeRmlmWZQ2pQ5OSORLaU0Mz2/FACDfwlbAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABgABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9K2rT97DaABNlwiuAAA=)
+		format('woff');
+	font-weight: normal;
+	font-style: normal;
+}
+
+.tui-iconfont {
+	font-family: 'tuiDateFont' !important;
+	font-size: 36rpx;
+	font-style: normal;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.tui-font-close:before {
+	content: '\e608';
+}
+
+.tui-font-check:before {
+	content: '\e6e1';
+}
+
+.tui-font-arrowright:before {
+	content: '\e600';
+}
+
+.tui-font-arrowleft:before {
+	content: '\e601';
+}
+
+.tui-date-box {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 20rpx 0 30rpx;
+	background-color: #fff;
+}
+
+.tui-calendar-radius {
+	border-top-left-radius: 20rpx;
+	border-top-right-radius: 20rpx;
+	overflow: hidden;
+}
+
+.tui-date_time {
+	padding: 0 16rpx;
+	color: #333;
+	font-size: 32rpx;
+	line-height: 32rpx;
+	font-weight: bold;
+}
+
+.tui-font-arrowleft {
+	margin-right: 32rpx;
+}
+
+.tui-font-arrowright {
+	margin-left: 32rpx;
+}
+
+.tui-date-header {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	background-color: #fff;
+	font-size: 24rpx;
+	line-height: 24rpx;
+	color: #555;
+	box-shadow: 0 15rpx 20rpx -15rpx #efefef;
+	position: relative;
+	z-index: 2;
+}
+
+.tui-date-content {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	padding: 12rpx 0;
+	box-sizing: border-box;
+	background-color: #fff;
+	position: relative;
+}
+
+.tui-flex-start {
+	align-content: flex-start;
+}
+
+.tui-bg-month {
+	position: absolute;
+	font-size: 260rpx;
+	line-height: 260rpx;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	color: #f5f5f7;
+	z-index: 1;
+}
+
+.tui-date {
+	width: 14.2857%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 12rpx 0;
+	overflow: hidden;
+	position: relative;
+	z-index: 2;
+}
+
+.tui-date-pd_0 {
+	padding: 0 !important;
+}
+
+.tui-start-date {
+	border-top-left-radius: 8rpx;
+	border-bottom-left-radius: 8rpx;
+}
+
+.tui-end-date {
+	border-top-right-radius: 8rpx;
+	border-bottom-right-radius: 8rpx;
+}
+
+.tui-date-text {
+	width: 80rpx;
+	height: 80rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	font-size: 32rpx;
+	line-height: 32rpx;
+	position: relative;
+	border-radius: 50%;
+}
+
+.tui-btn-calendar {
+	padding: 16rpx;
+	box-sizing: border-box;
+	text-align: center;
+	text-decoration: none;
+}
+
+.tui-opacity {
+	opacity: 0.5;
+}
+
+.tui-bottom-popup {
+	width: 100%;
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 9999;
+	visibility: hidden;
+	transform: translate3d(0, 100%, 0);
+	transform-origin: center;
+	transition: all 0.3s ease-in-out;
+	min-height: 20rpx;
+}
+
+.tui-popup-show {
+	transform: translate3d(0, 0, 0);
+	visibility: visible;
+}
+
+.tui-popup-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.6);
+	z-index: 9996;
+	transition: all 0.3s ease-in-out;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.tui-mask-show {
+	opacity: 1;
+	visibility: visible;
+}
+
+.tui-calendar-header {
+	width: 100%;
+	height: 80rpx;
+	padding: 0 40rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
+	font-size: 30rpx;
+	background-color: #fff;
+	color: #555;
+	position: relative;
+}
+
+.tui-font-close {
+	position: absolute;
+	right: 30rpx;
+	top: 50%;
+	transform: translateY(-50%);
+	color: #999;
+}
+
+.tui-btn-calendar {
+	padding: 16rpx;
+	box-sizing: border-box;
+	text-align: center;
+	text-decoration: none;
+}
+
+.tui-font-check {
+	color: #fff;
+	font-size: 54rpx;
+	line-height: 54rpx;
+}
+
+.tui-custom-desc {
+	width: 100%;
+	font-size: 24rpx;
+	line-height: 24rpx;
+	transform: scale(0.8);
+	transform-origin: center center;
+	text-align: center;
+}
+
+.tui-lunar-unshow {
+	position: absolute;
+	left: 0;
+	bottom: 8rpx;
+	z-index: 2;
+}
+
+.tui-date-desc {
+	width: 100%;
+	font-size: 24rpx;
+	line-height: 24rpx;
+	position: absolute;
+	left: 0;
+	transform: scale(0.8);
+	transform-origin: center center;
+	text-align: center;
+	bottom: 8rpx;
+	z-index: 2;
+}
+
+.tui-calendar-op {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	background-color: #fff;
+	padding: 0 42rpx 30rpx;
+	box-sizing: border-box;
+	font-size: 24rpx;
+	color: #666;
+}
+
+.tui-calendar-result {
+	height: 48rpx;
+	transform: scale(0.9);
+	transform-origin: center 100%;
+}
+
+.tui-calendar-btn_box {
+	width: 100%;
+}
+</style>
diff --git a/components/thorui/tui-card/tui-card.vue b/components/thorui/tui-card/tui-card.vue
new file mode 100644
index 0000000..7214b33
--- /dev/null
+++ b/components/thorui/tui-card/tui-card.vue
@@ -0,0 +1,211 @@
+<template>
+	<view class="tui-card-class tui-card" :class="[full?'tui-card-full':'',border?'tui-card-border':'']" @tap="handleClick"
+	 @longtap="longTap">
+		<view class="tui-card-header" :class="{'tui-header-line':header.line}" :style="{background:header.bgcolor || '#fff'}">
+			<view class="tui-header-left">
+				<image :src="image.url" class="tui-header-thumb" :class="{'tui-thumb-circle':image.circle}" mode="widthFix" v-if="image.url"
+				 :style="{height:(image.height || 60)+'rpx',width:(image.width || 60)+'rpx'}"></image>
+				<text class="tui-header-title" :style="{fontSize:(title.size || 30)+'rpx',color:(title.color || '#7A7A7A')}" v-if="title.text">{{title.text}}</text>
+			</view>
+			<view class="tui-header-right" :style="{fontSize:(tag.size || 24)+'rpx',color:(tag.color || '#b2b2b2')}" v-if="tag.text">
+				{{tag.text}}
+			</view>
+		</view>
+		<view class="tui-card-body">
+			<slot name="body"></slot>
+		</view>
+		<view class="tui-card-footer">
+			<slot name="footer"></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tuiCard",
+		props: {
+			//是否铺满
+			full: {
+				type: Boolean,
+				default: false
+			},
+			image: {
+				type: Object,
+				default: function() {
+					return {
+						url: "", //图片地址
+						height: 60, //图片高度
+						width: 60, //图片宽度
+						circle: false
+					}
+				}
+			},
+			//标题
+			title: {
+				type: Object,
+				default: function() {
+					return {
+						text: "", //标题文字
+						size: 30, //字体大小
+						color: "#7A7A7A" //字体颜色
+					}
+				}
+			},
+			//标签，时间等
+			tag: {
+				type: Object,
+				default: function() {
+					return {
+						text: "", //标签文字
+						size: 24, //字体大小
+						color: "#b2b2b2" //字体颜色
+					}
+				}
+			},
+			header: {
+				type: Object,
+				default: function() {
+					return {
+						bgcolor: "#fff", //背景颜色
+						line: false //是否去掉底部线条
+					}
+				}
+			},
+			//是否设置外边框
+			border: {
+				type: Boolean,
+				default: false
+			},
+			index: {
+				type: Number,
+				default: 0
+			}
+		},
+		methods: {
+			handleClick() {
+				this.$emit('click', {
+					index: this.index
+				});
+			},
+			longTap() {
+				this.$emit('longclick', {
+					index: this.index
+				});
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-card {
+		margin: 0 30rpx;
+		font-size: 28rpx;
+		background-color: #fff;
+		border-radius: 10rpx;
+		box-shadow: 0 0 10rpx #eee;
+		box-sizing: border-box;
+		overflow: hidden;
+	}
+
+	.tui-card-full {
+		margin: 0 !important;
+		border-radius: 0 !important;
+	}
+
+	.tui-card-full::after {
+		border-radius: 0 !important;
+	}
+
+	.tui-card-border {
+		position: relative;
+		box-shadow: none !important
+	}
+
+	.tui-card-border::after {
+		content: ' ';
+		position: absolute;
+		height: 200%;
+		width: 200%;
+		border: 1px solid #ddd;
+		transform-origin: 0 0;
+		-webkit-transform-origin: 0 0;
+		-webkit-transform: scale(0.5);
+		transform: scale(0.5);
+		left: 0;
+		top: 0;
+		border-radius: 20rpx;
+		box-sizing: border-box;
+		pointer-events: none;
+	}
+
+	.tui-card-header {
+		width: 100%;
+		padding: 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		position: relative;
+		box-sizing: border-box;
+		overflow: hidden;
+		border-top-left-radius: 10rpx;
+		border-top-right-radius: 10rpx;
+	}
+
+	.tui-card-header::after {
+		content: '';
+		position: absolute;
+		border-bottom: 1rpx solid #eaeef1;
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+		bottom: 0;
+		right: 0;
+		left: 0;
+		pointer-events: none;
+	}
+
+	.tui-header-line::after {
+		border-bottom: 0 !important;
+	}
+
+	.tui-header-thumb {
+		height: 60rpx;
+		width: 60rpx;
+		vertical-align: middle;
+		margin-right: 20rpx;
+		border-radius: 6rpx;
+	}
+
+	.tui-thumb-circle {
+		border-radius: 50% !important;
+	}
+
+	.tui-header-title {
+		display: inline-block;
+		font-size: 30rpx;
+		color: #7a7a7a;
+		vertical-align: middle;
+		max-width: 460rpx;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.tui-header-right {
+		font-size: 24rpx;
+		color: #b2b2b2;
+	}
+
+	.tui-card-body {
+		font-size: 32rpx;
+		color: #262b3a;
+		box-sizing: border-box;
+	}
+
+	.tui-card-footer {
+		font-size: 28rpx;
+		color: #596d96;
+		border-bottom-left-radius: 10rpx;
+		border-bottom-right-radius: 10rpx;
+		box-sizing: border-box;
+	}
+</style>
diff --git a/components/thorui/tui-cascade-selection/tui-cascade-selection.vue b/components/thorui/tui-cascade-selection/tui-cascade-selection.vue
new file mode 100644
index 0000000..69729c5
--- /dev/null
+++ b/components/thorui/tui-cascade-selection/tui-cascade-selection.vue
@@ -0,0 +1,521 @@
+<template>
+	<view class="tui-cascade-selection">
+		<scroll-view
+			scroll-x
+			scroll-with-animation
+			:scroll-into-view="scrollViewId"
+			:style="{ backgroundColor: headerBgColor }"
+			class="tui-bottom-line"
+			:class="{ 'tui-btm-none': !headerLine }"
+		>
+			<view class="tui-selection-header" :style="{ height: tabsHeight, backgroundColor: backgroundColor }">
+				<view
+					class="tui-header-item"
+					:class="{ 'tui-font-bold': index === currentTab && bold }"
+					:style="{ color: index === currentTab ? activeColor : color, fontSize: size + 'rpx' }"
+					:id="`id_${index}`"
+					@tap.stop="swichNav"
+					:data-current="index"
+					v-for="(item, index) in selectedArr"
+					:key="index"
+				>
+					{{ item.text }}
+					<view class="tui-active-line" :style="{ backgroundColor: lineColor }" v-if="index === currentTab && showLine"></view>
+				</view>
+			</view>
+		</scroll-view>
+		<swiper class="tui-selection-list" :current="currentTab" duration="300" @change="switchTab" :style="{ height: height, backgroundColor: backgroundColor }">
+			<swiper-item v-for="(item, index) in selectedArr" :key="index">
+				<scroll-view scroll-y :scroll-into-view="item.scrollViewId" class="tui-selection-item" :style="{ height: height }">
+					<view class="tui-first-item" :style="{ height: firstItemTop }"></view>
+					<view
+						class="tui-selection-cell"
+						:style="{ padding: padding, backgroundColor: backgroundColor }"
+						:id="`id_${subIndex}`"
+						v-for="(subItem, subIndex) in item.list"
+						:key="subIndex"
+						@tap="change(index, subIndex, subItem)"
+					>
+						<icon type="success_no_circle" v-if="item.index === subIndex" :color="checkMarkColor" :size="checkMarkSize" class="tui-icon-success"></icon>
+						<image :src="subItem.src" v-if="subItem.src" class="tui-cell-img" :style="{ width: imgWidth, height: imgHeight, borderRadius: radius }"></image>
+						<view
+							class="tui-cell-title"
+							:class="{ 'tui-font-bold': item.index === subIndex && textBold, 'tui-flex-shrink': nowrap }"
+							:style="{ color: item.index === subIndex ? textActiveColor : textColor, fontSize: textSize + 'rpx' }"
+						>
+							{{ subItem.text }}
+						</view>
+						<view class="tui-cell-sub_title" :style="{ color: subTextColor, fontSize: subTextSize + 'rpx' }" v-if="subItem.subText">{{ subItem.subText }}</view>
+					</view>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiCascadeSelection',
+	props: {
+		/**
+			 * 如果下一级是请求返回，则为第一级数据，否则所有数据
+			 * 数据格式
+			  [{
+				  src: "",
+				  text: "",
+				  subText: "",
+				  value: 0,
+				  children:[{
+					  text: "",
+					  subText: "",
+					  value: 0,
+					  children:[]
+			   }]
+			  }]
+			 * */
+		itemList: {
+			type: Array,
+			default: () => {
+				return [];
+			}
+		},
+		/*
+		   初始化默认选中数据
+		   [{
+			text: "",//选中text
+			subText: '',//选中subText
+			value: '',//选中value
+			src: '', //选中src，没有则传空或不传
+			index: 0, //选中数据在当前layer索引
+			list: [{src: "", text: "", subText: "", value: 101}] //所有layer数据集合
+		  }];
+		    
+		   */
+		defaultItemList: {
+			type: Array,
+			value: []
+		},
+		//是否显示header底部细线
+		headerLine: {
+			type: Boolean,
+			default: true
+		},
+		//header背景颜色
+		headerBgColor: {
+			type: String,
+			default: '#FFFFFF'
+		},
+		//顶部标签栏高度
+		tabsHeight: {
+			type: String,
+			default: '88rpx'
+		},
+		//默认显示文字
+		text: {
+			type: String,
+			default: '请选择'
+		},
+		//tabs 文字大小
+		size: {
+			type: Number,
+			default: 28
+		},
+		//tabs 文字颜色
+		color: {
+			type: String,
+			default: '#555'
+		},
+		//选中颜色
+		activeColor: {
+			type: String,
+			default: '#5677fc'
+		},
+		//选中后文字加粗
+		bold: {
+			type: Boolean,
+			default: true
+		},
+		//选中后是否显示底部线条
+		showLine: {
+			type: Boolean,
+			default: true
+		},
+		//线条颜色
+		lineColor: {
+			type: String,
+			default: '#5677fc'
+		},
+		//icon 大小
+		checkMarkSize: {
+			type: Number,
+			default: 15
+		},
+		//icon 颜色
+		checkMarkColor: {
+			type: String,
+			default: '#5677fc'
+		},
+		//item 图片宽度
+		imgWidth: {
+			type: String,
+			default: '40rpx'
+		},
+		//item 图片高度
+		imgHeight: {
+			type: String,
+			default: '40rpx'
+		},
+		//图片圆角
+		radius: {
+			type: String,
+			default: '50%'
+		},
+		//item text颜色
+		textColor: {
+			type: String,
+			default: '#333'
+		},
+		textActiveColor: {
+			type: String,
+			default: '#333'
+		},
+		//选中后字体是否加粗
+		textBold: {
+			type: Boolean,
+			default: true
+		},
+		//item text字体大小
+		textSize: {
+			type: Number,
+			default: 28
+		},
+		//text 是否不换行
+		nowrap: {
+			type: Boolean,
+			default: false
+		},
+		//item subText颜色
+		subTextColor: {
+			type: String,
+			default: '#999'
+		},
+		//item subText字体大小
+		subTextSize: {
+			type: Number,
+			default: 24
+		},
+		// item padding
+		padding: {
+			type: String,
+			default: '20rpx 30rpx'
+		},
+		//占位高度，第一条数据距离顶部距离
+		firstItemTop: {
+			type: String,
+			default: '20rpx'
+		},
+		//swiper 高度
+		height: {
+			type: String,
+			default: '300px'
+		},
+		//item  swiper 内容部分背景颜色
+		backgroundColor: {
+			type: String,
+			default: '#FFFFFF'
+		},
+		//子集数据是否请求返回（默认false，一次性返回所有数据）
+		request: {
+			type: Boolean,
+			default: false
+		},
+		//子级数据（当有改变时，默认当前选中项新增子级数据，request=true时生效）
+		receiveData: {
+			type: Array,
+			default: () => {
+				return [];
+			}
+		},
+		//改变值则重置数据
+		reset: {
+			type: [Number, String],
+			default: 0
+		}
+	},
+	watch: {
+		itemList(val) {
+			this.initData(val, -1);
+		},
+		receiveData(val) {
+			this.subLevelData(val, this.currentTab);
+		},
+		reset() {
+			this.initData(this.itemList, -1);
+		},
+		defaultItemList(val){
+			this.setDefaultData(val)
+		}
+	},
+	created() {
+		this.setDefaultData(this.defaultItemList)
+	},
+	data() {
+		return {
+			currentTab: 0,
+			//tab栏scrollview滚动的位置
+			scrollViewId: 'id__1',
+			selectedArr: []
+		};
+	},
+	methods: {
+		setDefaultData(val){
+			let defaultItemList = val || [];
+			if (defaultItemList.length > 0) {
+				defaultItemList.map(item => {
+					item.scrollViewId = `id_${item.index}`;
+				});
+				this.selectedArr = defaultItemList;
+				this.currentTab = defaultItemList.length - 1;
+				this.$nextTick(() => {
+					this.checkCor();
+				});
+			} else {
+				this.initData(this.itemList, -1);
+			}
+		},
+		initData(data, layer) {
+			if (!data || data.length === 0) return;
+			if (this.request) {
+				//第一级数据
+				this.subLevelData(data, layer);
+			} else {
+				let selectedValue = this.selectedValue || {};
+				if (selectedValue.type) {
+					this.setDefaultData(selectedValue);
+				} else {
+					this.subLevelData(this.getItemList(layer, -1), layer);
+				}
+			}
+		},
+		removeChildren(data) {
+			let list = data.map(item => {
+				delete item['children'];
+				return item;
+			});
+			return list;
+		},
+		getItemList(layer, index) {
+			let list = [];
+			let arr = JSON.parse(JSON.stringify(this.itemList));
+			if (layer == -1) {
+				list = this.removeChildren(arr);
+			} else {
+				let value = this.selectedArr[0].index;
+				value = value == -1 ? index : value;
+				list = arr[value].children || [];
+				if (layer > 0) {
+					for (let i = 1; i < layer + 1; i++) {
+						let val = layer === i ? index : this.selectedArr[i].index;
+						list = list[val].children || [];
+						if (list.length === 0) break;
+					}
+				}
+				list = this.removeChildren(list);
+			}
+			return list;
+		},
+		//滚动切换
+		switchTab: function(e) {
+			this.currentTab = e.detail.current;
+			this.checkCor();
+		},
+		//点击标题切换当
+		swichNav: function(e) {
+			let cur = e.currentTarget.dataset.current;
+			if (this.currentTab != cur) {
+				this.currentTab = cur;
+			}
+		},
+		checkCor: function() {
+			let item = this.selectedArr[this.currentTab];
+			item.scrollViewId = 'id__1';
+			this.$nextTick(() => {
+				setTimeout(() => {
+					let val = item.index < 2 ? 0 : Number(item.index - 2);
+					item.scrollViewId = `id_${val}`;
+				}, 2);
+			});
+			
+			if (this.currentTab > 1) {
+				this.scrollViewId = `id_${this.currentTab - 1}`;
+			} else {
+				this.scrollViewId = `id_0`;
+			}
+		},
+		change(index, subIndex, subItem) {
+			let item = this.selectedArr[index];
+			if (item.index == subIndex) return;
+			item.index = subIndex;
+			item.text = subItem.text;
+			item.value = subItem.value;
+			item.subText = subItem.subText || '';
+			item.src = subItem.src || '';
+
+			this.$emit('change', {
+				layer: index,
+				subIndex: subIndex, //layer=> Array index
+				...subItem
+			});
+
+			if (!this.request) {
+				let data = this.getItemList(index, subIndex);
+				this.subLevelData(data, index);
+			}
+		},
+		//新增子级数据时处理
+		subLevelData(data, layer) {
+			if (!data || data.length === 0) {
+				if (layer == -1) return;
+				//完成选择
+				let result = JSON.parse(JSON.stringify(this.selectedArr));
+				let lastItem = result[result.length - 1] || {};
+				let text = '';
+				result.map(item => {
+					text += item.text;
+					delete item['list'];
+					//delete item['index'];
+					delete item['scrollViewId'];
+					return item;
+				});
+				this.$emit('complete', {
+					result: result,
+					value: lastItem.value,
+					text: text,
+					subText: lastItem.subText,
+					src: lastItem.src
+				});
+			} else {
+				//重置数据（ >layer层级）
+				let item = [
+					{
+						text: this.text,
+						subText: '',
+						value: '',
+						src: '',
+						index: -1,
+						scrollViewId: 'id__1',
+						list: data
+					}
+				];
+				if (layer == -1) {
+					this.selectedArr = item;
+				} else {
+					let retainArr = this.selectedArr.slice(0, layer + 1);
+					this.selectedArr = retainArr.concat(item);
+				}
+				this.$nextTick(() => {
+					this.currentTab = this.selectedArr.length - 1;
+				});
+			}
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-cascade-selection {
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.tui-selection-header {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	position: relative;
+	box-sizing: border-box;
+}
+
+.tui-bottom-line {
+	position: relative;
+}
+
+.tui-bottom-line::after {
+	width: 100%;
+	content: '';
+	position: absolute;
+	border-bottom: 1rpx solid #eaeef1;
+	-webkit-transform: scaleY(0.5) translateZ(0);
+	transform: scaleY(0.5) translateZ(0);
+	transform-origin: 0 100%;
+	bottom: 0;
+	right: 0;
+	left: 0;
+}
+
+.tui-btm-none::after {
+	border-bottom: 0 !important;
+}
+
+.tui-header-item {
+	max-width: 240rpx;
+	padding: 15rpx 30rpx;
+	box-sizing: border-box;
+	flex-shrink: 0;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	position: relative;
+}
+
+.tui-font-bold {
+	font-weight: bold;
+}
+
+.tui-active-line {
+	width: 60rpx;
+	height: 6rpx;
+	border-radius: 4rpx;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.tui-selection-cell {
+	width: 100%;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+}
+
+.tui-icon-success {
+	margin-right: 12rpx;
+}
+
+.tui-cell-img {
+	margin-right: 12rpx;
+	flex-shrink: 0;
+}
+
+.tui-cell-title {
+	word-break: break-all;
+}
+
+.tui-flex-shrink {
+	flex-shrink: 0;
+}
+
+.tui-font-bold {
+	font-weight: bold;
+}
+
+.tui-cell-sub_title {
+	margin-left: 20rpx;
+	word-break: break-all;
+}
+.tui-first-item {
+	width: 100%;
+}
+</style>
diff --git a/components/thorui/tui-circular-progress/tui-circular-progress.vue b/components/thorui/tui-circular-progress/tui-circular-progress.vue
new file mode 100644
index 0000000..19ab3ec
--- /dev/null
+++ b/components/thorui/tui-circular-progress/tui-circular-progress.vue
@@ -0,0 +1,264 @@
+<template>
+	<view class="tui-circular-container" :style="{ width: diam + 'px', height: (height || diam) + 'px' }">
+		<canvas
+			class="tui-circular-default"
+			:canvas-id="defaultCanvasId"
+			:id="defaultCanvasId"
+			:style="{ width: diam + 'px', height: (height || diam) + 'px' }"
+			v-if="defaultShow"
+		></canvas>
+		<canvas class="tui-circular-progress" :canvas-id="progressCanvasId" :id="progressCanvasId" :style="{ width: diam + 'px', height: (height || diam) + 'px' }"></canvas>
+		<slot />
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiCircularProgress',
+	props: {
+		/*
+			  传值需使用rpx进行转换保证各终端兼容
+			  px = rpx / 750 * wx.getSystemInfoSync().windowWidth
+			  圆形进度条(画布)宽度，直径 [px]
+			*/
+		diam: {
+			type: Number,
+			default: 60
+		},
+		//圆形进度条(画布)高度，默认取diam值[当画半弧时传值，height有值时则取height]
+		height: {
+			type: Number,
+			default: 0
+		},
+		//进度条线条宽度[px]
+		lineWidth: {
+			type: Number,
+			default: 4
+		},
+		/*
+			 线条的端点样式
+			 butt：向线条的每个末端添加平直的边缘
+			 round	向线条的每个末端添加圆形线帽
+			 square	向线条的每个末端添加正方形线帽
+			*/
+		lineCap: {
+			type: String,
+			default: 'round'
+		},
+		//圆环进度字体大小 [px]
+		fontSize: {
+			type: Number,
+			default: 12
+		},
+		//圆环进度字体颜色
+		fontColor: {
+			type: String,
+			default: '#5677fc'
+		},
+		//是否显示进度文字
+		fontShow: {
+			type: Boolean,
+			default: true
+		},
+		/*
+			 自定义显示文字[默认为空，显示百分比，fontShow=true时生效]
+			 可以使用 slot自定义显示内容
+			*/
+		percentText: {
+			type: String,
+			default: ''
+		},
+		//是否显示默认(背景)进度条
+		defaultShow: {
+			type: Boolean,
+			default: true
+		},
+		//默认进度条颜色
+		defaultColor: {
+			type: String,
+			default: '#CCC'
+		},
+		//进度条颜色
+		progressColor: {
+			type: String,
+			default: '#5677fc'
+		},
+		//进度条渐变颜色[结合progressColor使用，默认为空]
+		gradualColor: {
+			type: String,
+			default: ''
+		},
+		//起始弧度，单位弧度
+		sAngle: {
+			type: Number,
+			default: -Math.PI / 2
+		},
+		//指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针
+		counterclockwise: {
+			type: Boolean,
+			default: false
+		},
+		//进度百分比 [10% 传值 10]
+		percentage: {
+			type: Number,
+			default: 0
+		},
+		//进度百分比缩放倍数[使用半弧为100%时，则可传2]
+		multiple: {
+			type: Number,
+			default: 1
+		},
+		//动画执行时间[单位毫秒，低于50无动画]
+		duration: {
+			type: Number,
+			default: 800
+		},
+		//backwards: 动画从头播；forwards：动画从上次结束点接着播
+		activeMode: {
+			type: String,
+			default: 'backwards'
+		}
+	},
+	watch: {
+		percentage(val) {
+			this.initDraw();
+		}
+	},
+	data() {
+		return {
+			// #ifdef MP-WEIXIN
+			progressCanvasId: 'progressCanvasId',
+			defaultCanvasId: 'defaultCanvasId',
+			// #endif
+			// #ifndef MP-WEIXIN
+			progressCanvasId: this.getCanvasId(),
+			defaultCanvasId: this.getCanvasId(),
+			// #endif
+			progressContext: null,
+			linearGradient: null,
+			//起始百分比
+			startPercentage: 0
+			// dpi
+			//pixelRatio: uni.getSystemInfoSync().pixelRatio
+		};
+	},
+	mounted() {
+		this.initDraw(true);
+	},
+	methods: {
+		//初始化绘制
+		initDraw(init) {
+			let start = this.activeMode === 'backwards' ? 0 : this.startPercentage;
+			start = start > this.percentage ? 0 : start;
+			if (this.defaultShow && init) {
+				this.drawDefaultCircular();
+			}
+			this.drawProgressCircular(start);
+		},
+		//默认(背景)圆环
+		drawDefaultCircular() {
+			let ctx = uni.createCanvasContext(this.defaultCanvasId, this);
+			ctx.setLineWidth(this.lineWidth);
+			ctx.setStrokeStyle(this.defaultColor);
+			//终止弧度
+			let eAngle = Math.PI * (this.height ? 1 : 2) + this.sAngle;
+			this.drawArc(ctx, eAngle);
+		},
+		//进度圆环
+		drawProgressCircular(startPercentage) {
+			let ctx = this.progressContext;
+			let gradient = this.linearGradient;
+			if (!ctx) {
+				ctx = uni.createCanvasContext(this.progressCanvasId, this);
+				//创建一个线性的渐变颜色 CanvasGradient对象
+				gradient = ctx.createLinearGradient(0, 0, this.diam, 0);
+				gradient.addColorStop('0', this.progressColor);
+				if (this.gradualColor) {
+					gradient.addColorStop('1', this.gradualColor);
+				}
+				// #ifdef APP-PLUS
+				const res = uni.getSystemInfoSync();
+				if (!this.gradualColor && res.platform.toLocaleLowerCase() == 'android') {
+					gradient.addColorStop('1', this.progressColor);
+				}
+				// #endif
+				this.progressContext = ctx;
+				this.linearGradient = gradient;
+			}
+			ctx.setLineWidth(this.lineWidth);
+			ctx.setStrokeStyle(gradient);
+			let time = this.percentage == 0 || this.duration < 50 ? 0 : this.duration / this.percentage;
+			if (this.percentage > 0) {
+				startPercentage = this.duration < 50 ? this.percentage - 1 : startPercentage;
+				startPercentage++;
+			}
+			if (this.fontShow) {
+				ctx.setFontSize(this.fontSize);
+				ctx.setFillStyle(this.fontColor);
+				ctx.setTextAlign('center');
+				ctx.setTextBaseline('middle');
+				let percentage = this.percentText;
+				if (!percentage) {
+					percentage = this.counterclockwise ? 100 - startPercentage * this.multiple : startPercentage * this.multiple;
+					percentage = `${percentage}%`;
+				}
+				let radius = this.diam / 2;
+				ctx.fillText(percentage, radius, radius);
+			}
+			if (this.percentage == 0 || (this.counterclockwise && startPercentage == 100)) {
+				ctx.draw();		
+			}else{
+				let eAngle = ((2 * Math.PI) / 100) * startPercentage + this.sAngle;
+				this.drawArc(ctx, eAngle);
+			}
+			setTimeout(() => {
+				this.startPercentage = startPercentage;
+				if (startPercentage == this.percentage) {
+					this.$emit('end', {
+						canvasId: this.progressCanvasId,
+						percentage: startPercentage
+					});
+				} else {
+					this.drawProgressCircular(startPercentage);
+				}
+				this.$emit('change', {
+					percentage: startPercentage
+				});
+			}, time);
+			// #ifdef H5
+			// requestAnimationFrame(()=>{})
+			// #endif
+		},
+		//创建弧线
+		drawArc(ctx, eAngle) {
+			ctx.setLineCap(this.lineCap);
+			ctx.beginPath();
+			let radius = this.diam / 2; //x=y
+			ctx.arc(radius, radius, radius - this.lineWidth, this.sAngle, eAngle, this.counterclockwise);
+			ctx.stroke();
+			ctx.draw();
+		},
+		//生成canvasId
+		getCanvasId() {
+			let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+				return (c === 'x' ? (Math.random() * 16) | 0 : 'r&0x3' | '0x8').toString(16);
+			});
+			return uuid;
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-circular-container,
+.tui-circular-default {
+	position: relative;
+}
+
+.tui-circular-progress {
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 10;
+}
+</style>
\ No newline at end of file
diff --git a/components/thorui/tui-collapse/tui-collapse.vue b/components/thorui/tui-collapse/tui-collapse.vue
new file mode 100644
index 0000000..a812a2a
--- /dev/null
+++ b/components/thorui/tui-collapse/tui-collapse.vue
@@ -0,0 +1,166 @@
+<template>
+	<view class="tui-collapse" :style="{backgroundColor:bgColor}">
+		<view class="tui-collapse-head" :style="{backgroundColor:hdBgColor}" @tap.stop="handleClick">
+			<view class="tui-header" :class="{'tui-opacity':disabled}">
+				<slot name="title"></slot>
+				<view class="tui-collapse-icon tui-icon-arrow" :class="{'tui-icon-active':isOpen}" :style="{color:arrowColor}" v-if="arrow"></view>
+			</view>
+		</view>
+		<view class="tui-collapse-body_box" :style="{backgroundColor:bdBgColor,height:isOpen?height:'0rpx'}">
+			<view class="tui-collapse-body" :class="{'tui-collapse-transform':height=='auto','tui-collapse-body_show':isOpen && height=='auto'}">
+				<slot name="content"></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tuiCollapse",
+		props: {
+			//collapse背景颜色
+			bgColor: {
+				type: String,
+				default: 'transparent'
+			},
+			//collapse-head 背景颜色
+			hdBgColor: {
+				type: String,
+				default: '#fff'
+			},
+			//collapse-body 背景颜色
+			bdBgColor: {
+				type: String,
+				default: 'transparent'
+			},
+			//collapse-body实际高度 open时使用
+			height: {
+				type: String,
+				default: 'auto'
+			},
+			//索引
+			index: {
+				type: Number,
+				default: 0
+			},
+			//当前索引，index==current时展开
+			current: {
+				type: Number,
+				default: -1
+			},
+			// 是否禁用
+			disabled: {
+				type: [Boolean, String],
+				default: false
+			},
+			//是否带箭头
+			arrow: {
+				type: [Boolean, String],
+				default: true
+			},
+			//箭头颜色
+			arrowColor: {
+				type: String,
+				default: "#333"
+			}
+		},
+		watch: {
+			current() {
+				this.updateCurrentChange()
+			}
+		},
+		created() {
+			this.updateCurrentChange()
+		},
+		data() {
+			return {
+				isOpen: false
+			};
+		},
+		methods: {
+			updateCurrentChange() {
+				this.isOpen = this.index == this.current
+			},
+			handleClick() {
+				if (this.disabled) return;
+				this.$emit("click", {
+					index: Number(this.index)
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	@font-face {
+		font-family: 'tuiCollapse';
+		src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQ4AA0AAAAABlgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEHAAAABoAAAAciRx3B0dERUYAAAP8AAAAHgAAAB4AKQAKT1MvMgAAAaAAAABCAAAAVjxuR/JjbWFwAAAB9AAAAD4AAAFCAA/pq2dhc3AAAAP0AAAACAAAAAj//wADZ2x5ZgAAAkAAAABEAAAARCs1U/toZWFkAAABMAAAADAAAAA2FpaT+mhoZWEAAAFgAAAAHQAAACQHngOFaG10eAAAAeQAAAAPAAAAEAwAAEBsb2NhAAACNAAAAAoAAAAKACIAAG1heHAAAAGAAAAAHwAAACABDwAdbmFtZQAAAoQAAAFJAAACiCnmEVVwb3N0AAAD0AAAACMAAAA1DunpUnjaY2BkYGAAYja/oO54fpuvDNwsDCBwc4/6fzjtwNDNfICpBMjlYGACiQIAGVAKZnjaY2BkYGBu+N/AEMPCAALMBxgYGVABCwBVNgMsAAAAeNpjYGRgYGBhEGQA0QwMTEDMBYQMDP/BfAYACnYBLQB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PGJ4xMDf8b2CIYW5gaAAKM4LkANq9C9sAAHjaY2GAABYIdgAAAMAATQB42mNgYGBmgGAZBkYGELAB8hjBfBYGBSDNAoRA/jOG//8hpBQzVCUDIxsDjMnAyAQkmBhQASPDsAcAMCAGoQAAAAAAAAAAAAAAIgAAAAEAQACLA8ACdAAQAAAlASYiBhQXARYyNwE2NCYiBwIA/oYNIBkMAZcNIA0BlwwZIA3uAXoMGSAN/mkMDAGXDSAZDAB42n2QPU4DMRCFn/MHJBJCIKhdUQDa/JQpEyn0CKWjSDbekGjXXnmdSDkBLRUHoOUYHIAbINFyCl6WSZMia+3o85uZ57EBnOMbCv/fJe6EFY7xKFzBETLhKvUX4Rr5XbiOFj6FG9R/hJu4VQPhFi7UGx1U7YS7m9JtywpnGAhXcIon4Sr1lXCN/CpcxxU+hBvUv4SbGONXuIVrZakM4WEwQWCcQWOKDeMCMRwskjIG1qE59GYSzExPN3oRO5s4GyjvV2KXAx5oOeeAKe09t2a+Sif+YMuB1JhuHgVLtimNLiJ0KBtfLJzV3ahzsP2e7ba02L9rgTXH7FENbNT8Pdsz0khsDK+QkjXyMrekElOPaGus8btnKdbzXgiJTrzL9IjHmjR1OvduaeLA4ufyjBx9tLmSPfeoHD5jWQh5v91OxCCKXYY/k9hxGQAAAHjaY2BigAAuMMnIgA5YwKJMjExciUVF+eW6KfnleQAZ0wQyAAAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAMAAQAEAAAAAgAAAAB42mNgYGBkAIKrS9Q5QPTNPer/YTQAQ+0HIAAA) format('woff');
+		font-weight: normal;
+		font-style: normal;
+	}
+
+	.tui-collapse-icon {
+		font-family: "tuiCollapse" !important;
+		font-style: normal;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+	.tui-icon-arrow:before {
+		content: "\e600";
+	}
+
+	.tui-icon-arrow {
+		font-size: 32rpx;
+		transform: rotate(0);
+		transform-origin: center center;
+		transition: all 0.3s;
+		position: absolute;
+		top: 50%;
+		margin-top: -8px;
+		right: 30rpx;
+	}
+
+	.tui-arrow-padding {
+		padding-right: 62rpx;
+		box-sizing: border-box;
+	}
+
+	.tui-icon-active {
+		transform: rotate(180deg);
+		transform-origin: center center;
+	}
+
+	.tui-header {
+		position: relative;
+		z-index: 2;
+	}
+   .tui-collapse-body_box{
+	   transition: all 0.25s;
+	   overflow: hidden;
+   }
+	.tui-collapse-body {
+		transition: all 0.25s;
+		overflow: hidden;
+		position: relative;
+		z-index: 1;
+	}
+
+	.tui-collapse-transform {
+		opacity: 0;
+		visibility: hidden;
+		-webkit-transform: translateY(-40%);
+		transform: translateY(-40%);
+	}
+
+	.tui-collapse-body_show {
+		opacity: 1;
+		visibility: visible;
+		-webkit-transform: translateY(0);
+		transform: translateY(0);
+	}
+
+	.tui-opacity {
+		opacity: 0.6;
+	}
+</style>
diff --git a/components/thorui/tui-countdown-verify/tui-countdown-verify.vue b/components/thorui/tui-countdown-verify/tui-countdown-verify.vue
new file mode 100644
index 0000000..695e99c
--- /dev/null
+++ b/components/thorui/tui-countdown-verify/tui-countdown-verify.vue
@@ -0,0 +1,226 @@
+<template>
+	<view
+		class="tui-countdown__verify"
+		:class="{ 'tui-verify__opacity': status > 1 && isOpacity }"
+		:style="{ width: width, height: height, padding: padding, margin: margin, borderRadius: radius, fontSize: size + 'rpx', color: color, background: background }"
+		:hover-class="hover && status == 1 ? 'tui-verify__opacity' : ''"
+		:hover-stay-time="150"
+		@tap.stop="sendCode"
+	>
+		{{ showText }}
+		<view class="tui-verify__line" :style="{ borderWidth: borderWidth, borderColor: borderColor, borderRadius: radius }"></view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiCountdownVerify',
+	props: {
+		//发送前显示文本
+		text: {
+			type: String,
+			default: '发送验证码'
+		},
+		//发送中显示文本
+		sendText: {
+			type: String,
+			default: '请稍候...'
+		},
+		//发送后显示文本(前面会自动加上seconds)
+		countdownText: {
+			type: String,
+			default: 's后获取'
+		},
+		//倒计时秒数
+		seconds: {
+			type: Number,
+			default: 60
+		},
+		//宽度
+		width: {
+			type: String,
+			default: '182rpx'
+		},
+		//高度
+		height: {
+			type: String,
+			default: '56rpx'
+		},
+		padding: {
+			type: String,
+			default: '0'
+		},
+		margin: {
+			type: String,
+			default: '0'
+		},
+		//圆角
+		radius: {
+			type: String,
+			default: '6rpx'
+		},
+		//字体大小 rpx
+		size: {
+			type: Number,
+			default: 24
+		},
+		//字体颜色
+		color: {
+			type: String,
+			default: '#5677fc'
+		},
+		//背景色
+		background: {
+			type: String,
+			default: 'transparent'
+		},
+		//边框宽度
+		borderWidth: {
+			type: String,
+			default: '1px'
+		},
+		//边框颜色
+		borderColor: {
+			type: String,
+			default: '#5677fc'
+		},
+		//倒计时的时候是否改变opacity值
+		isOpacity: {
+			type: Boolean,
+			default: true
+		},
+		//是否需要点击效果
+		hover: {
+			type: Boolean,
+			default: true
+		},
+		//短信发送成功（改变数值且数值大于0表示发送成功，多次发送数值递增即可）
+		successVal: {
+			type: Number,
+			default: 0
+		},
+		//重置组件状态（改变数值且数值大于0，多次重置数值递增即可）
+		resetVal: {
+			type: Number,
+			default: 0
+		},
+		//是否默认为倒计时状态
+		start:{
+			type:Boolean,
+			default:false
+		},
+		//自定义参数
+		params: {
+			type: [Number, String],
+			default: 0
+		}
+	},
+	data() {
+		return {
+			showText: '',
+			//1-发送前，2-发送中 3-发送成功，倒计时
+			status: 1,
+			countdownTimer: null
+		};
+	},
+	created() {
+		if(this.start){
+			this.doLoop();
+		}else{
+			this.showText = this.text;
+			this.clearTimer();
+		}
+	},
+	beforeDestroy() {
+		this.clearTimer();
+	},
+	watch: {
+		successVal(val) {
+			if (val && val > 0) {
+				this.doLoop();
+			}
+		},
+		resetVal(val) {
+			if (val && val > 0) {
+				this.reset();
+			}
+		}
+	},
+	methods: {
+		sendCode() {
+			if (this.status > 1) return;
+			this.clearTimer();
+			this.status = 2;
+			this.showText = this.sendText;
+			this.$emit('send', {
+				params: this.params
+			});
+		},
+		doLoop: function() {
+			this.clearTimer();
+			this.status = 3;
+			let seconds = this.seconds || 60;
+			this.showText = seconds + this.countdownText;
+			this.countdownTimer = setInterval(() => {
+				if (seconds > 1) {
+					--seconds;
+					this.showText = seconds + this.countdownText;
+					//倒计时
+					this.$emit('countdown', {
+						seconds: seconds,
+						params: this.params
+					});
+				} else {
+					this.reset();
+					//倒计时结束
+					this.$emit('end', {
+						params: this.params
+					});
+				}
+			}, 1000);
+		},
+		//验证码发送成功
+		success() {
+			this.doLoop();
+		},
+		//重置发送组件
+		reset() {
+			this.clearTimer();
+			this.showText = this.text;
+			this.status = 1;
+		},
+		clearTimer() {
+			clearInterval(this.countdownTimer);
+			this.countdownTimer = null;
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-countdown__verify {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	white-space: nowrap;
+	box-sizing: border-box;
+}
+
+.tui-verify__opacity {
+	opacity: 0.5;
+}
+
+.tui-verify__line {
+	position: absolute;
+	width: 200%;
+	height: 200%;
+	transform-origin: 0 0;
+	transform: scale(0.5, 0.5) translateZ(0);
+	box-sizing: border-box;
+	border-style: solid;
+	left: 0;
+	top: 0;
+	pointer-events: none;
+}
+</style>
diff --git a/components/thorui/tui-countdown/tui-countdown.vue b/components/thorui/tui-countdown/tui-countdown.vue
new file mode 100644
index 0000000..acdd0ba
--- /dev/null
+++ b/components/thorui/tui-countdown/tui-countdown.vue
@@ -0,0 +1,335 @@
+<template>
+	<view class="tui-countdown-box">
+		<view class="tui-countdown-item" :style="{ background: backgroundColor, borderColor: borderColor, width: getWidth(d, width) + 'rpx', height: height + 'rpx' }" v-if="days">
+			<view class="tui-countdown-time" :class="[scale ? 'tui-countdown-scale' : '']" :style="{ fontSize: size + 'rpx', color: color, lineHeight: size + 'rpx' }">
+				{{ d }}
+			</view>
+		</view>
+		<view
+			class="tui-countdown-colon"
+			:class="{ 'tui-colon-pad': borderColor == 'transparent' }"
+			:style="{ lineHeight: colonSize + 'rpx', fontSize: colonSize + 'rpx', color: colonColor }"
+			v-if="days"
+		>
+			{{ isColon ? ':' : '天' }}
+		</view>
+		<view class="tui-countdown-item" :style="{ background: backgroundColor, borderColor: borderColor, width: getWidth(h, width) + 'rpx', height: height + 'rpx' }" v-if="hours">
+			<view class="tui-countdown-time" :class="[scale ? 'tui-countdown-scale' : '']" :style="{ fontSize: size + 'rpx', color: color, lineHeight: size + 'rpx' }">
+				{{ h }}
+			</view>
+		</view>
+		<view
+			class="tui-countdown-colon"
+			:class="{ 'tui-colon-pad': borderColor == 'transparent' }"
+			:style="{ lineHeight: colonSize + 'rpx', fontSize: colonSize + 'rpx', color: colonColor }"
+			v-if="hours"
+		>
+			{{ isColon ? ':' : '时' }}
+		</view>
+		<view
+			class="tui-countdown-item"
+			:style="{ background: backgroundColor, borderColor: borderColor, width: getWidth(i, width) + 'rpx', height: height + 'rpx' }"
+			v-if="minutes"
+		>
+			<view class="tui-countdown-time" :class="[scale ? 'tui-countdown-scale' : '']" :style="{ fontSize: size + 'rpx', color: color, lineHeight: size + 'rpx' }">
+				{{ i }}
+			</view>
+		</view>
+		<view
+			class="tui-countdown-colon"
+			:class="{ 'tui-colon-pad': borderColor == 'transparent' }"
+			:style="{ lineHeight: colonSize + 'rpx', fontSize: colonSize + 'rpx', color: colonColor }"
+			v-if="minutes"
+		>
+			{{ isColon ? ':' : '分' }}
+		</view>
+		<view
+			class="tui-countdown-item"
+			:style="{ background: backgroundColor, borderColor: borderColor, width: getWidth(s, width) + 'rpx', height: height + 'rpx' }"
+			v-if="seconds"
+		>
+			<view class="tui-countdown-time" :class="[scale ? 'tui-countdown-scale' : '']" :style="{ fontSize: size + 'rpx', color: color, lineHeight: size + 'rpx' }">
+				{{ s }}
+			</view>
+		</view>
+		<view
+			class="tui-countdown-colon"
+			:class="{ 'tui-colon-pad': borderColor == 'transparent' }"
+			:style="{ lineHeight: colonSize + 'rpx', fontSize: colonSize + 'rpx', color: colonColor }"
+			v-if="seconds && !isColon"
+		>
+			{{ unitEn ? 's' : '秒' }}
+		</view>
+
+		<view class="tui-countdown-colon" :style="{ lineHeight: colonSize + 'rpx', fontSize: colonSize + 'rpx', color: colonColor }" v-if="seconds && isMs && isColon">.</view>
+		<view
+			class="tui-countdown__ms"
+			:style="{
+				background: backgroundColor,
+				borderColor: borderColor,
+				fontSize: msSize + 'rpx',
+				color: msColor,
+				height: height + 'rpx',
+				width: msWidth > 0 ? msWidth + 'rpx' : 'auto'
+			}"
+			v-if="seconds && isMs"
+		>
+			<view :class="{ 'tui-ms__list': ani }">
+				<view class="tui-ms__item" :style="{ height: height + 'rpx' }" v-for="(item, index) in ms" :key="index">
+					<view :class="[scale ? 'tui-countdown-scale' : '']">{{item}}</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiCountdown',
+	props: {
+		//数字框宽度
+		width: {
+			type: Number,
+			default: 32
+		},
+		//数字框高度
+		height: {
+			type: Number,
+			default: 32
+		},
+		//数字框border颜色
+		borderColor: {
+			type: String,
+			default: '#333'
+		},
+		//数字框背景颜色
+		backgroundColor: {
+			type: String,
+			default: '#fff'
+		},
+		//数字框字体大小
+		size: {
+			type: Number,
+			default: 24
+		},
+		//数字框字体颜色
+		color: {
+			type: String,
+			default: '#333'
+		},
+		//是否缩放 0.9
+		scale: {
+			type: Boolean,
+			default: false
+		},
+		//冒号大小
+		colonSize: {
+			type: Number,
+			default: 28
+		},
+		//冒号颜色
+		colonColor: {
+			type: String,
+			default: '#333'
+		},
+		//剩余时间 (单位：秒)
+		time: {
+			type: Number,
+			default: 0
+		},
+		//是否包含天
+		days: {
+			type: Boolean,
+			default: false
+		},
+		//是否包含小时
+		hours: {
+			type: Boolean,
+			default: true
+		},
+		//是否包含分钟
+		minutes: {
+			type: Boolean,
+			default: true
+		},
+		//是否包含秒
+		seconds: {
+			type: Boolean,
+			default: true
+		},
+		//单位用英文缩写表示 仅seconds秒数有效
+		unitEn: {
+			type: Boolean,
+			default: false
+		},
+		//是否展示为冒号,false为文字
+		isColon: {
+			type: Boolean,
+			default: true
+		},
+		//是否返回剩余时间
+		returnTime: {
+			type: Boolean,
+			default: false
+		},
+		//是否显示毫秒
+		isMs: {
+			type: Boolean,
+			default: false
+		},
+		msWidth: {
+			type: Number,
+			default: 32
+		},
+		msSize: {
+			type: Number,
+			default: 24
+		},
+		msColor: {
+			type: String,
+			default: '#333'
+		}
+	},
+	watch: {
+		time(val) {
+			this.clearTimer();
+			this.doLoop();
+		}
+	},
+	data() {
+		return {
+			countdown: null,
+			d: '0',
+			h: '00',
+			i: '00',
+			s: '00',
+			//此处若从9到1，结束需要特殊处理
+			ms: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+			ani: false
+		};
+	},
+	created() {
+		this.clearTimer();
+		this.doLoop();
+	},
+	beforeDestroy() {
+		this.clearTimer();
+	},
+	methods: {
+		getWidth: function(num, width) {
+			return num > 99 ? (width / 2) * num.toString().length : width;
+		},
+		clearTimer() {
+			clearInterval(this.countdown);
+			this.countdown = null;
+		},
+		endOfTime() {
+			this.ani = false;
+			this.clearTimer();
+			this.$emit('end', {});
+		},
+		doLoop: function() {
+			let seconds = this.time || 0;
+			this.ani = true;
+			this.countDown(seconds);
+			this.countdown = setInterval(() => {
+				seconds--;
+				if (seconds < 0) {
+					this.endOfTime();
+					return;
+				}
+				this.countDown(seconds);
+				if (this.returnTime) {
+					this.$emit('time', { seconds: seconds });
+				}
+			}, 1000);
+		},
+		countDown(seconds) {
+			let [day, hour, minute, second] = [0, 0, 0, 0];
+			if (seconds > 0) {
+				day = this.days ? Math.floor(seconds / (60 * 60 * 24)) : 0;
+				hour = this.hours ? Math.floor(seconds / (60 * 60)) - day * 24 : 0;
+				minute = this.minutes ? Math.floor(seconds / 60) - hour * 60 - day * 24 * 60 : 0;
+				second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
+			} else {
+				this.endOfTime();
+			}
+			hour = hour < 10 ? '0' + hour : hour;
+			minute = minute < 10 ? '0' + minute : minute;
+			second = second < 10 ? '0' + second : second;
+			this.d = day;
+			this.h = hour;
+			this.i = minute;
+			this.s = second;
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-countdown-box {
+	display: flex;
+	align-items: center;
+}
+
+.tui-countdown-box {
+	display: flex;
+	align-items: center;
+}
+
+.tui-countdown-item {
+	border: 1rpx solid;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 6rpx;
+	white-space: nowrap;
+	transform: translateZ(0);
+}
+
+.tui-countdown-time {
+	margin: 0;
+	padding: 0;
+}
+
+.tui-countdown-colon {
+	display: flex;
+	justify-content: center;
+	padding: 0 5rpx;
+}
+
+.tui-colon-pad {
+	padding: 0 !important;
+}
+
+.tui-countdown-scale {
+	transform: scale(0.9);
+	transform-origin: center center;
+}
+.tui-countdown__ms {
+	border: 1rpx solid;
+	overflow: hidden;
+	border-radius: 6rpx;
+}
+
+/*ms使用css3代替js频繁更新操作，性能优化*/
+.tui-ms__list {
+	animation: loop 1s steps(10) infinite;
+}
+
+@keyframes loop {
+	from {
+		transform: translateY(0);
+	}
+
+	to {
+		transform: translateY(-100%);
+	}
+}
+
+.tui-ms__item {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+</style>
diff --git a/components/thorui/tui-cropper-app/tui-cropper-app.vue b/components/thorui/tui-cropper-app/tui-cropper-app.vue
new file mode 100644
index 0000000..e5fcd4c
--- /dev/null
+++ b/components/thorui/tui-cropper-app/tui-cropper-app.vue
@@ -0,0 +1,780 @@
+<template>
+	<view class="tui-container" @touchmove.stop.prevent="stop">
+		<view
+			class="tui-image-cropper"
+			:change:prop="parse.propsChange"
+			:prop="props"
+			:data-lockRatio="lockRatio"
+			:data-lockWidth="lockWidth"
+			:data-lockHeight="lockHeight"
+			:data-maxWidth="maxWidth"
+			:data-minWidth="minWidth"
+			:data-maxHeight="maxHeight"
+			:data-minHeight="minHeight"
+			:data-width="width"
+			:data-height="height"
+			:data-limitMove="limitMove"
+			:data-windowHeight="sysInfo.windowHeight || 600"
+			:data-windowWidth="sysInfo.windowWidth || 400"
+			:data-imgTop="imgTop"
+			:data-imgLeft="imgLeft"
+			:data-imgWidth="imgWidth"
+			:data-imgHeight="imgHeight"
+			:data-angle="angle"
+			@touchend="parse.cutTouchEnd"
+			@touchstart="parse.cutTouchStart"
+			@touchmove="parse.cutTouchMove"
+		>
+			<view class="tui-content">
+				<view class="tui-content-top tui-bg-transparent" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
+				<view class="tui-content-middle">
+					<view class="tui-bg-transparent tui-wxs-bg" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
+					<view class="tui-cropper-box" :style="{ borderColor: borderColor, transitionProperty: cutAnimation ? '' : 'background' }">
+						<view
+							v-for="(item, index) in 4"
+							:key="index"
+							class="tui-edge"
+							:class="[`tui-${index < 2 ? 'top' : 'bottom'}-${index === 0 || index === 2 ? 'left' : 'right'}`]"
+							:style="{
+								width: edgeWidth,
+								height: edgeWidth,
+								borderColor: edgeColor,
+								borderWidth: edgeBorderWidth,
+								left: index === 0 || index === 2 ? `-${edgeOffsets}` : 'auto',
+								right: index === 1 || index === 3 ? `-${edgeOffsets}` : 'auto',
+								top: index < 2 ? `-${edgeOffsets}` : 'auto',
+								bottom: index > 1 ? `-${edgeOffsets}` : 'auto'
+							}"
+						></view>
+					</view>
+					<view class="tui-flex-auto tui-bg-transparent" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
+				</view>
+				<view class="tui-flex-auto tui-bg-transparent" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
+			</view>
+			<image
+				@load="imageLoad"
+				@error="imageLoad"
+				@touchstart="parse.touchstart"
+				@touchmove="parse.touchmove"
+				@touchend="parse.touchend"
+				:data-minScale="minScale"
+				:data-maxScale="maxScale"
+				:data-disableRotate="disableRotate"
+				:style="{
+					width: imgWidth ? imgWidth + 'px' : 'auto',
+					height: imgHeight ? imgHeight + 'px' : 'auto',
+					transitionDuration: (cutAnimation ? 0.3 : 0) + 's'
+				}"
+				class="tui-cropper-image"
+				:src="picturePath"
+				v-if="picturePath"
+				mode="widthFix"
+			></image>
+		</view>
+		<view class="tui-cropper-tabbar" v-if="!custom">
+			<view class="tui-op-btn" @tap.stop="back">取消</view>
+			<image :src="rotateImg" class="tui-rotate-img" @tap="setAngle"></image>
+			<view class="tui-op-btn" @tap.stop="getImage">完成</view>
+		</view>
+	</view>
+</template>
+<script src="./tui-cropper-app.wxs" module="parse" lang="wxs"></script>
+<script>
+/**
+ * 注意：组件中使用的图片地址，将文件复制到自己项目中
+ * 如果图片位置与组件同级，编译成小程序时图片会丢失
+ * 拷贝static下整个components文件夹
+ *也可直接转成base64（不建议）
+ *
+ * */
+export default {
+	name: 'tuiCropperApp',
+	props: {
+		//图片路径
+		imageUrl: {
+			type: String,
+			default: ''
+		},
+		/*
+			 默认正方形，可修改大小控制比例
+			 裁剪框高度 px
+			*/
+		height: {
+			type: Number,
+			default: 280
+		},
+		//裁剪框宽度 px
+		width: {
+			type: Number,
+			default: 280
+		},
+		//裁剪框最小宽度 px
+		minWidth: {
+			type: Number,
+			default: 100
+		},
+		//裁剪框最小高度 px
+		minHeight: {
+			type: Number,
+			default: 100
+		},
+		//裁剪框最大宽度 px
+		maxWidth: {
+			type: Number,
+			default: 360
+		},
+		//裁剪框最大高度 px
+		maxHeight: {
+			type: Number,
+			default: 360
+		},
+		//裁剪框border颜色
+		borderColor: {
+			type: String,
+			default: 'rgba(255,255,255,0.1)'
+		},
+		//裁剪框边缘线颜色
+		edgeColor: {
+			type: String,
+			default: '#FFFFFF'
+		},
+		//裁剪框边缘线宽度 w=h
+		edgeWidth: {
+			type: String,
+			default: '34rpx'
+		},
+		//裁剪框边缘线border宽度
+		edgeBorderWidth: {
+			type: String,
+			default: '6rpx'
+		},
+		//偏移距离，根据edgeBorderWidth进行调整
+		edgeOffsets: {
+			type: String,
+			default: '6rpx'
+		},
+		/**
+		 * 如果宽度和高度都为true则裁剪框禁止拖动
+		 * 裁剪框宽度锁定
+		 */
+		lockWidth: {
+			type: Boolean,
+			default: false
+		},
+		//裁剪框高度锁定
+		lockHeight: {
+			type: Boolean,
+			default: false
+		},
+		//锁定裁剪框比例（放大或缩小）
+		lockRatio: {
+			type: Boolean,
+			default: false
+		},
+		//生成的图片尺寸相对剪裁框的比例
+		scaleRatio: {
+			type: Number,
+			default: 2
+		},
+		//图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理
+		quality: {
+			type: Number,
+			default: 0.8
+		},
+		//图片旋转角度[当前版本只能传90的倍数，否则可能导致裁剪失败或不正确]
+		rotateAngle: {
+			type: Number,
+			default: 0
+		},
+		//图片最小缩放比
+		minScale: {
+			type: Number,
+			default: 0.5
+		},
+		//图片最大缩放比
+		maxScale: {
+			type: Number,
+			default: 2
+		},
+		//是否禁用触摸旋转（为false则可以触摸转动图片，limitMove为false生效）
+		//此属性App端当前版本不可用，否则可能导致裁剪失败或不正确
+		disableRotate: {
+			type: Boolean,
+			default: true
+		},
+		//是否限制移动范围(剪裁框只能在图片内,为true不可触摸转动图片)
+		//注意:此属性当前版本不可传false，由于api不支持超出裁剪区域裁剪，所以只能限制在裁剪框内
+		limitMove: {
+			type: Boolean,
+			default: true
+		},
+		//自定义操作栏（为true时隐藏底部操作栏）
+		custom: {
+			type: Boolean,
+			default: false
+		},
+		//值发生改变开始裁剪（custom为true时生效）
+		startCutting: {
+			type: [Number, Boolean],
+			default: 0
+		},
+		/**
+		 * 是否返回base64(H5端默认base64)
+		 * 支持平台：App，微信小程序，支付宝小程序,H5(默认url就是base64)
+		 **/
+		isBase64: {
+			type: Boolean,
+			default: false
+		},
+		//裁剪时是否显示loadding
+		loadding: {
+			type: Boolean,
+			default: true
+		},
+		//旋转icon
+		rotateImg: {
+			type: String,
+			default: '/static/components/cropper/img_rotate.png'
+		}
+	},
+	data() {
+		return {
+			TIME_CUT_CENTER: null,
+			cutX: 0, //画布x轴起点
+			cutY: 0, //画布y轴起点0
+			canvasWidth: 0,
+			canvasHeight: 0,
+			naturalWidth: 0,
+			naturalHeight: 0,
+			imgWidth: 0, //图片宽度
+			imgHeight: 0, //图片高度
+			scale: 1, //图片缩放比
+			angle: 0, //图片旋转角度
+			cutAnimation: false, //是否开启图片和裁剪框过渡
+			cutAnimationTime: null,
+			imgTop: 0, //图片上边距
+			imgLeft: 0, //图片左边距
+			sysInfo: {},
+			props: '',
+			sizeChange: 0, //2
+			angleChange: 0, //3
+			resetChange: 0, //4
+			centerChange: 0, //5
+			orientation: '',
+			picturePath: ''
+		};
+	},
+	watch: {
+		//定义变量然后利用change触发
+		imageUrl(val, oldVal) {
+			this.imageReset();
+			this.showLoading();
+			uni.getImageInfo({
+				src: val,
+				success: res => {
+					//计算图片尺寸
+					this.naturalWidth = res.width;
+					this.naturalHeight = res.height;
+					this.orientation = res.orientation;
+					if (this.orientation != 'up') {
+						//宽高传值颠倒
+						let width = this.orientation == 'down' ? res.width : res.height;
+						let height = this.orientation == 'down' ? res.height : res.width;
+						this.compressImage(val, width, height);
+					} else {
+						this.picturePath = val;
+						this.imgComputeSize(res.width, res.height);
+						if (this.limitMove) {
+							this.angleChange++;
+							this.props = `3,${this.angleChange}`;
+						}
+					}
+				},
+				fail: err => {
+					this.imgComputeSize();
+					if (this.limitMove) {
+						this.angleChange++;
+						this.props = `3,${this.angleChange}`;
+					}
+				}
+			});
+		},
+		rotateAngle(val) {
+			this.cutAnimation = true;
+			this.angle = val;
+			this.angleChanged(val);
+		},
+		cutAnimation(val) {
+			//开启过渡260毫秒之后自动关闭
+			clearTimeout(this.cutAnimationTime);
+			if (val) {
+				this.cutAnimationTime = setTimeout(() => {
+					this.cutAnimation = false;
+				}, 260);
+			}
+		},
+		limitMove(val) {
+			if (val) {
+				this.angleChanged(this.angle);
+			}
+		},
+		startCutting(val) {
+			if (this.custom && val) {
+				this.getImage();
+			}
+		}
+	},
+	created() {
+		this.picturePath = this.imageUrl;
+	},
+	mounted() {
+		this.sysInfo = uni.getSystemInfoSync();
+		this.imgTop = this.sysInfo.windowHeight / 2;
+		this.imgLeft = this.sysInfo.windowWidth / 2;
+		this.canvasHeight = this.height;
+		this.canvasWidth = this.width;
+		//初始化
+		setTimeout(() => {
+			this.props = '1,1';
+		}, 0);
+		setTimeout(() => {
+			this.$emit('ready', {});
+		}, 200);
+	},
+	methods: {
+		toast(title) {
+			uni.showToast({
+				title: title || '出错啦~',
+				icon: 'none'
+			});
+		},
+		async compressImage(url, width, height) {
+			let imgUrl = url;
+			if (~imgUrl.indexOf('https:')) {
+				imgUrl = await this.getLocalImage(url);
+				if (!imgUrl) {
+					this.toast('网络图片处理失败~');
+					return;
+				}
+			}
+			let defaultAngle =
+				{
+					up: 0,
+					down: 180,
+					left: 270,
+					right: 90
+				}[this.orientation] || 0;
+			let f_dst = `_documents/${this.unique()}.jpg`;
+			plus.zip.compressImage(
+				{
+					src: imgUrl,
+					dst: f_dst,
+					overwrite: true,
+					rotate: defaultAngle,
+					format: 'jpg'
+				},
+				i => {
+					this.picturePath = i.target;
+					this.imgComputeSize(width, height);
+					if (this.limitMove) {
+						this.angleChange++;
+						this.props = `3,${this.angleChange}`;
+					}
+				},
+				e => {
+					this.picturePath = imgUrl;
+					this.imgComputeSize(width, height);
+					if (this.limitMove) {
+						this.angleChange++;
+						this.props = `3,${this.angleChange}`;
+					}
+				}
+			);
+		},
+		//网络图片转成本地文件[同步执行]
+		async getLocalImage(url) {
+			return await new Promise((resolve, reject) => {
+				uni.downloadFile({
+					url: url,
+					success: res => {
+						resolve(res.tempFilePath);
+					},
+					fail: res => {
+						reject(false);
+					}
+				});
+			});
+		},
+		//返回裁剪后图片信息
+		getImage() {
+			if (!this.picturePath) {
+				this.toast('请选择图片');
+				return;
+			}
+			this.loadding && this.showLoading();
+			let cutting = async () => {
+				//图片实际大小
+				let imgUrl = this.picturePath;
+				if (~this.picturePath.indexOf('https:')) {
+					imgUrl = await this.getLocalImage(this.picturePath);
+					if (!imgUrl) {
+						this.toast('网络图片处理失败~');
+						return;
+					}
+				}
+				let data = {
+					url: '',
+					base64: ''
+				};
+				let f_dst = `_documents/${this.unique()}.jpg`;
+				let multiple = Math.round(this.angle / 90);
+				let angle = 0,
+					x = 0,
+					y = 0,
+					left = 0,
+					top = 0,
+					clipHeight = 0,
+					clipWidth = 0;
+
+				let isAndroid = this.sysInfo.platform.toLocaleLowerCase() == 'android';
+
+				if (multiple % 2 == 0) {
+					angle = this.angle % 360 == 0 || this.angle == 0 ? 0 : 180;
+					if (!isAndroid || (isAndroid && angle == 0)) {
+						x = this.imgLeft - (this.imgWidth * this.scale) / 2;
+						y = this.imgTop - (this.imgHeight * this.scale) / 2;
+						left = (((this.cutX - x) / this.imgWidth / this.scale) * 100).toFixed(2);
+						top = (((this.cutY - y) / this.imgHeight / this.scale) * 100).toFixed(2);
+						clipWidth = ((this.canvasWidth / this.imgWidth / this.scale) * 100).toFixed(2);
+						clipHeight = ((this.canvasHeight / this.imgHeight / this.scale) * 100).toFixed(2);
+					} else {
+						x = this.imgLeft - (this.imgWidth * this.scale) / 2;
+						y = this.imgTop - (this.imgHeight * this.scale) / 2;
+						left = (((this.imgWidth * this.scale - (this.cutX - x) - this.canvasWidth) / this.imgWidth / this.scale) * 100).toFixed(2);
+						top = (((this.imgHeight * this.scale - (this.cutY - y) - this.canvasHeight) / this.imgHeight / this.scale) * 100).toFixed(2);
+						clipWidth = ((this.canvasWidth / this.imgWidth / this.scale) * 100).toFixed(2);
+						clipHeight = ((this.canvasHeight / this.imgHeight / this.scale) * 100).toFixed(2);
+					}
+				} else {
+					angle = this.angle % 270 == 0 ? 270 : 90;
+					if (isAndroid) {
+						if (angle == 90) {
+							x = this.imgLeft - (this.imgHeight * this.scale) / 2;
+							y = this.imgTop - (this.imgWidth * this.scale) / 2;
+							top = (((this.imgHeight * this.scale - (this.cutX - x) - this.canvasHeight) / this.imgHeight / this.scale) * 100).toFixed(2);
+							left = (((this.imgWidth * this.scale - (this.cutY - y) - this.canvasWidth) / this.imgWidth / this.scale) * 100).toFixed(2);
+							clipHeight = ((this.canvasWidth / this.imgHeight / this.scale) * 100).toFixed(2);
+							clipWidth = ((this.canvasHeight / this.imgWidth / this.scale) * 100).toFixed(2);
+						} else {
+							x = this.imgLeft - (this.imgHeight * this.scale) / 2;
+							y = this.imgTop - (this.imgWidth * this.scale) / 2;
+							top = (((this.cutX - x) / this.imgHeight / this.scale) * 100).toFixed(2);
+							left = (((this.cutY - y) / this.imgWidth / this.scale) * 100).toFixed(2);
+							clipHeight = ((this.canvasWidth / this.imgHeight / this.scale) * 100).toFixed(2);
+							clipWidth = ((this.canvasHeight / this.imgWidth / this.scale) * 100).toFixed(2);
+						}
+					} else {
+						x = this.imgLeft - (this.imgHeight * this.scale) / 2;
+						y = this.imgTop - (this.imgWidth * this.scale) / 2;
+						left = (((this.cutX - x) / this.imgHeight / this.scale) * 100).toFixed(2);
+						top = (((this.cutY - y) / this.imgWidth / this.scale) * 100).toFixed(2);
+						clipWidth = ((this.canvasWidth / this.imgHeight / this.scale) * 100).toFixed(2);
+						clipHeight = ((this.canvasHeight / this.imgWidth / this.scale) * 100).toFixed(2);
+					}
+				}
+				let width = (this.imgWidth < this.naturalWidth ? this.naturalWidth : this.imgWidth) * this.scale;
+				let height = (this.imgHeight < this.naturalHeight ? this.naturalHeight : this.imgHeight) * this.scale;
+				// if (isAndroid && width > 800) {
+				// 	width = '800px';
+				// 	height = 'auto'
+				// } else {
+				// 	width = `${width}px`;
+				// 	height = `${height}px`
+				// }
+				width = `${width}px`;
+				height = `${height}px`;
+				left = Number(left) <= 0 ? 0 : left;
+				top = Number(top) <= 0 ? 0 : top;
+				plus.zip.compressImage(
+					{
+						src: imgUrl,
+						dst: f_dst,
+						quality: this.quality * 100,
+						overwrite: true,
+						format: 'jpg',
+						width: width,
+						height: height,
+						rotate: angle,
+						clip: {
+							top: `${top}%`,
+							left: `${left}%`,
+							width: `${clipWidth}%`,
+							height: `${clipHeight}%`
+						}
+					},
+					i => {
+						this.loadding && uni.hideLoading();
+						data.url = i.target;
+						if (this.isBase64) {
+							plus.io.resolveLocalFileSystemURL(f_dst, entry => {
+								entry.file(
+									file => {
+										let reader = new plus.io.FileReader();
+										reader.onloadend = e => {
+											data.base64 = e.target.result;
+											this.$emit('cropper', data);
+										};
+										reader.readAsDataURL(file);
+									},
+									e => {
+										//转换base64失败，传回图片url
+										this.$emit('cropper', data);
+									}
+								);
+							});
+						} else {
+							this.$emit('cropper', data);
+						}
+					},
+					e => {
+						console.log(e);
+						this.toast('图片裁剪失败,请稍候再试~');
+						//原图输出
+						// data.url = imgUrl;
+						// this.$emit('cropper', data);
+					}
+				);
+			};
+			setTimeout(() => {
+				cutting();
+			}, 20);
+		},
+		unique(n = 6) {
+			let rnd = '';
+			for (let i = 0; i < n; i++) rnd += Math.floor(Math.random() * 10);
+			return 'thorui_' + new Date().getTime() + rnd;
+		},
+		change(e) {
+			this.cutX = e.cutX || 0;
+			this.cutY = e.cutY || 0;
+			this.canvasWidth = e.canvasWidth || this.width;
+			this.canvasHeight = e.canvasHeight || this.height;
+			this.imgWidth = e.imgWidth || this.imgWidth;
+			this.imgHeight = e.imgHeight || this.imgHeight;
+			this.scale = e.scale || 1;
+			this.angle = e.angle || 0;
+			this.imgTop = e.imgTop || 0;
+			this.imgLeft = e.imgLeft || 0;
+		},
+		imageReset() {
+			this.scale = 1;
+			this.angle = 0;
+			let sys = this.sysInfo.windowHeight ? this.sysInfo : uni.getSystemInfoSync();
+			this.imgTop = sys.windowHeight / 2;
+			this.imgLeft = sys.windowWidth / 2;
+			this.resetChange++;
+			this.props = `4,${this.resetChange}`;
+			//初始化旋转角度 0deg
+			this.$emit('initAngle', {});
+		},
+		imageLoad(e) {
+			this.imageReset();
+			uni.hideLoading();
+			this.$emit('imageLoad', {});
+		},
+
+		imgComputeSize(width, height) {
+			//默认按图片最小边 = 对应裁剪框尺寸
+			let imgWidth = width,
+				imgHeight = height;
+			if (imgWidth && imgHeight) {
+				if (imgWidth / imgHeight > this.width / this.height) {
+					imgHeight = this.height;
+					imgWidth = (width / height) * imgHeight;
+				} else {
+					imgWidth = this.width;
+					imgHeight = (height / width) * imgWidth;
+				}
+			} else {
+				let sys = this.sysInfo || uni.getSystemInfoSync();
+				imgWidth = sys.windowWidth;
+				imgHeight = 0;
+			}
+			this.imgWidth = imgWidth;
+			this.imgHeight = imgHeight;
+			this.sizeChange++;
+			this.props = `2,${this.sizeChange}`;
+		},
+		moveStop() {
+			clearTimeout(this.TIME_CUT_CENTER);
+			this.TIME_CUT_CENTER = setTimeout(() => {
+				if (!this.cutAnimation) {
+					this.cutAnimation = true;
+				}
+				this.centerChange++;
+				this.props = `5,${this.centerChange}`;
+			}, 666);
+		},
+		moveDuring() {
+			clearTimeout(this.TIME_CUT_CENTER);
+		},
+		showLoading() {
+			uni.showLoading({
+				title: '请稍候...',
+				mask: true
+			});
+		},
+		stop() {},
+		back() {
+			uni.navigateBack();
+		},
+		angleChanged(val) {
+			this.moveStop();
+			if (this.limitMove && val % 90) {
+				this.angle = Math.round(val / 90) * 90;
+			}
+			this.angleChange++;
+			this.props = `3,${this.angleChange}`;
+		},
+		setAngle() {
+			this.cutAnimation = true;
+			this.angle = this.angle + 90;
+			this.angleChanged(this.angle);
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-container {
+	width: 100vw;
+	height: 100vh;
+	background-color: rgba(0, 0, 0, 0.6);
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 1;
+}
+
+.tui-image-cropper {
+	width: 100vw;
+	height: 100vh;
+	position: absolute;
+}
+
+.tui-content {
+	width: 100vw;
+	height: 100vh;
+	position: absolute;
+	z-index: 9;
+	display: flex;
+	flex-direction: column;
+	pointer-events: none;
+}
+
+.tui-bg-transparent {
+	background-color: rgba(0, 0, 0, 0.6);
+	transition-duration: 0.3s;
+}
+
+.tui-content-top {
+	pointer-events: none;
+}
+
+.tui-content-middle {
+	width: 100%;
+	height: 200px;
+	display: flex;
+	box-sizing: border-box;
+}
+
+.tui-cropper-box {
+	position: relative;
+	/* transition-duration: 0.2s; */
+	border-style: solid;
+	border-width: 1rpx;
+	box-sizing: border-box;
+}
+
+.tui-flex-auto {
+	flex: auto;
+}
+
+.tui-cropper-image {
+	width: 100%;
+	border-style: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 2;
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+	transform-origin: center;
+}
+
+.tui-edge {
+	border-style: solid;
+	pointer-events: auto;
+	position: absolute;
+	box-sizing: border-box;
+}
+
+.tui-top-left {
+	border-bottom-width: 0 !important;
+	border-right-width: 0 !important;
+}
+
+.tui-top-right {
+	border-bottom-width: 0 !important;
+	border-left-width: 0 !important;
+}
+
+.tui-bottom-left {
+	border-top-width: 0 !important;
+	border-right-width: 0 !important;
+}
+
+.tui-bottom-right {
+	border-top-width: 0 !important;
+	border-left-width: 0 !important;
+}
+
+.tui-cropper-tabbar {
+	width: 100%;
+	height: 120rpx;
+	padding: 0 40rpx;
+	box-sizing: border-box;
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	z-index: 99;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	color: #ffffff;
+	font-size: 32rpx;
+}
+
+.tui-cropper-tabbar::after {
+	content: ' ';
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+	-webkit-transform: scaleY(0.5) translateZ(0);
+	transform: scaleY(0.5) translateZ(0);
+	transform-origin: 0 100%;
+}
+
+.tui-op-btn {
+	height: 80rpx;
+	display: flex;
+	align-items: center;
+}
+
+.tui-rotate-img {
+	width: 44rpx;
+	height: 44rpx;
+}
+</style>
diff --git a/components/thorui/tui-cropper-app/tui-cropper-app.wxs b/components/thorui/tui-cropper-app/tui-cropper-app.wxs
new file mode 100644
index 0000000..7d7c119
--- /dev/null
+++ b/components/thorui/tui-cropper-app/tui-cropper-app.wxs
@@ -0,0 +1,560 @@
+var cropper = {
+	CUT_START: null,
+	cutX: 0, //画布x轴起点
+	cutY: 0, //画布y轴起点0
+	touchRelative: [{
+		x: 0,
+		y: 0
+	}], //手指或鼠标和图片中心的相对位置
+	flagCutTouch: false, //是否是拖动裁剪框
+	hypotenuseLength: 0, //双指触摸时斜边长度
+	flagEndTouch: false, //是否结束触摸
+	canvasWidth: 0,
+	canvasHeight: 0,
+	imgWidth: 0, //图片宽度
+	imgHeight: 0, //图片高度
+	scale: 1, //图片缩放比
+	angle: 0, //图片旋转角度
+	imgTop: 0, //图片上边距
+	imgLeft: 0, //图片左边距
+	//是否限制移动范围(剪裁框只能在图片内,为true不可触摸转动图片)
+	limitMove: true,
+	minHeight: 0,
+	maxHeight: 0,
+	minWidth: 0,
+	maxWidth: 0,
+	windowHeight: 0,
+	windowWidth: 0,
+	init: true
+}
+
+function bool(str) {
+	return str === 'true' || str == true ? true : false
+}
+
+function touchstart(e, ins) {
+	//var instance = e.instance;
+	// var state = instance.getState();
+	var touch = e.touches || e.changedTouches;
+	cropper.flagEndTouch = false;
+	if (touch.length == 1) {
+		cropper.touchRelative[0] = {
+			x: touch[0].pageX - cropper.imgLeft,
+			y: touch[0].pageY - cropper.imgTop
+		};
+	} else {
+		var width = Math.abs(touch[0].pageX - touch[1].pageX);
+		var height = Math.abs(touch[0].pageY - touch[1].pageY);
+		cropper.touchRelative = [{
+				x: touch[0].pageX - cropper.imgLeft,
+				y: touch[0].pageY - cropper.imgTop
+			},
+			{
+				x: touch[1].pageX - cropper.imgLeft,
+				y: touch[1].pageY - cropper.imgTop
+			}
+		];
+		cropper.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+	}
+
+}
+
+function moveDuring(ins) {
+	if (!ins) return;
+	ins.callMethod('moveDuring')
+}
+
+function moveStop(ins) {
+	if (!ins) return;
+	ins.callMethod('moveStop')
+};
+
+function setCutCenter(ins) {
+	var cutY = (cropper.windowHeight - cropper.canvasHeight) * 0.5;
+	var cutX = (cropper.windowWidth - cropper.canvasWidth) * 0.5;
+	//顺序不能变
+	cropper.imgTop = cropper.imgTop - cropper.cutY + cutY;
+	cropper.cutY = cutY; //截取的框上边距
+	cropper.imgLeft = cropper.imgLeft - cropper.cutX + cutX;
+	cropper.cutX = cutX; //截取的框左边距
+	styleUpdate(ins)
+	cutDetectionPosition(ins)
+	imgTransform(ins)
+	updateData(ins)
+}
+
+function touchmove(e, ins) {
+	var touch = e.touches || e.changedTouches;
+	if (cropper.flagEndTouch) return;
+	moveDuring(ins);
+	if (e.touches.length == 1) {
+		var left = touch[0].pageX - cropper.touchRelative[0].x,
+			top = touch[0].pageY - cropper.touchRelative[0].y;
+		cropper.imgLeft = left;
+		cropper.imgTop = top;
+		imgTransform(ins);
+		imgMarginDetectionPosition(ins);
+	} else {
+		var res = e.instance.getDataset();
+		var minScale = +res.minscale;
+		var maxScale = +res.maxscale;
+		var disableRotate = bool(res.disablerotate)
+		var width = Math.abs(touch[0].pageX - touch[1].pageX),
+			height = Math.abs(touch[0].pageY - touch[1].pageY),
+			hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)),
+			scale = cropper.scale * (hypotenuse / cropper.hypotenuseLength),
+			current_deg = 0;
+		scale = scale <= minScale ? minScale : scale;
+		scale = scale >= maxScale ? maxScale : scale;
+		cropper.scale = scale;
+		imgMarginDetectionScale(ins, true);
+		var touchRelative = [{
+				x: touch[0].pageX - cropper.imgLeft,
+				y: touch[0].pageY - cropper.imgTop
+			},
+			{
+				x: touch[1].pageX - cropper.imgLeft,
+				y: touch[1].pageY - cropper.imgTop
+			}
+		];
+		if (!disableRotate) {
+			var first_atan = (180 / Math.PI) * Math.atan2(touchRelative[0].y, touchRelative[0].x);
+			var first_atan_old = (180 / Math.PI) * Math.atan2(cropper.touchRelative[0].y, cropper.touchRelative[0].x);
+			var second_atan = (180 / Math.PI) * Math.atan2(touchRelative[1].y, touchRelative[1].x);
+			var second_atan_old = (180 / Math.PI) * Math.atan2(cropper.touchRelative[1].y, cropper.touchRelative[1].x);
+			var first_deg = first_atan - first_atan_old,
+				second_deg = second_atan - second_atan_old;
+			if (first_deg != 0) {
+				current_deg = first_deg;
+			} else if (second_deg != 0) {
+				current_deg = second_deg;
+			}
+		}
+		cropper.touchRelative = touchRelative;
+		cropper.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+		//更新视图
+		cropper.angle = cropper.angle + current_deg;
+		imgTransform(ins);
+	}
+}
+
+function touchend(e, ins) {
+	cropper.flagEndTouch = true;
+	moveStop(ins);
+	updateData(ins)
+}
+
+
+function cutTouchStart(e, ins) {
+	var touch = e.touches || e.changedTouches;
+	var currentX = touch[0].pageX;
+	var currentY = touch[0].pageY;
+
+	/*
+	 * (右下-1 右上-2 左上-3 左下-4)
+	 * left_x [3,4]
+	 * top_y [2,3]
+	 * right_x [1,2]
+	 * bottom_y [1,4]
+	 */
+	var left_x1 = cropper.cutX - 30;
+	var left_x2 = cropper.cutX + 30;
+
+	var top_y1 = cropper.cutY - 30;
+	var top_y2 = cropper.cutY + 30;
+
+	var right_x1 = cropper.cutX + cropper.canvasWidth - 30;
+	var right_x2 = cropper.cutX + cropper.canvasWidth + 30;
+
+	var bottom_y1 = cropper.cutY + cropper.canvasHeight - 30;
+	var bottom_y2 = cropper.cutY + cropper.canvasHeight + 30;
+
+	if (currentX > right_x1 && currentX < right_x2 && currentY > bottom_y1 && currentY < bottom_y2) {
+		moveDuring();
+		cropper.flagCutTouch = true;
+		cropper.flagEndTouch = true;
+		cropper.CUT_START = {
+			width: cropper.canvasWidth,
+			height: cropper.canvasHeight,
+			x: currentX,
+			y: currentY,
+			corner: 1
+		};
+	} else if (currentX > right_x1 && currentX < right_x2 && currentY > top_y1 && currentY < top_y2) {
+		moveDuring();
+		cropper.flagCutTouch = true;
+		cropper.flagEndTouch = true;
+		cropper.CUT_START = {
+			width: cropper.canvasWidth,
+			height: cropper.canvasHeight,
+			x: currentX,
+			y: currentY,
+			cutY: cropper.cutY,
+			cutX: cropper.cutX,
+			corner: 2
+		};
+	} else if (currentX > left_x1 && currentX < left_x2 && currentY > top_y1 && currentY < top_y2) {
+		moveDuring();
+		cropper.flagCutTouch = true;
+		cropper.flagEndTouch = true;
+		cropper.CUT_START = {
+			width: cropper.canvasWidth,
+			height: cropper.canvasHeight,
+			cutY: cropper.cutY,
+			cutX: cropper.cutX,
+			x: currentX,
+			y: currentY,
+			corner: 3
+		};
+	} else if (currentX > left_x1 && currentX < left_x2 && currentY > bottom_y1 && currentY < bottom_y2) {
+		moveDuring();
+		cropper.flagCutTouch = true;
+		cropper.flagEndTouch = true;
+		cropper.CUT_START = {
+			width: cropper.canvasWidth,
+			height: cropper.canvasHeight,
+			cutY: cropper.cutY,
+			cutX: cropper.cutX,
+			x: currentX,
+			y: currentY,
+			corner: 4
+		};
+	}
+}
+
+function cutTouchMove(e, ins) {
+	if (!cropper.CUT_START || cropper.CUT_START === 'null') return;
+	if (cropper.flagCutTouch) {
+		var touch = e.touches || e.changedTouches;
+		var res = e.instance.getDataset();
+		var lockRatio = bool(res.lockratio);
+		var lockWidth = bool(res.lockwidth);
+		var lockHeight = bool(res.lockheight);
+		if (lockRatio && (lockWidth || lockHeight)) return;
+		var width = cropper.canvasWidth,
+			height = cropper.canvasHeight,
+			cutY = cropper.cutY,
+			cutX = cropper.cutX;
+
+		var size_correct = function() {
+			width = width <= cropper.maxWidth ? (width >= cropper.minWidth ? width : cropper.minWidth) : cropper.maxWidth;
+			height = height <= cropper.maxHeight ? (height >= cropper.minHeight ? height : cropper.minHeight) : cropper.maxHeight;
+		}
+
+		var size_inspect = function() {
+			if ((width > cropper.maxWidth || width < cropper.minWidth || height > cropper.maxHeight || height < cropper.minHeight) &&
+				lockRatio) {
+				size_correct();
+				return false;
+			} else {
+				size_correct();
+				return true;
+			}
+		};
+		height = cropper.CUT_START.height + (cropper.CUT_START.corner > 1 && cropper.CUT_START.corner < 4 ? 1 : -1) * (
+			cropper.CUT_START.y - touch[0].pageY);
+		switch (cropper.CUT_START.corner) {
+			case 1:
+				width = cropper.CUT_START.width - cropper.CUT_START.x + touch[0].pageX;
+				if (lockRatio) {
+					height = width / (cropper.canvasWidth / cropper.canvasHeight);
+				}
+				if (!size_inspect()) return;
+				break;
+			case 2:
+				width = cropper.CUT_START.width - cropper.CUT_START.x + touch[0].pageX;
+				if (lockRatio) {
+					height = width / (cropper.canvasWidth / cropper.canvasHeight);
+				}
+				if (!size_inspect()) return;
+				cutY = cropper.CUT_START.cutY - (height - cropper.CUT_START.height);
+				break;
+			case 3:
+				width = cropper.CUT_START.width + cropper.CUT_START.x - touch[0].pageX;
+				if (lockRatio) {
+					height = width / (cropper.canvasWidth / cropper.canvasHeight);
+				}
+				if (!size_inspect()) return;
+				cutY = cropper.CUT_START.cutY - (height - cropper.CUT_START.height);
+				cutX = cropper.CUT_START.cutX - (width - cropper.CUT_START.width);
+				break;
+			case 4:
+				width = cropper.CUT_START.width + cropper.CUT_START.x - touch[0].pageX;
+				if (lockRatio) {
+					height = width / (cropper.canvasWidth / cropper.canvasHeight);
+				}
+				if (!size_inspect()) return;
+				cutX = cropper.CUT_START.cutX - (width - cropper.CUT_START.width);
+				break;
+			default:
+				break;
+		}
+		if (!lockWidth && !lockHeight) {
+			cropper.canvasWidth = width;
+			cropper.cutX = cutX;
+			cropper.canvasHeight = height;
+			cropper.cutY = cutY;
+			canvasHeight(ins);
+			canvasWidth(ins);
+		} else if (!lockWidth) {
+			cropper.canvasWidth = width;
+			cropper.cutX = cutX;
+			canvasWidth(ins);
+		} else if (!lockHeight) {
+			cropper.canvasHeight = height;
+			cropper.cutY = cutY;
+			canvasHeight(ins);
+		}
+		styleUpdate(ins)
+		imgMarginDetectionScale(ins);
+	}
+}
+
+//检测剪裁框位置是否在允许的范围内(屏幕内)
+function cutDetectionPosition(ins) {
+	var windowHeight = cropper.windowHeight,
+		windowWidth = cropper.windowWidth;
+
+	var cutDetectionPositionTop = function() {
+		//检测上边距是否在范围内
+		if (cropper.cutY < 0) {
+			cropper.cutY = 0;
+		}
+		if (cropper.cutY > windowHeight - cropper.canvasHeight) {
+			cropper.cutY = windowHeight - cropper.canvasHeight;
+		}
+	}
+
+	var cutDetectionPositionLeft = function() {
+		//检测左边距是否在范围内
+		if (cropper.cutX < 0) {
+			cropper.cutX = 0;
+		}
+		if (cropper.cutX > windowWidth - cropper.canvasWidth) {
+			cropper.cutX = windowWidth - cropper.canvasWidth;
+		}
+	}
+	//裁剪框坐标处理（如果只写一个参数则另一个默认为0，都不写默认居中）
+	if (cropper.cutY == null && cropper.cutX == null) {
+		var cutY = (windowHeight - cropper.canvasHeight) * 0.5;
+		var cutX = (windowWidth - cropper.canvasWidth) * 0.5;
+		cropper.cutY = cutY; //截取的框上边距
+		cropper.cutX = cutX; //截取的框左边距
+	} else if (cropper.cutY != null && cropper.cutX != null) {
+		cutDetectionPositionTop();
+		cutDetectionPositionLeft();
+	} else if (cropper.cutY != null && cropper.cutX == null) {
+		cutDetectionPositionTop();
+		cropper.cutX = (windowWidth - cropper.canvasWidth) / 2;
+	} else if (cropper.cutY == null && cropper.cutX != null) {
+		cutDetectionPositionLeft();
+		cropper.cutY = (windowHeight - cropper.canvasHeight) / 2;
+	}
+
+	styleUpdate(ins)
+}
+
+/**
+ * 图片边缘检测-缩放
+ */
+function imgMarginDetectionScale(ins, delay) {
+	if (!cropper.limitMove) return;
+	var scale = cropper.scale;
+	var imgWidth = cropper.imgWidth;
+	var imgHeight = cropper.imgHeight;
+	if ((cropper.angle / 90) % 2) {
+		imgWidth = cropper.imgHeight;
+		imgHeight = cropper.imgWidth;
+	}
+	if (imgWidth * scale < cropper.canvasWidth) {
+		scale = cropper.canvasWidth / imgWidth;
+	}
+	if (imgHeight * scale < cropper.canvasHeight) {
+		scale = Math.max(scale, cropper.canvasHeight / imgHeight);
+	}
+	imgMarginDetectionPosition(ins, scale, delay);
+}
+/**
+ * 图片边缘检测-位置
+ */
+function imgMarginDetectionPosition(ins, scale, delay) {
+	if (!cropper.limitMove) return;
+	var left = cropper.imgLeft;
+	var top = cropper.imgTop;
+	scale = scale || cropper.scale;
+	var imgWidth = cropper.imgWidth;
+	var imgHeight = cropper.imgHeight;
+	if ((cropper.angle / 90) % 2) {
+		imgWidth = cropper.imgHeight;
+		imgHeight = cropper.imgWidth;
+	}
+	left = cropper.cutX + (imgWidth * scale) / 2 >= left ? left : cropper.cutX + (imgWidth * scale) / 2;
+	left = cropper.cutX + cropper.canvasWidth - (imgWidth * scale) / 2 <= left ? left : cropper.cutX + cropper.canvasWidth -
+		(imgWidth * scale) / 2;
+	top = cropper.cutY + (imgHeight * scale) / 2 >= top ? top : cropper.cutY + (imgHeight * scale) / 2;
+	top = cropper.cutY + cropper.canvasHeight - (imgHeight * scale) / 2 <= top ? top : cropper.cutY + cropper.canvasHeight -
+		(imgHeight * scale) / 2;
+
+	cropper.imgLeft = left;
+	cropper.imgTop = top;
+	cropper.scale = scale;
+	styleUpdate(ins)
+	if (!delay || delay === 'null') {
+		imgTransform(ins);
+	}
+}
+
+
+function cutTouchEnd(e, ins) {
+	moveStop(ins);
+	cropper.flagCutTouch = false;
+	updateData(ins)
+}
+
+
+//改变截取框大小
+function computeCutSize(ins) {
+	if (cropper.canvasWidth > cropper.windowWidth) {
+		cropper.canvasWidth = cropper.windowWidth;
+		// canvasWidth(ins)
+	} else if (cropper.canvasWidth + cropper.cutX > cropper.windowWidth) {
+		cropper.cutX = cropper.windowWidth - cropper.cutX;
+	}
+	if (cropper.canvasHeight > cropper.windowHeight) {
+		cropper.canvasHeight = cropper.windowHeight;
+		// canvasHeight(ins)
+	} else if (cropper.canvasHeight + cropper.cutY > cropper.windowHeight) {
+		cropper.cutY = cropper.windowHeight - cropper.cutY;
+	}
+	// styleUpdate(ins)
+}
+
+function styleUpdate(ins) {
+	if (!ins) return;
+	ins.selectComponent('.tui-cropper-box').setStyle({
+		'width': cropper.canvasWidth + 'px',
+		'height': cropper.canvasHeight + 'px'
+	})
+	ins.selectComponent('.tui-content-middle').setStyle({
+		'height': cropper.canvasHeight + 'px'
+	})
+	ins.selectComponent('.tui-content-top').setStyle({
+		'height': cropper.cutY + 'px'
+	})
+	ins.selectComponent('.tui-wxs-bg').setStyle({
+		'width': cropper.cutX + 'px'
+	})
+
+}
+
+function imgTransform(ins) {
+	var owner = ins.selectComponent('.tui-cropper-image')
+	if (!owner) return
+	var x = cropper.imgLeft - cropper.imgWidth / 2;
+	var y = cropper.imgTop - cropper.imgHeight / 2;
+	owner.setStyle({
+		'transform': 'translate3d(' + x + 'px,' + y + 'px,0) scale(' + cropper.scale + ') rotate(' + cropper.angle + 'deg)'
+	})
+}
+
+function imageReset(ins) {
+	cropper.scale = 1;
+	cropper.angle = 0;
+	imgTransform(ins);
+}
+//监听截取框宽高变化
+function canvasWidth(ins) {
+	if (cropper.canvasWidth < cropper.minWidth) {
+		cropper.canvasWidth = cropper.minWidth;
+	}
+	if (!ins) return;
+	computeCutSize(ins);
+}
+
+function canvasHeight(ins) {
+	if (cropper.canvasHeight < cropper.minHeight) {
+		cropper.canvasHeight = cropper.minHeight;
+	}
+	if (!ins) return;
+	computeCutSize(ins);
+}
+
+function updateData(ins) {
+	if (!ins) return;
+	ins.callMethod('change', {
+		cutX: cropper.cutX,
+		cutY: cropper.cutY,
+		canvasWidth: cropper.canvasWidth,
+		canvasHeight: cropper.canvasHeight,
+		imgWidth: cropper.imgWidth,
+		imgHeight: cropper.imgHeight,
+		scale: cropper.scale,
+		angle: cropper.angle,
+		imgTop: cropper.imgTop,
+		imgLeft: cropper.imgLeft
+	})
+}
+
+function propsChange(prop, oldProp, ownerInstance, ins) {
+	if (prop && prop !== 'null') {
+		var params = prop.split(',')
+		var type = +params[0]
+		var dataset = ins.getDataset();
+		if (cropper.init || type == 4) {
+			cropper.maxHeight = +dataset.maxheight;
+			cropper.minHeight = +dataset.minheight;
+			cropper.maxWidth = +dataset.maxwidth;
+			cropper.minWidth = +dataset.minwidth;
+			cropper.canvasWidth = +dataset.width;
+			cropper.canvasHeight = +dataset.height;
+			cropper.imgTop = dataset.windowheight / 2;
+			cropper.imgLeft = dataset.windowwidth / 2;
+			cropper.imgWidth = +dataset.imgwidth;
+			cropper.imgHeight = +dataset.imgheight;
+			cropper.windowHeight = +dataset.windowheight;
+			cropper.windowWidth = +dataset.windowwidth;
+			cropper.init = false
+		} else if (type == 2 || type == 3) {
+			cropper.imgWidth = +dataset.imgwidth;
+			cropper.imgHeight = +dataset.imgheight;
+		}
+		cropper.limitMove = bool(dataset.limitmove);
+		cropper.angle = +dataset.angle;
+		if (type == 3) {
+			imgTransform(ownerInstance);
+		}
+		switch (type) {
+			case 1:
+				setCutCenter(ownerInstance);
+				//设置裁剪框大小>设置图片尺寸>绘制canvas
+				computeCutSize(ownerInstance);
+				//检查裁剪框是否在范围内
+				cutDetectionPosition(ownerInstance);
+				break;
+			case 2:
+				setCutCenter(ownerInstance);
+				break;
+			case 3:
+				imgMarginDetectionScale(ownerInstance)
+				break;
+			case 4:
+				imageReset(ownerInstance);
+				break;
+			case 5:
+				setCutCenter(ownerInstance);
+				break;
+			default:
+				break;
+		}
+	}
+}
+
+module.exports = {
+	touchstart: touchstart,
+	touchmove: touchmove,
+	touchend: touchend,
+	cutTouchStart: cutTouchStart,
+	cutTouchMove: cutTouchMove,
+	cutTouchEnd: cutTouchEnd,
+	propsChange: propsChange
+}
diff --git a/components/thorui/tui-cropper/tui-cropper.vue b/components/thorui/tui-cropper/tui-cropper.vue
new file mode 100644
index 0000000..e18a562
--- /dev/null
+++ b/components/thorui/tui-cropper/tui-cropper.vue
@@ -0,0 +1,505 @@
+<template>
+	<view class="tui-cropper__box" @touchmove.stop.prevent="stop">
+		<image
+			@load="imageLoad"
+			@error="imageLoad"
+			@touchstart="parse.touchstart"
+			@touchmove="parse.touchmove"
+			@touchend="parse.touchend"
+			:data-minScale="minScale"
+			:data-maxScale="maxScale"
+			:style="{
+				width: (imgWidth ? imgWidth : width) + 'px',
+				height: imgHeight ? imgHeight + 'px' : 'auto',
+				transitionDuration: (animation ? 0.3 : 0) + 's'
+			}"
+			class="tui-cropper__image"
+			:src="imageUrl"
+			v-if="imageUrl"
+			mode="widthFix"
+		></image>
+		<view class="tui-backdrop__cropper" :style="{ width: width + 'px', height: height + 'px', borderRadius: isRound ? '50%' : '0' }">
+			<view
+				class="tui-cropper__border"
+				:change:prop="parse.propsChange"
+				:prop="props"
+				:data-width="width"
+				:data-height="height"
+				:data-windowHeight="sysInfo.windowHeight || 600"
+				:data-windowWidth="sysInfo.windowWidth || 400"
+				:data-imgTop="imgTop"
+				:data-imgLeft="imgLeft"
+				:data-imgWidth="imgWidth"
+				:data-imgHeight="imgHeight"
+				:data-angle="angle"
+				:style="{ borderRadius: isRound ? '50%' : '0', border: border }"
+			></view>
+		</view>
+		<canvas
+			canvas-id="tui-image__cropper"
+			id="tui-image__cropper"
+			:disable-scroll="true"
+			:style="{ width: width * scaleRatio + 'px', height: height * scaleRatio + 'px' }"
+			class="tui-cropper__canvas"
+		></canvas>
+		<view class="tui-cropper__tabbar" v-if="!custom">
+			<view class="tui-op__btn" @tap.stop="back">取消</view>
+			<image :src="rotateImg" class="tui-rotate__img" @tap="setAngle"></image>
+			<view class="tui-op__btn" @tap.stop="getImage">完成</view>
+		</view>
+	</view>
+</template>
+<script src="./tui-cropper.wxs" module="parse" lang="wxs"></script>
+<script>
+export default {
+	name: 'tuiCropper',
+	props: {
+		//图片路径
+		imageUrl: {
+			type: String,
+			default: ''
+		},
+		//裁剪框高度 px
+		height: {
+			type: Number,
+			default: 280
+		},
+		//裁剪框宽度 px
+		width: {
+			type: Number,
+			default: 280
+		},
+		//是否为圆形裁剪框
+		isRound: {
+			type: Boolean,
+			default: true
+		},
+		//裁剪框边框
+		border: {
+			type: String,
+			default: '1px solid #fff'
+		},
+		//生成的图片尺寸相对剪裁框的比例
+		scaleRatio: {
+			type: Number,
+			default: 2
+		},
+		//图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理
+		quality: {
+			type: Number,
+			default: 0.8
+		},
+		//图片旋转角度
+		rotateAngle: {
+			type: Number,
+			default: 0
+		},
+		//图片最小缩放比
+		minScale: {
+			type: Number,
+			default: 0.5
+		},
+		//图片最大缩放比
+		maxScale: {
+			type: Number,
+			default: 2
+		},
+		//自定义操作栏（为true时隐藏底部操作栏）
+		custom: {
+			type: Boolean,
+			default: false
+		},
+		//值发生改变开始裁剪（custom为true时生效）
+		startCutting: {
+			type: [Number, Boolean],
+			default: 0
+		},
+		/**
+		 * 是否返回base64(H5端默认base64)
+		 * 支持平台：App，微信小程序，支付宝小程序,H5(默认url就是base64)
+		 **/
+		isBase64: {
+			type: Boolean,
+			default: false
+		},
+		//裁剪时是否显示loadding
+		loadding: {
+			type: Boolean,
+			default: true
+		},
+		//旋转icon
+		rotateImg: {
+			type: String,
+			default: '/static/components/cropper/img_rotate.png'
+		}
+	},
+	data() {
+		return {
+			TIME_CUT_CENTER: null,
+			cutX: 0, //画布x轴起点
+			cutY: 0, //画布y轴起点0
+			imgWidth: 0,
+			imgHeight: 0,
+			scale: 1, //图片缩放比
+			angle: 0, //图片旋转角度
+			animation: false, //是否开启图片过渡效果
+			animationTime: null,
+			imgTop: 0,
+			imgLeft: 0,
+			ctx: null,
+			sysInfo: {},
+			props: '',
+			sizeChange: 0, //2
+			angleChange: 0, //3
+			resetChange: 0, //4
+			centerChange: 0 //5
+		};
+	},
+	watch: {
+		//定义变量然后利用change触发
+		imageUrl(val, oldVal) {
+			this.imageReset();
+			this.showLoading();
+			uni.getImageInfo({
+				src: val,
+				success: res => {
+					//计算图片尺寸
+					this.imgComputeSize(res.width, res.height);
+					this.angleChange++;
+					this.props = `3,${this.angleChange}`;
+				},
+				fail: err => {
+					this.imgComputeSize();
+					this.angleChange++;
+					this.props = `3,${this.angleChange}`;
+				}
+			});
+		},
+		rotateAngle(val) {
+			this.animation = true;
+			this.angle = val;
+			this.angleChanged(val);
+		},
+		animation(val) {
+			//开启过渡220毫秒之后自动关闭
+			clearTimeout(this.animationTime);
+			if (val) {
+				this.animationTime = setTimeout(() => {
+					this.animation = false;
+				}, 220);
+			}
+		},
+		startCutting(val) {
+			if (this.custom && val) {
+				this.getImage();
+			}
+		}
+	},
+	mounted() {
+		this.sysInfo = uni.getSystemInfoSync();
+		this.imgTop = this.sysInfo.windowHeight / 2;
+		this.imgLeft = this.sysInfo.windowWidth / 2;
+		this.ctx = uni.createCanvasContext('tui-image__cropper', this);
+		//初始化
+		setTimeout(() => {
+			this.props = '1,1';
+		}, 0);
+		setTimeout(() => {
+			this.$emit('ready', {});
+		}, 200);
+	},
+	methods: {
+		//网络图片转成本地文件[同步执行]
+		async getLocalImage(url) {
+			return await new Promise((resolve, reject) => {
+				uni.downloadFile({
+					url: url,
+					success: res => {
+						resolve(res.tempFilePath);
+					},
+					fail: res => {
+						reject(false);
+					}
+				});
+			});
+		},
+		//返回裁剪后图片信息
+		getImage() {
+			if (!this.imageUrl) {
+				uni.showToast({
+					title: '请选择图片',
+					icon: 'none'
+				});
+				return;
+			}
+			this.loadding && this.showLoading();
+			let draw = async () => {
+				//图片实际大小
+				let imgWidth = this.imgWidth * this.scale * this.scaleRatio;
+				let imgHeight = this.imgHeight * this.scale * this.scaleRatio;
+				//canvas和图片的相对距离
+				let xpos = this.imgLeft - this.cutX;
+				let ypos = this.imgTop - this.cutY;
+				//旋转画布
+				this.ctx.translate(xpos * this.scaleRatio, ypos * this.scaleRatio);
+				this.ctx.rotate((this.angle * Math.PI) / 180);
+				let imgUrl = this.imageUrl;
+				// #ifdef APP-PLUS || MP-WEIXIN
+				if (~this.imageUrl.indexOf('https:')) {
+					imgUrl = await this.getLocalImage(this.imageUrl);
+				}
+				// #endif
+				this.ctx.drawImage(imgUrl, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight);
+				this.ctx.draw(false, () => {
+					let params = {
+						width: this.width * this.scaleRatio,
+						height: Math.round(this.height * this.scaleRatio),
+						destWidth: this.width * this.scaleRatio,
+						destHeight: Math.round(this.height) * this.scaleRatio,
+						fileType: 'png',
+						quality: this.quality
+					};
+					let data = {
+						url: '',
+						base64: '',
+						width: this.width * this.scaleRatio,
+						height: this.height * this.scaleRatio
+					};
+					// #ifdef MP-ALIPAY
+
+					if (this.isBase64) {
+						this.ctx.toDataURL(params).then(dataURL => {
+							data.base64 = dataURL;
+							this.loadding && uni.hideLoading();
+							this.$emit('cropper', data);
+						});
+					} else {
+						this.ctx.toTempFilePath({
+							...params,
+							success: res => {
+								data.url = res.tempFilePath;
+								this.loadding && uni.hideLoading();
+								this.$emit('cropper', data);
+							}
+						});
+					}
+					// #endif
+
+					// #ifndef MP-ALIPAY
+					// #ifdef MP-BAIDU || MP-TOUTIAO || H5
+					this.isBase64 = false;
+					// #endif
+					if (this.isBase64) {
+						uni.canvasGetImageData(
+							{
+								canvasId: 'tui-image__cropper',
+								x: 0,
+								y: 0,
+								width: this.width * this.scaleRatio,
+								height: Math.round(this.height * this.scaleRatio),
+								success: res => {
+									const arrayBuffer = new Uint8Array(res.data);
+									const base64 = uni.arrayBufferToBase64(arrayBuffer);
+									data.base64 = base64;
+									this.loadding && uni.hideLoading();
+									this.$emit('cropper', data);
+								}
+							},
+							this
+						);
+					} else {
+						uni.canvasToTempFilePath(
+							{
+								...params,
+								canvasId: 'tui-image__cropper',
+								success: res => {
+									data.url = res.tempFilePath;
+									// #ifdef H5
+									data.base64 = res.tempFilePath;
+									// #endif
+									this.loadding && uni.hideLoading();
+									this.$emit('cropper', data);
+								},
+								fail(res) {
+									console.log(res);
+								}
+							},
+							this
+						);
+					}
+					// #endif
+				});
+			};
+			draw();
+		},
+		change(e) {
+			this.cutX = e.cutX || 0;
+			this.cutY = e.cutY || 0;
+			this.imgWidth = e.imgWidth || this.imgWidth;
+			this.imgHeight = e.imgHeight || this.imgHeight;
+			this.scale = e.scale || 1;
+			this.angle = e.angle || 0;
+			this.imgTop = e.imgTop || 0;
+			this.imgLeft = e.imgLeft || 0;
+		},
+		imageReset() {
+			this.scale = 1;
+			this.angle = 0;
+			let sys = this.sysInfo.windowHeight ? this.sysInfo : uni.getSystemInfoSync();
+			this.imgTop = sys.windowHeight / 2;
+			this.imgLeft = sys.windowWidth / 2;
+			this.resetChange++;
+			this.props = `4,${this.resetChange}`;
+			//初始化旋转角度 0deg
+			this.$emit('initAngle', {});
+		},
+		imgComputeSize(width, height) {
+			//默认按图片最小边 = 对应裁剪框尺寸
+			let imgWidth = width,
+				imgHeight = height;
+			if (imgWidth && imgHeight) {
+				if (imgWidth / imgHeight > this.width / this.height) {
+					imgHeight = this.height;
+					imgWidth = (width / height) * imgHeight;
+				} else {
+					imgWidth = this.width;
+					imgHeight = (height / width) * imgWidth;
+				}
+			} else {
+				let sys = this.sysInfo.windowHeight ? this.sysInfo : uni.getSystemInfoSync();
+				imgWidth = sys.windowWidth;
+				imgHeight = 0;
+			}
+			this.imgWidth = imgWidth;
+			this.imgHeight = imgHeight;
+			this.sizeChange++;
+			this.props = `2,${this.sizeChange}`;
+		},
+		imageLoad(e) {
+			this.imageReset();
+			uni.hideLoading();
+			this.$emit('imageLoad', {});
+		},
+		moveStop() {
+			clearTimeout(this.TIME_CUT_CENTER);
+			this.TIME_CUT_CENTER = setTimeout(() => {
+				this.centerChange++;
+				this.props = `5,${this.centerChange}`;
+			}, 666);
+		},
+		moveDuring() {
+			clearTimeout(this.TIME_CUT_CENTER);
+		},
+		showLoading() {
+			uni.showLoading({
+				title: '请稍候...',
+				mask: true
+			});
+		},
+		stop() {},
+		back() {
+			uni.navigateBack();
+		},
+		angleChanged(val) {
+			this.moveStop();
+			if (val % 90) {
+				this.angle = Math.round(val / 90) * 90;
+			}
+			this.angleChange++;
+			this.props = `3,${this.angleChange}`;
+		},
+		setAngle() {
+			this.animation = true;
+			this.angle = this.angle + 90;
+			this.angleChanged(this.angle);
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-cropper__box {
+	width: 100vw;
+	height: 100vh;
+	background-color: rgba(0, 0, 0, 0.7);
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 1;
+}
+.tui-cropper__image {
+	width: 100%;
+	border-style: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 2;
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+	transform-origin: center;
+}
+
+.tui-cropper__canvas {
+	position: fixed;
+	z-index: 10;
+	left: -2000px;
+	top: -2000px;
+	pointer-events: none;
+}
+.tui-backdrop__cropper {
+	position: fixed;
+	z-index: 4;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	border: 3000px solid rgba(0, 0, 0, 0.55);
+	pointer-events: none;
+}
+.tui-cropper__border {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	pointer-events: none;
+}
+.tui-cropper__tabbar {
+	width: 100%;
+	height: 120rpx;
+	padding: 0 40rpx;
+	box-sizing: border-box;
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	z-index: 99;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	color: #ffffff;
+	font-size: 32rpx;
+}
+
+.tui-cropper__tabbar::after {
+	content: ' ';
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+	-webkit-transform: scaleY(0.5) translateZ(0);
+	transform: scaleY(0.5) translateZ(0);
+	transform-origin: 0 100%;
+}
+
+.tui-op__btn {
+	height: 80rpx;
+	display: flex;
+	align-items: center;
+}
+
+.tui-rotate__img {
+	width: 44rpx;
+	height: 44rpx;
+}
+</style>
diff --git a/components/thorui/tui-cropper/tui-cropper.wxs b/components/thorui/tui-cropper/tui-cropper.wxs
new file mode 100644
index 0000000..122e5d9
--- /dev/null
+++ b/components/thorui/tui-cropper/tui-cropper.wxs
@@ -0,0 +1,321 @@
+var cropper = {
+	cutX: 0, //画布x轴起点
+	cutY: 0, //画布y轴起点0
+	touchRelative: [{
+		x: 0,
+		y: 0
+	}], //手指或鼠标和图片中心的相对位置
+	hypotenuseLength: 0, //双指触摸时斜边长度
+	flagEndTouch: false, //是否结束触摸
+	canvasWidth: 0,
+	canvasHeight: 0,
+	imgWidth: 0, //图片宽度
+	imgHeight: 0, //图片高度
+	scale: 1, //图片缩放比
+	angle: 0, //图片旋转角度
+	imgTop: 0, //图片上边距
+	imgLeft: 0, //图片左边距
+	windowHeight: 0,
+	windowWidth: 0,
+	init: true
+}
+
+function bool(str) {
+	return str === 'true' || str == true ? true : false
+}
+
+function touchstart(e, ins) {
+	var touch = e.touches || e.changedTouches;
+	cropper.flagEndTouch = false;
+	if (touch.length == 1) {
+		cropper.touchRelative[0] = {
+			x: touch[0].pageX - cropper.imgLeft,
+			y: touch[0].pageY - cropper.imgTop
+		};
+	} else {
+		var width = Math.abs(touch[0].pageX - touch[1].pageX);
+		var height = Math.abs(touch[0].pageY - touch[1].pageY);
+		cropper.touchRelative = [{
+				x: touch[0].pageX - cropper.imgLeft,
+				y: touch[0].pageY - cropper.imgTop
+			},
+			{
+				x: touch[1].pageX - cropper.imgLeft,
+				y: touch[1].pageY - cropper.imgTop
+			}
+		];
+		cropper.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+	}
+
+}
+
+function moveDuring(ins) {
+	if (!ins) return;
+	ins.callMethod('moveDuring')
+}
+
+function moveStop(ins) {
+	if (!ins) return;
+	ins.callMethod('moveStop')
+};
+
+function setCutCenter(ins) {
+	var cutY = (cropper.windowHeight - cropper.canvasHeight) * 0.5;
+	var cutX = (cropper.windowWidth - cropper.canvasWidth) * 0.5;
+	//顺序不能变
+	cropper.imgTop = cropper.imgTop - cropper.cutY + cutY;
+	cropper.cutY = cutY; //截取的框上边距
+	cropper.imgLeft = cropper.imgLeft - cropper.cutX + cutX;
+	cropper.cutX = cutX; //截取的框左边距
+	cutDetectionPosition(ins)
+	imgTransform(ins)
+	updateData(ins)
+}
+
+function touchmove(e, ins) {
+	var touch = e.touches || e.changedTouches;
+	if (cropper.flagEndTouch) return;
+	moveDuring(ins);
+	if (e.touches.length == 1) {
+		var left = touch[0].pageX - cropper.touchRelative[0].x,
+			top = touch[0].pageY - cropper.touchRelative[0].y;
+		cropper.imgLeft = left;
+		cropper.imgTop = top;
+		imgTransform(ins);
+		imgMarginDetectionPosition(ins);
+	} else {
+		var res = e.instance.getDataset();
+		var minScale = +res.minscale;
+		var maxScale = +res.maxscale;
+		var width = Math.abs(touch[0].pageX - touch[1].pageX),
+			height = Math.abs(touch[0].pageY - touch[1].pageY),
+			hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)),
+			scale = cropper.scale * (hypotenuse / cropper.hypotenuseLength),
+			current_deg = 0;
+		scale = scale <= minScale ? minScale : scale;
+		scale = scale >= maxScale ? maxScale : scale;
+		cropper.scale = scale;
+		imgMarginDetectionScale(ins, true);
+		var touchRelative = [{
+				x: touch[0].pageX - cropper.imgLeft,
+				y: touch[0].pageY - cropper.imgTop
+			},
+			{
+				x: touch[1].pageX - cropper.imgLeft,
+				y: touch[1].pageY - cropper.imgTop
+			}
+		];
+		cropper.touchRelative = touchRelative;
+		cropper.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+		//更新视图
+		cropper.angle = cropper.angle + current_deg;
+		imgTransform(ins);
+	}
+}
+
+function touchend(e, ins) {
+	cropper.flagEndTouch = true;
+	moveStop(ins);
+	updateData(ins)
+}
+
+
+//检测剪裁框位置是否在允许的范围内(屏幕内)
+function cutDetectionPosition(ins) {
+	var windowHeight = cropper.windowHeight,
+		windowWidth = cropper.windowWidth;
+
+	var cutDetectionPositionTop = function() {
+		//检测上边距是否在范围内
+		if (cropper.cutY < 0) {
+			cropper.cutY = 0;
+		}
+		if (cropper.cutY > windowHeight - cropper.canvasHeight) {
+			cropper.cutY = windowHeight - cropper.canvasHeight;
+		}
+	}
+
+	var cutDetectionPositionLeft = function() {
+		//检测左边距是否在范围内
+		if (cropper.cutX < 0) {
+			cropper.cutX = 0;
+		}
+		if (cropper.cutX > windowWidth - cropper.canvasWidth) {
+			cropper.cutX = windowWidth - cropper.canvasWidth;
+		}
+	}
+	//裁剪框坐标处理（如果只写一个参数则另一个默认为0，都不写默认居中）
+	if (cropper.cutY == null && cropper.cutX == null) {
+		var cutY = (windowHeight - cropper.canvasHeight) * 0.5;
+		var cutX = (windowWidth - cropper.canvasWidth) * 0.5;
+		cropper.cutY = cutY; //截取的框上边距
+		cropper.cutX = cutX; //截取的框左边距
+	} else if (cropper.cutY != null && cropper.cutX != null) {
+		cutDetectionPositionTop();
+		cutDetectionPositionLeft();
+	} else if (cropper.cutY != null && cropper.cutX == null) {
+		cutDetectionPositionTop();
+		cropper.cutX = (windowWidth - cropper.canvasWidth) / 2;
+	} else if (cropper.cutY == null && cropper.cutX != null) {
+		cutDetectionPositionLeft();
+		cropper.cutY = (windowHeight - cropper.canvasHeight) / 2;
+	}
+}
+
+/**
+ * 图片边缘检测-缩放
+ */
+function imgMarginDetectionScale(ins, delay) {
+	var scale = cropper.scale;
+	var imgWidth = cropper.imgWidth;
+	var imgHeight = cropper.imgHeight;
+	if ((cropper.angle / 90) % 2) {
+		imgWidth = cropper.imgHeight;
+		imgHeight = cropper.imgWidth;
+	}
+	if (imgWidth * scale < cropper.canvasWidth) {
+		scale = cropper.canvasWidth / imgWidth;
+	}
+	if (imgHeight * scale < cropper.canvasHeight) {
+		scale = Math.max(scale, cropper.canvasHeight / imgHeight);
+	}
+	imgMarginDetectionPosition(ins, scale, delay);
+}
+/**
+ * 图片边缘检测-位置
+ */
+function imgMarginDetectionPosition(ins, scale, delay) {
+	var left = cropper.imgLeft;
+	var top = cropper.imgTop;
+	scale = scale || cropper.scale;
+	var imgWidth = cropper.imgWidth;
+	var imgHeight = cropper.imgHeight;
+	if ((cropper.angle / 90) % 2) {
+		imgWidth = cropper.imgHeight;
+		imgHeight = cropper.imgWidth;
+	}
+	left = cropper.cutX + (imgWidth * scale) / 2 >= left ? left : cropper.cutX + (imgWidth * scale) / 2;
+	left = cropper.cutX + cropper.canvasWidth - (imgWidth * scale) / 2 <= left ? left : cropper.cutX + cropper.canvasWidth -
+		(imgWidth * scale) / 2;
+	top = cropper.cutY + (imgHeight * scale) / 2 >= top ? top : cropper.cutY + (imgHeight * scale) / 2;
+	top = cropper.cutY + cropper.canvasHeight - (imgHeight * scale) / 2 <= top ? top : cropper.cutY + cropper.canvasHeight -
+		(imgHeight * scale) / 2;
+
+	cropper.imgLeft = left;
+	cropper.imgTop = top;
+	cropper.scale = scale;
+	if (!delay || delay === 'null') {
+		imgTransform(ins);
+	}
+}
+
+
+//改变截取框大小
+function computeCutSize(ins) {
+	if (cropper.canvasWidth > cropper.windowWidth) {
+		cropper.canvasWidth = cropper.windowWidth;
+	} else if (cropper.canvasWidth + cropper.cutX > cropper.windowWidth) {
+		cropper.cutX = cropper.windowWidth - cropper.cutX;
+	}
+	if (cropper.canvasHeight > cropper.windowHeight) {
+		cropper.canvasHeight = cropper.windowHeight;
+	} else if (cropper.canvasHeight + cropper.cutY > cropper.windowHeight) {
+		cropper.cutY = cropper.windowHeight - cropper.cutY;
+	}
+}
+
+function imgTransform(ins) {
+	var owner = ins.selectComponent('.tui-cropper__image')
+	if (!owner) return
+	var x = cropper.imgLeft - cropper.imgWidth / 2;
+	var y = cropper.imgTop - cropper.imgHeight / 2;
+	owner.setStyle({
+		'transform': 'translate3d(' + x + 'px,' + y + 'px,0) scale(' + cropper.scale + ') rotate(' + cropper.angle + 'deg)'
+	})
+}
+
+function imageReset(ins) {
+	cropper.scale = 1;
+	cropper.angle = 0;
+	imgTransform(ins);
+}
+//监听截取框宽高变化
+function canvasWidth(ins) {
+	if (!ins) return;
+	computeCutSize(ins);
+}
+
+function canvasHeight(ins) {
+	if (!ins) return;
+	computeCutSize(ins);
+}
+
+function updateData(ins) {
+	if (!ins) return;
+	ins.callMethod('change', {
+		cutX: cropper.cutX,
+		cutY: cropper.cutY,
+		imgWidth: cropper.imgWidth,
+		imgHeight: cropper.imgHeight,
+		scale: cropper.scale,
+		angle: cropper.angle,
+		imgTop: cropper.imgTop,
+		imgLeft: cropper.imgLeft
+	})
+}
+
+function propsChange(prop, oldProp, ownerInstance, ins) {
+	if (prop && prop !== 'null') {
+		var params = prop.split(',')
+		var type = +params[0]
+		var dataset = ins.getDataset();
+		if (cropper.init || type == 4) {
+			cropper.canvasWidth = +dataset.width;
+			cropper.canvasHeight = +dataset.height;
+			cropper.imgTop = dataset.windowheight / 2;
+			cropper.imgLeft = dataset.windowwidth / 2;
+			cropper.imgWidth = +dataset.imgwidth;
+			cropper.imgHeight = +dataset.imgheight;
+			cropper.windowHeight = +dataset.windowheight;
+			cropper.windowWidth = +dataset.windowwidth;
+			cropper.init = false
+		} else if (type == 2 || type == 3) {
+			cropper.imgWidth = +dataset.imgwidth;
+			cropper.imgHeight = +dataset.imgheight;
+		}
+		cropper.angle = +dataset.angle;
+		if (type == 3) {
+			imgTransform(ownerInstance);
+		}
+		switch (type) {
+			case 1:
+				setCutCenter(ownerInstance);
+				//设置裁剪框大小>设置图片尺寸>绘制canvas
+				computeCutSize(ownerInstance);
+				//检查裁剪框是否在范围内
+				cutDetectionPosition(ownerInstance);
+				break;
+			case 2:
+				setCutCenter(ownerInstance);
+				break;
+			case 3:
+				imgMarginDetectionScale(ownerInstance)
+				break;
+			case 4:
+				imageReset(ownerInstance);
+				break;
+			case 5:
+				setCutCenter(ownerInstance);
+				break;
+			default:
+				break;
+		}
+	}
+}
+
+module.exports = {
+	touchstart: touchstart,
+	touchmove: touchmove,
+	touchend: touchend,
+	propsChange: propsChange
+}
diff --git a/components/thorui/tui-datetime/tui-datetime.vue b/components/thorui/tui-datetime/tui-datetime.vue
new file mode 100644
index 0000000..9b30017
--- /dev/null
+++ b/components/thorui/tui-datetime/tui-datetime.vue
@@ -0,0 +1,548 @@
+<template>
+	<view class="tui-datetime-picker">
+		<view class="tui-mask" :class="{ 'tui-mask-show': isShow }" @touchmove.stop.prevent="stop" catchtouchmove="stop" @tap="hide"></view>
+		<view class="tui-header" :class="{ 'tui-show': isShow }">
+			<view
+				class="tui-picker-header"
+				:class="{ 'tui-date-radius': radius }"
+				:style="{ backgroundColor: headerBackground }"
+				@touchmove.stop.prevent="stop"
+				catchtouchmove="stop"
+			>
+				<view class="tui-btn-picker" :style="{ color: cancelColor }" hover-class="tui-opacity" :hover-stay-time="150" @tap="hide">取消</view>
+				<view class="tui-btn-picker" :style="{ color: color }" hover-class="tui-opacity" :hover-stay-time="150" @tap="btnFix">确定</view>
+			</view>
+			<view class="tui-date-header" :style="{ backgroundColor: unitBackground }" v-if="unitTop">
+				<view class="tui-date-unit" v-if="type < 4 || type == 7">年</view>
+				<view class="tui-date-unit" v-if="type < 4 || type == 7">月</view>
+				<view class="tui-date-unit" v-if="type == 1 || type == 2 || type == 7">日</view>
+				<view class="tui-date-unit" v-if="type == 1 || type == 4 || type == 5 || type == 7">时</view>
+				<view class="tui-date-unit" v-if="type == 1 || type > 3">分</view>
+				<view class="tui-date-unit" v-if="type > 4">秒</view>
+			</view>
+			<view class="tui-picker-body" :style="{ backgroundColor: bodyBackground }">
+				<picker-view :value="value" @change="change" class="tui-picker-view">
+					<picker-view-column v-if="!reset && (type < 4 || type == 7)">
+						<view class="tui-column-item" :class="{ 'tui-font-size_32': !unitTop && type == 7 }" v-for="(item, index) in years" :key="index">
+							{{ item }}
+							<text class="tui-unit-text" v-if="!unitTop">年</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="!reset && (type < 4 || type == 7)">
+						<view class="tui-column-item" :class="{ 'tui-font-size_32': !unitTop && type == 7 }" v-for="(item, index) in months" :key="index">
+							{{ formatNum(item) }}
+							<text class="tui-unit-text" v-if="!unitTop">月</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="!reset && (type == 1 || type == 2 || type == 7)">
+						<view class="tui-column-item" :class="{ 'tui-font-size_32': !unitTop && type == 7 }" v-for="(item, index) in days" :key="index">
+							{{ formatNum(item) }}
+							<text class="tui-unit-text" v-if="!unitTop">日</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="!reset && (type == 1 || type == 4 || type == 5 || type == 7)">
+						<view class="tui-column-item" :class="{ 'tui-font-size_32': !unitTop && type == 7 }" v-for="(item, index) in hours" :key="index">
+							{{ formatNum(item) }}
+							<text class="tui-unit-text" v-if="!unitTop">时</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="!reset && (type == 1 || type > 3)">
+						<view class="tui-column-item" :class="{ 'tui-font-size_32': !unitTop && type == 7 }" v-for="(item, index) in minutes" :key="index">
+							{{ formatNum(item) }}
+							<text class="tui-unit-text" v-if="!unitTop">分</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="!reset && type > 4">
+						<view class="tui-column-item" :class="{ 'tui-font-size_32': !unitTop && type == 7 }" v-for="(item, index) in seconds" :key="index">
+							{{ formatNum(item) }}
+							<text class="tui-unit-text" v-if="!unitTop">秒</text>
+						</view>
+					</picker-view-column>
+				</picker-view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiDatetime',
+	props: {
+		//1-日期+时间（年月日+时分） 2-日期(年月日) 3-日期(年月) 4-时间（时分） 5-时分秒 6-分秒 7-年月日 时分秒
+		type: {
+			type: Number,
+			default: 1
+		},
+		//年份区间
+		startYear: {
+			type: Number,
+			default: 1980
+		},
+		//年份区间
+		endYear: {
+			type: Number,
+			default: 2050
+		},
+		//"取消"字体颜色
+		cancelColor: {
+			type: String,
+			default: '#888'
+		},
+		//"确定"字体颜色
+		color: {
+			type: String,
+			default: '#5677fc'
+		},
+		//设置默认显示日期 2019-08-01 || 2019-08-01 17:01 || 2019/08/01
+		setDateTime: {
+			type: String,
+			default: ''
+		},
+		//单位置顶
+		unitTop: {
+			type: Boolean,
+			default: false
+		},
+		//圆角设置
+		radius: {
+			type: Boolean,
+			default: false
+		},
+		//头部背景色
+		headerBackground: {
+			type: String,
+			default: '#fff'
+		},
+		//根据实际调整，不建议使用深颜色
+		bodyBackground: {
+			type: String,
+			default: '#fff'
+		},
+		//单位置顶时，单位条背景色
+		unitBackground: {
+			type: String,
+			default: '#fff'
+		}
+	},
+	data() {
+		return {
+			isShow: false,
+			years: [],
+			months: [],
+			days: [],
+			hours: [],
+			minutes: [],
+			seconds: [],
+			year: 0,
+			month: 0,
+			day: 0,
+			hour: 0,
+			minute: 0,
+			second: 0,
+			startDate: '',
+			endDate: '',
+			value: [0, 0, 0, 0, 0, 0],
+			reset: false
+		};
+	},
+	mounted() {
+		this.initData();
+	},
+	computed: {
+		yearOrMonth() {
+			return `${this.year}-${this.month}`;
+		},
+		propsChange() {
+			return `${this.setDateTime}-${this.type}-${this.startYear}-${this.endYear}`;
+		}
+	},
+	watch: {
+		yearOrMonth() {
+			this.setDays();
+		},
+		propsChange() {
+			this.reset = true;
+			setTimeout(() => {
+				this.initData();
+			}, 10);
+		}
+	},
+	methods: {
+		stop() {},
+		formatNum: function(num) {
+			return num < 10 ? '0' + num : num + '';
+		},
+		generateArray: function(start, end) {
+			return Array.from(new Array(end + 1).keys()).slice(start);
+		},
+		getIndex: function(arr, val) {
+			let index = arr.indexOf(val);
+			return ~index ? index : 0;
+		},
+		//日期时间处理
+		initSelectValue() {
+			let fdate = this.setDateTime.replace(/\-/g, '/');
+			fdate = fdate && fdate.indexOf('/') == -1 ? `2020/01/01 ${fdate}` : fdate;
+			let time = null;
+			if (fdate) time = new Date(fdate);
+			else time = new Date();
+			this.year = time.getFullYear();
+			this.month = time.getMonth() + 1;
+			this.day = time.getDate();
+			this.hour = time.getHours();
+			this.minute = time.getMinutes();
+			this.second = time.getSeconds();
+		},
+		initData() {
+			this.initSelectValue();
+			this.reset = false;
+			switch (this.type) {
+				case 1:
+					this.value = [0, 0, 0, 0, 0];
+					this.setYears();
+					this.setMonths();
+					this.setDays();
+					this.setHours();
+					this.setMinutes();
+					break;
+				case 2:
+					this.value = [0, 0, 0];
+					this.setYears();
+					this.setMonths();
+					this.setDays();
+					break;
+				case 3:
+					this.value = [0, 0];
+					this.setYears();
+					this.setMonths();
+					break;
+				case 4:
+					this.value = [0, 0];
+					this.setHours();
+					this.setMinutes();
+					break;
+				case 5:
+					this.value = [0, 0, 0];
+					this.setHours();
+					this.setMinutes();
+					this.setSeconds();
+					break;
+				case 6:
+					this.value = [0, 0];
+					this.setMinutes();
+					this.setSeconds();
+					break;
+				case 7:
+					this.value = [0, 0, 0, 0, 0, 0];
+					this.setYears();
+					this.setMonths();
+					this.setDays();
+					this.setHours();
+					this.setMinutes();
+					this.setSeconds();
+					break;
+				default:
+					break;
+			}
+		},
+		setYears() {
+			this.years = this.generateArray(this.startYear, this.endYear);
+			setTimeout(() => {
+				this.$set(this.value, 0, this.getIndex(this.years, this.year));
+			}, 8);
+		},
+		setMonths() {
+			this.months = this.generateArray(1, 12);
+			setTimeout(() => {
+				this.$set(this.value, 1, this.getIndex(this.months, this.month));
+			}, 8);
+		},
+		setDays() {
+			if (this.type == 3 || this.type == 4) return;
+			let totalDays = new Date(this.year, this.month, 0).getDate();
+			this.days = this.generateArray(1, totalDays);
+			setTimeout(() => {
+				this.$set(this.value, 2, this.getIndex(this.days, this.day));
+			}, 8);
+		},
+		setHours() {
+			this.hours = this.generateArray(0, 23);
+			setTimeout(() => {
+				let index = this.type == 5 || this.type == 7 ? this.value.length - 3 : this.value.length - 2;
+				this.$set(this.value, index, this.getIndex(this.hours, this.hour));
+			}, 8);
+		},
+		setMinutes() {
+			this.minutes = this.generateArray(0, 59);
+			setTimeout(() => {
+				let index = this.type > 4 ? this.value.length - 2 : this.value.length - 1;
+				this.$set(this.value, index, this.getIndex(this.minutes, this.minute));
+			}, 8);
+		},
+		setSeconds() {
+			this.seconds = this.generateArray(0, 59);
+			setTimeout(() => {
+				this.$set(this.value, this.value.length - 1, this.getIndex(this.seconds, this.second));
+			}, 8);
+		},
+		show() {
+			setTimeout(() => {
+				this.isShow = true;
+			}, 50);
+		},
+		hide() {
+			this.isShow = false;
+			this.$emit('cancel', {});
+		},
+		change(e) {
+			this.value = e.detail.value;
+			switch (this.type) {
+				case 1:
+					this.year = this.years[this.value[0]];
+					this.month = this.months[this.value[1]];
+					this.day = this.days[this.value[2]];
+					this.hour = this.hours[this.value[3]];
+					this.minute = this.minutes[this.value[4]];
+					break;
+				case 2:
+					this.year = this.years[this.value[0]];
+					this.month = this.months[this.value[1]];
+					this.day = this.days[this.value[2]];
+					break;
+				case 3:
+					this.year = this.years[this.value[0]];
+					this.month = this.months[this.value[1]];
+					break;
+				case 4:
+					this.hour = this.hours[this.value[0]];
+					this.minute = this.minutes[this.value[1]];
+					break;
+				case 5:
+					this.hour = this.hours[this.value[0]];
+					this.minute = this.minutes[this.value[1]];
+					this.second = this.seconds[this.value[2]];
+					break;
+				case 6:
+					this.minute = this.minutes[this.value[0]];
+					this.second = this.seconds[this.value[1]];
+					break;
+				case 7:
+					this.year = this.years[this.value[0]];
+					this.month = this.months[this.value[1]];
+					this.day = this.days[this.value[2]];
+					this.hour = this.hours[this.value[3]];
+					this.minute = this.minutes[this.value[4]];
+					this.second = this.seconds[this.value[5]];
+					break;
+				default:
+					break;
+			}
+		},
+		btnFix() {
+			setTimeout(() => {
+				let result = {};
+				let year = this.year;
+				let month = this.formatNum(this.month || 0);
+				let day = this.formatNum(this.day || 0);
+				let hour = this.formatNum(this.hour || 0);
+				let minute = this.formatNum(this.minute || 0);
+				let second = this.formatNum(this.second || 0);
+				switch (this.type) {
+					case 1:
+						result = {
+							year: year,
+							month: month,
+							day: day,
+							hour: hour,
+							minute: minute,
+							result: `${year}-${month}-${day} ${hour}:${minute}`
+						};
+						break;
+					case 2:
+						result = {
+							year: year,
+							month: month,
+							day: day,
+							result: `${year}-${month}-${day}`
+						};
+						break;
+					case 3:
+						result = {
+							year: year,
+							month: month,
+							result: `${year}-${month}`
+						};
+						break;
+					case 4:
+						result = {
+							hour: hour,
+							minute: minute,
+							result: `${hour}:${minute}`
+						};
+						break;
+					case 5:
+						result = {
+							hour: hour,
+							minute: minute,
+							second: second,
+							result: `${hour}:${minute}:${second}`
+						};
+						break;
+					case 6:
+						result = {
+							minute: minute,
+							second: second,
+							result: `${minute}:${second}`
+						};
+						break;
+					case 7:
+						result = {
+							year: year,
+							month: month,
+							day: day,
+							hour: hour,
+							minute: minute,
+							second: second,
+							result: `${year}-${month}-${day} ${hour}:${minute}:${second}`
+						};
+						break;
+					default:
+						break;
+				}
+				this.$emit('confirm', result);
+				this.hide();
+			}, 80);
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-datetime-picker {
+	position: relative;
+	z-index: 996;
+}
+
+.tui-picker-view {
+	height: 100%;
+	box-sizing: border-box;
+}
+
+.tui-mask {
+	position: fixed;
+	z-index: 997;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, 0.6);
+	visibility: hidden;
+	opacity: 0;
+	transition: all 0.3s ease-in-out;
+}
+
+.tui-mask-show {
+	visibility: visible !important;
+	opacity: 1 !important;
+}
+
+.tui-header {
+	z-index: 998;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	transition: all 0.3s ease-in-out;
+	transform: translateY(100%);
+}
+
+.tui-date-header {
+	width: 100%;
+	height: 52rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	font-size: 26rpx;
+	line-height: 26rpx;
+	/* #ifdef MP */
+	box-shadow: 0 15rpx 10rpx -15rpx #efefef;
+	/* #endif */
+	/* #ifndef MP */
+	box-shadow: 0 15rpx 10rpx -15rpx #888;
+	/* #endif */
+	position: relative;
+	z-index: 2;
+}
+
+.tui-date-unit {
+	flex: 1;
+	text-align: center;
+}
+
+.tui-show {
+	transform: translateY(0);
+}
+
+.tui-picker-header {
+	width: 100%;
+	height: 90rpx;
+	padding: 0 40rpx;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	box-sizing: border-box;
+	font-size: 32rpx;
+	position: relative;
+}
+
+.tui-date-radius {
+	border-top-left-radius: 20rpx;
+	border-top-right-radius: 20rpx;
+	overflow: hidden;
+}
+
+.tui-picker-header::after {
+	content: '';
+	position: absolute;
+	border-bottom: 1rpx solid #eaeef1;
+	-webkit-transform: scaleY(0.5);
+	transform: scaleY(0.5);
+	bottom: 0;
+	right: 0;
+	left: 0;
+}
+
+.tui-picker-body {
+	width: 100%;
+	height: 520rpx;
+	overflow: hidden;
+}
+
+.tui-column-item {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 36rpx;
+	color: #333;
+}
+
+.tui-font-size_32 {
+	font-size: 32rpx !important;
+}
+
+.tui-unit-text {
+	font-size: 24rpx !important;
+	padding-left: 8rpx;
+}
+
+.tui-btn-picker {
+	padding: 16rpx;
+	box-sizing: border-box;
+	text-align: center;
+	text-decoration: none;
+}
+
+.tui-opacity {
+	opacity: 0.5;
+}
+</style>
diff --git a/components/thorui/tui-divider/tui-divider.vue b/components/thorui/tui-divider/tui-divider.vue
new file mode 100644
index 0000000..ec96112
--- /dev/null
+++ b/components/thorui/tui-divider/tui-divider.vue
@@ -0,0 +1,103 @@
+<template>
+	<view class="tui-divider" :style="{ height: height + 'rpx' }">
+		<view class="tui-divider-line" :style="{ width: width, background: getBgColor(gradual, gradualColor, dividerColor) }"></view>
+		<view
+			class="tui-divider-text"
+			:style="{ color: color, fontSize: size + 'rpx', lineHeight: size + 'rpx', backgroundColor: backgroundColor, fontWeight: bold ? 'bold' : 'normal' }"
+		>
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiDivider',
+	props: {
+		//divider占据高度
+		height: {
+			type: Number,
+			default: 100
+		},
+		//divider宽度，可填写具体长度，如400rpx
+		width: {
+			type: String,
+			default: '100%'
+		},
+		//divider颜色，如果为渐变线条，此属性失效
+		dividerColor: {
+			type: String,
+			default: '#e5e5e5'
+		},
+		//文字颜色
+		color: {
+			type: String,
+			default: '#999'
+		},
+		//文字大小 rpx
+		size: {
+			type: Number,
+			default: 24
+		},
+		bold: {
+			type: Boolean,
+			default: false
+		},
+		//背景颜色，和当前页面背景色保持一致
+		backgroundColor: {
+			type: String,
+			default: '#fafafa'
+		},
+		//是否为渐变线条，为true，divideColor失效
+		gradual: {
+			type: Boolean,
+			default: false
+		},
+		//渐变色值，to right ，提供两个色值即可，由浅至深
+		gradualColor: {
+			type: Array,
+			default: function() {
+				return ['#eee', '#ccc'];
+			}
+		}
+	},
+	methods: {
+		getBgColor: function(gradual, gradualColor, dividerColor) {
+			let bgColor = dividerColor;
+			if (gradual) {
+				bgColor = 'linear-gradient(to right,' + gradualColor[0] + ',' + gradualColor[1] + ',' + gradualColor[1] + ',' + gradualColor[0] + ')';
+			}
+			return bgColor;
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-divider {
+	width: 100%;
+	position: relative;
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
+	overflow: hidden;
+}
+
+.tui-divider-line {
+	position: absolute;
+	height: 1rpx;
+	top: 50%;
+	left: 50%;
+	-webkit-transform: scaleY(0.5) translateX(-50%) translateZ(0);
+	transform: scaleY(0.5) translateX(-50%) translateZ(0);
+}
+
+.tui-divider-text {
+	position: relative;
+	text-align: center;
+	padding: 0 18rpx;
+	z-index: 1;
+}
+</style>
diff --git a/components/thorui/tui-drawer/tui-drawer.vue b/components/thorui/tui-drawer/tui-drawer.vue
new file mode 100644
index 0000000..e183223
--- /dev/null
+++ b/components/thorui/tui-drawer/tui-drawer.vue
@@ -0,0 +1,139 @@
+<template>
+	<!-- @touchmove.stop.prevent -->
+	<view>
+		<view v-if="mask" class="tui-drawer-mask" :class="{ 'tui-drawer-mask_show': visible }" :style="{ zIndex: maskZIndex }" @tap="handleMaskClick"></view>
+		<view
+			class="tui-drawer-container"
+			:class="[`tui-drawer-container_${mode}`, visible ? `tui-drawer-${mode}__show` : '']"
+			:style="{ zIndex: zIndex, backgroundColor: backgroundColor }"
+		>
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * 超过一屏时插槽使用scroll-view
+ **/
+export default {
+	name: 'tuiDrawer',
+	props: {
+		visible: {
+			type: Boolean,
+			default: false
+		},
+		mask: {
+			type: Boolean,
+			default: true
+		},
+		maskClosable: {
+			type: Boolean,
+			default: true
+		},
+		// left right bottom top
+		mode: {
+			type: String,
+			default: 'right'
+		},
+		//drawer z-index
+		zIndex: {
+			type: [Number, String],
+			default: 9999
+		},
+		//mask z-index
+		maskZIndex: {
+			type: [Number, String],
+			default: 9998
+		},
+		backgroundColor: {
+			type: String,
+			default: '#fff'
+		}
+	},
+	methods: {
+		handleMaskClick() {
+			if (!this.maskClosable) {
+				return;
+			}
+			this.$emit('close', {});
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-drawer-mask {
+	opacity: 0;
+	visibility: hidden;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.6);
+	transition: all 0.3s ease-in-out;
+}
+.tui-drawer-mask_show {
+	display: block;
+	visibility: visible;
+	opacity: 1;
+}
+
+.tui-drawer-container {
+	position: fixed;
+	left: 50%;
+	height: 100.2%;
+	top: 0;
+	transform: translate3d(-50%, -50%, 0);
+	transform-origin: center;
+	transition: all 0.3s ease-in-out;
+	opacity: 0;
+	overflow-y: scroll;
+	-webkit-overflow-scrolling: touch;
+	-ms-touch-action: pan-y cross-slide-y;
+	-ms-scroll-chaining: none;
+	-ms-scroll-limit: 0 50 0 50;
+}
+.tui-drawer-container_left {
+	left: 0;
+	top: 50%;
+	transform: translate3d(-100%, -50%, 0);
+}
+
+.tui-drawer-container_right {
+	right: 0;
+	top: 50%;
+	left: auto;
+	transform: translate3d(100%, -50%, 0);
+}
+
+.tui-drawer-container_bottom,
+.tui-drawer-container_top {
+	width: 100%;
+	height: auto !important;
+	min-height: 20rpx;
+	left: 0;
+	right: 0;
+	transform-origin: center;
+	transition: all 0.3s ease-in-out;
+}
+.tui-drawer-container_bottom {
+	bottom: 0;
+	top: auto;
+	transform: translate3d(0, 100%, 0);
+}
+.tui-drawer-container_top {
+	transform: translate3d(0, -100%, 0);
+}
+.tui-drawer-left__show,
+.tui-drawer-right__show {
+	opacity: 1;
+	transform: translate3d(0, -50%, 0);
+}
+.tui-drawer-top__show,
+.tui-drawer-bottom__show {
+	opacity: 1;
+	transform: translate3d(0, 0, 0);
+}
+</style>
diff --git a/components/thorui/tui-dropdown-list/tui-dropdown-list.vue b/components/thorui/tui-dropdown-list/tui-dropdown-list.vue
new file mode 100644
index 0000000..e9eb77d
--- /dev/null
+++ b/components/thorui/tui-dropdown-list/tui-dropdown-list.vue
@@ -0,0 +1,69 @@
+<template>
+	<view class="tui-selected-class tui-dropdown-list" :style="{ height: selectHeight ? selectHeight + 'rpx' : 'auto' }">
+		<slot name="selectionbox"></slot>
+		<view
+			class="tui-dropdown-view"
+			:class="[show ? 'tui-dropdownlist-show' : '']"
+			:style="{ backgroundColor: backgroundColor, height: show ? height + 'rpx' : 0, top: top + 'rpx' }"
+		>
+			<slot name="dropdownbox"></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiDropdownList',
+	props: {
+		//控制显示
+		show: {
+			type: Boolean,
+			default: false
+		},
+		//背景颜色
+		backgroundColor: {
+			type: String,
+			default: 'transparent'
+		},
+		//top  rpx
+		top: {
+			type: Number,
+			default: 0
+		},
+		//下拉框高度 rpx
+		height: {
+			type: Number,
+			default: 0
+		},
+		//选择框高度 单位rpx
+		selectHeight: {
+			type: Number,
+			default: 0
+		}
+	},
+	methods: {}
+};
+</script>
+
+<style scoped>
+.tui-dropdown-list {
+	position: relative;
+}
+
+.tui-dropdown-view {
+	width: 100%;
+	overflow: hidden;
+	position: absolute;
+	z-index: -99;
+	left: 0;
+	opacity: 0;
+	/* visibility: hidden; */
+	transition: all 0.2s ease-in-out;
+}
+
+.tui-dropdownlist-show {
+	opacity: 1;
+	z-index: 996;
+	/* visibility: visible; */
+}
+</style>
diff --git a/components/thorui/tui-fab/tui-fab.vue b/components/thorui/tui-fab/tui-fab.vue
new file mode 100644
index 0000000..5efd197
--- /dev/null
+++ b/components/thorui/tui-fab/tui-fab.vue
@@ -0,0 +1,261 @@
+<template>
+	<view @touchmove.stop.prevent>
+		<view class="tui-fab-box" :class="{'tui-fab-right':!left || (left && right)}" :style="{left:getLeft(),right:getRight(),bottom:bottom+'rpx'}">
+			<view class="tui-fab-btn" :class="{'tui-visible':isOpen,'tui-fab-hidden':hidden}">
+				<view class="tui-fab-item-box" :class="{'tui-fab-item-left':left && !right && item.imgUrl}" v-for="(item,index) in btnList"
+				 :key="index" @tap.stop="handleClick(index)">
+					<view :class="[left && !right?'tui-text-left':'tui-text-right']" v-if="item.imgUrl" :style="{fontSize:item.fontSize+'rpx',color:item.color}">{{item.text || ""}}</view>
+					<view class="tui-fab-item" :style="{width:width+'rpx',height:height+'rpx',background:item.bgColor || bgColor,borderRadius:radius}">
+						<view class="tui-fab-title" v-if="!item.imgUrl" :style="{fontSize:item.fontSize+'rpx',color:item.color}">{{item.text || ""}}</view>
+						<image :src="item.imgUrl" class="tui-fab-img" v-else :style="{width:item.imgWidth+'rpx',height:item.imgHeight+'rpx'}"></image>
+					</view>
+				</view>
+			</view>
+			<view class="tui-fab-item" :class="{'tui-active':isOpen}" :style="{width:width+'rpx',height:height+'rpx',borderRadius:radius,background:bgColor,color:color}"
+			 @tap.stop="handleClick(-1)">
+				<text class="tui-fab-icon tui-icon-plus" v-if="!custom"></text>
+				<slot></slot>
+			</view>
+		</view>
+		<view class="tui-fab-mask" :class="{'tui-visible':isOpen}" @tap="handleClickCancel"></view>
+	</view>
+</template>
+
+<script>
+	//拓展出来的按钮不应多于6个，否则违反了作为悬浮按钮的快速、高效的原则
+	export default {
+		name: "tuiFab",
+		props: {
+			//rpx 为0时值为auto
+			left: {
+				type: Number,
+				default: 0
+			},
+			//rpx 当为0时且left不为0，值为auto
+			right: {
+				type: Number,
+				default: 80
+			},
+			//rpx bottom值
+			bottom: {
+				type: Number,
+				default: 100
+			},
+			//默认按钮 宽度 rpx
+			width: {
+				type: Number,
+				default: 108
+			},
+			//默认按钮 高度 rpx
+			height: {
+				type: Number,
+				default: 108
+			},
+			//圆角值
+			radius: {
+				type: String,
+				default: "50%"
+			},
+			//默认按钮自定义内容[替换加号]
+			custom:{
+				type:Boolean,
+				default:false
+			},
+			//默认按钮背景颜色
+			bgColor: {
+				type: String,
+				default: "#5677fc"
+			},
+			//字体颜色
+			color: {
+				type: String,
+				default: "#fff"
+			},
+			//拓展按钮
+			// bgColor: "#5677fc",
+			// //图标/图片地址
+			// imgUrl: "/static/images/fab/fab_reward.png",
+			// //图片高度 rpx
+			// imgHeight: 60,
+			// //图片宽度 rpx
+			// imgWidth: 60,
+			// //名称
+			// text: "名称",
+			// //字体大小
+			// fontSize: 30,
+			// //字体颜色
+			// color: "#fff"
+			btnList: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			//点击遮罩 是否可关闭
+			maskClosable: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				isOpen: false,
+				hidden: true,
+				timer: null
+			};
+		},
+		methods: {
+			getLeft() {
+				let val = "auto"
+				if (this.left && !this.right) {
+					val = this.left + 'rpx'
+				}
+				return val
+			},
+			getRight() {
+				let val = this.right + 'rpx'
+				if (this.left && !this.right) {
+					val = "auto"
+				}
+				return val
+			},
+			handleClick: function(index) {
+				this.hidden = false
+				clearTimeout(this.timer)
+				if (index == -1 && this.btnList.length) {
+					this.isOpen = !this.isOpen
+				} else {
+					this.$emit("click", {
+						index: index
+					})
+					this.isOpen = false
+				}
+				if (!this.isOpen) {
+					this.timer = setTimeout(() => {
+						this.hidden = true
+					}, 200)
+				}
+			},
+			handleClickCancel: function() {
+				if (!this.maskClosable) return;
+				this.isOpen = false
+			}
+		},
+		beforeDestroy() {
+			clearTimeout(this.timer)
+			this.timer = null
+		}
+	}
+</script>
+
+<style scoped>
+	@font-face {
+		font-family: 'tuifab';
+		src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAREAA0AAAAABnAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEKAAAABoAAAAciPExJUdERUYAAAQIAAAAHgAAAB4AKQAKT1MvMgAAAaAAAABCAAAAVjyBSAVjbWFwAAAB9AAAAD4AAAFCAA/pvmdhc3AAAAQAAAAACAAAAAj//wADZ2x5ZgAAAkAAAABRAAAAYFkYQQNoZWFkAAABMAAAADAAAAA2Fm5OF2hoZWEAAAFgAAAAHQAAACQH3QOFaG10eAAAAeQAAAAPAAAAEAwAAANsb2NhAAACNAAAAAoAAAAKADAAAG1heHAAAAGAAAAAHwAAACABDwAobmFtZQAAApQAAAFJAAACiCnmEVVwb3N0AAAD4AAAAB8AAAAx2XRuznjaY2BkYGAAYtGolt54fpuvDNwsDCBwc1krH5xm/t/I/J+5FsjlYGACiQIAGAEKZHjaY2BkYGBu+N/AEMPCAALM/xkYGVABCwBZ4wNrAAAAeNpjYGRgYGBhkGEA0QwMTEDMBYQMDP/BfAYAC4kBOAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PhJ8JMzf8b2CIYW5gaAAKM4LkAN21DAEAAHjaY2GAABYIZgYAAIMAEAB42mNgYGBmgGAZBkYGELAB8hjBfBYGBSDNAoRA/jPh//8hpOQHqEoGRjYGGJOBkQlIMDGgAkaGYQ8AUSIHswAAAAAAAAAAAAAAMAAAeNpjYGRg/t/I/J+5lkGagYFRUVCPUYmNXVCRj1FETFxRUI7RyMxcUNGO0USN+fS/HEY5XTnGfznicnLijFPAHMYpYnJyjFvBlBgWBQBNJxKpAAAAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOWMCiTIxMbFmZiRmJ+QALXAKKAAAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAMAAQAEAAAAAgAAAAB42mNgYGBkAIKrS9Q5QPTNZa18MBoAPbcFzgAA) format('woff');
+		font-weight: normal;
+		font-style: normal;
+	}
+
+	.tui-fab-icon {
+		font-family: "tuifab" !important;
+		font-style: normal;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		padding: 10rpx;
+	}
+
+	.tui-icon-plus:before {
+		content: "\e613";
+	}
+
+	.tui-fab-box {
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+		position: fixed;
+		z-index: 99997;
+	}
+
+	.tui-fab-right {
+		align-items: flex-end;
+	}
+
+	.tui-fab-btn {
+		transform: scale(0);
+		transition: all 0.2s ease-in-out;
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.tui-fab-hidden {
+		height: 0;
+		width: 0;
+	}
+
+
+	.tui-fab-item-box {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		padding-bottom: 40rpx;
+	}
+
+	.tui-fab-item-left {
+		flex-flow: row-reverse;
+	}
+
+	.tui-fab-title {
+		width: 90%;
+		text-align: center;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.tui-text-left {
+		padding-left: 28rpx;
+	}
+
+	.tui-text-right {
+		padding-right: 28rpx;
+	}
+
+	.tui-fab-img {
+		display: block;
+	}
+
+	.tui-fab-item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
+		transition: all 0.2s linear;
+	}
+
+	.tui-radius {
+		border-radius: 50%;
+	}
+
+	.tui-active {
+		transform: rotate(135deg);
+	}
+
+	.tui-fab-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.75);
+		z-index: 99996;
+		transition: all 0.2s ease-in-out;
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.tui-visible {
+		visibility: visible;
+		opacity: 1;
+		transform: scale(1);
+	}
+</style>
diff --git a/components/thorui/tui-footer/tui-footer.vue b/components/thorui/tui-footer/tui-footer.vue
new file mode 100644
index 0000000..b0dd70d
--- /dev/null
+++ b/components/thorui/tui-footer/tui-footer.vue
@@ -0,0 +1,118 @@
+<template>
+	<view class="tui-footer-class tui-footer" :class="[fixed?'tui-fixed':'']" :style='{backgroundColor:backgroundColor}'>
+		<view class="tui-footer-link" v-if="navigate.length>0">
+			<block v-for="(item,index) in navigate" :key="index">
+				<navigator class="tui-link" hover-class="tui-link-hover" :hover-stop-propagation="true" :style="{color:(item.color || '#596d96'),fontSize:(item.size || 28)+'rpx'}"
+				 :open-type="item.type" :url="item.url" :target="item.target" :delta="item.delta" :app-id="item.appid"
+				 :path="item.path" :extra-data="item.extradata" :bindsuccess="item.bindsuccess" :bindfail="item.bindfail">{{item.text}}</navigator>
+			</block>
+		</view>
+		<view class="tui-footer-copyright" :style="{color:color,fontSize:size+'rpx'}">
+			{{copyright}}
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tuiFooter",
+		props: {
+			//type target url delta appid path extradata bindsuccess bindfail text color size
+			//链接设置  数据格式对应上面注释的属性值
+			navigate: {
+				type: Array,
+				default:function(){
+					return  []
+				}
+			},
+			//底部文本
+			copyright: {
+				type: String,
+				default: "All Rights Reserved."
+			},
+			//copyright 字体颜色
+			color: {
+				type: String,
+				default: "#A7A7A7"
+			},
+			//copyright 字体大小
+			size: {
+				type: Number,
+				default: 24
+			},
+			//footer背景颜色
+			backgroundColor: {
+				type: String,
+				default: "transparent"
+			},
+			//是否固定在底部
+			fixed: {
+				type: Boolean,
+				default: true
+			}
+		},
+		methods: {
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-footer {
+		width: 100%;
+		overflow: hidden;
+		padding: 30rpx 24rpx;
+		box-sizing: border-box;
+	}
+
+	.tui-fixed {
+		position: fixed;
+		z-index: 9999;
+		bottom: 0;
+		left: 0;
+	}
+
+	.tui-footer-link {
+		color: #596d96;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 28rpx;
+	}
+
+	.tui-link {
+		position: relative;
+		padding: 0 18rpx;
+		line-height: 1;
+	}
+
+	.tui-link::before {
+		content: " ";
+		position: absolute;
+		right: 0;
+		top: 0;
+		width: 1px;
+		bottom: 0;
+		border-right: 1px solid #d3d3d3;
+		-webkit-transform-origin: 100% 0;
+		transform-origin: 100% 0;
+		-webkit-transform: scaleX(0.5);
+		transform: scaleX(0.5);
+	}
+
+	.tui-link:last-child::before {
+		border-right: 0 !important
+	}
+
+	.tui-link-hover {
+		opacity: 0.5
+	}
+
+	.tui-footer-copyright {
+		font-size: 24rpx;
+		color: #A7A7A7;
+		line-height: 1;
+		text-align: center;
+		padding-top: 16rpx;
+		padding-bottom:env(safe-area-inset-bottom);
+	}
+</style>
diff --git a/components/thorui/tui-grid-item/tui-grid-item.vue b/components/thorui/tui-grid-item/tui-grid-item.vue
new file mode 100644
index 0000000..e0f1ea3
--- /dev/null
+++ b/components/thorui/tui-grid-item/tui-grid-item.vue
@@ -0,0 +1,147 @@
+<template>
+	<view class="tui-grid" :class="[bottomLine?'':'tui-grid-bottom',border?'':'tui-grid__unlined','tui-grid-'+(cell<2?3:cell)]" :hover-class="hover?'tui-item-hover':''"
+	 :hover-stay-time="150" :style="{backgroundColor:backgroundColor}" @tap="handleClick">
+		<view class='tui-grid-bg'>
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tuiGridItem",
+		props: {
+			cell: {
+				type: [Number,String],
+				default: 3
+			},
+			backgroundColor: {
+				type: String,
+				default: "#fff"
+			},
+			//是否有点击效果
+			hover: {
+				type: Boolean,
+				default: true
+			},
+			//是否需要底部线条
+			bottomLine: {
+				type: Boolean,
+				default: true
+			},
+			//是否需要纵向边框线条
+			border:{
+				type: Boolean,
+				default: true
+			},
+			index: {
+				type: Number,
+				default: 0
+			}
+		},
+		methods: {
+			handleClick() {
+				this.$emit('click', {
+					index: this.index
+				});
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-grid {
+		position: relative;
+		padding: 40rpx 20rpx;
+		box-sizing: border-box;
+		background: #fff;
+		float: left;
+	}
+
+	.tui-grid-2 {
+		width: 50%;
+	}
+
+	.tui-grid-3 {
+		width: 33.333333333%;
+	}
+
+	.tui-grid-4 {
+		width: 25%;
+		padding: 30rpx 20rpx !important;
+	}
+
+	.tui-grid-5 {
+		width: 20%;
+		padding: 20rpx !important;
+	}
+
+	.tui-grid-2:nth-of-type(2n)::before {
+		width: 0;
+		border-right: 0;
+	}
+
+	.tui-grid-3:nth-of-type(3n)::before {
+		width: 0;
+		border-right: 0;
+	}
+
+	.tui-grid-4:nth-of-type(4n)::before {
+		width: 0;
+		border-right: 0;
+	}
+
+	.tui-grid-5:nth-of-type(5n)::before {
+		width: 0;
+		border-right: 0;
+	}
+
+	.tui-grid::before {
+		content: " ";
+		position: absolute;
+		right: 0;
+		top: 0;
+		width: 1px;
+		bottom: 0;
+		border-right: 1px solid #eaeef1;
+		-webkit-transform-origin: 100% 0;
+		transform-origin: 100% 0;
+		-webkit-transform: scaleX(0.5);
+		transform: scaleX(0.5);
+	}
+	
+	.tui-grid__unlined::before{
+		width: 0 !important;
+		border-right: 0 !important;
+	}
+
+	.tui-grid::after {
+		content: " ";
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		height: 1px;
+		border-bottom: 1px solid #eaeef1;
+		-webkit-transform-origin: 0 100%;
+		transform-origin: 0 100%;
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+	}
+
+	.tui-grid-bottom::after {
+		height: 0 !important;
+		border-bottom: 0 !important
+	}
+
+	.tui-grid-bg {
+		position: relative;
+		padding: 0;
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	.tui-item-hover {
+		background-color: #f7f7f9 !important;
+	}
+</style>
diff --git a/components/thorui/tui-grid/tui-grid.vue b/components/thorui/tui-grid/tui-grid.vue
new file mode 100644
index 0000000..f4f189a
--- /dev/null
+++ b/components/thorui/tui-grid/tui-grid.vue
@@ -0,0 +1,44 @@
+<template>
+	<view class="tui-grids" :class="{'tui-border-top':unlined}">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"tuiGrid",
+		props: {
+			//是否去掉上线条
+			unlined: {
+				type: Boolean,
+				default: false
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-grids {
+		width: 100%;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.tui-grids::after {
+		content: " ";
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 1px;
+		border-top: 1px solid #eaeef1;
+		-webkit-transform-origin: 0 0;
+		transform-origin: 0 0;
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+	}
+
+	.tui-border-top::after {
+		border-top: 0 !important;
+	}
+</style>
diff --git a/components/thorui/tui-icon/tui-icon.vue b/components/thorui/tui-icon/tui-icon.vue
new file mode 100644
index 0000000..55a9c74
--- /dev/null
+++ b/components/thorui/tui-icon/tui-icon.vue
@@ -0,0 +1,816 @@
+<template>
+	<text class="tui-icon-class tui-icon" :class="'tui-icon-' + name" :style="{ color: color || '#999', fontSize: size + unit, fontWeight: bold ? 'bold' : 'normal',margin:margin }"
+	 @tap="handleClick"></text>
+
+</template>
+
+<script>
+	export default {
+		name: 'tuiIcon',
+		props: {
+			name: {
+				type: String,
+				default: ''
+			},
+			size: {
+				type: [Number,String],
+				default: 32
+			},
+			//px或者rpx
+			unit:{
+				type: String,
+				default: 'px'
+			},
+			color: {
+				type: String,
+				default: '#999'
+			},
+			bold: {
+				type: Boolean,
+				default: false
+			},
+			margin: {
+				type: String,
+				default: "0"
+			},
+			index: {
+				type: Number,
+				default: 0
+			}
+		},
+		methods: {
+			handleClick() {
+				this.$emit('click', {
+					index: this.index
+				});
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	@charset "UTF-8";
+
+	@font-face {
+		font-family: 'thoruiFont';
+		src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
+		font-weight: normal;
+		font-style: normal;
+	}
+
+	.tui-icon {
+		font-family: 'thoruiFont' !important;
+		font-style: normal;
+		-webkit-font-smoothing: antialiased;
+		text-align: center;
+		text-decoration: none;
+	}
+
+	.tui-icon-about:before {
+		content: '\e772';
+	}
+
+	.tui-icon-about-fill:before {
+		content: '\e771';
+	}
+
+	.tui-icon-add:before {
+		content: '\e770';
+	}
+
+	.tui-icon-add-fill:before {
+		content: '\e76f';
+	}
+
+	.tui-icon-addmessage:before {
+		content: '\e76e';
+	}
+
+	.tui-icon-addressbook:before {
+		content: '\e76d';
+	}
+
+	.tui-icon-agree:before {
+		content: '\e76c';
+	}
+
+	.tui-icon-agree-fill:before {
+		content: '\e76b';
+	}
+
+	.tui-icon-alarm:before {
+		content: '\e76a';
+	}
+
+	.tui-icon-alarm-fill:before {
+		content: '\e769';
+	}
+
+	.tui-icon-alipay:before {
+		content: '\e768';
+	}
+
+	.tui-icon-android:before {
+		content: '\e767';
+	}
+
+	.tui-icon-applets:before {
+		content: '\e766';
+	}
+
+	.tui-icon-arrowdown:before {
+		content: '\e765';
+	}
+
+	.tui-icon-arrowleft:before {
+		content: '\e764';
+	}
+
+	.tui-icon-arrowright:before {
+		content: '\e763';
+	}
+
+	.tui-icon-arrowup:before {
+		content: '\e762';
+	}
+
+	.tui-icon-attestation:before {
+		content: '\e761';
+	}
+
+	.tui-icon-back:before {
+		content: '\e760';
+	}
+
+	.tui-icon-bag:before {
+		content: '\e75f';
+	}
+
+	.tui-icon-bag-fill:before {
+		content: '\e75e';
+	}
+
+	.tui-icon-balloon:before {
+		content: '\e75d';
+	}
+
+	.tui-icon-bankcard:before {
+		content: '\e75c';
+	}
+
+	.tui-icon-bankcard-fill:before {
+		content: '\e75b';
+	}
+
+	.tui-icon-bottom:before {
+		content: '\e75a';
+	}
+
+	.tui-icon-calendar:before {
+		content: '\e759';
+	}
+
+	.tui-icon-camera:before {
+		content: '\e758';
+	}
+
+	.tui-icon-camera-fill:before {
+		content: '\e757';
+	}
+
+	.tui-icon-camera-add:before {
+		content: '\e756';
+	}
+
+	.tui-icon-card:before {
+		content: '\e755';
+	}
+
+	.tui-icon-card-fill:before {
+		content: '\e754';
+	}
+
+	.tui-icon-cart:before {
+		content: '\e753';
+	}
+
+	.tui-icon-cart-fill:before {
+		content: '\e752';
+	}
+
+	.tui-icon-category:before {
+		content: '\e751';
+	}
+
+	.tui-icon-category-fill:before {
+		content: '\e750';
+	}
+
+	.tui-icon-check:before {
+		content: '\e74f';
+	}
+
+	.tui-icon-circle:before {
+		content: '\e74e';
+	}
+
+	.tui-icon-circle-fill:before {
+		content: '\e74d';
+	}
+
+	.tui-icon-circle-selected:before {
+		content: '\e74c';
+	}
+
+	.tui-icon-clock:before {
+		content: '\e74b';
+	}
+
+	.tui-icon-clock-fill:before {
+		content: '\e74a';
+	}
+
+	.tui-icon-close:before {
+		content: '\e749';
+	}
+
+	.tui-icon-close-fill:before {
+		content: '\e748';
+	}
+
+	.tui-icon-community:before {
+		content: '\e747';
+	}
+
+	.tui-icon-community-fill:before {
+		content: '\e746';
+	}
+
+	.tui-icon-computer:before {
+		content: '\e745';
+	}
+
+	.tui-icon-computer-fill:before {
+		content: '\e744';
+	}
+
+	.tui-icon-coupon:before {
+		content: '\e743';
+	}
+
+	.tui-icon-delete:before {
+		content: '\e742';
+	}
+
+	.tui-icon-deletekey:before {
+		content: '\e741';
+	}
+
+	.tui-icon-dingtalk:before {
+		content: '\e740';
+	}
+
+	.tui-icon-dissatisfied:before {
+		content: '\e73f';
+	}
+
+	.tui-icon-down:before {
+		content: '\e73e';
+	}
+
+	.tui-icon-download:before {
+		content: '\e73d';
+	}
+
+	.tui-icon-edit:before {
+		content: '\e73c';
+	}
+
+	.tui-icon-ellipsis:before {
+		content: '\e73b';
+	}
+
+	.tui-icon-enlarge:before {
+		content: '\e73a';
+	}
+
+	.tui-icon-evaluate:before {
+		content: '\e739';
+	}
+
+	.tui-icon-exchange:before {
+		content: '\e738';
+	}
+
+	.tui-icon-explain:before {
+		content: '\e737';
+	}
+
+	.tui-icon-explain-fill:before {
+		content: '\e736';
+	}
+
+	.tui-icon-explore:before {
+		content: '\e735';
+	}
+
+	.tui-icon-explore-fill:before {
+		content: '\e734';
+	}
+
+	.tui-icon-eye:before {
+		content: '\e733';
+	}
+
+	.tui-icon-feedback:before {
+		content: '\e732';
+	}
+
+	.tui-icon-fingerprint:before {
+		content: '\e730';
+	}
+
+	.tui-icon-friendadd:before {
+		content: '\e72f';
+	}
+
+	.tui-icon-friendadd-fill:before {
+		content: '\e72e';
+	}
+
+	.tui-icon-gps:before {
+		content: '\e72d';
+	}
+
+	.tui-icon-histogram:before {
+		content: '\e72c';
+	}
+
+	.tui-icon-home:before {
+		content: '\e72b';
+	}
+
+	.tui-icon-home-fill:before {
+		content: '\e72a';
+	}
+
+	.tui-icon-house:before {
+		content: '\e729';
+	}
+
+	.tui-icon-imface:before {
+		content: '\e728';
+	}
+
+	.tui-icon-imkeyboard:before {
+		content: '\e727';
+	}
+
+	.tui-icon-immore:before {
+		content: '\e726';
+	}
+
+	.tui-icon-imvoice:before {
+		content: '\e725';
+	}
+
+	.tui-icon-ios:before {
+		content: '\e724';
+	}
+
+	.tui-icon-kefu:before {
+		content: '\e723';
+	}
+
+	.tui-icon-label:before {
+		content: '\e722';
+	}
+
+	.tui-icon-label-fill:before {
+		content: '\e721';
+	}
+
+	.tui-icon-like:before {
+		content: '\e720';
+	}
+
+	.tui-icon-like-fill:before {
+		content: '\e71f';
+	}
+
+	.tui-icon-link:before {
+		content: '\e71e';
+	}
+
+	.tui-icon-listview:before {
+		content: '\e71d';
+	}
+
+	.tui-icon-loading:before {
+		content: '\e71c';
+	}
+
+	.tui-icon-location:before {
+		content: '\e71b';
+	}
+
+	.tui-icon-mail:before {
+		content: '\e71a';
+	}
+
+	.tui-icon-mail-fill:before {
+		content: '\e719';
+	}
+
+	.tui-icon-manage:before {
+		content: '\e718';
+	}
+
+	.tui-icon-manage-fill:before {
+		content: '\e717';
+	}
+
+	.tui-icon-member:before {
+		content: '\e716';
+	}
+
+	.tui-icon-member-fill:before {
+		content: '\e715';
+	}
+
+	.tui-icon-message:before {
+		content: '\e714';
+	}
+
+	.tui-icon-message-fill:before {
+		content: '\e713';
+	}
+
+	.tui-icon-mobile:before {
+		content: '\e712';
+	}
+
+	.tui-icon-moments:before {
+		content: '\e711';
+	}
+
+	.tui-icon-more:before {
+		content: '\e710';
+	}
+
+	.tui-icon-more-fill:before {
+		content: '\e70f';
+	}
+
+	.tui-icon-narrow:before {
+		content: '\e70e';
+	}
+
+	.tui-icon-news:before {
+		content: '\e70d';
+	}
+
+	.tui-icon-news-fill:before {
+		content: '\e70c';
+	}
+
+	.tui-icon-nodata:before {
+		content: '\e70b';
+	}
+
+	.tui-icon-notice:before {
+		content: '\e699';
+	}
+
+	.tui-icon-notice-fill:before {
+		content: '\e698';
+	}
+
+	.tui-icon-offline:before {
+		content: '\e697';
+	}
+
+	.tui-icon-offline-fill:before {
+		content: '\e696';
+	}
+
+	.tui-icon-oppose:before {
+		content: '\e695';
+	}
+
+	.tui-icon-oppose-fill:before {
+		content: '\e694';
+	}
+
+	.tui-icon-order:before {
+		content: '\e693';
+	}
+
+	.tui-icon-partake:before {
+		content: '\e692';
+	}
+
+	.tui-icon-people:before {
+		content: '\e691';
+	}
+
+	.tui-icon-people-fill:before {
+		content: '\e690';
+	}
+
+	.tui-icon-pic:before {
+		content: '\e68f';
+	}
+
+	.tui-icon-pic-fill:before {
+		content: '\e68e';
+	}
+
+	.tui-icon-picture:before {
+		content: '\e68d';
+	}
+
+	.tui-icon-pie:before {
+		content: '\e68c';
+	}
+
+	.tui-icon-play:before {
+		content: '\e68b';
+	}
+
+	.tui-icon-plus:before {
+		content: '\e689';
+	}
+
+	.tui-icon-polygonal:before {
+		content: '\e688';
+	}
+
+	.tui-icon-position:before {
+		content: '\e687';
+	}
+
+	.tui-icon-position-fill:before {
+		content: '\e686';
+	}
+
+	.tui-icon-pwd:before {
+		content: '\e685';
+	}
+
+	.tui-icon-qq:before {
+		content: '\e684';
+	}
+
+	.tui-icon-qrcode:before {
+		content: '\e682';
+	}
+
+	.tui-icon-redpacket:before {
+		content: '\e681';
+	}
+
+	.tui-icon-redpacket-fill:before {
+		content: '\e680';
+	}
+
+	.tui-icon-reduce:before {
+		content: '\e67f';
+	}
+
+	.tui-icon-refresh:before {
+		content: '\e67e';
+	}
+
+	.tui-icon-revoke:before {
+		content: '\e67d';
+	}
+
+	.tui-icon-satisfied:before {
+		content: '\e67c';
+	}
+
+	.tui-icon-screen:before {
+		content: '\e67b';
+	}
+
+	.tui-icon-search:before {
+		content: '\e67a';
+	}
+
+	.tui-icon-search-2:before {
+		content: '\e679';
+	}
+
+	.tui-icon-send:before {
+		content: '\e678';
+	}
+
+	.tui-icon-service:before {
+		content: '\e677';
+	}
+
+	.tui-icon-service-fill:before {
+		content: '\e676';
+	}
+
+	.tui-icon-setup:before {
+		content: '\e675';
+	}
+
+	.tui-icon-setup-fill:before {
+		content: '\e674';
+	}
+
+	.tui-icon-share:before {
+		content: '\e673';
+	}
+
+	.tui-icon-share-fill:before {
+		content: '\e672';
+	}
+
+	.tui-icon-shield:before {
+		content: '\e671';
+	}
+
+	.tui-icon-shop:before {
+		content: '\e670';
+	}
+
+	.tui-icon-shop-fill:before {
+		content: '\e66f';
+	}
+
+	.tui-icon-shut:before {
+		content: '\e66e';
+	}
+
+	.tui-icon-signin:before {
+		content: '\e66d';
+	}
+
+	.tui-icon-sina:before {
+		content: '\e66c';
+	}
+
+	.tui-icon-skin:before {
+		content: '\e66b';
+	}
+
+	.tui-icon-soso:before {
+		content: '\e669';
+	}
+
+	.tui-icon-square:before {
+		content: '\e668';
+	}
+
+	.tui-icon-square-fill:before {
+		content: '\e667';
+	}
+
+	.tui-icon-square-selected:before {
+		content: '\e666';
+	}
+
+	.tui-icon-star:before {
+		content: '\e665';
+	}
+
+	.tui-icon-star-fill:before {
+		content: '\e664';
+	}
+
+	.tui-icon-strategy:before {
+		content: '\e663';
+	}
+
+	.tui-icon-sweep:before {
+		content: '\e662';
+	}
+
+	.tui-icon-time:before {
+		content: '\e661';
+	}
+
+	.tui-icon-time-fill:before {
+		content: '\e660';
+	}
+
+	.tui-icon-todown:before {
+		content: '\e65f';
+	}
+
+	.tui-icon-toleft:before {
+		content: '\e65e';
+	}
+
+	.tui-icon-tool:before {
+		content: '\e65d';
+	}
+
+	.tui-icon-top:before {
+		content: '\e65c';
+	}
+
+	.tui-icon-toright:before {
+		content: '\e65b';
+	}
+
+	.tui-icon-towardsleft:before {
+		content: '\e65a';
+	}
+
+	.tui-icon-towardsright:before {
+		content: '\e659';
+	}
+
+	.tui-icon-towardsright-fill:before {
+		content: '\e658';
+	}
+
+	.tui-icon-transport:before {
+		content: '\e657';
+	}
+
+	.tui-icon-transport-fill:before {
+		content: '\e656';
+	}
+
+	.tui-icon-turningdown:before {
+		content: '\e654';
+	}
+
+	.tui-icon-turningleft:before {
+		content: '\e653';
+	}
+
+	.tui-icon-turningright:before {
+		content: '\e652';
+	}
+
+	.tui-icon-turningup:before {
+		content: '\e651';
+	}
+
+	.tui-icon-unreceive:before {
+		content: '\e650';
+	}
+
+	.tui-icon-unseen:before {
+		content: '\e64f';
+	}
+
+	.tui-icon-up:before {
+		content: '\e64e';
+	}
+
+	.tui-icon-upload:before {
+		content: '\e64c';
+	}
+
+	.tui-icon-video:before {
+		content: '\e64b';
+	}
+
+	.tui-icon-voice:before {
+		content: '\e649';
+	}
+
+	.tui-icon-voice-fill:before {
+		content: '\e648';
+	}
+
+	.tui-icon-voipphone:before {
+		content: '\e647';
+	}
+
+	.tui-icon-wallet:before {
+		content: '\e646';
+	}
+
+	.tui-icon-warning:before {
+		content: '\e645';
+	}
+
+	.tui-icon-wealth:before {
+		content: '\e644';
+	}
+
+	.tui-icon-wealth-fill:before {
+		content: '\e643';
+	}
+
+	.tui-icon-weather:before {
+		content: '\e642';
+	}
+
+	.tui-icon-wechat:before {
+		content: '\e641';
+	}
+
+	.tui-icon-wifi:before {
+		content: '\e640';
+	}
+</style>
diff --git a/components/thorui/tui-image-cropper/tui-image-cropper.vue b/components/thorui/tui-image-cropper/tui-image-cropper.vue
new file mode 100644
index 0000000..523f57a
--- /dev/null
+++ b/components/thorui/tui-image-cropper/tui-image-cropper.vue
@@ -0,0 +1,1030 @@
+<template>
+	<view class="tui-container" @touchmove.stop.prevent="stop">
+		<view class="tui-image-cropper" @touchend="cutTouchEnd" @touchstart="cutTouchStart" @touchmove="cutTouchMove">
+			<view class="tui-content">
+				<view class="tui-content-top tui-bg-transparent" :style="{ height: cutY + 'px', transitionProperty: cutAnimation ? '' : 'background' }"></view>
+				<view class="tui-content-middle" :style="{ height: canvasHeight + 'px' }">
+					<view class="tui-bg-transparent" :style="{ width: cutX + 'px', transitionProperty: cutAnimation ? '' : 'background' }"></view>
+					<view class="tui-cropper-box" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', borderColor: borderColor, transitionProperty: cutAnimation ? '' : 'background' }">
+						<view v-for="(item, index) in 4" :key="index" class="tui-edge" :class="[`tui-${index < 2 ? 'top' : 'bottom'}-${index === 0 || index === 2 ? 'left' : 'right'}`]"
+						 :style="{
+								width: edgeWidth,
+								height: edgeWidth,
+								borderColor: edgeColor,
+								borderWidth: edgeBorderWidth,
+								left: index === 0 || index === 2 ? `-${edgeOffsets}` : 'auto',
+								right: index === 1 || index === 3 ? `-${edgeOffsets}` : 'auto',
+								top: index < 2 ? `-${edgeOffsets}` : 'auto',
+								bottom: index > 1 ? `-${edgeOffsets}` : 'auto'
+							}"></view>
+					</view>
+					<view class="tui-flex-auto tui-bg-transparent" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
+				</view>
+				<view class="tui-flex-auto tui-bg-transparent" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
+			</view>
+			<image @load="imageLoad" @error="imageLoad" @touchstart="start" @touchmove="move" @touchend="end" :style="{
+					width: imgWidth ? imgWidth + 'px' : 'auto',
+					height: imgHeight ? imgHeight + 'px' : 'auto',
+					transform: imgTransform,
+					transitionDuration: (cutAnimation ? 0.35 : 0) + 's'
+				}"
+			 class="tui-cropper-image" :src="imageUrl" v-if="imageUrl" mode="widthFix"></image>
+		</view>
+		<canvas canvas-id="tui-image-cropper" id="tui-image-cropper" :disable-scroll="true" :style="{ width: CROPPER_WIDTH * scaleRatio + 'px', height: CROPPER_HEIGHT * scaleRatio + 'px' }"
+		 class="tui-cropper-canvas"></canvas>
+		<view class="tui-cropper-tabbar" v-if="!custom">
+			<view class="tui-op-btn" @tap.stop="back">取消</view>
+			<image :src="rotateImg" class="tui-rotate-img" @tap="setAngle"></image>
+			<view class="tui-op-btn" @tap.stop="getImage">完成</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * 注意：组件中使用的图片地址，将文件复制到自己项目中
+	 * 如果图片位置与组件同级，编译成小程序时图片会丢失
+	 * 拷贝static下整个components文件夹
+	 *也可直接转成base64（不建议）
+	 * */
+	export default {
+		name: 'tuiImageCropper',
+		props: {
+			//图片路径
+			imageUrl: {
+				type: String,
+				default: ''
+			},
+			/*
+				 默认正方形，可修改大小控制比例
+				 裁剪框高度 px
+				*/
+			height: {
+				type: Number,
+				default: 280
+			},
+			//裁剪框宽度 px
+			width: {
+				type: Number,
+				default: 280
+			},
+			//裁剪框最小宽度 px
+			minWidth: {
+				type: Number,
+				default: 100
+			},
+			//裁剪框最小高度 px
+			minHeight: {
+				type: Number,
+				default: 100
+			},
+			//裁剪框最大宽度 px
+			maxWidth: {
+				type: Number,
+				default: 360
+			},
+			//裁剪框最大高度 px
+			maxHeight: {
+				type: Number,
+				default: 360
+			},
+			//裁剪框border颜色
+			borderColor: {
+				type: String,
+				default: 'rgba(255,255,255,0.1)'
+			},
+			//裁剪框边缘线颜色
+			edgeColor: {
+				type: String,
+				default: '#FFFFFF'
+			},
+			//裁剪框边缘线宽度 w=h
+			edgeWidth: {
+				type: String,
+				default: '34rpx'
+			},
+			//裁剪框边缘线border宽度
+			edgeBorderWidth: {
+				type: String,
+				default: '6rpx'
+			},
+			//偏移距离，根据edgeBorderWidth进行调整
+			edgeOffsets: {
+				type: String,
+				default: '6rpx'
+			},
+			/**
+			 * 如果宽度和高度都为true则裁剪框禁止拖动
+			 * 裁剪框宽度锁定
+			 */
+			lockWidth: {
+				type: Boolean,
+				default: false
+			},
+			//裁剪框高度锁定
+			lockHeight: {
+				type: Boolean,
+				default: false
+			},
+			//锁定裁剪框比例（放大或缩小）
+			lockRatio: {
+				type: Boolean,
+				default: false
+			},
+			//生成的图片尺寸相对剪裁框的比例
+			scaleRatio: {
+				type: Number,
+				default: 2
+			},
+			//图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理
+			quality: {
+				type: Number,
+				default: 0.8
+			},
+			//图片旋转角度
+			rotateAngle: {
+				type: Number,
+				default: 0
+			},
+			//图片最小缩放比
+			minScale: {
+				type: Number,
+				default: 0.5
+			},
+			//图片最大缩放比
+			maxScale: {
+				type: Number,
+				default: 2
+			},
+			//是否禁用触摸旋转（为false则可以触摸转动图片，limitMove为false生效）
+			disableRotate: {
+				type: Boolean,
+				default: true
+			},
+			//是否限制移动范围(剪裁框只能在图片内,为true不可触摸转动图片)
+			limitMove: {
+				type: Boolean,
+				default: true
+			},
+			//自定义操作栏（为true时隐藏底部操作栏）
+			custom: {
+				type: Boolean,
+				default: false
+			},
+			//值发生改变开始裁剪（custom为true时生效）
+			startCutting: {
+				type: [Number, Boolean],
+				default: 0
+			},
+			/**
+			 * 是否返回base64(H5端默认base64)
+			 * 支持平台：App，微信小程序，支付宝小程序,H5(默认url就是base64)
+			 **/
+			isBase64: {
+				type: Boolean,
+				default: false
+			},
+			//裁剪时是否显示loadding
+			loadding: {
+				type: Boolean,
+				default: true
+			},
+			//旋转icon
+			rotateImg: {
+				type: String,
+				default: '/static/components/cropper/img_rotate.png'
+			}
+		},
+		data() {
+			return {
+				MOVE_THROTTLE: null, //触摸移动节流setTimeout
+				MOVE_THROTTLE_FLAG: true, //节流标识
+				TIME_CUT_CENTER: null,
+				CROPPER_WIDTH: 200, //裁剪框宽
+				CROPPER_HEIGHT: 200, //裁剪框高
+				CUT_START: null,
+				cutX: 0, //画布x轴起点
+				cutY: 0, //画布y轴起点0
+				touchRelative: [{
+					x: 0,
+					y: 0
+				}], //手指或鼠标和图片中心的相对位置
+				flagCutTouch: false, //是否是拖动裁剪框
+				hypotenuseLength: 0, //双指触摸时斜边长度
+				flagEndTouch: false, //是否结束触摸
+				canvasWidth: 0,
+				canvasHeight: 0,
+				imgWidth: 0, //图片宽度
+				imgHeight: 0, //图片高度
+				scale: 1, //图片缩放比
+				angle: 0, //图片旋转角度
+				cutAnimation: false, //是否开启图片和裁剪框过渡
+				cutAnimationTime: null,
+				imgTop: 0, //图片上边距
+				imgLeft: 0, //图片左边距
+				ctx: null,
+				sysInfo: null
+			};
+		},
+		computed: {
+			imgTransform: function() {
+				return `translate3d(${this.imgLeft - this.imgWidth / 2}px,${this.imgTop - this.imgHeight / 2}px,0) scale(${this.scale}) rotate(${this.angle}deg)`;
+			}
+		},
+		watch: {
+			imageUrl(val, oldVal) {
+				this.imageReset();
+				this.showLoading();
+				uni.getImageInfo({
+					src: val,
+					success: res => {
+						//计算图片尺寸
+						this.imgComputeSize(res.width, res.height);
+						if (this.limitMove) {
+							//限制移动，不留空白处理
+							this.imgMarginDetectionScale();
+						}
+					},
+					fail: err => {
+						this.imgComputeSize();
+						if (this.limitMove) {
+							this.imgMarginDetectionScale();
+						}
+					}
+				});
+			},
+			//监听截取框宽高变化
+			canvasWidth(val) {
+				if (val < this.minWidth) {
+					this.canvasWidth = this.minWidth;
+				}
+				this.computeCutSize();
+			},
+			canvasHeight(val) {
+				if (val < this.minHeight) {
+					this.canvasHeight = this.minHeight;
+				}
+				this.computeCutSize();
+			},
+			rotateAngle(val) {
+				this.cutAnimation = true;
+				this.angle = val;
+			},
+			angle(val) {
+				this.moveStop();
+				if (this.limitMove && val % 90) {
+					this.angle = Math.round(val / 90) * 90;
+				}
+				this.imgMarginDetectionScale();
+			},
+			cutAnimation(val) {
+				//开启过渡260毫秒之后自动关闭
+				clearTimeout(this.cutAnimationTime);
+				if (val) {
+					this.cutAnimationTime = setTimeout(() => {
+						this.cutAnimation = false;
+					}, 260);
+				}
+			},
+			limitMove(val) {
+				if (val) {
+					if (this.angle % 90) {
+						this.angle = Math.round(this.angle / 90) * 90;
+					}
+					this.imgMarginDetectionScale();
+				}
+			},
+			cutY(value) {
+				this.cutDetectionPosition();
+			},
+			cutX(value) {
+				this.cutDetectionPosition();
+			},
+			startCutting(val) {
+				if (this.custom && val) {
+					this.getImage();
+				}
+			}
+		},
+		mounted() {
+			this.sysInfo = uni.getSystemInfoSync();
+			this.imgTop = this.sysInfo.windowHeight / 2;
+			this.imgLeft = this.sysInfo.windowWidth / 2;
+			this.CROPPER_WIDTH = this.width;
+			this.CROPPER_HEIGHT = this.height;
+			this.canvasHeight = this.height;
+			this.canvasWidth = this.width;
+			this.ctx = uni.createCanvasContext('tui-image-cropper', this);
+			this.setCutCenter();
+			//设置裁剪框大小>设置图片尺寸>绘制canvas
+			this.computeCutSize();
+			//检查裁剪框是否在范围内
+			this.cutDetectionPosition();
+			setTimeout(() => {
+				this.$emit('ready', {});
+			}, 200);
+		},
+		methods: {
+			//网络图片转成本地文件[同步执行]
+			async getLocalImage(url) {
+				return await new Promise((resolve, reject) => {
+					uni.downloadFile({
+						url: url,
+						success: res => {
+							resolve(res.tempFilePath);
+						},
+						fail: res => {
+							reject(false)
+						}
+					})
+				})
+			},
+			//返回裁剪后图片信息
+			getImage() {
+				if (!this.imageUrl) {
+					uni.showToast({
+						title: '请选择图片',
+						icon: 'none'
+					});
+					return;
+				}
+				this.loadding && this.showLoading();
+				let draw = async () => {
+					//图片实际大小
+					let imgWidth = this.imgWidth * this.scale * this.scaleRatio;
+					let imgHeight = this.imgHeight * this.scale * this.scaleRatio;
+					//canvas和图片的相对距离
+					let xpos = this.imgLeft - this.cutX;
+					let ypos = this.imgTop - this.cutY;
+					//旋转画布
+					this.ctx.translate(xpos * this.scaleRatio, ypos * this.scaleRatio);
+					this.ctx.rotate((this.angle * Math.PI) / 180);
+					let imgUrl = this.imageUrl;
+					// #ifdef APP-PLUS || MP-WEIXIN
+					if (~this.imageUrl.indexOf('https:')) {
+						imgUrl = await this.getLocalImage(this.imageUrl)
+					}
+					// #endif
+					this.ctx.drawImage(imgUrl, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight);
+					this.ctx.draw(false, () => {
+						let params = {
+							width: this.canvasWidth * this.scaleRatio,
+							height: Math.round(this.canvasHeight * this.scaleRatio),
+							destWidth: this.canvasWidth * this.scaleRatio,
+							destHeight: Math.round(this.canvasHeight) * this.scaleRatio,
+							fileType: 'png',
+							quality: this.quality
+						};
+						let data = {
+							url: '',
+							base64: '',
+							width: this.canvasWidth * this.scaleRatio,
+							height: this.canvasHeight * this.scaleRatio
+						};
+						// #ifdef MP-ALIPAY
+
+						if (this.isBase64) {
+							this.ctx.toDataURL(params).then(dataURL => {
+								data.base64 = dataURL;
+								this.loadding && uni.hideLoading();
+								this.$emit('cropper', data);
+							});
+						} else {
+							this.ctx.toTempFilePath({
+								...params,
+								success: res => {
+									data.url = res.tempFilePath;
+									this.loadding && uni.hideLoading();
+									this.$emit('cropper', data);
+								}
+							});
+						}
+						// #endif
+
+						// #ifndef MP-ALIPAY
+						// #ifdef MP-BAIDU || MP-TOUTIAO || H5
+						this.isBase64 = false;
+						// #endif
+						if (this.isBase64) {
+							uni.canvasGetImageData({
+								canvasId: 'tui-image-cropper',
+								x: 0,
+								y: 0,
+								width: this.canvasWidth * this.scaleRatio,
+								height: Math.round(this.canvasHeight * this.scaleRatio),
+								success: res => {
+									const arrayBuffer = new Uint8Array(res.data);
+									const base64 = uni.arrayBufferToBase64(arrayBuffer);
+									data.base64 = base64;
+									this.loadding && uni.hideLoading();
+									this.$emit('cropper', data);
+								}
+							},this);
+						} else {
+							uni.canvasToTempFilePath({
+									...params,
+									canvasId: 'tui-image-cropper',
+									success: res => {
+										data.url = res.tempFilePath;
+										// #ifdef H5
+										data.base64 = res.tempFilePath;
+										// #endif
+										this.loadding && uni.hideLoading();
+										this.$emit('cropper', data);
+									},
+									fail(res) {
+										console.log(res);
+									}
+								},
+								this
+							);
+						}
+						// #endif
+					});
+				};
+				if (this.CROPPER_WIDTH != this.canvasWidth || this.CROPPER_HEIGHT != this.canvasHeight) {
+					this.CROPPER_WIDTH = this.canvasWidth;
+					this.CROPPER_HEIGHT = this.canvasHeight;
+					this.ctx.draw();
+					this.$nextTick(() => {
+						setTimeout(() => {
+							draw();
+						}, 100);
+					});
+				} else {
+					draw();
+				}
+			},
+			/**
+			 * 设置剪裁框和图片居中
+			 */
+			setCutCenter() {
+				let sys = this.sysInfo || uni.getSystemInfoSync();
+				let cutY = (sys.windowHeight - this.canvasHeight) * 0.5;
+				let cutX = (sys.windowWidth - this.canvasWidth) * 0.5;
+				//顺序不能变
+				this.imgTop = this.imgTop - this.cutY + cutY;
+				this.cutY = cutY; //截取的框上边距
+				this.imgLeft = this.imgLeft - this.cutX + cutX;
+				this.cutX = cutX; //截取的框左边距
+			},
+			imageReset() {
+				// this.cutAnimation = true;
+				this.scale = 1;
+				this.angle = 0;
+				let sys = this.sysInfo || uni.getSystemInfoSync();
+				this.imgTop = sys.windowHeight / 2;
+				this.imgLeft = sys.windowWidth / 2;
+			},
+			imageLoad(e) {
+				this.imageReset();
+				uni.hideLoading();
+				this.$emit('imageLoad', {});
+			},
+			//检测剪裁框位置是否在允许的范围内(屏幕内)
+			cutDetectionPosition() {
+				let cutDetectionPositionTop = () => {
+						//检测上边距是否在范围内
+						if (this.cutY < 0) {
+							this.cutY = 0;
+						}
+						if (this.cutY > this.sysInfo.windowHeight - this.canvasHeight) {
+							this.cutY = this.sysInfo.windowHeight - this.canvasHeight;
+						}
+					},
+					cutDetectionPositionLeft = () => {
+						//检测左边距是否在范围内
+						if (this.cutX < 0) {
+							this.cutX = 0;
+						}
+						if (this.cutX > this.sysInfo.windowWidth - this.canvasWidth) {
+							this.cutX = this.sysInfo.windowWidth - this.canvasWidth;
+						}
+					};
+				//裁剪框坐标处理（如果只写一个参数则另一个默认为0，都不写默认居中）
+				if (this.cutY == null && this.cutX == null) {
+					let cutY = (this.sysInfo.windowHeight - this.canvasHeight) * 0.5;
+					let cutX = (this.sysInfo.windowWidth - this.canvasWidth) * 0.5;
+					this.cutY = cutY; //截取的框上边距
+					this.cutX = cutX; //截取的框左边距
+				} else if (this.cutY != null && this.cutX != null) {
+					cutDetectionPositionTop();
+					cutDetectionPositionLeft();
+				} else if (this.cutY != null && this.cutX == null) {
+					cutDetectionPositionTop();
+					this.cutX = (this.sysInfo.windowWidth - this.canvasWidth) / 2;
+				} else if (this.cutY == null && this.cutX != null) {
+					cutDetectionPositionLeft();
+					this.cutY = (this.sysInfo.windowHeight - this.canvasHeight) / 2;
+				}
+			},
+			/**
+			 * 图片边缘检测-位置
+			 */
+			imgMarginDetectionPosition(scale) {
+				if (!this.limitMove) return;
+				let left = this.imgLeft;
+				let top = this.imgTop;
+				scale = scale || this.scale;
+				let imgWidth = this.imgWidth;
+				let imgHeight = this.imgHeight;
+				if ((this.angle / 90) % 2) {
+					imgWidth = this.imgHeight;
+					imgHeight = this.imgWidth;
+				}
+				left = this.cutX + (imgWidth * scale) / 2 >= left ? left : this.cutX + (imgWidth * scale) / 2;
+				left = this.cutX + this.canvasWidth - (imgWidth * scale) / 2 <= left ? left : this.cutX + this.canvasWidth - (
+					imgWidth * scale) / 2;
+				top = this.cutY + (imgHeight * scale) / 2 >= top ? top : this.cutY + (imgHeight * scale) / 2;
+				top = this.cutY + this.canvasHeight - (imgHeight * scale) / 2 <= top ? top : this.cutY + this.canvasHeight - (
+					imgHeight * scale) / 2;
+				this.imgLeft = left;
+				this.imgTop = top;
+				this.scale = scale;
+			},
+			/**
+			 * 图片边缘检测-缩放
+			 */
+			imgMarginDetectionScale(scale) {
+				if (!this.limitMove) return;
+				scale = scale || this.scale;
+				let imgWidth = this.imgWidth;
+				let imgHeight = this.imgHeight;
+				if ((this.angle / 90) % 2) {
+					imgWidth = this.imgHeight;
+					imgHeight = this.imgWidth;
+				}
+				if (imgWidth * scale < this.canvasWidth) {
+					scale = this.canvasWidth / imgWidth;
+				}
+				if (imgHeight * scale < this.canvasHeight) {
+					scale = Math.max(scale, this.canvasHeight / imgHeight);
+				}
+				this.imgMarginDetectionPosition(scale);
+			},
+			/**
+			 * 计算图片尺寸
+			 */
+			imgComputeSize(width, height) {
+				//默认按图片最小边 = 对应裁剪框尺寸
+				let imgWidth = width,
+					imgHeight = height;
+				if (imgWidth && imgHeight) {
+					if (imgWidth / imgHeight > (this.canvasWidth || this.width) / (this.canvasHeight || this.height)) {
+						imgHeight = this.canvasHeight || this.height;
+						imgWidth = (width / height) * imgHeight;
+					} else {
+						imgWidth = this.canvasWidth || this.width;
+						imgHeight = (height / width) * imgWidth;
+					}
+				} else {
+					let sys = this.sysInfo || uni.getSystemInfoSync();
+					imgWidth = sys.windowWidth;
+					imgHeight = 0;
+				}
+				this.imgWidth = imgWidth;
+				this.imgHeight = imgHeight;
+			},
+			//改变截取框大小
+			computeCutSize() {
+				if (this.canvasWidth > this.sysInfo.windowWidth) {
+					this.canvasWidth = this.sysInfo.windowWidth;
+				} else if (this.canvasWidth + this.cutX > this.sysInfo.windowWidth) {
+					this.cutX = this.sysInfo.windowWidth - this.cutX;
+				}
+				if (this.canvasHeight > this.sysInfo.windowHeight) {
+					this.canvasHeight = this.sysInfo.windowHeight;
+				} else if (this.canvasHeight + this.cutY > this.sysInfo.windowHeight) {
+					this.cutY = this.sysInfo.windowHeight - this.cutY;
+				}
+			},
+			//开始触摸
+			start(e) {
+				this.flagEndTouch = false;
+				if (e.touches.length == 1) {
+					//单指拖动
+					this.touchRelative[0] = {
+						x: e.touches[0].clientX - this.imgLeft,
+						y: e.touches[0].clientY - this.imgTop
+					};
+				} else {
+					//双指放大
+					let width = Math.abs(e.touches[0].clientX - e.touches[1].clientX);
+					let height = Math.abs(e.touches[0].clientY - e.touches[1].clientY);
+					this.touchRelative = [{
+							x: e.touches[0].clientX - this.imgLeft,
+							y: e.touches[0].clientY - this.imgTop
+						},
+						{
+							x: e.touches[1].clientX - this.imgLeft,
+							y: e.touches[1].clientY - this.imgTop
+						}
+					];
+					this.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+				}
+			},
+			moveThrottle() {
+				if (this.sysInfo.platform == 'android') {
+					clearTimeout(this.MOVE_THROTTLE);
+					this.MOVE_THROTTLE = setTimeout(() => {
+						this.MOVE_THROTTLE_FLAG = true;
+					}, 800 / 40);
+					return this.MOVE_THROTTLE_FLAG;
+				} else {
+					this.MOVE_THROTTLE_FLAG = true;
+				}
+			},
+			move(e) {
+				if (this.flagEndTouch || !this.MOVE_THROTTLE_FLAG) return;
+				this.MOVE_THROTTLE_FLAG = false;
+				this.moveThrottle();
+				this.moveDuring();
+				if (e.touches.length == 1) {
+					//单指拖动
+					let left = e.touches[0].clientX - this.touchRelative[0].x,
+						top = e.touches[0].clientY - this.touchRelative[0].y;
+					//图像边缘检测,防止截取到空白
+					this.imgLeft = left;
+					this.imgTop = top;
+					this.imgMarginDetectionPosition();
+				} else {
+					//双指放大
+					let width = Math.abs(e.touches[0].clientX - e.touches[1].clientX),
+						height = Math.abs(e.touches[0].clientY - e.touches[1].clientY),
+						hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)),
+						scale = this.scale * (hypotenuse / this.hypotenuseLength),
+						current_deg = 0;
+					scale = scale <= this.minScale ? this.minScale : scale;
+					scale = scale >= this.maxScale ? this.maxScale : scale;
+					//图像边缘检测,防止截取到空白
+					// this.scale = scale;
+					this.imgMarginDetectionScale(scale);
+					//双指旋转(如果没禁用旋转)
+					let touchRelative = [{
+							x: e.touches[0].clientX - this.imgLeft,
+							y: e.touches[0].clientY - this.imgTop
+						},
+						{
+							x: e.touches[1].clientX - this.imgLeft,
+							y: e.touches[1].clientY - this.imgTop
+						}
+					];
+					if (!this.disableRotate) {
+						let first_atan = (180 / Math.PI) * Math.atan2(touchRelative[0].y, touchRelative[0].x);
+						let first_atan_old = (180 / Math.PI) * Math.atan2(this.touchRelative[0].y, this.touchRelative[0].x);
+						let second_atan = (180 / Math.PI) * Math.atan2(touchRelative[1].y, touchRelative[1].x);
+						let second_atan_old = (180 / Math.PI) * Math.atan2(this.touchRelative[1].y, this.touchRelative[1].x);
+						//当前旋转的角度
+						let first_deg = first_atan - first_atan_old,
+							second_deg = second_atan - second_atan_old;
+						if (first_deg != 0) {
+							current_deg = first_deg;
+						} else if (second_deg != 0) {
+							current_deg = second_deg;
+						}
+					}
+					this.touchRelative = touchRelative;
+					this.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+					//更新视图
+					this.angle = this.angle + current_deg;
+					this.scale = this.scale;
+				}
+			},
+			//结束操作
+			end(e) {
+				this.flagEndTouch = true;
+				this.moveStop();
+			},
+			//裁剪框处理
+			cutTouchMove(e) {
+				if (this.flagCutTouch && this.MOVE_THROTTLE_FLAG) {
+					if (this.lockRatio && (this.lockWidth || this.lockHeight)) return;
+					//节流
+					this.MOVE_THROTTLE_FLAG = false;
+					this.moveThrottle();
+					let width = this.canvasWidth,
+						height = this.canvasHeight,
+						cutY = this.cutY,
+						cutX = this.cutX,
+						size_correct = () => {
+							width = width <= this.maxWidth ? (width >= this.minWidth ? width : this.minWidth) : this.maxWidth;
+							height = height <= this.maxHeight ? (height >= this.minHeight ? height : this.minHeight) : this.maxHeight;
+						},
+						size_inspect = () => {
+							if ((width > this.maxWidth || width < this.minWidth || height > this.maxHeight || height < this.minHeight) &&
+								this.lockRatio) {
+								size_correct();
+								return false;
+							} else {
+								size_correct();
+								return true;
+							}
+						};
+					height = this.CUT_START.height + (this.CUT_START.corner > 1 && this.CUT_START.corner < 4 ? 1 : -1) * (this.CUT_START
+						.y - e.touches[0].clientY);
+					switch (this.CUT_START.corner) {
+						case 1:
+							width = this.CUT_START.width - this.CUT_START.x + e.touches[0].clientX;
+							if (this.lockRatio) {
+								height = width / (this.canvasWidth / this.canvasHeight);
+							}
+							if (!size_inspect()) return;
+							break;
+						case 2:
+							width = this.CUT_START.width - this.CUT_START.x + e.touches[0].clientX;
+							if (this.lockRatio) {
+								height = width / (this.canvasWidth / this.canvasHeight);
+							}
+							if (!size_inspect()) return;
+							cutY = this.CUT_START.cutY - (height - this.CUT_START.height);
+							break;
+						case 3:
+							width = this.CUT_START.width + this.CUT_START.x - e.touches[0].clientX;
+							if (this.lockRatio) {
+								height = width / (this.canvasWidth / this.canvasHeight);
+							}
+							if (!size_inspect()) return;
+							cutY = this.CUT_START.cutY - (height - this.CUT_START.height);
+							cutX = this.CUT_START.cutX - (width - this.CUT_START.width);
+							break;
+						case 4:
+							width = this.CUT_START.width + this.CUT_START.x - e.touches[0].clientX;
+							if (this.lockRatio) {
+								height = width / (this.canvasWidth / this.canvasHeight);
+							}
+							if (!size_inspect()) return;
+							cutX = this.CUT_START.cutX - (width - this.CUT_START.width);
+							break;
+						default:
+							break;
+					}
+					if (!this.lockWidth && !this.lockHeight) {
+						this.canvasWidth = width;
+						this.cutX = cutX;
+						this.canvasHeight = height;
+						this.cutY = cutY;
+					} else if (!this.lockWidth) {
+						this.canvasWidth = width;
+						this.cutX = cutX;
+					} else if (!this.lockHeight) {
+						this.canvasHeight = height;
+						this.cutY = cutY;
+					}
+					this.imgMarginDetectionScale();
+				}
+			},
+			cutTouchStart(e) {
+				let currentX = e.touches[0].clientX;
+				let currentY = e.touches[0].clientY;
+
+				/*
+				 * (右下-1 右上-2 左上-3 左下-4)
+				 * left_x [3,4]
+				 * top_y [2,3]
+				 * right_x [1,2]
+				 * bottom_y [1,4]
+				 */
+				let left_x1 = this.cutX - 24;
+				let left_x2 = this.cutX + 24;
+
+				let top_y1 = this.cutY - 24;
+				let top_y2 = this.cutY + 24;
+
+				let right_x1 = this.cutX + this.canvasWidth - 24;
+				let right_x2 = this.cutX + this.canvasWidth + 24;
+
+				let bottom_y1 = this.cutY + this.canvasHeight - 24;
+				let bottom_y2 = this.cutY + this.canvasHeight + 24;
+
+				if (currentX > right_x1 && currentX < right_x2 && currentY > bottom_y1 && currentY < bottom_y2) {
+					this.moveDuring();
+					this.flagCutTouch = true;
+					this.flagEndTouch = true;
+					this.CUT_START = {
+						width: this.canvasWidth,
+						height: this.canvasHeight,
+						x: currentX,
+						y: currentY,
+						corner: 1
+					};
+				} else if (currentX > right_x1 && currentX < right_x2 && currentY > top_y1 && currentY < top_y2) {
+					this.moveDuring();
+					this.flagCutTouch = true;
+					this.flagEndTouch = true;
+					this.CUT_START = {
+						width: this.canvasWidth,
+						height: this.canvasHeight,
+						x: currentX,
+						y: currentY,
+						cutY: this.cutY,
+						cutX: this.cutX,
+						corner: 2
+					};
+				} else if (currentX > left_x1 && currentX < left_x2 && currentY > top_y1 && currentY < top_y2) {
+					this.moveDuring();
+					this.flagCutTouch = true;
+					this.flagEndTouch = true;
+					this.CUT_START = {
+						width: this.canvasWidth,
+						height: this.canvasHeight,
+						cutY: this.cutY,
+						cutX: this.cutX,
+						x: currentX,
+						y: currentY,
+						corner: 3
+					};
+				} else if (currentX > left_x1 && currentX < left_x2 && currentY > bottom_y1 && currentY < bottom_y2) {
+					this.moveDuring();
+					this.flagCutTouch = true;
+					this.flagEndTouch = true;
+					this.CUT_START = {
+						width: this.canvasWidth,
+						height: this.canvasHeight,
+						cutY: this.cutY,
+						cutX: this.cutX,
+						x: currentX,
+						y: currentY,
+						corner: 4
+					};
+				}
+			},
+			cutTouchEnd(e) {
+				this.moveStop();
+				this.flagCutTouch = false;
+			},
+			//停止移动时需要做的操作
+			moveStop() {
+				//清空之前的自动居中延迟函数并添加最新的
+				clearTimeout(this.TIME_CUT_CENTER);
+				this.TIME_CUT_CENTER = setTimeout(() => {
+					//动画启动
+					if (!this.cutAnimation) {
+						this.cutAnimation = true;
+					}
+					this.setCutCenter();
+				}, 800);
+			},
+			//移动中
+			moveDuring() {
+				//清空之前的自动居中延迟函数
+				clearTimeout(this.TIME_CUT_CENTER);
+			},
+			showLoading() {
+				uni.showLoading({
+					title: '请稍候...',
+					mask: true
+				});
+			},
+			stop() {},
+			back() {
+				uni.navigateBack();
+			},
+			setAngle() {
+				this.cutAnimation = true;
+				this.angle = this.angle + 90;
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.tui-container {
+		width: 100vw;
+		height: 100vh;
+		background-color: rgba(0, 0, 0, 0.6);
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1;
+	}
+
+	.tui-image-cropper {
+		width: 100vw;
+		height: 100vh;
+		position: absolute;
+	}
+
+	.tui-content {
+		width: 100vw;
+		height: 100vh;
+		position: absolute;
+		z-index: 9;
+		display: flex;
+		flex-direction: column;
+		pointer-events: none;
+	}
+
+	.tui-bg-transparent {
+		background-color: rgba(0, 0, 0, 0.6);
+		transition-duration: 0.35s;
+	}
+
+	.tui-content-top {
+		pointer-events: none;
+	}
+
+	.tui-content-middle {
+		width: 100%;
+		height: 200px;
+		display: flex;
+		box-sizing: border-box;
+	}
+
+	.tui-cropper-box {
+		position: relative;
+		/* transition-duration: 0.3s; */
+		border-style: solid;
+		border-width: 1rpx;
+		box-sizing: border-box;
+	}
+
+	.tui-flex-auto {
+		flex: auto;
+	}
+
+	.tui-cropper-image {
+		width: 100%;
+		border-style: none;
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 2;
+		-webkit-backface-visibility: hidden;
+		backface-visibility: hidden;
+		transform-origin: center;
+	}
+
+	.tui-cropper-canvas {
+		position: fixed;
+		z-index: 10;
+		left: -2000px;
+		top: -2000px;
+		pointer-events: none;
+	}
+
+	.tui-edge {
+		border-style: solid;
+		pointer-events: auto;
+		position: absolute;
+		box-sizing: border-box;
+	}
+
+	.tui-top-left {
+		border-bottom-width: 0 !important;
+		border-right-width: 0 !important;
+	}
+
+	.tui-top-right {
+		border-bottom-width: 0 !important;
+		border-left-width: 0 !important;
+	}
+
+	.tui-bottom-left {
+		border-top-width: 0 !important;
+		border-right-width: 0 !important;
+	}
+
+	.tui-bottom-right {
+		border-top-width: 0 !important;
+		border-left-width: 0 !important;
+	}
+
+	.tui-cropper-tabbar {
+		width: 100%;
+		height: 120rpx;
+		padding: 0 40rpx;
+		box-sizing: border-box;
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		z-index: 99;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		color: #ffffff;
+		font-size: 32rpx;
+	}
+
+	.tui-cropper-tabbar::after {
+		content: ' ';
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+		-webkit-transform: scaleY(0.5) translateZ(0);
+		transform: scaleY(0.5) translateZ(0);
+		transform-origin: 0 100%;
+	}
+
+	.tui-op-btn {
+		height: 80rpx;
+		display: flex;
+		align-items: center;
+	}
+
+	.tui-rotate-img {
+		width: 44rpx;
+		height: 44rpx;
+	}
+</style>
diff --git a/components/thorui/tui-image-group/tui-image-group.vue b/components/thorui/tui-image-group/tui-image-group.vue
new file mode 100644
index 0000000..0bd0eec
--- /dev/null
+++ b/components/thorui/tui-image-group/tui-image-group.vue
@@ -0,0 +1,163 @@
+<template>
+	<view
+		class="tui-image-container"
+		:style="{ marginBottom: multiLine ? `-${distance}rpx` : 0 }"
+		:class="{ 'tui-image-direction': direction == 'column', 'tui-image__warp': multiLine }"
+	>
+		<view
+			v-for="(item, index) in imageList"
+			:key="index"
+			class="tui-image__itembox"
+			:style="{
+				width: width,
+				height: height,
+				borderRadius: radius,
+				marginLeft: direction == 'column' || multiLine ? 0 : (index && distance) + 'rpx',
+				marginRight: multiLine ? distance + 'rpx' : 0,
+				marginBottom: multiLine ? distance + 'rpx' : 0,
+				marginTop: direction == 'row' ? 0 : (index && distance) + 'rpx'
+			}"
+			@tap="bindClick(index, item.id)"
+		>
+			<image
+				class="tui-image-item"
+				:mode="mode"
+				:lazy-load="lazyLoad"
+				fade-show="fadeShow"
+				:webp="webp"
+				:show-menu-by-longpress="longpress"
+				@error="error"
+				@load="load"
+				:style="{ width: width, height: height, borderRadius: radius, borderWidth: borderWidth, borderColor: borderColor }"
+				:src="item.src"
+			></image>
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiImageGroup',
+	props: {
+		//图片集合
+		/*
+		  [{id:1,src:"1.png"}]
+		*/
+		imageList: {
+			type: Array,
+			default: () => {
+				return [];
+			}
+		},
+		//图片宽度
+		width: {
+			type: String,
+			default: '120rpx'
+		},
+		//图片高度
+		height: {
+			type: String,
+			default: '120rpx'
+		},
+		//图片边框宽度 rpx
+		borderWidth: {
+			type: String,
+			default: '0'
+		},
+		//图片边框颜色 可传rgba
+		borderColor: {
+			type: String,
+			default: '#fff'
+		},
+		//图片圆角
+		radius: {
+			type: String,
+			default: '50%'
+		},
+		//图片裁剪、缩放的模式
+		mode: {
+			type: String,
+			default: 'scaleToFill'
+		},
+		//图片懒加载。只针对page与scroll-view下的image有效
+		lazyLoad: {
+			type: Boolean,
+			default: true
+		},
+		//图片显示动画效果 | 仅App-nvue 2.3.4+ Android有效
+		fadeShow: {
+			type: Boolean,
+			default: true
+		},
+		//默认不解析 webP 格式，只支持网络资源 | 微信小程序2.9.0
+		webp: {
+			type: Boolean,
+			default: false
+		},
+		//开启长按图片显示识别小程序码菜单 | 微信小程序2.7.0
+		longpress: {
+			type: Boolean,
+			default: false
+		},
+		//是否组合排列
+		isGroup: {
+			type: Boolean,
+			default: false
+		},
+		//排列方向 row ，column
+		direction: {
+			type: String,
+			default: 'row'
+		},
+		//偏移距离 rpx
+		distance: {
+			type: [Number, String],
+			default: -16
+		},
+		//是否可多行展示，排列方向 row时生效，distance需设置为大于0的数
+		multiLine: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		error(e) {
+			this.$emit('errorEvent', e);
+		},
+		load(e) {
+			this.$emit('loaded', e);
+		},
+		bindClick(index, id) {
+			this.$emit('click', {
+				index: index,
+				id: id || ''
+			});
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-image-container {
+	display: inline-flex;
+	align-items: center;
+}
+.tui-image-direction {
+	flex-direction: column;
+}
+.tui-image__warp {
+	flex-wrap: wrap;
+}
+.tui-image__itembox {
+	position: relative;
+}
+.tui-image-item {
+	border-style: solid;
+	flex-shrink: 0;
+	display: block;
+}
+</style>
diff --git a/components/thorui/tui-keyboard-input/tui-keyboard-input.vue b/components/thorui/tui-keyboard-input/tui-keyboard-input.vue
new file mode 100644
index 0000000..143bc6c
--- /dev/null
+++ b/components/thorui/tui-keyboard-input/tui-keyboard-input.vue
@@ -0,0 +1,73 @@
+<template>
+	<view class="tui-keyboard-input tui-pwd-box" :style="{backgroundColor:backgroundColor}">
+		<view class="tui-inner-box">
+			<view class="tui-input" :class="[inputvalue.length===4?'tui-margin-right':'']" :style="{fontSize:size+'rpx',color:color,width:(inputvalue.length===4?90:70)+'rpx' }"
+			 v-for="(item,index) in inputvalue" :key="index">{{item}}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tuiKeyboardInput",
+		props: {
+			//背景颜色
+			backgroundColor: {
+				type: String,
+				default: "#fff"
+			},
+			size: {
+				type: Number,
+				default: 32
+			},
+			color: {
+				type: String,
+				default: "#333"
+			},
+			//输入框的值：数组格式，长度即为输入框个数
+			inputvalue: {
+				type: Array,
+				default: ["", "", "", "", "", ""] //密码圆点 ●
+			}
+		},
+		data() {
+			return {
+
+			};
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-pwd-box {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		vertical-align: top;
+	}
+
+	.tui-inner-box {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.tui-input {
+		height: 80rpx;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-right: 20rpx;
+		border-bottom: 2px solid #666;
+	}
+
+	.tui-margin-right {
+		margin-right: 30rpx;
+	}
+
+	.tui-input:last-child {
+		margin-right: 0 !important;
+	}
+</style>
diff --git a/components/thorui/tui-keyboard/tui-keyboard.vue b/components/thorui/tui-keyboard/tui-keyboard.vue
new file mode 100644
index 0000000..df391e1
--- /dev/null
+++ b/components/thorui/tui-keyboard/tui-keyboard.vue
@@ -0,0 +1,240 @@
+<template>
+	<view>
+		<view class="tui-keyboard-mask" :class="[show?'tui-mask-show':'']" v-if="mask" @tap="handleClose"></view>
+		<view class="tui-keyboard" :class="{'tui-keyboard-radius':radius,'tui-keyboard-action':action,'tui-keyboard-show':show}">
+			<slot></slot>
+			<view class="tui-keyboard-grids">
+				<!--{{(index==9 || index==10 || index==11)?'tui-grid-bottom':''}}-->
+				<view class="tui-keyboard-grid" :class="{'tui-bg-gray':index==9 || index==11}" v-for="(item,index) in itemList"
+				 :key="index" hover-class="tui-keyboard-hover" :hover-stay-time="150" @tap="handleClick" :data-index="index">
+					<view v-if="index<11" class="tui-keyboard-item" :class="{'tui-fontsize-32':index==9}">{{getKeyBoard(index,action)}}</view>
+					<view v-else class="tui-keyboard-item">
+						<view class="tui-icon tui-keyboard-delete"></view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tuiKeyboard",
+		props: {
+			//是否需要mask
+			mask: {
+				type: Boolean,
+				default: true
+			},
+			//控制键盘显示
+			show: {
+				type: Boolean,
+				default: false
+			},
+			//是否直接显示，不需要动画，一般使用在锁屏密码
+			action: {
+				type: Boolean,
+				default: true
+			},
+			//是否带圆角
+			radius: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				itemList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+			};
+		},
+		methods: {
+			getKeyBoard: function(index, action) {
+				var content = index + 1;
+				if (index == 9) {
+					content = action ? "取消" : "清除";
+				} else if (index == 10) {
+					content = 0;
+				}
+				return content;
+			},
+			//关闭
+			handleClose() {
+				if (!this.show) {
+					return;
+				}
+				this.$emit('close', {});
+			},
+			handleClick(e) {
+				if (!this.show) {
+					return;
+				}
+				const dataset = e.currentTarget.dataset;
+				this.$emit('click', {
+					index: Number(dataset.index)
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	@font-face {
+		font-family: 'keyboardFont';
+		src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAASgAA0AAAAABugAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEhAAAABoAAAAch/nJvUdERUYAAARkAAAAHgAAAB4AKQAKT1MvMgAAAZwAAABDAAAAVj4mSapjbWFwAAAB8AAAAD4AAAFCAA/rY2dhc3AAAARcAAAACAAAAAj//wADZ2x5ZgAAAjwAAACsAAAA0BLVU2FoZWFkAAABMAAAAC0AAAA2FXPmsWhoZWEAAAFgAAAAHAAAACQH3gOFaG10eAAAAeAAAAAOAAAAEAwAAABsb2NhAAACMAAAAAoAAAAKAGgAAG1heHAAAAF8AAAAHwAAACABEQBLbmFtZQAAAugAAAFJAAACiCnmEVVwb3N0AAAENAAAACgAAAA6nLlLs3jaY2BkYGAAYukqK754fpuvDNwsDCBwU+tiFBKtwMLA9ABIczAwgUQB4ccH+gAAAHjaY2BkYGBu+N/AEMPCAAJAkpEBFbAAAEcKAm142mNgZGBgYGGwZ2BmAAEmIOYCQgaG/2A+AwAPIgFdAHjaY2BkYWCcwMDKwMDUyXSGgYGhH0IzvmYwYuQAijKwMjNgBQFprikMDs93PN/B3PC/gSGGuYGhASjMCJIDAPenDU0AeNpjYYAAFigGAACAAA0AAHjaY2BgYGaAYBkGRgYQsAHyGMF8FgYFIM0ChED+8x3//0NICW+oSgZGNgYYk4GRCUgwMaACRoZhDwAItAhZAAAAAAAAAAAAAABoAAB42l3MTQqCUBSG4fNpqBxECS/+YFTXRGcFKteZjW0nuoqWVtOgPbgKZ1cqaBDN3snzkklE+xUZEwUkqSOCzGx4EGGEsJYd2vURgQdbomhayC0iu8h8lEVmiR1sS4TVGVFYqeaEVjXmVT8TsWjf83yYIjFq1QM9I0/1c9HMMI06zfHgmMeRY8HDwOKnjSlYZvdQ5u4yB+gVbqrX97cAOxsHn9GF/9G3iV4WbSWBeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOWMCiTIxM/FmZiXkFiXnxxRmJeckZpQA1nQZRAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMAAwABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9E2ti1EwGgA9dwYGAAA=) format('woff');
+		font-weight: normal;
+		font-style: normal;
+	}
+
+	.tui-icon {
+		font-family: "keyboardFont" !important;
+		font-size: 22px;
+		font-style: normal;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		line-height: 1;
+		color: #333;
+	}
+
+	.tui-keyboard-delete:before {
+		content: "\e7b8";
+	}
+
+	.tui-keyboard-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.6);
+		z-index: 998;
+		transition: all 0.3s ease-in-out;
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.tui-mask-show {
+		opacity: 1;
+		visibility: visible;
+	}
+
+	.tui-keyboard {
+		width: 100%;
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 999;
+		padding-bottom: env(safe-area-inset-bottom);
+		background-color: #fff;
+	}
+
+	.tui-keyboard-radius {
+		border-top-left-radius: 16rpx;
+		border-top-right-radius: 16rpx;
+		overflow: hidden;
+	}
+
+	.tui-keyboard-action {
+		visibility: hidden;
+		transform: translate3d(0, 100%, 0);
+		transform-origin: center;
+		transition: all 0.3s ease-in-out;
+	}
+
+	.tui-keyboard-show {
+		transform: translate3d(0, 0, 0);
+		visibility: visible;
+	}
+
+	.tui-bg-gray {
+		background-color: #e7e6eb !important;
+	}
+
+	.tui-keyboard-grids {
+		width: 100%;
+		position: relative;
+		overflow: hidden;
+		display: flex;
+		display: -webkit-flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+	}
+
+	.tui-keyboard-grids::after {
+		content: " ";
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 1px;
+		border-top: 1px solid #eaeef1;
+		-webkit-transform-origin: 0 0;
+		transform-origin: 0 0;
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+	}
+
+	.tui-keyboard-grid {
+		position: relative;
+		padding: 24rpx 20rpx;
+		box-sizing: border-box;
+		background-color: #fff;
+		width: 33.33333333%;
+	}
+
+	.tui-keyboard-grid:nth-of-type(3n)::before {
+		width: 0;
+		border-right: 0;
+	}
+
+	.tui-keyboard-grid::before {
+		content: " ";
+		position: absolute;
+		right: 0;
+		top: 0;
+		width: 1px;
+		bottom: 0;
+		border-right: 1px solid #eaeef1;
+		-webkit-transform-origin: 100% 0;
+		transform-origin: 100% 0;
+		-webkit-transform: scaleX(0.5);
+		transform: scaleX(0.5);
+	}
+
+	.tui-keyboard-grid::after {
+		content: " ";
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		height: 1px;
+		border-bottom: 1px solid #eaeef1;
+		-webkit-transform-origin: 0 100%;
+		transform-origin: 0 100%;
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+	}
+
+	.tui-grid-bottom::after {
+		height: 0 !important;
+		border-bottom: 0 !important;
+	}
+
+	.tui-keyboard-hover {
+		background-color: #f7f7f9 !important;
+	}
+
+	.tui-keyboard-item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 48rpx;
+		height: 60rpx;
+		color: #000;
+	}
+
+	.tui-fontsize-32 {
+		font-size: 32rpx;
+		color: #333 !important;
+	}
+</style>
diff --git a/components/thorui/tui-lazyload-img/tui-lazyload-img.vue b/components/thorui/tui-lazyload-img/tui-lazyload-img.vue
new file mode 100644
index 0000000..c093483
--- /dev/null
+++ b/components/thorui/tui-lazyload-img/tui-lazyload-img.vue
@@ -0,0 +1,193 @@
+<template>
+	<view class="tui-lazyload__box"
+		:style="{backgroundColor:placeholder?'transparent':backgroundColor,width:width,borderRadius:radius}"
+		@tap="handleClick">
+		<image class="tui-lazyload__img"
+			:class="{'tui-img__hidden':!placeholder && fadeShow && !show,'tui-img__appear':show && !placeholder && fadeShow}"
+			:style="{height:height,borderRadius:radius}" :id="uid" :src="show?src:placeholder" :mode="mode" :webp="webp"
+			:show-menu-by-longpress="showMenuByLongpress" :draggable="draggable" @load="load" @error="error">
+		</image>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tui-lazyload-img",
+		props: {
+			//图片路径
+			src: {
+				type: String,
+				default: ''
+			},
+			//占位图路径
+			placeholder: {
+				type: String,
+				default: ''
+			},
+			//占位背景色，placeholder有值时失效
+			backgroundColor: {
+				type: String,
+				default: '#E7E7E7'
+			},
+			//图片的裁剪模式，参考image组件mode属性
+			mode: {
+				type: String,
+				default: 'widthFix'
+			},
+			//图片显示动画效果,无占位图时有效
+			fadeShow: {
+				type: Boolean,
+				default: true
+			},
+			//默认不解析 webP 格式，只支持网络资源 微信小程序2.9.0
+			webp: {
+				type: Boolean,
+				default: false
+			},
+			//开启长按图片显示识别小程序码菜单 微信小程序2.7.0
+			showMenuByLongpress: {
+				type: Boolean,
+				default: false
+			},
+			//鼠标长按是否能拖动图片 仅H5平台 3.1.1+ 有效
+			draggable: {
+				type: Boolean,
+				default: true
+			},
+			//图片宽度
+			width: {
+				type: String,
+				default: '340rpx'
+			},
+			//图片高度，如果高度设置为auto，mode值需要设置为widthFix
+			height: {
+				type: String,
+				default: '340rpx'
+			},
+			//图片圆角值，如：10rpx
+			radius: {
+				type: String,
+				default: '0'
+			},
+			//节点布局区域的下边界,目标节点区域以下 bottom(px) 时，就会触发回调函数
+			bottom: {
+				type: [Number, String],
+				default: 50
+			},
+			//是否停止监听，设置为true时回调函数将不再触发
+			disconnect: {
+				type: Boolean,
+				default: false
+			},
+			//图片在列表中的索引值
+			index: {
+				type: Number,
+				default: 0
+			}
+		},
+		data() {
+			return {
+				show: false,
+				observer: null,
+				uid: null
+			};
+		},
+		watch: {
+			disconnect(val) {
+				if (val) {
+					this.removeObserver()
+				}
+			}
+		},
+		created() {
+			this.uid = this.unique() + this.index;
+		},
+		mounted() {
+			if (!this.disconnect) {
+				this.initObserver()
+			} else {
+				this.show = true;
+			}
+		},
+		beforeDestroy() {
+			this.removeObserver()
+		},
+		methods: {
+			unique: function(n) {
+				n = n || 6;
+				let rnd = '';
+				for (let i = 0; i < n; i++)
+					rnd += Math.floor(Math.random() * 10);
+				return 'tui_' + new Date().getTime() + rnd;
+			},
+			removeObserver() {
+				if (this.observer) {
+					this.observer.disconnect()
+					this.observer = null;
+				}
+			},
+			initObserver() {
+				if (this.observer || this.show) return;
+				try {
+					let element = this.uid ? `#${this.uid}` : '.tui-lazyload__img';
+					const observer = uni.createIntersectionObserver(this)
+					observer.relativeToViewport({
+						bottom: Number(this.bottom) || 50
+					}).observe(element, (res) => {
+						if (res.intersectionRatio > 0 && !this.show) {
+							this.show = true;
+							this.removeObserver()
+						}
+					})
+					this.observer = observer
+				} catch (e) {
+					//TODO handle the exception
+					this.show = true;
+					this.removeObserver()
+				}
+			},
+			error(e) {
+				if (!this.show) return;
+				this.$emit('error', {
+					detail: e.detail,
+					index: this.index
+				})
+			},
+			load(e) {
+				if (!this.show) return;
+				this.$emit('load', {
+					detail: e.detail,
+					index: this.index
+				})
+			},
+			handleClick(e) {
+				this.$emit('click', {
+					index: this.index
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-lazyload__box {
+		display: inline-block;
+		position: relative;
+	}
+
+	.tui-lazyload__img {
+		width: 100%;
+		display: block;
+		flex-shrink: 0;
+		transition: opacity .3s linear;
+	}
+
+	.tui-img__hidden {
+		opacity: 0;
+	}
+
+	.tui-img__appear {
+		opacity: 1;
+	}
+</style>
diff --git a/components/thorui/tui-list-cell/tui-list-cell.vue b/components/thorui/tui-list-cell/tui-list-cell.vue
new file mode 100644
index 0000000..19ac128
--- /dev/null
+++ b/components/thorui/tui-list-cell/tui-list-cell.vue
@@ -0,0 +1,172 @@
+<template>
+	<view
+		class="tui-list-class tui-list-cell"
+		:class="[
+			arrow ? 'tui-cell-arrow' : '',
+			arrow && arrowRight ? '' : 'tui-arrow-right',
+			unlined ? 'tui-cell-unlined' : '',
+			lineLeft ? 'tui-line-left' : '',
+			lineRight ? 'tui-line-right' : '',
+			arrow && arrowColor ? 'tui-arrow-' + arrowColor : '',
+			radius ? 'tui-radius' : ''
+		]"
+		:hover-class="hover ? 'tui-cell-hover' : ''"
+		:style="{ backgroundColor: backgroundColor, fontSize: size + 'rpx', color: color, padding: padding }"
+		:hover-stay-time="150"
+		@tap="handleClick"
+	>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiListCell',
+	props: {
+		//是否有箭头
+		arrow: {
+			type: Boolean,
+			default: false
+		},
+		//箭头颜色 传值： white，gray,warning,danger
+		arrowColor: {
+			type: String,
+			default: ''
+		},
+		//是否有点击效果
+		hover: {
+			type: Boolean,
+			default: true
+		},
+		//隐藏线条
+		unlined: {
+			type: Boolean,
+			default: false
+		},
+		//线条是否有左偏移距离
+		lineLeft: {
+			type: Boolean,
+			default: true
+		},
+		//线条是否有右偏移距离
+		lineRight: {
+			type: Boolean,
+			default: false
+		},
+		padding: {
+			type: String,
+			default: '26rpx 30rpx'
+		},
+		//背景颜色
+		backgroundColor: {
+			type: String,
+			default: '#fff'
+		},
+		//字体大小
+		size: {
+			type: Number,
+			default: 28
+		},
+		//字体颜色
+		color: {
+			type: String,
+			default: '#333'
+		},
+		//是否加圆角
+		radius: {
+			type: Boolean,
+			default: false
+		},
+		//箭头是否有偏移距离
+		arrowRight: {
+			type: Boolean,
+			default: true
+		},
+		index: {
+			type: Number,
+			default: 0
+		}
+	},
+	methods: {
+		handleClick() {
+			this.$emit('click', {
+				index: this.index
+			});
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-list-cell {
+	position: relative;
+	width: 100%;
+	box-sizing: border-box;
+}
+.tui-radius {
+	border-radius: 6rpx;
+	overflow: hidden;
+}
+
+.tui-cell-hover {
+	background-color: #f1f1f1 !important;
+}
+
+.tui-list-cell::after {
+	content: '';
+	position: absolute;
+	border-bottom: 1px solid #eaeef1;
+	-webkit-transform: scaleY(0.5) translateZ(0);
+	transform: scaleY(0.5) translateZ(0);
+	transform-origin: 0 100%;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	pointer-events: none;
+}
+
+.tui-line-left::after {
+	left: 30rpx !important;
+}
+
+.tui-line-right::after {
+	right: 30rpx !important;
+}
+
+.tui-cell-unlined::after {
+	border-bottom: 0 !important;
+}
+
+.tui-cell-arrow::before {
+	content: ' ';
+	height: 10px;
+	width: 10px;
+	border-width: 2px 2px 0 0;
+	border-color: #c0c0c0;
+	border-style: solid;
+	-webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
+	transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
+	position: absolute;
+	top: 50%;
+	margin-top: -6px;
+	right: 30rpx;
+}
+.tui-arrow-right::before {
+	right: 0 !important;
+}
+.tui-arrow-gray::before {
+	border-color: #666666 !important;
+}
+.tui-arrow-white::before {
+	border-color: #ffffff !important;
+}
+.tui-arrow-warning::before {
+	border-color: #ff7900 !important;
+}
+.tui-arrow-success::before {
+	border-color: #19be6b !important;
+}
+.tui-arrow-danger::before {
+	border-color: #eb0909 !important;
+}
+</style>
diff --git a/components/thorui/tui-list-view/tui-list-view.vue b/components/thorui/tui-list-view/tui-list-view.vue
new file mode 100644
index 0000000..d14ebdb
--- /dev/null
+++ b/components/thorui/tui-list-view/tui-list-view.vue
@@ -0,0 +1,97 @@
+<template>
+	<view class="tui-list-view tui-view-class" :style="{backgroundColor:backgroundColor,marginTop:marginTop}">
+		<view class="tui-list-title" :style="{color:color,fontSize:size+'rpx',lineHeight:30+'rpx'}" v-if="title">{{title}}</view>
+		<view class="tui-list-content" :class="[unlined?'tui-border-'+unlined:'']">
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tuiListView",
+		props: {
+			title: {
+				type: String,
+				default: ''
+			},
+			color:{
+				type: String,
+				default: '#666'
+			},
+			//rpx
+			size:{
+				type:Number,
+				default:30
+			},
+			backgroundColor:{
+				type: String,
+				default: 'transparent'
+			},
+			unlined: {
+				type: String,
+				default: '' //top,bottom,all
+			},
+			marginTop:{
+				type:String,
+				default:'0'
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-list-title {
+		width: 100%;
+		padding: 30rpx;
+		box-sizing: border-box;
+	}
+
+	.tui-list-content {
+		width: 100%;
+		position: relative;
+	}
+
+	.tui-list-content::before {
+		content: " ";
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		border-top: 1px solid #eaeef1;
+		-webkit-transform: scaleY(0.5) translateZ(0);
+		transform: scaleY(0.5) translateZ(0);
+		transform-origin: 0 0;
+		z-index: 2;
+		pointer-events: none;
+	}
+
+	.tui-list-content::after {
+		content: '';
+		width: 100%;
+		position: absolute;
+		border-bottom: 1px solid #eaeef1;
+		-webkit-transform: scaleY(0.5) translateZ(0);
+		transform: scaleY(0.5) translateZ(0);
+		transform-origin: 0 100%;
+		bottom: 0;
+		right: 0;
+		left: 0;
+	}
+
+	.tui-border-top::before {
+		border-top: 0;
+	}
+
+	.tui-border-bottom::after {
+		border-bottom: 0;
+	}
+
+	.tui-border-all::after {
+		border-bottom: 0;
+	}
+
+	.tui-border-all::before {
+		border-top: 0;
+	}
+</style>
diff --git a/components/thorui/tui-loading/tui-loading.vue b/components/thorui/tui-loading/tui-loading.vue
new file mode 100644
index 0000000..4c38a09
--- /dev/null
+++ b/components/thorui/tui-loading/tui-loading.vue
@@ -0,0 +1,78 @@
+<template>
+	<view class="tui-loading-init">
+		<view class="tui-loading-center"></view>
+		<view class="tui-loadmore-tips">{{text}}</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tuiLoading",
+		props: {
+			text: {
+				type: String,
+				default: "正在加载..."
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-loading-init {
+		min-width: 200rpx;
+		min-height: 200rpx;
+		max-width: 500rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		z-index: 9999;
+		font-size: 26rpx;
+		color: #fff;
+		background-color: rgba(0, 0, 0, 0.7);
+		border-radius: 10rpx;
+	}
+
+	.tui-loading-center {
+		width: 50rpx;
+		height: 50rpx;
+		border: 3px solid #fff;
+		border-radius: 50%;
+		margin: 0 6px;
+		display: inline-block;
+		vertical-align: middle;
+		clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 0% 40%);
+		animation: rotate 1s linear infinite;
+		margin-bottom: 36rpx;
+	}
+
+	.tui-loadmore-tips {
+		text-align: center;
+		padding: 0 20rpx;
+		box-sizing: border-box;
+	}
+
+	@-webkit-keyframes rotate {
+		from {
+			transform: rotatez(0deg);
+		}
+
+		to {
+			transform: rotatez(360deg);
+		}
+	}
+
+	@keyframes rotate {
+		from {
+			transform: rotatez(0deg);
+		}
+
+		to {
+			transform: rotatez(360deg);
+		}
+	}
+</style>
diff --git a/components/thorui/tui-loadmore/tui-loadmore.vue b/components/thorui/tui-loadmore/tui-loadmore.vue
new file mode 100644
index 0000000..4c9ab65
--- /dev/null
+++ b/components/thorui/tui-loadmore/tui-loadmore.vue
@@ -0,0 +1,161 @@
+<template>
+	<view class="tui-loadmore">
+		<view :class="['tui-loading-'+index, (index==3 && type)?'tui-loading-'+type:'']"></view>
+		<view class="tui-loadmore-tips">{{text}}</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tuiLoadmore",
+		props: {
+			//显示文本
+			text: {
+				type: String,
+				default: "正在加载..."
+			},
+			//loading 样式 ：1,2,3
+			index: {
+				type: Number,
+				default: 1
+			},
+			//颜色设置，只有index=3时生效：primary，red，orange，green
+			type: {
+				type: String,
+				default: ""
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-loadmore {
+		width: 48%;
+		margin: 1.5em auto;
+		line-height: 1.5em;
+		font-size: 24rpx;
+		text-align: center;
+	}
+
+	.tui-loading-1 {
+		margin: 0 5px;
+		width: 20px;
+		height: 20px;
+		display: inline-block;
+		vertical-align: middle;
+		-webkit-animation: a 1s steps(12) infinite;
+		animation: a 1s steps(12) infinite;
+		background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
+		background-size: 100%;
+	}
+
+	@-webkit-keyframes a {
+		0% {
+			-webkit-transform: rotate(0deg);
+			transform: rotate(0deg);
+		}
+
+		to {
+			-webkit-transform: rotate(1turn);
+			transform: rotate(1turn);
+		}
+	}
+
+	@keyframes a {
+		0% {
+			-webkit-transform: rotate(0deg);
+			transform: rotate(0deg);
+		}
+
+		to {
+			-webkit-transform: rotate(1turn);
+			transform: rotate(1turn);
+		}
+	}
+
+	.tui-loadmore-tips {
+		display: inline-block;
+		vertical-align: middle;
+	}
+
+	.tui-loading-2 {
+		width: 28rpx;
+		height: 28rpx;
+		border: 1px solid #8f8d8e;
+		border-radius: 50%;
+		margin: 0 6px;
+		display: inline-block;
+		vertical-align: middle;
+		clip-path: polygon(0% 0%,100% 0%,100% 30%,0% 30%);
+		animation: rotate 1s linear infinite;
+	}
+
+	@-webkit-keyframes rotate {
+		from {
+			transform: rotatez(0deg);
+		}
+
+		to {
+			transform: rotatez(360deg);
+		}
+	}
+
+	@keyframes rotate {
+		from {
+			transform: rotatez(0deg);
+		}
+
+		to {
+			transform: rotatez(360deg);
+		}
+	}
+
+	.tui-loading-3 {
+		display: inline-block;
+		margin: 0 6px;
+		vertical-align: middle;
+		width: 28rpx;
+		height: 28rpx;
+		background: 0 0;
+		border-radius: 50%;
+		border: 2px solid;
+		border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
+		animation: tui-rotate 0.7s linear infinite;
+	}
+
+	.tui-loading-3.tui-loading-primary {
+		border-color: #e5e5e5 #e5e5e5 #e5e5e5 #5677fc;
+	}
+
+	.tui-loading-3.tui-loading-green {
+		border-color: #e5e5e5 #e5e5e5 #e5e5e5 #19be6b;
+	}
+
+	.tui-loading-3.tui-loading-orange {
+		border-color: #e5e5e5 #e5e5e5 #e5e5e5 #ff7900;
+	}
+
+	.tui-loading-3.tui-loading-red {
+		border-color: #ededed #ededed #ededed #ed3f14;
+	}
+
+	@-webkit-keyframes tui-rotate {
+		0% {
+			transform: rotate(0);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes tui-rotate {
+		0% {
+			transform: rotate(0);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+</style>
diff --git a/components/thorui/tui-modal/tui-modal.vue b/components/thorui/tui-modal/tui-modal.vue
new file mode 100644
index 0000000..4e34929
--- /dev/null
+++ b/components/thorui/tui-modal/tui-modal.vue
@@ -0,0 +1,407 @@
+<template>
+	<view class="tui-modal__container" :class="[show ? 'tui-modal-show' : '']" :style="{zIndex:zIndex}" @touchmove.stop.prevent>
+		<view
+			class="tui-modal-box"
+			:style="{ width: width, padding: padding, borderRadius: radius, backgroundColor: backgroundColor,zIndex:zIndex+1 }"
+			:class="[fadeIn || show ? 'tui-modal-normal' : 'tui-modal-scale', show ? 'tui-modal-show' : '']"
+		>
+			<view v-if="!custom">
+				<view class="tui-modal-title" v-if="title">{{ title }}</view>
+				<view class="tui-modal-content" :class="[title ? '' : 'tui-mtop']" :style="{ color: color, fontSize: size + 'rpx' }">{{ content }}</view>
+				<view class="tui-modalBtn-box" :class="[button.length != 2 ? 'tui-flex-column' : '']">
+					<block v-for="(item, index) in button" :key="index">
+						<button
+							class="tui-modal-btn"
+							:class="[
+								'tui-' + (item.type || 'primary') + (item.plain ? '-outline' : ''),
+								button.length != 2 ? 'tui-btn-width' : '',
+								button.length > 2 ? 'tui-mbtm' : '',
+								shape == 'circle' ? 'tui-circle-btn' : ''
+							]"
+							:hover-class="'tui-' + (item.plain ? 'outline' : item.type || 'primary') + '-hover'"
+							:data-index="index"
+							@tap="handleClick"
+						>
+							{{ item.text || '确定' }}
+						</button>
+					</block>
+				</view>
+			</view>
+			<view v-else><slot></slot></view>
+		</view>
+		<view class="tui-modal-mask" :class="[show ? 'tui-mask-show' : '']" :style="{zIndex:maskZIndex}" @tap="handleClickCancel"></view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiModal',
+	props: {
+		//是否显示
+		show: {
+			type: Boolean,
+			default: false
+		},
+		width: {
+			type: String,
+			default: '84%'
+		},
+		backgroundColor: {
+			type: String,
+			default: '#fff'
+		},
+		padding: {
+			type: String,
+			default: '40rpx 64rpx'
+		},
+		radius: {
+			type: String,
+			default: '24rpx'
+		},
+		//标题
+		title: {
+			type: String,
+			default: ''
+		},
+		//内容
+		content: {
+			type: String,
+			default: ''
+		},
+		//内容字体颜色
+		color: {
+			type: String,
+			default: '#999'
+		},
+		//内容字体大小 rpx
+		size: {
+			type: Number,
+			default: 28
+		},
+		//形状 circle, square
+		shape: {
+			type: String,
+			default: 'square'
+		},
+		button: {
+			type: Array,
+			default: function() {
+				return [
+					{
+						text: '取消',
+						type: 'red',
+						plain: true //是否空心
+					},
+					{
+						text: '确定',
+						type: 'red',
+						plain: false
+					}
+				];
+			}
+		},
+		//点击遮罩 是否可关闭
+		maskClosable: {
+			type: Boolean,
+			default: true
+		},
+		//淡入效果，自定义弹框插入input输入框时传true
+		fadeIn: {
+			type: Boolean,
+			default: false
+		},
+		//自定义弹窗内容
+		custom: {
+			type: Boolean,
+			default: false
+		},
+		//容器z-index
+		zIndex:{
+			type: Number,
+			default: 9997
+		},
+		//mask z-index
+		maskZIndex:{
+			type: Number,
+			default: 9990
+		}
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		handleClick(e) {
+			if (!this.show) return;
+			const dataset = e.currentTarget.dataset;
+			this.$emit('click', {
+				index: Number(dataset.index)
+			});
+		},
+		handleClickCancel() {
+			if (!this.maskClosable) return;
+			this.$emit('cancel');
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-modal__container {
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	left: 0;
+	top: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	visibility: hidden;
+}
+.tui-modal-box {
+	position: relative;
+	opacity: 0;
+	visibility: hidden;
+	box-sizing: border-box;
+	transition: all 0.3s ease-in-out;
+}
+
+.tui-modal-scale {
+	transform: scale(0);
+}
+
+.tui-modal-normal {
+	transform: scale(1);
+}
+
+.tui-modal-show {
+	opacity: 1;
+	visibility: visible;
+}
+
+.tui-modal-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.6);
+	transition: all 0.3s ease-in-out;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.tui-mask-show {
+	visibility: visible;
+	opacity: 1;
+}
+
+.tui-modal-title {
+	text-align: center;
+	font-size: 34rpx;
+	color: #333;
+	padding-top: 20rpx;
+	font-weight: bold;
+}
+
+.tui-modal-content {
+	text-align: center;
+	color: #999;
+	font-size: 28rpx;
+	padding-top: 20rpx;
+	padding-bottom: 60rpx;
+}
+
+.tui-mtop {
+	margin-top: 30rpx;
+}
+
+.tui-mbtm {
+	margin-bottom: 30rpx;
+}
+
+.tui-modalBtn-box {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.tui-flex-column {
+	flex-direction: column;
+}
+
+.tui-modal-btn {
+	width: 46%;
+	height: 68rpx;
+	line-height: 68rpx;
+	position: relative;
+	border-radius: 10rpx;
+	font-size: 26rpx;
+	overflow: visible;
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.tui-modal-btn::after {
+	content: ' ';
+	position: absolute;
+	width: 200%;
+	height: 200%;
+	-webkit-transform-origin: 0 0;
+	transform-origin: 0 0;
+	transform: scale(0.5, 0.5) translateZ(0);
+	left: 0;
+	top: 0;
+	border-radius: 20rpx;
+	z-index: 2;
+}
+
+.tui-btn-width {
+	width: 80% !important;
+}
+
+.tui-primary {
+	background: #5677fc;
+	color: #fff;
+}
+
+.tui-primary-hover {
+	background: #4a67d6;
+	color: #e5e5e5;
+}
+
+.tui-primary-outline {
+	color: #5677fc;
+	background: transparent;
+}
+
+.tui-primary-outline::after {
+	border: 1px solid #5677fc;
+}
+
+.tui-danger {
+	background: #ed3f14;
+	color: #fff;
+}
+
+.tui-danger-hover {
+	background: #d53912;
+	color: #e5e5e5;
+}
+
+.tui-danger-outline {
+	color: #ed3f14;
+	background: transparent;
+}
+
+.tui-danger-outline::after {
+	border: 1px solid #ed3f14;
+}
+
+.tui-red {
+	background: #e41f19;
+	color: #fff;
+}
+
+.tui-red-hover {
+	background: #c51a15;
+	color: #e5e5e5;
+}
+
+.tui-red-outline {
+	color: #e41f19;
+	background: transparent;
+}
+
+.tui-red-outline::after {
+	border: 1px solid #e41f19;
+}
+
+.tui-warning {
+	background: #ff7900;
+	color: #fff;
+}
+
+.tui-warning-hover {
+	background: #e56d00;
+	color: #e5e5e5;
+}
+
+.tui-warning-outline {
+	color: #ff7900;
+	background: transparent;
+}
+
+.tui-warning-outline::after {
+	border: 1px solid #ff7900;
+}
+
+.tui-green {
+	background: #19be6b;
+	color: #fff;
+}
+
+.tui-green-hover {
+	background: #16ab60;
+	color: #e5e5e5;
+}
+
+.tui-green-outline {
+	color: #19be6b;
+	background: transparent;
+}
+
+.tui-green-outline::after {
+	border: 1px solid #19be6b;
+}
+
+.tui-white {
+	background: #fff;
+	color: #333;
+}
+
+.tui-white-hover {
+	background: #f7f7f9;
+	color: #666;
+}
+
+.tui-white-outline {
+	color: #333;
+	background: transparent;
+}
+
+.tui-white-outline::after {
+	border: 1px solid #333;
+}
+
+.tui-gray {
+	background: #ededed;
+	color: #999;
+}
+
+.tui-gray-hover {
+	background: #d5d5d5;
+	color: #898989;
+}
+
+.tui-gray-outline {
+	color: #999;
+	background: transparent;
+}
+
+.tui-gray-outline::after {
+	border: 1px solid #999;
+}
+
+.tui-outline-hover {
+	opacity: 0.6;
+}
+
+.tui-circle-btn {
+	border-radius: 40rpx !important;
+}
+
+.tui-circle-btn::after {
+	border-radius: 80rpx !important;
+}
+</style>
diff --git a/components/thorui/tui-navigation-bar/tui-navigation-bar.vue b/components/thorui/tui-navigation-bar/tui-navigation-bar.vue
new file mode 100644
index 0000000..07ffd5c
--- /dev/null
+++ b/components/thorui/tui-navigation-bar/tui-navigation-bar.vue
@@ -0,0 +1,250 @@
+<template>
+	<view
+		class="tui-navigation-bar"
+		:class="{ 'tui-bar-line': opacity > 0.85 && splitLine, 'tui-navbar-fixed': isFixed, 'tui-backdrop__filter': backdropFilter && dropDownOpacity > 0  }"
+		:style="{ height: height + 'px', backgroundColor: `rgba(${background},${opacity})`, opacity: dropDownOpacity, zIndex: isFixed ? zIndex : 'auto' }"
+	>
+		<view class="tui-status-bar" :style="{ height: statusBarHeight + 'px' }" v-if="isImmersive"></view>
+		<view
+			class="tui-navigation_bar-title"
+			:style="{ opacity: transparent || opacity >= maxOpacity ? 1 : opacity, color: color, paddingTop: top - statusBarHeight + 'px' }"
+			v-if="title && !isCustom"
+		>
+			{{ title }}
+		</view>
+		<slot />
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiNavigationBar',
+	props: {
+		//NavigationBar标题
+		title: {
+			type: String,
+			default: ''
+		},
+		//NavigationBar标题颜色
+		color: {
+			type: String,
+			default: '#333'
+		},
+		//NavigationBar背景颜色,不支持rgb
+		backgroundColor: {
+			type: String,
+			default: '#fff'
+		},
+		//是否需要分割线
+		splitLine: {
+			type: Boolean,
+			default: false
+		},
+		//是否设置不透明度
+		isOpacity: {
+			type: Boolean,
+			default: true
+		},
+		//不透明度最大值 0-1
+		maxOpacity: {
+			type: [Number, String],
+			default: 1
+		},
+		//背景透明 【设置该属性，则背景透明，只出现内容，isOpacity和maxOpacity失效】
+		transparent: {
+			type: Boolean,
+			default: false
+		},
+		//滚动条滚动距离
+		scrollTop: {
+			type: [Number, String],
+			default: 0
+		},
+		/*
+			 isOpacity 为true时生效
+			 opacity=scrollTop /windowWidth * scrollRatio
+			*/
+		scrollRatio: {
+			type: [Number, String],
+			default: 0.3
+		},
+		//是否自定义header内容
+		isCustom: {
+			type: Boolean,
+			default: false
+		},
+		//是否沉浸式
+		isImmersive: {
+			type: Boolean,
+			default: true
+		},
+		isFixed: {
+			type: Boolean,
+			default: true
+		},
+		//是否开启高斯模糊效果[仅在支持的浏览器有效果]
+		backdropFilter: {
+			type: Boolean,
+			default: false
+		},
+		//下拉隐藏NavigationBar，主要针对有回弹效果ios端
+		dropDownHide: {
+			type: Boolean,
+			default: false
+		},
+		//z-index设置
+		zIndex: {
+			type: [Number, String],
+			default: 9998
+		}
+	},
+	watch: {
+		scrollTop(newValue, oldValue) {
+			if (this.isOpacity && !this.transparent) {
+				this.opacityChange();
+			}
+		},
+		backgroundColor(val) {
+			if (val) {
+				this.background = this.hexToRgb(val);
+			}
+		}
+	},
+	data() {
+		return {
+			width: 375, //header宽度
+			left: 375, //小程序端 左侧距胶囊按钮距离
+			height: 44, //header高度
+			top: 0,
+			scrollH: 1, //滚动总高度,计算opacity
+			opacity: 1, //0-1
+			statusBarHeight: 0, //状态栏高度
+			background: '255,255,255', //header背景色
+			dropDownOpacity: 1
+		};
+	},
+	created() {
+		this.dropDownOpacity = this.backdropFilter && 0;
+		this.opacity = this.isOpacity || this.transparent ? 0 : this.maxOpacity;
+		this.background = this.hexToRgb(this.backgroundColor);
+		let obj = {};
+		// #ifdef MP-WEIXIN
+		obj = wx.getMenuButtonBoundingClientRect();
+		// #endif
+		// #ifdef MP-BAIDU
+		obj = swan.getMenuButtonBoundingClientRect();
+		// #endif
+		// #ifdef MP-ALIPAY
+		my.hideAddToDesktopMenu();
+		// #endif
+		uni.getSystemInfo({
+			success: res => {
+				this.statusBarHeight = res.statusBarHeight;
+				this.width = res.windowWidth;
+				this.left = obj.left || res.windowWidth;
+				if (this.isImmersive) {
+					this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
+				}
+				this.scrollH = res.windowWidth * this.scrollRatio;
+				this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
+				this.$emit('init', {
+					width: this.width,
+					height: this.height,
+					left: this.left,
+					top: this.top,
+					statusBarHeight: this.statusBarHeight,
+					opacity: this.opacity,
+					windowHeight: res.windowHeight
+				});
+			}
+		});
+	},
+	methods: {
+		hexToRgb(hex) {
+			let rgb = '255,255,255';
+			if (hex && ~hex.indexOf('#')) {
+				if (hex.length === 4) {
+					let text = hex.substring(1, 4);
+					hex = '#' + text + text;
+				}
+				let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+				if (result) {
+					rgb = `${parseInt(result[1], 16)},${parseInt(result[2], 16)},${parseInt(result[3], 16)}`;
+				}
+			}
+			return rgb;
+		},
+		opacityChange() {
+			if (this.dropDownHide) {
+				if (this.scrollTop < 0) {
+					if (this.dropDownOpacity > 0) {
+						this.dropDownOpacity = 1 - Math.abs(this.scrollTop) / 30;
+					}
+				} else {
+					this.dropDownOpacity = 1;
+				}
+			}
+
+			let scroll = this.scrollTop <= 1 ? 0 : this.scrollTop;
+			let opacity = scroll / this.scrollH;
+			if ((this.opacity >= this.maxOpacity && opacity >= this.maxOpacity) || (this.opacity == 0 && opacity == 0)) {
+				return;
+			}
+			this.opacity = opacity > this.maxOpacity ? this.maxOpacity : opacity;
+			if (this.backdropFilter) {
+				this.dropDownOpacity = this.opacity >= this.maxOpacity ? 1 : this.opacity;
+			}
+			this.$emit('change', {
+				opacity: this.opacity
+			});
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-navigation-bar {
+	width: 100%;
+	transition: opacity 0.4s;
+}
+.tui-backdrop__filter {
+	/* Safari for macOS & iOS */
+	-webkit-backdrop-filter: blur(15px);
+	/* Google Chrome */
+	backdrop-filter: blur(15px);
+}
+
+.tui-navbar-fixed {
+	position: fixed;
+	left: 0;
+	top: 0;
+}
+
+.tui-status-bar {
+	width: 100%;
+}
+
+.tui-navigation_bar-title {
+	width: 100%;
+	font-size: 17px;
+	line-height: 17px;
+	/* #ifndef APP-PLUS */
+	font-weight: 500;
+	/* #endif */
+	height: 32px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.tui-bar-line::after {
+	content: '';
+	position: absolute;
+	border-bottom: 1rpx solid #eaeef1;
+	-webkit-transform: scaleY(0.5);
+	transform: scaleY(0.5);
+	bottom: 0;
+	right: 0;
+	left: 0;
+}
+</style>
diff --git a/components/thorui/tui-no-data/tui-no-data.vue b/components/thorui/tui-no-data/tui-no-data.vue
new file mode 100644
index 0000000..c825052
--- /dev/null
+++ b/components/thorui/tui-no-data/tui-no-data.vue
@@ -0,0 +1,117 @@
+<template>
+	<view class="tui-nodata-box" :class="[fixed?'tui-nodata-fixed':'']">
+		<image v-if="imgUrl" :src="imgUrl" class="tui-tips-icon" :style="{width:imgWidth+'rpx',height:imgHeight+'rpx'}"></image>
+		<view class="tui-tips-content">
+			<slot></slot>
+		</view>
+		<view class="tui-tips-btn" hover-class="tui-btn__hover" :hover-stay-time="150" :style="{width:btnWidth+'rpx',height:btnHeight+'rpx',background:backgroundColor,borderRadius:radius,fontSize:size+'rpx'}" v-if="btnText"  @tap="handleClick">{{btnText}}</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tuiNoData",
+		props: {
+			//是否垂直居中
+			fixed: {
+				type: Boolean,
+				default: true
+			},
+			//图片地址，没有则不显示
+			imgUrl: {
+				type: String,
+				default: ""
+			},
+			//图片宽度
+			imgWidth: {
+				type: Number,
+				default: 200
+			},
+			//图片高度
+			imgHeight:{
+				type: Number,
+				default: 200
+			},
+			//按钮宽度
+			btnWidth:{
+				type: Number,
+				default: 200
+			},
+			btnHeight:{
+				type: Number,
+				default: 60
+			},
+			//按钮文字，没有则不显示
+			btnText:{
+				type:String,
+				default: ""
+			},
+			//按钮背景色
+			backgroundColor:{
+				type:String,
+				default: "#EB0909"
+			},
+			size:{
+				type:Number,
+				default:28
+			},
+			radius:{
+				type:String,
+				default:'8rpx'
+			}
+		},
+		methods: {
+			handleClick(e) {
+				this.$emit('click', {});
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-nodata-box {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.tui-nodata-fixed {
+		width: 90%;
+		position: fixed;
+		left: 50%;
+		top: 50%;
+		-webkit-transform: translate(-50%, -50%);
+		transform: translate(-50%, -50%);
+	}
+
+	.tui-tips-icon {
+		display: block;
+		flex-shrink: 0;
+		width: 280rpx;
+		height: 280rpx;
+		margin-bottom: 40rpx;
+	}
+
+	.tui-tips-content {
+		text-align: center;
+		color: #666666;
+		font-size: 28rpx;
+		padding: 0 50rpx 28rpx 50rpx;
+		box-sizing: border-box;
+		word-break: break-all;
+		word-wrap: break-word;
+	}
+
+	.tui-tips-btn {
+		color: #fff;
+		margin: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.tui-btn__hover{
+		opacity: 0.5;
+	}
+	
+</style>
diff --git a/components/thorui/tui-nomore/tui-nomore.vue b/components/thorui/tui-nomore/tui-nomore.vue
new file mode 100644
index 0000000..cbc9d61
--- /dev/null
+++ b/components/thorui/tui-nomore/tui-nomore.vue
@@ -0,0 +1,115 @@
+<template>
+	<view class="tui-nomore-class tui-loadmore-none">
+		<view :class="[isDot?'tui-nomore-dot':'tui-nomore']">
+			<view :style="{backgroundColor:backgroundColor}" :class="[isDot?'tui-dot-text':'tui-nomore-text']">{{isDot?dotText:text}}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tuiNomore",
+		props: {
+			//当前页面背景颜色
+			backgroundColor: {
+				type: String,
+				default: "#fafafa"
+			},
+			//是否以圆点代替 "没有更多了"
+			isDot: {
+				type: Boolean,
+				default: false
+			},
+			//isDot为false时生效
+			text: {
+				type: String,
+				default: "没有更多了"
+			}
+		},
+		data() {
+			return {
+				dotText: "●"
+			};
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-loadmore-none {
+		width: 50%;
+		margin: 1.5em auto;
+		line-height: 1.5em;
+		font-size: 24rpx;
+		display: flex;
+		justify-content: center;
+	}
+
+	.tui-nomore {
+		width: 100%;
+		height: 100%;
+		position: relative;
+		display: flex;
+		justify-content: center;
+		margin-top: 10rpx;
+		padding-bottom: 6rpx;
+	}
+
+	.tui-nomore::before {
+		content: ' ';
+		position: absolute;
+		border-bottom: 1rpx solid #e5e5e5;
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+		width: 100%;
+		top: 18rpx;
+		left: 0;
+	}
+
+	.tui-nomore-text {
+		color: #999;
+		font-size: 24rpx;
+		text-align: center;
+		padding: 0 18rpx;
+		height: 36rpx;
+		line-height: 36rpx;
+		position: relative;
+		z-index: 1;
+	}
+
+	.tui-nomore-dot {
+		position: relative;
+		text-align: center;
+		-webkit-display: flex;
+		display: flex;
+		-webkit-justify-content: center;
+		justify-content: center;
+		margin-top: 10rpx;
+		padding-bottom: 6rpx;
+	}
+
+	.tui-nomore-dot::before {
+		content: '';
+		position: absolute;
+		border-bottom: 1rpx solid #e5e5e5;
+		-webkit-transform: scaleY(0.5)  translateX(-50%);
+		transform: scaleY(0.5)  translateX(-50%);
+		width: 360rpx;
+		top: 18rpx;
+		left: 50%;
+	}
+
+	.tui-dot-text {
+		position: relative;
+		color: #e5e5e5;
+		font-size: 10px;
+		text-align: center;
+		width: 50rpx;
+		height: 36rpx;
+		line-height: 36rpx;
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		-webkit-transform-origin: center center;
+		transform-origin: center center;
+		z-index: 1;
+	}
+</style>
diff --git a/components/thorui/tui-numberbox/tui-numberbox.vue b/components/thorui/tui-numberbox/tui-numberbox.vue
new file mode 100644
index 0000000..dd301f0
--- /dev/null
+++ b/components/thorui/tui-numberbox/tui-numberbox.vue
@@ -0,0 +1,222 @@
+<template>
+	<view class="tui-numberbox">
+		<view
+			class="tui-numbox-icon tui-icon-reduce "
+			:class="[disabled || min >= inputValue ? 'tui-disabled' : '']"
+			@tap="reduce"
+			:style="{ color: iconColor, fontSize: iconSize + 'rpx' }"
+		></view>
+		<input
+			type="number"
+			v-model="inputValue"
+			:disabled="disabled"
+			@blur="blur"
+			class="tui-num-input"
+			:style="{ color: color, fontSize: size + 'rpx', backgroundColor: backgroundColor, height: height + 'rpx', minHeight: height + 'rpx', width: width + 'rpx' }"
+		/>
+		<view
+			class="tui-numbox-icon tui-icon-plus"
+			:class="[disabled || inputValue >= max ? 'tui-disabled' : '']"
+			@tap="plus"
+			:style="{ color: iconColor, fontSize: iconSize + 'rpx' }"
+		></view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiNumberbox',
+	props: {
+		value: {
+			type: Number,
+			default: 1
+		},
+		//最小值
+		min: {
+			type: Number,
+			default: 1
+		},
+		//最大值
+		max: {
+			type: Number,
+			default: 99
+		},
+		//迈步大小 1 1.1 10...
+		step: {
+			type: Number,
+			default: 1
+		},
+		//是否禁用操作
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		//加减图标大小 rpx
+		iconSize: {
+			type: Number,
+			default: 26
+		},
+		iconColor: {
+			type: String,
+			default: '#666666'
+		},
+		//input 高度
+		height: {
+			type: Number,
+			default: 42
+		},
+		//input 宽度
+		width: {
+			type: Number,
+			default: 80
+		},
+		size: {
+			type: Number,
+			default: 28
+		},
+		//input 背景颜色
+		backgroundColor: {
+			type: String,
+			default: '#F5F5F5'
+		},
+		//input 字体颜色
+		color: {
+			type: String,
+			default: '#333'
+		},
+		//索引值，列表中使用
+		index: {
+			type: [Number, String],
+			default: 0
+		},
+		//自定义参数
+		custom: {
+			type: [Number, String],
+			default: 0
+		}
+	},
+	created() {
+		this.inputValue = +this.value;
+	},
+	data() {
+		return {
+			inputValue: 0
+		};
+	},
+	watch: {
+		value(val) {
+			this.inputValue = +val;
+		}
+	},
+	methods: {
+		getScale() {
+			let scale = 1;
+			//浮点型
+			if (!Number.isInteger(this.step)) {
+				scale = Math.pow(10, (this.step + '').split('.')[1].length);
+			}
+			return scale;
+		},
+		calcNum: function(type) {
+			if (this.disabled) {
+				return;
+			}
+			const scale = this.getScale();
+			let num = this.inputValue * scale;
+			let step = this.step * scale;
+			if (type === 'reduce') {
+				num -= step;
+			} else if (type === 'plus') {
+				num += step;
+			}
+			let value = num / scale;
+			if (type === 'plus' && value < this.min) {
+				value = this.min;
+			} else if (type === 'reduce' && value > this.max) {
+				value = this.max;
+			}
+			if (value < this.min || value > this.max) {
+				return;
+			}
+			this.handleChange(value, type);
+		},
+		plus: function() {
+			this.calcNum('plus');
+		},
+		reduce: function() {
+			this.calcNum('reduce');
+		},
+		blur: function(e) {
+			let value = e.detail.value;
+			if (value) {
+				if (~value.indexOf('.') && Number.isInteger(this.step)) {
+					value = value.split('.')[0];
+				}
+				value = Number(value);
+				if (value > this.max) {
+					value = this.max;
+				} else if (value < this.min) {
+					value = this.min;
+				}
+			} else {
+				value = this.min;
+			}
+			if ((value == this.value && value != this.inputValue) || !e.detail.value) {
+				this.inputValue = value;
+			}
+			this.handleChange(value, 'blur');
+		},
+		handleChange(value, type) {
+			if (this.disabled) return;
+			this.$emit('change', {
+				value: value,
+				type: type,
+				index: this.index,
+				custom: this.custom
+			});
+		}
+	}
+};
+</script>
+
+<style scoped>
+@font-face {
+	font-family: 'numberbox';
+	src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAASQAA0AAAAABtwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEdAAAABoAAAAciBpnRUdERUYAAARUAAAAHgAAAB4AKQALT1MvMgAAAZwAAABDAAAAVjxzSINjbWFwAAAB9AAAAEYAAAFK5zLpOGdhc3AAAARMAAAACAAAAAj//wADZ2x5ZgAAAkgAAACHAAAAnIfIEjxoZWFkAAABMAAAAC8AAAA2FZWEOWhoZWEAAAFgAAAAHAAAACQH3gOFaG10eAAAAeAAAAARAAAAEgwAAAFsb2NhAAACPAAAAAwAAAAMADAATm1heHAAAAF8AAAAHwAAACABEAAobmFtZQAAAtAAAAFJAAACiCnmEVVwb3N0AAAEHAAAAC0AAABV/+8iFXjaY2BkYGAA4gVmC5Tj+W2+MnCzMIDATWsFOQT9v5GFgbkeyOVgYAKJAgDrogf+AHjaY2BkYGBu+N/AEMPCAAJAkpEBFbAAAEcKAm142mNgZGBgYGWQYQDRDAxMQMwFhAwM/8F8BgALpAE5AHjaY2BkYWCcwMDKwMDUyXSGgYGhH0IzvmYwYuQAijKwMjNgBQFprikMDs9Yn01kbvjfwBDD3MDQABRmBMkBAOXpDHEAeNpjYYAAFghmZGAAAACdAA4AAAB42mNgYGBmgGAZBkYGEHAB8hjBfBYGDSDNBqQZGZiesT6b+P8/AwOElvwnWQxVDwSMbAxwDiMTkGBiQAWMDMMeAABRZwszAAAAAAAAAAAAAAAwAE542iWKQQrCMBBF5xNpd0pQ7EIoTEnahSCTUNqdWz2A9TrieXKeXCc1qcPn/zfzh0BYv2pVH7oQgbvqdG5Yt/DTrNlPYz+wHvuuqhFSME4sFshTgKUsKfhH5lg8BSul3i5bS3mQdd0RIh2IjnvUrkXDd8zuhuFt86tY9fonIsSYgsXpB+cCGosAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOWMGiTIxMjMwiWZmJQJRXVQoigTgjMd9QGIsgAFDsEBsAAAAAAAAB//8AAgABAAAADAAAABYAAAACAAEAAwAEAAEABAAAAAIAAAAAeNpjYGBgZACCq0vUOUD0TWsFORgNADPBBE4AAA==)
+		format('woff');
+	font-weight: normal;
+	font-style: normal;
+}
+
+.tui-numbox-icon {
+	font-family: 'numberbox' !important;
+	font-style: normal;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	padding: 10rpx;
+}
+
+.tui-icon-reduce:before {
+	content: '\e691';
+}
+
+.tui-icon-plus:before {
+	content: '\e605';
+}
+
+.tui-numberbox {
+	display: -webkit-inline-flex;
+	display: inline-flex;
+	align-items: center;
+}
+
+.tui-num-input {
+	text-align: center;
+	margin: 0 12rpx;
+	font-weight: 400;
+}
+
+.tui-disabled {
+	color: #ededed !important;
+}
+</style>
diff --git a/components/thorui/tui-overflow-hidden/tui-overflow-hidden.vue b/components/thorui/tui-overflow-hidden/tui-overflow-hidden.vue
new file mode 100644
index 0000000..20f4a7a
--- /dev/null
+++ b/components/thorui/tui-overflow-hidden/tui-overflow-hidden.vue
@@ -0,0 +1,131 @@
+<template>
+	<view class="tui-overflow__text"
+		:class="[type==1?'tui-overflow__hidden':'',type==2 && !removeGradient?'tui-gradient__hidden':'',lineClamp==1 && type==1?'tui-text__nowrap':'']"
+		:style="{width:width,height:type==1?'auto':(removeGradient?'auto':height),padding:type==2?padding:'0',background:backgroundColor,fontSize:size+'rpx',color:color,fontWeight:bold?'bold':'normal','-webkit-line-clamp':type==1?lineClamp:'none',textOverflow:textOverflow}"
+		@tap="handleClick">
+		<slot></slot>
+		<view class="tui-gradient__box" :style="{background:getBgColor}" v-if="type==2 && !removeGradient"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tui-overflow-hidden",
+		props: {
+			//内容区域宽度
+			width: {
+				type: String,
+				default: '100%'
+			},
+			//内容区域高度，type=2时生效且需要传入具体值，高度值要低于实际内容高度
+			height: {
+				type: String,
+				default: 'auto'
+			},
+			//padding值，type=2时生效
+			padding: {
+				type: String,
+				default: '0'
+			},
+			//内容区域背景色
+			backgroundColor: {
+				type: String,
+				default: 'transparent'
+			},
+			//文本字体大小 rpx
+			size: {
+				type: [Number, String],
+				default: 32
+			},
+			//文本字体颜色
+			color: {
+				type: String,
+				default: '#333'
+			},
+			//文本内容是否加粗 
+			bold: {
+				type: Boolean,
+				default: false
+			},
+			//隐藏类型：1-文本超出设定行数隐藏，2-渐变隐藏
+			type: {
+				type: [Number, String],
+				default: 1
+			},
+			//超出多少行开始隐藏，type=1时生效
+			lineClamp: {
+				type: [Number, String],
+				default: 2
+			},
+			//clip|ellipsis|string,参考CSS text-overflow 属性
+			textOverflow: {
+				type: String,
+				default: 'ellipsis'
+			},
+			//渐变隐藏遮罩背景色,与页面或内容区域背景色保持一致
+			gradientColor: {
+				type: String,
+				default: '#fff'
+			},
+			//移除渐变隐藏，显示全部内容，type=2时生效
+			removeGradient: {
+				type: Boolean,
+				default: false
+			},
+			//索引值
+			index: {
+				type: Number,
+				default: 0
+			}
+		},
+		computed: {
+			getBgColor() {
+				return `-webkit-linear-gradient(top, rgba(255,255,255,0), ${this.gradientColor} 100%)`
+			}
+		},
+		methods: {
+			handleClick(e) {
+				this.$emit('click', {
+					index: this.index
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-overflow__text {
+		position: relative;
+		box-sizing: border-box;
+		flex-shrink: 0;
+	}
+
+	.tui-overflow__hidden {
+		display: -webkit-box;
+		overflow: hidden;
+		word-break: break-all;
+		white-space: normal;
+		-webkit-box-orient: vertical;
+
+	}
+
+	.tui-gradient__hidden {
+		display: block;
+		overflow: hidden;
+		word-break: break-all;
+	}
+
+	.tui-text__nowrap {
+		display: inline-block !important;
+		word-break: normal !important;
+		white-space: nowrap !important;
+	}
+
+	.tui-gradient__box {
+		width: 100%;
+		position: absolute;
+		top: 0;
+		height: 100%;
+		left: 0;
+	}
+</style>
diff --git a/components/thorui/tui-picture-cropper/tui-picture-cropper.vue b/components/thorui/tui-picture-cropper/tui-picture-cropper.vue
new file mode 100644
index 0000000..f9b5328
--- /dev/null
+++ b/components/thorui/tui-picture-cropper/tui-picture-cropper.vue
@@ -0,0 +1,699 @@
+<template>
+	<view class="tui-container" @touchmove.stop.prevent="stop">
+		<view
+			class="tui-image-cropper"
+			:change:prop="parse.propsChange"
+			:prop="props"
+			:data-lockRatio="lockRatio"
+			:data-lockWidth="lockWidth"
+			:data-lockHeight="lockHeight"
+			:data-maxWidth="maxWidth"
+			:data-minWidth="minWidth"
+			:data-maxHeight="maxHeight"
+			:data-minHeight="minHeight"
+			:data-width="width"
+			:data-height="height"
+			:data-limitMove="limitMove"
+			:data-windowHeight="sysInfo.windowHeight || 600"
+			:data-windowWidth="sysInfo.windowWidth || 400"
+			:data-imgTop="imgTop"
+			:data-imgLeft="imgLeft"
+			:data-imgWidth="imgWidth"
+			:data-imgHeight="imgHeight"
+			:data-angle="angle"
+			@touchend="parse.cutTouchEnd"
+			@touchstart="parse.cutTouchStart"
+			@touchmove="parse.cutTouchMove"
+		>
+			<view class="tui-content">
+				<view class="tui-content-top tui-bg-transparent" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
+				<view class="tui-content-middle">
+					<view class="tui-bg-transparent tui-wxs-bg" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
+					<view class="tui-cropper-box" :style="{ borderColor: borderColor, transitionProperty: cutAnimation ? '' : 'background' }">
+						<view
+							v-for="(item, index) in 4"
+							:key="index"
+							class="tui-edge"
+							:class="[`tui-${index < 2 ? 'top' : 'bottom'}-${index === 0 || index === 2 ? 'left' : 'right'}`]"
+							:style="{
+								width: edgeWidth,
+								height: edgeWidth,
+								borderColor: edgeColor,
+								borderWidth: edgeBorderWidth,
+								left: index === 0 || index === 2 ? `-${edgeOffsets}` : 'auto',
+								right: index === 1 || index === 3 ? `-${edgeOffsets}` : 'auto',
+								top: index < 2 ? `-${edgeOffsets}` : 'auto',
+								bottom: index > 1 ? `-${edgeOffsets}` : 'auto'
+							}"
+						></view>
+					</view>
+					<view class="tui-flex-auto tui-bg-transparent" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
+				</view>
+				<view class="tui-flex-auto tui-bg-transparent" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
+			</view>
+			<image
+				@load="imageLoad"
+				@error="imageLoad"
+				@touchstart="parse.touchstart"
+				@touchmove="parse.touchmove"
+				@touchend="parse.touchend"
+				:data-minScale="minScale"
+				:data-maxScale="maxScale"
+				:data-disableRotate="disableRotate"
+				:style="{
+					width: imgWidth ? imgWidth + 'px' : 'auto',
+					height: imgHeight ? imgHeight + 'px' : 'auto',
+					transitionDuration: (cutAnimation ? 0.3 : 0) + 's'
+				}"
+				class="tui-cropper-image"
+				:src="imageUrl"
+				v-if="imageUrl"
+				mode="widthFix"
+			></image>
+		</view>
+		<canvas
+			canvas-id="tui-image-cropper"
+			id="tui-image-cropper"
+			:disable-scroll="true"
+			:style="{ width: CROPPER_WIDTH * scaleRatio + 'px', height: CROPPER_HEIGHT * scaleRatio + 'px' }"
+			class="tui-cropper-canvas"
+		></canvas>
+		<view class="tui-cropper-tabbar" v-if="!custom">
+			<view class="tui-op-btn" @tap.stop="back">取消</view>
+			<image :src="rotateImg" class="tui-rotate-img" @tap="setAngle"></image>
+			<view class="tui-op-btn" @tap.stop="getImage">完成</view>
+		</view>
+	</view>
+</template>
+<script src="./tui-picture-cropper.wxs" module="parse" lang="wxs"></script>
+<script>
+/**
+ * 注意：组件中使用的图片地址，将文件复制到自己项目中
+ * 如果图片位置与组件同级，编译成小程序时图片会丢失
+ * 拷贝static下整个components文件夹
+ *也可直接转成base64（不建议）
+ * */
+export default {
+	name: 'tuiPictureCropper',
+	props: {
+		//图片路径
+		imageUrl: {
+			type: String,
+			default: ''
+		},
+		/*
+		 默认正方形，可修改大小控制比例
+		 裁剪框高度 px
+		*/
+		height: {
+			type: Number,
+			default: 280
+		},
+		//裁剪框宽度 px
+		width: {
+			type: Number,
+			default: 280
+		},
+		//裁剪框最小宽度 px
+		minWidth: {
+			type: Number,
+			default: 100
+		},
+		//裁剪框最小高度 px
+		minHeight: {
+			type: Number,
+			default: 100
+		},
+		//裁剪框最大宽度 px
+		maxWidth: {
+			type: Number,
+			default: 360
+		},
+		//裁剪框最大高度 px
+		maxHeight: {
+			type: Number,
+			default: 360
+		},
+		//裁剪框border颜色
+		borderColor: {
+			type: String,
+			default: 'rgba(255,255,255,0.1)'
+		},
+		//裁剪框边缘线颜色
+		edgeColor: {
+			type: String,
+			default: '#FFFFFF'
+		},
+		//裁剪框边缘线宽度 w=h
+		edgeWidth: {
+			type: String,
+			default: '34rpx'
+		},
+		//裁剪框边缘线border宽度
+		edgeBorderWidth: {
+			type: String,
+			default: '6rpx'
+		},
+		//偏移距离，根据edgeBorderWidth进行调整
+		edgeOffsets: {
+			type: String,
+			default: '6rpx'
+		},
+		/**
+		 * 如果宽度和高度都为true则裁剪框禁止拖动
+		 * 裁剪框宽度锁定
+		 */
+		lockWidth: {
+			type: Boolean,
+			default: false
+		},
+		//裁剪框高度锁定
+		lockHeight: {
+			type: Boolean,
+			default: false
+		},
+		//锁定裁剪框比例（放大或缩小）
+		lockRatio: {
+			type: Boolean,
+			default: false
+		},
+		//生成的图片尺寸相对剪裁框的比例
+		scaleRatio: {
+			type: Number,
+			default: 2
+		},
+		//图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理
+		quality: {
+			type: Number,
+			default: 0.8
+		},
+		//图片旋转角度
+		rotateAngle: {
+			type: Number,
+			default: 0
+		},
+		//图片最小缩放比
+		minScale: {
+			type: Number,
+			default: 0.5
+		},
+		//图片最大缩放比
+		maxScale: {
+			type: Number,
+			default: 2
+		},
+		//是否禁用触摸旋转（为false则可以触摸转动图片，limitMove为false生效）
+		disableRotate: {
+			type: Boolean,
+			default: true
+		},
+		//是否限制移动范围(剪裁框只能在图片内,为true不可触摸转动图片)
+		limitMove: {
+			type: Boolean,
+			default: true
+		},
+		//自定义操作栏（为true时隐藏底部操作栏）
+		custom: {
+			type: Boolean,
+			default: false
+		},
+		//值发生改变开始裁剪（custom为true时生效）
+		startCutting: {
+			type: [Number, Boolean],
+			default: 0
+		},
+		/**
+		 * 是否返回base64(H5端默认base64)
+		 * 支持平台：App，微信小程序，支付宝小程序,H5(默认url就是base64)
+		 **/
+		isBase64: {
+			type: Boolean,
+			default: false
+		},
+		//裁剪时是否显示loadding
+		loadding: {
+			type: Boolean,
+			default: true
+		},
+		//旋转icon
+		rotateImg: {
+			type: String,
+			default: '/static/components/cropper/img_rotate.png'
+		}
+	},
+	data() {
+		return {
+			TIME_CUT_CENTER: null,
+			CROPPER_WIDTH: 200, //裁剪框宽
+			CROPPER_HEIGHT: 200, //裁剪框高
+			cutX: 0, //画布x轴起点
+			cutY: 0, //画布y轴起点0
+			canvasWidth: 0,
+			canvasHeight: 0,
+			imgWidth: 0, //图片宽度
+			imgHeight: 0, //图片高度
+			scale: 1, //图片缩放比
+			angle: 0, //图片旋转角度
+			cutAnimation: false, //是否开启图片和裁剪框过渡
+			cutAnimationTime: null,
+			imgTop: 0, //图片上边距
+			imgLeft: 0, //图片左边距
+			ctx: null,
+			sysInfo: {},
+			props: '',
+			sizeChange: 0, //2
+			angleChange: 0, //3
+			resetChange: 0, //4
+			centerChange: 0 //5
+		};
+	},
+	watch: {
+		//定义变量然后利用change触发
+		imageUrl(val, oldVal) {
+			this.imageReset();
+			this.showLoading();
+			uni.getImageInfo({
+				src: val,
+				success: res => {
+					//计算图片尺寸
+					this.imgComputeSize(res.width, res.height);
+					if (this.limitMove) {
+						this.angleChange++;
+						this.props = `3,${this.angleChange}`;
+					}
+				},
+				fail: err => {
+					this.imgComputeSize();
+					if (this.limitMove) {
+						this.angleChange++;
+						this.props = `3,${this.angleChange}`;
+					}
+				}
+			});
+		},
+		rotateAngle(val) {
+			this.cutAnimation = true;
+			this.angle = val;
+			this.angleChanged(val);
+		},
+		cutAnimation(val) {
+			//开启过渡260毫秒之后自动关闭
+			clearTimeout(this.cutAnimationTime);
+			if (val) {
+				this.cutAnimationTime = setTimeout(() => {
+					this.cutAnimation = false;
+				}, 260);
+			}
+		},
+		limitMove(val) {
+			if (val) {
+				this.angleChanged(this.angle);
+			}
+		},
+		startCutting(val) {
+			if (this.custom && val) {
+				this.getImage();
+			}
+		}
+	},
+	mounted() {
+		this.sysInfo = uni.getSystemInfoSync();
+		this.imgTop = this.sysInfo.windowHeight / 2;
+		this.imgLeft = this.sysInfo.windowWidth / 2;
+		this.CROPPER_WIDTH = this.width;
+		this.CROPPER_HEIGHT = this.height;
+		this.canvasHeight = this.height;
+		this.canvasWidth = this.width;
+		this.ctx = uni.createCanvasContext('tui-image-cropper', this);
+		//初始化
+		setTimeout(() => {
+			this.props = '1,1';
+		}, 0);
+		setTimeout(() => {
+			this.$emit('ready', {});
+		}, 200);
+	},
+	methods: {
+		//网络图片转成本地文件[同步执行]
+		async getLocalImage(url) {
+			return await new Promise((resolve, reject) => {
+				uni.downloadFile({
+					url: url,
+					success: res => {
+						resolve(res.tempFilePath);
+					},
+					fail: res => {
+						reject(false)
+					}
+				})
+			})
+		},
+		//返回裁剪后图片信息
+		getImage() {
+			if (!this.imageUrl) {
+				uni.showToast({
+					title: '请选择图片',
+					icon: 'none'
+				});
+				return;
+			}
+			this.loadding && this.showLoading();
+			let draw =async () => {
+				//图片实际大小
+				let imgWidth = this.imgWidth * this.scale * this.scaleRatio;
+				let imgHeight = this.imgHeight * this.scale * this.scaleRatio;
+				//canvas和图片的相对距离
+				let xpos = this.imgLeft - this.cutX;
+				let ypos = this.imgTop - this.cutY;
+				//旋转画布
+				this.ctx.translate(xpos * this.scaleRatio, ypos * this.scaleRatio);
+				this.ctx.rotate((this.angle * Math.PI) / 180);
+				let imgUrl = this.imageUrl;
+				// #ifdef APP-PLUS || MP-WEIXIN
+				if (~this.imageUrl.indexOf('https:')) {
+					imgUrl = await this.getLocalImage(this.imageUrl)
+				}
+				// #endif
+				this.ctx.drawImage(imgUrl, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight);
+				this.ctx.draw(false, () => {
+					let params = {
+						width: this.canvasWidth * this.scaleRatio,
+						height: Math.round(this.canvasHeight * this.scaleRatio),
+						destWidth: this.canvasWidth * this.scaleRatio,
+						destHeight: Math.round(this.canvasHeight) * this.scaleRatio,
+						fileType: 'png',
+						quality: this.quality
+					};
+					let data = {
+						url: '',
+						base64: '',
+						width: this.canvasWidth * this.scaleRatio,
+						height: this.canvasHeight * this.scaleRatio
+					};
+					// #ifdef MP-ALIPAY
+
+					if (this.isBase64) {
+						this.ctx.toDataURL(params).then(dataURL => {
+							data.base64 = dataURL;
+							this.loadding && uni.hideLoading();
+							this.$emit('cropper', data);
+						});
+					} else {
+						this.ctx.toTempFilePath({
+							...params,
+							success: res => {
+								data.url = res.tempFilePath;
+								this.loadding && uni.hideLoading();
+								this.$emit('cropper', data);
+							}
+						});
+					}
+					// #endif
+
+					// #ifndef MP-ALIPAY
+					// #ifdef MP-BAIDU || MP-TOUTIAO || H5
+					this.isBase64 = false;
+					// #endif
+					if (this.isBase64) {
+						uni.canvasGetImageData({
+							canvasId: 'tui-image-cropper',
+							x: 0,
+							y: 0,
+							width: this.canvasWidth * this.scaleRatio,
+							height: Math.round(this.canvasHeight * this.scaleRatio),
+							success: res => {
+								const arrayBuffer = new Uint8Array(res.data);
+								const base64 = uni.arrayBufferToBase64(arrayBuffer);
+								data.base64 = base64;
+								this.loadding && uni.hideLoading();
+								this.$emit('cropper', data);
+							}
+						},this);
+					} else {
+						uni.canvasToTempFilePath(
+							{
+								...params,
+								canvasId: 'tui-image-cropper',
+								success: res => {
+									data.url = res.tempFilePath;
+									// #ifdef H5
+									data.base64 = res.tempFilePath;
+									// #endif
+									this.loadding && uni.hideLoading();
+									this.$emit('cropper', data);
+								},
+								fail(res) {
+									console.log(res);
+								}
+							},
+							this
+						);
+					}
+					// #endif
+				});
+			};
+			if (this.CROPPER_WIDTH != this.canvasWidth || this.CROPPER_HEIGHT != this.canvasHeight) {
+				this.CROPPER_WIDTH = this.canvasWidth;
+				this.CROPPER_HEIGHT = this.canvasHeight;
+				this.$nextTick(() => {
+					this.ctx.draw();
+					setTimeout(() => {
+						draw();
+					}, 100);
+				});
+			} else {
+				draw();
+			}
+		},
+		change(e) {
+			this.cutX = e.cutX || 0;
+			this.cutY = e.cutY || 0;
+			this.canvasWidth = e.canvasWidth || this.width;
+			this.canvasHeight = e.canvasHeight || this.height;
+			this.imgWidth = e.imgWidth || this.imgWidth;
+			this.imgHeight = e.imgHeight || this.imgHeight;
+			this.scale = e.scale || 1;
+			this.angle = e.angle || 0;
+			this.imgTop = e.imgTop || 0;
+			this.imgLeft = e.imgLeft || 0;
+		},
+		imageReset() {
+			this.scale = 1;
+			this.angle = 0;
+			let sys = this.sysInfo.windowHeight ? this.sysInfo : uni.getSystemInfoSync();
+			this.imgTop = sys.windowHeight / 2;
+			this.imgLeft = sys.windowWidth / 2;
+			this.resetChange++;
+			this.props = `4,${this.resetChange}`;
+			//初始化旋转角度 0deg
+			this.$emit('initAngle', {});
+		},
+		imageLoad(e) {
+			this.imageReset();
+			uni.hideLoading();
+			this.$emit('imageLoad', {});
+		},
+
+		imgComputeSize(width, height) {
+			//默认按图片最小边 = 对应裁剪框尺寸
+			let imgWidth = width,
+				imgHeight = height;
+			if (imgWidth && imgHeight) {
+				if (imgWidth / imgHeight > this.width / this.height) {
+					imgHeight = this.height;
+					imgWidth = (width / height) * imgHeight;
+				} else {
+					imgWidth = this.width;
+					imgHeight = (height / width) * imgWidth;
+				}
+			} else {
+				let sys = this.sysInfo.windowHeight ? this.sysInfo : uni.getSystemInfoSync();
+				imgWidth = sys.windowWidth;
+				imgHeight = 0;
+			}
+			this.imgWidth = imgWidth;
+			this.imgHeight = imgHeight;
+			this.sizeChange++;
+			this.props = `2,${this.sizeChange}`;
+		},
+		moveStop() {
+			clearTimeout(this.TIME_CUT_CENTER);
+			this.TIME_CUT_CENTER = setTimeout(() => {
+				if (!this.cutAnimation) {
+					this.cutAnimation = true;
+				}
+				this.centerChange++;
+				this.props = `5,${this.centerChange}`;
+			}, 666);
+		},
+		moveDuring() {
+			clearTimeout(this.TIME_CUT_CENTER);
+		},
+		showLoading() {
+			uni.showLoading({
+				title: '请稍候...',
+				mask: true
+			});
+		},
+		stop() {},
+		back() {
+			uni.navigateBack();
+		},
+		angleChanged(val) {
+			this.moveStop();
+			if (this.limitMove && val % 90) {
+				this.angle = Math.round(val / 90) * 90;
+			}
+			this.angleChange++;
+			this.props = `3,${this.angleChange}`;
+		},
+		setAngle() {
+			this.cutAnimation = true;
+			this.angle = this.angle + 90;
+			this.angleChanged(this.angle);
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-container {
+	width: 100vw;
+	height: 100vh;
+	background-color: rgba(0, 0, 0, 0.6);
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 1;
+}
+
+.tui-image-cropper {
+	width: 100vw;
+	height: 100vh;
+	position: absolute;
+}
+
+.tui-content {
+	width: 100vw;
+	height: 100vh;
+	position: absolute;
+	z-index: 9;
+	display: flex;
+	flex-direction: column;
+	pointer-events: none;
+}
+
+.tui-bg-transparent {
+	background-color: rgba(0, 0, 0, 0.6);
+	transition-duration: 0.3s;
+}
+
+.tui-content-top {
+	pointer-events: none;
+}
+
+.tui-content-middle {
+	width: 100%;
+	height: 200px;
+	display: flex;
+	box-sizing: border-box;
+}
+
+.tui-cropper-box {
+	position: relative;
+	/* transition-duration: 0.2s; */
+	border-style: solid;
+	border-width: 1rpx;
+	box-sizing: border-box;
+}
+
+.tui-flex-auto {
+	flex: auto;
+}
+
+.tui-cropper-image {
+	width: 100%;
+	border-style: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 2;
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+	transform-origin: center;
+}
+
+.tui-cropper-canvas {
+	position: fixed;
+	z-index: 10;
+	left: -2000px;
+	top: -2000px;
+	pointer-events: none;
+}
+
+.tui-edge {
+	border-style: solid;
+	pointer-events: auto;
+	position: absolute;
+	box-sizing: border-box;
+}
+
+.tui-top-left {
+	border-bottom-width: 0 !important;
+	border-right-width: 0 !important;
+}
+
+.tui-top-right {
+	border-bottom-width: 0 !important;
+	border-left-width: 0 !important;
+}
+
+.tui-bottom-left {
+	border-top-width: 0 !important;
+	border-right-width: 0 !important;
+}
+
+.tui-bottom-right {
+	border-top-width: 0 !important;
+	border-left-width: 0 !important;
+}
+
+.tui-cropper-tabbar {
+	width: 100%;
+	height: 120rpx;
+	padding: 0 40rpx;
+	box-sizing: border-box;
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	z-index: 99;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	color: #ffffff;
+	font-size: 32rpx;
+}
+
+.tui-cropper-tabbar::after {
+	content: ' ';
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+	-webkit-transform: scaleY(0.5) translateZ(0);
+	transform: scaleY(0.5) translateZ(0);
+	transform-origin: 0 100%;
+}
+
+.tui-op-btn {
+	height: 80rpx;
+	display: flex;
+	align-items: center;
+}
+
+.tui-rotate-img {
+	width: 44rpx;
+	height: 44rpx;
+}
+</style>
diff --git a/components/thorui/tui-picture-cropper/tui-picture-cropper.wxs b/components/thorui/tui-picture-cropper/tui-picture-cropper.wxs
new file mode 100644
index 0000000..7d7c119
--- /dev/null
+++ b/components/thorui/tui-picture-cropper/tui-picture-cropper.wxs
@@ -0,0 +1,560 @@
+var cropper = {
+	CUT_START: null,
+	cutX: 0, //画布x轴起点
+	cutY: 0, //画布y轴起点0
+	touchRelative: [{
+		x: 0,
+		y: 0
+	}], //手指或鼠标和图片中心的相对位置
+	flagCutTouch: false, //是否是拖动裁剪框
+	hypotenuseLength: 0, //双指触摸时斜边长度
+	flagEndTouch: false, //是否结束触摸
+	canvasWidth: 0,
+	canvasHeight: 0,
+	imgWidth: 0, //图片宽度
+	imgHeight: 0, //图片高度
+	scale: 1, //图片缩放比
+	angle: 0, //图片旋转角度
+	imgTop: 0, //图片上边距
+	imgLeft: 0, //图片左边距
+	//是否限制移动范围(剪裁框只能在图片内,为true不可触摸转动图片)
+	limitMove: true,
+	minHeight: 0,
+	maxHeight: 0,
+	minWidth: 0,
+	maxWidth: 0,
+	windowHeight: 0,
+	windowWidth: 0,
+	init: true
+}
+
+function bool(str) {
+	return str === 'true' || str == true ? true : false
+}
+
+function touchstart(e, ins) {
+	//var instance = e.instance;
+	// var state = instance.getState();
+	var touch = e.touches || e.changedTouches;
+	cropper.flagEndTouch = false;
+	if (touch.length == 1) {
+		cropper.touchRelative[0] = {
+			x: touch[0].pageX - cropper.imgLeft,
+			y: touch[0].pageY - cropper.imgTop
+		};
+	} else {
+		var width = Math.abs(touch[0].pageX - touch[1].pageX);
+		var height = Math.abs(touch[0].pageY - touch[1].pageY);
+		cropper.touchRelative = [{
+				x: touch[0].pageX - cropper.imgLeft,
+				y: touch[0].pageY - cropper.imgTop
+			},
+			{
+				x: touch[1].pageX - cropper.imgLeft,
+				y: touch[1].pageY - cropper.imgTop
+			}
+		];
+		cropper.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+	}
+
+}
+
+function moveDuring(ins) {
+	if (!ins) return;
+	ins.callMethod('moveDuring')
+}
+
+function moveStop(ins) {
+	if (!ins) return;
+	ins.callMethod('moveStop')
+};
+
+function setCutCenter(ins) {
+	var cutY = (cropper.windowHeight - cropper.canvasHeight) * 0.5;
+	var cutX = (cropper.windowWidth - cropper.canvasWidth) * 0.5;
+	//顺序不能变
+	cropper.imgTop = cropper.imgTop - cropper.cutY + cutY;
+	cropper.cutY = cutY; //截取的框上边距
+	cropper.imgLeft = cropper.imgLeft - cropper.cutX + cutX;
+	cropper.cutX = cutX; //截取的框左边距
+	styleUpdate(ins)
+	cutDetectionPosition(ins)
+	imgTransform(ins)
+	updateData(ins)
+}
+
+function touchmove(e, ins) {
+	var touch = e.touches || e.changedTouches;
+	if (cropper.flagEndTouch) return;
+	moveDuring(ins);
+	if (e.touches.length == 1) {
+		var left = touch[0].pageX - cropper.touchRelative[0].x,
+			top = touch[0].pageY - cropper.touchRelative[0].y;
+		cropper.imgLeft = left;
+		cropper.imgTop = top;
+		imgTransform(ins);
+		imgMarginDetectionPosition(ins);
+	} else {
+		var res = e.instance.getDataset();
+		var minScale = +res.minscale;
+		var maxScale = +res.maxscale;
+		var disableRotate = bool(res.disablerotate)
+		var width = Math.abs(touch[0].pageX - touch[1].pageX),
+			height = Math.abs(touch[0].pageY - touch[1].pageY),
+			hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)),
+			scale = cropper.scale * (hypotenuse / cropper.hypotenuseLength),
+			current_deg = 0;
+		scale = scale <= minScale ? minScale : scale;
+		scale = scale >= maxScale ? maxScale : scale;
+		cropper.scale = scale;
+		imgMarginDetectionScale(ins, true);
+		var touchRelative = [{
+				x: touch[0].pageX - cropper.imgLeft,
+				y: touch[0].pageY - cropper.imgTop
+			},
+			{
+				x: touch[1].pageX - cropper.imgLeft,
+				y: touch[1].pageY - cropper.imgTop
+			}
+		];
+		if (!disableRotate) {
+			var first_atan = (180 / Math.PI) * Math.atan2(touchRelative[0].y, touchRelative[0].x);
+			var first_atan_old = (180 / Math.PI) * Math.atan2(cropper.touchRelative[0].y, cropper.touchRelative[0].x);
+			var second_atan = (180 / Math.PI) * Math.atan2(touchRelative[1].y, touchRelative[1].x);
+			var second_atan_old = (180 / Math.PI) * Math.atan2(cropper.touchRelative[1].y, cropper.touchRelative[1].x);
+			var first_deg = first_atan - first_atan_old,
+				second_deg = second_atan - second_atan_old;
+			if (first_deg != 0) {
+				current_deg = first_deg;
+			} else if (second_deg != 0) {
+				current_deg = second_deg;
+			}
+		}
+		cropper.touchRelative = touchRelative;
+		cropper.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+		//更新视图
+		cropper.angle = cropper.angle + current_deg;
+		imgTransform(ins);
+	}
+}
+
+function touchend(e, ins) {
+	cropper.flagEndTouch = true;
+	moveStop(ins);
+	updateData(ins)
+}
+
+
+function cutTouchStart(e, ins) {
+	var touch = e.touches || e.changedTouches;
+	var currentX = touch[0].pageX;
+	var currentY = touch[0].pageY;
+
+	/*
+	 * (右下-1 右上-2 左上-3 左下-4)
+	 * left_x [3,4]
+	 * top_y [2,3]
+	 * right_x [1,2]
+	 * bottom_y [1,4]
+	 */
+	var left_x1 = cropper.cutX - 30;
+	var left_x2 = cropper.cutX + 30;
+
+	var top_y1 = cropper.cutY - 30;
+	var top_y2 = cropper.cutY + 30;
+
+	var right_x1 = cropper.cutX + cropper.canvasWidth - 30;
+	var right_x2 = cropper.cutX + cropper.canvasWidth + 30;
+
+	var bottom_y1 = cropper.cutY + cropper.canvasHeight - 30;
+	var bottom_y2 = cropper.cutY + cropper.canvasHeight + 30;
+
+	if (currentX > right_x1 && currentX < right_x2 && currentY > bottom_y1 && currentY < bottom_y2) {
+		moveDuring();
+		cropper.flagCutTouch = true;
+		cropper.flagEndTouch = true;
+		cropper.CUT_START = {
+			width: cropper.canvasWidth,
+			height: cropper.canvasHeight,
+			x: currentX,
+			y: currentY,
+			corner: 1
+		};
+	} else if (currentX > right_x1 && currentX < right_x2 && currentY > top_y1 && currentY < top_y2) {
+		moveDuring();
+		cropper.flagCutTouch = true;
+		cropper.flagEndTouch = true;
+		cropper.CUT_START = {
+			width: cropper.canvasWidth,
+			height: cropper.canvasHeight,
+			x: currentX,
+			y: currentY,
+			cutY: cropper.cutY,
+			cutX: cropper.cutX,
+			corner: 2
+		};
+	} else if (currentX > left_x1 && currentX < left_x2 && currentY > top_y1 && currentY < top_y2) {
+		moveDuring();
+		cropper.flagCutTouch = true;
+		cropper.flagEndTouch = true;
+		cropper.CUT_START = {
+			width: cropper.canvasWidth,
+			height: cropper.canvasHeight,
+			cutY: cropper.cutY,
+			cutX: cropper.cutX,
+			x: currentX,
+			y: currentY,
+			corner: 3
+		};
+	} else if (currentX > left_x1 && currentX < left_x2 && currentY > bottom_y1 && currentY < bottom_y2) {
+		moveDuring();
+		cropper.flagCutTouch = true;
+		cropper.flagEndTouch = true;
+		cropper.CUT_START = {
+			width: cropper.canvasWidth,
+			height: cropper.canvasHeight,
+			cutY: cropper.cutY,
+			cutX: cropper.cutX,
+			x: currentX,
+			y: currentY,
+			corner: 4
+		};
+	}
+}
+
+function cutTouchMove(e, ins) {
+	if (!cropper.CUT_START || cropper.CUT_START === 'null') return;
+	if (cropper.flagCutTouch) {
+		var touch = e.touches || e.changedTouches;
+		var res = e.instance.getDataset();
+		var lockRatio = bool(res.lockratio);
+		var lockWidth = bool(res.lockwidth);
+		var lockHeight = bool(res.lockheight);
+		if (lockRatio && (lockWidth || lockHeight)) return;
+		var width = cropper.canvasWidth,
+			height = cropper.canvasHeight,
+			cutY = cropper.cutY,
+			cutX = cropper.cutX;
+
+		var size_correct = function() {
+			width = width <= cropper.maxWidth ? (width >= cropper.minWidth ? width : cropper.minWidth) : cropper.maxWidth;
+			height = height <= cropper.maxHeight ? (height >= cropper.minHeight ? height : cropper.minHeight) : cropper.maxHeight;
+		}
+
+		var size_inspect = function() {
+			if ((width > cropper.maxWidth || width < cropper.minWidth || height > cropper.maxHeight || height < cropper.minHeight) &&
+				lockRatio) {
+				size_correct();
+				return false;
+			} else {
+				size_correct();
+				return true;
+			}
+		};
+		height = cropper.CUT_START.height + (cropper.CUT_START.corner > 1 && cropper.CUT_START.corner < 4 ? 1 : -1) * (
+			cropper.CUT_START.y - touch[0].pageY);
+		switch (cropper.CUT_START.corner) {
+			case 1:
+				width = cropper.CUT_START.width - cropper.CUT_START.x + touch[0].pageX;
+				if (lockRatio) {
+					height = width / (cropper.canvasWidth / cropper.canvasHeight);
+				}
+				if (!size_inspect()) return;
+				break;
+			case 2:
+				width = cropper.CUT_START.width - cropper.CUT_START.x + touch[0].pageX;
+				if (lockRatio) {
+					height = width / (cropper.canvasWidth / cropper.canvasHeight);
+				}
+				if (!size_inspect()) return;
+				cutY = cropper.CUT_START.cutY - (height - cropper.CUT_START.height);
+				break;
+			case 3:
+				width = cropper.CUT_START.width + cropper.CUT_START.x - touch[0].pageX;
+				if (lockRatio) {
+					height = width / (cropper.canvasWidth / cropper.canvasHeight);
+				}
+				if (!size_inspect()) return;
+				cutY = cropper.CUT_START.cutY - (height - cropper.CUT_START.height);
+				cutX = cropper.CUT_START.cutX - (width - cropper.CUT_START.width);
+				break;
+			case 4:
+				width = cropper.CUT_START.width + cropper.CUT_START.x - touch[0].pageX;
+				if (lockRatio) {
+					height = width / (cropper.canvasWidth / cropper.canvasHeight);
+				}
+				if (!size_inspect()) return;
+				cutX = cropper.CUT_START.cutX - (width - cropper.CUT_START.width);
+				break;
+			default:
+				break;
+		}
+		if (!lockWidth && !lockHeight) {
+			cropper.canvasWidth = width;
+			cropper.cutX = cutX;
+			cropper.canvasHeight = height;
+			cropper.cutY = cutY;
+			canvasHeight(ins);
+			canvasWidth(ins);
+		} else if (!lockWidth) {
+			cropper.canvasWidth = width;
+			cropper.cutX = cutX;
+			canvasWidth(ins);
+		} else if (!lockHeight) {
+			cropper.canvasHeight = height;
+			cropper.cutY = cutY;
+			canvasHeight(ins);
+		}
+		styleUpdate(ins)
+		imgMarginDetectionScale(ins);
+	}
+}
+
+//检测剪裁框位置是否在允许的范围内(屏幕内)
+function cutDetectionPosition(ins) {
+	var windowHeight = cropper.windowHeight,
+		windowWidth = cropper.windowWidth;
+
+	var cutDetectionPositionTop = function() {
+		//检测上边距是否在范围内
+		if (cropper.cutY < 0) {
+			cropper.cutY = 0;
+		}
+		if (cropper.cutY > windowHeight - cropper.canvasHeight) {
+			cropper.cutY = windowHeight - cropper.canvasHeight;
+		}
+	}
+
+	var cutDetectionPositionLeft = function() {
+		//检测左边距是否在范围内
+		if (cropper.cutX < 0) {
+			cropper.cutX = 0;
+		}
+		if (cropper.cutX > windowWidth - cropper.canvasWidth) {
+			cropper.cutX = windowWidth - cropper.canvasWidth;
+		}
+	}
+	//裁剪框坐标处理（如果只写一个参数则另一个默认为0，都不写默认居中）
+	if (cropper.cutY == null && cropper.cutX == null) {
+		var cutY = (windowHeight - cropper.canvasHeight) * 0.5;
+		var cutX = (windowWidth - cropper.canvasWidth) * 0.5;
+		cropper.cutY = cutY; //截取的框上边距
+		cropper.cutX = cutX; //截取的框左边距
+	} else if (cropper.cutY != null && cropper.cutX != null) {
+		cutDetectionPositionTop();
+		cutDetectionPositionLeft();
+	} else if (cropper.cutY != null && cropper.cutX == null) {
+		cutDetectionPositionTop();
+		cropper.cutX = (windowWidth - cropper.canvasWidth) / 2;
+	} else if (cropper.cutY == null && cropper.cutX != null) {
+		cutDetectionPositionLeft();
+		cropper.cutY = (windowHeight - cropper.canvasHeight) / 2;
+	}
+
+	styleUpdate(ins)
+}
+
+/**
+ * 图片边缘检测-缩放
+ */
+function imgMarginDetectionScale(ins, delay) {
+	if (!cropper.limitMove) return;
+	var scale = cropper.scale;
+	var imgWidth = cropper.imgWidth;
+	var imgHeight = cropper.imgHeight;
+	if ((cropper.angle / 90) % 2) {
+		imgWidth = cropper.imgHeight;
+		imgHeight = cropper.imgWidth;
+	}
+	if (imgWidth * scale < cropper.canvasWidth) {
+		scale = cropper.canvasWidth / imgWidth;
+	}
+	if (imgHeight * scale < cropper.canvasHeight) {
+		scale = Math.max(scale, cropper.canvasHeight / imgHeight);
+	}
+	imgMarginDetectionPosition(ins, scale, delay);
+}
+/**
+ * 图片边缘检测-位置
+ */
+function imgMarginDetectionPosition(ins, scale, delay) {
+	if (!cropper.limitMove) return;
+	var left = cropper.imgLeft;
+	var top = cropper.imgTop;
+	scale = scale || cropper.scale;
+	var imgWidth = cropper.imgWidth;
+	var imgHeight = cropper.imgHeight;
+	if ((cropper.angle / 90) % 2) {
+		imgWidth = cropper.imgHeight;
+		imgHeight = cropper.imgWidth;
+	}
+	left = cropper.cutX + (imgWidth * scale) / 2 >= left ? left : cropper.cutX + (imgWidth * scale) / 2;
+	left = cropper.cutX + cropper.canvasWidth - (imgWidth * scale) / 2 <= left ? left : cropper.cutX + cropper.canvasWidth -
+		(imgWidth * scale) / 2;
+	top = cropper.cutY + (imgHeight * scale) / 2 >= top ? top : cropper.cutY + (imgHeight * scale) / 2;
+	top = cropper.cutY + cropper.canvasHeight - (imgHeight * scale) / 2 <= top ? top : cropper.cutY + cropper.canvasHeight -
+		(imgHeight * scale) / 2;
+
+	cropper.imgLeft = left;
+	cropper.imgTop = top;
+	cropper.scale = scale;
+	styleUpdate(ins)
+	if (!delay || delay === 'null') {
+		imgTransform(ins);
+	}
+}
+
+
+function cutTouchEnd(e, ins) {
+	moveStop(ins);
+	cropper.flagCutTouch = false;
+	updateData(ins)
+}
+
+
+//改变截取框大小
+function computeCutSize(ins) {
+	if (cropper.canvasWidth > cropper.windowWidth) {
+		cropper.canvasWidth = cropper.windowWidth;
+		// canvasWidth(ins)
+	} else if (cropper.canvasWidth + cropper.cutX > cropper.windowWidth) {
+		cropper.cutX = cropper.windowWidth - cropper.cutX;
+	}
+	if (cropper.canvasHeight > cropper.windowHeight) {
+		cropper.canvasHeight = cropper.windowHeight;
+		// canvasHeight(ins)
+	} else if (cropper.canvasHeight + cropper.cutY > cropper.windowHeight) {
+		cropper.cutY = cropper.windowHeight - cropper.cutY;
+	}
+	// styleUpdate(ins)
+}
+
+function styleUpdate(ins) {
+	if (!ins) return;
+	ins.selectComponent('.tui-cropper-box').setStyle({
+		'width': cropper.canvasWidth + 'px',
+		'height': cropper.canvasHeight + 'px'
+	})
+	ins.selectComponent('.tui-content-middle').setStyle({
+		'height': cropper.canvasHeight + 'px'
+	})
+	ins.selectComponent('.tui-content-top').setStyle({
+		'height': cropper.cutY + 'px'
+	})
+	ins.selectComponent('.tui-wxs-bg').setStyle({
+		'width': cropper.cutX + 'px'
+	})
+
+}
+
+function imgTransform(ins) {
+	var owner = ins.selectComponent('.tui-cropper-image')
+	if (!owner) return
+	var x = cropper.imgLeft - cropper.imgWidth / 2;
+	var y = cropper.imgTop - cropper.imgHeight / 2;
+	owner.setStyle({
+		'transform': 'translate3d(' + x + 'px,' + y + 'px,0) scale(' + cropper.scale + ') rotate(' + cropper.angle + 'deg)'
+	})
+}
+
+function imageReset(ins) {
+	cropper.scale = 1;
+	cropper.angle = 0;
+	imgTransform(ins);
+}
+//监听截取框宽高变化
+function canvasWidth(ins) {
+	if (cropper.canvasWidth < cropper.minWidth) {
+		cropper.canvasWidth = cropper.minWidth;
+	}
+	if (!ins) return;
+	computeCutSize(ins);
+}
+
+function canvasHeight(ins) {
+	if (cropper.canvasHeight < cropper.minHeight) {
+		cropper.canvasHeight = cropper.minHeight;
+	}
+	if (!ins) return;
+	computeCutSize(ins);
+}
+
+function updateData(ins) {
+	if (!ins) return;
+	ins.callMethod('change', {
+		cutX: cropper.cutX,
+		cutY: cropper.cutY,
+		canvasWidth: cropper.canvasWidth,
+		canvasHeight: cropper.canvasHeight,
+		imgWidth: cropper.imgWidth,
+		imgHeight: cropper.imgHeight,
+		scale: cropper.scale,
+		angle: cropper.angle,
+		imgTop: cropper.imgTop,
+		imgLeft: cropper.imgLeft
+	})
+}
+
+function propsChange(prop, oldProp, ownerInstance, ins) {
+	if (prop && prop !== 'null') {
+		var params = prop.split(',')
+		var type = +params[0]
+		var dataset = ins.getDataset();
+		if (cropper.init || type == 4) {
+			cropper.maxHeight = +dataset.maxheight;
+			cropper.minHeight = +dataset.minheight;
+			cropper.maxWidth = +dataset.maxwidth;
+			cropper.minWidth = +dataset.minwidth;
+			cropper.canvasWidth = +dataset.width;
+			cropper.canvasHeight = +dataset.height;
+			cropper.imgTop = dataset.windowheight / 2;
+			cropper.imgLeft = dataset.windowwidth / 2;
+			cropper.imgWidth = +dataset.imgwidth;
+			cropper.imgHeight = +dataset.imgheight;
+			cropper.windowHeight = +dataset.windowheight;
+			cropper.windowWidth = +dataset.windowwidth;
+			cropper.init = false
+		} else if (type == 2 || type == 3) {
+			cropper.imgWidth = +dataset.imgwidth;
+			cropper.imgHeight = +dataset.imgheight;
+		}
+		cropper.limitMove = bool(dataset.limitmove);
+		cropper.angle = +dataset.angle;
+		if (type == 3) {
+			imgTransform(ownerInstance);
+		}
+		switch (type) {
+			case 1:
+				setCutCenter(ownerInstance);
+				//设置裁剪框大小>设置图片尺寸>绘制canvas
+				computeCutSize(ownerInstance);
+				//检查裁剪框是否在范围内
+				cutDetectionPosition(ownerInstance);
+				break;
+			case 2:
+				setCutCenter(ownerInstance);
+				break;
+			case 3:
+				imgMarginDetectionScale(ownerInstance)
+				break;
+			case 4:
+				imageReset(ownerInstance);
+				break;
+			case 5:
+				setCutCenter(ownerInstance);
+				break;
+			default:
+				break;
+		}
+	}
+}
+
+module.exports = {
+	touchstart: touchstart,
+	touchmove: touchmove,
+	touchend: touchend,
+	cutTouchStart: cutTouchStart,
+	cutTouchMove: cutTouchMove,
+	cutTouchEnd: cutTouchEnd,
+	propsChange: propsChange
+}
diff --git a/components/thorui/tui-popup/tui-popup.vue b/components/thorui/tui-popup/tui-popup.vue
new file mode 100644
index 0000000..3349d0c
--- /dev/null
+++ b/components/thorui/tui-popup/tui-popup.vue
@@ -0,0 +1,266 @@
+<template>
+	<view class="tui-popup__transition" :class="[ani.in]" :style="'transform:' + transform + ';' + stylesObject" @click="change" v-if="isShow" ref="ani"><slot></slot></view>
+</template>
+
+<script>
+// #ifdef APP-NVUE
+const animation = uni.requireNativePlugin('animation');
+// #endif
+
+export default {
+	name: 'tuiPopup',
+	props: {
+		show: {
+			type: Boolean,
+			default: false
+		},
+		/*
+		  [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out]
+		  过渡动画类型
+		*/
+		
+		modeClass: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		duration: {
+			type: Number,
+			default: 300
+		},
+		//styles 组件样式，同 css 样式
+		styles: {
+			type: Object,
+			default() {
+				return {
+					position: 'fixed',
+					bottom: 0,
+					top: 0,
+					left: 0,
+					right: 0,
+					/* #ifndef APP-NVUE */
+					display: 'flex',
+					/* #endif */
+					'justify-content': 'center',
+					'align-items': 'center'
+				};
+			}
+		}
+	},
+	data() {
+		return {
+			isShow: false,
+			transform: '',
+			ani: {
+				in: '',
+				active: ''
+			}
+		};
+	},
+	watch: {
+		show: {
+			handler(newVal) {
+				if (newVal) {
+					this.open();
+				} else {
+					this.close();
+				}
+			},
+			immediate: true
+		}
+	},
+	computed: {
+		stylesObject() {
+			let styles = {
+				...this.styles,
+				'transition-duration': this.duration / 1000 + 's'
+			};
+			let transfrom = '';
+			for (let i in styles) {
+				let line = this.toLine(i);
+				transfrom += line + ':' + styles[i] + ';';
+			}
+			return transfrom;
+		}
+	},
+	methods: {
+		change() {
+			this.$emit('click', {
+				detail: this.isShow
+			});
+		},
+		open() {
+			clearTimeout(this.timer);
+			this.isShow = true;
+			this.transform = '';
+			this.ani.in = '';
+			for (let i in this.getTranfrom(false)) {
+				if (i === 'opacity') {
+					this.ani.in = 'fade-in';
+				} else {
+					this.transform += `${this.getTranfrom(false)[i]} `;
+				}
+			}
+			this.$nextTick(() => {
+				setTimeout(() => {
+					this._animation(true);
+				}, 50);
+			});
+		},
+		close(type) {
+			clearTimeout(this.timer);
+			this._animation(false);
+		},
+		_animation(type) {
+			let styles = this.getTranfrom(type);
+			// #ifdef APP-NVUE
+			if (!this.$refs['ani']) return;
+			animation.transition(
+				this.$refs['ani'].ref,
+				{
+					styles,
+					duration: this.duration, //ms
+					timingFunction: 'ease',
+					needLayout: false,
+					delay: 0 //ms
+				},
+				() => {
+					if (!type) {
+						this.isShow = false;
+					}
+					this.$emit('change', {
+						detail: this.isShow
+					});
+				}
+			);
+			// #endif
+			// #ifndef APP-NVUE
+			this.transform = '';
+			for (let i in styles) {
+				if (i === 'opacity') {
+					this.ani.in = `fade-${type ? 'out' : 'in'}`;
+				} else {
+					this.transform += `${styles[i]} `;
+				}
+			}
+			this.timer = setTimeout(() => {
+				if (!type) {
+					this.isShow = false;
+				}
+				this.$emit('change', {
+					detail: this.isShow
+				});
+			}, this.duration);
+			// #endif
+		},
+		getTranfrom(type) {
+			let styles = {
+				transform: ''
+			};
+			this.modeClass.forEach(mode => {
+				switch (mode) {
+					case 'fade':
+						styles.opacity = type ? 1 : 0;
+						break;
+					case 'slide-top':
+						styles.transform += `translateY(${type ? '0' : '-100%'}) `;
+						break;
+					case 'slide-right':
+						styles.transform += `translateX(${type ? '0' : '100%'}) `;
+						break;
+					case 'slide-bottom':
+						styles.transform += `translateY(${type ? '0' : '100%'}) `;
+						break;
+					case 'slide-left':
+						styles.transform += `translateX(${type ? '0' : '-100%'}) `;
+						break;
+					case 'zoom-in':
+						styles.transform += `scale(${type ? 1 : 0.8}) `;
+						break;
+					case 'zoom-out':
+						styles.transform += `scale(${type ? 1 : 1.2}) `;
+						break;
+				}
+			});
+			return styles;
+		},
+		_modeClassArr(type) {
+			let mode = this.modeClass;
+			if (typeof mode !== 'string') {
+				let modestr = '';
+				mode.forEach(item => {
+					modestr += item + '-' + type + ',';
+				});
+				return modestr.substr(0, modestr.length - 1);
+			} else {
+				return mode + '-' + type;
+			}
+		},
+		toLine(name) {
+			return name.replace(/([A-Z])/g, '-$1').toLowerCase();
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-popup__transition {
+	transition-timing-function: ease;
+	transition-duration: 0.3s;
+	transition-property: transform, opacity;
+}
+
+.fade-in {
+	opacity: 0;
+}
+
+.fade-active {
+	opacity: 1;
+}
+
+.slide-top-in {
+	transform: translateY(-100%);
+}
+
+.slide-top-active {
+	transform: translateY(0);
+}
+
+.slide-right-in {
+	transform: translateX(100%);
+}
+
+.slide-right-active {
+	transform: translateX(0);
+}
+
+.slide-bottom-in {
+	transform: translateY(100%);
+}
+
+.slide-bottom-active {
+	transform: translateY(0);
+}
+
+.slide-left-in {
+	transform: translateX(-100%);
+}
+
+.slide-left-active {
+	transform: translateX(0);
+	opacity: 1;
+}
+
+.zoom-in-in {
+	transform: scale(0.8);
+}
+
+.zoom-out-active {
+	transform: scale(1);
+}
+
+.zoom-out-in {
+	transform: scale(1.2);
+}
+</style>
diff --git a/components/thorui/tui-rate/tui-rate.vue b/components/thorui/tui-rate/tui-rate.vue
new file mode 100644
index 0000000..d670f3f
--- /dev/null
+++ b/components/thorui/tui-rate/tui-rate.vue
@@ -0,0 +1,174 @@
+<template>
+	<view class="tui-rate-class tui-rate-box" @touchmove="touchMove">
+		<block v-for="(item, index) in quantity" :key="index">
+			<view
+				class="tui-icon tui-relative"
+				:class="['tui-icon-collection' + (hollow && (current <= index || (disabled && current <= index + 1)) ? '' : '-fill')]"
+				:data-index="index"
+				@tap="handleTap"
+				:style="{ fontSize: size + 'px', color: current > index + 1 || (!disabled && current > index) ? active : normal }"
+			>
+				<view
+					class="tui-icon tui-icon-main tui-icon-collection-fill"
+					v-if="disabled && current == index + 1"
+					:style="{ fontSize: size + 'px', color: active, width: percent + '%' }"
+				></view>
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiRate',
+	props: {
+		//数量
+		quantity: {
+			type: Number,
+			default: 5
+		},
+		//当前选中
+		current: {
+			type: Number,
+			default: 0
+		},
+		//当前选中星星分数(大于0，小于等于1的数)
+		score: {
+			type: [Number, String],
+			default: 1
+		},
+		//禁用点击
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		//大小
+		size: {
+			type: Number,
+			default: 20
+		},
+		//未选中颜色
+		normal: {
+			type: String,
+			default: '#b2b2b2'
+		},
+		//选中颜色
+		active: {
+			type: String,
+			default: '#e41f19'
+		},
+		//未选中是否为空心
+		hollow: {
+			type: Boolean,
+			default: false
+		},
+		//自定义参数
+		params: {
+			type: [Number, String],
+			default: 0
+		}
+	},
+	data() {
+		return {
+			pageX: 0,
+			percent: 0
+		};
+	},
+	created() {
+		this.percent = Number(this.score || 0) * 100;
+	},
+	watch: {
+		score(newVal, oldVal) {
+			this.percent = Number(newVal || 0) * 100;
+		}
+	},
+	methods: {
+		handleTap(e) {
+			if (this.disabled) {
+				return;
+			}
+			const index = e.currentTarget.dataset.index;
+			this.$emit('change', {
+				index: Number(index) + 1,
+				params: this.params
+			});
+		},
+		touchMove(e) {
+			if (this.disabled) {
+				return;
+			}
+			if (!e.changedTouches[0]) {
+				return;
+			}
+			const movePageX = e.changedTouches[0].pageX;
+			const distance = movePageX - this.pageX;
+
+			if (distance <= 0) {
+				return;
+			}
+			let index = Math.ceil(distance / this.size);
+			index = index > this.quantity ? this.quantity : index;
+			this.$emit('change', {
+				index: index,
+				params: this.params
+			});
+		}
+	},
+	mounted() {
+		const className = '.tui-rate-box';
+		let query = uni.createSelectorQuery().in(this);
+		query
+			.select(className)
+			.boundingClientRect(res => {
+				this.pageX = res.left || 0;
+			})
+			.exec();
+	}
+};
+</script>
+
+<style scoped>
+@font-face {
+	font-family: 'rateFont';
+	src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAT4AA0AAAAAB4wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE3AAAABoAAAAciBprQUdERUYAAAS8AAAAHgAAAB4AKQALT1MvMgAAAaAAAABDAAAAVj1YSN1jbWFwAAAB+AAAAEIAAAFCAA/qlmdhc3AAAAS0AAAACAAAAAj//wADZ2x5ZgAAAkgAAADwAAABZLMTdXtoZWFkAAABMAAAADAAAAA2FZKISmhoZWEAAAFgAAAAHQAAACQHYgOFaG10eAAAAeQAAAARAAAAEgx6AHpsb2NhAAACPAAAAAwAAAAMAEYAsm1heHAAAAGAAAAAHgAAACABEQBPbmFtZQAAAzgAAAFJAAACiCnmEVVwb3N0AAAEhAAAAC0AAABHLO3vkXjaY2BkYGAA4t2/VF7G89t8ZeBmYQCBm9ZKMnC6ikGMuYXpP5DLwcAEEgUAHPQJOXjaY2BkYGBu+N/AEMPCAALMLQyMDKiABQBQwgLwAAAAeNpjYGRgYGBlcGZgYgABEMkFhAwM/8F8BgAPigFhAAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PXj17zdzwv4EhhrmBoQEozAiSAwD/YA2wAHjaY2GAABYIrmKoAgACggEBAAAAeNpjYGBgZoBgGQZGBhCwAfIYwXwWBgUgzQKEQP6z1///A8lX//9LSkJVMjCyMcCYDIxMQIKJARUwMgx7AAA/9QiLAAAAAAAAAAAAAABGALJ42mNgZKhiEGNuYfrPoMnAwGimps+ox6jPqKbEz8jHCMLyjHJAmk1czMie0cxInlHMDChrZs6cJyaosI+NlzmU34I/lImPdb+CoHgXCyujIosYtzTfKlYBtlWyuqwKjKwsjNvFTdlkGDnZ1srKrmXjZJRhMxVvZxFgA+rgYI9iYoriV1TYzybAwsDABHeLBIMT0DUg29VBTjEHucvcjtGeUVyOUZ6JaFcybefnZ5HuFdEX6ZVm5uMvniemxuXmzqUmNs+FeOfHCeiKzfPi4vKaJ6YrUCDOIiM8YYKwDIu4OMRbrOtkZdex4vMWACzGM5B42n2QPU4DMRCFn/MHJBJCIKhdUQDa/JQpEyn0CKWjSDbekGjXXnmdSDkBLRUHoOUYHIAbINFyCl6WSZMia+3o85uZ57EBnOMbCv/fJe6EFY7xKFzBETLhKvUX4Rr5XbiOFj6FG9R/hJu4VQPhFi7UGx1U7YS7m9JtywpnGAhXcIon4Sr1lXCN/CpcxxU+hBvUv4SbGONXuIVrZakM4WEwQWCcQWOKDeMCMRwskjIG1qE59GYSzExPN3oRO5s4GyjvV2KXAx5oOeeAKe09t2a+Sif+YMuB1JhuHgVLtimNLiJ0KBtfLJzV3ahzsP2e7ba02L9rgTXH7FENbNT8Pdsz0khsDK+QkjXyMrekElOPaGus8btnKdbzXgiJTrzL9IjHmjR1OvduaeLA4ufyjBx9tLmSPfeoHD5jWQh5v91OxCCKXYY/k9hxGQAAAHjaY2BigAAuMMnIgA5YwaJMjEyMzPzJ+Tk5qcklmfl58WmZOTlcCD4Ak9QKlAAAAAAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAQAAQAEAAAAAgAAAAB42mNgYGBkAIKrS9Q5QPRNayUZGA0AM8UETgAA)
+		format('woff');
+	font-weight: normal;
+	font-style: normal;
+}
+
+.tui-icon {
+	font-family: 'rateFont' !important;
+	font-style: normal;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	display: block;
+}
+
+.tui-relative {
+	position: relative;
+}
+
+.tui-icon-main {
+	position: absolute;
+	height: 100%;
+	left: 0;
+	top: 0;
+	overflow: hidden;
+}
+
+.tui-icon-collection-fill:before {
+	content: '\e6ea';
+}
+
+.tui-icon-collection:before {
+	content: '\e6eb';
+}
+
+.tui-rate-box {
+	display: -webkit-inline-flex;
+	display: inline-flex;
+	align-items: center;
+	margin: 0;
+	padding: 0;
+}
+</style>
diff --git a/components/thorui/tui-round-progress/tui-round-progress.vue b/components/thorui/tui-round-progress/tui-round-progress.vue
new file mode 100644
index 0000000..4b50fe9
--- /dev/null
+++ b/components/thorui/tui-round-progress/tui-round-progress.vue
@@ -0,0 +1,292 @@
+<template>
+	<view class="tui-circular-container" :style="{ width: diam + 'px', height: (height || diam) + 'px' }">
+		<canvas :start="percent" :change:start="parse.initDraw" :data-width="diam" :data-height="height" :data-lineWidth="lineWidth"
+		 :data-lineCap="lineCap" :data-fontSize="fontSize" :data-fontColor="fontColor" :data-fontShow="fontShow"
+		 :data-percentText="percentText" :data-defaultShow="defaultShow" :data-defaultColor="defaultColor"
+		 :data-progressColor="progressColor" :data-gradualColor="gradualColor" :data-sAngle="sAngle" :data-counterclockwise="counterclockwise"
+		 :data-multiple="multiple" :data-speed="speed" :data-activeMode="activeMode" :data-cid="progressCanvasId" :canvas-id="progressCanvasId"
+		 :class="[progressCanvasId]" :style="{ width: diam + 'px', height: (height || diam) + 'px' }"></canvas>
+		<slot></slot>
+	</view>
+</template>
+<script module="parse" lang="renderjs">
+	export default {
+		methods: {
+			format(str) {
+				if (!str) return str;
+				return str.replace(/\"/g, "");
+			},
+			bool(str) {
+				return str === 'true' || str == true ? true : false
+			},
+			//初始化绘制
+			initDraw(percentage, oldPercentage, owner, ins) {
+				let state = ins.getState();
+				let res = ins.getDataset();
+				const activeMode = this.format(res.activemode);
+				let start = activeMode === 'backwards' ? 0 : (state.startPercentage || 0);
+				//当start大于当前percentage时，start设置为0
+				start = start > percentage ? 0 : start;
+				if (!state.progressContext || !state.canvas) {
+					const width = res.width;
+					const height = res.height == 0 ? res.width : res.height;
+					let ele = `.${res.cid}>canvas`
+					const canvas = document.querySelectorAll(this.format(ele))[0];
+					const ctx = canvas.getContext('2d');
+					// const dpr =uni.getSystemInfoSync().pixelRatio;
+					// canvas.style.width=width+'px';
+					// canvas.style.height=height+'px';
+					// canvas.width = width * dpr;
+					// canvas.height = height * dpr;
+					// ctx.scale(dpr, dpr);
+					state.progressContext = ctx;
+					state.canvas = canvas;
+					this.drawProgressCircular(start, ctx, canvas, percentage, res, state, owner);
+				} else {
+					this.drawProgressCircular(start, state.progressContext, state.canvas, percentage, res, state, owner);
+				}
+			},
+			//默认(背景)圆环
+			drawDefaultCircular(ctx, canvas, res) {
+				//终止弧度
+				let sangle = Number(res.sangle) * Math.PI
+				let eAngle = Math.PI * (res.height != 0 ? 1 : 2) + sangle;
+				this.drawArc(ctx, eAngle, this.format(res.defaultcolor), res);
+			},
+			drawPercentage(ctx, percentage, res) {
+				ctx.save(); //save和restore可以保证样式属性只运用于该段canvas元素
+				ctx.beginPath();
+				ctx.fillStyle = this.format(res.fontcolor);
+				ctx.font = res.fontsize + "px Arial"; //设置字体大小和字体
+				ctx.textAlign = "center";
+				ctx.textBaseline = "middle";
+				let radius = res.width / 2;
+				let percenttext = this.format(res.percenttext)
+				if (!percenttext) {
+					let multiple = Number(res.multiple)
+					percentage = this.bool(res.counterclockwise) ? 100 - percentage * multiple : percentage * multiple;
+					percentage = percentage.toFixed(0) + "%"
+				} else {
+					percentage = percenttext
+				}
+				ctx.fillText(percentage, radius, radius);
+				ctx.stroke();
+				ctx.restore();
+			},
+			//进度圆环
+			drawProgressCircular(startPercentage, ctx, canvas, percentage, res, state, owner) {
+				if (!ctx || !canvas) return;
+				let that = this
+				let gradient = ctx.createLinearGradient(0, 0, Number(res.width), 0);
+				gradient.addColorStop(0, this.format(res.progresscolor));
+				let gradualColor = this.format(res.gradualcolor)
+				if (gradualColor) {
+					gradient.addColorStop('1', gradualColor);
+				}
+				let requestId = null
+				let renderLoop = () => {
+					drawFrame((res) => {
+						if (res) {
+							requestId = requestAnimationFrame(renderLoop)
+						} else {
+							cancelAnimationFrame(requestId)
+							requestId = null;
+							renderLoop = null;
+						}
+					})
+				}
+				requestId = requestAnimationFrame(renderLoop)
+
+				function drawFrame(callback) {
+					ctx.clearRect(0, 0, canvas.width, canvas.height);
+					if (that.bool(res.defaultshow)) {
+						that.drawDefaultCircular(ctx, canvas, res)
+					}
+					if (that.bool(res.fontshow)) {
+						that.drawPercentage(ctx, startPercentage, res);
+					}
+					let isEnd = percentage === 0 || (that.bool(res.counterclockwise) && startPercentage === 100);
+					if (!isEnd) {
+						let sangle = Number(res.sangle) * Math.PI
+						let eAngle = ((2 * Math.PI) / 100) * startPercentage + sangle;
+						that.drawArc(ctx, eAngle, gradient, res);
+					}
+					owner.callMethod('change', {
+						percentage: startPercentage
+					})
+					if (startPercentage >= percentage) {
+						state.startPercentage = startPercentage;
+						owner.callMethod('end', {
+							canvasId: that.format(res.canvasid)
+						})
+						cancelAnimationFrame(requestId)
+						callback && callback(false)
+						return;
+					}
+					let num = startPercentage + Number(res.speed)
+					startPercentage = num > percentage ? percentage : num;
+					callback && callback(true)
+				}
+
+			},
+			//创建弧线
+			drawArc(ctx, eAngle, strokeStyle, res) {
+				ctx.save();
+				ctx.beginPath();
+				ctx.lineCap = this.format(res.linecap);
+				ctx.lineWidth = Number(res.linewidth);
+				ctx.strokeStyle = strokeStyle;
+				let radius = res.width / 2; //x=y
+				let sangle = Number(res.sangle) * Math.PI
+				ctx.arc(radius, radius, radius - res.linewidth, sangle, eAngle, this.bool(res.counterclockwise));
+				ctx.stroke();
+				ctx.closePath();
+				ctx.restore();
+			}
+		}
+	}
+</script>
+<script>
+	export default {
+		name: 'tuiRoundProgress',
+		props: {
+			/*
+			  传值需使用rpx进行转换保证各终端兼容
+			  px = rpx / 750 * wx.getSystemInfoSync().windowWidth
+			  圆形进度条(画布)宽度，直径 [px]
+			*/
+			diam: {
+				type: Number,
+				default: 60
+			},
+			//圆形进度条(画布)高度，默认取diam值[当画半弧时传值，height有值时则取height]
+			height: {
+				type: Number,
+				default: 0
+			},
+			//进度条线条宽度[px]
+			lineWidth: {
+				type: Number,
+				default: 4
+			},
+			/*
+				 线条的端点样式
+				 butt：向线条的每个末端添加平直的边缘
+				 round	向线条的每个末端添加圆形线帽
+				 square	向线条的每个末端添加正方形线帽
+				*/
+			lineCap: {
+				type: String,
+				default: 'round'
+			},
+			//圆环进度字体大小 [px]
+			fontSize: {
+				type: Number,
+				default: 12
+			},
+			//圆环进度字体颜色
+			fontColor: {
+				type: String,
+				default: '#5677fc'
+			},
+			//是否显示进度文字
+			fontShow: {
+				type: Boolean,
+				default: true
+			},
+			/*
+				 自定义显示文字[默认为空，显示百分比，fontShow=true时生效]
+				 可以使用 slot自定义显示内容
+				*/
+			percentText: {
+				type: String,
+				default: ''
+			},
+			//是否显示默认(背景)进度条
+			defaultShow: {
+				type: Boolean,
+				default: true
+			},
+			//默认进度条颜色
+			defaultColor: {
+				type: String,
+				default: '#CCC'
+			},
+			//进度条颜色
+			progressColor: {
+				type: String,
+				default: '#5677fc'
+			},
+			//进度条渐变颜色[结合progressColor使用，默认为空]
+			gradualColor: {
+				type: String,
+				default: ''
+			},
+			//起始弧度，单位弧度 实际  Math.PI * sAngle
+			sAngle: {
+				type: Number,
+				default: -0.5
+			},
+			//指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针
+			counterclockwise: {
+				type: Boolean,
+				default: false
+			},
+			//进度百分比 [10% 传值 10]
+			percentage: {
+				type: Number,
+				default: 0
+			},
+			//进度百分比缩放倍数[使用半弧为100%时，则可传2]
+			multiple: {
+				type: Number,
+				default: 1
+			},
+			//动画执行速度，值越大动画越快（0.1~100）
+			speed: {
+				type: [Number, String],
+				default: 1
+			},
+			//backwards: 动画从头播；forwards：动画从上次结束点接着播
+			activeMode: {
+				type: String,
+				default: 'backwards'
+			}
+		},
+		watch: {
+			percentage(val) {
+				this.percent = val;
+			}
+		},
+		mounted() {
+			setTimeout(() => {
+				this.percent = this.percentage;
+			}, 50);
+		},
+		data() {
+			return {
+				percent: -1,
+				progressCanvasId: this.getCanvasId()
+			};
+		},
+		methods: {
+			getCanvasId() {
+				return 'tui' + new Date().getTime() + (Math.random() * 100000).toFixed(0);
+			},
+			change(e) {
+				//绘制进度
+				this.$emit('change', e);
+			},
+			end(e) {
+				//绘制完成
+				this.$emit('end', e);
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.tui-circular-container {
+		position: relative;
+	}
+</style>
diff --git a/components/thorui/tui-scroll-top/tui-scroll-top.vue b/components/thorui/tui-scroll-top/tui-scroll-top.vue
new file mode 100644
index 0000000..3c15cb6
--- /dev/null
+++ b/components/thorui/tui-scroll-top/tui-scroll-top.vue
@@ -0,0 +1,178 @@
+<template>
+	<view class="tui-scroll-top_box" v-show="isIndex || isShare || (visible && toggle)" :style="{ bottom: bottom + 'rpx', right: right + 'rpx' }">
+		<view class="tui-scroll-top_item" v-if="isIndex" @tap.stop="goIndex">
+			<image class="tui-scroll-top_img" :src="indexIcon"></image>
+			<view class="tui-scroll-top_text">首页</view>
+		</view>
+		<button open-type="share" class="tui-share-btn" v-if="isShare && !customShare">
+			<view class="tui-scroll-top_item" :class="{ 'tui-scroll-item_top': isIndex }"><image class="tui-scroll-top_img" :src="shareIcon"></image></view>
+		</button>
+		<view class="tui-scroll-top_item" :class="{ 'tui-scroll-item_top': isIndex }" v-if="isShare && customShare" @tap.stop="share">
+			<image class="tui-scroll-top_img" :src="shareIcon"></image>
+		</view>
+		<view class="tui-scroll-top_item" :class="{ 'tui-scroll-item_top': isIndex || isShare }" v-show="visible && toggle" @tap.stop="goTop">
+			<image class="tui-scroll-top_img" :src="topIcon"></image>
+			<view class="tui-scroll-top_text tui-color-white">顶部</view>
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * 注意：组件中使用的图片地址，将文件复制到自己项目中
+ * 如果图片位置与组件同级，编译成小程序时图片会丢失
+ * 拷贝static下整个components文件夹
+ * 也可直接转成base64（不建议）
+ * */
+export default {
+	name: 'tuiScrollTop',
+	props: {
+		//回顶部按钮距离底部距离 rpx
+		bottom: {
+			type: Number,
+			default: 180
+		},
+		//回顶部按钮距离右侧距离 rpx
+		right: {
+			type: Number,
+			default: 25
+		},
+		//距离顶部多少距离显示 px
+		top: {
+			type: Number,
+			default: 200
+		},
+		//滚动距离
+		scrollTop: {
+			type: Number
+		},
+		//回顶部滚动时间
+		duration: {
+			type: Number,
+			default: 120
+		},
+		//是否显示返回首页按钮
+		isIndex: {
+			type: Boolean,
+			default: false
+		},
+		//是否显示分享图标
+		isShare: {
+			type: Boolean,
+			default: false
+		},
+		//自定义分享(小程序可使用button=>open-type="share")
+		customShare: {
+			type: Boolean,
+			default: false
+		},
+		//回顶部icon
+		topIcon: {
+			type: String,
+			default: '/static/components/scroll-top/icon_top_3x.png'
+		},
+		//回首页icon
+		indexIcon: {
+			type: String,
+			default: '/static/components/scroll-top/icon_index_3x.png'
+		},
+		//分享icon
+		shareIcon: {
+			type: String,
+			default: '/static/components/scroll-top/icon_share_3x.png'
+		}
+	},
+	watch: {
+		scrollTop(newValue, oldValue) {
+			this.change();
+		}
+	},
+	data() {
+		return {
+			//判断是否显示
+			visible: false,
+			//控制显示，主要解决调用api滚到顶部fixed元素抖动的问题
+			toggle: true
+		};
+	},
+	methods: {
+		goTop: function() {
+			this.toggle = false;
+			uni.pageScrollTo({
+				scrollTop: 0,
+				duration: this.duration
+			});
+			setTimeout(() => {
+				this.toggle = true;
+			}, 220);
+		},
+		goIndex: function() {
+			this.$emit('index', {});
+		},
+		share() {
+			this.$emit('share', {});
+		},
+		change() {
+			let show = this.scrollTop > this.top;
+			if ((show && this.visible) || (!show && !this.visible)) {
+				return;
+			}
+			this.visible = show;
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-scroll-top_box {
+	width: 80rpx;
+	height: 270rpx;
+	position: fixed;
+	z-index: 9999;
+	right: 30rpx;
+	bottom: 30rpx;
+	font-weight: 400;
+}
+
+.tui-scroll-top_item {
+	width: 80rpx;
+	height: 80rpx;
+	position: relative;
+}
+
+.tui-scroll-item_top {
+	margin-top: 30rpx;
+}
+
+.tui-scroll-top_img {
+	width: 80rpx;
+	height: 80rpx;
+	display: block;
+}
+
+.tui-scroll-top_text {
+	width: 80rpx;
+	text-align: center;
+	font-size: 24rpx;
+	line-height: 24rpx;
+	transform: scale(0.92);
+	transform-origin: center center;
+	position: absolute;
+	left: 0;
+	bottom: 15rpx;
+}
+
+.tui-color-white {
+	color: #fff;
+}
+.tui-share-btn {
+	background: transparent !important;
+	padding: 0;
+	margin: 0;
+	display: inline;
+	border: 0;
+}
+.tui-share-btn::after {
+	border: 0;
+}
+</style>
diff --git a/components/thorui/tui-skeleton/tui-skeleton.vue b/components/thorui/tui-skeleton/tui-skeleton.vue
new file mode 100644
index 0000000..9d63ba4
--- /dev/null
+++ b/components/thorui/tui-skeleton/tui-skeleton.vue
@@ -0,0 +1,239 @@
+<template>
+	<view class="tui-skeleton-cmomon tui-skeleton-box" :style="{width: winWidth+'px', height:winHeight+'px', backgroundColor:backgroundColor}">
+		<view class="tui-skeleton-cmomon" v-for="(item,index) in skeletonElements" :key="index" :style="{width: item.width+'px', height:item.height+'px', left: item.left+'px', top: item.top+'px',backgroundColor: skeletonBgColor,borderRadius:getRadius(item.skeletonType,borderRadius)}"></view>
+		<view class="tui-loading" :class="[getLoadingType(loadingType)]" v-if="isLoading"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tuiSkeleton",
+		props: {
+			//选择器(外层容器)
+			selector: {
+				type: String,
+				default: "tui-skeleton"
+			},
+			//外层容器背景颜色
+			backgroundColor: {
+				type: String,
+				default: "#fff"
+			},
+			//骨架元素背景颜色
+			skeletonBgColor: {
+				type: String,
+				default: "#e9e9e9"
+			},
+			//骨架元素类型：矩形，圆形，带圆角矩形["rect","circular","fillet"]
+			//默认所有，根据页面情况进行传值
+			//页面对应元素class为：tui-skeleton-rect，tui-skeleton-circular，tui-skeleton-fillet
+			//如果传入的值不在下列数组中，则为自定义class值，默认按矩形渲染
+			skeletonType: {
+				type: Array,
+				default () {
+					return ["rect", "circular", "fillet"]
+				}
+			},
+			//圆角值，skeletonType=fillet时生效
+			borderRadius: {
+				type: String,
+				default: "16rpx"
+			},
+			//骨架屏预生成数据：提前生成好的数据，当传入该属性值时，则不会再次查找子节点信息
+			preloadData: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			//是否需要loading
+			isLoading: {
+				type: Boolean,
+				default: true
+			},
+			//loading类型[1-10]
+			loadingType: {
+				type: Number,
+				default: 1
+			}
+		},
+		created() {
+			const res = uni.getSystemInfoSync();
+			this.winWidth = res.windowWidth;
+			this.winHeight = res.windowHeight;
+			//如果有预生成数据，则直接使用
+			this.isPreload(true)
+		},
+		mounted() {
+			this.$nextTick(() => {
+				this.nodesRef(`.${this.selector}`).then((res) => {
+					if(res && res[0]){
+						this.winHeight = res[0].height + Math.abs(res[0].top)
+					}
+				});
+				!this.isPreload() && this.selectorQuery()
+			})
+
+		},
+		data() {
+			return {
+				winWidth: 375,
+				winHeight: 800,
+				skeletonElements: []
+			};
+		},
+		methods: {
+			getLoadingType: function(type) {
+				let value = 1
+				if (type && type > 0 && type < 11) {
+					value = type
+				}
+				return 'tui-loading-' + value
+			},
+			getRadius: function(type, val) {
+				let radius = "0"
+				if (type == "circular") {
+					radius = "50%"
+				} else if (type == "fillet") {
+					radius = val
+				}
+				return radius;
+			},
+			isPreload(init) {
+				let preloadData = this.preloadData || []
+				if (preloadData.length) {
+					init && (this.skeletonElements = preloadData)
+					return true
+				}
+				return false
+			},
+			async selectorQuery() {
+				let skeletonType = this.skeletonType || []
+				let nodes = []
+				for (let item of skeletonType) {
+					let className = '';
+					// #ifndef MP-WEIXIN
+					className = `.${item}`;
+					if (~'rect_circular_fillet'.indexOf(item)) {
+						className = `.${this.selector}-${item}`;
+					}
+					// #endif
+					
+					// #ifdef MP-WEIXIN
+					className = `.${this.selector} >>> .${item}`;
+					if (~'rect_circular_fillet'.indexOf(item)) {
+						className = `.${this.selector} >>> .${this.selector}-${item}`;
+					}
+					// #endif
+					await this.nodesRef(className).then((res) => {
+						res.map(d => {
+							d.skeletonType = item
+						})
+						nodes = nodes.concat(res)
+					})
+				}
+				this.skeletonElements = nodes
+			},
+			async nodesRef(className) {
+				return await new Promise((resolve, reject) => {
+					uni.createSelectorQuery().selectAll(className).boundingClientRect((res) => {
+						if (res) {
+							resolve(res);
+						} else {
+							reject(res)
+						}
+					}).exec();
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-skeleton-cmomon {
+		position: absolute;
+		z-index: 99999;
+	}
+
+	.tui-skeleton-box {
+		left: 0;
+		top: 0;
+	}
+
+	.tui-loading {
+		display: inline-block;
+		vertical-align: middle;
+		width: 40rpx;
+		height: 40rpx;
+		background: 0 0;
+		border-radius: 50%;
+		border: 2px solid;
+		animation: tui-rotate 0.7s linear infinite;
+		position: fixed;
+		z-index: 999999;
+		left: 50%;
+		top: 50%;
+		margin-left: -20rpx;
+		margin-top: -20rpx;
+	}
+
+	.tui-loading-1 {
+		border-color: #e5e5e5 #e5e5e5 #e5e5e5 #5677fc;
+	}
+
+	.tui-loading-2 {
+		border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
+	}
+
+	.tui-loading-3 {
+		border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #fff;
+	}
+
+	.tui-loading-4 {
+		border-color: #e5e5e5 #e5e5e5 #e5e5e5 #35b06a;
+	}
+
+	.tui-loading-5 {
+		border-color: #e5e5e5 #e5e5e5 #e5e5e5 #fc872d;
+	}
+
+	.tui-loading-6 {
+		border-color: #e5e5e5 #e5e5e5 #e5e5e5 #eb0909;
+	}
+
+	.tui-loading-7 {
+		border-color: #5677fc transparent #5677fc transparent;
+	}
+
+	.tui-loading-8 {
+		border-color: #35b06a transparent #35b06a transparent;
+	}
+
+	.tui-loading-9 {
+		border-color: #fc872d transparent #fc872d transparent;
+	}
+
+	.tui-loading-10 {
+		border-color: #eb0909 transparent #eb0909 transparent;
+	}
+
+	@-webkit-keyframes tui-rotate {
+		0% {
+			transform: rotate(0);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes tui-rotate {
+		0% {
+			transform: rotate(0);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+</style>
diff --git a/components/thorui/tui-slide-verify/tui-slide-verify.vue b/components/thorui/tui-slide-verify/tui-slide-verify.vue
new file mode 100644
index 0000000..8f53909
--- /dev/null
+++ b/components/thorui/tui-slide-verify/tui-slide-verify.vue
@@ -0,0 +1,217 @@
+<template>
+	<view class="tui-slide-vcode" :style="{width:slideBarWidth+'px',height:slideBlockWidth+'px',backgroundColor:backgroundColor}">
+		<text class="tui-text-flashover" :style="{fontSize:size+'rpx',background:getBgColor}">拖动滑块验证</text>
+		<view class="tui-slide-glided" :style="{backgroundColor:activeBgColor}">
+			<text :style="{fontSize:size+'rpx',color:activeColor}" v-if="isPass">{{passText}}</text>
+		</view>
+		<view class="tui-slider-block" :style="{width:slideBlockWidth+'px',height:slideBlockWidth+'px',borderColor:isPass?activeBorderColor: borderColor}"
+		 :change:prop="parse.slidereset" :prop="reset" :data-slideBarWidth="slideBarWidth" :data-slideBlockWidth="slideBlockWidth"
+		 :data-errorRange="errorRange" :data-disabled="disabled" @touchstart="parse.touchstart" @touchmove="parse.touchmove"
+		 @touchend="parse.touchend">
+			<text class="tui-slide-icon tui-icon-double_arrow" :style="{fontSize:iconSize+'rpx',color:arrowColor}" v-if="!isPass"></text>
+			<text class="tui-slide-icon tui-icon-check_mark" :style="{fontSize:iconSize+'rpx',color:checkColor}" v-if="isPass"></text>
+		</view>
+	</view>
+</template>
+<script src="./tui-slide-verify.wxs" module="parse" lang="wxs"></script>
+<script>
+	export default {
+		name: "tuiSlideVerify",
+		props: {
+			//滑动条宽度 px
+			slideBarWidth: {
+				type: [Number, String],
+				default: 300
+			},
+			//滑块宽度 px = 滑动条高度
+			slideBlockWidth: {
+				type: [Number, String],
+				default: 40
+			},
+			//滑块border颜色
+			borderColor: {
+				type: String,
+				default: '#E9E9E9'
+			},
+			//通过验证后滑块border颜色
+			activeBorderColor: {
+				type: String,
+				default: '#19be6b'
+			},
+			//误差范围 px 距离右侧多少距离验证通过
+			errorRange: {
+				type: [Number, String],
+				default: 2
+			},
+			//重置滑动
+			resetSlide: {
+				type: Number,
+				default: 0
+			},
+			//提示文字大小
+			size: {
+				type: Number,
+				default: 30
+			},
+			//提示文字颜色
+			color: {
+				type: String,
+				default: "#444"
+			},
+			//验证通过后提示文字颜色
+			activeColor: {
+				type: String,
+				default: "#fff"
+			},
+			//图标字体大小 rpx
+			iconSize: {
+				type: Number,
+				default: 32
+			},
+			//箭头图标颜色
+			arrowColor: {
+				type: String,
+				default: "#cbcbcb"
+			},
+			checkColor: {
+				type: String,
+				default: "#19be6b"
+			},
+			//滑动条背景色
+			backgroundColor: {
+				type: String,
+				default: "#E9E9E9"
+			},
+			//滑过区域背景颜色
+			activeBgColor: {
+				type: String,
+				default: "#19be6b"
+			},
+			//通过提示文字
+			passText: {
+				type: String,
+				default: '验证通过'
+			}
+
+		},
+		computed: {
+			getBgColor() {
+				return `-webkit-gradient(linear, left top, right top, color-stop(0, ${this.color}), color-stop(.4, ${this.color}), color-stop(.5, white), color-stop(.6, ${this.color}), color-stop(1, ${this.color}))`
+			}
+		},
+		watch: {
+			resetSlide(val) {
+				if (val > 0) {
+					this.slideReset()
+				}
+			}
+		},
+		data() {
+			return {
+				isPass: false,
+				disabled: false,
+				reset: 0
+			}
+		},
+		methods: {
+			success() {
+				//验证成功
+				this.isPass = true;
+				this.disabled = true;
+				this.$emit('success', {})
+			},
+			slideReset() {
+				this.isPass = false;
+				this.disabled = false;
+				this.reset++;
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	@font-face {
+		font-family: 'tuiSlideVcode';
+		src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUYAA0AAAAAB1wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE/AAAABoAAAAci6lfG0dERUYAAATcAAAAHgAAAB4AKQALT1MvMgAAAaAAAABCAAAAVjxuSCZjbWFwAAAB+AAAAEUAAAFK5n3pi2dhc3AAAATUAAAACAAAAAj//wADZ2x5ZgAAAkwAAAD8AAABJDQ/n7JoZWFkAAABMAAAADAAAAA2GSR8FGhoZWEAAAFgAAAAHQAAACQHygOFaG10eAAAAeQAAAARAAAAEgwUAD5sb2NhAAACQAAAAAwAAAAMAFQAkm1heHAAAAGAAAAAHgAAACABEQA6bmFtZQAAA0gAAAFJAAACiCnmEVVwb3N0AAAElAAAAD0AAABPYJEgVXjaY2BkYGAA4oqPSw3j+W2+MnCzMIDAbaY5nHBa5P905jfMeUAuBwMTSBQAHycKCHjaY2BkYGBu+N/AEMPCAALMbxgYGVABCwBYegNYAAAAeNpjYGRgYGBl0GNgYgABEMkFhAwM/8F8BgANfQFMAAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PGJ6ZMDf8b2CIYW5gaAAKM4LkAN6ZDA8AAHjaY2GAABYItmMQAQABaABfAAAAeNpjYGBgZoBgGQZGBhBwAfIYwXwWBg0gzQakGRmYnjE8M/n/n4EBQksxS16AqgcCRjYGOIeRCUgwMaACRoZhDwDR6wnSAAAAAAAAAAAAAAAAVACSeNpFzjFOwzAYxfHv2Yodu4ozxHEq2qoSEilLQYoqh6lIIBaugMTC3hswMcPQhYmBjV4AMSFxAppjQDmDSzJle9L7DX9itNx/8i9+QY7mRPDn8ItTlDOcQLhCwcBVtWLCOl/D10v0L5vHnAGMx+EuLSctvQ8PBpMyxWU30/GxwUvMwXqDW6lkNIikllgnGM1MeAqPyWxkeNktczRGgrXUXOkeETGy+2f+x1c0oGnbKUg6KjzVJWUQh23TwlfTrhW+cpZRE3ZCIG8a5EKE3U34yM/sRttCb5hiuNLDjK+i8PO9Db8igmu2cOE1vNsWDTP9xhiuVXZARP+yvTqbeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOWMGiTIxMjMyCOalpJbop+aVJOam6iUVF+eUCKaWZ6fmlJZmJeckZ+XnpugDvDw1eAAAAAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABAABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9G2mOZwwGgA1wQSuAAA=) format('woff');
+		font-weight: normal;
+		font-style: normal;
+		font-display: swap;
+	}
+
+	.tui-slide-icon {
+		font-family: "tuiSlideVcode" !important;
+		font-size: 34rpx;
+		font-style: normal;
+		-webkit-font-smoothing: antialiased;
+	}
+
+	.tui-icon-check_mark:before {
+		content: "\e634";
+	}
+
+	.tui-icon-double_arrow:before {
+		content: "\e600";
+	}
+
+	.tui-slide-vcode {
+		background-color: #EAEEF1;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.tui-slide-glided {
+		width: 0;
+		height: 100%;
+		background-color: #19BE6B;
+		position: absolute;
+		left: 0;
+		top: 0;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.tui-slider-block {
+		position: absolute;
+		z-index: 2;
+		background-color: #FFFFFF;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 1rpx solid;
+		box-sizing: border-box;
+		left: 0;
+		top: 0;
+		transition: border-color 0.08s;
+	}
+
+	.tui-text-flashover {
+		-webkit-background-clip: text !important;
+		-webkit-text-fill-color: transparent !important;
+		-webkit-animation: animate 1.8s infinite;
+	}
+
+	@-webkit-keyframes animate {
+		from {
+			background-position: -90rpx;
+		}
+
+		to {
+			background-position: 90rpx;
+		}
+	}
+
+	@keyframes animate {
+		from {
+			background-position: -90rpx;
+		}
+
+		to {
+			background-position: 90rpx;
+		}
+	}
+</style>
diff --git a/components/thorui/tui-slide-verify/tui-slide-verify.wxs b/components/thorui/tui-slide-verify/tui-slide-verify.wxs
new file mode 100644
index 0000000..1ab80e7
--- /dev/null
+++ b/components/thorui/tui-slide-verify/tui-slide-verify.wxs
@@ -0,0 +1,73 @@
+var slideBarWidth = 200;
+var slideBlockWidth = 32;
+var errorRange = 2
+var disabled = false
+
+function bool(str) {
+	return str === 'true' || str == true ? true : false
+}
+
+function touchstart(e, ins) {
+	var state=e.instance.getState()
+	var touch = e.touches[0] || e.changedTouches[0]
+	var dataset = e.instance.getDataset()
+	state.startX = touch.pageX
+	slideBarWidth = +dataset.slidebarwidth
+	slideBlockWidth = +dataset.slideblockwidth
+	errorRange = +dataset.errorrange
+	disabled = bool(dataset.disabled)
+}
+
+function styleChange(left, ins) {
+	if (!ins) return;
+	ins.selectComponent('.tui-slider-block').setStyle({
+		transform: 'translate3d(' + left + 'px,0,0)'
+	})
+	ins.selectComponent('.tui-slide-glided').setStyle({
+		width: left + 'px'
+	})
+}
+
+function touchmove(e, ins) {
+	if (disabled) return;
+	var state=e.instance.getState()
+	var touch = e.touches[0] || e.changedTouches[0]
+	var pageX = touch.pageX;
+	var left = pageX - state.startX + (state.lastLeft || 0);
+	left = left < 0 ? 0 : left;
+	var width = slideBarWidth - slideBlockWidth;
+	left = left >= width ? width : left;
+	state.startX = pageX
+	state.lastLeft = left
+	styleChange(left, ins)
+}
+
+function touchend(e, ins) {
+	if (disabled) return;
+	var state=e.instance.getState()
+	let left = slideBarWidth - slideBlockWidth
+	if (left - state.lastLeft <= errorRange) {
+		styleChange(left, ins)
+		ins.callMethod('success')
+	} else {
+		state.startX = 0;
+		state.lastLeft = 0;
+		styleChange(0, ins)
+	}
+}
+
+function slidereset(reset, oldreset, owner, ins) {
+	var state=ins.getState()
+	if (reset > 0) {
+		state.startX = 0;
+		state.lastLeft = 0;
+		styleChange(0, owner)
+	}
+}
+
+module.exports = {
+	touchstart: touchstart,
+	touchmove: touchmove,
+	touchend: touchend,
+	slidereset: slidereset
+}
\ No newline at end of file
diff --git a/components/thorui/tui-steps/tui-steps.vue b/components/thorui/tui-steps/tui-steps.vue
new file mode 100644
index 0000000..e11fd2a
--- /dev/null
+++ b/components/thorui/tui-steps/tui-steps.vue
@@ -0,0 +1,254 @@
+<template>
+	<view class="tui-steps-box" :class="{ 'tui-steps-column': direction === 'column' }">
+		<view
+			class="tui-step-item"
+			:style="{ width: direction === 'column' ? '100%' : spacing }"
+			:class="[direction === 'row' ? 'tui-step-horizontal' : 'tui-step-vertical']"
+			v-for="(item, index) in items"
+			:key="index"
+			@tap.stop="handleClick(index)"
+		>
+			<view class="tui-step-item-ico" :style="{ width: direction === 'column' ? '36rpx' : '100%' }">
+				<view
+					v-if="!item.name && !item.icon"
+					class="tui-step-ico"
+					:class="[direction === 'column' ? 'tui-step-column_ico' : 'tui-step-row_ico']"
+					:style="{
+						width: type == 2 || activeSteps === index ? '36rpx' : '16rpx',
+						height: type == 2 || activeSteps === index ? '36rpx' : '16rpx',
+						backgroundColor: index <= activeSteps ? activeColor : type == 2 ? '#fff' : deactiveColor,
+						borderColor: index <= activeSteps ? activeColor : deactiveColor
+					}"
+				>
+					<text v-if="activeSteps !== index" :style="{ color: index <= activeSteps ? '#fff' : '' }">{{ type == 1 ? '' : index + 1 }}</text>
+					<tui-icon name="check" :size="16" color="#fff" v-if="activeSteps === index"></tui-icon>
+				</view>
+				<view class="tui-step-custom" :style="{ backgroundColor: backgroundColor }" v-if="item.name || item.icon">
+					<tui-icon :name="item.name" :size="20" :color="index <= activeSteps ? activeColor : deactiveColor" v-if="item.name"></tui-icon>
+					<image :src="index <= activeSteps ? item.activeIcon : item.icon" class="tui-step-img" mode="widthFix" v-if="!item.name"></image>
+				</view>
+				<view
+					class="tui-step-line"
+					:class="['tui-step-' + direction + '_line', direction == 'column' && (item.name || item.icon) ? 'tui-custom-left' : '']"
+					:style="{
+						borderColor: index <= activeSteps - 1 ? activeColor : deactiveColor,
+						borderRightStyle: direction == 'column' ? lineStyle : '',
+						borderTopStyle: direction == 'column' ? '' : lineStyle
+					}"
+					v-if="index != items.length - 1"
+				></view>
+			</view>
+			<view class="tui-step-item-main" :class="['tui-step-' + direction + '_item_main']">
+				<view
+					class="tui-step-item-title"
+					:style="{
+						color: index <= activeSteps ? activeColor : deactiveColor,
+						fontSize: titleSize + 'rpx',
+						lineHeight: titleSize + 'rpx',
+						fontWeight: bold ? 'bold' : 'normal'
+					}"
+				>
+					{{ item.title }}
+				</view>
+				<view class="tui-step-item-content" :style="{ color: index <= activeSteps ? activeColor : deactiveColor, fontSize: descSize + 'rpx' }">{{ item.desc }}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+//如果自定义传入图标内容，则需要拆分组件
+export default {
+	name: 'tuiSteps',
+	props: {
+		// 1-默认步骤 2-数字步骤
+		type: {
+			type: Number,
+			default: 1
+		},
+		spacing: {
+			type: String,
+			default: '160rpx'
+		},
+		// 方向 row column
+		direction: {
+			type: String,
+			default: 'row'
+		},
+		// 激活状态成功颜色
+		activeColor: {
+			type: String,
+			default: '#5677fc'
+		},
+		// 未激活状态颜色
+		deactiveColor: {
+			type: String,
+			default: '#999999'
+		},
+		//title字体大小
+		titleSize: {
+			type: Number,
+			default: 28
+		},
+		//title是否粗体
+		bold: {
+			type: Boolean,
+			default: false
+		},
+		//desc字体大小
+		descSize: {
+			type: Number,
+			default: 24
+		},
+		// 当前步骤
+		activeSteps: {
+			type: Number,
+			default: -1
+		},
+		//线条样式 同border线条样式
+		lineStyle: {
+			type: String,
+			default: 'solid'
+		},
+		/**
+			 * [{
+					title: "标题",
+					desc: "描述",
+					name:"字体图标 thorui icon内", 
+					icon:"图片图标", 
+					activeIcon:"已完成步骤显示图片图标"
+				}]
+			 * */
+		items: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		//自定义item内容时背景色
+		backgroundColor: {
+			type: String,
+			default: '#fff'
+		}
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		handleClick(index) {
+			this.$emit('click', { index: index });
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-steps-box {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+}
+
+.tui-steps-column {
+	flex-direction: column;
+}
+
+.tui-step-ico {
+	border-radius: 80rpx;
+	position: relative;
+	z-index: 3;
+	margin: 0 auto;
+	border-width: 1rpx;
+	border-style: solid;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.tui-step-row_ico {
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+.tui-step-column_ico {
+	top: 0;
+}
+
+.tui-step-line {
+	position: absolute;
+	left: 50%;
+	top: 20rpx;
+	width: 100%;
+	height: 0rpx;
+	border-top-width: 1rpx;
+	z-index: 2;
+}
+
+.tui-step-row_item_main {
+	text-align: center;
+}
+
+.tui-step-item {
+	font-size: 24rpx;
+	position: relative;
+	box-sizing: border-box;
+}
+
+.tui-step-item-ico {
+	height: 36rpx;
+	line-height: 36rpx;
+	text-align: center;
+}
+.tui-step-custom {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 48rpx;
+	height: 40rpx;
+	position: relative;
+	z-index: 4;
+	margin: 0 auto;
+}
+.tui-step-img {
+	width: 40rpx;
+	height: 40rpx;
+}
+
+.tui-step-item-main {
+	margin-top: 16rpx;
+	clear: both;
+}
+
+.tui-step-item-title {
+	word-break: break-all;
+}
+
+.tui-step-item-content {
+	margin-top: 8rpx;
+	word-break: break-all;
+}
+
+.tui-step-vertical {
+	width: 100%;
+	display: flex;
+	padding-bottom: 60rpx;
+}
+
+.tui-step-column_item_main {
+	margin-top: 0;
+	padding-left: 20rpx;
+}
+
+.tui-step-column_line {
+	position: absolute;
+	height: 100%;
+	top: 0;
+	left: 18rpx;
+	margin: 0;
+	width: 0rpx;
+	border-right-width: 1rpx;
+}
+.tui-custom-left {
+	left: 20rpx !important;
+}
+</style>
diff --git a/components/thorui/tui-sticky-wxs/tui-sticky-wxs.vue b/components/thorui/tui-sticky-wxs/tui-sticky-wxs.vue
new file mode 100644
index 0000000..8eb8e03
--- /dev/null
+++ b/components/thorui/tui-sticky-wxs/tui-sticky-wxs.vue
@@ -0,0 +1,124 @@
+<template>
+	<view class="tui-sticky-class" :change:prop="parse.stickyChange" :prop="scrollTop" :data-top="top" :data-height="height"
+	 :data-stickytop="stickyTop" :data-container="container" :data-isNativeHeader="isNativeHeader" :data-index="index">
+		<!--sticky 容器-->
+		<view class="tui-sticky-seat" :style="{ height: stickyHeight, backgroundColor: backgroundColor }"></view>
+		<view class="tui-sticky-bar">
+			<slot name="header"></slot>
+		</view>
+		<!--sticky 容器-->
+		<!--内容-->
+		<slot name="content"></slot>
+	</view>
+</template>
+<script src="./tui-sticky.wxs" module="parse" lang="wxs"></script>
+<script>
+	export default {
+		name: 'tuiStickyWxs',
+		props: {
+			scrollTop: {
+				type: [Number, String],
+				value: 0
+			},
+			//吸顶时与顶部的距离，单位px
+			stickyTop: {
+				type: [Number, String],
+				// #ifndef H5
+				default: 0,
+				// #endif
+				// #ifdef H5
+				default: 44
+				// #endif
+			},
+			//是否指定容器，即内容放置插槽content内
+			container: {
+				type: Boolean,
+				default: false
+			},
+			//是否是原生自带header
+			isNativeHeader: {
+				type: Boolean,
+				default: true
+			},
+			//吸顶容器 高度 rpx
+			stickyHeight: {
+				type: String,
+				default: 'auto'
+			},
+			//占位容器背景颜色
+			backgroundColor: {
+				type: String,
+				default: 'transparent'
+			},
+			//是否重新计算[有异步加载时使用,设置大于0的数]
+			recalc: {
+				type: Number,
+				default: 0
+			},
+			//列表中的索引值
+			index: {
+				type: [Number, String],
+				default: 0
+			}
+		},
+		watch: {
+			recalc(newValue, oldValue) {
+				this.updateScrollChange(() => {
+					//更新prop scrollTop值(+0.1即可),触发change事件
+					this.$emit("prop",{})
+				});
+			}
+		},
+		mounted() {
+			setTimeout(() => {
+				this.updateScrollChange();
+			}, 20);
+		},
+		data() {
+			return {
+				timer: null,
+				top: 0,
+				height: 0
+			};
+		},
+		methods: {
+			updateScrollChange(callback) {
+				if (this.timer) {
+					clearTimeout(this.timer);
+					this.timer = null;
+				}
+				this.timer = setTimeout(() => {
+					const className = '.tui-sticky-class';
+					const query = uni.createSelectorQuery().in(this);
+					query
+						.select(className)
+						.boundingClientRect(res => {
+							if (res) {
+								this.top = res.top + (this.scrollTop || 0);
+								this.height = res.height;
+								callback && callback();
+								this.$emit('change', {
+									index: Number(this.index),
+									top: this.top
+								});
+							}
+						})
+						.exec();
+				}, 0);
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.tui-sticky-fixed {
+		width: 100%;
+		position: fixed;
+		left: 0;
+		z-index: 998;
+	}
+
+	.tui-sticky-seat {
+		display: none;
+	}
+</style>
diff --git a/components/thorui/tui-sticky-wxs/tui-sticky.wxs b/components/thorui/tui-sticky-wxs/tui-sticky.wxs
new file mode 100644
index 0000000..044a23d
--- /dev/null
+++ b/components/thorui/tui-sticky-wxs/tui-sticky.wxs
@@ -0,0 +1,44 @@
+var stickyChange = function(scrollTop, oldScrollTop, ownerInstance, ins) {
+	if (!oldScrollTop && scrollTop === 0) return false;
+	var dataset = ins.getDataset()
+	var top = +dataset.top;
+	var height = +dataset.height;
+	var stickyTop = +dataset.stickytop;
+	var isNativeHeader = dataset.isnativeheader;
+	var isFixed = false;
+	var distance = stickyTop
+	// #ifdef H5
+	if (isNativeHeader) {
+		distance = distance - 44
+		distance = distance < 0 ? 0 : distance
+	}
+	// #endif
+	if (dataset.container) {
+		isFixed = (scrollTop + distance >= top && scrollTop + distance < top + height) ? true : false
+	} else {
+		isFixed = scrollTop + distance >= top ? true : false
+	}
+	if (isFixed) {
+		ownerInstance.selectComponent('.tui-sticky-bar').setStyle({
+			"top": stickyTop + 'px'
+		}).addClass('tui-sticky-fixed')
+		ownerInstance.selectComponent('.tui-sticky-seat').setStyle({
+			"display": 'block'
+		})
+	} else {
+		ownerInstance.selectComponent('.tui-sticky-bar').setStyle({
+			"top": 'auto'
+		}).removeClass('tui-sticky-fixed')
+		ownerInstance.selectComponent('.tui-sticky-seat').setStyle({
+			"display": 'none'
+		})
+	}
+	ownerInstance.triggerEvent("sticky", {
+		isFixed: isFixed,
+		index: parseInt(dataset.index)
+	})
+}
+
+module.exports = {
+	stickyChange: stickyChange
+}
diff --git a/components/thorui/tui-sticky/tui-sticky.vue b/components/thorui/tui-sticky/tui-sticky.vue
new file mode 100644
index 0000000..9199d4f
--- /dev/null
+++ b/components/thorui/tui-sticky/tui-sticky.vue
@@ -0,0 +1,152 @@
+<template>
+	<view class="tui-sticky-class">
+		<!--sticky 容器-->
+		<view :style="{height: stickyHeight,backgroundColor:backgroundColor}" v-if="isFixed"></view>
+		<view :class="{'tui-sticky-fixed':isFixed}" :style="{top:isFixed?stickyTop+'px':'auto'}">
+			<slot name="header"></slot>
+		</view>
+		<!--sticky 容器-->
+		<!--内容-->
+		<slot name="content"></slot>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tuiSticky",
+		props: {
+			scrollTop: {
+				type: Number
+			},
+			//吸顶时与顶部的距离，单位px
+			stickyTop: {
+				type: [Number, String]
+				// #ifndef H5
+				,default: 0
+				// #endif
+				// #ifdef H5
+				,default: 44
+				// #endif
+			},
+			//是否指定容器，即内容放置插槽content内
+			container: {
+				type: Boolean,
+				default: false
+			},
+			//是否是原生自带header
+			isNativeHeader: {
+				type: Boolean,
+				default: true
+			},
+			//吸顶容器 高度 rpx
+			stickyHeight: {
+				type: String,
+				default: "auto"
+			},
+			//占位容器背景颜色
+			backgroundColor: {
+				type: String,
+				default: "transparent"
+			},
+			//是否重新计算[有异步加载时使用,设置大于0的数]
+			recalc: {
+				type: Number,
+				default: 0
+			},
+			//列表中的索引值
+			index: {
+				type: [Number, String],
+				default: 0
+			}
+		},
+		watch: {
+			scrollTop(newValue, oldValue) {
+				if (this.initialize != 0) {
+					this.updateScrollChange(() => {
+						this.updateStickyChange();
+						this.initialize = 0
+					});
+				} else {
+					this.updateStickyChange();
+				}
+			},
+			recalc(newValue, oldValue) {
+				this.updateScrollChange(() => {
+					this.updateStickyChange();
+					this.initialize = 0;
+				});
+			}
+		},
+		created() {
+			this.initialize = this.recalc
+		},
+		mounted() {
+			setTimeout(() => {
+				this.updateScrollChange();
+			}, 20)
+		},
+		data() {
+			return {
+				timer: null,
+				top: 0,
+				height: 0,
+				isFixed: false,
+				initialize: 0 //重新初始化
+			};
+		},
+		methods: {
+			updateStickyChange() {
+				const top = this.top;
+				const height = this.height;
+				const scrollTop = this.scrollTop
+				let stickyTop = this.stickyTop
+				// #ifdef H5
+				if (this.isNativeHeader) {
+					stickyTop = stickyTop - 44
+					stickyTop = stickyTop < 0 ? 0 : stickyTop
+				}
+				// #endif
+				if (this.container) {
+					this.isFixed = (scrollTop + stickyTop >= top && scrollTop + stickyTop < top + height) ? true : false
+				} else {
+					this.isFixed = scrollTop + stickyTop >= top ? true : false
+				}
+				//是否吸顶
+				this.$emit("sticky", {
+					isFixed: this.isFixed,
+					index: this.index
+				})
+			},
+			updateScrollChange(callback) {
+				if (this.timer) {
+					clearTimeout(this.timer)
+					this.timer = null
+				}
+				this.timer = setTimeout(() => {
+					const className = '.tui-sticky-class';
+					const query = uni.createSelectorQuery().in(this);
+					query.select(className).boundingClientRect((res) => {
+						if (res) {
+							this.top = res.top + (this.scrollTop || 0);
+							this.height = res.height;
+							callback && callback();
+							this.$emit("change", {
+								index: Number(this.index),
+								top: this.top
+							})
+						}
+					}).exec()
+				}, 0)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-sticky-fixed {
+		width: 100%;
+		position: fixed;
+		left: 0;
+		z-index: 888;
+	}
+</style>
diff --git a/components/thorui/tui-swipe-action/tui-swipe-action.vue b/components/thorui/tui-swipe-action/tui-swipe-action.vue
new file mode 100644
index 0000000..634defc
--- /dev/null
+++ b/components/thorui/tui-swipe-action/tui-swipe-action.vue
@@ -0,0 +1,304 @@
+<template>
+	<view class="tui-swipeout-wrap" :style="{ backgroundColor: backgroundColor }">
+		<view class="tui-swipeout-item" :class="[isShowBtn ? 'swipe-action-show' : '']" @touchstart="handlerTouchstart"
+		 @touchmove="handlerTouchmove" @touchend="handlerTouchend" @mousedown="handlerTouchstart" @mousemove="handlerTouchmove"
+		 @mouseup="handlerTouchend" :style="{ transform: 'translate(' + position.pageX + 'px,0)' }">
+			<view class="tui-swipeout-content">
+				<slot name="content"></slot>
+			</view>
+			<view class="tui-swipeout-button-right-group" v-if="actions.length > 0" @touchend.stop="loop">
+				<view class="tui-swipeout-button-right-item" v-for="(item, index) in actions" :key="index" :style="{ backgroundColor: item.background || '#f7f7f7', color: item.color, width: item.width + 'px' }"
+				 :data-index="index" @tap="handlerButton">
+					<image :src="item.icon" v-if="item.icon" :style="{ width: px(item.imgWidth), height: px(item.imgHeight) }"></image>
+					<text :style="{ fontSize: px(item.fontsize) }">{{ item.name }}</text>
+				</view>
+			</view>
+			<!--actions长度设置为0，可直接传按钮进来-->
+			<view class="tui-swipeout-button-right-group" @touchend.stop="loop" @tap="handlerParentButton" v-if="actions.length === 0"
+			 :style="{ width: operateWidth + 'px', right: '-' + operateWidth + 'px' }">
+				<slot name="button"></slot>
+			</view>
+		</view>
+		<view v-if="isShowBtn && showMask" class="swipe-action_mask" @tap.stop="closeButtonGroup" @touchstart.stop.prevent="closeButtonGroup" />
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'tuiSwipeAction',
+		props: {
+			// name: '删除',
+			// color: '#fff',
+			// fontsize: 32,//单位rpx
+			// width: 80, //单位px
+			// icon: 'like.png',//此处为图片地址
+			// background: '#ed3f14'
+			actions: {
+				type: Array,
+				default () {
+					return [];
+				}
+			},
+			//点击按钮时是否自动关闭
+			closable: {
+				type: Boolean,
+				default: true
+			},
+			//设为false，可以滑动多行不关闭菜单
+			showMask: {
+				type: Boolean,
+				default: true
+			},
+			operateWidth: {
+				type: Number,
+				default: 80
+			},
+			params: {
+				type: Object,
+				default () {
+					return {};
+				}
+			},
+			//禁止滑动
+			forbid: {
+				type: Boolean,
+				default: false
+			},
+			//手动开关
+			open: {
+				type: Boolean,
+				default: false
+			},
+			//背景色
+			backgroundColor: {
+				type: String,
+				default: '#fff'
+			}
+		},
+		watch: {
+			actions(newValue, oldValue) {
+				this.updateButtonSize();
+			},
+			open(newValue) {
+				this.manualSwitch(newValue);
+			}
+		},
+		data() {
+			return {
+				//start position
+				tStart: {
+					pageX: 0,
+					pageY: 0
+				},
+				//限制滑动距离
+				limitMove: 0,
+				//move position
+				position: {
+					pageX: 0,
+					pageY: 0
+				},
+				isShowBtn: false,
+				move: false
+			};
+		},
+		mounted() {
+			this.updateButtonSize();
+		},
+		methods: {
+			swipeDirection(x1, x2, y1, y2) {
+				return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : y1 - y2 > 0 ? 'Up' : 'Down';
+			},
+			//阻止事件冒泡
+			loop() {},
+			updateButtonSize() {
+				const actions = this.actions;
+				if (actions.length > 0) {
+					const query = uni.createSelectorQuery().in(this);
+					let limitMovePosition = 0;
+					actions.forEach(item => {
+						limitMovePosition += item.width || 0;
+					});
+					this.limitMove = limitMovePosition;
+				} else {
+					this.limitMove = this.operateWidth;
+				}
+			},
+			handlerTouchstart(event) {
+				if (this.forbid) return;
+				let touches = event.touches
+				if (touches && touches.length > 1) return;
+				this.move = true;
+				touches = touches ? event.touches[0] : {};
+				if (!touches || (touches.pageX === undefined && touches.pageY === undefined)) {
+					touches = {
+						pageX: event.pageX,
+						pageY: event.pageY
+					};
+				}
+				const tStart = this.tStart;
+				if (touches) {
+					for (let i in tStart) {
+						if (touches[i]) {
+							tStart[i] = touches[i];
+						}
+					}
+				}
+			},
+			swipper(touches) {
+				const start = this.tStart;
+				const spacing = {
+					pageX: touches.pageX - start.pageX,
+					pageY: touches.pageY - start.pageY
+				};
+				if (this.limitMove < Math.abs(spacing.pageX)) {
+					spacing.pageX = -this.limitMove;
+				}
+				this.position = spacing;
+			},
+			handlerTouchmove(event) {
+				if (this.forbid || !this.move) return;
+				const start = this.tStart;
+				let touches = event.touches ? event.touches[0] : {};
+				if (!touches || (touches.pageX === undefined && touches.pageY === undefined)) {
+					touches = {
+						pageX: event.pageX,
+						pageY: event.pageY
+					};
+				}
+				if (touches) {
+					const direction = this.swipeDirection(start.pageX, touches.pageX, start.pageY, touches.pageY);
+					if (direction === 'Left' && Math.abs(this.position.pageX) !== this.limitMove) {
+						this.swipper(touches);
+					}
+				}
+			},
+			handlerTouchend(event) {
+				if (this.forbid || !this.move) return;
+				this.move = false;
+				const start = this.tStart;
+				let touches = event.changedTouches ? event.changedTouches[0] : {};
+				if (!touches || (touches.pageX === undefined && touches.pageY === undefined)) {
+					touches = {
+						pageX: event.pageX,
+						pageY: event.pageY
+					};
+				}
+				if (touches) {
+					const direction = this.swipeDirection(start.pageX, touches.pageX, start.pageY, touches.pageY);
+					const spacing = {
+						pageX: touches.pageX - start.pageX,
+						pageY: touches.pageY - start.pageY
+					};
+					if (Math.abs(spacing.pageX) >= 40 && direction === 'Left') {
+						spacing.pageX = spacing.pageX < 0 ? -this.limitMove : this.limitMove;
+						this.isShowBtn = true;
+					} else {
+						spacing.pageX = 0;
+					}
+					this.position = spacing;
+				}
+			},
+			handlerButton(event) {
+				if (this.closable) {
+					this.closeButtonGroup();
+				}
+				const dataset = event.currentTarget.dataset;
+				this.$emit('click', {
+					index: Number(dataset.index),
+					item: this.params
+				});
+			},
+			closeButtonGroup() {
+				this.position = {
+					pageX: 0,
+					pageY: 0
+				};
+				this.isShowBtn = false;
+			},
+			//控制自定义按钮菜单
+			handlerParentButton(event) {
+				if (this.closable) {
+					this.closeButtonGroup();
+				}
+			},
+			manualSwitch(isOpen) {
+				let x = 0;
+				if (isOpen) {
+					if (this.actions.length === 0) {
+						x = this.operateWidth;
+					} else {
+						let width = 0;
+						this.actions.forEach(item => {
+							width += item.width;
+						});
+						x = width;
+					}
+				}
+				this.position = {
+					pageX: -x,
+					pageY: 0
+				};
+			},
+			px(num) {
+				return uni.upx2px(num) + 'px';
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.tui-swipeout-wrap {
+		position: relative;
+		overflow: hidden;
+	}
+
+	.swipe-action-show {
+		position: relative;
+		z-index: 998;
+	}
+
+	.tui-swipeout-item {
+		width: 100%;
+		/* padding: 15px 20px; */
+		box-sizing: border-box;
+		transition: transform 0.2s ease;
+		font-size: 14px;
+		cursor: pointer;
+	}
+
+	.tui-swipeout-content {
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+	.tui-swipeout-button-right-group {
+		position: absolute;
+		right: -100%;
+		top: 0;
+		height: 100%;
+		z-index: 1;
+		width: 100%;
+	}
+
+	.tui-swipeout-button-right-item {
+		height: 100%;
+		float: left;
+		white-space: nowrap;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+	}
+
+	.swipe-action_mask {
+		display: block;
+		opacity: 0;
+		position: fixed;
+		z-index: 997;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+</style>
diff --git a/components/thorui/tui-tab/tui-tab.vue b/components/thorui/tui-tab/tui-tab.vue
new file mode 100644
index 0000000..13825bc
--- /dev/null
+++ b/components/thorui/tui-tab/tui-tab.vue
@@ -0,0 +1,273 @@
+<template>
+	<scroll-view class="tui-scroll__view" :class="[isFixed && !isSticky?'tui-tabs__fixed':'',isSticky?'tui-tabs__sticky':'']"
+	 :style="{height: height+'rpx',background:backgroundColor,top: isFixed || isSticky ? top + 'px' : 'auto',zIndex:isFixed || isSticky?zIndex:'auto'}"
+	 :scroll-x="scrolling" :scroll-with-animation="scrolling" :scroll-left="scrollLeft">
+		<view class="tui-tabs__wrap">
+			<view class="tui-tabs__list" :class="[scroll ? 'tui-tabs__scroll' : '']" :style="{height: height+'rpx'}">
+				<view class="tui-tabs__item" :style="{height: height+'rpx'}" v-for="(item,index) in tabs" :key="index" @tap="handleClick"
+				 :data-index="index">
+					<view class="tui-item__child" :style="{	color: currentTab == index ? selectedColor : color,fontSize: size + 'rpx',lineHeight: size + 'rpx',fontWeight: bold && currentTab == index ? 'bold' : 'normal'}">{{item}}</view>
+				</view>
+				<view class="tui-tabs__line" :class="[needTransition ? 'tui-transition' : '']" :style="{background: sliderBgColor,height:sliderHeight,borderRadius: sliderRadius,bottom: bottom,width: lineWidth+'px',transform: `translateX(${translateX}px)`}"></view>
+			</view>
+		</view>
+	</scroll-view>
+</template>
+
+<script>
+	export default {
+		name: 'tuiTab',
+		options: {
+			virtualHost: true
+		},
+		props: {
+			// 标签页数据源
+			tabs: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			// 当前选项卡
+			current: {
+				type: Number,
+				default: 0
+			},
+			// 是否可以滚动
+			scroll: {
+				type: Boolean,
+				default: false
+			},
+			// tab高度 rpx
+			height: {
+				type: Number,
+				default: 80
+			},
+			backgroundColor: {
+				type: String,
+				default: '#fff'
+			},
+			//字体大小
+			size: {
+				type: Number,
+				default: 28
+			},
+			//字体颜色
+			color: {
+				type: String,
+				default: '#666'
+			},
+			//选中后字体颜色
+			selectedColor: {
+				type: String,
+				default: '#5677fc'
+			},
+			//选中后 是否加粗 ，未选中则无效
+			bold: {
+				type: Boolean,
+				default: false
+			},
+			//滑块高度
+			sliderHeight: {
+				type: String,
+				default: '2px'
+			},
+			//滑块背景颜色
+			sliderBgColor: {
+				type: String,
+				default: '#5677fc'
+			},
+			//滑块 radius
+			sliderRadius: {
+				type: String,
+				default: '2px'
+			},
+			//滑块bottom
+			bottom: {
+				type: String,
+				default: '0'
+			},
+			//是否固定
+			isFixed: {
+				type: Boolean,
+				default: false
+			},
+			//吸顶效果，为true时isFixed失效
+			isSticky: {
+				type: Boolean,
+				default: false
+			},
+			//isFixed=true时，tab top值 px
+			top: {
+				type: Number,
+				// #ifndef H5
+				default: 0,
+				// #endif
+				// #ifdef H5
+				default: 44
+				// #endif
+			},
+			zIndex: {
+				type: [Number, String],
+				default: 996
+			}
+		},
+		watch: {
+			/**
+			 * 监听数据变化, 如果改变重新初始化参数
+			 */
+			tabs(newVal, oldVal) {
+				this.scrolling = false
+				// 异步加载数据时候, 延迟执行 init 方法, 防止无法正确获取 dom 信息
+				setTimeout(() => this.init(), 200);
+			},
+			/**
+			 *  监听 currentTab 变化, 做对应处理
+			 */
+			current(newVal, oldVal) {
+				this.scrollByIndex(newVal);
+			}
+		},
+		created() {
+			this.currentTab = this.current;
+		},
+		mounted() {
+			this.init()
+		},
+		data() {
+			return {
+				/* 未渲染数据 */
+				windowWidth: 0, // 屏幕宽度
+				tabItems: [], // 所有 tab 节点信息
+
+				/* 渲染数据 */
+				scrolling: true, // 控制 scroll-view 滚动以在异步加载数据的时候能正确获得 dom 信息
+				needTransition: false, // 下划线是否需要过渡动画
+				translateX: 0, // 下划 line 的左边距离
+				lineWidth: 0, // 下划 line 宽度
+				scrollLeft: 0, // scroll-view 左边滚动距离
+				currentTab: 0
+			};
+		},
+		methods: {
+			/**
+			 * 切换菜单
+			 */
+			handleClick(e) {
+				let index = Number(e.currentTarget.dataset.index)
+				this.$emit('change', {
+					index: index
+				});
+				this.scrollByIndex(index);
+			},
+			/**
+			 * 滑动到指定位置
+			 * @param tabCur: 当前激活的tabItem的索引
+			 * @param needTransition: 下划线是否需要过渡动画, 第一次进来应设置为false
+			 */
+			scrollByIndex(tabCur, needTransition = true) {
+				let item = this.tabItems[tabCur];
+				if (!item) return;
+				let itemWidth = item.width || 0,
+					itemLeft = item.left || 0;
+				this.needTransition = needTransition;
+				this.currentTab = tabCur;
+				// 超出滚动的情况
+				if (this.scroll) {
+					// 保持滚动后当前 item '尽可能' 在屏幕中间
+					let scrollLeft = itemLeft - (this.windowWidth - itemWidth) / 2;
+					this.scrollLeft = scrollLeft;
+					this.translateX = itemLeft;
+					this.lineWidth = itemWidth
+				} else {
+					// 不超出滚动的情况
+					this.translateX = itemLeft;
+					this.lineWidth = itemWidth
+				}
+			},
+			/**
+			 *  初始化函数
+			 */
+			init() {
+				const {
+					windowWidth
+				} = uni.getSystemInfoSync();
+				this.windowWidth = windowWidth || 375
+				const query = uni.createSelectorQuery().in(this);
+				query.selectAll(".tui-item__child").boundingClientRect((res) => {
+					this.scrolling = true;
+					this.tabItems = res;
+					this.scrollByIndex(this.currentTab, false);
+				}).exec();
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.tui-scroll__view {
+		width: 100%;
+		height: 80rpx;
+		overflow: hidden;
+	}
+
+	.tui-tabs__fixed {
+		position: fixed;
+		left: 0;
+	}
+
+	.tui-tabs__sticky {
+		position: sticky;
+		left: 0;
+	}
+
+	.tui-tabs__wrap {
+		padding-bottom: 20rpx;
+	}
+
+	.tui-tabs__list {
+		position: relative;
+		height: 80rpx;
+		display: flex;
+	}
+
+	.tui-tabs__scroll {
+		white-space: nowrap !important;
+		display: block !important;
+	}
+
+	.tui-tabs__scroll .tui-tabs__item {
+		padding: 0 30rpx;
+		display: inline-flex;
+	}
+
+	.tui-tabs__scroll .tui-item__child {
+		display: block !important;
+	}
+
+	.tui-tabs__item {
+		flex: 1;
+		text-align: center;
+		padding: 0 10rpx;
+		box-sizing: border-box;
+		transition: color 0.3s ease-in-out;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.tui-item__child {
+		display: inline-block;
+	}
+
+	.tui-tabs__line {
+		position: absolute;
+		left: 0;
+		width: 0;
+		display: inline-block;
+	}
+
+	.tui-tabs__line.tui-transition {
+		transition: width 0.3s, transform 0.3s;
+	}
+</style>
diff --git a/components/thorui/tui-tabbar/tui-tabbar.vue b/components/thorui/tui-tabbar/tui-tabbar.vue
new file mode 100644
index 0000000..24d282c
--- /dev/null
+++ b/components/thorui/tui-tabbar/tui-tabbar.vue
@@ -0,0 +1,279 @@
+<template>
+	<view
+		class="tui-tabbar"
+		:class="{ 'tui-tabbar-fixed': isFixed, 'tui-unlined': unlined, 'tui-backdrop__filter': backdropFilter }"
+		:style="{ background: backgroundColor, zIndex: isFixed ? zIndex : 'auto' }"
+	>
+		<block v-for="(item, index) in tabBar" :key="index">
+			<view
+				class="tui-tabbar-item"
+				:class="{ 'tui-item-hump': item.hump }"
+				:style="{ backgroundColor: item.hump && !backdropFilter ? backgroundColor : 'none' }"
+				@tap="tabbarSwitch(index, item.hump, item.pagePath, item.verify)"
+			>
+				<view class="tui-icon-box" :class="{ 'tui-tabbar-hump': item.hump }">
+					<image :src="current == index ? item.selectedIconPath : item.iconPath" :class="[item.hump ? '' : 'tui-tabbar-icon']"></image>
+					<view :class="[item.isDot ? 'tui-badge-dot' : 'tui-badge']" :style="{ color: badgeColor, backgroundColor: badgeBgColor }" v-if="item.num">
+						{{ item.isDot ? '' : item.num }}
+					</view>
+				</view>
+				<view class="tui-text-scale" :class="{ 'tui-text-hump': item.hump }" :style="{ color: current == index ? selectedColor : color }">{{ item.text }}</view>
+			</view>
+		</block>
+		<view :style="{ background: backgroundColor }" :class="{ 'tui-hump-box': hump }" v-if="hump && !unlined && !backdropFilter"></view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiTabbar',
+	props: {
+		//当前索引
+		current: {
+			type: Number,
+			default: 0
+		},
+		//字体颜色
+		color: {
+			type: String,
+			default: '#666'
+		},
+		//字体选中颜色
+		selectedColor: {
+			type: String,
+			default: '#5677FC'
+		},
+		//背景颜色
+		backgroundColor: {
+			type: String,
+			default: '#FFFFFF'
+		},
+		//是否需要中间凸起按钮
+		hump: {
+			type: Boolean,
+			default: false
+		},
+		//固定在底部
+		isFixed: {
+			type: Boolean,
+			default: true
+		},
+		//tabbar
+		// "pagePath": "/pages/my/my", 页面路径
+		// "text": "thor", 标题
+		// "iconPath": "thor_gray.png", 图标地址
+		// "selectedIconPath": "thor_active.png", 选中图标地址
+		// "hump": true, 是否为凸起图标
+		// "num": 2,   角标数量
+		// "isDot": true,  角标是否为圆点
+		// "verify": true  是否验证  （如登录）
+		tabBar: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		//角标字体颜色
+		badgeColor: {
+			type: String,
+			default: '#fff'
+		},
+		//角标背景颜色
+		badgeBgColor: {
+			type: String,
+			default: '#F74D54'
+		},
+		unlined: {
+			type: Boolean,
+			default: false
+		},
+		//是否开启高斯模糊效果[仅在支持的浏览器有效果]
+		backdropFilter: {
+			type: Boolean,
+			default: false
+		},
+		//z-index
+		zIndex: {
+			type: [Number, String],
+			default: 9999
+		}
+	},
+	watch: {
+		current() {}
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		tabbarSwitch(index, hump, pagePath, verify) {
+			this.$emit('click', {
+				index: index,
+				hump: hump,
+				pagePath: pagePath,
+				verify: verify
+			});
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-tabbar {
+	width: 100%;
+	height: 100rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	position: relative;
+}
+.tui-backdrop__filter {
+	/* Safari for macOS & iOS */
+	-webkit-backdrop-filter: blur(15px);
+	/* Google Chrome */
+	backdrop-filter: blur(15px);
+}
+.tui-tabbar-fixed {
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom);
+	box-sizing: content-box !important;
+}
+
+.tui-tabbar::before {
+	content: ' ';
+	width: 100%;
+	border-top: 1px solid #b2b2b2;
+	position: absolute;
+	top: 0;
+	left: 0;
+	transform: scaleY(0.5) translateZ(0);
+	transform-origin: 0 0;
+	display: block;
+	z-index: 3;
+}
+
+.tui-tabbar-item {
+	height: 100%;
+	flex: 1;
+	display: flex;
+	text-align: center;
+	align-items: center;
+	flex-direction: column;
+	justify-content: space-between;
+	position: relative;
+	padding: 10rpx 0;
+	box-sizing: border-box;
+	z-index: 5;
+}
+
+.tui-icon-box {
+	position: relative;
+}
+
+.tui-item-hump {
+	height: 98rpx;
+}
+
+.tui-tabbar-icon {
+	width: 52rpx;
+	height: 52rpx;
+	display: block;
+}
+
+.tui-hump-box {
+	width: 120rpx;
+	height: 120rpx;
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+	top: -50rpx;
+	border-radius: 50%;
+	z-index: 4;
+}
+
+.tui-hump-box::after {
+	content: ' ';
+	height: 200%;
+	width: 200%;
+	border: 1px solid #b2b2b2;
+	position: absolute;
+	top: 0;
+	left: 0;
+	transform: scale(0.5) translateZ(0);
+	transform-origin: 0 0;
+	border-radius: 120rpx;
+	box-sizing: border-box;
+	display: block;
+}
+
+.tui-unlined::after {
+	height: 0 !important;
+}
+
+.tui-tabbar-hump {
+	width: 100rpx;
+	height: 100rpx;
+	position: absolute;
+	left: 50%;
+	-webkit-transform: translateX(-50%) rotate(0deg);
+	transform: translateX(-50%) rotate(0deg);
+	top: -40rpx;
+	-webkit-transition: all 0.2s linear;
+	transition: all 0.2s linear;
+	border-radius: 50%;
+	z-index: 5;
+}
+
+.tui-tabbar-hump image {
+	width: 100rpx;
+	height: 100rpx;
+	display: block;
+}
+
+.tui-hump-active {
+	-webkit-transform: translateX(-50%) rotate(135deg);
+	transform: translateX(-50%) rotate(135deg);
+}
+
+.tui-text-scale {
+	font-weight: bold;
+	transform: scale(0.8);
+	font-size: 25rpx;
+	line-height: 28rpx;
+	transform-origin: center 100%;
+}
+
+.tui-text-hump {
+	position: absolute;
+	left: 50%;
+	bottom: 10rpx;
+	transform: scale(0.8) translateX(-50%);
+	transform-origin: 0 100%;
+}
+
+.tui-badge {
+	position: absolute;
+	font-size: 24rpx;
+	height: 32rpx;
+	min-width: 20rpx;
+	padding: 0 6rpx;
+	border-radius: 40rpx;
+	right: 0;
+	top: -5rpx;
+	transform: translateX(70%);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.tui-badge-dot {
+	position: absolute;
+	height: 16rpx;
+	width: 16rpx;
+	border-radius: 50%;
+	right: -4rpx;
+	top: -4rpx;
+}
+</style>
diff --git a/components/thorui/tui-tabs/tui-tabs.vue b/components/thorui/tui-tabs/tui-tabs.vue
new file mode 100644
index 0000000..5ee5837
--- /dev/null
+++ b/components/thorui/tui-tabs/tui-tabs.vue
@@ -0,0 +1,276 @@
+<template>
+	<view
+		class="tui-tabs-view"
+		:class="[isFixed ? 'tui-tabs-fixed' : 'tui-tabs-relative', unlined ? 'tui-unlined' : '']"
+		:style="{
+			width: tabsWidth + 'px',
+			height: height + 'rpx',
+			padding: `0 ${padding}rpx`,
+			background: backgroundColor,
+			top: isFixed ? top + 'px' : 'auto',
+			zIndex: isFixed ? zIndex : 'auto'
+		}"
+	>
+		<view v-for="(item, index) in tabs" :key="index" class="tui-tabs-item" :style="{ width: itemWidth }" @tap.stop="swichTabs(index)">
+			<view
+				class="tui-tabs-title"
+				:class="{ 'tui-tabs-active': currentTab == index, 'tui-tabs-disabled': item.disabled }"
+				:style="{
+					color: currentTab == index ? selectedColor : color,
+					fontSize: size + 'rpx',
+					lineHeight: size + 'rpx',
+					fontWeight: bold && currentTab == index ? 'bold' : 'normal'
+				}"
+			>
+				{{ item.name }}
+			</view>
+		</view>
+		<view
+			class="tui-tabs-slider"
+			:style="{
+				transform: 'translateX(' + scrollLeft + 'px)',
+				width: sliderWidth + 'rpx',
+				height: sliderHeight + 'rpx',
+				borderRadius: sliderRadius,
+				bottom: bottom,
+				background: sliderBgColor,
+				marginBottom: bottom == '50%' ? '-' + sliderHeight / 2 + 'rpx' : 0
+			}"
+		></view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiTabs',
+	props: {
+		//标签页
+		tabs: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		//tabs宽度，不传值则默认使用windowWidth，单位px
+		width: {
+			type: Number,
+			default: 0
+		},
+		//rpx
+		height: {
+			type: Number,
+			default: 80
+		},
+		//rpx 只对左右padding起作用，上下为0
+		padding: {
+			type: Number,
+			default: 30
+		},
+		//背景色
+		backgroundColor: {
+			type: String,
+			default: '#FFFFFF'
+		},
+		//是否固定
+		isFixed: {
+			type: Boolean,
+			default: false
+		},
+		//px
+		top: {
+			type: Number,
+			// #ifndef H5
+			default: 0,
+			// #endif
+			// #ifdef H5
+			default: 44
+			// #endif
+		},
+		//是否去掉底部线条
+		unlined: {
+			type: Boolean,
+			default: false
+		},
+		//当前选项卡
+		currentTab: {
+			type: Number,
+			default: 0
+		},
+		//滑块宽度
+		sliderWidth: {
+			type: Number,
+			default: 68
+		},
+		//滑块高度
+		sliderHeight: {
+			type: Number,
+			default: 6
+		},
+		//滑块背景颜色
+		sliderBgColor: {
+			type: String,
+			default: '#5677fc'
+		},
+		sliderRadius: {
+			type: String,
+			default: '50rpx'
+		},
+		//滑块bottom
+		bottom: {
+			type: String,
+			default: '0'
+		},
+		//标签页宽度
+		itemWidth: {
+			type: String,
+			default: '25%'
+		},
+		//字体颜色
+		color: {
+			type: String,
+			default: '#666'
+		},
+		//选中后字体颜色
+		selectedColor: {
+			type: String,
+			default: '#5677fc'
+		},
+		//字体大小
+		size: {
+			type: Number,
+			default: 28
+		},
+		//选中后 是否加粗 ，未选中则无效
+		bold: {
+			type: Boolean,
+			default: false
+		},
+		zIndex: {
+			type: [Number, String],
+			default: 996
+		}
+	},
+	watch: {
+		currentTab() {
+			this.checkCor();
+		},
+		tabs() {
+			this.checkCor();
+		},
+		width(val) {
+			this.tabsWidth = val;
+			this.checkCor();
+		}
+	},
+	created() {
+		// 高度自适应
+		setTimeout(() => {
+			uni.getSystemInfo({
+				success: res => {
+					this.winWidth = res.windowWidth;
+					this.tabsWidth = this.width == 0 ? this.winWidth : this.width;
+					this.checkCor();
+				}
+			});
+		}, 0);
+	},
+	data() {
+		return {
+			winWidth: 0,
+			tabsWidth: 0,
+			scrollLeft: 0
+		};
+	},
+	methods: {
+		checkCor: function() {
+			let tabsNum = this.tabs.length;
+			let padding = (this.winWidth / 750) * this.padding;
+			let width = this.tabsWidth - padding * 2;
+			let left = (width / tabsNum - (this.winWidth / 750) * this.sliderWidth) / 2 + padding;
+			let scrollLeft = left;
+			if (this.currentTab > 0) {
+				scrollLeft = scrollLeft + (width / tabsNum) * this.currentTab;
+			}
+			this.scrollLeft = scrollLeft;
+		},
+		// 点击标题切换当前页时改变样式
+		swichTabs: function(index) {
+			let item = this.tabs[index];
+			if (item && item.disabled) return;
+			if (this.currentTab == index) {
+				return false;
+			} else {
+				this.$emit('change', {
+					index: Number(index)
+				});
+			}
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-tabs-view {
+	width: 100%;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.tui-tabs-relative {
+	position: relative;
+}
+
+.tui-tabs-fixed {
+	position: fixed;
+	left: 0;
+}
+
+.tui-tabs-fixed::before,
+.tui-tabs-relative::before {
+	content: '';
+	position: absolute;
+	border-bottom: 1rpx solid #eaeef1;
+	-webkit-transform: scaleY(0.5) translateZ(0);
+	transform: scaleY(0.5) translateZ(0);
+	transform-origin: 0 100%;
+	bottom: 0;
+	right: 0;
+	left: 0;
+}
+
+.tui-unlined::before {
+	border-bottom: 0 !important;
+}
+
+.tui-tabs-item {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.tui-tabs-disabled {
+	opacity: 0.6;
+}
+
+.tui-tabs-title {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	z-index: 2;
+}
+
+.tui-tabs-active {
+	transition: all 0.15s ease-in-out;
+}
+
+.tui-tabs-slider {
+	position: absolute;
+	left: 0;
+	transition: all 0.15s ease-in-out;
+	z-index: 0;
+	transform: translateZ(0);
+}
+</style>
diff --git a/components/thorui/tui-tag/tui-tag.vue b/components/thorui/tui-tag/tui-tag.vue
new file mode 100644
index 0000000..82b9d08
--- /dev/null
+++ b/components/thorui/tui-tag/tui-tag.vue
@@ -0,0 +1,354 @@
+<template>
+	<view class="tui-tag" :hover-class="hover ? 'tui-tag-opcity' : ''" :hover-stay-time="150" :class="[originLeft ? 'tui-origin-left' : '', originRight ? 'tui-origin-right' : '', getClassName(shape, plain), getTypeClass(type, plain)]"
+	 :style="{ transform: `scale(${scaleMultiple})`, padding: padding, margin: margin, fontSize: size, lineHeight: size }"
+	 @tap="handleClick">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'tuiTag',
+		props: {
+			type: {
+				type: String,
+				default: 'primary'
+			},
+			//padding
+			padding: {
+				type: String,
+				default: '16rpx 26rpx'
+			},
+			margin: {
+				type: String,
+				default: '0'
+			},
+			//文字大小 rpx
+			size: {
+				type: String,
+				default: '28rpx'
+			},
+			// circle, square，circleLeft，circleRight
+			shape: {
+				type: String,
+				default: 'square'
+			},
+			//是否空心
+			plain: {
+				type: Boolean,
+				default: false
+			},
+			//点击效果
+			hover: {
+				type: Boolean,
+				default: false
+			},
+			//缩放倍数
+			scaleMultiple: {
+				type: Number,
+				default: 1
+			},
+			originLeft: {
+				type: Boolean,
+				default: false
+			},
+			originRight: {
+				type: Boolean,
+				default: false
+			},
+			index: {
+				type: Number,
+				default: 0
+			}
+		},
+		methods: {
+			handleClick() {
+				this.$emit('click', {
+					index: this.index
+				});
+			},
+			getTypeClass: function(type, plain) {
+				return plain ? 'tui-' + type + '-outline' : 'tui-' + type;
+			},
+			getClassName: function(shape, plain) {
+				//circle, square，circleLeft，circleRight
+				var className = plain ? 'tui-tag-outline ' : '';
+				if (shape != 'square') {
+					if (shape == 'circle') {
+						className = className + (plain ? 'tui-tag-outline-fillet' : 'tui-tag-fillet');
+					} else if (shape == 'circleLeft') {
+						className = className + 'tui-tag-fillet-left';
+					} else if (shape == 'circleRight') {
+						className = className + 'tui-tag-fillet-right';
+					}
+				}
+				return className;
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	/* color start*/
+
+	.tui-primary {
+		background-color: #5677fc !important;
+		color: #fff;
+	}
+
+	.tui-light-primary {
+		background-color: #5c8dff !important;
+		color: #fff;
+	}
+
+	.tui-dark-primary {
+		background-color: #4a67d6 !important;
+		color: #fff;
+	}
+
+	.tui-dLight-primary {
+		background-color: #4e77d9 !important;
+		color: #fff;
+	}
+
+	.tui-danger {
+		background-color: #ed3f14 !important;
+		color: #fff;
+	}
+
+	.tui-red {
+		background-color: #ff201f !important;
+		color: #fff;
+	}
+
+	.tui-warning {
+		background-color: #ff7900 !important;
+		color: #fff;
+	}
+
+	.tui-green {
+		background-color: #19be6b !important;
+		color: #fff;
+	}
+
+	.tui-high-green {
+		background-color: #52dcae !important;
+		color: #52dcae;
+	}
+
+	.tui-black {
+		background-color: #000 !important;
+		color: #fff;
+	}
+
+	.tui-white {
+		background-color: #fff !important;
+		color: #333 !important;
+	}
+
+	.tui-translucent {
+		background-color: rgba(0, 0, 0, 0.7);
+	}
+
+	.tui-light-black {
+		background-color: #333 !important;
+	}
+
+	.tui-gray {
+		background-color: #ededed !important;
+	}
+
+	.tui-phcolor-gray {
+		background-color: #ccc !important;
+	}
+
+	.tui-divider-gray {
+		background-color: #eaeef1 !important;
+	}
+
+	.tui-btn-gray {
+		background-color: #ededed !important;
+		color: #999 !important;
+	}
+
+	.tui-hover-gray {
+		background-color: #f7f7f9 !important;
+	}
+
+	.tui-bg-gray {
+		background-color: #fafafa !important;
+	}
+
+	.tui-light-blue {
+		background-color: #ecf6fd;
+		color: #4dabeb !important;
+	}
+
+	.tui-light-brownish {
+		background-color: #fcebef;
+		color: #8a5966 !important;
+	}
+
+	.tui-light-orange {
+		background-color: #fef5eb;
+		color: #faa851 !important;
+	}
+
+	.tui-light-green {
+		background-color: #e8f6e8;
+		color: #44cf85 !important;
+	}
+
+	.tui-primary-outline::after {
+		border: 1px solid #5677fc !important;
+	}
+
+	.tui-primary-outline {
+		color: #5677fc !important;
+		background-color: none;
+	}
+
+	.tui-danger-outline {
+		color: #ed3f14 !important;
+		background-color: none;
+	}
+
+	.tui-danger-outline::after {
+		border: 1px solid #ed3f14 !important;
+	}
+
+	.tui-red-outline {
+		color: #ff201f !important;
+		background-color: none;
+	}
+
+	.tui-red-outline::after {
+		border: 1px solid #ff201f !important;
+	}
+
+	.tui-warning-outline {
+		color: #ff7900 !important;
+		background-color: none;
+	}
+
+	.tui-warning-outline::after {
+		border: 1px solid #ff7900 !important;
+	}
+
+	.tui-green-outline {
+		color: #44cf85 !important;
+		background-color: none;
+	}
+
+	.tui-green-outline::after {
+		border: 1px solid #44cf85 !important;
+	}
+
+	.tui-high-green-outline {
+		color: #52dcae !important;
+		background-color: none;
+	}
+
+	.tui-high-green-outline::after {
+		border: 1px solid #52dcae !important;
+	}
+
+	.tui-gray-outline {
+		color: #999 !important;
+		background-color: none;
+	}
+
+	.tui-gray-outline::after {
+		border: 1px solid #ccc !important;
+	}
+
+	.tui-black-outline {
+		color: #333 !important;
+		background-color: none;
+	}
+
+	.tui-black-outline::after {
+		border: 1px solid #333 !important;
+	}
+
+	.tui-white-outline {
+		color: #fff !important;
+		background-color: none;
+	}
+
+	.tui-white-outline::after {
+		border: 1px solid #fff !important;
+	}
+
+	/* color end*/
+
+	/* tag start*/
+
+	.tui-tag {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 6rpx;
+		flex-shrink: 0;
+	}
+
+	.tui-tag-outline {
+		position: relative;
+		background-color: none;
+		color: #5677fc;
+	}
+
+	.tui-tag-outline::after {
+		content: ' ';
+		position: absolute;
+		width: 200%;
+		height: 200%;
+		transform: scale(0.5) translateZ(0);
+		transform-origin: 0 0;
+		box-sizing: border-box;
+		left: 0;
+		top: 0;
+		border-radius: 12rpx;
+	}
+
+	.tui-tag-fillet {
+		border-radius: 50rpx;
+	}
+
+	.tui-white.tui-tag-fillet::after {
+		border-radius: 80rpx;
+	}
+
+	.tui-tag-outline-fillet::after {
+		border-radius: 80rpx;
+	}
+
+	.tui-tag-fillet-left {
+		border-radius: 50rpx 0 0 50rpx;
+	}
+
+	.tui-tag-fillet-right {
+		border-radius: 0 50rpx 50rpx 0;
+	}
+
+	.tui-tag-fillet-left.tui-tag-outline::after {
+		border-radius: 100rpx 0 0 100rpx;
+	}
+
+	.tui-tag-fillet-right.tui-tag-outline::after {
+		border-radius: 0 100rpx 100rpx 0;
+	}
+
+	/* tag end*/
+	.tui-origin-left {
+		transform-origin: 0 center;
+	}
+
+	.tui-origin-right {
+		transform-origin: 100% center;
+	}
+
+	.tui-tag-opcity {
+		opacity: 0.5;
+	}
+</style>
diff --git a/components/thorui/tui-time-axis/tui-time-axis.vue b/components/thorui/tui-time-axis/tui-time-axis.vue
new file mode 100644
index 0000000..dc346c0
--- /dev/null
+++ b/components/thorui/tui-time-axis/tui-time-axis.vue
@@ -0,0 +1,38 @@
+<template>
+	<view class="tui-timeaxis-class tui-time-axis">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"tuiTimeAxis",
+		data() {
+			return {
+
+			};
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-time-axis {
+		padding-left: 20px;
+		box-sizing: border-box;
+		position: relative;
+	}
+
+	.tui-time-axis::before {
+		content: " ";
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 1px;
+		bottom: 0;
+		border-left: 1px solid #ddd;
+		-webkit-transform-origin: 0 0;
+		transform-origin: 0 0;
+		-webkit-transform: scaleX(0.5);
+		transform: scaleX(0.5);
+	}
+</style>
diff --git a/components/thorui/tui-timeaxis-item/tui-timeaxis-item.vue b/components/thorui/tui-timeaxis-item/tui-timeaxis-item.vue
new file mode 100644
index 0000000..154b8f6
--- /dev/null
+++ b/components/thorui/tui-timeaxis-item/tui-timeaxis-item.vue
@@ -0,0 +1,50 @@
+<template>
+	<view class="tui-timeaxis-item">
+		<slot name="content"></slot>
+		<view class="tui-timeaxis-node" :style="{backgroundColor:backgroundColor}">
+			<slot name="node"></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tuiTimeaxisItem",
+		props: {
+			//节点背景色
+			backgroundColor: {
+				type: String,
+				default: "#fafafa"
+			}
+		},
+		data() {
+			return {
+
+			};
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-timeaxis-item {
+		position: relative;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		margin-bottom: 25px;
+	}
+
+	.tui-timeaxis-node {
+		position: absolute;
+		top: 0;
+		left: -20px;
+		transform-origin: 0;
+		transform: translateX(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 99;
+		background-color: #fafafa;
+		font-size: 24rpx;
+	}
+</style>
diff --git a/components/thorui/tui-tips/tui-tips.vue b/components/thorui/tui-tips/tui-tips.vue
new file mode 100644
index 0000000..bd6900a
--- /dev/null
+++ b/components/thorui/tui-tips/tui-tips.vue
@@ -0,0 +1,129 @@
+<template>
+	<block v-if="position == 'top'">
+		<view class="tui-tips-class tui-toptips" :style="{backgroundColor:backgroundColor,color:color,fontSize:size+'rpx'}" :class="[show ? 'tui-top-show' : '']">{{ msg }}</view>
+	</block>
+	<block v-else>
+		<view class="tui-tips-class tui-toast" :class="[position == 'center' ? 'tui-centertips' : 'tui-bottomtips', show ? 'tui-toast-show' : '']">
+			<view class="tui-tips-content" :style="{backgroundColor:backgroundColor,color:color,fontSize:size+'rpx'}">{{ msg }}</view>
+		</view>
+	</block>
+</template>
+
+<script>
+export default {
+	name: 'tuiTips',
+	props: {
+		//top bottom center
+		position: {
+			type: String,
+			default: 'top'
+		},
+		backgroundColor: {
+			type: String,
+			default: 'rgba(0, 0, 0, 0.7)'
+		},
+		color: {
+			type: String,
+			default: '#fff'
+		},
+		size: {
+			type: Number,
+			default: 30
+		}
+	},
+	data() {
+		return {
+			timer: null,
+			show: false,
+			msg: '无法连接到服务器~'
+		};
+	},
+	methods: {
+		showTips: function(options) {
+			const {duration = 2000 } = options;
+			clearTimeout(this.timer);
+			this.show = true;
+			// this.duration = duration < 2000 ? 2000 : duration;
+			this.msg = options.msg;
+			this.timer = setTimeout(() => {
+				this.show = false;
+				clearTimeout(this.timer);
+				this.timer = null;
+			}, duration);
+		}
+	}
+};
+</script>
+
+<style scoped>
+/*顶部消息提醒 start*/
+.tui-toptips {
+	width: 100%;
+	padding: 18rpx 30rpx;
+	box-sizing: border-box;
+	position: fixed;
+	z-index: 9999;
+	left: 0;
+	top: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	word-break: break-all;
+	opacity: 0;
+	transform: translateZ(0) translateY(-100%);
+	transition: all 0.3s ease-in-out;
+}
+
+.tui-top-show {
+	transform: translateZ(0) translateY(0);
+	opacity: 1;
+}
+
+/*顶部消息提醒 end*/
+
+/*toast消息提醒 start*/
+
+/*注意问题：
+ 1、fixed 元素宽度无法自适应，所以增加了子元素
+ 2、fixed 和 display冲突导致动画效果消失，暂时使用visibility替代
+*/
+.tui-toast {
+	width: 80%;
+	box-sizing: border-box;
+	color: #fff;
+	font-size: 28rpx;
+	position: fixed;
+	visibility: hidden;
+	opacity: 0;
+	left: 50%;
+	transition: all 0.3s ease-in-out;
+	z-index: 9999;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.tui-toast-show {
+	visibility: visible;
+	opacity: 1;
+}
+
+.tui-tips-content {
+	word-wrap: break-word;
+	word-break: break-all;
+	border-radius: 8rpx;
+	padding: 18rpx 30rpx;
+}
+
+.tui-bottomtips {
+	bottom: 120rpx;
+	-webkit-transform: translateX(-50%);
+	transform: translateX(-50%);
+}
+
+.tui-centertips {
+	top: 50%;
+	-webkit-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+}
+</style>
diff --git a/components/thorui/tui-toast/tui-toast.vue b/components/thorui/tui-toast/tui-toast.vue
new file mode 100644
index 0000000..31b6f8f
--- /dev/null
+++ b/components/thorui/tui-toast/tui-toast.vue
@@ -0,0 +1,121 @@
+<template>
+	<view class="tui-toast" :class="[visible?'tui-toast-show':'',content?'tui-toast-padding':'',icon?'':'tui-unicon-padding']" :style="{width:getWidth(icon,content),zIndex:zIndex}">
+		<image :src="imgUrl" class="tui-toast-img" v-if="icon"></image>
+		<view class="tui-toast-text" :class="[icon?'':'tui-unicon']">{{title}}</view>
+		<view class="tui-toast-text tui-content-ptop" v-if="content && icon">{{content}}</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tuiToast",
+		props: {
+			zIndex:{
+				type:Number,
+				default:99999
+			}
+		},
+		data() {
+			return {
+				timer: null,
+				//是否显示
+				visible: false,
+				//显示标题
+				title: "操作成功",
+				//显示内容
+				content: "",
+				//是否有icon
+				icon:false,
+				imgUrl:""
+			};
+		},
+		methods: {
+			show: function(options) {
+				let {
+					duration = 2000,
+					icon=false
+				} = options;
+				clearTimeout(this.timer);
+				this.visible = true;
+				this.title = options.title || "";
+				this.content = options.content || "";
+				this.icon=icon;
+				if(icon && options.imgUrl){
+					this.imgUrl=options.imgUrl
+				}
+				this.timer = setTimeout(() => {
+					this.visible = false;
+					clearTimeout(this.timer);
+					this.timer = null;
+				}, duration);
+			},
+			getWidth(icon,content){
+				let width="auto";
+				if(icon){
+					width=content?'420rpx':'360rpx'
+				}
+				return width
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-toast {
+		background-color: rgba(0, 0, 0, 0.75);
+		border-radius: 10rpx;
+		position: fixed;
+		visibility: hidden;
+		opacity: 0;
+		left: 50%;
+		top: 48%;
+		-webkit-transform: translate(-50%, -50%);
+		transform: translate(-50%, -50%);
+		transition:  0.3s ease-in-out;
+		transition-property:opacity,visibility;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		padding: 60rpx 20rpx 54rpx 20rpx;
+		box-sizing: border-box;
+	}
+
+	.tui-toast-padding {
+		padding-top: 50rpx !important;
+		padding-bottom: 50rpx !important;
+	}
+	.tui-unicon-padding {
+		padding: 24rpx 40rpx !important;
+		word-break: break-all;
+	}
+
+	.tui-toast-show {
+		visibility: visible;
+		opacity: 1;
+	}
+
+
+	.tui-toast-img {
+		width: 120rpx;
+		height: 120rpx;
+		display: block;
+		margin-bottom: 28rpx;
+	}
+
+	.tui-toast-text {
+		font-size: 30rpx;
+		line-height: 30rpx;
+		font-weight: 400;
+		color: #fff;
+		text-align: center;
+	}
+	.tui-unicon{
+		line-height: 40rpx !important;
+		font-size: 32rpx !important;
+	}
+	.tui-content-ptop {
+		padding-top: 10rpx;
+		font-size: 26rpx !important;
+	}
+</style>
diff --git a/components/thorui/tui-top-dropdown/tui-top-dropdown.vue b/components/thorui/tui-top-dropdown/tui-top-dropdown.vue
new file mode 100644
index 0000000..d343231
--- /dev/null
+++ b/components/thorui/tui-top-dropdown/tui-top-dropdown.vue
@@ -0,0 +1,104 @@
+<template>
+	<view>
+		<view
+			class="tui-top-dropdown tui-dropdown-box"
+			:class="[show ? 'tui-dropdown-show' : '']"
+			:style="{
+				height: height ? px(height) : 'auto',
+				backgroundColor: backgroundColor,
+				paddingBottom: px(paddingbtm),
+				transform: 'translateZ(0) translateY(' + (show ? px(translatey) : '-100%') + ')'
+			}"
+		>
+			<slot></slot>
+		</view>
+		<view @touchmove.stop.prevent class="tui-dropdown-mask" :class="[mask && show ? 'tui-mask-show' : '']" @tap="handleClose"></view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiTopDropdown',
+	props: {
+		//是否需要mask
+		mask: {
+			type: Boolean,
+			default: true
+		},
+		//控制显示
+		show: {
+			type: Boolean,
+			default: false
+		},
+		//背景颜色
+		backgroundColor: {
+			type: String,
+			default: '#f2f2f2'
+		},
+		//padding-bottom  rpx
+		paddingbtm: {
+			type: Number,
+			default: 0
+		},
+		//高度 rpx
+		height: {
+			type: Number,
+			default: 580
+		},
+		//移动距离 需要计算
+		translatey: {
+			type: Number,
+			default: 0
+		}
+	},
+	methods: {
+		handleClose() {
+			if (!this.show) {
+				return;
+			}
+			this.$emit('close', {});
+		},
+		px(num) {
+			return uni.upx2px(num) + 'px';
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tui-dropdown-box {
+	width: 100%;
+	position: fixed;
+	box-sizing: border-box;
+	border-bottom-right-radius: 24rpx;
+	border-bottom-left-radius: 24rpx;
+	transform: translateZ(0);
+	overflow: hidden;
+	/* visibility: hidden; */
+	transition: all 0.3s ease-in-out;
+	z-index: 996;
+	top: 0;
+}
+
+.tui-dropdown-show {
+	/* visibility: visible; */
+}
+
+.tui-dropdown-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.6);
+	z-index: 986;
+	transition: all 0.3s ease-in-out;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.tui-mask-show {
+	opacity: 1;
+	visibility: visible;
+}
+</style>
diff --git a/components/thorui/tui-upload/tui-upload.vue b/components/thorui/tui-upload/tui-upload.vue
new file mode 100644
index 0000000..0220e58
--- /dev/null
+++ b/components/thorui/tui-upload/tui-upload.vue
@@ -0,0 +1,467 @@
+<template>
+	<view class="tui-container">
+		<view class="tui-upload-box">
+			<view class="tui-image-item" :style="{width:width+'rpx',height:height+'rpx'}" v-for="(item,index) in imageList" :key="index">
+				<image :src="item" class="tui-item-img" :style="{width:width+'rpx',height:height+'rpx'}" @tap.stop="previewImage(index)" mode="aspectFill"></image>
+				<view v-if="!forbidDel" class="tui-img-del" @tap.stop="delImage(index)"></view>
+				<view v-if="statusArr[index]!=1" class="tui-upload-mask">
+					<view class="tui-upload-loading" v-if="statusArr[index]==2"></view>
+					<text class="tui-tips">{{statusArr[index]==2?'上传中...':'上传失败'}}</text>
+					<view class="tui-mask-btn" v-if="statusArr[index]==3" @tap.stop="reUpLoad(index)" hover-class="tui-btn-hover"
+					 :hover-stay-time="150">重新上传</view>
+				</view>
+			</view>
+			<view v-if="isShowAdd" class="tui-upload-add" :style="{width:width+'rpx',height:height+'rpx'}" @tap="chooseImage">
+				<view class="tui-upload-icon tui-icon-plus"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'tuiUpload',
+		props: {
+			//展示图片宽度
+			width:{
+				type:[Number,String],
+				default:220
+			},
+			//展示图片高度
+			height:{
+				type:[Number,String],
+				default:220
+			},
+			//初始化图片路径
+			value: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			//禁用删除
+			forbidDel: {
+				type: Boolean,
+				default: false
+			},
+			//禁用添加
+			forbidAdd: {
+				type: Boolean,
+				default: false
+			},
+			//服务器接口地址。当接口地址为空时，直接返回本地图片地址
+			serverUrl: {
+				type: String,
+				default: ""
+			},
+			//限制数
+			limit: {
+				type: Number,
+				default: 9
+			},
+			//original 原图，compressed 压缩图，默认二者都有
+			sizeType: {
+				type: Array,
+				default () {
+					return ['original', 'compressed']
+				}
+			},
+			//album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
+			sourceType: {
+				type: Array,
+				default () {
+					return ['album', 'camera']
+				}
+			},
+			//可上传图片类型，默认为空，不限制  Array<String> ['jpg','png','gif']
+			imageFormat: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			//单张图片大小限制 MB 
+			size: {
+				type: Number,
+				default: 4
+			},
+			//文件对应的key，默认为 file
+			fileKeyName: {
+				type: String,
+				default: "file"
+			},
+			//HTTP 请求 Header, header 中不能设置 Referer。
+			header: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			//HTTP 请求中其他额外的 form data
+			formData: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			//自定义参数
+			params: {
+				type: [Number, String],
+				default: 0
+			}
+		},
+		data() {
+			return {
+				//图片地址
+				imageList: [],
+				//上传状态：1-上传成功 2-上传中 3-上传失败
+				statusArr: []
+			}
+		},
+		created() {
+			this.initImages()
+		},
+		watch: {
+			value(val) {
+				if (val) {
+					this.initImages()
+				}
+			}
+		},
+		computed: {
+			isShowAdd() {
+				let isShow = true;
+				if (this.forbidAdd || (this.limit && this.imageList.length >= this.limit)) {
+					isShow = false;
+				}
+				return isShow
+			}
+		},
+		methods: {
+			initImages() {
+				this.imageList = [...this.value];
+				for (let item of this.imageList) {
+					this.statusArr.push("1")
+				}
+			},
+			// 重新上传
+			reUpLoad(index) {
+				this.$set(this.statusArr, index, "2")
+				this.change()
+				this.uploadImage(index, this.imageList[index]).then(() => {
+					this.change()
+				}).catch(() => {
+					this.change()
+				})
+			},
+			/**
+			 * @param manual 是否手动上传
+			 **/
+			change(manual = false) {
+				let status = ~this.statusArr.indexOf("2") ? 2 : 1
+				if (status != 2 && ~this.statusArr.indexOf("3")) {
+					// 上传失败
+					status = 3
+				}
+				this.$emit('complete', {
+					status: status,
+					imgArr: this.imageList,
+					params: this.params,
+					manual: manual
+				})
+			},
+			toast(text) {
+				text && uni.showToast({
+					title: text,
+					icon: "none"
+				});
+			},
+			chooseImage: function() {
+				let _this = this;
+				uni.chooseImage({
+					count: _this.limit - _this.imageList.length,
+					sizeType: _this.sizeType,
+					sourceType: _this.sourceType,
+					success: function(e) {
+						let imageArr = [];
+						for (let i = 0; i < e.tempFiles.length; i++) {
+							let len = _this.imageList.length;
+							if (len >= _this.limit) {
+								_this.toast(`最多可上传${_this.limit}张图片`);
+								break;
+							}
+							//过滤图片类型
+							let path = e.tempFiles[i].path;
+
+							if (_this.imageFormat.length > 0) {
+								let format = ""
+								// #ifdef H5
+								let type = e.tempFiles[i].type;
+								format = type.split('/')[1]
+								// #endif
+
+								// #ifndef H5
+								format = path.split(".")[(path.split(".")).length - 1];
+								// #endif
+
+								if (_this.imageFormat.indexOf(format) == -1) {
+									let text = `只能上传 ${_this.imageFormat.join(',')} 格式图片！`
+									_this.toast(text);
+									continue;
+								}
+							}
+
+							//过滤超出大小限制图片
+							let size = e.tempFiles[i].size;
+
+							if (_this.size * 1024 * 1024 < size) {
+								let err = `单张图片大小不能超过：${_this.size}MB`
+								_this.toast(err);
+								continue;
+							}
+							imageArr.push(path)
+							_this.imageList.push(path)
+							_this.statusArr.push("2")
+						}
+						_this.change()
+
+						let start = _this.imageList.length - imageArr.length
+						for (let j = 0; j < imageArr.length; j++) {
+							let index = start + j
+							//服务器地址
+							if (_this.serverUrl) {
+								_this.uploadImage(index, imageArr[j]).then(() => {
+									_this.change()
+								}).catch(() => {
+									_this.change()
+								})
+							} else {
+								//无服务器地址则直接返回成功
+								_this.$set(_this.statusArr, index, "1")
+								_this.change()
+							}
+						}
+					}
+				})
+			},
+			uploadImage: function(index, url, serverUrl) {
+				let _this = this;
+				return new Promise((resolve, reject) => {
+					uni.uploadFile({
+						url: this.serverUrl || serverUrl,
+						name: this.fileKeyName,
+						header: this.header,
+						formData: this.formData,
+						filePath: url,
+						success: function(res) {
+							if (res.statusCode == 200) {
+								//返回结果 此处需要按接口实际返回进行修改
+								let d = JSON.parse(res.data.replace(/\ufeff/g, "") || "{}")
+								//判断code，以实际接口规范判断
+								if (d.code % 100 === 0) {
+									// 上传成功 d.url 为上传后图片地址，以实际接口返回为准
+									d.url && (_this.imageList[index] = d.url)
+									_this.$set(_this.statusArr, index, d.url ? "1" : "3")
+								} else {
+									// 上传失败
+									_this.$set(_this.statusArr, index, "3")
+								}
+								resolve(index)
+							} else {
+								_this.$set(_this.statusArr, index, "3")
+								reject(index)
+							}
+						},
+						fail: function(res) {
+							_this.$set(_this.statusArr, index, "3")
+							reject(index)
+						}
+					})
+				})
+
+			},
+			delImage: function(index) {
+				this.imageList.splice(index, 1)
+				this.statusArr.splice(index, 1)
+				this.$emit("remove", {
+					index: index,
+					params: this.params
+				})
+				this.change()
+			},
+			previewImage: function(index) {
+				if (!this.imageList.length) return;
+				uni.previewImage({
+					current: this.imageList[index],
+					loop: true,
+					urls: this.imageList
+				})
+			},
+			/**
+			 * 当属性serverUrl传空时，父级调用该方法一次性上传所有图片
+			 * @param serverUrl 服务器接口地址
+			 **/
+			uploadAllImage(serverUrl) {
+				if (!serverUrl) {
+					this.toast('服务器接口地址不能为空！');
+					return;
+				}
+				let imageArr = [...this.imageList]
+				const len = imageArr.length
+				for (let i = 0; i < len; i++) {
+					//如果是服务器地址图片则无需再次上传
+					if(imageArr[i].startsWith('http')){
+						continue;
+					}else{
+						this.$set(this.statusArr, i, "2")
+						this.uploadImage(i, imageArr[i], serverUrl).then(() => {
+							if (i === len - 1) {
+								this.change(true)
+							}
+						}).catch(() => {
+							if (i === len - 1) {
+								this.change(true)
+							}
+						})
+					}
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	@font-face {
+		font-family: 'tuiUpload';
+		src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATcAA0AAAAAByQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEwAAAABoAAAAciR52BUdERUYAAASgAAAAHgAAAB4AKQALT1MvMgAAAaAAAABCAAAAVjxvR/tjbWFwAAAB+AAAAEUAAAFK5ibpuGdhc3AAAASYAAAACAAAAAj//wADZ2x5ZgAAAkwAAADXAAABAAmNjcZoZWFkAAABMAAAAC8AAAA2FpiS+WhoZWEAAAFgAAAAHQAAACQH3QOFaG10eAAAAeQAAAARAAAAEgwAACBsb2NhAAACQAAAAAwAAAAMAEoAgG1heHAAAAGAAAAAHwAAACABEgA2bmFtZQAAAyQAAAFJAAACiCnmEVVwb3N0AAAEcAAAACgAAAA6OMUs4HjaY2BkYGAAYo3boY/i+W2+MnCzMIDAzb3qdQj6fwPzf+YGIJeDgQkkCgA/KAtvAHjaY2BkYGBu+N/AEMPCAALM/xkYGVABCwBZ4wNrAAAAeNpjYGRgYGBl0GJgZgABJiDmAkIGhv9gPgMADTABSQB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PGJ9xMjf8b2CIYW5gaAAKM4LkANt9C+UAAHjaY2GAABYIVmBgAAAA+gAtAAAAeNpjYGBgZoBgGQZGBhBwAfIYwXwWBg0gzQakGRmYnjE+4/z/n4EBQksxSf6GqgcCRjYGOIeRCUgwMaACRoZhDwCiLwmoAAAAAAAAAAAAAAAASgCAeNpdjkFKw0AARf/vkIR0BkPayWRKQZtYY90ohJju2kOIbtz0KD1HVm50UfEmWXoAr9ADOHFARHHzeY//Fx8Ci+FJfIgdJFa4AhgiMshbrCuIsLxhFJZVs+Vl1bT1GddtbXTC3OhohN4dg4BJ3zMJAnccyfm468ZzHXddrH9ZKbHzdf9n/vkY/xv9sPQXgGEvBrHHwst5kTbXLE+YpYVPkxepPmW94W16UbdNJd6f3SAzo5W7m1jaKd+8ZZIvk5nlKw9SK6Wle7BLS3f/bTzQLmfAF2T1NsQAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOWMGiTIxMjMxsKak5qSWpbFmZiRmJ+QAmgAUIAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABAABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9M296nUwGgA+8QYgAAA=) format('woff');
+		font-weight: normal;
+		font-style: normal;
+	}
+
+	.tui-upload-icon {
+		font-family: "tuiUpload" !important;
+		font-style: normal;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		padding: 10rpx;
+	}
+
+	.tui-icon-delete:before {
+		content: "\e601";
+	}
+
+	.tui-icon-plus:before {
+		content: "\e609";
+	}
+
+	.tui-upload-box {
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.tui-upload-add {
+		font-size: 68rpx;
+		font-weight: 100;
+		color: #888;
+		background-color: #F7F7F7;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0;
+	}
+
+	.tui-image-item {
+		position: relative;
+		margin-right: 20rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.tui-image-item:nth-of-type(3n) {
+		margin-right: 0;
+	}
+
+	.tui-item-img {
+		display: block;
+	}
+
+	.tui-img-del {
+		width: 36rpx;
+		height: 36rpx;
+		position: absolute;
+		right: -12rpx;
+		top: -12rpx;
+		background-color: #EB0909;
+		border-radius: 50%;
+		color: white;
+		font-size: 34rpx;
+		z-index: 999;
+	}
+
+	.tui-img-del::before {
+		content: '';
+		width: 16rpx;
+		height: 1px;
+		position: absolute;
+		left: 10rpx;
+		top: 18rpx;
+		background-color: #fff;
+	}
+
+	.tui-upload-mask {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		left: 0;
+		top: 0;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 40rpx 0;
+		box-sizing: border-box;
+		background-color: rgba(0, 0, 0, 0.6);
+	}
+
+	.tui-upload-loading {
+		width: 28rpx;
+		height: 28rpx;
+		border-radius: 50%;
+		border: 2px solid;
+		border-color: #B2B2B2 #B2B2B2 #B2B2B2 #fff;
+		animation: tui-rotate 0.7s linear infinite;
+	}
+
+	@keyframes tui-rotate {
+		0% {
+			transform: rotate(0);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	.tui-tips {
+		font-size: 26rpx;
+		color: #fff;
+	}
+
+	.tui-mask-btn {
+		padding: 4rpx 16rpx;
+		border-radius: 40rpx;
+		text-align: center;
+		font-size: 24rpx;
+		color: #fff;
+		border: 1rpx solid #fff;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		margin-top: 26rpx;
+	}
+
+	.tui-btn-hover {
+		opacity: 0.8;
+	}
+</style>
diff --git a/components/thorui/tui-waterfall/tui-waterfall.vue b/components/thorui/tui-waterfall/tui-waterfall.vue
new file mode 100644
index 0000000..1cee8bc
--- /dev/null
+++ b/components/thorui/tui-waterfall/tui-waterfall.vue
@@ -0,0 +1,223 @@
+<template>
+	<view class="tui-waterfall__box"
+		:style="{ paddingLeft: leftGap, paddingRight: rightGap, background: backgroundColor, borderRadius: radius }">
+		<view class="tui-waterfall__list" id="tui-waterfall__left" :style="{ marginRight: columnGap }">
+			<view v-for="(item, index) in leftList" :key="index">
+				<slot name="left" :entity="item" :index="index" :isList="columnCount==1"></slot>
+			</view>
+		</view>
+		<view v-if="columnCount > 1" class="tui-waterfall__list" id="tui-waterfall__right">
+			<view v-for="(item, index) in rightList" :key="index">
+				<slot name="right" :entity="item" :index="index" :isList="columnCount==1"></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * 列表中图片可以使用懒加载或者其他方式
+	 * 优先计算出图片高度,以达到最佳效果
+	 * App端建议使用weex的waterfall组件，使用案例详见：
+	 * [ThorUI组件库->pages->index->productNvue]
+	 */
+	export default {
+		name: 'tuiWaterfall',
+		props: {
+			//列表数据，不建议一次性加载过多数据
+			listData: {
+				type: Array,
+				default () {
+					return [];
+				}
+			},
+			//每页数据条数(固定条数),当数据长度小于等于该数时表示第一页数据，刷新重置
+			pageSize: {
+				type: Number,
+				default: 10
+			},
+			//数据分组类型：1-简单左右分组，按顺序排列，伪瀑布流 2-计算左右容器高度进行分组
+			type: {
+				type: Number,
+				default: 1
+			},
+			//瀑布流列数，目前支持最大值为2
+			columnCount: {
+				type: Number,
+				default: 2
+			},
+			//列与列的间隙
+			columnGap: {
+				type: String,
+				default: '10rpx'
+			},
+			//左侧和列表的间隙
+			leftGap: {
+				type: String,
+				default: '0'
+			},
+			//右侧和列表的间隙
+			rightGap: {
+				type: String,
+				default: '0'
+			},
+			//列表背景色，可使用渐变色
+			backgroundColor: {
+				type: String,
+				default: 'transparent'
+			},
+			//列表外层容器圆角值
+			radius: {
+				type: String,
+				default: '0'
+			}
+		},
+		data() {
+			return {
+				leftListConst: [],
+				leftList: [],
+				rightList: [],
+				running: false,
+			};
+		},
+		watch: {
+			listData(val) {
+				this.columnChange();
+			},
+			columnCount(val) {
+				this.columnChange(val);
+			}
+		},
+		mounted() {
+			this.columnChange();
+		},
+		methods: {
+			columnChange(val) {
+				if (this.columnCount < 2) {
+					this.leftList = [...this.listData];
+				} else {
+					if (val && val == 2) {
+						this.leftList = [...this.leftListConst]
+					}
+					this.initData()
+				}
+			},
+			initData() {
+				if (this.type == 1) {
+					this.getSubGroup();
+				} else {
+					this.getArrayByHeight();
+				}
+			},
+			getDiffList() {
+				let diffList = [];
+				let total = this.listData.length;
+				if (total <= this.pageSize) {
+					console.info('running clean func')
+					this.leftListConst = [];
+					this.leftList = [];
+					this.rightList = [];
+				}
+				let sum = this.leftListConst.length + this.rightList.length;
+				let diff = total - sum;
+				if (diff > 0) {
+					diffList = [...this.listData].filter((item, index) => {
+						return index >= sum;
+					});
+				}
+				return diffList;
+			},
+			getSubGroup() {
+				//type=1时执行简单数据分组
+				if (!this.listData && this.listData.length === 0) return;
+				let leftList = [];
+				let rightList = [];
+				let data = this.getDiffList();
+				data.forEach((item, index) => {
+					if (index % 2 === 0) {
+						leftList.push(item);
+					} else {
+						rightList.push(item);
+					}
+				});
+				this.leftList = this.leftList.concat(leftList);
+				this.leftListConst = this.leftListConst.concat(leftList);
+				this.rightList = this.rightList.concat(rightList);
+			},
+			async getArrayByHeight() {
+				// 如果在计算了，则跳过
+				if (this.running === true) {
+					// 如果重置页面，则不再加载；
+					if (this.listData.length <= this.pageSize) return false;
+					setTimeout(() => {this.getArrayByHeight()}, 100);
+					return false;
+				}
+				this.running = true;
+				if (!this.listData && this.listData.length === 0) return;
+				console.info('getArrayByHeight');
+				let data = this.getDiffList();
+				for (let item of data) {
+					await this.render(item);
+				}
+				this.running = false;
+			},
+			async render(item) {
+				console.info(item.id);
+				let obj = await this.getContainerHeight();
+				return await new Promise((resolve, reject) => {
+					if (obj && typeof obj.leftHeight === 'number') {
+						if (obj.leftHeight <= obj.rightHeight) {
+							this.leftList.push(item);
+							this.leftListConst.push(item);
+						} else {
+							this.rightList.push(item);
+						}
+						this.$nextTick(() => {
+							setTimeout(() => {
+								resolve(true);
+							}, 30);
+						});
+					} else {
+						reject(false);
+					}
+				});
+			},
+			async getContainerHeight() {
+				//type=2
+				return await new Promise((resolve, reject) => {
+					const query = uni.createSelectorQuery().in(this);
+					let nodes = query.selectAll('#tui-waterfall__left, #tui-waterfall__right');
+					nodes.boundingClientRect().exec(res => {
+						if (res && res[0]) {
+							const rects = res[0];
+							const leftHeight = rects[0].height;
+							const rightHeight = rects[1].height;
+							resolve({
+								leftHeight: leftHeight,
+								rightHeight: rightHeight
+							});
+						} else {
+							reject(res);
+						}
+					});
+				});
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.tui-waterfall__box {
+		width: 100%;
+		display: inline-flex;
+		justify-content: space-between;
+		flex-direction: row;
+		flex-wrap: wrap;
+		box-sizing: border-box;
+		align-items: flex-start;
+	}
+
+	.tui-waterfall__list {
+		flex: 1;
+	}
+</style>
diff --git a/pages2/balance/balance.vue b/pages2/balance/balance.vue
new file mode 100644
index 0000000..3db5b7e
--- /dev/null
+++ b/pages2/balance/balance.vue
@@ -0,0 +1,526 @@
+<template>
+	<view class="ithui-content">
+		<!-- #ifndef H5 -->
+		<view class="h5title">我的余额</view>
+		<!-- #endif -->
+		<view class="ithui-view">
+			<view class="view-info">
+				<view class="userinfo">
+					<view class="flex">
+						<cloud-image v-if="userInfo.avatar_file" borderRadius="50%" class="userinfo-headimg" 
+						:src="userInfo.avatar_file.url"></cloud-image>
+						<image v-else
+							
+							src="https://env-00jxt5y29hrd.normal.cloudstatic.cn/static/static/center/avatar.png?expire_at=1741142218&er_sign=2f723854c2a07dcb5571d2ede5458f7f"
+							class="userinfo-headimg borde-radius"></image>
+						<view class="flex-one">
+							<view class="flex-one-text">用户名：{{ userInfo.nickname }}</view>
+							<view class="flex-one-text">uid: ({{ userInfo._id }})</view>
+							<view class="flex-one-text">手机号：{{ userInfo.mobile }}</view>
+						</view>
+						<view class="arrow arrow-one" @click="showModal = true"><span>名词解释</span></view>
+					</view>
+				</view>
+				<u-modal :show="showModal" title="名词解释" confirmText="我已知晓" @confirm="showModal = false"
+					confirmColor="#ff1e0f">
+					<view class="slot-content">
+						<rich-text :nodes="content"></rich-text>
+					</view>
+				</u-modal>
+				<view class="box">
+					<view class="tx">
+						<view class="tx-grid">
+							<view class="tx-grid-text">
+								<view class="title">可提现余额</view>
+								<view class="money">
+									<text>{{ userInfo.available }}</text>
+									<text class="money-b">元</text>
+								</view>
+							</view>
+						</view>
+						<view class="tx-grid" @click="navTo('../withdraw/withdraw')"><span
+								class="tx-grid-comm-sign">立即提现</span></view>
+					</view>
+					<view class="palace palace-one">
+						<view class="palace-grid">
+							<view class="palace-grid-text">
+								<view class="palace-grid-text-data">
+									<text>{ 0 }}</text>
+									<text class="palace-grid-text-data-b">元</text>
+								</view>
+								<view class="palace-grid-text-name">剩余提现额度</view>
+							</view>
+						</view>
+						<view class="palace-grid">
+							<view class="palace-grid-text">
+								<view class="palace-grid-text-data">
+									<text>{{ 0 }}</text>
+									<text class="palace-grid-text-data-b">元</text>
+								</view>
+								<view class="palace-grid-text-name">累计收益</view>
+							</view>
+						</view>
+						<view class="palace-grid">
+							<view class="palace-grid-text">
+								<view class="palace-grid-text-data">
+									<text>{{ userInfo.total_withdraw }}</text>
+									<text class="palace-grid-text-data-b">元</text>
+								</view>
+								<view class="palace-grid-text-name">累计提现</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="top">
+					<u-subsection :list="tabs" fontSize="16" activeColor="#ff8440" :current="tabIndex"
+						@change="changeTab"></u-subsection>
+					<u-empty v-if="list.length === 0" style="margin-top: 40rpx;" mode="order" text="没有记录" iconSize="140"
+						textSize="32">
+					</u-empty>
+				</view>
+				<view class="list-view">
+					<view class="list-item" v-for="(item, index) in list" :key="index" hover-class="hover"
+						:hover-stay-time="150" bindtap="detail">
+						<view class="content-box">
+							<view class="des-box">
+								<view class="tit">
+									{{ item.name }}
+								</view>
+								<view v-if="tabIndex == 3" class="source"
+									:style="{ color: item.status == 1 ? '#4caf50' : item.status == 2 ? '#00b7ff' : '#ff1e0f' }">
+									提现{{ item.status == 1 ? '成功' : item.status == 2 ? '处理中' : '失败' }}
+								</view>
+								<view class="time">{{ item.create_time }}</view>
+							</view>
+						</view>
+						<view class="money" :class="{ less: is_withdraw }">
+							{{ is_withdraw ? '-' : '+' }}{{ tabIndex == 3 ? item.real_money : item.money }}
+						</view>
+					</view>
+				</view>
+				<view class="tip">仅显示近一年内的收支记录</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import uSubsection from "../../uni_modules/uview-ui/components/u-subsection/u-subsection.vue"
+	import uModal from "../../uni_modules/uview-ui/components/u-modal/u-modal.vue"
+	
+	const uniIdCo = uniCloud.importObject("uni-id-co")
+	  import {
+	    store,
+	    mutations
+	  } from '@/uni_modules/uni-id-pages/common/store.js';
+	
+	export default {
+		components: {
+			uSubsection,
+			uModal
+		},
+		computed: {
+		  userInfo() {
+		    return store.userInfo
+		  },
+		  realNameStatus () {
+			  if (!this.userInfo.realNameAuth) {
+				  return 0
+			  }
+		
+			  return this.userInfo.realNameAuth.authStatus
+		  }
+		},
+		data() {
+			return {
+				is_withdraw: false,
+				list: [],
+				userData: {},
+				showModal: false,
+				date: 'incomeMonth',
+				content: `<p><em style="font-style:normal;color:#ff1e0f">可提现余额：</em>当前可以提现的金额</p>
+				          <p><em style="font-style:normal;color:#ff1e0f">即将到账：</em>交易中的金额，交易成功后可提现</p>
+				          <p><em style="font-style:normal;color:#ff1e0f">累计到账：</em>累计交易成功的金额</p>
+				          <p><em style="font-style:normal;color:#ff1e0f">累计提现：</em>累计提现成功的金额</p>
+				          <p><em style="font-style:normal;color:#ff1e0f">*注：所有金额币种均为人民币，单位为元，符号￥</em></p>
+				         `,
+				tabs: ['本月收入', '今日收入', '昨日收入', '提现记录'],
+				tabIndex: 0
+			}
+		},
+		onLoad() {
+			uni.showLoading({
+				title: '加载中'
+			});
+			this.initData();
+			setTimeout(() => {
+				uni.hideLoading();
+			}, 500);
+		},
+		methods: {
+			async initData() {
+				this.tabIndex = 0;
+				// this.userData = await this.$api.mock('userData');
+				// this.list = await this.$api.mock('incomeMonth');
+			},
+			async getFundList() {
+				// this.list = await this.$api.mock(this.date);
+			},
+			changeTab(index) {
+				this.tabIndex = index;
+				this.list = []
+				if (this.tabIndex == 0) {
+					this.date = 'incomeMonth';
+					this.is_withdraw = false;
+				} else if (this.tabIndex == 1) {
+					this.date = 'incomeToday';
+					this.is_withdraw = false;
+				} else if (this.tabIndex == 2) {
+					this.date = 'incomeYesterday';
+					this.is_withdraw = false;
+				} else if (this.tabIndex == 3) {
+					this.date = 'incomeList';
+					this.is_withdraw = true;
+				}
+				uni.showLoading({
+					title: '加载中'
+				});
+				this.getFundList();
+				setTimeout(() => {
+					uni.hideLoading();
+				}, 500);
+			},
+			navTo(url) {
+				uni.navigateTo({
+					url
+				});
+			}
+		},
+		onPullDownRefresh() {
+			uni.showLoading({
+				title: '加载中'
+			});
+			this.showModal = false
+			this.initData();
+			setTimeout(() => {
+				uni.hideLoading();
+			}, 500);
+			setTimeout(function() {
+				uni.stopPullDownRefresh();
+			}, 500);
+		}
+	}
+</script>
+
+<style>
+	page {
+		background-color: #fff;
+	}
+</style>
+
+<style lang="scss" scoped>
+	@import '../../uni_modules/uview-ui/theme.scss';
+	@import '../../uni_modules/uview-ui/index.scss';
+	::v-deep .u-modal__content {
+		justify-content: flex-start;
+	}
+
+	.flex {
+		display: flex;
+		align-items: center;
+		padding: 50rpx;
+		position: relative;
+
+		&-one {
+			flex: 1;
+			min-width: 0;
+			font-size: 26rpx;
+			color: #333;
+
+			&-text {
+				margin: 10rpx 0;
+				color: #f5f5f5;
+				font-weight: normal;
+			}
+		}
+	}
+
+
+	.ithui {
+		&-content {
+			.h5title {
+				width: 100%;
+				height: 120rpx;
+				text-align: center;
+				line-height: 200rpx;
+				color: white;
+				font-size: 34rpx;
+				font-weight: bold;
+				background: linear-gradient(to right, #ff8440, #ff1e0f);
+			}
+
+			.list-view {
+				position: relative;
+				width: 100%;
+				overflow: hidden;
+			}
+
+			.list-item {
+				width: 100%;
+				padding: 30rpx 28rpx;
+				box-sizing: border-box;
+				background: #fff;
+				display: flex;
+				align-items: flex-start;
+				justify-content: space-between;
+				border-bottom: 1rpx solid #eaeef1;
+			}
+
+			.item-last::after {
+				left: 0 !important;
+			}
+
+			.content-box {
+				display: flex;
+				align-items: flex-start;
+				justify-content: space-between;
+			}
+
+			.des-box {
+				min-height: 80rpx;
+				padding-left: 28rpx;
+				box-sizing: border-box;
+				vertical-align: top;
+				color: #333;
+				font-size: 28rpx;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+			}
+
+			.tit {
+				font-size: 32rpx;
+				max-width: 420rpx;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			.source {
+				margin: 12rpx 0;
+			}
+
+			.time {
+				color: #888;
+			}
+
+			.money {
+				font-size: 38rpx;
+				font-weight: 500;
+				color: #ff1e0f;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				padding-left: 20rpx;
+			}
+
+			.less {
+				color: #4caf50 !important;
+			}
+
+			.tip {
+				margin-top: 50rpx;
+				display: flex;
+				justify-content: center;
+				align-content: center;
+				font-size: 24rpx;
+				color: #888;
+			}
+
+		}
+
+		&-view {
+			width: 100%;
+			height: 100%;
+			margin: 0 auto;
+			display: flex;
+			flex-direction: column;
+
+			.view-info {
+				width: 100%;
+				height: 100%;
+				flex: 1;
+				overflow-y: auto;
+				overflow-x: hidden;
+				position: relative;
+				padding-bottom: 116rpx;
+
+				.userinfo {
+					background: linear-gradient(to right, #ff8440, #ff1e0f);
+					background-color: #ff8440;
+					padding-bottom: 100rpx;
+
+
+					.userinfo-headimg {
+						width: 130rpx;
+						height: 130rpx;
+						overflow: hidden;
+						margin-right: 20rpx;
+						
+					}
+					.borde-radius {
+						border-radius: 50%;
+					}
+
+
+					.arrow {
+						position: relative;
+						padding-right: 30rpx;
+
+						span {
+							font-size: 28rpx;
+							color: white;
+						}
+
+						&:after {
+							content: ' ';
+							display: inline-block;
+							height: 12rpx;
+							width: 12rpx;
+							border-width: 4rpx 4rpx 0 0;
+							border-color: #848484;
+							border-style: solid;
+							transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+							position: relative;
+							top: -4rpx;
+							position: absolute;
+							top: 50%;
+							margin-top: -8rpx;
+							right: 4rpx;
+							border-radius: 2rpx;
+						}
+					}
+
+					.arrow-one:after {
+						border-color: white;
+						margin-top: -6rpx;
+					}
+				}
+
+				.box {
+					width: 94%;
+					background: white;
+					border-radius: 10rpx;
+					margin: -120rpx auto 20rpx;
+					box-shadow: 0 6rpx 20rpx #e7e7e7;
+
+					.tx {
+						padding-top: 26rpx;
+						overflow: hidden;
+						display: flex;
+						justify-content: space-between;
+						align-content: center;
+
+						&-grid {
+							box-sizing: border-box;
+
+							&:first-child {
+								margin-left: 40rpx;
+							}
+
+							&-comm-sign {
+								display: block;
+								border-radius: 40rpx 0 0 40rpx;
+								font-size: 26rpx;
+								padding: 16rpx 44rpx;
+								background: linear-gradient(to right, #fef082, #ffc551);
+								background-color: #fef082;
+								color: #cf4400;
+							}
+
+							&-text {
+								display: block;
+								color: #333;
+								font-size: 26rpx;
+								white-space: nowrap;
+								text-overflow: ellipsis;
+								overflow: hidden;
+
+								.title {
+									font-size: 32rpx;
+									font-weight: normal;
+									color: #ff6423;
+								}
+
+								.money {
+									font-size: 60rpx;
+									color: #ff6423;
+									letter-spacing: 2rpx;
+									margin-bottom: 10rpx;
+
+									&-b {
+										font-size: 28rpx;
+									}
+								}
+							}
+						}
+					}
+
+					.palace {
+						padding-bottom: 20rpx;
+						overflow: hidden;
+						display: flex;
+						justify-content: center;
+
+						&-grid {
+							flex: 1;
+							position: relative;
+							box-sizing: border-box;
+
+							&:not(:last-child) {
+								&:after {
+									width: 1rpx;
+									height: 80rpx;
+									background: #fddece;
+									content: ' ';
+									display: inline-block;
+									position: absolute;
+									top: 0;
+									right: 0;
+								}
+							}
+
+							&-text {
+								display: block;
+								text-align: center;
+								color: #333;
+								font-size: 32rpx;
+								white-space: nowrap;
+								text-overflow: ellipsis;
+								overflow: hidden;
+
+								&-name {
+									font-size: 26rpx;
+									font-weight: normal;
+									color: #ff8a4a;
+								}
+
+								&-data {
+									font-size: 32rpx;
+									color: #ff8a4a;
+									letter-spacing: 2rpx;
+									margin-bottom: 5rpx;
+
+									&-b {
+										font-size: 20rpx;
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+
+	}
+</style>
diff --git a/pages2/setting/bind-mobile/bind-mobile.vue b/pages2/setting/bind-mobile/bind-mobile.vue
new file mode 100644
index 0000000..6ccb152
--- /dev/null
+++ b/pages2/setting/bind-mobile/bind-mobile.vue
@@ -0,0 +1,104 @@
+<template>
+	<view class="box">
+		<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
+		<uni-easyinput clearable focus type="number" class="input-box" :inputBorder="false" v-model="formData.phone"
+			maxlength="11" placeholder="请输入手机号"></uni-easyinput>
+		<uni-easyinput clearable type="number" class="input-box" :inputBorder="false" v-model="formData.code" maxlength="6"
+			placeholder="请输入验证码">
+			<template slot="right">
+				<qk-send-sms-code ref="shortCode" code-type="bind" :phone="formData.phone"></qk-send-sms-code>
+			</template>
+		</uni-easyinput>
+		<button class="send-btn-box" type="primary" @click="submit">绑定</button>
+	</view>
+</template>
+<script>
+	import {
+		mapMutations,
+		mapGetters
+	} from 'vuex';
+	export default {
+		data() {
+			return {
+				params: {},
+				currenPhoneArea: '',
+				formData: {
+					phone:"",
+					code:""
+				}
+			}
+		},
+		onLoad (event) {
+			let params = event;
+			if (params.mobile) {
+				this.formData.phone = params.mobile
+			}
+		},
+		computed: {
+			tipText() {
+				return `验证码已通过短信发送至${this.currenPhoneArea} ${this.formData.phone}。密码为6 - 20位`
+			},
+			canSubmit() {
+				return this.isPhone && this.isPwd && this.isCode;
+			}
+		},
+		methods: {
+			...mapMutations({
+				setUserInfo: 'user/UPDATE_USER_INFO',
+			}),
+			/**
+			 * 完成并提交
+			 */
+			submit() {
+				uniCloud.callFunction({
+					name:'uni-id-cf',
+					data:{
+						action:'bind_mobile_by_sms',
+						params:{
+							"mobile": this.formData.phone,
+							"code": this.formData.code
+						},
+					},
+					success: ({result}) => {
+						console.log(result);
+						this.setUserInfo({"mobile":result.mobile})
+						uni.showToast({
+							title: result.msg,
+							icon: 'none'
+						});
+						if (result.code === 0) {
+							uni.navigateBack()
+						}
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	.box {
+		align-items: center;
+		justify-content: center;
+		padding: 50rpx;
+		padding-top: 10px;
+	}
+
+	.box /deep/ .uni-easyinput__content {
+		height: 50px;
+	}
+
+	.input-box {
+		width: 100%;
+		margin-top: 16px;
+		background-color: #f9f9f9;
+		border-radius: 6rpx;
+		flex-direction: row;
+		flex-wrap: nowrap;
+	}
+
+	.send-btn-box {
+		width: 650rpx;
+		margin-top: 15px;
+	}
+</style>
diff --git a/pages2/setting/cutImage.vue b/pages2/setting/cutImage.vue
new file mode 100644
index 0000000..52e8e60
--- /dev/null
+++ b/pages2/setting/cutImage.vue
@@ -0,0 +1,57 @@
+<template>
+	<view class="content" >
+		<limeClipper :width="options.width" 
+			:scale-ratio="2" 
+			:is-lock-width="false" 
+			:is-lock-height="false" 
+			:height="options.height" 
+			:image-url="path"  
+			@success="successFn" @cancel="cancel" />
+	</view>
+</template>
+<script>
+import limeClipper from './limeClipper/limeClipper.vue';
+export default {
+	components: {limeClipper},
+	data() {return {path: '',options:{"width":600,"height":600}}},
+	onLoad({path,options}) {
+		this.path = path
+		console.log('path-path-path-path',path);
+		if(options){
+			this.options = JSON.parse(options)
+		}
+	},
+	methods:{
+		successFn(e){
+			this.uploadImgToUnicloud(e.url,(url)=>{
+				this.getOpenerEventChannel().emit('uploadAvatarAfter', {url})
+				uni.navigateBack()
+			})
+		},
+		uploadImgToUnicloud(url,callback){
+			uni.showLoading()
+			uniCloud.uploadFile({
+				cloudPath:Math.ceil((Math.random()+Math.random()+Math.random()+1)*1000000)+Date.now()+".png",
+				filePath:url
+			})
+			.then(res=>{
+				console.log(res);
+				callback(res.fileID)
+				uni.hideLoading()
+			})
+		},
+		cancel(){
+			uni.navigateBack()
+		}
+	}
+}
+</script>
+
+<style>
+	.box{
+		width: 400rpx;
+	}
+	.mt{
+		margin-top: -10px;
+	}
+</style>
\ No newline at end of file
diff --git a/pages2/setting/limeClipper/README.md b/pages2/setting/limeClipper/README.md
new file mode 100644
index 0000000..9219f81
--- /dev/null
+++ b/pages2/setting/limeClipper/README.md
@@ -0,0 +1,227 @@
+> 插件来源：[https://ext.dcloud.net.cn/plugin?id=3594](https://ext.dcloud.net.cn/plugin?id=3594)
+##### 以下是作者写的插件介绍：
+
+# Clipper 图片裁剪
+> uniapp 图片裁剪，可用于图片头像等裁剪处理
+> [查看更多](http://liangei.gitee.io/limeui/#/clipper) <br>
+> Q群：458377637
+
+
+## 平台兼容
+
+| H5  | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
+| --- | ---------- | ------------ | ---------- | ---------- | --------- | --- |
+| √   | √          | √         | 未测       | √          | √      | √   |
+
+
+## 代码演示
+### 基本用法
+`@success` 事件点击 👉 **确定** 后会返回生成的图片信息，包含 `url`、`width`、`height`
+
+```html
+<image :src="url" v-if="url" mode="widthFix"></image>
+<l-clipper v-if="show" @success="url = $event.url; show = false" @cancel="show = false"  ></l-clipper>
+<button @tap="show = true">裁剪</button>
+```
+
+```js
+// 非uni_modules引入
+import lClipper from '@/components/lime-clipper/'
+// uni_modules引入
+import lClipper from '@/uni_modules/lime-clipper/components/lime-clipper/'
+export default {
+	components: {lClipper},
+    data() {
+        return {
+            show: false,
+			url: '',
+        }
+    }
+}
+```
+
+
+### 传入图片
+`image-url`可传入**相对路径**、**临时路径**、**本地路径**、**网络图片**<br>
+
+* **当为网络地址时**
+* H5：👉 需要解决跨域问题。 <br>
+* 小程序：👉 需要配置 downloadFile 域名 <br>
+
+
+```html
+<image :src="url" v-if="url" mode="widthFix"></image>
+<l-clipper v-if="show" :image-url="imageUrl"  @success="url = $event.url; show = false" @cancel="show = false"  ></l-clipper>
+<button @tap="show = true">裁剪</button>
+```
+
+```js
+export default {
+	components: {lClipper},
+    data() {
+        return {
+			imageUrl: 'https://img12.360buyimg.com/pop/s1180x940_jfs/t1/97205/26/1142/87801/5dbac55aEf795d962/48a4d7a63ff80b8b.jpg',
+            show: false,
+			url: '',
+        }
+    }
+}
+```
+
+
+### 确定按钮颜色
+样式变量名：`--l-clipper-confirm-color`
+可放到全局样式的 `page` 里或节点的 `style`
+```html
+<l-clipper class="clipper" style="--l-clipper-confirm-color: linear-gradient(to right, #ff6034, #ee0a24)"  ></l-clipper>
+```
+```css
+// css 中为组件设置 CSS 变量
+.clipper {
+	--l-clipper-confirm-color: linear-gradient(to right, #ff6034, #ee0a24)
+}
+// 全局
+page {
+	--l-clipper-confirm-color: linear-gradient(to right, #ff6034, #ee0a24)
+}
+```
+
+
+### 使用插槽
+共五个插槽 `cancel` 取消按钮、 `photo` 选择图片按钮、 `rotate` 旋转按钮、 `confirm` 确定按钮和默认插槽。
+
+```html
+<image :src="url" v-if="url" mode="widthFix"></image>
+<l-clipper 
+	v-if="show" 
+	:isLockWidth="isLockWidth"
+	:isLockHeight="isLockHeight"
+	:isLockRatio="isLockRatio"
+	:isLimitMove="isLimitMove"
+	:isDisableScale="isDisableScale"
+	:isDisableRotate="isDisableRotate"
+	:isShowCancelBtn="isShowCancelBtn"
+	:isShowPhotoBtn="isShowPhotoBtn"
+	:isShowRotateBtn="isShowRotateBtn"
+	:isShowConfirmBtn="isShowConfirmBtn"
+	@success="url = $event.url; show = false" 
+	@cancel="show = false" >
+	<!-- 四个基本按钮插槽 -->
+	<view slot="cancel">取消</view>
+	<view slot="photo">选择图片</view>
+	<view slot="rotate">旋转</view>
+	<view slot="confirm">确定</view>
+	<!-- 默认插槽 -->
+	<view class="tools">
+		<view>显示取消按钮
+			<switch :checked="isShowCancelBtn" @change="isShowCancelBtn = $event.target.value" ></switch>
+		</view>
+		<view>显示选择图片按钮
+			<switch :checked="isShowPhotoBtn" @change="isShowPhotoBtn = $event.target.value" ></switch>
+		</view>
+		<view>显示旋转按钮
+			<switch :checked="isShowRotateBtn" @change="isShowRotateBtn = $event.target.value" ></switch>
+		</view>
+		<view>显示确定按钮
+			<switch :checked="isShowConfirmBtn" @change="isShowConfirmBtn = $event.target.value" ></switch>
+		</view>
+		<view>锁定裁剪框宽度
+			<switch :checked="isLockWidth" @change="isLockWidth = $event.target.value" ></switch>
+		</view>
+		<view>锁定裁剪框高度
+			<switch :checked="isLockHeight" @change="isLockHeight = $event.target.value" ></switch>
+		</view>
+		<view>锁定裁剪框比例
+			<switch :checked="isLockRatio" @change="isLockRatio = $event.target.value" ></switch>
+		</view>
+		<view>限制移动范围
+			<switch :checked="isLimitMove" @change="isLimitMove = $event.target.value" ></switch>
+		</view>
+		<view>禁止缩放
+			<switch :checked="isDisableScale" @change="isDisableScale = $event.target.value" ></switch>
+		</view>
+		<view>禁止旋转
+			<switch :checked="isDisableRotate" @change="isDisableRotate = $event.target.value" ></switch>
+		</view>
+	</view>
+</l-clipper>
+<button @tap="show = true">裁剪</button>
+```
+
+```js
+export default {
+	components: {lClipper},
+    data() {
+        return {
+            show: false,
+            url: '',
+            isLockWidth: false,
+            isLockHeight: false,
+            isLockRatio: true,
+            isLimitMove: false,
+            isDisableScale: false,
+            isDisableRotate: false,
+            isShowCancelBtn: true,
+            isShowPhotoBtn: true,
+            isShowRotateBtn: true,
+            isShowConfirmBtn: true
+        }
+    }
+}
+```
+
+
+## API
+
+### Props
+
+| 参数           | 说明         | 类型             | 默认值       |
+| ------------- | ------------ | ---------------- | ------------ |
+| image-url     | 图片路径     | <em>string</em>   |              |
+| quality       | 图片的质量，取值范围为 [0, 1]，不在范围内时当作1处理   | <em>number</em>  |    `1`      |
+| source       | `{album: '从相册中选择'}`key为图片来源类型，value为选项说明   | <em>Object</em>  |         |
+| width | 裁剪框宽度，单位为 `rpx` | <em>number</em> | `400`      |
+| height | 裁剪框高度 | <em>number</em> | `400`      |
+| min-width | 裁剪框最小宽度 | <em>number</em> | `200`      |
+| min-height |裁剪框最小高度 | <em>number</em> | `200`  |
+| max-width | 裁剪框最大宽度 | <em>number</em> | `600`  |
+| max-height | 裁剪框最大宽度 | <em>number</em> | `600`  |
+| min-ratio | 图片最小缩放比 | <em>number</em> | `0.5`  |
+| max-ratio | 图片最大缩放比 | <em>number</em> | `2`  |
+| rotate-angle | 旋转按钮每次旋转的角度 | <em>number</em> | `90`  |
+| scale-ratio | 生成图片相对于裁剪框的比例， **比例越高生成图片越清晰**	 | <em>number</em> | `1`  |
+| is-lock-width | 是否锁定裁剪框宽度 | <em>boolean</em> | `false`  |
+| is-lock-height | 是否锁定裁剪框高度上 | <em>boolean</em> | `false`  |
+| is-lock-ratio | 是否锁定裁剪框比例 | <em>boolean</em> | `true`  |
+| is-disable-scale | 是否禁止缩放 | <em>boolean</em> | `false`  |
+| is-disable-rotate | 是否禁止旋转 | <em>boolean</em> | `false`  |
+| is-limit-move | 是否限制移动范围 | <em>boolean</em> | `false`  |
+| is-show-photo-btn | 是否显示选择图片按钮 | <em>boolean</em> | `true`  |
+| is-show-rotate-btn | 是否显示转按钮 | <em>boolean</em> | `true`  |
+| is-show-confirm-btn | 是否显示确定按钮 | <em>boolean</em> | `true`  |
+| is-show-cancel-btn | 是否显示关闭按钮 | <em>boolean</em> | `true`  |
+
+
+
+### 事件 Events
+
+| 事件名  | 说明         | 回调           |
+| ------- | ------------ | -------------- |
+| success | 生成图片成功 | {`width`, `height`, `url`} |
+| fail | 生成图片失败 | `error` |
+| cancel | 关闭 | `false` |
+| ready   | 图片加载完成 | {`width`, `height`, `path`, `orientation`, `type`} |
+| change | 图片大小改变时触发 | {`width`, `height`} |
+| rotate | 图片旋转时触发 | `angle` |
+
+## 常见问题
+> 1、H5端使用网络图片需要解决跨域问题。<br>
+> 2、小程序使用网络图片需要去公众平台增加下载白名单！二级域名也需要配！<br>
+> 3、H5端生成图片是base64，有时显示只有一半可以使用原生标签`<IMG/>`<br>
+> 4、IOS APP 请勿使用HBX2.9.3.20201014的版本！这个版本无法生成图片。<br>
+> 5、APP端无成功反馈、也无失败反馈时，请更新基座和HBX。<br>
+
+
+## 打赏
+如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。<br>
+![输入图片说明](https://images.gitee.com/uploads/images/2020/1122/222521_bb543f96_518581.jpeg "微信图片编辑_20201122220352.jpg")
\ No newline at end of file
diff --git a/pages2/setting/limeClipper/images/photo.svg b/pages2/setting/limeClipper/images/photo.svg
new file mode 100644
index 0000000..7b4b590
--- /dev/null
+++ b/pages2/setting/limeClipper/images/photo.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#606060;}
+	.st1{fill:none;stroke:#FFFFFF;stroke-width:2.4306;stroke-miterlimit:10;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st2" d="M11.6,11c0.4,0.4,0.6,0.9,0.6,1.5c0,0.6-0.2,1.1-0.6,1.4c-0.4,0.4-0.9,0.6-1.5,0.6c-0.6,0-1.1-0.2-1.5-0.6
+		c-0.4-0.4-0.6-0.9-0.6-1.4s0.2-1.1,0.6-1.5c0.4-0.4,0.9-0.6,1.5-0.6C10.8,10.4,11.2,10.6,11.6,11z M24.6,18.4V6.7H5.4v12l1.8-1.8
+		c0.3-0.3,0.6-0.4,1-0.4c0.4,0,0.7,0.1,1,0.4l1.8,1.8l5.8-7c0.3-0.3,0.6-0.5,1.1-0.5c0.4,0,0.8,0.2,1.1,0.5
+		C18.8,11.6,24.6,18.4,24.6,18.4z M25.6,5.7C25.9,6,26,6.3,26,6.7v16.1c0,0.4-0.1,0.7-0.4,1c-0.3,0.3-0.6,0.4-1,0.4H5.4
+		c-0.4,0-0.7-0.1-1-0.4c-0.3-0.3-0.4-0.6-0.4-1V6.7c0-0.4,0.1-0.7,0.4-1c0.3-0.3,0.6-0.4,1-0.4h19.3C25,5.3,25.3,5.4,25.6,5.7z"/>
+	<path class="st1" d="M24.3,21.5H5.7c-0.2,0-0.3-0.2-0.3-0.3V7c0-0.2,0.2-0.3,0.3-0.3h18.6c0.2,0,0.3,0.2,0.3,0.3v14.2
+		C24.6,21.3,24.5,21.5,24.3,21.5z"/>
+</g>
+</svg>
diff --git a/pages2/setting/limeClipper/images/rotate.svg b/pages2/setting/limeClipper/images/rotate.svg
new file mode 100644
index 0000000..0143706
--- /dev/null
+++ b/pages2/setting/limeClipper/images/rotate.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="30px" height="30px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2.4306;stroke-miterlimit:10;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M17.1,24.2h-12c-0.2,0-0.3-0.2-0.3-0.3v-9.3c0-0.2,0.2-0.3,0.3-0.3h12c0.2,0,0.3,0.2,0.3,0.3v9.3
+		C17.5,24.1,17.3,24.2,17.1,24.2z"/>
+	<path class="st0" d="M16.6,5.4c4.8,0,8.7,3.9,8.7,8.7"/>
+	<polyline class="st0" points="19.3,10.1 14.9,5.6 19.3,1.2 	"/>
+</g>
+</svg>
diff --git a/pages2/setting/limeClipper/index.css b/pages2/setting/limeClipper/index.css
new file mode 100644
index 0000000..ce542bf
--- /dev/null
+++ b/pages2/setting/limeClipper/index.css
@@ -0,0 +1,160 @@
+.flex-auto {
+  flex: auto;
+}
+.bg-transparent {
+  background-color: rgba(0,0,0,0.9);
+  transition-duration: 0.35s;
+}
+.l-clipper {
+  width: 100vw;
+  height: calc(100vh - var(--window-top));
+  background-color: rgba(0,0,0,0.9);
+  position: fixed;
+  top: var(--window-top);
+  left: 0;
+  z-index: 1;
+}
+.l-clipper-mask {
+  position: relative;
+  z-index: 2;
+  pointer-events: none;
+}
+.l-clipper__content {
+  pointer-events: none;
+  position: absolute;
+  border: 1rpx solid rgba(255,255,255,0.3);
+  box-sizing: border-box;
+  box-shadow: rgba(0,0,0,0.5) 0 0 0 80vh;
+  background: transparent;
+}
+.l-clipper__content::before,
+.l-clipper__content::after {
+  content: '';
+  position: absolute;
+  border: 1rpx dashed rgba(255,255,255,0.3);
+}
+.l-clipper__content::before {
+  width: 100%;
+  top: 33.33%;
+  height: 33.33%;
+  border-left: none;
+  border-right: none;
+}
+.l-clipper__content::after {
+  width: 33.33%;
+  left: 33.33%;
+  height: 100%;
+  border-top: none;
+  border-bottom: none;
+}
+.l-clipper__edge {
+  position: absolute;
+  width: 34rpx;
+  height: 34rpx;
+  border: 6rpx solid #fff;
+  pointer-events: auto;
+}
+.l-clipper__edge::before {
+  content: '';
+  position: absolute;
+  width: 40rpx;
+  height: 40rpx;
+  background-color: transparent;
+}
+.l-clipper__edge:nth-child(1) {
+  left: -6rpx;
+  top: -6rpx;
+  border-bottom-width: 0 !important;
+  border-right-width: 0 !important;
+}
+.l-clipper__edge:nth-child(1):before {
+  top: -50%;
+  left: -50%;
+}
+.l-clipper__edge:nth-child(2) {
+  right: -6rpx;
+  top: -6rpx;
+  border-bottom-width: 0 !important;
+  border-left-width: 0 !important;
+}
+.l-clipper__edge:nth-child(2):before {
+  top: -50%;
+  left: 50%;
+}
+.l-clipper__edge:nth-child(3) {
+  left: -6rpx;
+  bottom: -6rpx;
+  border-top-width: 0 !important;
+  border-right-width: 0 !important;
+}
+.l-clipper__edge:nth-child(3):before {
+  bottom: -50%;
+  left: -50%;
+}
+.l-clipper__edge:nth-child(4) {
+  right: -6rpx;
+  bottom: -6rpx;
+  border-top-width: 0 !important;
+  border-left-width: 0 !important;
+}
+.l-clipper__edge:nth-child(4):before {
+  bottom: -50%;
+  left: 50%;
+}
+.l-clipper-image {
+  width: 100%;
+  border-style: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  transform-origin: center;
+}
+.l-clipper-canvas {
+  position: fixed;
+  z-index: 10;
+  left: -200vw;
+  top: -200vw;
+  pointer-events: none;
+}
+.l-clipper-tools {
+  position: fixed;
+  left: 0;
+  bottom: 10px;
+  width: 100%;
+  z-index: 99;
+  color: #fff;
+}
+.l-clipper-tools__btns {
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 20rpx 40rpx;
+  box-sizing: border-box;
+}
+.l-clipper-tools__btns .cancel {
+  width: 112rpx;
+  height: 60rpx;
+  text-align: center;
+  line-height: 60rpx;
+}
+.l-clipper-tools__btns .confirm {
+  width: 112rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+  background-color: #07c160;
+  border-radius: 6rpx;
+  text-align: center;
+}
+.l-clipper-tools__btns image {
+  display: block;
+  width: 60rpx;
+  height: 60rpx;
+}
+.l-clipper-tools__btns {
+  flex-direction: row;
+}
diff --git a/pages2/setting/limeClipper/limeClipper.vue b/pages2/setting/limeClipper/limeClipper.vue
new file mode 100644
index 0000000..96cccf9
--- /dev/null
+++ b/pages2/setting/limeClipper/limeClipper.vue
@@ -0,0 +1,816 @@
+<template>
+	<view class="l-clipper" :class="{open: value}" disable-scroll :style="'z-index: ' + zIndex + ';' + customStyle">
+		<view class="l-clipper-mask" @touchstart.stop.prevent="clipTouchStart" @touchmove.stop.prevent="clipTouchMove" @touchend.stop.prevent="clipTouchEnd">
+			<view class="l-clipper__content" :style="clipStyle"><view class="l-clipper__edge" v-for="(item, index) in [0, 0, 0, 0]" :key="index"></view></view>
+		</view>
+		<image
+			class="l-clipper-image"
+			@error="imageLoad"
+			@load="imageLoad"
+			@touchstart.stop.prevent="imageTouchStart"
+			@touchmove.stop.prevent="imageTouchMove"
+			@touchend.stop.prevent="imageTouchEnd"
+			:src="image"
+			:mode="imageWidth == 'auto' ? 'widthFix' : ''"
+			v-if="image"
+			:style="imageStyle"
+		/>
+		<canvas
+			:canvas-id="canvasId"
+			id="l-clipper"
+			disable-scroll
+			:style="'width: ' + canvasWidth * scaleRatio + 'px; height:' + canvasHeight * scaleRatio + 'px;'"
+			class="l-clipper-canvas"
+		></canvas>
+		<view class="l-clipper-tools">
+			<view class="l-clipper-tools__btns">
+				<view v-if="isShowCancelBtn" @tap="cancel">
+					<slot name="cancel" v-if="$slots.cancel" />
+					<view v-else class="cancel">取消</view>
+				</view>
+				<view v-if="isShowPhotoBtn" @tap="uploadImage">
+					<slot name="photo" v-if="$slots.photo" />
+					<image v-else :src="require('./images/photo.svg')" />
+				</view>
+				<view v-if="isShowRotateBtn" @tap="rotate">
+					<slot name="rotate" v-if="$slots.rotate" />
+					<image v-else :src="require('./images/rotate.svg')" data-type="inverse" />
+				</view>
+				<view v-if="isShowConfirmBtn" @tap="confirm">
+					<slot name="confirm" v-if="$slots.confirm" />
+					<view v-else class="confirm">确定</view>
+				</view>
+			</view>
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+import { pathToBase64, determineDirection, calcImageOffset, calcImageScale, calcImageSize, calcPythagoreanTheorem, clipTouchMoveOfCalculate, imageTouchMoveOfCalcOffset } from './utils';
+const cache = {}
+export default {
+	// version: '0.6.3',
+	name: 'l-clipper',
+	props: {
+		value: {
+			type: Boolean,
+			default: true
+		},
+		// #ifdef MP-WEIXIN
+		type: {
+			type: String,
+			default: '2d'
+		},
+		// #endif
+		customStyle: {
+			type: String,
+		},
+		canvasId: {
+			type: String,
+			default: 'l-clipper'
+		},
+		zIndex: {
+			type: Number,
+			default: 99
+		},
+		imageUrl: {
+			type: String
+		},
+		fileType: {
+			type: String,
+			default: 'png'
+		},
+		quality: {
+			type: Number,
+			default: 1
+		},
+		width: {
+			type: Number,
+			default: 400
+		},
+		height: {
+			type: Number,
+			default: 400
+		},
+		minWidth: {
+			type: Number,
+			default: 200
+		},
+		maxWidth: {
+			type: Number,
+			default: 600
+		},
+		minHeight: {
+			type: Number,
+			default: 200
+		},
+		maxHeight: {
+			type: Number,
+			default: 600
+		},
+		isLockWidth: {
+			type: Boolean,
+			default: false
+		},
+		isLockHeight: {
+			type: Boolean,
+			default: false
+		},
+		isLockRatio: {
+			type: Boolean,
+			default: true
+		},
+		scaleRatio: {
+			type: Number,
+			default: 1
+		},
+		minRatio: {
+			type: Number,
+			default: 0.5
+		},
+		maxRatio: {
+			type: Number,
+			default: 2
+		},
+		isDisableScale: {
+			type: Boolean,
+			default: false
+		},
+		isDisableRotate: {
+			type: Boolean,
+			default: false
+		},
+		isLimitMove: {
+			type: Boolean,
+			default: false
+		},
+		isShowPhotoBtn: {
+			type: Boolean,
+			default: true
+		},
+		isShowRotateBtn: {
+			type: Boolean,
+			default: true
+		},
+		isShowConfirmBtn: {
+			type: Boolean,
+			default: true
+		},
+		isShowCancelBtn: {
+			type: Boolean,
+			default: true
+		},
+		rotateAngle: {
+			type: Number,
+			default: 90
+		},
+		source: {
+			type: Object,
+			default: () => ({
+					album: '从相册中选择',
+					camera: '拍照',
+					// #ifdef MP-WEIXIN
+					message: '从微信中选择'
+					// #endif
+				})
+		}
+	},
+	data() {
+		return {
+			canvasWidth: 0,
+			canvasHeight: 0,
+			clipX: 0,
+			clipY: 0,
+			clipWidth: 0,
+			clipHeight: 0,
+			animation: false,
+			imageWidth: 0,
+			imageHeight: 0,
+			imageTop: 0,
+			imageLeft: 0,
+			scale: 1,
+			angle: 0,
+			image: this.imageUrl,
+			sysinfo: {},
+			throttleTimer: null,
+			throttleFlag: true,
+			timeClipCenter: null,
+			flagClipTouch: false,
+			flagEndTouch: false,
+			clipStart: {},
+			animationTimer: null,
+			touchRelative: [{x: 0,y: 0}],
+			hypotenuseLength: 0,
+			ctx: null
+		};
+	},
+	computed: {
+		clipStyle() {
+			const {clipWidth, clipHeight, clipY, clipX, animation} = this
+			return  `
+			width: ${clipWidth}px;
+			height:${clipHeight}px;
+			transition-property: ${animation ? '' : 'background'};
+			left: ${clipX}px;
+			top: ${clipY}px
+			`
+		},
+		imageStyle() {
+			const {imageWidth, imageHeight, imageLeft, imageTop, animation, scale, angle} = this
+			return `
+				width: ${imageWidth ? imageWidth + 'px' : 'auto'};
+				height: ${imageHeight ? imageHeight + 'px' : 'auto'};
+				transform: translate3d(${imageLeft - imageWidth / 2}px, ${imageTop - imageHeight / 2}px, 0) scale(${scale}) rotate(${angle}deg);
+				transition-duration: ${animation ? 0.35 : 0}s
+			`
+		},
+		clipSize() {
+			const { clipWidth, clipHeight } = this;
+			return { clipWidth, clipHeight };
+		},
+		clipPoint() {
+			const { clipY, clipX } = this;
+			return { clipY, clipX };
+		}
+	},
+	watch: {
+		value(val) {
+			if(!val) {
+				this.animation = 0
+				this.angle = 0
+			} else {
+				if(this.imageUrl) {
+					const {imageWidth, imageHeight, imageLeft, imageTop, scale, clipX, clipY, clipWidth, clipHeight, path} = cache?.[this.imageUrl] || {}
+					if(path != this.image) {
+						this.image = this.imageUrl;
+					} else {
+						this.setDiffData({imageWidth, imageHeight, imageLeft, imageTop, scale, clipX, clipY, clipWidth, clipHeight})
+					}
+					
+				}
+				
+			}
+		},
+		imageUrl(url) {
+			this.image = url
+		},
+		image:{
+			handler: async function(url) {
+				this.getImageInfo(url)
+			},
+			// immediate: true,
+		},
+		clipSize({ widthVal, heightVal }) {
+			let { minWidth, minHeight } = this;
+			minWidth = minWidth / 2;
+			minHeight = minHeight / 2;
+			if (widthVal < minWidth) {
+				this.setDiffData({clipWidth: minWidth})
+			}
+			if (heightVal < minHeight) {
+				this.setDiffData({clipHeight: minHeight})
+			}
+			this.calcClipSize();
+		},
+		angle(val) {
+			this.animation = true;
+			this.moveStop();
+			const { isLimitMove } = this;
+			if (isLimitMove && val % 90) {
+				this.setDiffData({
+					angle: Math.round(val / 90) * 90
+				})
+			}
+			this.imgMarginDetectionScale();
+		},
+		animation(val) {
+			clearTimeout(this.animationTimer);
+			if (val) {
+				let animationTimer = setTimeout(() => {
+					this.setDiffData({
+						animation: false
+					})
+				}, 260);
+				this.setDiffData({animationTimer})
+				this.animationTimer = animationTimer;
+			}
+		},
+		isLimitMove(val) {
+			if (val) {
+				if (this.angle % 90) {
+					this.setDiffData({
+						angle : Math.round(this.angle / 90) * 90
+					})
+				}
+				this.imgMarginDetectionScale();
+			}
+		},
+		clipPoint() {
+			this.cutDetectionPosition();
+		},
+		width(width, oWidth) {
+			if (width !== oWidth) {
+				this.setDiffData({
+					clipWidth:  width / 2
+				})
+			}
+		},
+		height(height, oHeight) {
+			if (height !== oHeight) {
+				this.setDiffData({
+					clipHeight:  height / 2
+				})
+			}
+		}
+	},
+	mounted() {
+		const sysinfo = uni.getSystemInfoSync();
+		this.sysinfo = sysinfo;
+		this.setClipInfo();
+		if(this.image) {
+			this.getImageInfo(this.image)
+		}
+		this.setClipCenter();
+		this.calcClipSize();
+		this.cutDetectionPosition();
+	},
+	methods: {
+		setDiffData(data) {
+			Object.keys(data).forEach(key => {
+			  if (this[key] !== data[key]) {
+				this[key] = data[key];
+			  }
+			});
+		},
+		getImageInfo(url) {
+			if (!url) return;
+			if(this.value) {
+				uni.showLoading({
+					title: '请稍候...',
+					mask: true
+				});
+			}
+			uni.getImageInfo({
+				src: url,
+				success: res => {
+					this.imgComputeSize(res.width, res.height);
+					this.image = res.path;
+					if (this.isLimitMove) {
+						this.imgMarginDetectionScale();
+						this.$emit('ready', res);
+					}
+					const {imageWidth, imageHeight, imageLeft, imageTop, scale, clipX, clipY, clipWidth, clipHeight} = this
+					cache[url] = Object.assign(res, {imageWidth, imageHeight, imageLeft, imageTop, scale, clipX, clipY, clipWidth, clipHeight});
+				},
+				fail: (err) => {
+					this.imgComputeSize();
+					if (this.isLimitMove) {
+						this.imgMarginDetectionScale();
+					}
+				}
+			});
+			
+		},
+		setClipInfo() {
+			const { width, height, sysinfo, canvasId } = this;
+			const clipWidth = width / 2;
+			const clipHeight = height / 2;
+			const clipY = (sysinfo.windowHeight - clipHeight) / 2;
+			const clipX = (sysinfo.windowWidth - clipWidth) / 2;
+			const imageLeft = sysinfo.windowWidth / 2;
+			const imageTop = sysinfo.windowHeight / 2;
+			this.ctx = uni.createCanvasContext(canvasId, this);
+			this.clipWidth = clipWidth;
+			this.clipHeight = clipHeight;
+			this.clipX = clipX;
+			this.clipY = clipY;
+			this.canvasHeight = clipHeight;
+			this.canvasWidth = clipWidth;
+			this.imageLeft = imageLeft;
+			this.imageTop = imageTop;
+		},
+		setClipCenter() {
+			const { sysInfo, clipHeight, clipWidth, imageTop, imageLeft } = this;
+			let sys = sysInfo || uni.getSystemInfoSync();
+			let clipY = (sys.windowHeight - clipHeight) * 0.5;
+			let clipX = (sys.windowWidth - clipWidth) * 0.5;
+			this.imageTop = imageTop - this.clipY + clipY;
+			this.imageLeft = imageLeft - this.clipX + clipX;
+			this.clipY = clipY;
+			this.clipX = clipX;
+		},
+		calcClipSize() {
+			const { clipHeight, clipWidth, sysinfo, clipX, clipY } = this;
+			if (clipWidth > sysinfo.windowWidth) {
+				this.setDiffData({
+					clipWidth:  sysinfo.windowWidth
+				})
+			} else if (clipWidth + clipX > sysinfo.windowWidth) {
+				this.setDiffData({
+					clipX: sysinfo.windowWidth - clipX
+				})
+			}
+			if (clipHeight > sysinfo.windowHeight) {
+				this.setDiffData({
+					clipHeight: sysinfo.windowHeight
+				})
+			} else if (clipHeight + clipY > sysinfo.windowHeight) {
+				this.clipY = sysinfo.windowHeight - clipY;
+				this.setDiffData({
+					clipY: sysinfo.windowHeight - clipY
+				})
+			}
+		},
+		cutDetectionPosition() {
+			const { clipX, clipY, sysinfo, clipHeight, clipWidth } = this;
+			let cutDetectionPositionTop = () => {
+					if (clipY < 0) {
+						this.setDiffData({clipY: 0})
+					}
+					if (clipY > sysinfo.windowHeight - clipHeight) {
+						this.setDiffData({clipY: sysinfo.windowHeight - clipHeight})
+					}
+				},
+				cutDetectionPositionLeft = () => {
+					if (clipX < 0) {
+						this.setDiffData({clipX: 0})
+					}
+					if (clipX > sysinfo.windowWidth - clipWidth) {
+						this.setDiffData({clipX: sysinfo.windowWidth - clipWidth})
+					}
+				};
+			if (clipY === null && clipX === null) {
+				let newClipY = (sysinfo.windowHeight - clipHeight) * 0.5;
+				let newClipX = (sysinfo.windowWidth - clipWidth) * 0.5;
+				this.setDiffData({
+					clipX: newClipX,
+					clipY: newClipY
+				})
+			} else if (clipY !== null && clipX !== null) {
+				cutDetectionPositionTop();
+				cutDetectionPositionLeft();
+			} else if (clipY !== null && clipX === null) {
+				cutDetectionPositionTop();
+				this.setDiffData({
+					clipX: (sysinfo.windowWidth - clipWidth) / 2
+				})
+			} else if (clipY === null && clipX !== null) {
+				cutDetectionPositionLeft();
+				this.setDiffData({
+					clipY: (sysinfo.windowHeight - clipHeight) / 2
+				})
+			}
+		},
+		imgComputeSize(width, height) {
+			const { imageWidth, imageHeight } = calcImageSize(width, height, this);
+			this.imageWidth = imageWidth;
+			this.imageHeight = imageHeight;
+		},
+		imgMarginDetectionScale(scale) {
+			if (!this.isLimitMove) return;
+			const currentScale = calcImageScale(this, scale);
+			this.imgMarginDetectionPosition(currentScale);
+		},
+		imgMarginDetectionPosition(scale) {
+			if (!this.isLimitMove) return;
+			const { scale: currentScale, left, top } = calcImageOffset(this, scale);
+			this.setDiffData({
+				imageLeft: left,
+				imageTop: top,
+				scale: currentScale
+			})
+		},
+		throttle() {
+			this.setDiffData({
+				throttleFlag: true
+			})
+		},
+		moveDuring() {
+			clearTimeout(this.timeClipCenter);
+		},
+		moveStop() {
+			clearTimeout(this.timeClipCenter);
+			const timeClipCenter = setTimeout(() => {
+				if (!this.animation) {
+					this.setDiffData({animation: true})
+				}
+				this.setClipCenter();
+			}, 800);
+			this.setDiffData({timeClipCenter})
+		},
+		clipTouchStart(event) {
+			// #ifdef H5
+			event.preventDefault()
+			// #endif
+			if (!this.image) {
+				uni.showToast({
+					title: '请选择图片',
+					icon: 'none'
+				});
+				return;
+			}
+			const currentX = event.touches[0].clientX;
+			const currentY = event.touches[0].clientY;
+			const { clipX, clipY, clipWidth, clipHeight } = this;
+			const corner = determineDirection(clipX, clipY, clipWidth, clipHeight, currentX, currentY);
+			this.moveDuring();
+			if(!corner) {return}
+			this.clipStart = {
+				width: clipWidth,
+				height: clipHeight,
+				x: currentX,
+				y: currentY,
+				clipY,
+				clipX,
+				corner
+			};
+			this.flagClipTouch = true;
+			this.flagEndTouch = true;
+		},
+		clipTouchMove(event) {
+			// #ifdef H5
+			event.stopPropagation()
+			event.preventDefault()
+			// #endif
+			if (!this.image) {
+				uni.showToast({
+					title: '请选择图片',
+					icon: 'none'
+				});
+				return;
+			}
+			// 只针对单指点击做处理
+			if (event.touches.length !== 1) {
+				return;
+				
+			}
+			const { flagClipTouch, throttleFlag } = this;
+			if (flagClipTouch && throttleFlag) {
+				const { isLockRatio, isLockHeight, isLockWidth } = this;
+				if (isLockRatio && (isLockWidth || isLockHeight)) return;
+				this.setDiffData({
+					throttleFlag: false
+				})
+				this.throttle();
+				const clipData = clipTouchMoveOfCalculate(this, event);
+				if(clipData) {
+					const { width, height, clipX, clipY } = clipData;
+					if (!isLockWidth && !isLockHeight) {
+						this.setDiffData({
+							clipWidth: width,
+							clipHeight: height,
+							clipX,
+							clipY
+						})
+					} else if (!isLockWidth) {
+						this.setDiffData({
+							clipWidth: width,
+							clipX
+						})
+					} else if (!isLockHeight) {
+						this.setDiffData({
+							clipHeight: height,
+							clipY
+						})
+					}
+					this.imgMarginDetectionScale();
+				}
+
+			}
+		},
+		clipTouchEnd() {
+			this.moveStop();
+			this.flagClipTouch = false;
+		},
+		imageTouchStart(e) {
+			// #ifdef H5
+			event.preventDefault()
+			// #endif
+			this.flagEndTouch = false;
+			const { imageLeft, imageTop } = this;
+			const clientXForLeft = e.touches[0].clientX;
+			const clientYForLeft = e.touches[0].clientY;
+
+			let touchRelative = [];
+			if (e.touches.length === 1) {
+				touchRelative[0] = {
+					x: clientXForLeft - imageLeft,
+					y: clientYForLeft - imageTop
+				};
+				this.touchRelative = touchRelative;
+			} else {
+				const clientXForRight = e.touches[1].clientX;
+				const clientYForRight = e.touches[1].clientY;
+				let width = Math.abs(clientXForLeft - clientXForRight);
+				let height = Math.abs(clientYForLeft - clientYForRight);
+				const hypotenuseLength = calcPythagoreanTheorem(width, height);
+
+				touchRelative = [
+					{
+						x: clientXForLeft - imageLeft,
+						y: clientYForLeft - imageTop
+					},
+					{
+						x: clientXForRight - imageLeft,
+						y: clientYForRight - imageTop
+					}
+				];
+				this.touchRelative = touchRelative;
+				this.hypotenuseLength = hypotenuseLength;
+			}
+		},
+		imageTouchMove(e) {
+			// #ifdef H5
+			event.preventDefault()
+			// #endif
+			const { flagEndTouch, throttleFlag } = this;
+			if (flagEndTouch || !throttleFlag) return;
+			const clientXForLeft = e.touches[0].clientX;
+			const clientYForLeft = e.touches[0].clientY;
+			this.setDiffData({throttleFlag: false})
+			this.throttle();
+			this.moveDuring();
+			if (e.touches.length === 1) {
+				const { left: imageLeft, top:  imageTop} = imageTouchMoveOfCalcOffset(this, clientXForLeft, clientYForLeft);
+				this.setDiffData({
+					imageLeft,
+					imageTop
+				})
+				this.imgMarginDetectionPosition();
+			} else {
+				const clientXForRight = e.touches[1].clientX;
+				const clientYForRight = e.touches[1].clientY;
+				let width = Math.abs(clientXForLeft - clientXForRight),
+					height = Math.abs(clientYForLeft - clientYForRight),
+					hypotenuse = calcPythagoreanTheorem(width, height),
+					scale = this.scale * (hypotenuse / this.hypotenuseLength);
+				if (this.isDisableScale) {
+
+					scale = 1;
+				} else {
+					scale = scale <= this.minRatio ? this.minRatio : scale;
+					scale = scale >= this.maxRatio ? this.maxRatio : scale;
+					this.$emit('change', {
+						width: this.imageWidth * scale,
+						height: this.imageHeight * scale
+					});
+				}
+
+				this.imgMarginDetectionScale(scale);
+				this.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+				this.scale = scale;
+			}
+		},
+		imageTouchEnd() {
+			this.setDiffData({
+				flagEndTouch: true
+			})
+			this.moveStop();
+		},
+		uploadImage() {
+			const itemList = Object.entries(this.source)
+			const sizeType = ['original', 'compressed']
+			const success = ({tempFilePaths:a, tempFiles: b}) => {
+				this.image = a ? a[0] : b[0].path
+			};
+			const _uploadImage = (type) => {
+				if(type !== 'message') {
+					uni.chooseImage({
+						count: 1,
+						sizeType,
+						sourceType: [type],
+						success
+					});
+				}
+				// #ifdef MP-WEIXIN
+				if(type == 'message') {
+					wx.chooseMessageFile({
+					  count: 1,
+					  type: 'image',
+					  success
+					})
+				}
+				// #endif
+			}
+			if(itemList.length > 1) {
+				uni.showActionSheet({
+					itemList: itemList.map(v => v[1]),
+					success: ({tapIndex: i}) => {
+						_uploadImage(itemList[i][0])
+					}
+				})
+			} else {
+				_uploadImage(itemList[0][0])
+			}
+		},
+		imageReset() {
+			const sys = this.sysinfo || uni.getSystemInfoSync();
+			this.scale = 1;
+			this.angle = 0;
+			this.imageTop = sys.windowHeight / 2;
+			this.imageLeft = sys.windowWidth / 2;
+		},
+		imageLoad(e) {
+			this.imageReset();
+			uni.hideLoading();
+			this.$emit('ready', e.detail);
+		},
+		rotate(event) {
+			if (this.isDisableRotate) return;
+			if (!this.image) {
+				uni.showToast({
+					title: '请选择图片',
+					icon: 'none'
+				});
+				return;
+			}
+			const { rotateAngle } = this;
+			const originAngle = this.angle
+			const type = event.currentTarget.dataset.type;
+			if (type === 'along') {
+				this.angle = originAngle + rotateAngle
+			} else {
+				this.angle = originAngle - rotateAngle
+			}
+			this.$emit('rotate', this.angle);
+		},
+		confirm() {
+			if (!this.image) {
+				uni.showToast({
+					title: '请选择图片',
+					icon: 'none'
+				});
+				return;
+			}
+			uni.showLoading({
+				title: '加载中'
+			});
+			const { canvasHeight, canvasWidth, clipHeight, clipWidth, ctx, scale, imageLeft, imageTop, clipX, clipY, angle, scaleRatio: dpr, image, quality, fileType, type: imageType, canvasId } = this;
+			const draw = () => {
+				const imageWidth = this.imageWidth * scale * dpr;
+				const imageHeight = this.imageHeight * scale * dpr;
+				const xpos = imageLeft - clipX;
+				const ypos = imageTop - clipY;
+				ctx.translate(xpos * dpr, ypos * dpr);
+				ctx.rotate((angle * Math.PI) / 180);
+				ctx.drawImage(image, -imageWidth / 2, -imageHeight / 2, imageWidth, imageHeight);
+				ctx.draw(false, () => {
+					const width = clipWidth * dpr
+					const height = clipHeight * dpr
+					let params = {
+						x: 0,
+						y: 0,
+						width,
+						height,
+						destWidth: width,
+						destHeight: height,
+						canvasId: canvasId,
+						fileType,
+						quality,
+						success: (res) => {
+							data.url = res.tempFilePath;
+							uni.hideLoading();
+							this.$emit('success', data);
+							this.$emit('input', false)
+						},
+						fail: (error) => {
+							console.error('error', error)
+							this.$emit('fail', error);
+							this.$emit('input', false)
+						}
+					};
+
+					let data = {
+						url: '',
+						width,
+						height
+					};
+					uni.canvasToTempFilePath(params, this)
+				});
+			};
+
+			if (canvasWidth !== clipWidth || canvasHeight !== clipHeight) {
+				this.canvasWidth = clipWidth;
+				this.canvasHeight = clipHeight;
+				ctx.draw();
+				this.$nextTick(() => {
+					setTimeout(() => {
+						draw();
+					}, 100);
+				})
+			} else {
+				draw();
+			}
+		},
+		cancel() {
+			this.$emit('cancel', false)
+			this.$emit('input', false)
+		},
+	}
+};
+</script>
+
+<style scoped>
+@import './index'
+</style>
\ No newline at end of file
diff --git a/pages2/setting/limeClipper/utils.js b/pages2/setting/limeClipper/utils.js
new file mode 100644
index 0000000..980c439
--- /dev/null
+++ b/pages2/setting/limeClipper/utils.js
@@ -0,0 +1,244 @@
+/**
+ * 判断手指触摸位置
+ */
+export function determineDirection(clipX, clipY, clipWidth, clipHeight, currentX, currentY) {
+	/*
+	 * (右下>>1 右上>>2 左上>>3 左下>>4)
+	 */
+	let corner;
+	/**
+	 * 思路：（利用直角坐标系）
+	 *  1.找出裁剪框中心点
+	 *  2.如点击坐标在上方点与左方点区域内，则点击为左上角
+	 *  3.如点击坐标在下方点与右方点区域内，则点击为右下角
+	 *  4.其他角同理
+	 */
+	const mainPoint = [clipX + clipWidth / 2, clipY + clipHeight / 2]; // 中心点
+	const currentPoint = [currentX, currentY]; // 触摸点
+
+	if (currentPoint[0] <= mainPoint[0] && currentPoint[1] <= mainPoint[1]) {
+		corner = 3; // 左上
+	} else if (currentPoint[0] >= mainPoint[0] && currentPoint[1] <= mainPoint[1]) {
+		corner = 2; // 右上
+	} else if (currentPoint[0] <= mainPoint[0] && currentPoint[1] >= mainPoint[1]) {
+		corner = 4; // 左下
+	} else if (currentPoint[0] >= mainPoint[0] && currentPoint[1] >= mainPoint[1]) {
+		corner = 1; // 右下
+	}
+
+	return corner;
+}
+
+/**
+ * 图片边缘检测检测时，计算图片偏移量
+ */
+export function calcImageOffset(data, scale) {
+	let left = data.imageLeft;
+	let top = data.imageTop;
+	scale = scale || data.scale;
+	
+	let imageWidth = data.imageWidth;
+	  let imageHeight = data.imageHeight;
+	  if ((data.angle / 90) % 2) {
+	    imageWidth = data.imageHeight;
+	    imageHeight = data.imageWidth;
+	  }
+	  const {
+	      clipX,
+	      clipWidth,
+	      clipY,
+	      clipHeight
+	    } = data;
+
+	// 当前图片宽度/高度
+	const currentImageSize = (size) => (size * scale) / 2;
+	const currentImageWidth = currentImageSize(imageWidth);
+	const currentImageHeight = currentImageSize(imageHeight);
+
+	left = clipX + currentImageWidth >= left ? left : clipX + currentImageWidth;
+	left = clipX + clipWidth - currentImageWidth <= left ? left : clipX + clipWidth - currentImageWidth;
+	top = clipY + currentImageHeight >= top ? top : clipY + currentImageHeight;
+	top = clipY + clipHeight - currentImageHeight <= top ? top : clipY + clipHeight - currentImageHeight;
+	return {
+		left,
+		top,
+		scale
+	};
+}
+
+/**
+ * 图片边缘检测时，计算图片缩放比例
+ */
+export function calcImageScale(data, scale) {
+	scale = scale || data.scale;
+	let {
+		imageWidth,
+		imageHeight,
+		clipWidth,
+		clipHeight,
+		angle
+	} = data
+	if ((angle / 90) % 2) {
+		imageWidth = imageHeight;
+		imageHeight = imageWidth;
+	}
+	if (imageWidth * scale < clipWidth) {
+		scale = clipWidth / imageWidth;
+	}
+	if (imageHeight * scale < clipHeight) {
+		scale = Math.max(scale, clipHeight / imageHeight);
+	}
+	return scale;
+}
+
+/**
+ * 计算图片尺寸
+ */
+export function calcImageSize(width, height, data) {
+	let imageWidth = width,
+		imageHeight = height;
+	let {
+		clipWidth,
+		clipHeight,
+		sysinfo,
+		width: originWidth,
+		height: originHeight
+	} = data
+	if (imageWidth && imageHeight) {
+		if (imageWidth / imageHeight > (clipWidth || originWidth) / (clipWidth || originHeight)) {
+			imageHeight = clipHeight || originHeight;
+			imageWidth = (width / height) * imageHeight;
+		} else {
+			imageWidth = clipWidth || originWidth;
+			imageHeight = (height / width) * imageWidth;
+		}
+	} else {
+		let sys = sysinfo || uni.getSystemInfoSync();
+		imageWidth = sys.windowWidth;
+		imageHeight = 0;
+	}
+	return {
+		imageWidth,
+		imageHeight
+	};
+}
+
+/**
+ * 勾股定理求斜边
+ */
+export function calcPythagoreanTheorem(width, height) {
+	return Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+}
+
+/**
+ * 拖动裁剪框时计算
+ */
+export function clipTouchMoveOfCalculate(data, event) {
+	const clientX = event.touches[0].clientX;
+	const clientY = event.touches[0].clientY;
+
+	let {
+		clipWidth,
+		clipHeight,
+		clipY: oldClipY,
+		clipX: oldClipX,
+		clipStart,
+		isLockRatio,
+		maxWidth,
+		minWidth,
+		maxHeight,
+		minHeight
+	} = data;
+	maxWidth = maxWidth / 2;
+	minWidth = minWidth / 2;
+	minHeight = minHeight / 2;
+	maxHeight = maxHeight / 2;
+
+	let width = clipWidth,
+		height = clipHeight,
+		clipY = oldClipY,
+		clipX = oldClipX,
+		// 获取裁剪框实际宽度/高度
+		// 如果大于最大值则使用最大值
+		// 如果小于最小值则使用最小值
+		sizecorrect = () => {
+			width = width <= maxWidth ? (width >= minWidth ? width : minWidth) : maxWidth;
+			height = height <= maxHeight ? (height >= minHeight ? height : minHeight) : maxHeight;
+		},
+		sizeinspect = () => {
+			sizecorrect();
+			if ((width > maxWidth || width < minWidth || height > maxHeight || height < minHeight) && isLockRatio) {
+				return false;
+			} else {
+				return true;
+			}
+		};
+	//if (clipStart.corner) {
+	height = clipStart.height + (clipStart.corner > 1 && clipStart.corner < 4 ? 1 : -1) * (clipStart.y - clientY);
+	//}
+	switch (clipStart.corner) {
+		case 1:
+			width = clipStart.width - clipStart.x + clientX;
+			if (isLockRatio) {
+				height = width / (clipWidth / clipHeight);
+			}
+			if (!sizeinspect()) return;
+			break;
+		case 2:
+			width = clipStart.width - clipStart.x + clientX;
+			if (isLockRatio) {
+				height = width / (clipWidth / clipHeight);
+			}
+			if (!sizeinspect()) {
+				return;
+			} else {
+				clipY = clipStart.clipY - (height - clipStart.height);
+			}
+
+			break;
+		case 3:
+			width = clipStart.width + clipStart.x - clientX;
+			if (isLockRatio) {
+				height = width / (clipWidth / clipHeight);
+			}
+			if (!sizeinspect()) {
+				return;
+			} else {
+				clipY = clipStart.clipY - (height - clipStart.height);
+				clipX = clipStart.clipX - (width - clipStart.width);
+			}
+
+			break;
+		case 4:
+			width = clipStart.width + clipStart.x - clientX;
+			if (isLockRatio) {
+				height = width / (clipWidth / clipHeight);
+			}
+			if (!sizeinspect()) {
+				return;
+			} else {
+				clipX = clipStart.clipX - (width - clipStart.width);
+			}
+			break;
+		default:
+			break;
+	}
+	return {
+		width,
+		height,
+		clipX,
+		clipY
+	};
+}
+
+/**
+ * 单指拖动图片计算偏移
+ */
+export function imageTouchMoveOfCalcOffset(data, clientXForLeft, clientYForLeft) {
+	let left = clientXForLeft - data.touchRelative[0].x,
+		top = clientYForLeft - data.touchRelative[0].y;
+	return {
+		left,
+		top
+	};
+}
diff --git a/pages2/setting/setting.vue b/pages2/setting/setting.vue
new file mode 100644
index 0000000..f75ef82
--- /dev/null
+++ b/pages2/setting/setting.vue
@@ -0,0 +1,333 @@
+<template>
+	<view class="mine-setting-container" :style="{height: `${windowHeight}px`}" >
+		<tui-list-view class="mine-menu-list"  unlined="all">
+			<tui-list-cell :arrow="true" >
+				<view class="tui-item-box align-center">
+					<view class="tui-list-cell_name">头像</view>
+					<view class="tui-right">
+						<cloud-image v-if="userInfo.avatar_file" class="avatar" 
+						:src="userInfo.avatar_file.url"></cloud-image>
+						<image class="cu-avatar" 
+						src="https://env-00jxt5y29hrd.normal.cloudstatic.cn/static/center/avatar.png?expire_at=1741157497&er_sign=9b8381ae7875137d28c57d502762691b"
+						mode="" 
+						v-else></image>
+					</view>
+				</view>
+			</tui-list-cell>
+			<tui-list-cell :arrow="true" @click="handleShowModal(0)">
+				<view class="tui-item-box">
+					<view class="tui-list-cell_name">昵称</view>
+					<view class="tui-right">{{ userInfo.nickname }}</view>
+				</view>
+			</tui-list-cell>
+			<tui-list-cell :arrow="true" @click="handleShowModal(2)"  >
+				<view class="tui-item-box">
+					<view class="tui-list-cell_name" >性别</view>
+					<view class="tui-right">
+						{{renderGener()}}
+					</view>
+				</view>
+			</tui-list-cell>
+			<tui-list-cell :arrow="true" @click="handleShowModal(1)" >
+				<view class="tui-item-box">
+					<view class="tui-list-cell_name" >个人简介</view>
+					<view class="tui-right">{{'' || '这个人很神秘，什么都没写'}}</view>
+				</view>
+			</tui-list-cell>
+		</tui-list-view>
+		
+		<tui-list-view class="mine-menu-list" marginTop="15px" unlined="all">
+			<tui-list-cell>
+				<view class="tui-item-box">
+					<view class="tui-list-cell_name">邮箱</view>
+					<view class="tui-right">{{userInfo.email || '暂无'}}</view>
+				</view>
+			</tui-list-cell>
+			<tui-list-cell :arrow="true" @click="handleBindMobile">
+				<view class="tui-item-box">
+					<view class="tui-list-cell_name">手机号</view>
+					<view class="tui-right">{{userInfo.mobile || '暂无'}}</view>
+				</view>
+			</tui-list-cell>
+			<tui-list-cell >
+				<view class="tui-item-box">
+					<view class="tui-list-cell_name">UID</view>
+					<view class="tui-right">
+						{{userInfo._id}}
+					</view>
+				</view>
+			</tui-list-cell>
+		</tui-list-view>
+		<tui-list-view class="mine-menu-list" marginTop="15px" unlined="all">
+			<tui-list-cell :arrow="true" @click="handleToRepassword" >
+				<view class="tui-item-box">
+					<view class="tui-list-cell_name">重置密码</view>
+					<view class="tui-right">前往</view>
+				</view>
+			</tui-list-cell>
+		</tui-list-view>
+		<view class="cu-list menu">
+			<view class="cu-item" >
+				<view class="content text-center" @click="handleLogout">
+					<text class="text-black">退出登录</text>
+				</view>
+			</view>
+		</view>
+		<tui-modal :show="modal1" :custom="true" @cancel="modal1 = !modal1" fadeIn >
+			<view class="tui-modal-custom">
+				<view class="tui-prompt-title">请输入昵称</view>
+				<input v-show="currentEdit === 0" placeholder="请输入新昵称" class="tui-modal-input" 
+					:class="{'tui-hidden-input':!modal1}"  
+					v-model="updateForm.nickname" />
+				<input v-show="currentEdit === 1" placeholder="请编辑简介" class="tui-modal-input"
+					:class="{'tui-hidden-input':!modal1}"  
+					v-model="updateForm.comment" />
+				<view v-if="currentEdit === 2" class="gender-content flex">
+					<view :class="updateForm.gender === 1 ? 'active': ''" 
+						@click="updateForm.gender = 1"
+						class="cu-tag lg line-grey radius">男</view>
+					<view :class="updateForm.gender === 2 ? 'active': ''" 
+						@click="updateForm.gender = 2"
+						class="cu-tag lg line-grey radius">女</view>
+					<view :class="updateForm.gender === 0 ? 'active': ''"
+						@click="updateForm.gender = 0"
+						class="cu-tag lg line-grey radius">保密</view>
+				</view>
+				<tui-button height="72rpx" :size="28" shape="circle" @click="updateUserInfo">立即提交</tui-button>
+			</view>
+		</tui-modal>
+	</view>
+</template>
+
+<script>
+	const uniIdCo = uniCloud.importObject("uni-id-co")
+	  import {
+	    store,
+	    mutations
+	  } from '@/uni_modules/uni-id-pages/common/store.js';
+	
+	import tuiListView from "@/components/thorui/tui-list-view/tui-list-view.vue";
+	import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell.vue";
+	import tuiButton from "@/components/thorui/tui-button/tui-button.vue";
+	import tuiModal from "@/components/thorui/tui-modal/tui-modal.vue";
+	
+	const db = uniCloud.database();
+	const usersTable = db.collection('uni-id-users')
+	export default {
+		components: {
+			tuiButton,
+			tuiListCell,
+			tuiListView,
+			tuiModal
+		},
+		computed: {
+		  userInfo() {
+		    return store.userInfo
+		  },
+		  realNameStatus () {
+			  if (!this.userInfo.realNameAuth) {
+				  return 0
+			  }
+		
+			  return this.userInfo.realNameAuth.authStatus
+		  }
+		},
+		data() {
+			return {
+				statusBarHeight: uni.getSystemInfoSync()['statusBarHeight'],
+				windowHeight: uni.getSystemInfoSync().windowHeight,
+				modal1: false,
+				currentEdit: 0,
+				updateForm: {
+					nickname: '',
+					gender: '',
+					comment: ''
+				}
+			}
+		},
+		mounted () {
+			// this.updateForm.gender = this.loginUser.gender;
+		},
+		methods: {
+			handleToRepassword () {
+				// if (!this.userInfo.mobile) {
+				// 	console.log("需要绑定手机号!");
+				// 	return;
+				// }
+				uni.navigateTo({url: `../../uni_modules/uni-id-pages/pages/userinfo/change_pwd/change_pwd` })
+			},
+			handleShowModal (index) {
+				this.currentEdit = index
+				this.modal1 = true;
+			},
+			updateUserInfo() {
+				let updates = {};
+				if (this.updateForm.nickname) updates.nickname = this.updateForm.nickname;
+				if (this.updateForm.gender ||this.updateForm.gender === 0) updates.gender = this.updateForm.gender;
+				if (this.updateForm.comment) updates.comment = this.updateForm.comment;
+				usersTable.where({
+					_id: this.userInfo._id
+				}).update(updates).then(e => {
+					if (e.result.updated) {
+						uni.showToast({ title: '更新成功', icon: 'none' });
+						mutations.setUserInfo(updates);
+					} else {
+						uni.showToast({ title: '没有变化', icon: 'none' });
+					}
+				})
+				this.modal1 = false;
+			},
+			handleLogout () {
+				
+				uni.showModal({
+				    title: '提示',
+				    content: '确定退出登录吗？',
+				    success: (res) => {
+				        if (res.confirm) {
+							 mutations.logout()
+							 uni.switchTab({ url: '/pages/my/my' })
+				        }
+				    }
+				});
+			},
+			renderGener () {
+				console.log(this.userInfo);
+				if (!this.userInfo) return "保密";
+				if (this.userInfo.gender === 0) return '保密';
+				if (this.userInfo.gender === 1) return '男';
+				if (this.userInfo.gender === 2) return '女';
+				return '保密';
+			},
+			// 绑定手机号
+			handleBindMobile () {
+				uni.navigateTo({
+					url: `../../uni_modules/uni-id-pages/pages/userinfo/bind-mobile/bind-mobile`
+				})
+			},
+			// 更换头像
+			setAvatar() {
+				uni.chooseImage({
+					count: 1,
+					success: (res) => {
+						// 头像剪裁尺寸
+						let options = {
+							width: 600,
+							height: 600
+						}
+						// 剪裁并上传头像
+						uni.navigateTo({
+							url: '/pages/mine/setting/cutImage?path=' +
+								res.tempFilePaths[0] +
+								`&options=${JSON.stringify(options)}`,
+							animationType: "fade-in",
+							events: {
+								uploadAvatarAfter: ({
+									url
+								}) => {
+									console.log(url);
+									// 使用 clientDB 提交数据
+									usersTable.where('_id==$env.uid').update({
+										avatar: url
+									}).then((res) => {
+										console.log(res);
+										uni.showToast({
+											icon: 'none',
+											title: '修改成功'
+										})
+										this.setUserInfo({
+											avatar: url
+										});
+									}).catch((err) => {
+										uni.showModal({
+											content: err.message ||
+												'请求服务失败',
+											showCancel: false
+										})
+									}).finally(() => {
+										uni.hideLoading()
+									})
+								}
+							}
+						});
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+uni-page-wrapper {
+	background-color: #f5f6f7;
+}
+.mine-setting-container {
+	width: 100%;
+	background-color: #f5f6f7;
+	.mine-menu-list {
+		margin-top: 15px;
+		border-radius: 8px;
+		.tui-item-box {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			.tui-list-cell_name {
+				padding-left: 20rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			
+			.tui-ml-auto {
+				margin-left: auto;
+			}
+			
+			.menu-icon {
+				color: #007AFF;
+				font-size: 16px;
+				margin-right: 5px;
+			}
+			.tui-right {
+				margin-left: auto;
+				margin-right: 34rpx;
+				font-size: 26rpx;
+				color: #999;
+			}
+		}
+	}
+	
+	.tui-modal-custom {
+		.tui-modal-input {
+			height: 44px;
+			border-bottom: 1px solid #ccc;
+			margin: 20px 10px;
+		}
+		.gender-content {
+			margin: 20px 0px;
+			.cu-tag {
+				padding: 15px 20px;
+				margin: 0px 10px;
+				&.active {
+					background-color: #007AFF;
+					color: white;
+				}
+			}
+		}
+	}
+}
+		.cu-avatar{
+			width: 120rpx;
+			height: 120rpx;
+			border-radius: 12rpx;
+			// border: 3px solid #3a5fb6;
+		}
+		.text-center {
+			
+			text-align: center;
+		}
+		.cu-list {
+			background-color: #fff;
+			margin-top: 50rpx;
+			padding: 20rpx
+		}
+</style>
+
diff --git a/pages2/withdraw/withdraw.vue b/pages2/withdraw/withdraw.vue
new file mode 100644
index 0000000..69bc934
--- /dev/null
+++ b/pages2/withdraw/withdraw.vue
@@ -0,0 +1,343 @@
+<template>
+	<view class="ithui-content">
+		<view class="withdraw">
+			<view class="withdraw-head">
+				<view class="withdraw-head-to">到账渠道</view>
+				<view class="withdraw-head-way">
+					<view class="withdraw-head-way-1">
+						<image class="way-icon" src="/static/money.png"></image>
+						<text class="way-text">微信零钱</text>
+					</view>
+					<view class="withdraw-head-way-2">仅支持整数，72小时内到账</view>
+				</view>
+			</view>
+			<view class="withdraw-body">
+				<text>提现金额</text>
+				<view class="input-money">
+					<text class="rmb">￥</text>
+					<input v-model.number="extract" type="text" @focus.prevent="stopKeyborad" class="t-input" />
+				</view>
+				<view class="info-money">
+					<view v-if="is_out">
+						<text class="info-money-num" style="color: #ff1e0f;">输入金额超过可提现余额，账户余额{{ pool }}元</text>
+					</view>
+					<view v-else-if="is_lowest">
+						<text class="info-money-num" style="color: #ff1e0f;">最低{{ lowest }}元起提现，账户余额{{ pool }}元</text>
+					</view>
+					<view v-else>
+						<text class="info-money-num">当前可提现余额{{ pool }}元，</text>
+						<text class="info-money-all" @click="getAll">全部提现</text>
+					</view>
+				</view>
+				<view :class="'tx' + (is_post ? '-active' : '')"><button @click="handleShowModel">提现</button></view>
+			</view>
+
+			<view :class="['keyboard', keyboradShow ? '' : 'active', isIphoneX ? 'isIphone' : '']">
+				<block v-for="(item, index) in 9" :key="index">
+					<view class="keyboard-item" @tap="keyboradKey(index + 1)">{{ index + 1 }}</view>
+				</block>
+				<view class="keyboard-item hide"></view>
+				<view class="keyboard-item" @tap="keyboradKey(0)"><text>0</text></view>
+				<view class="keyboard-item delte" @tap="keyboradDel()">
+					<image class="img" src="/static/del.png" mode="aspectFill" :lazy-load="true"></image>
+				</view>
+			</view>
+			<u-modal :show="showModal" title="提现确认" showCancelButton cancelText="我再想想" confirmColor="#ff1e0f"
+				confirmText="确认提现" @confirm="getMoney" @cancel="showModal = false">
+				<view class="slot-content">
+					<rich-text :nodes="content"></rich-text>
+				</view>
+			</u-modal>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				pool: 0,
+				extract: '',
+				service_fee: 0.0,
+				showModal: false,
+				is_out: false,
+				is_lowest: false,
+				is_post: false,
+				lowest: 0,
+				fee: 0,
+				money: '',
+				real_money: '',
+				keyboradShow: false,
+				isIphoneX: false,
+				isRefuse: false,
+				content: ""
+			};
+		},
+		watch: {
+			extract(oldVal, newVal) {}
+		},
+		onLoad() {
+			uni.showLoading({
+				title: '加载中'
+			});
+			// this.initData();
+			setTimeout(() => {
+				uni.hideLoading();
+			}, 500);
+		},
+		methods: {
+			async initData() {
+				// const res = await this.$api.mock('pool');
+				this.lowest = res.least_money;
+				this.fee = res.fee;
+				this.pool = res.pool;
+				this.$nextTick(() => {
+					this.keyboradShow = true;
+				});
+			},
+			stopKeyborad() {
+				uni.hideKeyboard();
+			},
+			keyboradKey(key) {
+				this.extract = this.extract * 10 + key;
+				this.checkMoney();
+			},
+			keyboradDel() {
+				if (this.extract && this.extract > 0) {
+					let val = parseInt(this.extract / 10);
+					if (val == 0) val = '';
+					this.extract = val;
+					this.checkMoney();
+				}
+			},
+			getAll() {
+				this.extract = parseInt(this.pool);
+				this.checkMoney();
+			},
+			checkMoney() {
+				if (!this.extract || this.extract < this.lowest) {
+					this.is_lowest = true;
+					this.is_post = false;
+				} else if (this.extract > this.pool) {
+					this.is_out = true;
+					this.is_lowest = false;
+					this.is_post = false;
+				} else {
+					this.is_out = false;
+					this.is_lowest = false;
+					this.is_post = true;
+				}
+				if (parseFloat(this.extract).toString() == 'NaN') {
+					this.is_post = false;
+					this.$api.msg('输入金额不合法');
+				}
+			},
+			handleShowModel() {
+				if (this.isRefuse) return;
+				this.checkMoney();
+				if (!this.is_post) return;
+				this.money = this.extract;
+				this.service_fee = Number((this.extract * (this.fee / 100)).toString().match(/^\d+(?:\.\d{0,2})?/));
+				this.real_money = Number((this.extract - this.service_fee).toString().match(/^\d+(?:\.\d{0,2})?/));
+				this.content = `<p>提现金额：<em style="font-style:normal;color:#ff1e0f">${this.money} 元</p>
+				          <p>实际到账：<em style="font-style:normal;color:#ff1e0f">${this.real_money} 元</em></p>
+				          <p>服务费用：<em style="font-style:normal;color:#ff1e0f">${this.service_fee} 元</em></p>
+				          <p>服务费率：<em style="font-style:normal;color:#ff1e0f">${this.fee}%</em></p>
+				         `
+				this.showModal = true;
+			},
+			getMoney() {
+				this.showModal = false;
+				if (this.isRefuse) return;
+				this.isRefuse = true;
+				setTimeout(() => {
+					uni.showToast({
+						title: "提现申请已提交，等待审核",
+						mask: false,
+						icon: 'none'
+					});
+				}, 500);
+				setTimeout(() => {
+					uni.navigateBack();
+				}, 1000);
+			}
+		},
+		onPullDownRefresh() {
+			this.extract = '';
+			// this.initData();
+			this.is_out = false;
+			this.is_lowest = false;
+			this.is_post = false;
+			setTimeout(function() {
+				uni.stopPullDownRefresh();
+			}, 500);
+		}
+	};
+</script>
+
+<style>
+	page {
+		background-color: #ededed;
+	}
+</style>
+
+<style lang="scss" scoped>
+	::v-deep .u-modal__content {
+		justify-content: flex-start;
+	}
+
+	.ithui {
+		&-content {
+			.withdraw {
+				padding: 40rpx;
+
+				&-head {
+					background-color: #f7f7f7;
+					display: flex;
+					align-content: center;
+					padding: 40rpx 60rpx;
+					font-size: 28rpx;
+
+					&-to {}
+
+					&-way {
+						display: flex;
+						flex-direction: column;
+						align-content: center;
+						margin-left: 40rpx;
+
+						&-1 {
+							color: #576b95;
+							margin-bottom: 20rpx;
+
+							.way-icon {
+								width: 36rpx;
+								height: 36rpx;
+								margin-right: 10rpx;
+								top: 4rpx;
+							}
+						}
+
+						&-2 {
+							color: #acacac;
+							font-size: 26rpx;
+						}
+					}
+				}
+
+				&-body {
+					background-color: #fff;
+					padding: 40rpx 60rpx;
+					font-size: 28rpx;
+
+					.input-money {
+						display: flex;
+						align-content: center;
+						font-weight: 600;
+						border-bottom: 1rpx solid #eaeef1;
+
+						.rmb {
+							font-size: 2em;
+							top: 20rpx;
+							position: relative;
+						}
+
+						.t-input {
+							height: 1.9em;
+							font-size: 2.5em;
+							border: none;
+							position: relative;
+							left: 3.5%;
+							outline: none;
+						}
+					}
+
+					.info-money {
+						margin-top: 20rpx;
+						font-size: 24rpx;
+						margin-bottom: 40rpx;
+
+						&-num {
+							color: #b2b2b2;
+						}
+
+						&-all {
+							color: #576b95;
+						}
+					}
+
+					.tx {
+						button {
+							color: #b2b2b2;
+						}
+					}
+
+					.tx-active {
+						button {
+							color: #fff;
+							background: #07c160;
+						}
+					}
+				}
+
+				.keyboard {
+					position: fixed;
+					bottom: 0;
+					left: 0;
+					width: 100%;
+					background: #ebebeb;
+					display: flex;
+					justify-content: center;
+					z-index: 2;
+					flex-wrap: wrap;
+					transition: all 0.2s ease-in 0.2s;
+				}
+
+				.active {
+					bottom: -400rpx;
+				}
+
+				.keyboard-item {
+					box-sizing: border-box;
+					width: 250rpx;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: center;
+					background: #fff;
+					font-size: 40rpx;
+					color: #333;
+					height: 99rpx;
+					border: 1rpx solid #ebebeb;
+					border-top: none;
+					border-left: none;
+				}
+
+				.hide {
+					opacity: 0;
+				}
+
+				.delte {
+					background: none;
+					box-shadow: none;
+				}
+
+				.delte image {
+					width: 60rpx;
+					height: 60rpx;
+				}
+
+				.isIphone {
+					padding-bottom: 68rpx !important;
+				}
+
+				.fee {
+					em {
+						font-size: 0.5rem;
+						font-style: normal;
+					}
+				}
+			}
+		}
+	}
+</style>
diff --git a/static/center/withdraw.png b/static/center/withdraw.png
new file mode 100644
index 0000000..3b3529a
Binary files /dev/null and b/static/center/withdraw.png differ
diff --git a/static/del.png b/static/del.png
new file mode 100644
index 0000000..a05fdeb
Binary files /dev/null and b/static/del.png differ
diff --git a/static/money.png b/static/money.png
new file mode 100644
index 0000000..4d8a887
Binary files /dev/null and b/static/money.png differ
diff --git a/uniCloud-alipay/cloudfunctions/gift_info/index.obj.js b/uniCloud-alipay/cloudfunctions/gift_info/index.obj.js
new file mode 100644
index 0000000..03fc4ac
--- /dev/null
+++ b/uniCloud-alipay/cloudfunctions/gift_info/index.obj.js
@@ -0,0 +1,24 @@
+const db = uniCloud.database();
+const _ = db.command;
+module.exports = {
+	_before: function () { // 通用预处理器
+
+	},
+	async getGiftList() {
+		try {
+			const res = await db.collection("gifts").get();
+			console.log(res.data);
+			return {
+				code: 200,
+				data: res.data
+			}
+		} catch(e) {
+			console.log(e.message);
+			return {
+				code: 500,
+				msg: e.message
+			}
+		}
+	},
+
+}
diff --git a/uniCloud-alipay/cloudfunctions/gift_info/package.json b/uniCloud-alipay/cloudfunctions/gift_info/package.json
new file mode 100644
index 0000000..1881fce
--- /dev/null
+++ b/uniCloud-alipay/cloudfunctions/gift_info/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "gift_info",
+  "dependencies": {},
+  "extensions": {
+    "uni-cloud-jql": {}
+  }
+}
\ No newline at end of file
diff --git a/uniCloud-alipay/cloudfunctions/user-info/index.obj.js b/uniCloud-alipay/cloudfunctions/user-info/index.obj.js
new file mode 100644
index 0000000..4c46b01
--- /dev/null
+++ b/uniCloud-alipay/cloudfunctions/user-info/index.obj.js
@@ -0,0 +1,185 @@
+const db = uniCloud.database();
+const _ = db.command;
+
+let obj = {
+	isValidIP(ip) {
+	    // ------------------------- IPv4 验证 -------------------------
+	    if (ip.includes('.')) {
+	        const ipv4Regex = /^(?:(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])\.){3}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])$/;
+	        return ipv4Regex.test(ip); // 直接通过正则匹配[1,5](@ref)
+	    }
+	
+	    // ------------------------- IPv6 验证 -------------------------
+	    if (ip.includes(':')) {
+	        const parts = ip.split(':');
+	        // 处理压缩的::符号（如::1或2001:db8::1）
+	        const hasDoubleColon = ip.includes('::');
+	        if (hasDoubleColon && ip.indexOf('::') !== ip.lastIndexOf('::')) return false; // 禁止多个::[6](@ref)
+	
+	        // 分割后的段数应在1到8之间（允许压缩）
+	        if (parts.length < 3 || parts.length > 8) return false;
+	
+	        // 展开压缩段（如将::替换为填充段）
+	        let expandedParts = [];
+	        let fillZeros = 8 - parts.filter(p => p !== '').length;
+	        for (let part of parts) {
+	            if (part === '') {
+	                while (fillZeros-- > 0) expandedParts.push('0');
+	            } else {
+	                expandedParts.push(part);
+	            }
+	        }
+	        if (expandedParts.length !== 8) return false;
+	
+	        // 验证每段是否为1-4位十六进制字符
+	        const hexRegex = /^[0-9a-fA-F]{1,4}$/;
+	        return expandedParts.every(p => hexRegex.test(p)); // 每段必须符合规则[6,7](@ref)
+	    }
+	
+	    return false;
+	},
+	isReservedOrLocalIP(ip) {
+	    // ------------------------- IPv4 处理逻辑 -------------------------
+	    if (ip.includes('.')) {
+	        const parts = ip.split('.').map(Number);
+	        // 格式验证
+	        if (parts.length !== 4 || parts.some(n => n < 0 || n > 255)) return false;
+	        
+	        // 1. 局域网地址（私有地址）
+	        if (
+	            parts[0] === 10 || // 10.0.0.0/8 [1,2,4](@ref)
+	            (parts[0] === 172 && parts[1] >= 16 && parts[1] <= 31) || // 172.16.0.0/12 [1,2,4](@ref)
+	            (parts[0] === 192 && parts[1] === 168) // 192.168.0.0/16 [1,2,4](@ref)
+	        ) return true;
+	        
+	        // 2. 保留地址
+	        return (
+	            parts[0] === 127 || // 127.0.0.0/8（环回地址）[1,4](@ref)
+	            (parts[0] === 169 && parts[1] === 254) || // 169.254.0.0/16（链路本地地址）[4,5](@ref)
+	            (parts[0] >= 224 && parts[0] <= 239) || // 224.0.0.0/4（多播地址）[3,5](@ref)
+	            ip === '0.0.0.0' || // 未指定地址 [1](@ref)
+	            ip === '255.255.255.255' // 广播地址 [1](@ref)
+	        );
+	    }
+	
+	    // ------------------------- IPv6 处理逻辑 -------------------------
+	    if (ip.includes(':')) {
+	        // 规范化IPv6（展开缩写）
+	        const normalized = ip.replace(/(^:|:$)/g, '::').replace(/::/g, ':0:').split(':')
+	            .map(seg => seg.padStart(4, '0')).join(':').padStart(39, '0:');
+	        
+	        if (normalized.startsWith('fc00:') || normalized.startsWith('fd00:')) return true;
+	        
+	        // 2. 保留地址
+	        return (
+	            normalized === '0000:0000:0000:0000:0000:0000:0000:0001' || 
+	            normalized.startsWith('fe80:') ||
+	            normalized.startsWith('ff00:') ||
+	            normalized.startsWith('2001:0db8:') ||
+	            normalized === '0000:0000:0000:0000:0000:0000:0000:0000' 
+	        );
+	    }
+	
+	    return false;
+	},
+	async getIPAddress(ip) {
+		if (!obj.isValidIP(ip)) return "未知";
+		if (obj.isReservedOrLocalIP(ip)) return "未知";
+
+		let address = "";
+		
+		const res = await uniCloud.collection("ip").where({
+			ip: ip
+		})
+		.get();
+		
+		console.log(res);
+		
+		if (res.data.length > 0) {
+			const res = await uniCloud.collection("ip").where({
+				ip: ip
+			})
+			.field({
+				ip:true,
+				country: true,
+				economize: true,
+				market: true,
+			})
+			.get();
+			if (res.data[0].market === "") address = res.data[0].country + " " + res.data[0].economize;
+			else {
+				address = res.data[0].economize + " " + res.data[0].market;
+			}
+			return address;
+		}
+		
+		let url= "https://62cccca0.api.cn/ipdata?token=7cec107b2f759a84211c74d9d9d6b4c4&datatype=json&ip=" + ip;
+		const response = await uniCloud.httpclient.request(url, {
+		  method: 'GET',
+		  timeout: 1000
+		});
+		console.log(response);
+		if (response.status === 200) {
+			await uniCloud.collection("ip").add({
+				ip: response.data.ip,
+				country: response.data.data[0]==="台湾"?"中国台湾":response.data.data[0],
+				economize: response.data.data[1],
+				market: response.data.data[2],
+				county: response.data.data[3],
+				operator: response.data.data[4],
+				postal_code: response.data.data[5],
+				area_code: response.data.data[6],
+				network: response.data.data[7]
+			});
+			if (response.data.data[2] === "" ) {
+				address = response.data.data[0] + " " + response.data.data[1];
+			}else {
+				address = response.data.data[1] + " " + response.data.data[2];
+			}
+			
+			return address;
+		}
+		return address;
+		
+	}
+}
+module.exports = {
+	_before: function () { // 通用预处理器
+
+	},
+	
+	async get_user_info(query) {
+		try {
+			let uid = query.uid;
+			console.log(uid);
+			if (!uid) throw new Error("uid不存在");
+			console.log(uid);
+			let res = await db.collection("uni-id-users")
+			.doc(uid)
+			.field({
+				_id: true,
+				nickname: true,
+				avatar_file: true,
+				last_login_ip:true,
+				register_date: true,
+				last_login_date:true,
+				personal_profile: true,
+				gender: true
+			})
+			.get();
+			res.data[0].last_login_ip = await obj.getIPAddress(res.data[0].last_login_ip);
+			console.log(res)
+			
+			return {
+				code: 200,
+				data: res.data[0]
+			}
+		} catch (e) {
+			console.log(e);
+			return {
+				code: 500,
+				msg: e.message
+			}
+		}
+	}
+}
diff --git a/uniCloud-alipay/cloudfunctions/user-info/package.json b/uniCloud-alipay/cloudfunctions/user-info/package.json
new file mode 100644
index 0000000..3315045
--- /dev/null
+++ b/uniCloud-alipay/cloudfunctions/user-info/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "user-info",
+  "dependencies": {},
+  "extensions": {
+    "uni-cloud-jql": {}
+  }
+}
\ No newline at end of file
diff --git a/uniCloud-alipay/database/gifts.schema.json b/uniCloud-alipay/database/gifts.schema.json
new file mode 100644
index 0000000..c952e73
--- /dev/null
+++ b/uniCloud-alipay/database/gifts.schema.json
@@ -0,0 +1,37 @@
+{
+  "bsonType": "object",
+  "required": ["price"], // 添加 price 为必填字段
+  "permission": {
+    "read": true,
+    "create": "'admin' in auth.role",
+    "update": "'admin' in auth.role",
+    "delete": "'admin' in auth.role"
+  },
+  "properties": {
+    "_id": {
+      "description": "ID，系统自动生成"
+    },
+    "url": {
+      "bsonType": "string",
+      "title": "资源地址",
+      "description": "带签名时效的静态资源 URL",
+      "trim": "both",
+      "pattern": "^https?://", // 基础 URL 格式校验
+      "errorMessage": {
+        "format": "URL 必须以 http/https 开头"
+      }
+    },
+    "price": {
+      "bsonType": "int",
+      "title": "商品价格",
+      "description": "单位：分（整数类型）",
+      "minimum": 0,
+      "maximum": 100000000,
+      "errorMessage": {
+        "type": "价格必须为整数类型",
+        "minimum": "价格不能为负数",
+        "maximum": "单件商品价格不得超过100万元"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uniCloud-alipay/database/users-give-gift.schema.json b/uniCloud-alipay/database/users-give-gift.schema.json
new file mode 100644
index 0000000..d758733
--- /dev/null
+++ b/uniCloud-alipay/database/users-give-gift.schema.json
@@ -0,0 +1,48 @@
+{
+  "bsonType": "object",
+  "required": ["user_id", "article_id", "months", "create_time"], // 必填字段
+  "permission": {
+    "read": true,
+		"create": "doc._id == auth.uid || 'admin' in auth.role",
+		"update": "doc._id == auth.uid ||  'admin' in auth.role",
+		"delete": "doc._id == auth.uid || 'admin' in auth.role"
+  },
+  "properties": {
+    "_id": {
+      "description": "ID，系统自动生成"
+    },
+    "months": {
+      "bsonType": "int",
+      "title": "累计月数",
+	  "defaultValue": 0, 
+      "minimum": 0
+    },
+    "user_id": {
+      "bsonType": "string",
+      "title": "用户ID",
+      "foreignKey": "uni-id-users._id", 
+      "trim": "both",
+      "errorMessage": "用户ID不能为空"
+    },
+    "article_id": {
+      "bsonType": "string",
+      "title": "文章ID",
+      "trim": "both",
+      "errorMessage": "文章ID不能为空"
+    },
+    "gift_value": {
+      "bsonType": "int",
+      "title": "礼物价值",
+      "minimum": 0,
+      "defaultValue": 0, 
+      "errorMessage": "礼物价值不能小于1"
+    },
+    "create_time": {
+      "bsonType": "timestamp",
+      "title": "创建时间",
+      "defaultValue": {
+        "$env": "now" // 自动填充服务器时间[1](@ref)
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-notice-bar/changelog.md b/uni_modules/uni-notice-bar/changelog.md
new file mode 100644
index 0000000..ce50674
--- /dev/null
+++ b/uni_modules/uni-notice-bar/changelog.md
@@ -0,0 +1,20 @@
+## 1.2.2（2023-12-20）
+- 修复动态绑定title时，滚动速度不一致的问题
+## 1.2.1（2022-09-05）
+- 新增 属性 fontSize，可修改文字大小。
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-notice-bar](https://uniapp.dcloud.io/component/uniui/uni-notice-bar)
+## 1.1.1（2021-11-09） 
+- 新增 提供组件设计资源，组件样式调整
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.9（2021-05-12）
+- 新增 组件示例地址
+## 1.0.8（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 1.0.7（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.6（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue b/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue
new file mode 100644
index 0000000..47fb9b3
--- /dev/null
+++ b/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue
@@ -0,0 +1,431 @@
+<template>
+	<view v-if="show" class="uni-noticebar" :style="{ backgroundColor }" @click="onClick">
+		<uni-icons v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon" type="sound"
+			:color="color" :size="fontSize * 1.5" />
+		<view ref="textBox" class="uni-noticebar__content-wrapper"
+			:class="{
+				'uni-noticebar__content-wrapper--scrollable': scrollable,
+				'uni-noticebar__content-wrapper--single': !scrollable && (single || moreText)
+			}"
+			:style="{ height: scrollable ? fontSize * 1.5 + 'px' : 'auto' }"
+		>
+			<view :id="elIdBox" class="uni-noticebar__content"
+				:class="{
+					'uni-noticebar__content--scrollable': scrollable,
+					'uni-noticebar__content--single': !scrollable && (single || moreText)
+				}"
+			>
+				<text :id="elId" ref="animationEle" class="uni-noticebar__content-text" 
+					:class="{
+						'uni-noticebar__content-text--scrollable': scrollable,
+						'uni-noticebar__content-text--single': !scrollable && (single || showGetMore)
+					}" 
+					:style="{
+						color: color,
+						fontSize: fontSize + 'px',
+						lineHeight: fontSize * 1.5 + 'px',
+						width: wrapWidth + 'px',
+						'animationDuration': animationDuration,
+						'-webkit-animationDuration': animationDuration,
+						animationPlayState: webviewHide ? 'paused' : animationPlayState,
+						'-webkit-animationPlayState': webviewHide ? 'paused' : animationPlayState,
+						animationDelay: animationDelay,
+						'-webkit-animationDelay': animationDelay
+					}"
+				>{{text}}</text>
+			</view>
+		</view>
+		<view v-if="isShowGetMore" class="uni-noticebar__more uni-cursor-point"
+			@click="clickMore">
+			<text v-if="moreText.length > 0" :style="{ color: moreColor, fontSize: fontSize + 'px' }">{{ moreText }}</text>
+			<uni-icons v-else type="right" :color="moreColor" :size="fontSize * 1.1" />
+		</view>
+		<view class="uni-noticebar-close uni-cursor-point" v-if="isShowClose">
+			<uni-icons type="closeempty" :color="color" :size="fontSize * 1.1" @click="close" />
+		</view>
+	</view>
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	const dom = weex.requireModule('dom');
+	const animation = weex.requireModule('animation');
+	// #endif
+
+	/**
+	 * NoticeBar 自定义导航栏
+	 * @description 通告栏组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=30
+	 * @property {Number} speed 文字滚动的速度，默认100px/秒
+	 * @property {String} text 显示文字
+	 * @property {String} backgroundColor 背景颜色
+	 * @property {String} color 文字颜色
+	 * @property {String} moreColor 查看更多文字的颜色
+	 * @property {String} moreText 设置“查看更多”的文本
+	 * @property {Boolean} single = [true|false] 是否单行
+	 * @property {Boolean} scrollable = [true|false] 是否滚动，为true时，NoticeBar为单行
+	 * @property {Boolean} showIcon = [true|false] 是否显示左侧喇叭图标
+	 * @property {Boolean} showClose = [true|false] 是否显示左侧关闭按钮
+	 * @property {Boolean} showGetMore = [true|false] 是否显示右侧查看更多图标，为true时，NoticeBar为单行
+	 * @event {Function} click 点击 NoticeBar 触发事件
+	 * @event {Function} close 关闭 NoticeBar 触发事件
+	 * @event {Function} getmore 点击”查看更多“时触发事件
+	 */
+
+	export default {
+		name: 'UniNoticeBar',
+		emits: ['click', 'getmore', 'close'],
+		props: {
+			text: {
+				type: String,
+				default: ''
+			},
+			moreText: {
+				type: String,
+				default: ''
+			},
+			backgroundColor: {
+				type: String,
+				default: '#FFF9EA'
+			},
+			speed: {
+				// 默认1s滚动100px
+				type: Number,
+				default: 100
+			},
+			color: {
+				type: String,
+				default: '#FF9A43'
+			},
+			fontSize: {
+				type: Number,
+				default: 14
+			},
+			moreColor: {
+				type: String,
+				default: '#FF9A43'
+			},
+			single: {
+				// 是否单行
+				type: [Boolean, String],
+				default: false
+			},
+			scrollable: {
+				// 是否滚动，添加后控制单行效果取消
+				type: [Boolean, String],
+				default: false
+			},
+			showIcon: {
+				// 是否显示左侧icon
+				type: [Boolean, String],
+				default: false
+			},
+			showGetMore: {
+				// 是否显示右侧查看更多
+				type: [Boolean, String],
+				default: false
+			},
+			showClose: {
+				// 是否显示左侧关闭按钮
+				type: [Boolean, String],
+				default: false
+			}
+		},
+		data() {
+			const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
+			const elIdBox = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
+			return {
+				textWidth: 0,
+				boxWidth: 0,
+				wrapWidth: '',
+				webviewHide: false,
+				// #ifdef APP-NVUE
+				stopAnimation: false,
+				// #endif
+				elId: elId,
+				elIdBox: elIdBox,
+				show: true,
+				animationDuration: 'none',
+				animationPlayState: 'paused',
+				animationDelay: '0s'
+			}
+		},
+		watch:{
+			text:function(newValue,oldValue){
+				this.initSize();
+			}
+		},
+		computed: {
+			isShowGetMore() {
+				return this.showGetMore === true || this.showGetMore === 'true'
+			},
+			isShowClose() {
+				return (this.showClose === true || this.showClose === 'true') 
+					&& (this.showGetMore === false || this.showGetMore === 'false')
+			}
+		},
+		mounted() {
+			// #ifdef APP-PLUS
+			var pages = getCurrentPages();
+			var page = pages[pages.length - 1];
+			var currentWebview = page.$getAppWebview();
+			currentWebview.addEventListener('hide', () => {
+				this.webviewHide = true
+			})
+			currentWebview.addEventListener('show', () => {
+				this.webviewHide = false
+			})
+			// #endif
+			this.$nextTick(() => {
+				this.initSize()
+			})
+		},
+		// #ifdef APP-NVUE
+		beforeDestroy() {
+			this.stopAnimation = true
+		},
+		// #endif
+		methods: {
+			initSize() {
+				if (this.scrollable) {
+					// #ifndef APP-NVUE
+					let query = [],
+						boxWidth = 0,
+						textWidth = 0;
+					let textQuery = new Promise((resolve, reject) => {
+						uni.createSelectorQuery()
+							// #ifndef MP-ALIPAY
+							.in(this)
+							// #endif
+							.select(`#${this.elId}`)
+							.boundingClientRect()
+							.exec(ret => {
+								this.textWidth = ret[0].width
+								resolve()
+							})
+					})
+					let boxQuery = new Promise((resolve, reject) => {
+						uni.createSelectorQuery()
+							// #ifndef MP-ALIPAY
+							.in(this)
+							// #endif
+							.select(`#${this.elIdBox}`)
+							.boundingClientRect()
+							.exec(ret => {
+								this.boxWidth = ret[0].width
+								resolve()
+							})
+					})
+					query.push(textQuery)
+					query.push(boxQuery)
+					Promise.all(query).then(() => {
+						this.animationDuration = `${this.textWidth / this.speed}s`
+						this.animationDelay = `-${this.boxWidth / this.speed}s`
+						setTimeout(() => {
+							this.animationPlayState = 'running'
+						}, 1000)
+					})
+					// #endif
+					// #ifdef APP-NVUE
+					dom.getComponentRect(this.$refs['animationEle'], (res) => {
+						let winWidth = uni.getSystemInfoSync().windowWidth
+						this.textWidth = res.size.width
+						animation.transition(this.$refs['animationEle'], {
+							styles: {
+								transform: `translateX(-${winWidth}px)`
+							},
+							duration: 0,
+							timingFunction: 'linear',
+							delay: 0
+						}, () => {
+							if (!this.stopAnimation) {
+								animation.transition(this.$refs['animationEle'], {
+									styles: {
+										transform: `translateX(-${this.textWidth}px)`
+									},
+									timingFunction: 'linear',
+									duration: (this.textWidth - winWidth) / this.speed * 1000,
+									delay: 1000
+								}, () => {
+									if (!this.stopAnimation) {
+										this.loopAnimation()
+									}
+								});
+							}
+						});
+					})
+					// #endif
+				}
+				// #ifdef APP-NVUE
+				if (!this.scrollable && (this.single || this.moreText)) {
+					dom.getComponentRect(this.$refs['textBox'], (res) => {
+						this.wrapWidth = res.size.width
+					})
+				}
+				// #endif
+			},
+			loopAnimation() {
+				// #ifdef APP-NVUE
+				animation.transition(this.$refs['animationEle'], {
+					styles: {
+						transform: `translateX(0px)`
+					},
+					duration: 0
+				}, () => {
+					if (!this.stopAnimation) {
+						animation.transition(this.$refs['animationEle'], {
+							styles: {
+								transform: `translateX(-${this.textWidth}px)`
+							},
+							duration: this.textWidth / this.speed * 1000,
+							timingFunction: 'linear',
+							delay: 0
+						}, () => {
+							if (!this.stopAnimation) {
+								this.loopAnimation()
+							}
+						});
+					}
+				});
+				// #endif
+			},
+			clickMore() {
+				this.$emit('getmore')
+			},
+			close() {
+				this.show = false;
+				this.$emit('close')
+			},
+			onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-noticebar {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		width: 100%;
+		box-sizing: border-box;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		padding: 10px 12px;
+		margin-bottom: 10px;
+	}
+
+	.uni-cursor-point {
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-noticebar-close {
+		margin-left: 8px;
+		margin-right: 5px;
+	}
+
+	.uni-noticebar-icon {
+		margin-right: 5px;
+	}
+
+	.uni-noticebar__content-wrapper {
+		flex: 1;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	.uni-noticebar__content-wrapper--single {
+		/* #ifndef APP-NVUE */
+		line-height: 18px;
+		/* #endif */
+	}
+
+	.uni-noticebar__content-wrapper--single,
+	.uni-noticebar__content-wrapper--scrollable {
+		flex-direction: row;
+	}
+
+	/* #ifndef APP-NVUE */
+	.uni-noticebar__content-wrapper--scrollable {
+		position: relative;
+	}
+
+	/* #endif */
+
+	.uni-noticebar__content--scrollable {
+		/* #ifdef APP-NVUE */
+		flex: 0;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		flex: 1;
+		display: block;
+		overflow: hidden;
+		/* #endif */
+	}
+
+	.uni-noticebar__content--single {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		flex: none;
+		width: 100%;
+		justify-content: center;
+		/* #endif */
+	}
+
+	.uni-noticebar__content-text {
+		font-size: 14px;
+		line-height: 18px;
+		/* #ifndef APP-NVUE */
+		word-break: break-all;
+		/* #endif */
+	}
+
+	.uni-noticebar__content-text--single {
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		display: block;
+		width: 100%;
+		white-space: nowrap;
+		/* #endif */
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.uni-noticebar__content-text--scrollable {
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		padding-left: 750rpx;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		position: absolute;
+		display: block;
+		height: 18px;
+		line-height: 18px;
+		white-space: nowrap;
+		padding-left: 100%;
+		animation: notice 10s 0s linear infinite both;
+		animation-play-state: paused;
+		/* #endif */
+	}
+
+	.uni-noticebar__more {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		flex-direction: row;
+		flex-wrap: nowrap;
+		align-items: center;
+		padding-left: 5px;
+	}
+
+	@keyframes notice {
+		100% {
+			transform: translate3d(-100%, 0, 0);
+		}
+	}
+</style>
diff --git a/uni_modules/uni-notice-bar/package.json b/uni_modules/uni-notice-bar/package.json
new file mode 100644
index 0000000..1e9762c
--- /dev/null
+++ b/uni_modules/uni-notice-bar/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-notice-bar",
+  "displayName": "uni-notice-bar 通告栏",
+  "version": "1.2.2",
+  "description": "NoticeBar 通告栏组件，常用于展示公告信息，可设为滚动公告",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "通告栏",
+    "公告",
+    "跑马灯"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-notice-bar/readme.md b/uni_modules/uni-notice-bar/readme.md
new file mode 100644
index 0000000..fb2ede2
--- /dev/null
+++ b/uni_modules/uni-notice-bar/readme.md
@@ -0,0 +1,13 @@
+
+
+## NoticeBar 通告栏
+> **组件名：uni-notice-bar**
+> 代码块： `uNoticeBar`
+
+
+通告栏组件 。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-notice-bar)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+