diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..91dfed8
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+node_modules
\ No newline at end of file
diff --git a/components/amount/index.scss b/components/amount/index.scss
new file mode 100644
index 0000000..bb6069e
--- /dev/null
+++ b/components/amount/index.scss
@@ -0,0 +1,3 @@
+.zui-amount.numerical {
+  font-family: DINPro-Medium, DIN Alternate, "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+}
\ No newline at end of file
diff --git a/components/amount/index.vue b/components/amount/index.vue
new file mode 100644
index 0000000..3bb2cae
--- /dev/null
+++ b/components/amount/index.vue
@@ -0,0 +1,209 @@
+<template>
+	<text class="zui-amount" :class="{ numerical: !isCapital }">
+		<slot v-if="$slots.prefix" name="prefix"></slot>
+		<template v-else-if="prefix">
+			{{ prefix }}
+		</template>
+		<template v-if="!isCapital">
+			{{ Number(value || 0) | doPrecision(precision > 0 ? precision : 0, isRoundUp) | doFormat(hasSeparator, separator) }}
+		</template>
+		<template v-else>
+			{{ Number(value || 0) | doPrecision(4, isRoundUp) | doCapital }}
+		</template>
+	</text>
+</template>
+
+<script>
+/* istanbul ignore file */
+var formatValueByGapStep = function(step, value, gap, direction, range, isAdd, oldValue) {
+	var gap = gap || ' ';
+	var direction = direction || 'right';
+	var isAdd = isAdd || 1;
+	var oldValue = oldValue || 0;
+	if (value.length == 0) {
+		return { value: value, range: range };
+	}
+	var arr = value && value.split('');
+	var _range = range;
+	var showValue = '';
+	if (direction == 'right') {
+		for (var j = arr.length - 1, k = 0; j >= 0; j--, k++) {
+			var m = arr[j];
+			showValue = k > 0 && k % step == 0 ? m + gap + showValue : m + '' + showValue;
+		}
+		if (isAdd == 1) {
+			// 在添加的情况下，如果添加前字符串的长度减去新的字符串的长度为2，说明多了一个间隔符，需要调整range
+			if (oldValue.length - showValue.length == -2) {
+				_range = range + 1;
+			}
+		} else {
+			// 在删除情况下，如果删除前字符串的长度减去新的字符串的长度为2，说明少了一个间隔符，需要调整range
+			if (oldValue.length - showValue.length == 2) {
+				_range = range - 1;
+			}
+			// 删除到最开始，range 保持 0
+			if (_range <= 0) {
+				_range = 0;
+			}
+		}
+	} else {
+		arr.some(function(n, i) {
+			showValue = i > 0 && i % step == 0 ? showValue + gap + n : showValue + '' + n;
+		});
+		var adapt = range % (step + 1) == 0 ? 1 * isAdd : 0;
+		_range = typeof range !== 'undefined' ? (range == 0 ? 0 : range + adapt) : showValue.length;
+	}
+	return { value: showValue, range: _range };
+};
+var numberCapital = function(number) {
+	var cnNums = ['\u96f6', '\u58f9', '\u8d30', '\u53c1', '\u8086', '\u4f0d', '\u9646', '\u67d2', '\u634c', '\u7396'];
+	// 拾 \u62fe 佰 \u4f70 仟 \u4edf
+	var cnIntRadice = ['', '\u62fe', '\u4f70', '\u4edf'];
+	// 万 \u4e07 亿 \u4ebf 兆 \u5146
+	var cnIntUnits = ['', '\u4e07', '\u4ebf', '兆'];
+	// 角 \u89d2 分 \u5206 毫 \u6beb 厘 \u5398
+	var cnDecUnits = ['\u89d2', '\u5206', '\u6beb', '\u5398'];
+	var cnInteger = '\u6574'; // 整 \u6574
+	var cnIntLast = '\u5143'; // 元 \u5143
+	var cnNegative = '\u8d1f'; // 负
+	// Maximum number
+	var maxNum = 999999999999999.9999;
+	var negative;
+	// Integral part
+	var integerNum;
+	// Decimal part
+	var decimalNum;
+	// Capital number
+	var capitalStr = '';
+	var parts;
+	/* istanbul ignore if  */
+	if (number == '') {
+		return '';
+	}
+	number = parseFloat(number);
+	if (number < 0) {
+		negative = true;
+		number = Math.abs(number);
+	}
+	/* istanbul ignore if  */
+	if (number >= maxNum) {
+		return '';
+	}
+	/* istanbul ignore if  */
+	if (number == 0) {
+		capitalStr = cnNums[0] + cnIntLast + cnInteger;
+		return capitalStr;
+	}
+	// Convert to String
+	number += '';
+	if (number.indexOf('.') == -1) {
+		integerNum = number;
+		decimalNum = '';
+	} else {
+		parts = number.split('.');
+		integerNum = parts[0];
+		decimalNum = parts[1].substr(0, 4);
+	}
+	// Convert integer part
+	if (parseInt(integerNum, 10) > 0) {
+		var zeroCount = 0;
+		for (var i = 0, IntLen = integerNum.length; i < IntLen; i++) {
+			var n = integerNum.substr(i, 1);
+			var p = IntLen - i - 1;
+			var q = p / 4;
+			var m = p % 4;
+			if (n == '0') {
+				zeroCount++;
+			} else {
+				if (zeroCount > 0) {
+					capitalStr += cnNums[0];
+				}
+				zeroCount = 0;
+				capitalStr += cnNums[parseInt(n)] + cnIntRadice[m];
+			}
+			if (m == 0 && zeroCount < 4) {
+				capitalStr += cnIntUnits[q];
+			}
+		}
+		capitalStr += cnIntLast;
+	}
+	// Convert decimal part
+	if (decimalNum !== '') {
+		for (var i = 0, decLen = decimalNum.length; i < decLen; i++) {
+			var n = decimalNum.substr(i, 1);
+			if (n !== '0') {
+				capitalStr += cnNums[Number(n)] + cnDecUnits[i];
+			}
+		}
+	}
+	/* istanbul ignore if  */
+	if (capitalStr == '') {
+		capitalStr += cnNums[0] + cnIntLast + cnInteger;
+	} else if (decimalNum == '') {
+		capitalStr += cnInteger;
+	}
+	if (negative) {
+		capitalStr = '' + cnNegative + capitalStr;
+	}
+	return capitalStr;
+};
+export default {
+	name: 'zui-amount',
+	filters: {
+		doPrecision: function(value, precision, isRoundUp) {
+			var exponentialForm = Number(value + 'e' + precision);
+			var rounded = isRoundUp ? Math.round(exponentialForm) : Math.floor(exponentialForm);
+			return Number(rounded + 'e-' + precision).toFixed(precision);
+		},
+		doFormat: function(value, hasSeparator, separator) {
+			if (!hasSeparator) {
+				return value;
+			}
+			var numberParts = value.split('.');
+			var integerValue = numberParts[0];
+			var decimalValue = numberParts[1] || '';
+			var sign = '';
+			if (integerValue.startsWith('-')) {
+				integerValue = integerValue.substring(1);
+				sign = '-';
+			}
+			var formateValue = formatValueByGapStep(3, integerValue, separator, 'right', 0, 1);
+			return decimalValue ? '' + sign + formateValue.value + '.' + decimalValue : '' + sign + formateValue.value;
+		},
+		doCapital: function(value) {
+			return numberCapital(value);
+		}
+	},
+	props: {
+		value: {
+			type: [Number, String],
+			default: 0
+		},
+		precision: {
+			type: Number,
+			default: 2
+		},
+		isRoundUp: {
+			type: Boolean,
+			default: true
+		},
+		hasSeparator: {
+			type: Boolean,
+			default: false
+		},
+		separator: {
+			type: String,
+			default: ','
+		},
+		isCapital: {
+			type: Boolean,
+			default: false
+		},
+		prefix: String
+	},
+};
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>
diff --git a/components/button/index.scss b/components/button/index.scss
new file mode 100644
index 0000000..dd5a2e7
--- /dev/null
+++ b/components/button/index.scss
@@ -0,0 +1,69 @@
+.zui-button {
+  color: #323233;
+  background-color: #fff;
+  border: 1upx solid $color-border;
+  padding: $h-gap-md $v-gap-md;
+  font-size: $font-md;
+  cursor: pointer;
+  transition: all 150ms;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+	border-radius: 10upx;
+	&.sm {
+		padding: $h-gap-sm $v-gap-sm;
+		font-size: $font-sm;
+	}
+	&.lg {
+		padding: $h-gap-lg $v-gap-lg;
+		font-size: $font-lg;
+	}
+	&.active {
+		background-color: $bg-active;
+		border-color: $bg-active;
+	}
+	&.primary {
+		background-color: $color-primary;
+		border-color: $color-primary;
+		color: #FFF;
+		&.active {
+			background-color: darken($color-primary, 3%);
+			border-color: darken($color-primary, 3%);
+		}
+	}
+	&.secondary {
+		background-color: lighten($color-primary, 40%);
+		border-color: lighten($color-primary, 40%);
+		color: $color-primary;
+		&.active {
+			background-color: lighten($color-primary, 30%);
+			border-color: lighten($color-primary, 30%);
+			color: darken($color-primary, 3%);
+		}
+	}
+	&.link {
+		padding: $h-gap-sm $v-gap-sm;
+		background: inherit;
+		border: inherit;
+		color: $color-primary;
+		&.active {
+			color: darken($color-primary, 5%);
+		}
+	}
+	&.disabled {
+		border-color: $bg-disabled;
+		background-color: $bg-disabled;
+		color: $color-disabled;
+		cursor: not-allowed;
+		&.active {
+			border-color: $bg-disabled;
+			background-color: $bg-disabled;
+		}
+	}
+	&.round {
+		border-radius: 48upx;
+	}
+	&.square {
+		border-radius: 0upx;
+	}
+}
\ No newline at end of file
diff --git a/components/button/index.vue b/components/button/index.vue
new file mode 100644
index 0000000..5e77b61
--- /dev/null
+++ b/components/button/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <view class="zui-button" hover-class="active" :class="classRender" :style="style" @click="onClick">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'zui-button',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    },
+    size: {
+      type: String,
+      default: 'md'
+    },
+    block: {
+      type: Boolean,
+      default: false
+    },
+    round: Boolean,
+    square: Boolean,
+    disabled: Boolean,
+  },
+  computed: {
+    style: function() {
+      return `display: ${this.block ? '' : 'inline-block'};` ;
+    },
+    classRender: function() {
+      return [this.size, this.disabled ? 'disabled' : '', this.block ? 'block' : '', this.type, this.round ? 'round' : '', this.square ? 'square' : ''];
+    }
+  },
+  methods: {
+    onClick: function() {
+      if (!this.disabled) {
+        this.$emit('click');
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "./index.scss";
+</style>
\ No newline at end of file
diff --git a/components/cell/index.scss b/components/cell/index.scss
new file mode 100644
index 0000000..1a799d2
--- /dev/null
+++ b/components/cell/index.scss
@@ -0,0 +1,52 @@
+.zui-cell {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  padding: $h-gap-lg $v-gap-md;
+	border-bottom: 1upx solid $color-border;
+  overflow: hidden;
+  background-color: #fff;
+	&--clickable {
+		cursor: pointer;
+		transition: background-color 150ms;
+		&.active {
+			background-color: $bg-active;
+		}
+	}
+	&__left-icon, &__right-icon {
+		display: flex;
+		align-items: center;
+		font-size: 42upx;
+	}
+	&__left-icon {
+		margin-left: $v-gap-sm;
+	}
+	&__right-icon {
+		margin-left: $v-gap-sm;
+		color: $color-disabled;
+	}
+	&__title, &__value {
+		flex: 1;
+		display: flex;
+	}
+	&__title {
+	  flex-direction: column;
+	  justify-content: center;
+	}
+	&__value {
+	  align-items: center;
+	  justify-content: flex-end;
+		position: relative;
+		overflow: hidden;
+		color: $color-minor;
+		text-align: right;
+		vertical-align: middle;
+		word-wrap: break-word;
+	}
+	&__label {
+		padding-top: $h-gap-sm;
+		color: $color-minor;
+		font-size: $font-sm;
+	}
+}
diff --git a/components/cell/index.vue b/components/cell/index.vue
new file mode 100644
index 0000000..317b3cd
--- /dev/null
+++ b/components/cell/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <view class="zui-cell" hover-class="active" :class="classRender" @click="onClick">
+    <view v-if="$slots.icon || icon" class="zui-cell__left-icon">
+      <slot v-if="$slots.icon" name="icon"></slot>
+      <zui-icon v-else-if="icon" class="zui-cell__left-icon" :name="icon"></zui-icon>
+    </view>
+    <view v-if="$slots.title" class="zui-cell__title">
+      <slot name="title"></slot>
+      <view v-if="$slots.label" class="zui-cell__label">
+        <slot name="label"></slot>
+      </view>
+      <view v-else-if="label" class="zui-cell__label">
+        <text>{{ label }}</text>
+      </view>
+    </view>
+    <view v-else-if="title" class="zui-cell__title">
+      <text>{{ title }}</text>
+      <view v-if="$slots.label" class="zui-cell__label">
+        <slot name="label"></slot>
+      </view>
+      <view v-else-if="label" class="zui-cell__label">
+        <text>{{ label }}</text>
+      </view>
+    </view>
+    <view v-if="$slots.default" class="zui-cell__value">
+      <slot></slot>
+    </view>
+    <view v-else-if="value" class="zui-cell__value">{{ value }}</view>
+    <view v-if="$slots.right || rightIcon" class="zui-cell__right-icon">
+      <slot v-if="$slots.right" name="right"></slot>
+      <zui-icon v-else-if="rightIcon && isLink" :name="rightIcon"></zui-icon>
+    </view>
+  </view>
+</template>
+
+<script>
+import ZuiIcon from '@/components/zui/icon';
+
+export default {
+  name: "zui-cell",
+	components: {
+		ZuiIcon
+	},
+  props: {
+    icon: String,
+    title: String,
+    value: String,
+    label: String,
+    isLink: Boolean,
+    rightIcon: {
+      type: String,
+      default: "enter"
+    }
+  },
+  computed: {
+    classRender: function() {
+      return [this.isLink ? 'zui-cell--clickable' : ''];
+    }
+  },
+  methods: {
+    onClick: function() {
+      if (this.$listeners["click"]) {
+        this.$emit("click");
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "./index.scss";
+</style>
\ No newline at end of file
diff --git a/components/icon/index.scss b/components/icon/index.scss
new file mode 100644
index 0000000..c3d33a0
--- /dev/null
+++ b/components/icon/index.scss
@@ -0,0 +1,31 @@
+.zui-icon {
+  position: relative;
+  display: inline-block;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+}
+
+.zui-info {
+  position: absolute;
+  top: 0;
+  right: 0;
+  box-sizing: border-box;
+  min-width: 32upx;
+  padding: 0 4upx;
+  color: #fff;
+  font-weight: 500;
+  font-size: 20upx;
+  font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
+  line-height: 1.5;
+  text-align: center;
+  background-color: $color-error;
+  border: 1upx solid #fff;
+  border-radius: 1rem;
+  transform: translate(50%, -50%);
+  transform-origin: 100%;
+	&.dot {
+		height: 24upx;
+		width: 24upx;
+		min-width: 24upx !important;
+	}
+}
diff --git a/components/icon/index.vue b/components/icon/index.vue
new file mode 100644
index 0000000..6c6d165
--- /dev/null
+++ b/components/icon/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <view class="zui-icon" :class="classRender" :style="styleRender">
+    <view v-if="info || dot" class="zui-info" :class="dot ? 'dot' : ''">{{ dot ? '' : info }}</view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'zui-icon',
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+    fontFamily: {
+      type: String,
+      default: 'iconfont',
+    },
+    classPrefix: {
+      type: String,
+      default: 'icon-'
+    },
+    size: String,
+    color: String,
+    info: [Number, String],
+    dot: Boolean,
+  },
+  computed: {
+    classRender: function() {
+      var fontFamily = this.fontFamily || '';
+      var iconClass = this.classPrefix + this.name;
+      return [fontFamily, iconClass];
+    },
+    styleRender: function() {
+			return `${this.size ? `font-size: ${this.size};` : ''} ${this.color ? `color: ${this.color}` : ''};`;
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+@import "./index.scss";
+</style>
\ No newline at end of file
diff --git a/components/loading/index.scss b/components/loading/index.scss
new file mode 100644
index 0000000..0b37b44
--- /dev/null
+++ b/components/loading/index.scss
@@ -0,0 +1,126 @@
+.zui-loading {
+  color: $color-minor;
+  display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	&__spinner {
+		position: relative;
+		display: inline-block;
+		width: 50upx;
+		max-width: 100%;
+		height: 50upx;
+		max-height: 100%;
+		vertical-align: middle;
+		animation: zui-rotate 0.8s linear infinite;
+		&--spinner {
+			animation-timing-function: steps(12);
+			.zui-loading__dot {
+			  position: absolute;
+			  top: 0;
+			  left: 0;
+			  width: 100%;
+			  height: 100%;
+				&::before {
+					display: block;
+					width: 2upx;
+					height: 25%;
+					margin: 0 auto;
+					background-color: currentColor;
+					border-radius: 40%;
+					content: ' ';
+				}
+				&:nth-of-type(1) {
+				  transform: rotate(30deg);
+				  opacity: 1;
+				}
+				&:nth-of-type(2) {
+				  transform: rotate(60deg);
+				  opacity: 0.9375;
+				}
+				&:nth-of-type(3) {
+				  transform: rotate(90deg);
+				  opacity: 0.875;
+				}
+				&:nth-of-type(4) {
+				  transform: rotate(120deg);
+				  opacity: 0.8125;
+				}
+				&:nth-of-type(5) {
+				  transform: rotate(150deg);
+				  opacity: 0.75;
+				}
+				&:nth-of-type(6) {
+				  transform: rotate(180deg);
+				  opacity: 0.6875;
+				}
+				&:nth-of-type(7) {
+				  transform: rotate(210deg);
+				  opacity: 0.625;
+				}
+				&:nth-of-type(8) {
+				  transform: rotate(240deg);
+				  opacity: 0.5625;
+				}
+				&:nth-of-type(9) {
+				  transform: rotate(270deg);
+				  opacity: 0.5;
+				}
+				&:nth-of-type(10) {
+				  transform: rotate(300deg);
+				  opacity: 0.4375;
+				}
+				&:nth-of-type(11) {
+				  transform: rotate(330deg);
+				  opacity: 0.375;
+				}
+				&:nth-of-type(12) {
+				  transform: rotate(360deg);
+				  opacity: 0.3125;
+				}
+			}
+		}
+		&--circular {
+			border: 1upx solid transparent;
+			border-top-color: currentColor;
+			border-radius: 100%;
+		}
+	}
+	&__text {
+		margin-left: $v-gap-sm;
+		color: $color-minor;
+		font-size: $font-md;
+	}
+	&--vertical {
+		flex-direction: column;
+		.zui-loading__text {
+		  margin: $h-gap-sm 0 0;
+		}
+	}
+}
+
+@keyframes zui-circular {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -40;
+  }
+
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120;
+  }
+}
+
+@keyframes zui-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/components/loading/index.vue b/components/loading/index.vue
new file mode 100644
index 0000000..190c9d9
--- /dev/null
+++ b/components/loading/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <view :class="classRender">
+    <view
+      :class="innerClassRender"
+      :style="styleRender"
+    >
+			<template v-if="type === 'spinner'">
+				<view
+					v-for="index in 12"
+					:key="index"
+				  class="zui-loading__dot"
+				/>
+			</template>
+    </view>
+    <view class="zui-loading__text" :style="textSizeRender">
+      <slot v-if="$slots.default"></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'zui-loading',
+  props: {
+    color: String,
+    size: {
+      type: [Number, String],
+      default: '2rem'
+    },
+    vertical: Boolean,
+    textSize: [Number, String],
+    type: {
+      type: String,
+      default: 'circular',
+    },
+  },
+  computed: {
+		classRender: function() {
+			return ['zui-loading',	this.type ? `zui-loading--${this.type}` : '',	this.vertical ? 'zui-loading--vertical' : ''];
+		},
+		innerClassRender: function() {
+			return ['zui-loading__spinner', `zui-loading__spinner--${this.type}`];
+		},
+    styleRender: function() {
+			const iconSize = typeof this.textSize === 'number' ? this.textSize + 'px' : this.textSize;
+      return `color: ${this.color}; width: ${iconSize}; height: ${iconSize}`;
+    },
+		textSizeRender: function() {
+			return `font-size: ${this.textSize}${typeof this.textSize === 'number' ? 'px' : ''};`;
+		}
+  }
+};
+</script>
+
+<style lang="scss">
+@import "./index.scss";
+</style>
\ No newline at end of file
diff --git a/components/tag/index.scss b/components/tag/index.scss
new file mode 100644
index 0000000..e464e29
--- /dev/null
+++ b/components/tag/index.scss
@@ -0,0 +1,68 @@
+.zui-tag {
+  font-size: $font-sm;
+  text-align: center;
+  display: inline-block;
+  -webkit-user-select: none;
+	.default {
+		background: rgba(0,0,0,0);
+		color: $color-error;
+		border-color: $color-error;
+	}
+	.shape-dot {
+		border-radius: 50%;
+		height: 32upx;
+		width: 32upx;
+		&.size-tiny {
+			height: 16upx;
+			width: 16upx;
+		}
+	}
+	.shape-square {
+		padding: 0 $v-gap-sm;
+		border-radius: 0;
+	}
+	.shape-fillet {
+		padding: $h-gap-sm $v-gap-sm;
+	}
+	.shape-bubble {
+		width: 50upx;
+		padding: 7upx 0;
+		border-radius: 50%;
+		border-bottom-left-radius: 0;
+		box-sizing: border-box;
+		&.size-small {
+		  width: 40upx;
+		  padding: 5upx 0;
+		}
+		&.size-tiny {
+		  width: 30upx;
+		  padding: 2upx 0;
+		}
+	}
+	.type-fill {
+	  color: #fff;
+	}
+	.type-ghost {
+	  border: 1px solid $color-error;
+	  background: rgba(0,0,0,0);
+	}
+	.font-weight-normal {
+	  font-weight: normal;
+	}
+	.font-weight-bold {
+	  font-weight: bold;
+	}
+	.font-weight-bolder {
+	  font-weight: bolder;
+	}
+	.size-large {
+	  font-size: $font-md;
+	}
+	.size-small {
+	  font-size: $font-sm;
+	}
+	.size-tiny {
+	  font-size: $font-sm * 0.9;
+	}
+}
+
diff --git a/components/tag/index.vue b/components/tag/index.vue
new file mode 100644
index 0000000..5b92bf7
--- /dev/null
+++ b/components/tag/index.vue
@@ -0,0 +1,161 @@
+<template>
+  <view class="zui-tag">
+    <template v-if="showQuarter">
+      <view :class="computedClass">
+        <view class="quarter-content">
+          <slot></slot>
+        </view>
+        <view class="quarter-bg" :style="colorStyle"></view>
+      </view>
+    </template>
+    <template v-else-if="showCoupon">
+      <view :class="computedClass">
+        <view class="coupon-container" :style="colorStyle">
+          <view class="left-coupon" :style="leftCoupon" v-if="showCoupon"></view>
+          <slot></slot>
+          <view class="right-coupon" :style="rightCoupon" v-if="showCoupon"></view>
+        </view>
+      </view>
+    </template>
+    <template v-else>
+      <view :class="computedClass" :style="[colorStyle, sizeStyle]">
+        <slot></slot>
+      </view>
+    </template>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "Tag",
+  props: {
+    size: {
+      type: String, // tiny, small, large
+      default: "large"
+    },
+    shape: {
+      // square, circle, fillet, quarter, coupon, bubble
+      type: String,
+      default: "square"
+    },
+    sharp: {
+      // top-left, top-right, bottom-left, bottom-right
+      type: String,
+      default: ""
+    },
+    type: {
+      // fill ghost
+      type: String,
+      default: "ghost"
+    },
+    fillColor: {
+      type: String,
+      default: ""
+    },
+    fontWeight: {
+      // normal, bold, bolder
+      type: String,
+      default: "normal"
+    },
+    fontColor: {
+      type: String,
+      default: ""
+    },
+    dotSize: String,
+    radius: String,
+  },
+  data: function() {
+    return {
+      sizeStyle: {}
+    };
+  },
+  mounted: function() {
+    this.$nextTick(function() {
+      if (this.shape == "circle") {
+        var radius = this.$el.offsetHeight / 2;
+        this.$set(this.sizeStyle, "paddingLeft", radius / 2 + "px");
+        this.$set(this.sizeStyle, "paddingRight", radius / 2 + "px");
+        this.$set(this.sizeStyle, "borderRadius", radius + "px");
+        if (this.sharp) {
+          this.$set(
+            this.sizeStyle,
+            this.transformCamelCase("border-" + this.sharp + "-radius"),
+            0
+          );
+        }
+      }
+    });
+  },
+  computed: {
+    computedClass: function() {
+      return [
+        "default",
+        "size-" + this.size,
+        "shape-" + this.shape,
+        "type-" + this.type,
+        "font-weight-" + this.fontWeight
+      ];
+    },
+    colorStyle: function() {
+      var style = {};
+      if (this.type == "fill") {
+        // eslint-disable-next-line
+        style.background = this.fillColor || '#ff5151';
+      }
+      if (this.shape == 'dot') {
+        style.height = this.dotSize;
+        style.width = this.dotSize;
+        style.display = 'flex';
+        style.alignItems = 'center';
+        style.justifyContent = 'center';
+      }
+      if (this.fontColor) {
+        if (this.type == "ghost") {
+          style.borderColor = this.fontColor;
+        }
+        style.color = this.fontColor;
+      }
+      if (this.radius) {
+        style.borderRadius = this.radius;
+      }
+      return style;
+    },
+    leftCoupon: function() {
+      return {
+        background: this.fillColor
+          ? "radial-gradient(circle at left, transparent 33%, " +
+            this.fillColor +
+            " 33%)"
+          : ""
+      };
+    },
+    rightCoupon: function() {
+      return {
+        background: this.fillColor
+          ? "radial-gradient(circle at right, transparent 33%, " +
+            this.fillColor +
+            " 33%)"
+          : ""
+      };
+    },
+    showQuarter: function() {
+      return this.shape == "quarter";
+    },
+    showCoupon: function() {
+      return this.shape == "coupon";
+    }
+  },
+  methods: {
+    transformCamelCase: function(str) {
+      var re = /-(\w)/g;
+      return str.replace(re, function($0, $1) {
+        return $1.toUpperCase();
+      });
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+@import "./index.scss";
+</style>
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..c1db183
--- /dev/null
+++ b/index.js
@@ -0,0 +1,15 @@
+import Amount from './components/amount';
+import Button from './components/button';
+import Cell from './components/cell';
+import Icon from './components/icon';
+import Loading from './components/loading';
+import Tag from './components/tag';
+
+export default {
+  Amount,
+  Button,
+  Cell,
+  Icon,
+  Loading,
+  Tag
+};
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..21e3c4d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "zui-uniapp",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "git@114.55.84.72:frontend/zui-uniapp.git",
+  "author": "刘汉宸 <liuhanchen@zeyihuoyun.com>",
+  "license": "MIT",
+  "private": true
+}
--
libgit2 0.21.0