diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..29c17fb
Binary files /dev/null and b/.DS_Store differ
diff --git a/App.vue b/App.vue
index dfd64d1..5335acd 100644
--- a/App.vue
+++ b/App.vue
@@ -5,7 +5,12 @@ const userStore = useUserStore();
 onLaunch(() => {
     console.log('App Launch');
     let openId = uni.getStorageSync('openId') || ''; // 同步获取 缓存信息
-
+    uni.onTabBarMidButtonTap(() => {
+        console.log(123);
+        uni.navigateTo({
+            url: '/pages/login/login',
+        });
+    });
     if (openId) {
         console.log('有openid');
     } else {
diff --git a/common/common.css b/common/common.css
index 8bd8596..ffc9efa 100644
--- a/common/common.css
+++ b/common/common.css
@@ -1,10 +1,8 @@
 /* 公共样式表 */
 page {
-    height: 100%;
     min-height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
     font-size: 28rpx;
     background-color: #f4f4f4;
-    /* line-height: 1.8; */
     color: #333333;
     overflow: hidden;
 }
@@ -178,67 +176,71 @@ html {
 
 /* 控制左右距离 */
 .mar_le30 {
-    margin-left: 60rpx;
+    margin-left: 60rpx !important;
 }
 
 .mar_le25 {
-    margin-left: 50rpx;
+    margin-left: 50rpx !important;
 }
 
 .mar_le20 {
-    margin-left: 40rpx;
+    margin-left: 40rpx !important;
 }
 
 .mar_le15 {
-    margin-left: 30rpx;
+    margin-left: 30rpx !important;
 }
 
 .mar_le10 {
-    margin-left: 20rpx;
+    margin-left: 20rpx !important;
 }
 
 .mar_le5 {
-    margin-left: 10rpx;
+    margin-left: 10rpx !important;
 }
 
 .mar_ri5 {
-    margin-right: 10rpx;
+    margin-right: 10rpx !important;
 }
 
 .mar_ri10 {
-    margin-right: 20rpx;
+    margin-right: 20rpx !important;
 }
 
 .mar_ri15 {
-    margin-right: 30rpx;
+    margin-right: 30rpx !important;
 }
 
 .mar_ri20 {
-    margin-right: 40rpx;
+    margin-right: 40rpx !important;
 }
 
 .mar_ri25 {
-    margin-right: 50rpx;
+    margin-right: 50rpx !important;
+}
+
+.mar_top0 {
+    margin-top: 0 !important;
 }
 
 .mar_top5 {
-    margin-top: 10rpx;
+    margin-top: 10rpx !important;
 }
 
 .mar_top10 {
-    margin-top: 20rpx;
+    margin-top: 20rpx !important;
 }
 
 .mar_top15 {
-    margin-top: 30rpx;
+    margin-top: 30rpx !important;
 }
 
 .mar_top20 {
-    margin-top: 40rpx;
+    margin-top: 40rpx !important;
 }
 
 .mar_top25 {
-    margin-top: 50rpx;
+    margin-top: 50rpx !important;
 }
 
 /* 控制字体粗细  */
@@ -306,4 +308,21 @@ html {
 
 .fl_alend {
     align-items: flex-end;
+}
+
+.fl_1 {
+    flex: 1;
+}
+
+.line_2 {
+    display: -webkit-box;
+    /* 让文本内容成为弹性盒 */
+    -webkit-box-orient: vertical;
+    /* 设置盒子的方向为垂直 */
+    -webkit-line-clamp: 2;
+    /* 限制最多显示两行 */
+    overflow: hidden;
+    /* 隐藏超出的文本 */
+    text-overflow: ellipsis;
+    /* 使用省略号 */
 }
\ No newline at end of file
diff --git a/components/.DS_Store b/components/.DS_Store
new file mode 100644
index 0000000..21408ac
Binary files /dev/null and b/components/.DS_Store differ
diff --git a/components/bing-progress.zip b/components/bing-progress.zip
new file mode 100644
index 0000000..b8d5c3c
Binary files /dev/null and b/components/bing-progress.zip differ
diff --git a/components/bing-progress/bing-progress.css b/components/bing-progress/bing-progress.css
new file mode 100644
index 0000000..a5c5652
--- /dev/null
+++ b/components/bing-progress/bing-progress.css
@@ -0,0 +1,67 @@
+.bing-progress {
+	position: relative;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-around;
+}
+.bp-marea {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	position: absolute;
+	left: 0;
+	top: 0;
+	flex-direction: row;
+	align-items: center;
+	text-align: center;
+	justify-content: space-around;
+	background-color: rgba(0,0,0,0);
+	z-index: 6;
+}
+.bp-mview,
+.bp-handle {
+	position: absolute;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	align-items: center;
+	text-align: center;
+	justify-content: center;
+	z-index: 5;
+}
+.bp-handle-text {
+	text-align: center;
+	z-index: 5;
+}
+.bp-bar_max {
+	position: absolute;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	align-items: center;
+	margin: 0;
+	padding: 0;
+	z-index: 1;
+	overflow: hidden;
+}
+.bp-bar_active {
+	position: absolute;
+	z-index: 3;
+}
+.bp-bar_sub_active {
+	position: absolute;
+	z-index: 2;
+}
+.bp-value {
+	position: absolute;
+	text-align: center;
+	z-index: 4;
+}
+.bp-handle-widget {
+	position: absolute;
+	z-index: 99;
+}
diff --git a/components/bing-progress/bing-progress.vue b/components/bing-progress/bing-progress.vue
new file mode 100644
index 0000000..af59d4c
--- /dev/null
+++ b/components/bing-progress/bing-progress.vue
@@ -0,0 +1,868 @@
+<template>
+	<view class="bing-progress" :style="{width:bpWidth,height:bpHeight,borderRadius:borderRadius,
+	backgroundColor:backgroundColor,flexDirection:direction!='vertical'?'row':'column'}">
+		<!-- 进度 -->
+		<!-- #ifdef APP-NVUE -->
+		<div class="bp-bar_max"
+		:style="{width:barMaxWidth,height:barMaxHeight,backgroundColor:noActiveColor,
+		flexDirection:direction!='vertical'?'row':'column',left:barMaxLeft,borderRadius:barBorderRadius}">
+			<div class="bp-bar_sub_active"
+			:style="{width:barSubActiveWidth,height:barSubActiveHeight,backgroundColor:subActiveColor,
+			top:subActiveTop,bottom:subActiveBottom,left:subActiveLeft,right:subActiveRight,borderRadius:isActiveCircular?barBorderRadius:0}"></div>
+			<div class="bp-bar_active"
+			:style="{width:barActiveWidth,height:barActiveHeight,backgroundColor:activeColor,
+			top:activeTop,bottom:activeBottom,left:activeLeft,right:activeRight,borderRadius:isActiveCircular?barBorderRadius:0}"></div>
+		</div>
+		<!-- #endif -->
+		<!-- #ifndef APP-NVUE -->
+		<view class="bp-bar_max"
+		:style="{width:barMaxWidth,height:barMaxHeight,backgroundColor:noActiveColor,borderRadius:barBorderRadius,
+		flexDirection:direction!='vertical'?'row':'column',left:barMaxLeft}">
+			<view class="bp-bar_sub_active"
+			:style="{width:barSubActiveWidth,height:barSubActiveHeight,backgroundColor:subActiveColor,
+			top:subActiveTop,bottom:subActiveBottom,left:subActiveLeft,right:subActiveRight,borderRadius:isActiveCircular?barBorderRadius:0}"></view>
+			<view class="bp-bar_active"
+			:style="{width:barActiveWidth,height:barActiveHeight,backgroundColor:activeColor,
+			top:activeTop,bottom:activeBottom,left:activeLeft,right:activeRight,borderRadius:isActiveCircular?barBorderRadius:0}"></view>
+		</view>
+		<!-- #endif -->
+		<movable-area id="bp-marea" class="bp-marea" @touchmove.stop.prevent="touchmove" @touchstart.stop.prevent="touchstart" @touchcancel="touchend" @touchend="touchend"
+		:style="{width:mareaWidth,height:mareaHeight,left:mareaLeft}">
+			<!-- 拖柄 -->
+			<movable-view id="bp-mview" class="bp-mview" :direction="direction=='vertical'?'vertical':'horizontal'" :animation="false"
+			 :disabled="true" :x="handleX" :y="handleY" friction="10" damping="100"
+			:style="{width:mhandleWidth,height:mhandleHeight,backgroundColor:handleColor,
+			borderRadius:handleBorderRadius,fontSize:infoFontSize,top:mhandleTop}">
+				<view id="bp-handle" class="bp-handle" :style="{fontSize:infoFontSize,width:mhandleWidth,height:mhandleHeight,borderRadius:handleBorderRadius}">
+					<image class="bp-handle-img" :src="handleImgUrl" v-if="handleImgUrl" 
+					:style="{fontSize:infoFontSize,width:mhandleWidth,height:mhandleHeight,borderRadius:handleBorderRadius}"></image>
+					<!-- 进度值 -->
+					<text class="bp-handle-text" v-if="handleImgUrl=='' && infoAlign=='handle' && showInfo" 
+					:style="{fontSize:infoFontSize,color:infoColor,width:mhandleWidth,height:textHeight,borderRadius:'20px'}">{{ infoContent=='subValue'?msubValue:showValue }}{{ infoEndText }}</text>
+					<!-- 挂件 -->
+					<!-- #ifndef APP-NVUE -->
+					<!-- 图片挂件 -->
+					<image v-if="widgetPos=='top' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius, bottom: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
+					<image v-if="widgetPos=='right' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,left: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
+					<image v-if="widgetPos=='bottom' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius,top: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
+					<image v-if="widgetPos=='left' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,right: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
+					<!-- 自定义元素挂件 -->
+					<view v-if="widgetPos=='top' && widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius,bottom: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
+						<slot/>
+					</view>
+					<view v-if="widgetPos=='right' &&  widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,left: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
+						<slot/>
+					</view>
+					<view v-if="widgetPos=='bottom' && widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius,top: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
+						<slot/>
+					</view>
+					<view v-if="widgetPos=='left' && widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,right: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
+						<slot/>
+					</view>
+					<!-- #endif -->
+				</view>
+			</movable-view>
+		</movable-area>
+		<!-- 进度值 -->
+		<text class="bp-value" v-if="showValueState() || (infoAlign=='center'&&direction!='vertical' && showInfo)" 
+		:style="{color:infoColor,fontSize:infoFontSize,left:valueLeft,width:valueWidth()+'px'}">{{ infoContent=='subValue'?msubValue:showValue }}{{ infoEndText }}</text>
+	</view>
+</template>
+
+<script>
+	/**
+	 * 进度条，副进度条
+	 */
+	export default {
+		created() {
+			/**
+			 * 获取系统屏幕信息，用于后续单位换算
+			 */
+			const systemInfo = uni.getSystemInfoSync()
+			this.px2rpx = 750 / systemInfo.screenWidth
+			this.screenWidth = systemInfo.screenWidth
+			this.screenHeight = systemInfo.screenHeight
+		},
+		mounted() {
+			// #ifndef APP-NVUE
+			/**
+			 * 非NVUE movable-area 滑动事件获取到的位置是相对于文档的，获取组件位置，用于计算滑块位置
+			 */
+			this.updateRect()
+			// #endif
+			this.mmax = this.valueFormat(this.max,false)
+			this.percent = Math.abs((this.valueFormat(this.value) - this.min) / (this.mmax - this.min))
+			this.subPercent = Math.abs((this.valueFormat(this.subValue,true) - this.min) / (this.mmax - this.min))
+			if(this.reverse) {
+				if(this.direction!='vertical') {
+					this.handleX = (1 - this.percent) * this.barMaxLength
+				}
+				else {
+					this.handleY = this.percent * this.barMaxLength
+				}
+			}
+			else {
+				if(this.direction!='vertical') {
+					this.handleX = this.percent * this.barMaxLength
+				}
+				else {
+					this.handleY = (1 - this.percent) * this.barMaxLength
+				}
+			}
+			if(this.bpname=='test') {
+				console.log(this.mainInfo)
+			}
+		},
+		/**
+		 * sub表示副进度条属性
+		 */
+		props: {
+			// 组件名字
+			bpname: {
+				type: String,
+				default: ''
+			},
+			width: {
+				type: String,
+				default: '300px'
+			},
+			strokeWidth: {
+				type: String,
+				default: '30px'
+			},
+			backgroundColor: {
+				type: String,
+				default: 'rgba(0,0,0,0)'
+			},
+			noActiveColor: {
+				type: String,
+				default: "#00ffff"
+			},
+			activeColor: {
+				type: String,
+				default: "#0000ff"
+			},
+			subActiveColor: {
+				type: String,
+				default: "#ffaaaa"
+			},
+			handleColor: {
+				type: String,
+				default: "#ffff00"
+			},
+			infoColor: {
+				type: String,
+				default: "#000000"
+			},
+			// 整个进度条的外边界圆角半径
+			borderRadius: {
+				type: String,
+				default: '5px'
+			},
+			// 进度条内部滑轨圆角半径
+			barBorderRadius: {
+				type: String,
+				default: '5px'
+			},
+			// active and subActive 是否显示圆角 NVUE默认true，其他默认false
+			// #ifdef APP-NVUE
+			isActiveCircular: {
+				type: Boolean,
+				default: true
+			},
+			// #endif
+			// #ifndef APP-NVUE
+			isActiveCircular: {
+				type: Boolean,
+				default: false
+			},
+			// #endif
+			handleWidth: {
+				type: String,
+				default: '50px'
+			},
+			handleHeight: {
+				type: String,
+				default: '40px'
+			},
+			handleBorderRadius: {
+				type: String,
+				default: '5px'
+			},
+			handleImgUrl: {
+				type: String,
+				default: ''
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			direction: {
+				type: String,
+				default: 'horizontal'
+			},
+			infoEndText: {
+				type: String,
+				default: ""
+			},
+			infoFontSize: {
+				type: String,
+				default: '18px'
+			},
+			showInfo: {
+				type: Boolean,
+				default: true
+			},
+			// 进度值显示value还是subValue
+			infoContent: {
+				type: String,
+				default: 'value'
+			},
+			// 进度值显示位置 left, right, center, handle
+			infoAlign: {
+				type: String,
+				default: 'right'
+			},
+			max: {
+				type: Number,
+				default: 100
+			},
+			min: {
+				type: Number,
+				default: 0
+			},
+			value: {
+				type: Number,
+				default: 0
+			},
+			subValue: {
+				type: Number,
+				default: 0
+			},
+			step: {
+				type: Number,
+				default: 1
+			},
+			// 副进度条步长
+			subStep: {
+				type: Number,
+				default: 1
+			},
+			// true连续滑动，false步进，即以step的间隔变化
+			continuous: {
+				type: Boolean,
+				default: true
+			},
+			// 副进度条continuous
+			subContinuous: {
+				type: Boolean,
+				default: true
+			},
+			reverse: {
+				type: Boolean,
+				default: false
+			},
+			// 挂件位置 top, right, bottom, left
+			widgetPos: {
+				type: String,
+				default: "top"
+			},
+			widgetHeight: {
+				type: [String,Number],
+				default: '40px'
+			},
+			widgetWidth: {
+				type: [String,Number],
+				default: '50px'
+			},
+			widgetBorderRadius: {
+				type: [String,Number],
+				default: '5px'
+			},
+			// 挂件不透明度 0完全透明 1不透明
+			widgetOpacity: {
+				type: [String,Number],
+				default: 1
+			},
+			// 挂件距离组件的偏移量，正数原理组件，负数靠近组件
+			widgetOffset: {
+				type: [String,Number],
+				default: '0px'
+			},
+			// 挂件图片
+			widgetUrl: {
+				type: String,
+				default: ''
+			},
+			// 挂件旋转角度
+			widgetAngle: {
+				type: [String,Number],
+				default: 0
+			}
+		},
+		data() {
+			return {
+				handleX: 50,
+				handleY: 0,
+				px2rpx: 1,
+				percent: 0, // 0-1
+				subPercent: 0, // 0-1
+				mainInfo: {
+					left: 0,
+					top: 0,
+					bottom: 0,
+					right: 0
+				},
+				touchState: false,
+				screenHeight: 0,
+				screenWidth: 0,
+				msubValue: 0,
+				moveable: true,
+				lastTouchTime: 0,
+				mmax: 100
+			}
+		},
+		watch: {
+			/**
+			 * @param {Object} newValue
+			 * @param {Object} oldValue
+			 */
+			value(newValue, oldValue) {
+				if(!this.touchState) {
+					newValue = this.valueSetBoundary(newValue)
+					this.percent = Math.abs((newValue - this.min) / (this.mmax - this.min))
+				}
+			},
+			showValue(newValue, oldValue) {
+				// 步进
+				if(!this.continuous) {
+					let percent
+					if(this.reverse) {
+						if(this.direction!='vertical') {
+							percent = Math.abs(1 - (newValue - this.min) / (this.mmax - this.min))
+							this.handleX = percent * this.barMaxLength
+						}
+						else {
+							percent = Math.abs((newValue - this.min) / (this.mmax - this.min))
+							this.handleY = percent * this.barMaxLength
+						}
+					}
+					else {
+						if(this.direction!='vertical') {
+							percent = Math.abs((newValue - this.min) / (this.mmax - this.min))
+							this.handleX = percent * this.barMaxLength
+						}
+						else {
+							percent = (1 - Math.abs((newValue - this.min) / (this.mmax - this.min)))
+							this.handleY = percent * this.barMaxLength
+						}
+					}
+					
+				}
+				this.$emit("change", {bpname: this.bpname,type: 'change',value:this.showValue,subValue:this.msubValue})
+				this.$emit("valuechange", {bpname: this.bpname,type: 'valuechange',value:this.showValue,subValue:this.msubValue})
+			},
+			percent(newValue, oldValue) {
+				// 连续
+				if(this.continuous) {
+					if(this.reverse) {
+						if(this.direction!='vertical') {
+							this.handleX = (1 - newValue) * this.barMaxLength
+						}
+						else {
+							this.handleY = newValue * this.barMaxLength
+						}
+					}
+					else {
+						if(this.direction!='vertical') {
+							this.handleX = newValue * this.barMaxLength
+						}
+						else {
+							this.handleY = (1 - newValue) * this.barMaxLength
+						}
+					}
+				}
+			},
+			subValue(newValue, oldValue) {
+				newValue = this.valueSetBoundary(newValue)
+				
+				if(this.subContinuous) {
+					this.msubValue = newValue
+				}
+				else {
+					this.msubValue = this.valueFormat(newValue, true)
+				}
+				this.subPercent = Math.abs((newValue - this.min) / (this.mmax - this.min))
+				this.$emit("change", {bpname: this.bpname,type: 'change',value:this.showValue,subValue:this.msubValue})
+				this.$emit("subvaluechange", {bpname: this.bpname,type: 'subvaluechange',value:this.showValue,subValue:this.msubValue})
+				
+			},
+			max(newValue,oldValue) {
+				this.mmax = this.valueFormat(newValue,false)
+			}
+		},
+		computed: {
+			bpWidth() {
+				if(this.direction=="vertical") {
+					return this.maxHeight()[2]
+				}
+				return this.sizeDeal(this.width)[2]
+			},
+			bpHeight() {
+				if(this.direction=="vertical") {
+					return this.sizeDeal(this.width)[2]
+				}
+				return this.maxHeight()[2]
+			},
+			mareaWidth() {
+				if(this.direction=="vertical") {
+					return this.maxHeight()[2]
+				}
+				let width = this.sizeDeal(this.width)[0]
+				return (width - this.textWidth()) + 'px'
+			},
+			mareaHeight() {
+				if(this.direction=="vertical") {
+					let width = this.sizeDeal(this.width)[0]
+					return (width - this.textWidth()) + 'px'
+				}
+				return this.maxHeight()[2]
+			},
+			mareaLeft() {
+				if(this.showValueState()) {
+					if(this.infoAlign == 'left') {
+						return this.textWidth() + 'px'
+					}
+				}
+				return 0
+			},
+			barMaxHeight() {
+				if(this.direction=="vertical") {
+					let width = this.sizeDeal(this.width)[0]
+					let handleWidth = this.sizeDeal(this.handleWidth)
+					return (width - this.textWidth() - handleWidth[0]) + 'px'
+				}
+				return this.sizeDeal(this.strokeWidth)[2]
+			},
+			barMaxWidth() {
+				if(this.direction=="vertical") {
+					return this.sizeDeal(this.strokeWidth)[2]
+				}
+				let width = this.sizeDeal(this.width)[0]
+				let handleWidth = this.sizeDeal(this.handleWidth)
+				return (width - this.textWidth() - handleWidth[0]) + 'px'
+			},
+			barMaxLeft() {
+				if(this.showValueState()) {
+					if(this.infoAlign == 'left') {
+						return this.textWidth() + this.sizeDeal(this.handleWidth)[0] / 2 + 'px'
+					}
+				}
+				if(this.direction != 'vertical') {
+					return this.sizeDeal(this.handleWidth)[0] / 2 + 'px'
+				}
+				// vertical
+				return (this.maxHeight()[0] - this.sizeDeal(this.strokeWidth)[0]) / 2 + 'px'
+				
+			},
+			activeRight() {
+				if(this.reverse) {
+					return 0
+				}
+				return 'unset'
+			},
+			activeLeft() {
+				if(this.reverse) {
+					return 'unset'
+				}
+				return 0
+			},
+			activeTop() {
+				if(this.reverse) {
+					return 0
+				}
+				return 'unset'
+			},
+			activeBottom() {
+				if(this.reverse) {
+					return 'unset'
+				}
+				return 0
+			},
+			barActiveWidth() {
+				if(this.direction=="vertical") {
+					return this.sizeDeal(this.strokeWidth)[2]
+				}
+				let percent
+				if(this.continuous) {
+					percent = this.percent
+				}
+				else {
+					percent = Math.abs((this.showValue - this.min) / (this.mmax - this.min))
+				}
+				return this.barMaxLength * percent + 'px'
+			},
+			barActiveHeight() {
+				if(this.direction=="vertical") {
+					let percent
+					if(this.continuous) {
+						percent = this.percent
+					}
+					else {
+						percent = Math.abs((this.showValue - this.min) / (this.mmax - this.min))
+					}
+					return this.barMaxLength * percent + 'px'
+				}
+				return this.sizeDeal(this.strokeWidth)[2]
+			},
+			subActiveTop() {
+				if(this.reverse) {
+					return 0
+				}
+				return 'unset'
+			},
+			subActiveBottom() {
+				if(this.reverse) {
+					return 'unset'
+				}
+				return 0
+			},
+			subActiveRight() {
+				if(this.reverse) {
+					return 0
+				}
+				return 'unset'
+			},
+			subActiveLeft() {
+				if(this.reverse) {
+					return 'unset'
+				}
+				return 0
+			},
+			barSubActiveWidth() {
+				if(this.direction == "vertical") {
+					return this.sizeDeal(this.strokeWidth)[2]
+				}
+				if(this.subContinuous) {
+					return this.barMaxLength * this.subPercent + 'px'
+				}
+				else {
+					return this.barMaxLength * Math.abs((this.msubValue - this.min) / (this.mmax - this.min)) + 'px'
+				}
+				
+			},
+			barSubActiveHeight() {
+				if(this.direction == "vertical") {
+					if(this.subContinuous) {
+						return this.barMaxLength * this.subPercent + 'px'
+					}
+					else {
+						this.barMaxLength * Math.abs((this.msubValue - this.min) / (this.mmax - this.min)) + 'px'
+					}
+					
+				}
+				return this.sizeDeal(this.strokeWidth)[2]
+			},
+			mhandleWidth() {
+				if(this.direction == "vertical") {
+					return this.sizeDeal(this.handleHeight)[2]
+				}
+				return this.sizeDeal(this.handleWidth)[2]
+			},
+			mhandleHeight() {
+				if(this.direction == "vertical") {
+					return this.sizeDeal(this.handleWidth)[2]
+				}
+				return this.sizeDeal(this.handleHeight)[2]
+			},
+			mhandleTop() {
+				if(this.direction == 'vertical') {
+					return 0
+				}
+				else {
+					// 拖柄垂直居中
+					let handle = this.sizeDeal(this.handleHeight)[0]
+					let top = this.maxHeight()[0] / 2 - handle / 2 + 'px'
+					return top
+				}
+			},
+			showValue() {
+				return this.valueFormat(this.percent * (this.mmax - this.min) + this.min)
+			},
+			textHeight() {
+				let infoSize = this.sizeDeal(this.infoFontSize)
+				return infoSize[0]*1.2 + infoSize[1]
+			},
+			valueLeft() {
+				if(this.infoAlign=='left') {
+					return 0
+				}
+				else if(this.infoAlign == 'center') {
+					let width = this.sizeDeal(this.width)
+					return width[0]/2 - this.valueWidth()/2 + 'px'
+				}
+				else if(this.infoAlign=='right'){
+					let width = this.sizeDeal(this.width)
+					return width[0] - this.textWidth() + 'px'
+				}
+				return 0
+			},
+			barMaxLength() {
+				let width = this.sizeDeal(this.width)[0]
+				let handleWidth = this.sizeDeal(this.handleWidth)
+				return width - this.textWidth() - handleWidth[0]
+			},
+			mwidgetWidth() {
+				return this.sizeDeal(this.widgetWidth)[2];
+			},
+			mwidgetHeight() {
+				return this.sizeDeal(this.widgetHeight)[2];
+			},
+			moffset() {
+				let off = this.sizeDeal(this.widgetOffset);
+				// console.log(off)
+				switch(this.widgetPos) {
+					case 'top':
+						return this.sizeDeal(this.mhandleHeight)[0] + off[0] + 'px'
+					case 'right':
+						return this.sizeDeal(this.mhandleWidth)[0] + off[0] + 'px'
+					case 'bottom':
+						return this.sizeDeal(this.mhandleHeight)[0] + off[0] + 'px'
+					case 'left':
+						return this.sizeDeal(this.mhandleWidth)[0] + off[0] + 'px'
+				}
+				return 0
+			},
+			mwidgetBorderRadius() {
+				return this.sizeDeal(this.widgetBorderRadius)[2];
+			},
+			mwidgetAngle() {
+				return "rotate("+Number(this.widgetAngle)+"deg)"
+			}
+		},
+		methods: {
+			prevent(e) {
+				console.log(1)
+			},
+			updateRect() {
+				// #ifndef APP-NVUE
+				/**
+				 * 非NVUE movable-area 滑动事件获取到的位置是相对于文档的，获取组件位置，用于计算滑块位置
+				 */
+				let query = uni.createSelectorQuery().in(this)
+				query.select('.bing-progress').boundingClientRect(data => {
+					this.mainInfo.top = data.top
+					this.mainInfo.left = data.left
+					this.mainInfo.bottom = data.bottom
+					this.mainInfo.right = data.right
+				}).exec()
+				// #endif
+			},
+			touchstart(e) {
+				if(!this.disabled) {
+					// #ifdef APP-NVUE
+					e.stopPropagation()
+					e.target.attr.preventGesture = true
+					if(this.direction == 'vertical' && e.target.attr.id != 'bp-mview' && (e.timestamp - this.lastTouchTime > 100)) {
+						this.moveable = false
+					}
+					this.lastTouchTime = e.timestamp
+					// #endif
+					// #ifndef APP-NVUE
+					/**
+					 * 防止组件在文档流中的位置被修改，导致组件进度值异常
+					 */
+					this.updateRect()
+					// #endif
+					// 阻止组件信息异常情况下的进度值修改
+					if(this.mainInfo.top > this.screenHeight) {
+						this.$emit("dragstart", {bpname: this.bpname,type: 'dragstart',value:this.showValue,subValue:this.msubValue})
+						return
+					}
+					this.touchState = true
+					let detail = e.changedTouches[0]
+					this.handleMove(detail)
+					this.$emit("dragstart", {bpname: this.bpname,type: 'dragstart',value:this.showValue,subValue:this.msubValue})
+				}
+			},
+			touchmove(e) {
+				if(!this.disabled) {
+					let detail = e.changedTouches[0]
+					this.handleMove(detail)
+					this.$emit("dragging", {bpname: this.bpname,type: 'dragging',value:this.showValue,subValue:this.msubValue})
+				}
+			},
+			touchend(e) {
+				if(!this.disabled) {
+					// #ifdef APP-NVUE
+					if(!this.moveable) {
+						this.moveable = true
+						return
+					}
+					// #endif
+					let detail = e.changedTouches[0]
+					this.handleMove(detail)
+					this.touchState = false
+					this.$emit("dragend", {bpname: this.bpname,type: 'dragend',value:this.showValue,subValue:this.msubValue})
+				}
+			},
+			handleMove(detail) {
+				let width = this.sizeDeal(this.width)[0]
+				let handleWidth = this.sizeDeal(this.handleWidth)
+				let percent
+				if(this.direction!='vertical') {
+					if(this.infoAlign=='left') {
+						// #ifndef APP-NVUE
+						percent = (detail.pageX - this.mainInfo.left - this.textWidth() - handleWidth[0]/2)/ this.barMaxLength
+						// #endif
+						// #ifdef APP-NVUE
+						percent = (detail.pageX  - handleWidth[0]/2)/ this.barMaxLength
+						// #endif
+					}
+					else {
+						// #ifndef APP-NVUE
+						percent = (detail.pageX - this.mainInfo.left - handleWidth[0]/2)/ this.barMaxLength
+						// #endif
+						// #ifdef APP-NVUE
+						percent = (detail.pageX - handleWidth[0]/2)/ this.barMaxLength
+						// #endif
+					}
+				}
+				else {
+					// #ifdef APP-NVUE
+					percent = 1 - (detail.pageY - handleWidth[0]/2- 1) / this.barMaxLength
+					// #endif
+					// #ifndef APP-NVUE
+					percent = 1 - (detail.clientY - this.mainInfo.top - handleWidth[0]/2)/ this.barMaxLength
+					// #endif
+				}
+				percent = percent > 0 ? percent : 0
+				percent = percent < 1 ? percent : 1
+				if(this.reverse) {
+					this.percent = 1 - percent
+				}
+				else {
+					this.percent = percent
+				}
+			},
+			showValueState() {
+				if(this.direction != 'vertical' && this.showInfo && (this.infoAlign=='left' || this.infoAlign=='right')) {
+					return true
+				}
+				return false
+			},
+			valueSetBoundary(value) {
+				// 控制value在合法范围内
+				if(this.mmax > this.min) {
+					value = value < this.mmax ? value : this.mmax
+					value = value > this.min ? value : this.min
+				}
+				else {
+					value = value > this.mmax ? value : this.mmax
+					value = value < this.min ? value : this.min
+				}
+				return value
+			},
+			/**
+			 * @param {Object} v
+			 * @param {Object} isSub 是否是副副进度条
+			 */
+			valueFormat (v,isSub){
+				// set step
+				v = this.valueSetBoundary(v)
+				let stepInfo = this.stepInfo(isSub)
+				v = Number(v - this.min).toFixed(stepInfo[1])
+				let step = stepInfo[0] * 10 ** stepInfo[1]
+				let valueE = v * 10 ** stepInfo[1]
+				let remainder = valueE % step
+				let remainderInt = Math.floor(remainder)
+				// 对余数四舍五入0-1
+				let sub = Math.round(remainder / step)
+				let value = (Math.floor(valueE) - remainderInt + sub*step) / (10 ** stepInfo[1])
+				value = Number((value + this.min).toFixed(stepInfo[1]))
+				return value
+			},
+			/**
+			 * @param {Object} v
+			 * @param {Object} isSub 是否是副副进度条
+			 */
+			stepInfo(isSub) {
+				// return step, decimal位数
+				let step 
+				if(isSub) {
+					step = Number(this.subStep)
+				}
+				else {
+					step = Number(this.step)
+				}
+				
+				if (step <= 0 || !step){
+					return [1, 0]
+				}
+				else{
+					let steps = step.toString().split('.')
+					if (steps.length == 1){
+						return [step,0]
+					}
+					else {
+						return [step,steps[1].length]
+					}
+				}
+			},
+			textWidth() {
+				if(this.showValueState()) {
+					let numWidth = this.mmax.toString().length> this.min.toString().length? this.mmax.toString().length: this.min.toString().length
+					let textWidth = ((numWidth + this.stepInfo()[1]) * 0.7 + this.infoEndText.length) * this.sizeDeal(this.infoFontSize)[0]
+					return Number(textWidth.toFixed(2))
+				}
+				return 0
+			},
+			valueWidth() {
+				let numWidth = this.mmax.toString().length> this.min.toString().length? this.mmax.toString().length: this.min.toString().length
+				let textWidth = ((numWidth + this.stepInfo()[1]) * 0.7 + this.infoEndText.length) * this.sizeDeal(this.infoFontSize)[0]
+				return Number(textWidth.toFixed(2))
+			},
+			maxHeight() {
+				let h = []
+				if (this.direction!='vertical'){ // direction 为 vertical 时不显示info
+					let subt = this.infoEndText.match(/[^\x00-\xff]/g)
+					if (subt){
+						h.push(this.sizeDeal(this.infoFontSize)[0] * 1.1)
+					}
+					else{
+						h.push(this.sizeDeal(this.infoFontSize)[0])
+					}
+				}
+				h.push(this.sizeDeal(this.strokeWidth)[0])
+				h.push(this.sizeDeal(this.handleHeight)[0])
+				h.sort(function(a, b) {
+					return b - a
+				}) // 降序
+				return [h[0], 'px', h[0] + 'px']
+			},
+			sizeDeal(size) {
+				// 分离字体大小和单位,rpx 转 px
+				let s = Number.isNaN(parseFloat(size)) ? 0 : parseFloat(size)
+				let u = size.toString().replace(/[0-9\.]/g, '')
+				if (u == 'rpx') {
+					s /= this.px2rpx
+					u = 'px'
+				}else if (u == 'vw') {
+					u = 'px'
+					s = s / 100 * this.screenWidth
+				} else if(u == 'vh') {
+					u = 'px'
+					s = s / 100 * this.screenHeight
+				} else{
+					u = 'px'
+				}
+ 				
+				return [s, u, s + u]
+			},
+		}
+	}
+</script>
+
+<style scoped>
+	@import "bing-progress.css"
+</style>
diff --git a/components/zhuo-tabs/zhuo-tabs.vue b/components/zhuo-tabs/zhuo-tabs.vue
new file mode 100644
index 0000000..ac33308
--- /dev/null
+++ b/components/zhuo-tabs/zhuo-tabs.vue
@@ -0,0 +1,16 @@
+<template>
+    <view class="zhuo-tabs"></view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'zhuo-tabs',
+    data() {
+        return {};
+    },
+};
+</script>
+
+<style lang="stylus">
+.zhuo-tabs
+</style>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..a558a48
--- /dev/null
+++ b/package.json
@@ -0,0 +1,19 @@
+{
+    "id": "arc-slider",
+    "name": "弧形滑动选择器",
+    "displayName": "弧形滑动选择器",
+    "version": "3.0.1",
+    "description": "弧形滑动选择器",
+    "keywords": [
+        "弧线",
+        "选择器",
+        "滑动",
+        "滑动选择器"
+    ],
+    "dcloudext": {
+        "category": [
+            "前端组件",
+            "通用组件"
+        ]
+    }
+}
\ No newline at end of file
diff --git a/packageA/pages/UnitDetails/UnitDetails.vue b/packageA/pages/UnitDetails/UnitDetails.vue
new file mode 100644
index 0000000..e608f5e
--- /dev/null
+++ b/packageA/pages/UnitDetails/UnitDetails.vue
@@ -0,0 +1,176 @@
+<template>
+    <view class="container">
+        <!-- 单位基本信息 -->
+        <view class="company-header">
+            <text class="company-name">湖南沃森电器科技有限公司</text>
+            <view class="company-info">
+                <view class="location">
+                    <uni-icons type="location-filled" color="#4778EC" size="24"></uni-icons>
+                    青岛 青岛经济技术开发区
+                </view>
+                <text class="industry">制造业 100-299人</text>
+            </view>
+        </view>
+        <view class="hr"></view>
+        <!-- 单位介绍 -->
+        <view class="company-description">
+            <view class="section-title">单位介绍</view>
+            <text class="description">
+                我司在永磁同步电机行业技术优势明显：最高载频达24kHZ，最高运行频率3000HZ，最高运行转速达到180000rpm。
+            </text>
+        </view>
+
+        <!-- 在招职位 -->
+        <view class="job-list">
+            <text class="section-title">在招职位</text>
+            <view class="job-row" v-for="job in jobs" :key="job.id">
+                <view class="left">
+                    <text class="job-title">{{ job.title }}</text>
+                    <view class="job-tags">
+                        <view class="tag" v-for="tag in job.tags" :key="tag">{{ tag }}</view>
+                    </view>
+                    <text class="location">{{ job.location }}</text>
+                </view>
+                <view class="right">
+                    <text class="salary">{{ job.salary }}</text>
+                    <text class="hot" v-if="job.hot">🔥</text>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            jobs: [
+                {
+                    id: 1,
+                    title: '销售工程师-高级销售经理',
+                    tags: ['本科', '3-5年', '15人', '本科', '3-5年', '15人'],
+                    company: '湖南沃森电气科技有限公司',
+                    location: '青岛 青岛经济技术开发区',
+                    salary: '1万-2万',
+                    hot: true,
+                },
+                {
+                    id: 2,
+                    title: '销售工程师-初级销售经理',
+                    tags: ['本科', '3-5年', '15人'],
+                    company: '湖南沃森电气科技有限公司',
+                    location: '青岛 青岛经济技术开发区',
+                    salary: '5千-1万',
+                    hot: true,
+                },
+                {
+                    id: 3,
+                    title: '销售助理',
+                    tags: ['大专', '3-5年', '20人'],
+                    company: '湖南沃森电气科技有限公司',
+                    location: '青岛 青岛经济技术开发区',
+                    salary: '5千-8千',
+                },
+                {
+                    id: 4,
+                    title: '销售客服',
+                    tags: ['大专', '3-5年', '50人'],
+                    company: '湖南沃森电气科技有限公司',
+                    location: '青岛 青岛经济技术开发区',
+                    salary: '5千-8千',
+                },
+            ],
+        };
+    },
+};
+</script>
+
+<style lang="stylus">
+.container
+  display flex
+  flex-direction column
+  background-color #f8f8f8
+.hr
+    height: 10rpx;
+.company-header
+  padding 20rpx 40rpx
+  background-color #fff
+  .company-name
+    font-size 56rpx
+    font-weight bold
+    color #333
+    margin-bottom 10rpx
+  .company-info
+    font-size 24rpx
+    color #666
+    display flex
+    align-items center
+    justify-content space-between
+    .location
+      display flex
+      align-items center
+
+.company-description
+  padding 20rpx 40rpx
+  background-color #fff
+  margin-bottom 10rpx
+  .section-title
+    font-size 42rpx
+    font-weight bold
+    margin-bottom 10rpx
+
+  .description
+    font-size 24rpx
+    color #333
+    line-height 36rpx
+
+.job-list
+  padding 20rpx 40rpx
+  background-color #fff
+  .section-title
+    font-size 42rpx
+    font-weight bold
+    margin-bottom 10rpx
+  .job-row
+    display flex
+    justify-content space-between
+    align-items flex-start
+    padding 20rpx
+    border 2rpx solid #D9D9D9
+    margin-top 20rpx
+    border-radius 17rpx 17rpx 17rpx 17rpx
+    .left
+      display flex
+      flex-direction column
+      flex-grow 1
+      .job-title
+        font-size 28rpx
+        font-weight bold
+        color #333
+        margin-bottom 10rpx
+      .job-tags
+        display flex
+        gap 10rpx
+        margin-bottom 10rpx
+        .tag
+          background-color #22c55e
+          color #fff
+          padding 5rpx 10rpx
+          border-radius 12rpx
+          font-size 20rpx
+      .location
+        font-size 24rpx
+        color #666
+    .right
+      display flex
+      flex-direction column
+      align-items flex-end
+      .salary
+        font-size 28rpx
+        color #3b82f6
+        font-weight bold
+      .hot
+        color #ff6b6b
+        font-size 24rpx
+        margin-top 5rpx
+</style>
diff --git a/packageA/pages/choiceness/choiceness.vue b/packageA/pages/choiceness/choiceness.vue
new file mode 100644
index 0000000..acd0595
--- /dev/null
+++ b/packageA/pages/choiceness/choiceness.vue
@@ -0,0 +1,88 @@
+<template>
+  <view class="container">
+    <!-- 搜索栏 -->
+    <view class="search-bar">精选企业</view>
+
+    <!-- 格子布局 -->
+    <view class="grid-container">
+      <view class="grid-item blue">
+        <text class="title">事业单位</text>
+        <view class="status">已关注 ✓</view>
+      </view>
+
+      <view class="grid-item green">
+        <text class="title">银行招聘</text>
+        <view class="status">特别关注</view>
+      </view>
+
+      <view class="grid-item orange">
+        <text class="title">世界500强</text>
+        <view class="status">特别关注</view>
+      </view>
+
+      <view class="grid-item red">
+        <text class="title">中国500强</text>
+        <view class="status">特别关注</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="stylus" scoped>
+/* 页面整体样式 */
+.container
+  background-color #edf4ff
+  height 100%
+  display flex
+  flex-direction column
+  padding 20rpx
+
+/* 搜索栏样式 */
+.search-bar
+  font-size 32rpx
+  font-weight bold
+  color #333
+  margin-bottom 20rpx
+
+/* 格子布局样式 */
+.grid-container
+  display flex
+  flex-wrap wrap
+  justify-content space-between
+  gap 20rpx
+
+.grid-item
+  width 48%
+  height 200rpx
+  border-radius 20rpx
+  display flex
+  flex-direction column
+  justify-content center
+  align-items center
+  color #fff
+  font-size 28rpx
+  font-weight bold
+  position relative
+
+  .status
+    position absolute
+    bottom 20rpx
+    font-size 24rpx
+    background-color rgba(255, 255, 255, 0.9)
+    color #333
+    padding 5rpx 15rpx
+    border-radius 15rpx
+
+/* 每种格子对应的颜色 */
+.blue
+  background-color #3b82f6
+
+.green
+  background-color #22c55e
+
+.orange
+  background-color #f59e0b
+
+.red
+  background-color #ef4444
+</style>
diff --git a/packageA/pages/exhibitors/exhibitors.vue b/packageA/pages/exhibitors/exhibitors.vue
new file mode 100644
index 0000000..eabaeb4
--- /dev/null
+++ b/packageA/pages/exhibitors/exhibitors.vue
@@ -0,0 +1,147 @@
+<template>
+    <view class="container">
+        <!-- 招聘会详情标题 -->
+        <view class="header">
+            <text class="header-title">2024年春季青岛市商贸服务业招聘会</text>
+            <view class="header-info">
+                <view class="location">
+                    <uni-icons type="location-filled" color="#4778EC" size="24"></uni-icons>
+                    青岛 市南区延安三路105号
+                </view>
+                <text class="date">2024年7月31日 周三</text>
+            </view>
+        </view>
+
+        <!-- 参会单位列表 -->
+        <view class="company-list">
+            <text class="section-title">参会单位</text>
+            <view class="company-row" v-for="company in companies" :key="company.id">
+                <view class="left">
+                    <view class="logo" :class="'logo-' + company.id">{{ company.id }}</view>
+                    <view class="company-info">
+                        <text class="company-name line_2">{{ company.name }}</text>
+                        <text class="industry">{{ company.industry }}</text>
+                        <view class="details">
+                            <text>查看详情</text>
+                            <uni-icons type="star" size="26"></uni-icons>
+                            <!-- <uni-icons type="star-filled" color="#FFCB47" size="26"></uni-icons> -->
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            companies: [
+                {
+                    id: 1,
+                    name: '湖南沃森电器科技有限公司',
+                    industry: '制造业 100-299人',
+                },
+                {
+                    id: 2,
+                    name: '青岛成达汽车销售集团',
+                    industry: '制造业 100-299人',
+                },
+                {
+                    id: 3,
+                    name: '青岛日森电器有限公司',
+                    industry: '制造业 100-299人',
+                },
+                {
+                    id: 4,
+                    name: '青岛融合网络通信有限公司',
+                    industry: '制造业 100-299人',
+                },
+            ],
+        };
+    },
+};
+</script>
+
+<style lang="stylus" scoped>
+.container
+  display flex
+  flex-direction column
+  background-color #f8f8f8
+
+.header
+  padding 20rpx 40rpx
+  background-color #fff
+  .header-title
+    font-size 56rpx
+    font-weight bold
+    color #333
+    margin-bottom 10rpx
+  .header-info
+    margin-top: 20rpx
+    font-size 24rpx
+    color #666
+    display flex
+    align-items center
+    justify-content space-between
+    .location
+      display flex
+      align-items center
+    .date
+      flex-shrink 0
+
+.company-list
+  padding 20rpx
+  background-color #fff
+  margin-top 10rpx
+  .section-title
+    padding 20rpx
+    font-size 40rpx
+    font-weight bold
+    margin-bottom 10rpx
+
+.company-row
+  display flex
+  justify-content space-between
+  align-items center
+  padding 20rpx
+  border 2rpx solid #D9D9D9
+  margin-top 20rpx
+  border-radius 17rpx 17rpx 17rpx 17rpx
+  .left
+    display flex
+    align-items center
+    width: 100%
+    height: 100%
+    .logo
+      background-color #22c55e
+      color #fff
+      font-size 24rpx
+      font-weight bold
+      width: 235rpx;
+      height: 164rpx;
+      display flex
+      align-items center
+      justify-content center
+      border-radius 12rpx
+      margin-right 20rpx
+    .company-info
+      min-height 164rpx
+      flex 1
+      display flex
+      flex-direction column
+      justify-content space-between
+      .company-name
+        font-size 28rpx
+        color #333
+        font-weight bold
+      .industry
+        font-size 24rpx
+        color #666
+      .details
+        font-size 24rpx
+        color #666
+        display flex
+        align-items center
+        justify-content space-between
+</style>
diff --git a/packageA/pages/myResume/myResume.vue b/packageA/pages/myResume/myResume.vue
new file mode 100644
index 0000000..f04bef7
--- /dev/null
+++ b/packageA/pages/myResume/myResume.vue
@@ -0,0 +1,206 @@
+<template>
+    <view class="container">
+        <!-- 头部信息 -->
+        <view class="header">
+            <view class="avatar"></view>
+            <view class="info">
+                <view class="name-row">
+                    <text class="name">用户姓名</text>
+                    <!-- <view class="edit-icon"></view> -->
+                </view>
+                <text class="details">男 23岁</text>
+            </view>
+        </view>
+
+        <!-- 简历信息 -->
+        <view class="resume-info">
+            <view class="info-card">
+                <view class="card-content">
+                    <text class="label">出生年月：</text>
+                    <text class="value">2001/01/01</text>
+                </view>
+                <view class="card-content">
+                    <text class="label">学历：</text>
+                    <text class="value">2001/01/01</text>
+                </view>
+                <view class="card-content">
+                    <text class="label">政治面貌：</text>
+                    <text class="value">2001/01/01</text>
+                </view>
+                <view class="card-content">
+                    <text class="label">联系方式：</text>
+                    <text class="value">2001/01/01</text>
+                </view>
+                <view class="edit-icon">
+                    <image class="img" src="../../../static/icon/edit.png"></image>
+                </view>
+            </view>
+        </view>
+
+        <!-- 期望职位 -->
+        <view class="resume-info">
+            <view class="info-card">
+                <view class="card-content">
+                    <text class="label">期望职位：</text>
+                    <view class="value">
+                        <view>销售工程师</view>
+                        <view>销售工程师</view>
+                        <view>销售工程师</view>
+                        <view>销售工程师</view>
+                    </view>
+                </view>
+                <view class="edit-icon">
+                    <image class="img" src="../../../static/icon/edit.png"></image>
+                </view>
+            </view>
+        </view>
+
+        <!-- 期望薪资 -->
+        <view class="resume-info">
+            <view class="info-card">
+                <view class="card-content">
+                    <text class="label">期望薪资：</text>
+                    <view class="value">8-10k</view>
+                </view>
+                <view class="edit-icon">
+                    <image class="img" src="../../../static/icon/edit.png"></image>
+                </view>
+            </view>
+        </view>
+
+        <!-- 期望工作地 -->
+        <view class="resume-info">
+            <view class="info-card">
+                <view class="card-content">
+                    <text class="label long">期望工作地：</text>
+                    <view class="value">青岛-青岛经济技术开发区</view>
+                </view>
+                <view class="edit-icon">
+                    <image class="img" src="../../../static/icon/edit.png"></image>
+                </view>
+            </view>
+        </view>
+
+        <!-- 上传按钮 -->
+        <view class="upload-btn">
+            <button class="btn">
+                <uni-icons type="cloud-upload" size="30" color="#FFFFFF"></uni-icons>
+                上传简历
+            </button>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {};
+    },
+};
+</script>
+
+<style lang="stylus" scoped>
+.container
+    width: 100%;
+    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
+    background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
+    display: flex;
+    flex-direction: column;
+    align-items center
+
+.header
+  display flex
+  align-items center
+  padding  30rpx 60rpx
+  width calc(100% - 120rpx)
+  border-radius 0 0 20rpx 20rpx
+  .avatar
+    width 100rpx
+    height 100rpx
+    background-color #ccc
+    border-radius 50%
+    margin-right 20rpx
+  .info
+    display flex
+    flex-direction column
+    .name-row
+      display flex
+      align-items center
+      .name
+        font-size 36rpx
+        font-weight bold
+        color #fff
+      .edit-icon
+        width 30rpx
+        height 30rpx
+        background-color #fff
+        border-radius 50%
+        margin-left 10rpx
+    .details
+      font-size 24rpx
+      color #dbeafe
+
+.resume-info
+    padding: 0 26rpx
+    width calc(100% - 52rpx)
+    margin-top 20rpx
+  .info-card
+    display flex
+    flex-direction: column
+    justify-content space-between
+    align-items center
+    color #fff
+    padding 10rpx 24rpx
+    border-radius 12rpx
+    margin-bottom 10rpx
+    background: #4778EC;
+    box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
+    border-radius: 17rpx 17rpx 17rpx 17rpx;
+    position: relative
+    .card-content
+        width: 100%
+        display flex
+        line-height: 58rpx
+        margin-top 16rpx
+      .label
+        width 160rpx
+        height: 32rpx
+        font-size 28rpx
+        color #FFFFFF
+        text-align:justify;
+        margin-right: 20rpx
+      .long
+        width 180rpx
+        margin-right: 0rpx
+      .label:after
+        content: '';
+        display: inline-block;
+        width: 100%;
+      .value
+        font-size: 28rpx;
+        color: #FFFFFF;
+    .card-content:first-child
+        margin-top 0
+    .edit-icon
+      position: absolute
+      right: 40rpx
+      top: 20rpx
+      width 40rpx
+      height 40rpx
+      .img
+        width: 100%
+        height: 100%
+
+.upload-btn
+  margin-top 20rpx
+  .btn
+    display: flex
+    align-items: center
+    box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
+    height 80rpx
+    background-color #22c55e
+    color #fff
+    font-size 28rpx
+    font-weight bold
+    border-radius 20rpx
+</style>
diff --git a/packageA/pages/post/post.vue b/packageA/pages/post/post.vue
new file mode 100644
index 0000000..e35687a
--- /dev/null
+++ b/packageA/pages/post/post.vue
@@ -0,0 +1,146 @@
+<template>
+  <view class="container">
+    <view class="job-header">
+      <view class="job-title">销售工程师-高级销售经理</view>
+      <view class="job-info">
+        <text class="salary">1万-2万/月</text>
+        <text class="views">1024浏览</text>
+      </view>
+      <view class="location-info">
+        <text class="location">📍 青岛 青岛经济技术开发区</text>
+        <text class="date">2022.1.3</text>
+        <view class="source">来源 智联招聘</view>
+      </view>
+    </view>
+
+    <view class="job-details">
+      <text class="details-title">职位详情</text>
+      <view class="tags">
+        <view class="tag">本科</view>
+        <view class="tag">3-5年</view>
+      </view>
+      <view class="description">
+        （我司在永磁同步电机行业技术优势明显：最高载频24kHZ，最高运行频率3000HZ，最高运行转速180000rpm。）职责：
+        <br />
+        1、结合公司业务优势，深挖行业大客户需求，为客户提供针对性的营销解决方案；
+        <br />
+        2、有丰富的项目落地执行经验；
+        <br />
+        3、做好应收款控制与管理。
+        <br />
+        要求：
+        <br />
+        1、统招本科以上学历，电气相关专业；
+        <br />
+        2、有3年以上从事变频器或相关经验者优先。
+        <br />
+      </view>
+    </view>
+
+    <view class="company-info" @click="navTo('/packageA/pages/UnitDetails/UnitDetails')">
+      <view class="company-name">湖南沃森电气科技有限公司</view>
+      <view class="company-details">制造业 100-299人 单位详情</view>
+    </view>
+
+    <view class="footer">
+      <button class="apply-btn">立即申请</button>
+      <view class="falls-card-matchingrate">
+        <uni-icons type="star" size="40"></uni-icons>
+        <!-- <uni-icons type="star-filled" color="#FFCB47" size="40"></uni-icons> -->
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { reactive, inject, watch, ref, onMounted } from 'vue';
+const { $api, navTo } = inject('globalFunction');
+</script>
+
+<style lang="stylus" scoped>
+.container
+  display flex
+  flex-direction column
+  background-color #f8f8f8
+.job-header
+  padding 20rpx 40rpx
+  background-color #ffffff
+  margin-bottom 10rpx
+  .job-title
+    font-size 55rpx
+    font-weight bold
+    color #333
+    margin-bottom 10rpx
+  .job-info
+    display flex
+    justify-content space-between
+    margin-bottom 10rpx
+    .salary
+      color #3b82f6
+      font-size 42rpx
+      font-weight bold
+    .views
+      font-size 24rpx
+      color #999
+  .location-info
+    font-size 24rpx
+    color #666
+    .location, .source, .date
+      margin-right 10rpx
+      margin-top: 20rpx
+    .source
+      margin-left: 30rpx;
+
+.job-details
+  background-color #fff
+  padding 20rpx 40rpx
+  margin-bottom 10rpx
+  .details-title
+    font-size 41rpx
+    font-weight bold
+    margin-bottom 15rpx
+  .tags
+    display flex
+    gap 10rpx
+    margin 15rpx 0
+    .tag
+      background-color #3b82f6
+      color #fff
+      padding 5rpx 15rpx
+      border-radius 15rpx
+      font-size 22rpx
+  .description
+    font-size 24rpx
+    line-height 36rpx
+    color #333
+
+.company-info
+  background-color #fff
+  padding 20rpx 40rpx
+  margin-bottom 10rpx
+  .company-name
+    font-size 28rpx
+    font-weight bold
+    margin-bottom 10rpx
+  .company-details
+    font-size 24rpx
+    color #666
+
+.footer
+  position fixed
+  bottom calc(var(--status-bar-height) + var(--window-bottom))
+  left 0
+  width calc(100% - 40rpx)
+  padding 20rpx
+  background-color #fff
+  text-align center
+  display flex
+  align-items: center
+  .apply-btn
+    flex: 1
+    background-color #22c55e
+    color #fff
+    border-radius 30rpx
+    font-size 32rpx
+    margin-right: 30rpx
+</style>
diff --git a/pages.json b/pages.json
index cd91ed4..a073332 100644
--- a/pages.json
+++ b/pages.json
@@ -3,25 +3,25 @@
         {
             "path": "pages/index/index",
             "style": {
-                "navigationBarTitleText": "uni-app"
+                "navigationStyle": "custom"
             }
         },
         {
             "path": "pages/mine/mine",
             "style": {
-                "navigationBarTitleText": ""
+                "navigationStyle": "custom"
             }
         },
         {
             "path": "pages/msglog/msglog",
             "style": {
-                "navigationBarTitleText": ""
+                "navigationStyle": "custom"
             }
         },
         {
             "path": "pages/careerfair/careerfair",
             "style": {
-                "navigationBarTitleText": ""
+                "navigationStyle": "custom"
             }
         },
         {
@@ -30,13 +30,65 @@
                 "navigationBarTitleText": "登录",
                 "navigationStyle": "custom"
             }
+        },
+        {
+            "path": "pages/nearby/nearby",
+            "style": {
+                "navigationBarTitleText": "附近",
+                "navigationBarBackgroundColor": "#4778EC",
+                "navigationBarTextStyle": "white"
+            }
         }
     ],
+    "subpackages": [{
+        "root": "packageA",
+        "pages": [{
+            "path": "pages/choiceness/choiceness",
+            "style": {
+                "navigationBarTitleText": "精选",
+                "navigationBarBackgroundColor": "#4778EC",
+                "navigationBarTextStyle": "white"
+            }
+        }, {
+            "path": "pages/post/post",
+            "style": {
+                "navigationBarTitleText": "职位详情",
+                "navigationBarBackgroundColor": "#4778EC",
+                "navigationBarTextStyle": "white"
+            }
+        }, {
+            "path": "pages/UnitDetails/UnitDetails",
+            "style": {
+                "navigationBarTitleText": "单位详情",
+                "navigationBarBackgroundColor": "#4778EC",
+                "navigationBarTextStyle": "white"
+            }
+        }, {
+            "path": "pages/exhibitors/exhibitors",
+            "style": {
+                "navigationBarTitleText": "参展单位",
+                "navigationBarBackgroundColor": "#4778EC",
+                "navigationBarTextStyle": "white"
+            }
+        }, {
+            "path": "pages/myResume/myResume",
+            "style": {
+                "navigationBarTitleText": "我的简历",
+                "navigationBarBackgroundColor": "#4778EC",
+                "navigationBarTextStyle": "white"
+            }
+        }]
+    }],
     "tabBar": {
         "color": "#7A7E83",
-        "selectedColor": "#3cc51f",
+        "selectedColor": "#002979",
         "borderStyle": "black",
         "backgroundColor": "#ffffff",
+        "midButton": {
+            "width": "50px",
+            "height": "50px",
+            "backgroundImage": "static/tabbar/logo2.png"
+        },
         "list": [{
                 "pagePath": "pages/index/index",
                 "iconPath": "static/tabbar/post.png",
@@ -52,13 +104,13 @@
             {
                 "pagePath": "pages/msglog/msglog",
                 "iconPath": "static/tabbar/chat4.png",
-                "selectedIconPath": "static/tabbar/chat4.png",
+                "selectedIconPath": "static/tabbar/chat4ed.png",
                 "text": "消息"
             },
             {
                 "pagePath": "pages/mine/mine",
                 "iconPath": "static/tabbar/mine.png",
-                "selectedIconPath": "static/tabbar/mine.png",
+                "selectedIconPath": "static/tabbar/mined.png",
                 "text": "我的"
             }
         ]
diff --git a/pages/careerfair/careerfair.vue b/pages/careerfair/careerfair.vue
index c060bd6..d0a333a 100644
--- a/pages/careerfair/careerfair.vue
+++ b/pages/careerfair/careerfair.vue
@@ -1,22 +1,191 @@
 <template>
-    <view>
-        
+    <view class="app-container">
+        <view class="careerfair-AI">AI+就业服务程序</view>
+        <view class="careerfair-tab">
+            <view class="careerfair-tab-options actived">现场招聘</view>
+            <view class="careerfair-tab-options">VR虚拟招聘会</view>
+        </view>
+        <scroll-view :scroll-x="true" :show-scrollbar="false" class="careerfair-scroll">
+            <view class="careerfair-date">
+                <view class="date-list" v-for="(item, index) in state.dateList" :key="index">
+                    <view class="date-list-item">{{ item.day }}</view>
+                    <view class="date-list-item active">{{ item.date }}</view>
+                </view>
+            </view>
+        </scroll-view>
+        <scroll-view :scroll-y="true" class="careerfair-list-scroll">
+            <view class="careerfair-list">
+                <view class="careerfair-list-card" v-for="(item, index) in 10" :key="index">
+                    <view class="card-title">2024年春季青岛市商贸服务业招聘会</view>
+                    <view class="card-intro">
+                        <view class="line_2">内容简介……</view>
+                        <view class="intro-distance">500m以内</view>
+                    </view>
+                    <view class="card-address">市南区延安三路105号</view>
+                    <view class="card-footer">
+                        <view class="cardfooter-lf">
+                            <view class="card-company">市南区就业人才中心</view>
+                            <view class="card-date">7月31日（周三）14:00-18:00</view>
+                        </view>
+                        <view class="cardfooter-ri" @click="navTo('/packageA/pages/exhibitors/exhibitors')">
+                            查看详情
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </scroll-view>
     </view>
 </template>
 
-<script>
-    export default {
-        data() {
-            return {
-                
-            }
-        },
-        methods: {
-            
-        }
+<script setup>
+import { reactive, inject, watch, ref, onMounted } from 'vue';
+import { onLoad, onShow } from '@dcloudio/uni-app';
+const { $api, navTo } = inject('globalFunction');
+const state = reactive({
+    dateList: [],
+});
+
+onLoad(() => {
+    state.dateList = getNextMonthDates();
+});
+
+//  获取往后三十天日期
+function getNextMonthDates() {
+    const today = new Date();
+    const dates = [];
+    const dayNames = ['日', '一', '二', '三', '四', '五', '六'];
+    for (let i = 0; i < 30; i++) {
+        const date = new Date(today); // 创建当天的副本
+        date.setDate(today.getDate() + i); // 设置日期为往后第 i 天
+        const formattedDate = date.toISOString().slice(0, 10).slice(8); // 格式化为 YYYY-MM-DD
+        const dayOfWeek = dayNames[date.getDay()]; // 获取星期几
+        dates.push({
+            date: formattedDate,
+            day: dayOfWeek,
+        });
     }
+    dates[0].date = '今天';
+    dates[1].date = '明天';
+    return dates;
+}
 </script>
 
-<style>
-
+<style lang="stylus" scoped>
+.app-container
+    width: 100%;
+    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
+    background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
+    display: flex;
+    flex-direction: column;
+    .careerfair-AI
+        height: 42rpx;
+        font-family: Inter, Inter;
+        font-weight: 400;
+        font-size: 35rpx;
+        color: #FFFFFF;
+        line-height: 41rpx;
+        padding: 85rpx 0 0 30rpx;
+    .careerfair-tab
+        margin: 20rpx 0 0 30rpx;
+        width: fit-content;
+        display: flex;
+        flex-wrap: nowrap;
+        .careerfair-tab-options
+            background: #4778EC;
+            padding: 0 20rpx;
+            height: 63rpx;
+            line-height: 63rpx;
+            font-weight: 400;
+            font-size: 28rpx;
+            color: #FFFFFF;
+            text-align: center;
+        .actived
+            position: relative;
+            background: #FFAD47;
+            box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
+        .careerfair-tab-options:first-child
+            border-radius: 17rpx 0rpx 0rpx 0rpx;
+        .careerfair-tab-options:last-child
+            border-radius: 0rpx 17rpx 0rpx 0rpx;
+    .careerfair-scroll
+        background: #4778EC;
+    .careerfair-date
+        height: 119rpx;
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        color: #FFFFFF;
+        width: fit-content;
+        .date-list
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: calc(750rpx / 7);
+            .date-list-item:nth-child(2)
+                font-size: 19rpx;
+                margin-top: 10rpx;
+            .active
+                width: 52rpx;
+                height: 52rpx;
+                background: #FFAD47;
+                border-radius: 0rpx 0rpx 0rpx 0rpx;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 50%;
+    .careerfair-list-scroll
+        overflow: hidden;
+        background: linear-gradient( 180deg, rgba(255,255,255,0.2) 0%, #FFFFFF 100%);
+    .careerfair-list
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 25rpx 28rpx;
+        .careerfair-list-card
+            margin-top: 36rpx;
+            width: calc(100% - 40rpx);
+            background: #FFFFFF;
+            border-radius: 17rpx 17rpx 17rpx 17rpx;
+            padding: 20rpx;
+            .card-title
+                height: 68rpx;
+                font-size: 35rpx;
+                color: #606060;
+                line-height: 68rpx;
+            .card-intro,.card-address,.card-company,.card-date
+                font-weight: 400;
+                font-size: 21rpx;
+                color: #606060;
+                line-height: 25rpx;
+                margin-top: 13rpx;
+            .card-footer
+                display: flex;
+                flex-wrap: nowrap;
+                justify-content: space-between;
+                align-items: center;
+                .cardfooter-ri
+                    width: 206rpx;
+                    height: 56rpx;
+                    line-height: 56rpx;
+                    font-size: 28rpx;
+                    text-align: center;
+                    color: #FFFFFF;
+                    background: #FFAD47;
+                    border-radius: 17rpx 17rpx 17rpx 17rpx;
+            .card-intro
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                flex-wrap: nowrap;
+                .intro-distance
+                    height: 30rpx;
+                    background: #13C57C;
+                    padding: 3rpx 8rpx;
+                    line-height: 30rpx;
+                    color: #FFFFFF;
+                    font-size: 21rpx;
+                    border-radius: 17rpx 17rpx 17rpx 17rpx;
+        .careerfair-list-card:first-child
+            margin-top: 0;
 </style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index b00e483..6035904 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,24 +1,117 @@
 <template>
-    <view class="content"></view>
+    <view class="app-containers">
+        <view class="index-AI">AI+就业服务程序</view>
+        <view class="index-option">
+            <view class="option-left">
+                <view class="left-item" @click="navTo('/pages/nearby/nearby')">附近</view>
+                <view class="left-item" @click="navTo('/packageA/pages/choiceness/choiceness')">精选</view>
+                <view class="left-item">职业图谱</view>
+            </view>
+            <view class="option-right">
+                <input class="uni-input right-input" confirm-type="search" />
+                <uni-icons class="iconsearch" color="#FFFFFF" type="search" size="20"></uni-icons>
+            </view>
+        </view>
+        <!-- tab -->
+        <view class="tab-options">
+            <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
+                <view class="tab-op-left">
+                    <view class="tab-list" v-for="(item, index) in 4" :key="index">中国万岁</view>
+                </view>
+            </scroll-view>
+            <view class="tab-op-right">
+                <uni-icons type="plusempty" style="margin-right: 10rpx" size="20"></uni-icons>
+                <view class="tab-recommend">推荐</view>
+                <view class="tab-filter">
+                    <view class="tab-number">1000+</view>
+                    <image class="image" src="/static/icon/filter.png"></image>
+                </view>
+            </view>
+        </view>
+        <!-- waterfalls -->
+        <scroll-view :scroll-y="true" class="falls-scroll">
+            <view class="falls">
+                <custom-waterfalls-flow ref="waterfallsFlowRef" :value="state.list">
+                    <template v-slot:default="item">
+                        <view class="item">
+                            <view class="falls-card" @click="navTo('/packageA/pages/post/post')">
+                                <view class="falls-card-title">销售工程师</view>
+                                <view class="falls-card-pay">1万-2万/月</view>
+                                <view class="falls-card-education">本科</view>
+                                <view class="falls-card-experience">3-5年</view>
+                                <view class="falls-card-company">德阳人社</view>
+                                <view class="falls-card-company">青岛 青岛经济技术开发区</view>
+                                <view class="falls-card-pepleNumber">
+                                    <view>2024.1.8</view>
+                                    <view>8人</view>
+                                </view>
+                                <view class="falls-card-matchingrate">
+                                    <view class="">匹配度95%</view>
+                                    <uni-icons type="star" size="30"></uni-icons>
+                                    <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons>
+                                </view>
+                            </view>
+                        </view>
+                    </template>
+                </custom-waterfalls-flow>
+            </view>
+        </scroll-view>
+    </view>
 </template>
 
 <script setup>
-import { reactive, inject, watch } from 'vue';
+import img from '/static/icon/filter.png';
+import { reactive, inject, watch, ref, onMounted } from 'vue';
 import { onLoad, onShow } from '@dcloudio/uni-app';
 import useUserStore from '../../stores/useUserStore';
 const { $api, navTo } = inject('globalFunction');
 const userStore = useUserStore();
+const waterfallsFlowRef = ref(null);
 const state = reactive({
     title: '123123123房贷首付打的手机家里好玩的很浓厚第卡后sdhiwohdijasnbdhoui1很努力',
+    list: [
+        {
+            image: img,
+            hide: true,
+        },
+        {
+            image: img,
+            hide: true,
+        },
+        {
+            image: img,
+            hide: true,
+        },
+        {
+            image: img,
+            hide: true,
+        },
+        {
+            image: img,
+            hide: true,
+        },
+        {
+            image: img,
+            hide: true,
+        },
+        {
+            image: img,
+            hide: true,
+        },
+        {
+            image: img,
+            hide: true,
+        },
+    ],
 });
 onShow(() => {
     console.log('onShow');
 });
 onLoad(() => {
     console.log('onLoad');
-    $api.sleep(2000).then(() => {
-        navTo('/pages/login/login');
-    });
+    // $api.sleep(2000).then(() => {
+    //     navTo('/pages/login/login');
+    // });
 });
 
 watch(
@@ -29,6 +122,156 @@ watch(
 </script>
 
 <style lang="stylus" scoped>
+.app-containers
+    width: 100%;
+    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
+    background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
+    display: flex;
+    flex-direction: column;
+    .index-AI
+        height: 42rpx;
+        font-family: Inter, Inter;
+        font-weight: 400;
+        font-size: 35rpx;
+        color: #FFFFFF;
+        line-height: 41rpx;
+        padding: 85rpx 0 0 30rpx;
+    .index-option
+        margin-top: 27rpx;
+        display: flex;
+        .option-left
+            display: flex;
+            width: 427rpx;
+            height: 56rpx;
+            background: #4778EC;
+            border-radius: 0rpx 17rpx 17rpx 0rpx;
+            align-items: center;
+            .left-item
+                width: 117rpx;
+                text-align: center;
+                line-height: 47rpx;
+                height: 47rpx;
+                margin-right: 27rpx;
+                color: #FFFFFF;
+            .left-item:active
+                color: blue;
+        .option-right
+            flex: 1;
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 0 49rpx;
+            .right-input
+                width: 100%;
+                height: 45rpx;
+                background: rgba(255,255,255,0.5);
+                border-radius: 17rpx 17rpx 17rpx 17rpx;
+                border: 3rpx solid #FFFFFF;
+                padding: 0 50rpx 0 10rpx;
+                color: #FFFFFF;
+            .iconsearch
+                position: absolute;
+                right: 60rpx;
+    .tab-options
+        margin-top: 10rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 77rpx;
+        background: #FFFFFF;
+        border-radius: 17rpx 17rpx 0rpx 0rpx;
+        padding: 0 24rpx;
+        overflow: hidden;
+        .tab-scroll
+            height: 77rpx;
+            line-height: 77rpx;
+            flex: 1;
+            overflow: hidden;
+            padding-right: 10rpx;
+            .tab-op-left
+                display: flex;
+                align-items: center;
+                flex-wrap: nowrap;
+                .tab-list
+                    text-align: center;
+                    white-space: nowrap;
+                    margin-right: 30rpx;
+                    font-size: 28rpx;
+                    color: #606060;
+        .tab-op-right
+            display: flex;
+            align-items: center;
+            .tab-recommend
+                white-space: nowrap;
+                width: 92rpx;
+                height: 42rpx;
+                background: #4778EC;
+                border-radius: 17rpx 17rpx 0rpx 17rpx;
+                text-align: center;
+                color: #FFFFFF;
+                font-size: 21rpx;
+                line-height: 42rpx;
+                margin-right: 12rpx;
+            .tab-number
+                font-size: 21rpx;
+                color: #606060;
+                line-height: 25rpx;
+                text-align: center;
+            .tab-filter
+                display: flex;
+                .image
+                    width: 28rpx;
+                    height: 27rpx;
+    .falls-scroll
+        flex: 1;
+        overflow: hidden
+    .falls
+        padding: 20rpx 40rpx;
+        .falls-card
+            padding: 30rpx;
+            .falls-card-title
+                height: 49rpx;
+                font-size: 42rpx;
+                color: #606060;
+                line-height: 49rpx;
+                text-align: left;
+            .falls-card-pay
+                height: 50rpx;
+                font-size: 35rpx;
+                color: #002979;
+                line-height: 50rpx;
+                text-align: left;
+            .falls-card-education,.falls-card-experience
+                width: fit-content;
+                height: 30rpx;
+                background: #13C57C;
+                border-radius: 17rpx 17rpx 17rpx 17rpx;
+                padding: 0 10rpx;
+                line-height: 30rpx;
+                font-weight: 400;
+                font-size: 21rpx;
+                color: #FFFFFF;
+                text-align: center;
+                margin-top: 14rpx;
+            .falls-card-company,.falls-card-pepleNumber
+                margin-top: 14rpx;
+                font-size: 21rpx;
+                color: #606060;
+                line-height: 25rpx;
+                text-align: left;
+            .falls-card-pepleNumber
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            .falls-card-matchingrate
+                margin-top: 10rpx;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                font-size: 21rpx;
+                color: #4778EC;
+                text-align: left;
 .logo
     width: 100px;
     height: 100px;
diff --git a/pages/login/components/tabcontrol.vue b/pages/login/components/tabcontrol.vue
index 2e393ce..65ecf9b 100644
--- a/pages/login/components/tabcontrol.vue
+++ b/pages/login/components/tabcontrol.vue
@@ -50,7 +50,7 @@ export default {
 };
 </script>
 
-<style lang="stylus">
+<style lang="stylus" scoped>
 .tab-container
     width: 100%
     height: 100%
diff --git a/pages/login/login.vue b/pages/login/login.vue
index 7b3ef3f..77a880d 100644
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -20,7 +20,7 @@
                         <view class="color_FFFFFF fs_30">选择您的性别1/6</view>
                         <view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
                     </view>
-                    <view class="fl_box fl_justmiddle">
+                    <view class="fl_box fl_justmiddle fl_1 fl_alstart">
                         <view class="tabtwo-sex">
                             <image class="sex-img" src="../../static/icon/woman.png"></image>
                             <view class="mar_top5">女</view>
@@ -72,7 +72,6 @@
                         <view class="eductionbtn">留学-硕士</view>
                         <view class="eductionbtn">留学-博士</view>
                     </view>
-                    <view class="fl_box fl_justmiddle"></view>
                     <view class="nextstep" @tap="nextStep">下一步</view>
                 </view>
             </template>
@@ -86,7 +85,7 @@
                     <view class="salary">
                         <scroll-view class="salary-content" :show-scrollbar="false" :scroll-y="true">
                             <view class="salary-content-item">不限</view>
-                            <view class="salary-content-item">2k</view>
+                            <view class="salary-content-item salary-content-item-selected">2k</view>
                             <view class="salary-content-item">5k</view>
                             <view class="salary-content-item">10k</view>
                             <view class="salary-content-item">15k</view>
@@ -94,7 +93,7 @@
                         <view class="center-text">至</view>
                         <scroll-view class="salary-content" :show-scrollbar="false" :scroll-y="true">
                             <view class="salary-content-item">不限</view>
-                            <view class="salary-content-item">2k</view>
+                            <view class="salary-content-item salary-content-item-selected">2k</view>
                             <view class="salary-content-item">5k</view>
                             <view class="salary-content-item">10k</view>
                             <view class="salary-content-item">15k</view>
@@ -112,21 +111,59 @@
                         <view class="color_FFFFFF fs_30">您期望的求职区域5/6</view>
                         <view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
                     </view>
-                    <view class="fl_box fl_justmiddle"></view>
+                    <view class="eduction-content">
+                        <view class="eductionbtn eductionbtned">市南区</view>
+                        <view class="eductionbtn">市北区</view>
+                        <view class="eductionbtn">李沧区</view>
+                        <view class="eductionbtn">崂山区</view>
+                        <view class="eductionbtn">荒岛区</view>
+                        <view class="eductionbtn">城阳区</view>
+                        <view class="eductionbtn">即墨区</view>
+                        <view class="eductionbtn">胶州市</view>
+                        <view class="eductionbtn">平度市</view>
+                        <view class="eductionbtn">莱西市</view>
+                        <view class="eductionbtn">不限区域</view>
+                    </view>
                     <view class="nextstep" @tap="nextStep">下一步</view>
                 </view>
             </template>
             <!-- tab6 -->
             <template v-slot:tab6>
-                <view class="tabtwo">
-                    <view class="tabtwo-top">
+                <view class="tabtwo sex-two">
+                    <view class="tabtwo-top mar_top25 mar_le25">
                         <view class="color_FFFFFF fs_30">您的期望岗位6/6</view>
                         <view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
                     </view>
-                    <view class="fl_box fl_justmiddle"></view>
-                    <!-- <view class="nextstep" @tap="complate">完成</view> -->
+                    <view class="sex-search">
+                        <uni-icons class="iconsearch" type="search" size="20"></uni-icons>
+                        <input class="uni-input searchinput" confirm-type="search" />
+                    </view>
+                    <view class="sex-content fl_1">
+                        <scroll-view :show-scrollbar="false" :scroll-y="true" class="sex-content-left">
+                            <view
+                                v-for="item in state.station"
+                                :key="item.value"
+                                class="left-list-btn"
+                                :class="{ 'left-list-btned': item.value === state.stationCateLog }"
+                                @click="changeStationLog(item)"
+                            >
+                                {{ item.label }}
+                            </view>
+                        </scroll-view>
+                        <scroll-view :show-scrollbar="false" :scroll-y="true" class="sex-content-right">
+                            <view class="grid-sex">
+                                <view class="sex-right-btn sex-right-btned">客户经理</view>
+                                <view class="sex-right-btn">客户经理</view>
+                                <view class="sex-right-btn">客户经理</view>
+                                <view class="sex-right-btn">客户经理</view>
+                                <view class="sex-right-btn">客户经理</view>
+                                <view class="sex-right-btn">客户经理</view>
+                                <view class="sex-right-btn">客户经理</view>
+                            </view>
+                        </scroll-view>
+                    </view>
                     <navigator url="/pages/index/index" open-type="reLaunch" hover-class="other-navigator-hover">
-                        <button class="nextstep" @tap="complate">完成</button>
+                        <button class="nextstep confirmStep">完成</button>
                     </navigator>
                 </view>
             </template>
@@ -139,8 +176,30 @@ import tabcontrolVue from './components/tabcontrol.vue';
 import { reactive, inject, watch, ref } from 'vue';
 const { statusBarHeight } = inject('deviceInfo');
 const { $api, navTo } = inject('globalFunction');
-const tabCurrent = ref(4);
+// 初始化
+const station = [
+    { label: '销售/商务拓展', value: 1 },
+    { label: '人事/行政/财务/法务', value: 2 },
+    { label: '互联网/通信及硬件', value: 3 },
+    { label: '运维/测试', value: 4 },
+    { label: '销售/商务拓展', value: 5 },
+    { label: '人事/行政/财务/法务', value: 6 },
+    { label: '互联网/通信及硬件', value: 7 },
+    { label: '运维/测试', value: 8 },
+    { label: '销售/商务拓展', value: 9 },
+    { label: '人事/行政/财务/法务', value: 10 },
+    { label: '互联网/通信及硬件', value: 11 },
+    { label: '销售/商务拓展', value: 12 },
+    { label: '人事/行政/财务/法务', value: 13 },
+    { label: '互联网/通信及硬件', value: 14 },
+];
+// status
+const tabCurrent = ref(0);
 const state = reactive({
+    station: station,
+    stationCateLog: 1,
+});
+const fromValue = reactive({
     sex: 1,
 });
 
@@ -150,7 +209,10 @@ setTimeout(() => {
 const getuserinfo = (e) => {
     console.log(e);
 };
-
+// 行为
+function changeStationLog(item) {
+    state.stationCateLog = item.value;
+}
 function nextStep() {
     tabCurrent.value += 1;
 }
@@ -161,11 +223,11 @@ function handleScroll(event) {
 }
 </script>
 
-<style lang="stylus">
+<style lang="stylus" scoped>
 .container
-    width: 100%;
-    height: 100%
     background: linear-gradient(#4778EC, #002979);
+    width: 100%;
+    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
     position: relative;
 
 .login-content
@@ -207,6 +269,8 @@ function handleScroll(event) {
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: space-between;
+    height: calc(100% - 40rpx);
 .tabtwo-top
     margin: 222rpx  0 0 0;
     width: 100%;
@@ -264,10 +328,6 @@ function handleScroll(event) {
     background: #13C57C;
     color: #FFFFFF;
 .nextstep
-    position: absolute;
-    top: 80%;
-    left: 50%;
-    transform: translate(-50%, 0)
     width: 630rpx;
     height: 98rpx;
     border-radius: 20rpx;
@@ -276,6 +336,9 @@ function handleScroll(event) {
     line-height: 98rpx;
     font-size: 36rpx;
     color: #FFFFFF;
+    margin-bottom: 150rpx;
+.confirmStep
+    margin-bottom: 50rpx;
 .eduction-content
     width: fit-content;
     display: grid;
@@ -297,7 +360,7 @@ function handleScroll(event) {
 .salary
     width: fit-content;
     display: grid;
-    grid-template-columns: 300rpx auto 300rpx;
+    grid-template-columns: 300rpx 40rpx 300rpx;
     // grid-gap: 20rpx;
     margin-top: 50rpx;
     .center-text
@@ -314,4 +377,80 @@ function handleScroll(event) {
             border-radius: 20rpx;
             background: #d9d9d9;
             text-align: center;
+            font-size: 38rpx;
+        .salary-content-item-selected
+            margin: 10rpx 5rpx 10rpx 5rpx;
+            background: #13C57C;
+            color: #FFFFFF;
+.sex-two
+    padding-left: 0;
+    padding-right: 0;
+    background: #4678ec;
+.sex-search
+    width: calc(100% - 28rpx - 28rpx);
+    padding: 10rpx 28rpx;
+    display: grid;
+    // grid-template-columns: 50rpx auto;
+    position: relative;
+    .iconsearch
+        position: absolute;
+        left: 40rpx;
+        top: 20rpx;
+    .searchinput
+        border-radius: 10rpx;
+        background: #FFFFFF;
+        padding: 10rpx 0 10rpx 58rpx;
+.sex-content
+    background: #FFFFFF;
+    border-radius: 20rpx;
+    width: 100%;
+    margin-top: 20rpx;
+    margin-bottom: 40rpx;
+    display: flex;
+    border-bottom: 2px solid #D9D9D9;
+    overflow: hidden
+    .sex-content-left
+        width: 250rpx;
+        .left-list-btn
+            padding: 0 24rpx;
+            display: grid;
+            place-items: center;
+            height: 100rpx;
+            text-align: center;
+            color: #606060;
+            font-size: 28rpx;
+        .left-list-btned
+            color: #4778EC;
+            position: relative;
+        .left-list-btned::after
+            position: absolute;
+            left: 20rpx;
+            content: '';
+            width: 7rpx;
+            height: 38rpx;
+            background: #4778EC;
+            border-radius: 0rpx 0rpx 0rpx 0rpx;
+
+    .sex-content-right
+        border-left: 2px solid #D9D9D9;
+        flex: 1;
+        .grid-sex
+            display: grid;
+            grid-template-columns: 50% 50%;
+            place-items: center;
+            .sex-right-btn
+                width: 211rpx;
+                height: 84rpx;
+                font-size: 35rpx;
+                line-height: 41rpx;
+                text-align: center;
+                display: grid;
+                place-items: center;
+                background: #D9D9D9;
+                border-radius: 20rpx;
+                margin-top:30rpx;
+                color: #606060;
+            .sex-right-btned
+                color: #FFFFFF;
+                background: #4778EC;
 </style>
diff --git a/pages/mine/mine.vue b/pages/mine/mine.vue
index 47ae9ec..c2f962e 100644
--- a/pages/mine/mine.vue
+++ b/pages/mine/mine.vue
@@ -1,19 +1,158 @@
 <template>
-    <view>
-        
+    <view class="app-container">
+        <view class="mine-AI">AI+就业服务程序</view>
+        <view class="mine-userinfo">
+            <view class="userindo-head">
+                <image class="userindo-head-img" src="/static/icon/flame2.png"></image>
+            </view>
+            <view class="userinfo-ls">
+                <view class="userinfo-ls-name">用户名</view>
+                <view class="userinfo-ls-resume">简历完成度80%，建议优化</view>
+            </view>
+        </view>
+        <view class="mine-tab">
+            <view class="tab-item" @click="navTo('/packageA/pages/myResume/myResume')">
+                <image class="item-img" src="/static/icon/resume.png"></image>
+                <view class="item-text">我的简历</view>
+            </view>
+            <view class="tab-item">
+                <image class="item-img" src="/static/icon/collect.png"></image>
+                <view class="item-text">我的收藏</view>
+            </view>
+            <view class="tab-item">
+                <image class="item-img" src="/static/icon/browse.png"></image>
+                <view class="item-text">我的浏览</view>
+            </view>
+            <view class="tab-item">
+                <image class="item-img" src="/static/icon/quaters.png"></image>
+                <view class="item-text">意向岗位</view>
+            </view>
+        </view>
+        <view class="mine-options">
+            <view class="mine-options-item">实名认证</view>
+            <view class="mine-options-item">素质测评</view>
+            <view class="mine-options-item">AI面试</view>
+            <view class="mine-options-item">账号与安全</view>
+            <view class="mine-options-item">通知与提醒</view>
+            <view class="mine-logout">退出登录</view>
+        </view>
     </view>
 </template>
 
-<script>
-    export default {
-        data() {
-            return {
-                
-            };
-        }
-    }
+<script setup>
+import { reactive, inject, watch, ref, onMounted } from 'vue';
+import { onLoad, onShow } from '@dcloudio/uni-app';
+import useUserStore from '../../stores/useUserStore';
+const { $api, navTo } = inject('globalFunction');
 </script>
 
-<style lang="stylus">
-
+<style lang="stylus" scoped>
+.app-container
+    width: 100%;
+    min-height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
+    background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
+    display: flex;
+    flex-direction: column;
+    .mine-AI
+        height: 42rpx;
+        font-family: Inter, Inter;
+        font-weight: 400;
+        font-size: 35rpx;
+        color: #FFFFFF;
+        line-height: 41rpx;
+        padding: 85rpx 0 0 30rpx;
+    .mine-userinfo
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        padding: 64rpx;
+        .userindo-head
+            width: 101rpx;
+            height: 101rpx;
+            background: #D9D9D9;
+            border-radius: 50%
+            overflow: hidden
+            margin-right: 40rpx;
+            .userindo-head-img
+                width: 100%;
+                height: 100%;
+        .userinfo-ls
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            .userinfo-ls-name
+                font-size: 42rpx;
+                color: #FFFFFF;
+            .userinfo-ls-resume
+                font-size: 21rpx;
+                color: #D9D9D9;
+    .mine-tab
+        margin: 0 30rpx;
+        height: calc(155rpx - 30rpx);
+        background: #FFFFFF;
+        border-radius: 17rpx 17rpx 17rpx 17rpx;
+        display: flex;
+        padding: 15rpx;
+        .tab-item
+            display: flex;
+            flex-direction: column;
+            width: calc(100% / 4);
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            .item-img
+                height: 55rpx;
+                width: 50rpx;
+            .item-text
+                font-size: 21rpx;
+                color: #000000;
+                line-height: 25rpx;
+                text-align: center;
+                margin-top: 10rpx;
+        .tab-item::after
+            position: absolute;
+            right: 0;
+            content: '';
+            width: 0rpx;
+            height: 96rpx;
+            border-radius: 0rpx 0rpx 0rpx 0rpx;
+            border-right: 2rpx solid #4778EC;
+        .tab-item:last-child::after
+            border-right: 0;
+        .tab-item:nth-child(2)>.item-img
+            width: 51rpx;
+            height: 45rpx;
+        .tab-item:nth-child(3)>.item-img
+            width: 62rpx;
+            height: 41rpx;
+        .tab-item:nth-child(4)>.item-img
+            width: 45rpx;
+            height: 47rpx;
+    .mine-options
+        margin: 43rpx 30rpx;
+        min-height: 155rpx;
+        background: #FFFFFF;
+        border-radius: 17rpx 17rpx 17rpx 17rpx;
+        display: flex;
+        padding: 24rpx 45rpx;
+        display: flex;
+        flex-direction: column;
+        min-height: min-content;
+        .mine-options-item
+            height: 80rpx;
+            font-size: 28rpx;
+            color: #000000;
+            line-height: 80rpx;
+            border-bottom: 2rpx solid #4778EC;
+            padding: 0 30rpx;
+        .mine-logout
+            margin: 250rpx auto 0 auto;
+            width: 399rpx;
+            height: 96rpx;
+            background: #FFAD47;
+            border-radius: 17rpx 17rpx 17rpx 17rpx;
+            text-align: center;
+            line-height: 96rpx;
+            color: #FFFFFF;
+            font-size: 35rpx;
 </style>
diff --git a/pages/msglog/msglog.vue b/pages/msglog/msglog.vue
index 47ae9ec..245ebf5 100644
--- a/pages/msglog/msglog.vue
+++ b/pages/msglog/msglog.vue
@@ -1,19 +1,131 @@
 <template>
-    <view>
-        
+    <view class="app-container">
+        <view class="msg-AI">AI+就业服务程序</view>
+        <view class="msg-tab">
+            <view class="msg-tab-item" :class="{ actived: state.current === 0 }" @click="seemsg(0)">全部</view>
+            <view class="msg-tab-item" :class="{ actived: state.current === 1 }" @click="seemsg(1)">未读</view>
+        </view>
+        <view class="msg-list">
+            <swiper class="swiper" :current="state.current" @change="changeSwiperMsgType">
+                <swiper-item class="list">
+                    <view class="list-card">
+                        <view class="card-img">
+                            <image class="card-img-flame" src="/static/icon/flame2.png"></image>
+                        </view>
+                        <view class="card-info">
+                            <view class="info-title">今日推荐</view>
+                            <view class="info-text">这里有9个职位很适合你，快来看看吧</view>
+                        </view>
+                        <view class="card-time">刚才</view>
+                    </view>
+                </swiper-item>
+                <swiper-item class="list">
+                    <view class="list-card">
+                        <view class="card-img">
+                            <image class="card-img-flame" src="/static/icon/flame2.png"></image>
+                        </view>
+                        <view class="card-info">
+                            <view class="info-title">今日推荐</view>
+                            <view class="info-text">这里有9个职位很适合你，快来看看吧</view>
+                        </view>
+                        <view class="card-time">刚才</view>
+                    </view>
+                </swiper-item>
+            </swiper>
+        </view>
     </view>
 </template>
 
-<script>
-    export default {
-        data() {
-            return {
-                
-            };
-        }
-    }
+<script setup>
+import { reactive, inject, watch, ref, onMounted } from 'vue';
+import { onLoad, onShow } from '@dcloudio/uni-app';
+const state = reactive({
+    current: 0,
+    all: [{}],
+});
+
+onLoad(() => {});
+
+// 查看消息类型
+function changeSwiperMsgType(e) {
+    const currented = e.detail.current;
+    state.current = currented;
+}
+function seemsg(index) {
+    state.current = index;
+}
 </script>
 
-<style lang="stylus">
+<style lang="stylus" scoped>
+.app-container
+    width: 100%;
+    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
+    background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
+    display: flex;
+    flex-direction: column;
 
+    .msg-AI
+        height: 42rpx;
+        font-family: Inter, Inter;
+        font-weight: 400;
+        font-size: 35rpx;
+        color: #FFFFFF;
+        line-height: 41rpx;
+        padding: 85rpx 0 0 30rpx;
+    .msg-tab
+        padding: 85rpx 0 0 30rpx;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        color: #D9D9D9;
+        .msg-tab-item
+            margin-right: 40rpx;
+        .actived
+            font-size: 28rpx;
+            color: #FFFFFF;
+            text-shadow: 0px 7px 7px rgba(0,0,0,0.25);
+    .msg-list
+        flex: 1;
+        overflow: hidden;
+        .swiper
+            height: 100%;
+            .list
+                display: flex;
+                flex-direction: column;
+                .list-card
+                    height: calc(119rpx - 26rpx - 26rpx);
+                    width: calc(100% - 36rpx - 36rpx - 23rpx - 23rpx);
+                    background: #FFFFFF;
+                    border-radius: 17rpx;
+                    display: flex;
+                    justify-content: flex-start;
+                    align-items: center;
+                    padding: 26rpx 36rpx;
+                    margin: 36rpx 23rpx;
+                    .card-img
+                        width: 63rpx;
+                        height: 63rpx;
+                        background: #D9D9D9;
+                        border-radius: 50%
+                        display: grid;
+                        place-items: center;
+                        margin-right: 30rpx;
+                        .card-img-flame
+                            width: 36rpx;
+                            height: 44rpx;
+                    .card-info
+                        flex: 1;
+                        display: flex;
+                        align-items: flex-start;
+                        flex-direction: column;
+                        .info-title
+                            font-weight: 400;
+                            font-size: 28rpx;
+                            color: #000000;
+                        .info-text
+                            font-size: 17rpx;
+                            color: #606060;
+                    .card-time
+                        font-size: 17rpx;
+                        color: #606060;
 </style>
diff --git a/pages/nearby/components/four.vue b/pages/nearby/components/four.vue
new file mode 100644
index 0000000..2de9f01
--- /dev/null
+++ b/pages/nearby/components/four.vue
@@ -0,0 +1,182 @@
+<template>
+    <scroll-view :scroll-y="true" class="nearby-scroll">
+        <view class="two-head">
+            <view class="head-item active">市北区</view>
+            <view class="head-item" v-for="(item, index) in 10" :key="index">中山路商圈</view>
+        </view>
+        <view class="nearby-list">
+            <view class="list-head" @touchmove.stop.prevent>
+                <view class="tab-options">
+                    <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
+                        <view class="tab-op-left">
+                            <view class="tab-list" v-for="(item, index) in 4" :key="index">中国万岁</view>
+                            <uni-icons type="plusempty" style="margin-right: 10rpx" size="20"></uni-icons>
+                        </view>
+                    </scroll-view>
+                    <view class="tab-op-right">
+                        <view class="tab-recommend">推荐</view>
+                        <view class="tab-filter">
+                            <view class="tab-number">1000+</view>
+                            <image class="image" src="/static/icon/filter.png"></image>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="one-cards">
+                <view class="card-box" v-for="(item, index) in 20" :key="index">
+                    <view class="box-row mar_top0">
+                        <view class="row-left">销售工程师-高级销售经理</view>
+                        <view class="row-right">1万-2万</view>
+                    </view>
+                    <view class="box-row">
+                        <view class="row-left">
+                            <view class="row-tag">本科</view>
+                            <view class="row-tag">1-5年</view>
+                        </view>
+                    </view>
+                    <view class="box-row mar_top0">
+                        <view class="row-item mineText">2024.1.8</view>
+                        <view class="row-item mineText">8人</view>
+                        <view class="row-item mineText textblue">匹配度93%</view>
+                        <view class="row-item">
+                            <uni-icons type="star" size="28"></uni-icons>
+                            <!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
+                        </view>
+                    </view>
+                    <view class="box-row">
+                        <view class="row-left mineText">湖南沃森电气科技有限公司</view>
+                        <view class="row-right mineText">青岛 青岛经济技术开发区 550m</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </scroll-view>
+</template>
+
+<script setup>
+import { reactive, inject, watch, ref, onMounted } from 'vue';
+const state = reactive({});
+</script>
+
+<style lang="stylus" scoped>
+.nearby-scroll
+    overflow: hidden;
+    .two-head
+        margin: 24rpx;
+        padding: 26rpx;
+        background: #FFFFFF;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        grid-column-gap: 40rpx;
+        grid-row-gap: 30rpx;
+        border-radius: 17rpx 17rpx 17rpx 17rpx;
+        .head-item
+            min-width: 129rpx;
+            height: 44rpx;
+            line-height: 44rpx;
+            text-align: center;
+            width: fit-content;
+            background: #D9D9D9;
+            border-radius: 17rpx 17rpx 17rpx 17rpx;
+            font-size: 21rpx;
+            color: #606060;
+        .active
+            background: #4778EC;
+            color: #FFFFFF;
+    .nearby-list
+        margin-top: 40rpx;
+        background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
+        .list-head
+            height: 77rpx;
+            background-color: #FFFFFF;
+            border-radius: 17rpx 17rpx 0rpx 0rpx;
+            position: relative;
+            top: -17rpx;
+            z-index: 9999;
+    .tab-options
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 77rpx;
+        background: #FFFFFF;
+        border-radius: 17rpx 17rpx 0rpx 0rpx;
+        padding: 0 24rpx;
+        overflow: hidden;
+        .tab-scroll
+            height: 77rpx;
+            line-height: 77rpx;
+            flex: 1;
+            overflow: hidden;
+            padding-right: 10rpx;
+            .tab-op-left
+                display: flex;
+                align-items: center;
+                flex-wrap: nowrap;
+                .tab-list
+                    text-align: center;
+                    white-space: nowrap;
+                    margin-right: 30rpx;
+                    font-size: 28rpx;
+                    color: #606060;
+        .tab-op-right
+            display: flex;
+            align-items: center;
+            .tab-recommend
+                white-space: nowrap;
+                width: 92rpx;
+                height: 42rpx;
+                background: #4778EC;
+                border-radius: 17rpx 17rpx 0rpx 17rpx;
+                text-align: center;
+                color: #FFFFFF;
+                font-size: 21rpx;
+                line-height: 42rpx;
+                margin-right: 12rpx;
+            .tab-number
+                font-size: 21rpx;
+                color: #606060;
+                line-height: 25rpx;
+                text-align: center;
+            .tab-filter
+                display: flex;
+                .image
+                    width: 28rpx;
+                    height: 27rpx;
+
+    .one-cards
+        display: flex;
+        flex-direction: column;
+        padding: 20rpx;
+        .card-box
+            width: calc(100% - 36rpx - 36rpx);
+            border-radius: 0rpx 0rpx 0rpx 0rpx;
+            background: #FFFFFF;
+            border-radius: 17rpx;
+            padding: 15rpx 36rpx;
+            margin-top: 24rpx;
+            .box-row
+                display: flex;
+                justify-content: space-between;
+                margin-top: 8rpx;
+                align-items: center;
+                .mineText
+                    font-weight: 400;
+                    font-size: 21rpx;
+                    color: #606060;
+                .textblue
+                    color: #4778EC;
+                .row-left
+                    display: flex;
+                    justify-content: space-between;
+                    .row-tag
+                        background: #13C57C;
+                        border-radius: 17rpx 17rpx 17rpx 17rpx;
+                        font-size: 21rpx;
+                        color: #FFFFFF;
+                        line-height: 25rpx;
+                        text-align: center;
+                        padding: 4rpx 8rpx;
+                        margin-right: 23rpx;
+        .card-box:first-child
+            margin-top: -14rpx;
+</style>
diff --git a/pages/nearby/components/one.vue b/pages/nearby/components/one.vue
new file mode 100644
index 0000000..0f80c75
--- /dev/null
+++ b/pages/nearby/components/one.vue
@@ -0,0 +1,222 @@
+<template>
+    <scroll-view :scroll-y="true" class="nearby-scroll">
+        <view class="nearby-map" @touchmove.stop.prevent>
+            <zhuo-tianditu-MultiPoint-Mapper
+                ref="tMap"
+                :showLabel="false"
+                :showCirle="true"
+                api-key="e122b0518f43b32dcc256edbae20a5d1"
+                @onLoad="LoadComplite"
+            ></zhuo-tianditu-MultiPoint-Mapper>
+        </view>
+        <view class="nearby-list">
+            <view class="list-head" @touchmove.stop.prevent>
+                <view class="tab-options">
+                    <view class="tab-scroll" ref="progress">
+                        <view class="tab-scr-d" :style="`width: ${state.progressWidth}`">
+                            <view class="">1km</view>
+                            <view class="">5km</view>
+                            <view class="">10km</view>
+                        </view>
+                        <bingProgressComponent
+                            strokeWidth="7px"
+                            :max="10"
+                            activeColor="#13C57C"
+                            handleWidth="10px"
+                            handleHeight="10px"
+                            handleBorderRadius="5px"
+                            handleColor="#4778EC"
+                            @change="progressChange"
+                            :showInfo="false"
+                            :width="state.progressWidth"
+                        ></bingProgressComponent>
+                    </view>
+                    <view class="tab-op-right">
+                        <view class="tab-recommend">推荐</view>
+                        <view class="tab-filter">
+                            <view class="tab-number">1000+</view>
+                            <image class="image" src="/static/icon/filter.png"></image>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="one-cards">
+                <view class="card-box" v-for="(item, index) in 20" :key="index">
+                    <view class="box-row mar_top0">
+                        <view class="row-left">销售工程师-高级销售经理</view>
+                        <view class="row-right">1万-2万</view>
+                    </view>
+                    <view class="box-row">
+                        <view class="row-left">
+                            <view class="row-tag">本科</view>
+                            <view class="row-tag">1-5年</view>
+                        </view>
+                    </view>
+                    <view class="box-row mar_top0">
+                        <view class="row-item mineText">2024.1.8</view>
+                        <view class="row-item mineText">8人</view>
+                        <view class="row-item mineText textblue">匹配度93%</view>
+                        <view class="row-item">
+                            <uni-icons type="star" size="28"></uni-icons>
+                            <!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
+                        </view>
+                    </view>
+                    <view class="box-row">
+                        <view class="row-left mineText">湖南沃森电气科技有限公司</view>
+                        <view class="row-right mineText">青岛 青岛经济技术开发区 550m</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </scroll-view>
+</template>
+
+<script setup>
+import bingProgressComponent from '/components/bing-progress/bing-progress.vue';
+import { reactive, inject, watch, ref, onMounted, onBeforeUnmount } from 'vue';
+const tMap = ref();
+const progress = ref();
+const state = reactive({
+    progressWidth: '150px',
+});
+
+onMounted(() => {
+    const query = uni.createSelectorQuery().in(this);
+    query
+        .select('.tab-scroll')
+        .boundingClientRect((data) => {
+            state.progressWidth = data.width - 50 + 'px';
+        })
+        .exec();
+    tMap.value.open(104.397894, 31.126855);
+});
+
+// 初始化
+function LoadComplite() {
+    console.log('天地图加载完成');
+    const list = [
+        {
+            id: 0,
+            label: '',
+            lat: 31.126855,
+            lon: 104.397894,
+        },
+    ];
+    tMap.value.addFeature(list);
+}
+function progressChange(e) {
+    tMap.value.changeRange(e.value);
+}
+</script>
+
+<style lang="stylus" scoped>
+.nearby-scroll
+    overflow: hidden;
+    .nearby-map
+        height: 467rpx;
+        background: #e8e8e8;
+    .nearby-list
+        background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
+        .list-head
+            height: 77rpx;
+            background-color: #FFFFFF;
+            border-radius: 17rpx 17rpx 0rpx 0rpx;
+            position: relative;
+            top: -17rpx;
+            z-index: 9999;
+    .tab-options
+        margin-top: -15rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 77rpx;
+        background: #FFFFFF;
+        border-radius: 17rpx 17rpx 0rpx 0rpx;
+        padding: 0 24rpx;
+        overflow: hidden;
+        .tab-scroll
+            height: 77rpx;
+            flex: 1;
+            padding-right: 20rpx;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+            .tab-scr-d
+                display: flex;
+                justify-content: space-between;
+                font-weight: 400;
+                font-size: 21rpx;
+                color: #000000;
+            .tab-op-left
+                display: flex;
+                align-items: center;
+                flex-wrap: nowrap;
+                .tab-list
+                    text-align: center;
+                    white-space: nowrap;
+                    margin-right: 30rpx;
+                    font-size: 28rpx;
+                    color: #606060;
+        .tab-op-right
+            display: flex;
+            align-items: center;
+            .tab-recommend
+                white-space: nowrap;
+                width: 92rpx;
+                height: 42rpx;
+                background: #4778EC;
+                border-radius: 17rpx 17rpx 0rpx 17rpx;
+                text-align: center;
+                color: #FFFFFF;
+                font-size: 21rpx;
+                line-height: 42rpx;
+                margin-right: 12rpx;
+            .tab-number
+                font-size: 21rpx;
+                color: #606060;
+                line-height: 25rpx;
+                text-align: center;
+            .tab-filter
+                display: flex;
+                .image
+                    width: 28rpx;
+                    height: 27rpx;
+
+    .one-cards
+        display: flex;
+        flex-direction: column;
+        padding: 0 20rpx;
+        .card-box
+            width: calc(100% - 36rpx - 36rpx);
+            border-radius: 0rpx 0rpx 0rpx 0rpx;
+            background: #FFFFFF;
+            border-radius: 17rpx;
+            padding: 15rpx 36rpx;
+            margin-top: 24rpx;
+            .box-row
+                display: flex;
+                justify-content: space-between;
+                margin-top: 8rpx;
+                align-items: center;
+                .mineText
+                    font-weight: 400;
+                    font-size: 21rpx;
+                    color: #606060;
+                .textblue
+                    color: #4778EC;
+                .row-left
+                    display: flex;
+                    justify-content: space-between;
+                    .row-tag
+                        background: #13C57C;
+                        border-radius: 17rpx 17rpx 17rpx 17rpx;
+                        font-size: 21rpx;
+                        color: #FFFFFF;
+                        line-height: 25rpx;
+                        text-align: center;
+                        padding: 4rpx 8rpx;
+                        margin-right: 23rpx;
+        .card-box:first-child
+            margin-top: 6rpx;
+</style>
diff --git a/pages/nearby/components/three.vue b/pages/nearby/components/three.vue
new file mode 100644
index 0000000..857fc17
--- /dev/null
+++ b/pages/nearby/components/three.vue
@@ -0,0 +1,248 @@
+<template>
+    <scroll-view :scroll-y="true" class="nearby-scroll">
+        <view class="three-head" @touchmove.stop.prevent>
+            <scroll-view class="scroll-head" :scroll-x="true" :show-scrollbar="false">
+                <view class="metro">
+                    <view class="metro-one">1号线</view>
+                    <view class="metro-two">王家港-东郭庄</view>
+                    <view class="metro-three">
+                        <view class="three-background">
+                            <view class="three-items">
+                                <view class="three-item">
+                                    <view class="item-dont dontstart"></view>
+                                    <view class="item-text">王家港</view>
+                                </view>
+                                <view class="three-item" v-for="(item, index) in 20" :key="index">
+                                    <view class="item-dont"></view>
+                                    <view class="item-text">王家港</view>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </scroll-view>
+        </view>
+        <view class="nearby-list">
+            <view class="list-head" @touchmove.stop.prevent>
+                <view class="tab-options">
+                    <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
+                        <view class="tab-op-left">
+                            <view class="tab-list" v-for="(item, index) in 4" :key="index">中国万岁</view>
+                            <uni-icons type="plusempty" style="margin-right: 10rpx" size="20"></uni-icons>
+                        </view>
+                    </scroll-view>
+                    <view class="tab-op-right">
+                        <view class="tab-recommend">推荐</view>
+                        <view class="tab-filter">
+                            <view class="tab-number">1000+</view>
+                            <image class="image" src="/static/icon/filter.png"></image>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="one-cards">
+                <view class="card-box" v-for="(item, index) in 20" :key="index">
+                    <view class="box-row mar_top0">
+                        <view class="row-left">销售工程师-高级销售经理</view>
+                        <view class="row-right">1万-2万</view>
+                    </view>
+                    <view class="box-row">
+                        <view class="row-left">
+                            <view class="row-tag">本科</view>
+                            <view class="row-tag">1-5年</view>
+                        </view>
+                    </view>
+                    <view class="box-row mar_top0">
+                        <view class="row-item mineText">2024.1.8</view>
+                        <view class="row-item mineText">8人</view>
+                        <view class="row-item mineText textblue">匹配度93%</view>
+                        <view class="row-item">
+                            <uni-icons type="star" size="28"></uni-icons>
+                            <!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
+                        </view>
+                    </view>
+                    <view class="box-row">
+                        <view class="row-left mineText">湖南沃森电气科技有限公司</view>
+                        <view class="row-right mineText">青岛 青岛经济技术开发区 550m</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </scroll-view>
+</template>
+
+<script setup>
+import { reactive, inject, watch, ref, onMounted } from 'vue';
+const state = reactive({});
+</script>
+
+<style lang="stylus" scoped>
+.nearby-scroll
+    overflow: hidden;
+    .three-head
+        margin: 24rpx;
+        padding: 26rpx;
+        background: #FFFFFF;
+        border-radius: 17rpx 17rpx 17rpx 17rpx;
+        .scroll-head
+            width: 100%;
+            overflow: hidden;
+        .metro
+            width: 100%;
+            .metro-one
+                font-size: 28rpx;
+                color: #000000;
+                line-height: 33rpx;
+            .metro-two
+                font-size: 21rpx;
+                color: #606060;
+                line-height: 25rpx;
+                margin-top: 6rpx;
+            .metro-three
+                width: fit-content;
+                margin-top: 26rpx;
+                .three-background
+                    position: relative;
+                    .three-items
+                        position: relative;
+                        top: -17rpx;
+                        display: flex;
+                        justify-content: space-between;
+                        z-index: 2;
+                        .three-item
+                            margin-right: 70rpx;
+                            .item-dont
+                                width: 17rpx;
+                                height: 17rpx;
+                                background: #FFFFFF;
+                                border-radius: 50%;
+                                position: relative;
+                                margin-bottom: 10rpx;
+                            .dontstart::after
+                                position: absolute;
+                                content: '始';
+                                color: #FFFFFF;
+                                font-size: 20rpx;
+                                text-align: center;
+                                left: 0;
+                                top: -5rpx;
+                                width: 27rpx;
+                                height: 27rpx;
+                                line-height: 28rpx;
+                                background: blue;
+                                border-radius: 50%;
+                            .item-text
+                                width: 23rpx;
+                                font-size: 21rpx;
+                                color: #606060;
+                                line-height: 25rpx;
+                                text-align: center;
+                        .three-item:last-child
+                            margin-right: 0;
+                .three-background::after
+                    position: absolute;
+                    content: '';
+                    left: 0;
+                    top: -17rpx;
+                    width: 100%;
+                    height: 17rpx;
+                    background: #FFCB47;
+                    border-radius: 17rpx 17rpx 17rpx 17rpx;
+                    z-index: 1;
+    .nearby-list
+        margin-top: 40rpx;
+        background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
+        .list-head
+            height: 77rpx;
+            background-color: #FFFFFF;
+            border-radius: 17rpx 17rpx 0rpx 0rpx;
+            position: relative;
+            top: -17rpx;
+            z-index: 9999;
+    .tab-options
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 77rpx;
+        background: #FFFFFF;
+        border-radius: 17rpx 17rpx 0rpx 0rpx;
+        padding: 0 24rpx;
+        overflow: hidden;
+        .tab-scroll
+            height: 77rpx;
+            line-height: 77rpx;
+            flex: 1;
+            overflow: hidden;
+            padding-right: 10rpx;
+            .tab-op-left
+                display: flex;
+                align-items: center;
+                flex-wrap: nowrap;
+                .tab-list
+                    text-align: center;
+                    white-space: nowrap;
+                    margin-right: 30rpx;
+                    font-size: 28rpx;
+                    color: #606060;
+        .tab-op-right
+            display: flex;
+            align-items: center;
+            .tab-recommend
+                white-space: nowrap;
+                width: 92rpx;
+                height: 42rpx;
+                background: #4778EC;
+                border-radius: 17rpx 17rpx 0rpx 17rpx;
+                text-align: center;
+                color: #FFFFFF;
+                font-size: 21rpx;
+                line-height: 42rpx;
+                margin-right: 12rpx;
+            .tab-number
+                font-size: 21rpx;
+                color: #606060;
+                line-height: 25rpx;
+                text-align: center;
+            .tab-filter
+                display: flex;
+                .image
+                    width: 28rpx;
+                    height: 27rpx;
+
+    .one-cards
+        display: flex;
+        flex-direction: column;
+        padding: 20rpx;
+        .card-box
+            width: calc(100% - 36rpx - 36rpx);
+            border-radius: 0rpx 0rpx 0rpx 0rpx;
+            background: #FFFFFF;
+            border-radius: 17rpx;
+            padding: 15rpx 36rpx;
+            margin-top: 24rpx;
+            .box-row
+                display: flex;
+                justify-content: space-between;
+                margin-top: 8rpx;
+                align-items: center;
+                .mineText
+                    font-weight: 400;
+                    font-size: 21rpx;
+                    color: #606060;
+                .textblue
+                    color: #4778EC;
+                .row-left
+                    display: flex;
+                    justify-content: space-between;
+                    .row-tag
+                        background: #13C57C;
+                        border-radius: 17rpx 17rpx 17rpx 17rpx;
+                        font-size: 21rpx;
+                        color: #FFFFFF;
+                        line-height: 25rpx;
+                        text-align: center;
+                        padding: 4rpx 8rpx;
+                        margin-right: 23rpx;
+        .card-box:first-child
+            margin-top: -14rpx;
+</style>
diff --git a/pages/nearby/components/two.vue b/pages/nearby/components/two.vue
new file mode 100644
index 0000000..75bab45
--- /dev/null
+++ b/pages/nearby/components/two.vue
@@ -0,0 +1,190 @@
+<template>
+    <scroll-view :scroll-y="true" class="nearby-scroll">
+        <view class="two-head">
+            <view class="head-item active">市北区</view>
+            <view class="head-item">市北区</view>
+            <view class="head-item">市北区</view>
+            <view class="head-item">市北区</view>
+            <view class="head-item">市北区</view>
+            <view class="head-item">市北区</view>
+            <view class="head-item">市北区</view>
+            <view class="head-item">市北区</view>
+            <view class="head-item">市北区</view>
+            <view class="head-item">市北区</view>
+        </view>
+        <view class="nearby-list">
+            <view class="list-head" @touchmove.stop.prevent>
+                <view class="tab-options">
+                    <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
+                        <view class="tab-op-left">
+                            <view class="tab-list" v-for="(item, index) in 4" :key="index">中国万岁</view>
+                            <uni-icons type="plusempty" style="margin-right: 10rpx" size="20"></uni-icons>
+                        </view>
+                    </scroll-view>
+                    <view class="tab-op-right">
+                        <view class="tab-recommend">推荐</view>
+                        <view class="tab-filter">
+                            <view class="tab-number">1000+</view>
+                            <image class="image" src="/static/icon/filter.png"></image>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="one-cards">
+                <view class="card-box" v-for="(item, index) in 20" :key="index">
+                    <view class="box-row mar_top0">
+                        <view class="row-left">销售工程师-高级销售经理</view>
+                        <view class="row-right">1万-2万</view>
+                    </view>
+                    <view class="box-row">
+                        <view class="row-left">
+                            <view class="row-tag">本科</view>
+                            <view class="row-tag">1-5年</view>
+                        </view>
+                    </view>
+                    <view class="box-row mar_top0">
+                        <view class="row-item mineText">2024.1.8</view>
+                        <view class="row-item mineText">8人</view>
+                        <view class="row-item mineText textblue">匹配度93%</view>
+                        <view class="row-item">
+                            <uni-icons type="star" size="28"></uni-icons>
+                            <!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
+                        </view>
+                    </view>
+                    <view class="box-row">
+                        <view class="row-left mineText">湖南沃森电气科技有限公司</view>
+                        <view class="row-right mineText">青岛 青岛经济技术开发区 550m</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </scroll-view>
+</template>
+
+<script setup>
+import { reactive, inject, watch, ref, onMounted } from 'vue';
+const state = reactive({});
+</script>
+
+<style lang="stylus" scoped>
+.nearby-scroll
+    overflow: hidden;
+    .two-head
+        margin: 24rpx;
+        padding: 26rpx;
+        background: #FFFFFF;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        grid-column-gap: 40rpx;
+        grid-row-gap: 30rpx;
+        border-radius: 17rpx 17rpx 17rpx 17rpx;
+        .head-item
+            min-width: 129rpx;
+            height: 44rpx;
+            line-height: 44rpx;
+            text-align: center;
+            width: fit-content;
+            background: #D9D9D9;
+            border-radius: 17rpx 17rpx 17rpx 17rpx;
+            font-size: 21rpx;
+            color: #606060;
+        .active
+            background: #4778EC;
+            color: #FFFFFF;
+    .nearby-list
+        margin-top: 40rpx;
+        background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
+        .list-head
+            height: 77rpx;
+            background-color: #FFFFFF;
+            border-radius: 17rpx 17rpx 0rpx 0rpx;
+            position: relative;
+            top: -17rpx;
+            z-index: 9999;
+    .tab-options
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 77rpx;
+        background: #FFFFFF;
+        border-radius: 17rpx 17rpx 0rpx 0rpx;
+        padding: 0 24rpx;
+        overflow: hidden;
+        .tab-scroll
+            height: 77rpx;
+            line-height: 77rpx;
+            flex: 1;
+            overflow: hidden;
+            padding-right: 10rpx;
+            .tab-op-left
+                display: flex;
+                align-items: center;
+                flex-wrap: nowrap;
+                .tab-list
+                    text-align: center;
+                    white-space: nowrap;
+                    margin-right: 30rpx;
+                    font-size: 28rpx;
+                    color: #606060;
+        .tab-op-right
+            display: flex;
+            align-items: center;
+            .tab-recommend
+                white-space: nowrap;
+                width: 92rpx;
+                height: 42rpx;
+                background: #4778EC;
+                border-radius: 17rpx 17rpx 0rpx 17rpx;
+                text-align: center;
+                color: #FFFFFF;
+                font-size: 21rpx;
+                line-height: 42rpx;
+                margin-right: 12rpx;
+            .tab-number
+                font-size: 21rpx;
+                color: #606060;
+                line-height: 25rpx;
+                text-align: center;
+            .tab-filter
+                display: flex;
+                .image
+                    width: 28rpx;
+                    height: 27rpx;
+
+    .one-cards
+        display: flex;
+        flex-direction: column;
+        padding: 20rpx;
+        .card-box
+            width: calc(100% - 36rpx - 36rpx);
+            border-radius: 0rpx 0rpx 0rpx 0rpx;
+            background: #FFFFFF;
+            border-radius: 17rpx;
+            padding: 15rpx 36rpx;
+            margin-top: 24rpx;
+            .box-row
+                display: flex;
+                justify-content: space-between;
+                margin-top: 8rpx;
+                align-items: center;
+                .mineText
+                    font-weight: 400;
+                    font-size: 21rpx;
+                    color: #606060;
+                .textblue
+                    color: #4778EC;
+                .row-left
+                    display: flex;
+                    justify-content: space-between;
+                    .row-tag
+                        background: #13C57C;
+                        border-radius: 17rpx 17rpx 17rpx 17rpx;
+                        font-size: 21rpx;
+                        color: #FFFFFF;
+                        line-height: 25rpx;
+                        text-align: center;
+                        padding: 4rpx 8rpx;
+                        margin-right: 23rpx;
+        .card-box:first-child
+            margin-top: -14rpx;
+</style>
diff --git a/pages/nearby/nearby.vue b/pages/nearby/nearby.vue
new file mode 100644
index 0000000..e52f705
--- /dev/null
+++ b/pages/nearby/nearby.vue
@@ -0,0 +1,84 @@
+<template>
+    <view class="app-container">
+        <view class="nearby-head">
+            <view class="head-item" :class="{ actived: state.current === 0 }" @click="changeType(0)">附近工作</view>
+            <view class="head-item" :class="{ actived: state.current === 1 }" @click="changeType(1)">区县工作</view>
+            <view class="head-item" :class="{ actived: state.current === 2 }" @click="changeType(2)">地铁周边</view>
+            <view class="head-item" :class="{ actived: state.current === 3 }" @click="changeType(3)">商圈附近</view>
+        </view>
+        <view class="nearby-content">
+            <swiper class="swiper" :current="state.current" @change="changeSwiperType">
+                <swiper-item class="swiper-item" disable-touch>
+                    <oneComponent></oneComponent>
+                </swiper-item>
+                <swiper-item class="swiper-item">
+                    <twoComponent></twoComponent>
+                </swiper-item>
+                <swiper-item class="swiper-item">
+                    <threeComponent></threeComponent>
+                </swiper-item>
+                <swiper-item class="swiper-item">
+                    <fourComponent></fourComponent>
+                </swiper-item>
+            </swiper>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import oneComponent from './components/one.vue';
+import twoComponent from './components/two.vue';
+import threeComponent from './components/three.vue';
+import fourComponent from './components/four.vue';
+import { reactive, inject, watch, ref, onMounted } from 'vue';
+import { onLoad, onShow } from '@dcloudio/uni-app';
+const state = reactive({
+    current: 2,
+    all: [{}],
+});
+
+onLoad(() => {});
+
+// 查看消息类型
+function changeSwiperType(e) {
+    const currented = e.detail.current;
+    state.current = currented;
+}
+function changeType(index) {
+    state.current = index;
+}
+</script>
+
+<style lang="stylus" scoped>
+.app-container
+    width: 100%;
+    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
+    background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
+    display: flex;
+    flex-direction: column;
+    .nearby-head
+        height: 63rpx;
+        font-size: 28rpx;
+        color: #FFFFFF;
+        line-height: 63rpx;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        .head-item
+            width: calc(100%  / 4);
+            z-index: 9
+        .actived
+            width: 169rpx;
+            height: 63rpx;
+            background: #13C57C;
+            box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
+            border-radius: 0rpx 0rpx 0rpx 0rpx;
+    .nearby-content
+        flex: 1;
+        overflow: hidden;
+        .swiper
+            height: 100%;
+            .swiper-item
+                display: flex;
+                flex-direction: column;
+</style>
diff --git a/static/.DS_Store b/static/.DS_Store
new file mode 100644
index 0000000..f8fd6ad
Binary files /dev/null and b/static/.DS_Store differ
diff --git a/static/icon/bell.png b/static/icon/bell.png
new file mode 100644
index 0000000..f087deb
Binary files /dev/null and b/static/icon/bell.png differ
diff --git a/static/icon/browse.png b/static/icon/browse.png
new file mode 100644
index 0000000..f7cb6fe
Binary files /dev/null and b/static/icon/browse.png differ
diff --git a/static/icon/chat4ed.png b/static/icon/chat4ed.png
new file mode 100644
index 0000000..f9e089c
Binary files /dev/null and b/static/icon/chat4ed.png differ
diff --git a/static/icon/collect.png b/static/icon/collect.png
new file mode 100644
index 0000000..9649f78
Binary files /dev/null and b/static/icon/collect.png differ
diff --git a/static/icon/edit.png b/static/icon/edit.png
new file mode 100644
index 0000000..f173310
Binary files /dev/null and b/static/icon/edit.png differ
diff --git a/static/icon/filter.png b/static/icon/filter.png
new file mode 100644
index 0000000..945b6c2
Binary files /dev/null and b/static/icon/filter.png differ
diff --git a/static/icon/flame.png b/static/icon/flame.png
new file mode 100644
index 0000000..c1c1c0c
Binary files /dev/null and b/static/icon/flame.png differ
diff --git a/static/icon/flame2.png b/static/icon/flame2.png
new file mode 100644
index 0000000..3ddd897
Binary files /dev/null and b/static/icon/flame2.png differ
diff --git a/static/icon/peopled.png b/static/icon/peopled.png
new file mode 100644
index 0000000..c806ad6
Binary files /dev/null and b/static/icon/peopled.png differ
diff --git a/static/icon/quaters.png b/static/icon/quaters.png
new file mode 100644
index 0000000..4faf70a
Binary files /dev/null and b/static/icon/quaters.png differ
diff --git a/static/icon/resume.png b/static/icon/resume.png
new file mode 100644
index 0000000..c67ee3b
Binary files /dev/null and b/static/icon/resume.png differ
diff --git a/static/tabbar/.DS_Store b/static/tabbar/.DS_Store
new file mode 100644
index 0000000..97c936e
Binary files /dev/null and b/static/tabbar/.DS_Store differ
diff --git a/static/tabbar/calendar.png b/static/tabbar/calendar.png
index b81802d..e89500c 100644
Binary files a/static/tabbar/calendar.png and b/static/tabbar/calendar.png differ
diff --git a/static/tabbar/calendared.png b/static/tabbar/calendared.png
index 383d658..d6a0d66 100644
Binary files a/static/tabbar/calendared.png and b/static/tabbar/calendared.png differ
diff --git a/static/tabbar/chat4ed.png b/static/tabbar/chat4ed.png
new file mode 100644
index 0000000..5ef0ffc
Binary files /dev/null and b/static/tabbar/chat4ed.png differ
diff --git a/static/tabbar/logo2.png b/static/tabbar/logo2.png
new file mode 100644
index 0000000..b8a573d
Binary files /dev/null and b/static/tabbar/logo2.png differ
diff --git a/static/tabbar/mined.png b/static/tabbar/mined.png
new file mode 100644
index 0000000..0fd8025
Binary files /dev/null and b/static/tabbar/mined.png differ
diff --git a/static/tabbar/post.png b/static/tabbar/post.png
index e89500c..b81802d 100644
Binary files a/static/tabbar/post.png and b/static/tabbar/post.png differ
diff --git a/static/tabbar/posted.png b/static/tabbar/posted.png
index 5f0f822..83961ee 100644
Binary files a/static/tabbar/posted.png and b/static/tabbar/posted.png differ
diff --git a/uni_modules/custom-waterfalls-flow/changelog.md b/uni_modules/custom-waterfalls-flow/changelog.md
new file mode 100644
index 0000000..2f67430
--- /dev/null
+++ b/uni_modules/custom-waterfalls-flow/changelog.md
@@ -0,0 +1,17 @@
+## 1.0.7（2022-05-26）
+1. 优化局部改变数据更新问题，避免重新加载数据，只改变局部
+## 1.0.6（2022-04-18）
+1. 修改tab快速切换时会出现的BUG
+## 1.0.5（2022-04-18）
+1. 修复可能存在数据错误的BUG；
+2. 兼容，今后可以无需调用refresh()就可以更新数据；
+## 1.0.4（2022-04-18）
+1. 修复BUG；
+## 1.0.3（2022-04-15）
+1. 优化代码；
+2. 修改懒加载数据存在的BUG；
+## 1.0.1（2022-03-11）
+1. 增加隐藏图片字段的键名字段hideImageKey，默认hide
+2. 支持在列表中配置hide参数进行隐藏图片
+## 1.0.0（2022-03-09）
+使用最简单的思想实现瀑布流
diff --git a/uni_modules/custom-waterfalls-flow/components/custom-waterfalls-flow/custom-waterfalls-flow.vue b/uni_modules/custom-waterfalls-flow/components/custom-waterfalls-flow/custom-waterfalls-flow.vue
new file mode 100644
index 0000000..2b18e1a
--- /dev/null
+++ b/uni_modules/custom-waterfalls-flow/components/custom-waterfalls-flow/custom-waterfalls-flow.vue
@@ -0,0 +1,362 @@
+<template>
+    <view class="waterfalls-flow">
+        <view
+            v-for="(item, index) in data.column"
+            :key="index"
+            class="waterfalls-flow-column"
+            :id="`waterfalls_flow_column_${index + 1}`"
+            :msg="msg"
+            :style="{ width: w, 'margin-left': index == 0 ? 0 : m }"
+        >
+            <view
+                :class="['column-value', { 'column-value-show': item2.o }]"
+                v-for="(item2, index2) in columnValue(index)"
+                :key="index2"
+                :style="[s1]"
+                @click.stop="wapperClick(item2)"
+            >
+                <view class="inner" v-if="data.seat == 1">
+                    <!-- #ifdef MP-WEIXIN -->
+                    <!-- #ifdef VUE2 -->
+                    <slot name="slot{{item2.index}}"></slot>
+                    <!-- #endif -->
+                    <!-- #ifdef VUE3 -->
+                    <slot :name="`slot${item2.index}`"></slot>
+                    <!-- #endif -->
+                    <!-- #endif -->
+                    <!-- #ifndef MP-WEIXIN -->
+                    <slot v-bind="item2"></slot>
+                    <!-- #endif -->
+                </view>
+                <image
+                    :class="[
+                        'img',
+                        { 'img-hide': item2[hideImageKey] == true || item2[hideImageKey] == 1 },
+                        { 'img-error': !item2[data.imageKey] },
+                    ]"
+                    :src="item2[data.imageKey]"
+                    mode="widthFix"
+                    @load="imgLoad(item2, index + 1)"
+                    @error="imgError(item2, index + 1)"
+                    @click.stop="imageClick(item2)"
+                ></image>
+                <view class="inner" v-if="data.seat == 2">
+                    <!-- #ifdef MP-WEIXIN -->
+                    <!-- #ifdef VUE2 -->
+                    <slot name="slot{{item2.index}}"></slot>
+                    <!-- #endif -->
+                    <!-- #ifdef VUE3 -->
+                    <slot :name="`slot${item2.index}`"></slot>
+                    <!-- #endif -->
+                    <!-- #endif -->
+                    <!-- #ifndef MP-WEIXIN -->
+                    <slot v-bind="item2"></slot>
+                    <!-- #endif -->
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+<script>
+export default {
+    props: {
+        value: Array,
+        column: {
+            // 列的数量
+            type: [String, Number],
+            default: 2,
+        },
+        maxColumn: {
+            // 最大列数
+            type: [String, Number],
+            default: 5,
+        },
+        columnSpace: {
+            // 列之间的间距 百分比
+            type: [String, Number],
+            default: 2,
+        },
+        imageKey: {
+            // 图片key
+            type: [String],
+            default: 'image',
+        },
+        hideImageKey: {
+            // 隐藏图片key
+            type: [String],
+            default: 'hide',
+        },
+        seat: {
+            // 文本的位置，1图片之上 2图片之下
+            type: [String, Number],
+            default: 2,
+        },
+        listStyle: {
+            // 单个展示项的样式：eg:{'background':'red'}
+            type: Object,
+        },
+    },
+    data() {
+        return {
+            data: {
+                list: this.value ? this.value : [],
+                column: this.column < 2 ? 2 : this.column,
+                columnSpace: this.columnSpace <= 5 ? this.columnSpace : 5,
+                imageKey: this.imageKey,
+                seat: this.seat,
+            },
+            msg: 0,
+            listInitStyle: {
+                'border-radius': '12rpx',
+                'margin-bottom': '20rpx',
+                'background-color': '#fff',
+            },
+            adds: [], //预置数据
+            isLoaded: true,
+            curIndex: 0,
+            isRefresh: true,
+            flag: false,
+            refreshDatas: [],
+        };
+    },
+    computed: {
+        // 计算列宽
+        w() {
+            const column_rate = `${100 / this.data.column - +this.data.columnSpace}%`;
+            return column_rate;
+        },
+        // 计算margin
+        m() {
+            const column_margin = `${
+                (100 - (100 / this.data.column - +this.data.columnSpace).toFixed(5) * this.data.column) /
+                (this.data.column - 1)
+            }%`;
+            return column_margin;
+        },
+        // list样式
+        s1() {
+            return { ...this.listInitStyle, ...this.listStyle };
+        },
+    },
+    created() {
+        // 初始化
+        this.refresh();
+    },
+    methods: {
+        // 预加载图片
+        loadImages(idx = 0) {
+            let count = 0;
+            const newList = this.data.list.filter((item, index) => index >= idx);
+            for (let i = 0; i < newList.length; i++) {
+                // #ifndef APP-PLUS
+                uni.getImageInfo({
+                    src: `${newList[i][this.imageKey]}.jpg`,
+                    complete: (res) => {
+                        count++;
+                        if (count == newList.length) this.initValue(idx);
+                    },
+                });
+                // #endif
+                // #ifdef APP-PLUS
+                plus.io.getImageInfo({
+                    src: `${newList[i][this.imageKey]}.jpg`,
+                    complete: (res) => {
+                        count++;
+                        if (count == newList.length) this.initValue(idx);
+                    },
+                });
+                // #endif
+            }
+        },
+        // 刷新
+        refresh() {
+            if (!this.isLoaded) {
+                this.refreshDatas = this.value;
+                return false;
+            }
+            setTimeout(() => {
+                this.refreshDatas = [];
+                this.isRefresh = true;
+                this.adds = [];
+                this.data.list = this.value ? this.value : [];
+                this.data.column = this.column < 2 ? 2 : this.column >= this.maxColumn ? this.maxColumn : this.column;
+                this.data.columnSpace = this.columnSpace <= 5 ? this.columnSpace : 5;
+                this.data.imageKey = this.imageKey;
+                this.data.seat = this.seat;
+                this.curIndex = 0;
+                // 每列的数据初始化
+                for (let i = 1; i <= this.data.column; i++) {
+                    this.data[`column_${i}_values`] = [];
+                    this.msg++;
+                }
+                this.$nextTick(() => {
+                    this.initValue(this.curIndex, 'refresh==>');
+                });
+            }, 1);
+        },
+        columnValue(index) {
+            return this.data[`column_${index + 1}_values`];
+        },
+        change(newValue) {
+            for (let i = 0; i < this.data.list.length; i++) {
+                const cv = this.data[`column_${this.data.list[i].column}_values`];
+                for (let j = 0; j < cv.length; j++) {
+                    if (newValue[i] && i === cv[j].index) {
+                        this.data[`column_${this.data.list[i].column}_values`][j] = Object.assign(cv[j], newValue[i]);
+                        this.msg++;
+                        break;
+                    }
+                }
+            }
+        },
+        getMin(a, s) {
+            let m = a[0][s];
+            let mo = a[0];
+            for (var i = a.length - 1; i >= 0; i--) {
+                if (a[i][s] < m) {
+                    m = a[i][s];
+                }
+            }
+            mo = a.filter((i) => i[s] == m);
+            return mo[0];
+        },
+        // 计算每列的高度
+        getMinColumnHeight() {
+            return new Promise((resolve) => {
+                const heightArr = [];
+                for (let i = 1; i <= this.data.column; i++) {
+                    const query = uni.createSelectorQuery().in(this);
+                    query
+                        .select(`#waterfalls_flow_column_${i}`)
+                        .boundingClientRect((data) => {
+                            heightArr.push({ column: i, height: data.height });
+                        })
+                        .exec(() => {
+                            if (this.data.column <= heightArr.length) {
+                                resolve(this.getMin(heightArr, 'height'));
+                            }
+                        });
+                }
+            });
+        },
+        async initValue(i, from) {
+            this.isLoaded = false;
+            if (i >= this.data.list.length || this.refreshDatas.length) {
+                this.msg++;
+                this.loaded();
+                return false;
+            }
+            const minHeightRes = await this.getMinColumnHeight();
+            const c = this.data[`column_${minHeightRes.column}_values`];
+            this.data.list[i].column = minHeightRes.column;
+            c.push({ ...this.data.list[i], cIndex: c.length, index: i, o: 0 });
+            this.msg++;
+        },
+        // 图片加载完成
+        imgLoad(item, c) {
+            const i = item.index;
+            item.o = 1;
+            this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)));
+            this.initValue(i + 1);
+        },
+        // 图片加载失败
+        imgError(item, c) {
+            const i = item.index;
+            item.o = 1;
+            item[this.data.imageKey] = null;
+            this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)));
+            this.initValue(i + 1);
+        },
+        // 渲染结束
+        loaded() {
+            if (this.refreshDatas.length) {
+                this.isLoaded = true;
+                this.refresh();
+                return false;
+            }
+            this.curIndex = this.data.list.length;
+            if (this.adds.length) {
+                this.data.list = this.adds[0];
+                this.adds.splice(0, 1);
+                this.initValue(this.curIndex);
+            } else {
+                if (this.data.list.length) this.$emit('loaded');
+                this.isLoaded = true;
+                this.isRefresh = false;
+            }
+        },
+        // 单项点击事件
+        wapperClick(item) {
+            this.$emit('wapperClick', item);
+        },
+        // 图片点击事件
+        imageClick(item) {
+            this.$emit('imageClick', item);
+        },
+    },
+    watch: {
+        value: {
+            deep: true,
+            handler(newValue, oldValue) {
+                setTimeout(() => {
+                    this.$nextTick(() => {
+                        if (this.isRefresh) return false;
+                        if (this.isLoaded) {
+                            // if (newValue.length <= this.curIndex) return this.refresh();
+                            if (newValue.length <= this.curIndex) return this.change(newValue);
+                            this.data.list = newValue;
+                            this.$nextTick(() => {
+                                this.initValue(this.curIndex, 'watch==>');
+                            });
+                        } else {
+                            this.adds.push(newValue);
+                        }
+                    });
+                }, 10);
+            },
+        },
+        column(newValue) {
+            this.refresh();
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+.waterfalls-flow {
+    overflow: hidden;
+
+    &-column {
+        float: left;
+    }
+}
+
+.column-value {
+    width: 100%;
+    font-size: 0;
+    overflow: hidden;
+    transition: opacity 0.4s;
+    opacity: 0;
+
+    &-show {
+        opacity: 1;
+    }
+
+    .inner {
+        font-size: 30rpx;
+    }
+
+    .img {
+        width: 100%;
+
+        &-hide {
+            display: none;
+        }
+
+        &-error {
+            background: #f2f2f2
+                url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiAQMAAAAatXkPAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAAIZJREFUCNdlzjEKwkAUBNAfEGyCuYBkLyLuxRYW2SKlV1JSeA2tUiZg4YrLjv9PGsHqNTPMSAQuyAJgRDHSyvBPwtZoSJXakeJI9iuRLGDygdl6V0yKDtyMAeMPZySj8yfD+UapvRPj2JOwkyAooSV5IwdDjPdCPspe8LyTl9IKJvDETKKRv6vnlUasgg0fAAAAAElFTkSuQmCC)
+                no-repeat center center;
+        }
+    }
+}
+</style>
diff --git a/uni_modules/custom-waterfalls-flow/package.json b/uni_modules/custom-waterfalls-flow/package.json
new file mode 100644
index 0000000..41556e4
--- /dev/null
+++ b/uni_modules/custom-waterfalls-flow/package.json
@@ -0,0 +1,80 @@
+{
+  "id": "custom-waterfalls-flow",
+  "displayName": "瀑布流 灵活配置 简单易用 兼容vue2vue3小程序、H5、app等多端",
+  "version": "1.0.7",
+  "description": "瀑布流，根据内容自动计算进行流式布局，简单参数配置，实现兼容多端及vue2和vue3的瀑布流布局；uv-ui发布https://ext.dcloud.net.cn/plugin?name=uv-ui",
+  "keywords": [
+    "瀑布流",
+    "瀑布流式布局"
+],
+  "repository": "https://gitee.com/my_dear_li_pan/my-uni-modules.git",
+"engines": {
+  },
+  "dcloudext": {
+    "category": [
+        "前端组件",
+        "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "n"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "u",
+          "Edge": "u",
+          "Firefox": "y",
+          "Safari": "u"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "u",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/custom-waterfalls-flow/readme.md b/uni_modules/custom-waterfalls-flow/readme.md
new file mode 100644
index 0000000..5ac9f19
--- /dev/null
+++ b/uni_modules/custom-waterfalls-flow/readme.md
@@ -0,0 +1,445 @@
+- <a href="#c1" title="概要">概要</a>
+- <a href="#c2" title="支持的平台">支持的平台</a>
+- <a href="#c3" title="使用方式">使用方式</a>
+- <a href="#c4" title="属性说明">属性说明</a>
+- <a href="#c5" title="事件说明">事件说明</a>
+- <a href="#c6" title="组件方法">组件方法</a>
+- <a href="#c7" title="refresh的使用示例">refresh的使用示例</a>
+- <a href="#c8" title="隐藏单项图片示例">隐藏单项图片示例</a>
+- <a href="#c9" title="完整示例">完整示例</a>
+- <a href="#c10" title="温馨提示">温馨提示</a>
+- <a href="#c11" title="关注我，不迷路">关注我，不迷路</a>
+- <a href="#c12" title="个人作品展示">个人作品展示</a>
+ 
+<div id="c1"></div>
+
+#### 概要
+
+custom-waterfalls-flow是一个瀑布流插件，灵活配置、简单易用、兼容多端、同时兼容vue2和vue3。
+
+最近在做项目的时候需要用到瀑布流，于是在插件市场找了一些，下载量最高的是用了定位来做的，我认为瀑布流可以不用定位去实现，于是我就自己写了该插件。经过反复的测试优化，最终搞定！
+
+**设置列数：** 瀑布流的列数可以通过参数直接控制，实时监听，随改随生效。列数最小为2，最大默认为5，可以通过maxColumn参数去控制最大列数，理论上可以设置无限大，具体值自己拿捏。
+
+**更新数据：** 瀑布流的每项数据，可以直接通过修改value，随改随生效，这样可以实现加载更多数据。已经渲染过的数据不会再次渲染，每次只会渲染新增的数据，这样避免了数据越多渲染越慢的情况。可以调用组件的```refresh()```方法进行数据刷新，注意vue2和vue3中调用子组件的方法有区别，也会在下面进行说明。
+
+**展示方式：** 瀑布流可以是纯图片，可以使用插槽自定义文字描述，微信小程序与app、h5使用会有些区别，也会在下面具体说明。内容高度及排序都不用担心，会根据每项的内容高度自动计算。
+
+**实现思路：** 通过配置列数，先渲染出每列，再计算每列的高度，最小的那列就加入一条数据进行渲染，然后再重复计算每列，高度小的加入数据...其实思路是很简单的。
+
+uniapp插件市场地址：[https://ext.dcloud.net.cn/plugin?id=7594](https://ext.dcloud.net.cn/plugin?id=7594)
+
+<div id="c2"></div>
+
+#### 支持的平台
+
+H5、app、微信小程序（这三个平台经过反复测试优化，兼容vue2和vue3）。
+
+百度小程序：由于插槽不能循环渲染的限制，只支持纯图片瀑布流。
+
+其他小程序：暂未测试，需要的可以自己测试和修改，思路肯定是没错的，主要是兼容插槽的问题。
+
+nvue：暂不支持，后期可能会支持，目前需要的可以自己修改源码。
+
+<div id="c3"></div>
+
+#### 使用方式
+
+**1、导入插件**
+
+该组件符合uni_modules规范，使用Hbuilderx导入插件，导入到项目根目录中的uni_modules文件夹中。
+
+**2、template中使用**
+
+uni_modules规范在项目页面中直接使用，不需要单独引入注册组件。
+
+***纯图片瀑布流使用***
+
+```
+<template>
+	<custom-waterfalls-flow :value="data.list"></custom-waterfalls-flow>
+</template>
+```
+
+***微信小程序自定义内容使用***
+
+微信小程序没有动态模板，使用for循环的方式进行渲染。
+
+```
+<template>
+	<custom-waterfalls-flow :value="data.list">
+		<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
+			<view class="title">{{item.title}}</view>
+			<view class="desc">{{item.desc}}</view>
+		</view>
+	</custom-waterfalls-flow>
+</template>
+```
+
+***h5、app端自定义内容使用***
+
+使用作用域插槽实现
+
+```
+<template>
+	<custom-waterfalls-flow :value="data.list">
+		<template v-slot:default="item">
+			<view class="item">
+				<view class="title">{{item.title}}</view>
+				<view class="desc">{{item.desc}}</view>
+			</view>
+		</template>
+	</custom-waterfalls-flow>
+</template>
+```
+
+***小程序、h5、app等多端自定义内容使用***
+
+条件渲染-多端同时兼容
+
+```
+<template>
+	<custom-waterfalls-flow :value="data.list">
+		<!-- #ifdef MP-WEIXIN -->
+		<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
+			<view class="title">{{item.title}}</view>
+			<view class="desc">{{item.desc}}</view>
+		</view>
+		<!-- #endif -->
+		<!-- #ifndef MP-WEIXIN -->
+		<template v-slot:default="item">
+			<view class="item">
+				<view class="title">{{item.title}}</view>
+				<view class="desc">{{item.desc}}</view>
+			</view>
+		</template>
+		<!-- #endif -->
+	</custom-waterfalls-flow>
+</template>
+```
+
+<div id="c4"></div>
+
+#### 属性说明
+
+参数|说明|类型|是否必填|可选值|默认值
+-|-|-|-|-|-|
+value|渲染的列表|Array|是|-|-
+column|列数|Number|否|2-maxColumn|2
+maxColumn|最大列数|Number|否|>2|5
+columnSpace|列之间的间距（单位是百分比）|Number|否|-|2
+imageKey|列表中的图片字段的键名|String|否|-|image
+hideImageKey|隐藏图片字段的键名|String|否|-|hide
+seat|自定义文字的位置,1-图片上方，2-图片下方|Number|否|1/2|2
+listStyle|单个展示项的样式|Object|否|示例：```{'background':'red'}```|-
+
+<div id="c5"></div>
+
+#### 事件说明
+
+事件名称|说明|回调参数
+-|-|-|
+@loaded|图片加载完成事件|-
+@wapperClick|单项点击事件|单项对应参数
+@imageClick|图片点击事件|单项对应参数
+
+<div id="c6"></div>
+
+#### 组件方法
+
+事件名称|说明|参数|使用场景
+-|-|-|-
+refresh|刷新数据，数据初始化，vue2中使用：```this.$refs.waterfallsFlowRef.refresh();```；vue3中使用：```const waterfallsFlowRef = ref(null);waterfallsFlowRef.value.refresh();```|-|下拉刷新等
+
+<div id="c7"></div>
+
+#### refresh的使用示例
+
+***vue2中使用***
+
+```
+<template>
+    <view>
+        <button class="btn" type="default" @click="reset()">刷新数据</button>
+    	<custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list"></custom-waterfalls-flow>
+    </view>
+</template>
+<script>
+	export default {
+	    data() {
+			return {
+				data:{
+					list: [
+						{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }, 
+						{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }
+					]
+				}
+			}
+		},
+		reset(){
+			this.data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
+			this.$refs.waterfallsFlowRef.refresh();
+		}
+	}
+</script>
+```
+
+***vue3中使用***
+
+```
+<template>
+    <view>
+        <button class="btn" type="default" @click="reset()">刷新数据</button>
+    	<custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list"></custom-waterfalls-flow>
+    </view>
+</template>
+<script setup>
+	import { reactive, ref } from 'vue';
+	const data = reactive({
+		list: [
+			{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }, 
+			{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }
+		]
+	});
+	const waterfallsFlowRef = ref(null);
+	function reset(){
+		data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
+		waterfallsFlowRef.value.refresh();
+	}
+</script>
+```
+
+<div id="c8"></div>
+
+#### 隐藏单项图片示例
+
+在数据列表中配置```hide:true```或者```hide:1```，就可以达到不显示图片的效果。支持使用参数hideImageKey自定义键名称，那就使用：```定义的键名称:true```或者```定义的键名称:1```。
+
+```
+<template>
+	<custom-waterfalls-flow :value="data.list">
+		<!-- #ifdef MP-WEIXIN -->
+		<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
+			<view class="title">{{item.title}}</view>
+			<view class="desc">{{item.desc}}</view>
+		</view>
+		<!-- #endif -->
+		<!-- #ifndef MP-WEIXIN -->
+		<template v-slot:default="item">
+			<view class="item">
+				<view class="title">{{item.title}}</view>
+				<view class="desc">{{item.desc}}</view>
+			</view>
+		</template>
+		<!-- #endif -->
+	</custom-waterfalls-flow>
+</template>
+<script setup>
+	import { reactive, ref } from 'vue';
+	const data = reactive({
+		list: [
+			{ image: 'https://via.placeholder.com/200x500.png/ff0000',
+			hide:1,title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }, 
+			{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }
+		]
+	});
+</script>
+```
+
+<div id="c9"></div>
+
+#### 完整示例
+
+```
+<template>
+	<view style="padding: 0 10rpx;">
+		<view class="handle">
+			<button class="btn" type="default" @click="add()">增加数据</button>
+			<button class="btn" type="default" @click="changeColumn(1)">+列数({{column}})</button>
+			<button class="btn" type="default" @click="changeColumn(0)">-列数({{column}})</button>
+			<button class="btn" type="default" @click="reset()">刷新数据</button>
+		</view>
+		<custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list" :column="column" :columnSpace="1.5" :seat="2" @wapperClick="wapperClick" @imageClick="imageClick" @loaded="loaded">
+			<!-- #ifdef MP-WEIXIN -->
+			<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
+				<view class="title">{{item.title}}</view>
+				<view class="desc">{{item.desc}}</view>
+			</view>
+			<!-- #endif -->
+			<!-- #ifndef MP-WEIXIN -->
+			<template v-slot:default="item">
+				<view class="item">
+					<view class="title">{{item.title}}</view>
+					<view class="desc">{{item.desc}}</view>
+				</view>
+			</template>
+			<!-- #endif -->
+		</custom-waterfalls-flow>
+	</view>
+</template>
+<script setup>
+	// #ifdef VUE3
+	import { reactive, ref, onMounted } from 'vue';
+	const data = reactive({
+		list: [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }, 
+					{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }, 
+					{ image: 'https://via.placeholder.com/200x100.png/FFB6C1', title: '我是标题3', desc: '描述描述描述描述描述描述描述描述3' }, 
+					{ image: 'https://via.placeholder.com/200x300.png/9400D3', title: '我是标题4', desc: '描述描述描述描述描述描述描述描述4' }, 
+					{ image: 'https://via.placeholder.com/100x240.png/B0E0E6', title: '我是标题5', desc: '描述描述描述描述描述描述描述描述5' }, 
+					{ image: 'https://via.placeholder.com/140x280.png/7FFFAA', title: '我是标题6', desc: '描述描述描述描述描述描述描述描述6' }, 
+					{ image: 'https://via.placeholder.com/40x60.png/EEE8AA', title: '我是标题7', desc: '描述描述描述描述描述描述描述描述7' }]
+	});
+	const column = ref(3);
+
+	function add() {
+		const newArr = [{ image: 'https://via.placeholder.com/58x100.png/FF7F50', title: '我是标题8', desc: '描述描述描述描述描述描述描述描述8' }, 
+				{ image: 'https://via.placeholder.com/59x100.png/C0C0C0', title: '我是标题9', desc: '描述描述描述描述描述描述描述描述9' }, 
+				{ image: 'https://via.placeholder.com/60x100.png/FAEBD7', title: '我是标题10', desc: '描述描述描述描述描述描述描述描述10' }];
+		data.list = data.list.concat(newArr);
+	}
+
+	function changeColumn(h) {
+		column.value = !h ? column.value - 1 : column.value + 1;
+	}
+
+	function loaded() {
+		console.log('加载完成')
+	}
+
+	function wapperClick(item) {
+		console.log('单项点击事件', item)
+	}
+
+	function imageClick(item) {
+		console.log('图片点击事件', item)
+	}
+	const waterfallsFlowRef = ref(null);
+
+	function reset() {
+		data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
+		waterfallsFlowRef.value.refresh();
+	}
+	// #endif
+</script>
+<script>
+	// #ifdef VUE2
+	export default {
+		data() {
+			return {
+				data: {
+					list: [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }, 
+					{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }, 
+					{ image: 'https://via.placeholder.com/200x100.png/FFB6C1', title: '我是标题3', desc: '描述描述描述描述描述描述描述描述3' }, 
+					{ image: 'https://via.placeholder.com/200x300.png/9400D3', title: '我是标题4', desc: '描述描述描述描述描述描述描述描述4' }, 
+					{ image: 'https://via.placeholder.com/100x240.png/B0E0E6', title: '我是标题5', desc: '描述描述描述描述描述描述描述描述5' }, 
+					{ image: 'https://via.placeholder.com/140x280.png/7FFFAA', title: '我是标题6', desc: '描述描述描述描述描述描述描述描述6' }, 
+					{ image: 'https://via.placeholder.com/40x60.png/EEE8AA', title: '我是标题7', desc: '描述描述描述描述描述描述描述描述7' }]
+				},
+				column: 3
+			}
+		},
+		methods: {
+			add() {
+				const newArr = [{ image: 'https://via.placeholder.com/58x100.png/FF7F50', title: '我是标题8', desc: '描述描述描述描述描述描述描述描述8' }, 
+				{ image: 'https://via.placeholder.com/59x100.png/C0C0C0', title: '我是标题9', desc: '描述描述描述描述描述描述描述描述9' }, 
+				{ image: 'https://via.placeholder.com/60x100.png/FAEBD7', title: '我是标题10', desc: '描述描述描述描述描述描述描述描述10' }]
+				this.data.list = this.data.list.concat(newArr);
+			},
+			changeColumn(h) {
+				this.column = !h ? this.column - 1 : this.column + 1;
+			},
+			loaded() {
+				console.log('加载完成')
+			},
+			wapperClick(item) {
+				console.log('单项点击事件', item)
+			},
+			imageClick(item) {
+				console.log('图片点击事件', item)
+			},
+			reset() {
+				this.data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
+				this.$refs.waterfallsFlowRef.refresh();
+			}
+		}
+	}
+	// #endif
+</script>
+<style>
+	page {
+		background-color: #f2f5f9;
+	}
+</style>
+<style lang="scss" scoped>
+	.handle {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		margin-bottom: 20rpx;
+		padding: 10rpx;
+
+		.btn {
+			margin: 20rpx 10rpx;
+			padding: 0 20rpx;
+			background: #2878FF;
+			font-size: 28rpx;
+			color: #fff;
+
+			&::after {
+				border: 0;
+			}
+		}
+	}
+
+	.item {
+		padding: 10rpx 10rpx 20rpx;
+
+		.title {
+			line-height: 48rpx;
+			font-size: 28rpx;
+			color: #222;
+		}
+
+		.desc {
+			font-size: 24rpx;
+			color: #666;
+		}
+	}
+</style>
+```
+
+<div id="c10"></div>
+
+#### 温馨提示
+
+1、该插件反复测试过微信小程序、h5、app-vue三个端，vue2和vue3都兼容，其他端可能需要测试改进。
+
+2、该插件的使用hbuilderx版本最好升级到较新版本，我开发的版本是hbuilderx3.3.11.20220209。
+
+3、对此插件或相关问题有好的建议，可以直接在评论区进行讨论。
+
+4、希望遇到问题不要喷，也不要骂人，其实这种心情我能理解，写该插件也不是一时半会就完成了的，所以希望互相理解。只要有问题，我会第一时间回复解决。
+
+5、对此插件有任何问题的可以在下方留言，我会第一时间回复和解决问题。还可以加QQ群进行前端技术交流 568984539，加群备注‘地区-名字-技术类型’。
+
+#### 最后我想说：认为该插件对你有帮助的，记得收藏、好评，这样可以帮助到更多人哟！
+
+---
+
+<div id="c11"></div>
+
+#### 关注我，不迷路
+
+如果任何疑问的可以在评论区留言，还可以加QQ群交流：568984539，加群备注‘地区-名字-技术类型’。
+
+更多前端等相关知识可关注我个人博客：https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343
+
+<div id="c12"></div>
+
+#### 个人作品展示
+
+uniapp+vue3.2+unicloud开发微信小程序：**皮皮虎去水印**。
+
+关注下方公众号：【**全网免费网盘资源**】、【**美团外卖饿了么天天领红包**】、【**去水印**】
+
+![image](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-bb657efd-fece-483e-a715-5daea480fde8/6e029310-aec8-46e9-9883-1c88dc1925ad.jpg)
\ No newline at end of file
diff --git a/uni_modules/uni-icons/changelog.md b/uni_modules/uni-icons/changelog.md
new file mode 100644
index 0000000..0261131
--- /dev/null
+++ b/uni_modules/uni-icons/changelog.md
@@ -0,0 +1,42 @@
+## 2.0.10（2024-06-07）
+- 优化 uni-app x 中，size 属性的类型
+## 2.0.9（2024-01-12）
+fix: 修复图标大小默认值错误的问题
+## 2.0.8（2023-12-14）
+- 修复 项目未使用 ts 情况下，打包报错的bug
+## 2.0.7（2023-12-14）
+- 修复 size 属性为 string 时，不加单位导致尺寸异常的bug
+## 2.0.6（2023-12-11）
+- 优化 兼容老版本icon类型，如 top ，bottom 等
+## 2.0.5（2023-12-11）
+- 优化 兼容老版本icon类型，如 top ，bottom 等
+## 2.0.4（2023-12-06）
+- 优化 uni-app x 下示例项目图标排序
+## 2.0.3（2023-12-06）
+- 修复 nvue下引入组件报错的bug
+## 2.0.2（2023-12-05）
+-优化 size 属性支持单位
+## 2.0.1（2023-12-05）
+- 新增 uni-app x 支持定义图标
+## 1.3.5（2022-01-24）
+- 优化 size 属性可以传入不带单位的字符串数值
+## 1.3.4（2022-01-24）
+- 优化 size 支持其他单位
+## 1.3.3（2022-01-17）
+- 修复 nvue 有些图标不显示的bug，兼容老版本图标
+## 1.3.2（2021-12-01）
+- 优化 示例可复制图标名称
+## 1.3.1（2021-11-23）
+- 优化 兼容旧组件 type 值
+## 1.3.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-icons](https://uniapp.dcloud.io/component/uniui/uni-icons)
+## 1.1.7（2021-11-08）
+## 1.2.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.5（2021-05-12）
+- 新增 组件示例地址
+## 1.1.4（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-icons/components/uni-icons/uni-icons.uvue b/uni_modules/uni-icons/components/uni-icons/uni-icons.uvue
new file mode 100644
index 0000000..ce307c1
--- /dev/null
+++ b/uni_modules/uni-icons/components/uni-icons/uni-icons.uvue
@@ -0,0 +1,91 @@
+<template>
+  <text class="uni-icons" :style="styleObj">
+    <slot>{{unicode}}</slot>
+  </text>
+</template>
+
+<script>
+  import { fontData, IconsDataItem } from './uniicons_file'
+
+  /**
+   * Icons 图标
+   * @description 用于展示 icon 图标
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=28
+   * @property {Number,String} size 图标大小
+   * @property {String} type 图标图案，参考示例
+   * @property {String} color 图标颜色
+   * @property {String} customPrefix 自定义图标
+   * @event {Function} click 点击 Icon 触发事件
+   */
+  export default {
+    name: "uni-icons",
+    props: {
+      type: {
+        type: String,
+        default: ''
+      },
+      color: {
+        type: String,
+        default: '#333333'
+      },
+      size: {
+        type: [Number, String],
+        default: 16
+      },
+      fontFamily: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {};
+    },
+    computed: {
+      unicode() : string {
+        let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type })
+        if (codes !== null) {
+          return codes.unicode
+        }
+        return ''
+      },
+      iconSize() : string {
+        const size = this.size
+        if (typeof size == 'string') {
+          const reg = /^[0-9]*$/g
+          return reg.test(size as string) ? '' + size + 'px' : '' + size;
+          // return '' + this.size
+        }
+        return this.getFontSize(size as number)
+      },
+      styleObj() : UTSJSONObject {
+        if (this.fontFamily !== '') {
+          return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily }
+        }
+        return { color: this.color, fontSize: this.iconSize }
+      }
+    },
+    created() { },
+    methods: {
+      /**
+       * 字体大小
+       */
+      getFontSize(size : number) : string {
+        return size + 'px';
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  @font-face {
+    font-family: UniIconsFontFamily;
+    src: url('./uniicons.ttf');
+  }
+
+  .uni-icons {
+    font-family: UniIconsFontFamily;
+    font-size: 18px;
+    font-style: normal;
+    color: #333;
+  }
+</style>
diff --git a/uni_modules/uni-icons/components/uni-icons/uni-icons.vue b/uni_modules/uni-icons/components/uni-icons/uni-icons.vue
new file mode 100644
index 0000000..9634a9c
--- /dev/null
+++ b/uni_modules/uni-icons/components/uni-icons/uni-icons.vue
@@ -0,0 +1,110 @@
+<template>
+	<!-- #ifdef APP-NVUE -->
+	<text :style="styleObj" class="uni-icons" @click="_onClick">{{unicode}}</text>
+	<!-- #endif -->
+	<!-- #ifndef APP-NVUE -->
+	<text :style="styleObj" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick">
+		<slot></slot>
+	</text>
+	<!-- #endif -->
+</template>
+
+<script>
+	import { fontData } from './uniicons_file_vue.js';
+
+	const getVal = (val) => {
+		const reg = /^[0-9]*$/g
+		return (typeof val === 'number' || reg.test(val)) ? val + 'px' : val;
+	}
+
+	// #ifdef APP-NVUE
+	var domModule = weex.requireModule('dom');
+	import iconUrl from './uniicons.ttf'
+	domModule.addRule('fontFace', {
+		'fontFamily': "uniicons",
+		'src': "url('" + iconUrl + "')"
+	});
+	// #endif
+
+	/**
+	 * Icons 图标
+	 * @description 用于展示 icons 图标
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=28
+	 * @property {Number} size 图标大小
+	 * @property {String} type 图标图案，参考示例
+	 * @property {String} color 图标颜色
+	 * @property {String} customPrefix 自定义图标
+	 * @event {Function} click 点击 Icon 触发事件
+	 */
+	export default {
+		name: 'UniIcons',
+		emits: ['click'],
+		props: {
+			type: {
+				type: String,
+				default: ''
+			},
+			color: {
+				type: String,
+				default: '#333333'
+			},
+			size: {
+				type: [Number, String],
+				default: 16
+			},
+			customPrefix: {
+				type: String,
+				default: ''
+			},
+			fontFamily: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				icons: fontData
+			}
+		},
+		computed: {
+			unicode() {
+				let code = this.icons.find(v => v.font_class === this.type)
+				if (code) {
+					return code.unicode
+				}
+				return ''
+			},
+			iconSize() {
+				return getVal(this.size)
+			},
+			styleObj() {
+				if (this.fontFamily !== '') {
+					return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};`
+				}
+				return `color: ${this.color}; font-size: ${this.iconSize};`
+			}
+		},
+		methods: {
+			_onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	/* #ifndef APP-NVUE */
+	@import './uniicons.css';
+
+	@font-face {
+		font-family: uniicons;
+		src: url('./uniicons.ttf');
+	}
+
+	/* #endif */
+	.uni-icons {
+		font-family: uniicons;
+		text-decoration: none;
+		text-align: center;
+	}
+</style>
diff --git a/uni_modules/uni-icons/components/uni-icons/uniicons.css b/uni_modules/uni-icons/components/uni-icons/uniicons.css
new file mode 100644
index 0000000..0a6b6fe
--- /dev/null
+++ b/uni_modules/uni-icons/components/uni-icons/uniicons.css
@@ -0,0 +1,664 @@
+
+.uniui-cart-filled:before {
+  content: "\e6d0";
+}
+
+.uniui-gift-filled:before {
+  content: "\e6c4";
+}
+
+.uniui-color:before {
+  content: "\e6cf";
+}
+
+.uniui-wallet:before {
+  content: "\e6b1";
+}
+
+.uniui-settings-filled:before {
+  content: "\e6ce";
+}
+
+.uniui-auth-filled:before {
+  content: "\e6cc";
+}
+
+.uniui-shop-filled:before {
+  content: "\e6cd";
+}
+
+.uniui-staff-filled:before {
+  content: "\e6cb";
+}
+
+.uniui-vip-filled:before {
+  content: "\e6c6";
+}
+
+.uniui-plus-filled:before {
+  content: "\e6c7";
+}
+
+.uniui-folder-add-filled:before {
+  content: "\e6c8";
+}
+
+.uniui-color-filled:before {
+  content: "\e6c9";
+}
+
+.uniui-tune-filled:before {
+  content: "\e6ca";
+}
+
+.uniui-calendar-filled:before {
+  content: "\e6c0";
+}
+
+.uniui-notification-filled:before {
+  content: "\e6c1";
+}
+
+.uniui-wallet-filled:before {
+  content: "\e6c2";
+}
+
+.uniui-medal-filled:before {
+  content: "\e6c3";
+}
+
+.uniui-fire-filled:before {
+  content: "\e6c5";
+}
+
+.uniui-refreshempty:before {
+  content: "\e6bf";
+}
+
+.uniui-location-filled:before {
+  content: "\e6af";
+}
+
+.uniui-person-filled:before {
+  content: "\e69d";
+}
+
+.uniui-personadd-filled:before {
+  content: "\e698";
+}
+
+.uniui-arrowthinleft:before {
+  content: "\e6d2";
+}
+
+.uniui-arrowthinup:before {
+  content: "\e6d3";
+}
+
+.uniui-arrowthindown:before {
+  content: "\e6d4";
+}
+
+.uniui-back:before {
+  content: "\e6b9";
+}
+
+.uniui-forward:before {
+  content: "\e6ba";
+}
+
+.uniui-arrow-right:before {
+  content: "\e6bb";
+}
+
+.uniui-arrow-left:before {
+  content: "\e6bc";
+}
+
+.uniui-arrow-up:before {
+  content: "\e6bd";
+}
+
+.uniui-arrow-down:before {
+  content: "\e6be";
+}
+
+.uniui-arrowthinright:before {
+  content: "\e6d1";
+}
+
+.uniui-down:before {
+  content: "\e6b8";
+}
+
+.uniui-bottom:before {
+  content: "\e6b8";
+}
+
+.uniui-arrowright:before {
+  content: "\e6d5";
+}
+
+.uniui-right:before {
+  content: "\e6b5";
+}
+
+.uniui-up:before {
+  content: "\e6b6";
+}
+
+.uniui-top:before {
+  content: "\e6b6";
+}
+
+.uniui-left:before {
+  content: "\e6b7";
+}
+
+.uniui-arrowup:before {
+  content: "\e6d6";
+}
+
+.uniui-eye:before {
+  content: "\e651";
+}
+
+.uniui-eye-filled:before {
+  content: "\e66a";
+}
+
+.uniui-eye-slash:before {
+  content: "\e6b3";
+}
+
+.uniui-eye-slash-filled:before {
+  content: "\e6b4";
+}
+
+.uniui-info-filled:before {
+  content: "\e649";
+}
+
+.uniui-reload:before {
+  content: "\e6b2";
+}
+
+.uniui-micoff-filled:before {
+  content: "\e6b0";
+}
+
+.uniui-map-pin-ellipse:before {
+  content: "\e6ac";
+}
+
+.uniui-map-pin:before {
+  content: "\e6ad";
+}
+
+.uniui-location:before {
+  content: "\e6ae";
+}
+
+.uniui-starhalf:before {
+  content: "\e683";
+}
+
+.uniui-star:before {
+  content: "\e688";
+}
+
+.uniui-star-filled:before {
+  content: "\e68f";
+}
+
+.uniui-calendar:before {
+  content: "\e6a0";
+}
+
+.uniui-fire:before {
+  content: "\e6a1";
+}
+
+.uniui-medal:before {
+  content: "\e6a2";
+}
+
+.uniui-font:before {
+  content: "\e6a3";
+}
+
+.uniui-gift:before {
+  content: "\e6a4";
+}
+
+.uniui-link:before {
+  content: "\e6a5";
+}
+
+.uniui-notification:before {
+  content: "\e6a6";
+}
+
+.uniui-staff:before {
+  content: "\e6a7";
+}
+
+.uniui-vip:before {
+  content: "\e6a8";
+}
+
+.uniui-folder-add:before {
+  content: "\e6a9";
+}
+
+.uniui-tune:before {
+  content: "\e6aa";
+}
+
+.uniui-auth:before {
+  content: "\e6ab";
+}
+
+.uniui-person:before {
+  content: "\e699";
+}
+
+.uniui-email-filled:before {
+  content: "\e69a";
+}
+
+.uniui-phone-filled:before {
+  content: "\e69b";
+}
+
+.uniui-phone:before {
+  content: "\e69c";
+}
+
+.uniui-email:before {
+  content: "\e69e";
+}
+
+.uniui-personadd:before {
+  content: "\e69f";
+}
+
+.uniui-chatboxes-filled:before {
+  content: "\e692";
+}
+
+.uniui-contact:before {
+  content: "\e693";
+}
+
+.uniui-chatbubble-filled:before {
+  content: "\e694";
+}
+
+.uniui-contact-filled:before {
+  content: "\e695";
+}
+
+.uniui-chatboxes:before {
+  content: "\e696";
+}
+
+.uniui-chatbubble:before {
+  content: "\e697";
+}
+
+.uniui-upload-filled:before {
+  content: "\e68e";
+}
+
+.uniui-upload:before {
+  content: "\e690";
+}
+
+.uniui-weixin:before {
+  content: "\e691";
+}
+
+.uniui-compose:before {
+  content: "\e67f";
+}
+
+.uniui-qq:before {
+  content: "\e680";
+}
+
+.uniui-download-filled:before {
+  content: "\e681";
+}
+
+.uniui-pyq:before {
+  content: "\e682";
+}
+
+.uniui-sound:before {
+  content: "\e684";
+}
+
+.uniui-trash-filled:before {
+  content: "\e685";
+}
+
+.uniui-sound-filled:before {
+  content: "\e686";
+}
+
+.uniui-trash:before {
+  content: "\e687";
+}
+
+.uniui-videocam-filled:before {
+  content: "\e689";
+}
+
+.uniui-spinner-cycle:before {
+  content: "\e68a";
+}
+
+.uniui-weibo:before {
+  content: "\e68b";
+}
+
+.uniui-videocam:before {
+  content: "\e68c";
+}
+
+.uniui-download:before {
+  content: "\e68d";
+}
+
+.uniui-help:before {
+  content: "\e679";
+}
+
+.uniui-navigate-filled:before {
+  content: "\e67a";
+}
+
+.uniui-plusempty:before {
+  content: "\e67b";
+}
+
+.uniui-smallcircle:before {
+  content: "\e67c";
+}
+
+.uniui-minus-filled:before {
+  content: "\e67d";
+}
+
+.uniui-micoff:before {
+  content: "\e67e";
+}
+
+.uniui-closeempty:before {
+  content: "\e66c";
+}
+
+.uniui-clear:before {
+  content: "\e66d";
+}
+
+.uniui-navigate:before {
+  content: "\e66e";
+}
+
+.uniui-minus:before {
+  content: "\e66f";
+}
+
+.uniui-image:before {
+  content: "\e670";
+}
+
+.uniui-mic:before {
+  content: "\e671";
+}
+
+.uniui-paperplane:before {
+  content: "\e672";
+}
+
+.uniui-close:before {
+  content: "\e673";
+}
+
+.uniui-help-filled:before {
+  content: "\e674";
+}
+
+.uniui-paperplane-filled:before {
+  content: "\e675";
+}
+
+.uniui-plus:before {
+  content: "\e676";
+}
+
+.uniui-mic-filled:before {
+  content: "\e677";
+}
+
+.uniui-image-filled:before {
+  content: "\e678";
+}
+
+.uniui-locked-filled:before {
+  content: "\e668";
+}
+
+.uniui-info:before {
+  content: "\e669";
+}
+
+.uniui-locked:before {
+  content: "\e66b";
+}
+
+.uniui-camera-filled:before {
+  content: "\e658";
+}
+
+.uniui-chat-filled:before {
+  content: "\e659";
+}
+
+.uniui-camera:before {
+  content: "\e65a";
+}
+
+.uniui-circle:before {
+  content: "\e65b";
+}
+
+.uniui-checkmarkempty:before {
+  content: "\e65c";
+}
+
+.uniui-chat:before {
+  content: "\e65d";
+}
+
+.uniui-circle-filled:before {
+  content: "\e65e";
+}
+
+.uniui-flag:before {
+  content: "\e65f";
+}
+
+.uniui-flag-filled:before {
+  content: "\e660";
+}
+
+.uniui-gear-filled:before {
+  content: "\e661";
+}
+
+.uniui-home:before {
+  content: "\e662";
+}
+
+.uniui-home-filled:before {
+  content: "\e663";
+}
+
+.uniui-gear:before {
+  content: "\e664";
+}
+
+.uniui-smallcircle-filled:before {
+  content: "\e665";
+}
+
+.uniui-map-filled:before {
+  content: "\e666";
+}
+
+.uniui-map:before {
+  content: "\e667";
+}
+
+.uniui-refresh-filled:before {
+  content: "\e656";
+}
+
+.uniui-refresh:before {
+  content: "\e657";
+}
+
+.uniui-cloud-upload:before {
+  content: "\e645";
+}
+
+.uniui-cloud-download-filled:before {
+  content: "\e646";
+}
+
+.uniui-cloud-download:before {
+  content: "\e647";
+}
+
+.uniui-cloud-upload-filled:before {
+  content: "\e648";
+}
+
+.uniui-redo:before {
+  content: "\e64a";
+}
+
+.uniui-images-filled:before {
+  content: "\e64b";
+}
+
+.uniui-undo-filled:before {
+  content: "\e64c";
+}
+
+.uniui-more:before {
+  content: "\e64d";
+}
+
+.uniui-more-filled:before {
+  content: "\e64e";
+}
+
+.uniui-undo:before {
+  content: "\e64f";
+}
+
+.uniui-images:before {
+  content: "\e650";
+}
+
+.uniui-paperclip:before {
+  content: "\e652";
+}
+
+.uniui-settings:before {
+  content: "\e653";
+}
+
+.uniui-search:before {
+  content: "\e654";
+}
+
+.uniui-redo-filled:before {
+  content: "\e655";
+}
+
+.uniui-list:before {
+  content: "\e644";
+}
+
+.uniui-mail-open-filled:before {
+  content: "\e63a";
+}
+
+.uniui-hand-down-filled:before {
+  content: "\e63c";
+}
+
+.uniui-hand-down:before {
+  content: "\e63d";
+}
+
+.uniui-hand-up-filled:before {
+  content: "\e63e";
+}
+
+.uniui-hand-up:before {
+  content: "\e63f";
+}
+
+.uniui-heart-filled:before {
+  content: "\e641";
+}
+
+.uniui-mail-open:before {
+  content: "\e643";
+}
+
+.uniui-heart:before {
+  content: "\e639";
+}
+
+.uniui-loop:before {
+  content: "\e633";
+}
+
+.uniui-pulldown:before {
+  content: "\e632";
+}
+
+.uniui-scan:before {
+  content: "\e62a";
+}
+
+.uniui-bars:before {
+  content: "\e627";
+}
+
+.uniui-checkbox:before {
+  content: "\e62b";
+}
+
+.uniui-checkbox-filled:before {
+  content: "\e62c";
+}
+
+.uniui-shop:before {
+  content: "\e62f";
+}
+
+.uniui-headphones:before {
+  content: "\e630";
+}
+
+.uniui-cart:before {
+  content: "\e631";
+}
diff --git a/uni_modules/uni-icons/components/uni-icons/uniicons.ttf b/uni_modules/uni-icons/components/uni-icons/uniicons.ttf
new file mode 100644
index 0000000..14696d0
Binary files /dev/null and b/uni_modules/uni-icons/components/uni-icons/uniicons.ttf differ
diff --git a/uni_modules/uni-icons/components/uni-icons/uniicons_file.ts b/uni_modules/uni-icons/components/uni-icons/uniicons_file.ts
new file mode 100644
index 0000000..86318df
--- /dev/null
+++ b/uni_modules/uni-icons/components/uni-icons/uniicons_file.ts
@@ -0,0 +1,664 @@
+
+export type IconsData = {
+	id : string
+	name : string
+	font_family : string
+	css_prefix_text : string
+	description : string
+	glyphs : Array<IconsDataItem>
+}
+
+export type IconsDataItem = {
+	font_class : string
+	unicode : string
+}
+
+
+export const fontData = [
+  {
+    "font_class": "arrow-down",
+    "unicode": "\ue6be"
+  },
+  {
+    "font_class": "arrow-left",
+    "unicode": "\ue6bc"
+  },
+  {
+    "font_class": "arrow-right",
+    "unicode": "\ue6bb"
+  },
+  {
+    "font_class": "arrow-up",
+    "unicode": "\ue6bd"
+  },
+  {
+    "font_class": "auth",
+    "unicode": "\ue6ab"
+  },
+  {
+    "font_class": "auth-filled",
+    "unicode": "\ue6cc"
+  },
+  {
+    "font_class": "back",
+    "unicode": "\ue6b9"
+  },
+  {
+    "font_class": "bars",
+    "unicode": "\ue627"
+  },
+  {
+    "font_class": "calendar",
+    "unicode": "\ue6a0"
+  },
+  {
+    "font_class": "calendar-filled",
+    "unicode": "\ue6c0"
+  },
+  {
+    "font_class": "camera",
+    "unicode": "\ue65a"
+  },
+  {
+    "font_class": "camera-filled",
+    "unicode": "\ue658"
+  },
+  {
+    "font_class": "cart",
+    "unicode": "\ue631"
+  },
+  {
+    "font_class": "cart-filled",
+    "unicode": "\ue6d0"
+  },
+  {
+    "font_class": "chat",
+    "unicode": "\ue65d"
+  },
+  {
+    "font_class": "chat-filled",
+    "unicode": "\ue659"
+  },
+  {
+    "font_class": "chatboxes",
+    "unicode": "\ue696"
+  },
+  {
+    "font_class": "chatboxes-filled",
+    "unicode": "\ue692"
+  },
+  {
+    "font_class": "chatbubble",
+    "unicode": "\ue697"
+  },
+  {
+    "font_class": "chatbubble-filled",
+    "unicode": "\ue694"
+  },
+  {
+    "font_class": "checkbox",
+    "unicode": "\ue62b"
+  },
+  {
+    "font_class": "checkbox-filled",
+    "unicode": "\ue62c"
+  },
+  {
+    "font_class": "checkmarkempty",
+    "unicode": "\ue65c"
+  },
+  {
+    "font_class": "circle",
+    "unicode": "\ue65b"
+  },
+  {
+    "font_class": "circle-filled",
+    "unicode": "\ue65e"
+  },
+  {
+    "font_class": "clear",
+    "unicode": "\ue66d"
+  },
+  {
+    "font_class": "close",
+    "unicode": "\ue673"
+  },
+  {
+    "font_class": "closeempty",
+    "unicode": "\ue66c"
+  },
+  {
+    "font_class": "cloud-download",
+    "unicode": "\ue647"
+  },
+  {
+    "font_class": "cloud-download-filled",
+    "unicode": "\ue646"
+  },
+  {
+    "font_class": "cloud-upload",
+    "unicode": "\ue645"
+  },
+  {
+    "font_class": "cloud-upload-filled",
+    "unicode": "\ue648"
+  },
+  {
+    "font_class": "color",
+    "unicode": "\ue6cf"
+  },
+  {
+    "font_class": "color-filled",
+    "unicode": "\ue6c9"
+  },
+  {
+    "font_class": "compose",
+    "unicode": "\ue67f"
+  },
+  {
+    "font_class": "contact",
+    "unicode": "\ue693"
+  },
+  {
+    "font_class": "contact-filled",
+    "unicode": "\ue695"
+  },
+  {
+    "font_class": "down",
+    "unicode": "\ue6b8"
+  },
+	{
+	  "font_class": "bottom",
+	  "unicode": "\ue6b8"
+	},
+  {
+    "font_class": "download",
+    "unicode": "\ue68d"
+  },
+  {
+    "font_class": "download-filled",
+    "unicode": "\ue681"
+  },
+  {
+    "font_class": "email",
+    "unicode": "\ue69e"
+  },
+  {
+    "font_class": "email-filled",
+    "unicode": "\ue69a"
+  },
+  {
+    "font_class": "eye",
+    "unicode": "\ue651"
+  },
+  {
+    "font_class": "eye-filled",
+    "unicode": "\ue66a"
+  },
+  {
+    "font_class": "eye-slash",
+    "unicode": "\ue6b3"
+  },
+  {
+    "font_class": "eye-slash-filled",
+    "unicode": "\ue6b4"
+  },
+  {
+    "font_class": "fire",
+    "unicode": "\ue6a1"
+  },
+  {
+    "font_class": "fire-filled",
+    "unicode": "\ue6c5"
+  },
+  {
+    "font_class": "flag",
+    "unicode": "\ue65f"
+  },
+  {
+    "font_class": "flag-filled",
+    "unicode": "\ue660"
+  },
+  {
+    "font_class": "folder-add",
+    "unicode": "\ue6a9"
+  },
+  {
+    "font_class": "folder-add-filled",
+    "unicode": "\ue6c8"
+  },
+  {
+    "font_class": "font",
+    "unicode": "\ue6a3"
+  },
+  {
+    "font_class": "forward",
+    "unicode": "\ue6ba"
+  },
+  {
+    "font_class": "gear",
+    "unicode": "\ue664"
+  },
+  {
+    "font_class": "gear-filled",
+    "unicode": "\ue661"
+  },
+  {
+    "font_class": "gift",
+    "unicode": "\ue6a4"
+  },
+  {
+    "font_class": "gift-filled",
+    "unicode": "\ue6c4"
+  },
+  {
+    "font_class": "hand-down",
+    "unicode": "\ue63d"
+  },
+  {
+    "font_class": "hand-down-filled",
+    "unicode": "\ue63c"
+  },
+  {
+    "font_class": "hand-up",
+    "unicode": "\ue63f"
+  },
+  {
+    "font_class": "hand-up-filled",
+    "unicode": "\ue63e"
+  },
+  {
+    "font_class": "headphones",
+    "unicode": "\ue630"
+  },
+  {
+    "font_class": "heart",
+    "unicode": "\ue639"
+  },
+  {
+    "font_class": "heart-filled",
+    "unicode": "\ue641"
+  },
+  {
+    "font_class": "help",
+    "unicode": "\ue679"
+  },
+  {
+    "font_class": "help-filled",
+    "unicode": "\ue674"
+  },
+  {
+    "font_class": "home",
+    "unicode": "\ue662"
+  },
+  {
+    "font_class": "home-filled",
+    "unicode": "\ue663"
+  },
+  {
+    "font_class": "image",
+    "unicode": "\ue670"
+  },
+  {
+    "font_class": "image-filled",
+    "unicode": "\ue678"
+  },
+  {
+    "font_class": "images",
+    "unicode": "\ue650"
+  },
+  {
+    "font_class": "images-filled",
+    "unicode": "\ue64b"
+  },
+  {
+    "font_class": "info",
+    "unicode": "\ue669"
+  },
+  {
+    "font_class": "info-filled",
+    "unicode": "\ue649"
+  },
+  {
+    "font_class": "left",
+    "unicode": "\ue6b7"
+  },
+  {
+    "font_class": "link",
+    "unicode": "\ue6a5"
+  },
+  {
+    "font_class": "list",
+    "unicode": "\ue644"
+  },
+  {
+    "font_class": "location",
+    "unicode": "\ue6ae"
+  },
+  {
+    "font_class": "location-filled",
+    "unicode": "\ue6af"
+  },
+  {
+    "font_class": "locked",
+    "unicode": "\ue66b"
+  },
+  {
+    "font_class": "locked-filled",
+    "unicode": "\ue668"
+  },
+  {
+    "font_class": "loop",
+    "unicode": "\ue633"
+  },
+  {
+    "font_class": "mail-open",
+    "unicode": "\ue643"
+  },
+  {
+    "font_class": "mail-open-filled",
+    "unicode": "\ue63a"
+  },
+  {
+    "font_class": "map",
+    "unicode": "\ue667"
+  },
+  {
+    "font_class": "map-filled",
+    "unicode": "\ue666"
+  },
+  {
+    "font_class": "map-pin",
+    "unicode": "\ue6ad"
+  },
+  {
+    "font_class": "map-pin-ellipse",
+    "unicode": "\ue6ac"
+  },
+  {
+    "font_class": "medal",
+    "unicode": "\ue6a2"
+  },
+  {
+    "font_class": "medal-filled",
+    "unicode": "\ue6c3"
+  },
+  {
+    "font_class": "mic",
+    "unicode": "\ue671"
+  },
+  {
+    "font_class": "mic-filled",
+    "unicode": "\ue677"
+  },
+  {
+    "font_class": "micoff",
+    "unicode": "\ue67e"
+  },
+  {
+    "font_class": "micoff-filled",
+    "unicode": "\ue6b0"
+  },
+  {
+    "font_class": "minus",
+    "unicode": "\ue66f"
+  },
+  {
+    "font_class": "minus-filled",
+    "unicode": "\ue67d"
+  },
+  {
+    "font_class": "more",
+    "unicode": "\ue64d"
+  },
+  {
+    "font_class": "more-filled",
+    "unicode": "\ue64e"
+  },
+  {
+    "font_class": "navigate",
+    "unicode": "\ue66e"
+  },
+  {
+    "font_class": "navigate-filled",
+    "unicode": "\ue67a"
+  },
+  {
+    "font_class": "notification",
+    "unicode": "\ue6a6"
+  },
+  {
+    "font_class": "notification-filled",
+    "unicode": "\ue6c1"
+  },
+  {
+    "font_class": "paperclip",
+    "unicode": "\ue652"
+  },
+  {
+    "font_class": "paperplane",
+    "unicode": "\ue672"
+  },
+  {
+    "font_class": "paperplane-filled",
+    "unicode": "\ue675"
+  },
+  {
+    "font_class": "person",
+    "unicode": "\ue699"
+  },
+  {
+    "font_class": "person-filled",
+    "unicode": "\ue69d"
+  },
+  {
+    "font_class": "personadd",
+    "unicode": "\ue69f"
+  },
+  {
+    "font_class": "personadd-filled",
+    "unicode": "\ue698"
+  },
+  {
+    "font_class": "personadd-filled-copy",
+    "unicode": "\ue6d1"
+  },
+  {
+    "font_class": "phone",
+    "unicode": "\ue69c"
+  },
+  {
+    "font_class": "phone-filled",
+    "unicode": "\ue69b"
+  },
+  {
+    "font_class": "plus",
+    "unicode": "\ue676"
+  },
+  {
+    "font_class": "plus-filled",
+    "unicode": "\ue6c7"
+  },
+  {
+    "font_class": "plusempty",
+    "unicode": "\ue67b"
+  },
+  {
+    "font_class": "pulldown",
+    "unicode": "\ue632"
+  },
+  {
+    "font_class": "pyq",
+    "unicode": "\ue682"
+  },
+  {
+    "font_class": "qq",
+    "unicode": "\ue680"
+  },
+  {
+    "font_class": "redo",
+    "unicode": "\ue64a"
+  },
+  {
+    "font_class": "redo-filled",
+    "unicode": "\ue655"
+  },
+  {
+    "font_class": "refresh",
+    "unicode": "\ue657"
+  },
+  {
+    "font_class": "refresh-filled",
+    "unicode": "\ue656"
+  },
+  {
+    "font_class": "refreshempty",
+    "unicode": "\ue6bf"
+  },
+  {
+    "font_class": "reload",
+    "unicode": "\ue6b2"
+  },
+  {
+    "font_class": "right",
+    "unicode": "\ue6b5"
+  },
+  {
+    "font_class": "scan",
+    "unicode": "\ue62a"
+  },
+  {
+    "font_class": "search",
+    "unicode": "\ue654"
+  },
+  {
+    "font_class": "settings",
+    "unicode": "\ue653"
+  },
+  {
+    "font_class": "settings-filled",
+    "unicode": "\ue6ce"
+  },
+  {
+    "font_class": "shop",
+    "unicode": "\ue62f"
+  },
+  {
+    "font_class": "shop-filled",
+    "unicode": "\ue6cd"
+  },
+  {
+    "font_class": "smallcircle",
+    "unicode": "\ue67c"
+  },
+  {
+    "font_class": "smallcircle-filled",
+    "unicode": "\ue665"
+  },
+  {
+    "font_class": "sound",
+    "unicode": "\ue684"
+  },
+  {
+    "font_class": "sound-filled",
+    "unicode": "\ue686"
+  },
+  {
+    "font_class": "spinner-cycle",
+    "unicode": "\ue68a"
+  },
+  {
+    "font_class": "staff",
+    "unicode": "\ue6a7"
+  },
+  {
+    "font_class": "staff-filled",
+    "unicode": "\ue6cb"
+  },
+  {
+    "font_class": "star",
+    "unicode": "\ue688"
+  },
+  {
+    "font_class": "star-filled",
+    "unicode": "\ue68f"
+  },
+  {
+    "font_class": "starhalf",
+    "unicode": "\ue683"
+  },
+  {
+    "font_class": "trash",
+    "unicode": "\ue687"
+  },
+  {
+    "font_class": "trash-filled",
+    "unicode": "\ue685"
+  },
+  {
+    "font_class": "tune",
+    "unicode": "\ue6aa"
+  },
+  {
+    "font_class": "tune-filled",
+    "unicode": "\ue6ca"
+  },
+  {
+    "font_class": "undo",
+    "unicode": "\ue64f"
+  },
+  {
+    "font_class": "undo-filled",
+    "unicode": "\ue64c"
+  },
+  {
+    "font_class": "up",
+    "unicode": "\ue6b6"
+  },
+	{
+	  "font_class": "top",
+	  "unicode": "\ue6b6"
+	},
+  {
+    "font_class": "upload",
+    "unicode": "\ue690"
+  },
+  {
+    "font_class": "upload-filled",
+    "unicode": "\ue68e"
+  },
+  {
+    "font_class": "videocam",
+    "unicode": "\ue68c"
+  },
+  {
+    "font_class": "videocam-filled",
+    "unicode": "\ue689"
+  },
+  {
+    "font_class": "vip",
+    "unicode": "\ue6a8"
+  },
+  {
+    "font_class": "vip-filled",
+    "unicode": "\ue6c6"
+  },
+  {
+    "font_class": "wallet",
+    "unicode": "\ue6b1"
+  },
+  {
+    "font_class": "wallet-filled",
+    "unicode": "\ue6c2"
+  },
+  {
+    "font_class": "weibo",
+    "unicode": "\ue68b"
+  },
+  {
+    "font_class": "weixin",
+    "unicode": "\ue691"
+  }
+] as IconsDataItem[]
+
+// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
diff --git a/uni_modules/uni-icons/components/uni-icons/uniicons_file_vue.js b/uni_modules/uni-icons/components/uni-icons/uniicons_file_vue.js
new file mode 100644
index 0000000..49e42cd
--- /dev/null
+++ b/uni_modules/uni-icons/components/uni-icons/uniicons_file_vue.js
@@ -0,0 +1,649 @@
+
+export const fontData = [
+  {
+    "font_class": "arrow-down",
+    "unicode": "\ue6be"
+  },
+  {
+    "font_class": "arrow-left",
+    "unicode": "\ue6bc"
+  },
+  {
+    "font_class": "arrow-right",
+    "unicode": "\ue6bb"
+  },
+  {
+    "font_class": "arrow-up",
+    "unicode": "\ue6bd"
+  },
+  {
+    "font_class": "auth",
+    "unicode": "\ue6ab"
+  },
+  {
+    "font_class": "auth-filled",
+    "unicode": "\ue6cc"
+  },
+  {
+    "font_class": "back",
+    "unicode": "\ue6b9"
+  },
+  {
+    "font_class": "bars",
+    "unicode": "\ue627"
+  },
+  {
+    "font_class": "calendar",
+    "unicode": "\ue6a0"
+  },
+  {
+    "font_class": "calendar-filled",
+    "unicode": "\ue6c0"
+  },
+  {
+    "font_class": "camera",
+    "unicode": "\ue65a"
+  },
+  {
+    "font_class": "camera-filled",
+    "unicode": "\ue658"
+  },
+  {
+    "font_class": "cart",
+    "unicode": "\ue631"
+  },
+  {
+    "font_class": "cart-filled",
+    "unicode": "\ue6d0"
+  },
+  {
+    "font_class": "chat",
+    "unicode": "\ue65d"
+  },
+  {
+    "font_class": "chat-filled",
+    "unicode": "\ue659"
+  },
+  {
+    "font_class": "chatboxes",
+    "unicode": "\ue696"
+  },
+  {
+    "font_class": "chatboxes-filled",
+    "unicode": "\ue692"
+  },
+  {
+    "font_class": "chatbubble",
+    "unicode": "\ue697"
+  },
+  {
+    "font_class": "chatbubble-filled",
+    "unicode": "\ue694"
+  },
+  {
+    "font_class": "checkbox",
+    "unicode": "\ue62b"
+  },
+  {
+    "font_class": "checkbox-filled",
+    "unicode": "\ue62c"
+  },
+  {
+    "font_class": "checkmarkempty",
+    "unicode": "\ue65c"
+  },
+  {
+    "font_class": "circle",
+    "unicode": "\ue65b"
+  },
+  {
+    "font_class": "circle-filled",
+    "unicode": "\ue65e"
+  },
+  {
+    "font_class": "clear",
+    "unicode": "\ue66d"
+  },
+  {
+    "font_class": "close",
+    "unicode": "\ue673"
+  },
+  {
+    "font_class": "closeempty",
+    "unicode": "\ue66c"
+  },
+  {
+    "font_class": "cloud-download",
+    "unicode": "\ue647"
+  },
+  {
+    "font_class": "cloud-download-filled",
+    "unicode": "\ue646"
+  },
+  {
+    "font_class": "cloud-upload",
+    "unicode": "\ue645"
+  },
+  {
+    "font_class": "cloud-upload-filled",
+    "unicode": "\ue648"
+  },
+  {
+    "font_class": "color",
+    "unicode": "\ue6cf"
+  },
+  {
+    "font_class": "color-filled",
+    "unicode": "\ue6c9"
+  },
+  {
+    "font_class": "compose",
+    "unicode": "\ue67f"
+  },
+  {
+    "font_class": "contact",
+    "unicode": "\ue693"
+  },
+  {
+    "font_class": "contact-filled",
+    "unicode": "\ue695"
+  },
+  {
+    "font_class": "down",
+    "unicode": "\ue6b8"
+  },
+	{
+	  "font_class": "bottom",
+	  "unicode": "\ue6b8"
+	},
+  {
+    "font_class": "download",
+    "unicode": "\ue68d"
+  },
+  {
+    "font_class": "download-filled",
+    "unicode": "\ue681"
+  },
+  {
+    "font_class": "email",
+    "unicode": "\ue69e"
+  },
+  {
+    "font_class": "email-filled",
+    "unicode": "\ue69a"
+  },
+  {
+    "font_class": "eye",
+    "unicode": "\ue651"
+  },
+  {
+    "font_class": "eye-filled",
+    "unicode": "\ue66a"
+  },
+  {
+    "font_class": "eye-slash",
+    "unicode": "\ue6b3"
+  },
+  {
+    "font_class": "eye-slash-filled",
+    "unicode": "\ue6b4"
+  },
+  {
+    "font_class": "fire",
+    "unicode": "\ue6a1"
+  },
+  {
+    "font_class": "fire-filled",
+    "unicode": "\ue6c5"
+  },
+  {
+    "font_class": "flag",
+    "unicode": "\ue65f"
+  },
+  {
+    "font_class": "flag-filled",
+    "unicode": "\ue660"
+  },
+  {
+    "font_class": "folder-add",
+    "unicode": "\ue6a9"
+  },
+  {
+    "font_class": "folder-add-filled",
+    "unicode": "\ue6c8"
+  },
+  {
+    "font_class": "font",
+    "unicode": "\ue6a3"
+  },
+  {
+    "font_class": "forward",
+    "unicode": "\ue6ba"
+  },
+  {
+    "font_class": "gear",
+    "unicode": "\ue664"
+  },
+  {
+    "font_class": "gear-filled",
+    "unicode": "\ue661"
+  },
+  {
+    "font_class": "gift",
+    "unicode": "\ue6a4"
+  },
+  {
+    "font_class": "gift-filled",
+    "unicode": "\ue6c4"
+  },
+  {
+    "font_class": "hand-down",
+    "unicode": "\ue63d"
+  },
+  {
+    "font_class": "hand-down-filled",
+    "unicode": "\ue63c"
+  },
+  {
+    "font_class": "hand-up",
+    "unicode": "\ue63f"
+  },
+  {
+    "font_class": "hand-up-filled",
+    "unicode": "\ue63e"
+  },
+  {
+    "font_class": "headphones",
+    "unicode": "\ue630"
+  },
+  {
+    "font_class": "heart",
+    "unicode": "\ue639"
+  },
+  {
+    "font_class": "heart-filled",
+    "unicode": "\ue641"
+  },
+  {
+    "font_class": "help",
+    "unicode": "\ue679"
+  },
+  {
+    "font_class": "help-filled",
+    "unicode": "\ue674"
+  },
+  {
+    "font_class": "home",
+    "unicode": "\ue662"
+  },
+  {
+    "font_class": "home-filled",
+    "unicode": "\ue663"
+  },
+  {
+    "font_class": "image",
+    "unicode": "\ue670"
+  },
+  {
+    "font_class": "image-filled",
+    "unicode": "\ue678"
+  },
+  {
+    "font_class": "images",
+    "unicode": "\ue650"
+  },
+  {
+    "font_class": "images-filled",
+    "unicode": "\ue64b"
+  },
+  {
+    "font_class": "info",
+    "unicode": "\ue669"
+  },
+  {
+    "font_class": "info-filled",
+    "unicode": "\ue649"
+  },
+  {
+    "font_class": "left",
+    "unicode": "\ue6b7"
+  },
+  {
+    "font_class": "link",
+    "unicode": "\ue6a5"
+  },
+  {
+    "font_class": "list",
+    "unicode": "\ue644"
+  },
+  {
+    "font_class": "location",
+    "unicode": "\ue6ae"
+  },
+  {
+    "font_class": "location-filled",
+    "unicode": "\ue6af"
+  },
+  {
+    "font_class": "locked",
+    "unicode": "\ue66b"
+  },
+  {
+    "font_class": "locked-filled",
+    "unicode": "\ue668"
+  },
+  {
+    "font_class": "loop",
+    "unicode": "\ue633"
+  },
+  {
+    "font_class": "mail-open",
+    "unicode": "\ue643"
+  },
+  {
+    "font_class": "mail-open-filled",
+    "unicode": "\ue63a"
+  },
+  {
+    "font_class": "map",
+    "unicode": "\ue667"
+  },
+  {
+    "font_class": "map-filled",
+    "unicode": "\ue666"
+  },
+  {
+    "font_class": "map-pin",
+    "unicode": "\ue6ad"
+  },
+  {
+    "font_class": "map-pin-ellipse",
+    "unicode": "\ue6ac"
+  },
+  {
+    "font_class": "medal",
+    "unicode": "\ue6a2"
+  },
+  {
+    "font_class": "medal-filled",
+    "unicode": "\ue6c3"
+  },
+  {
+    "font_class": "mic",
+    "unicode": "\ue671"
+  },
+  {
+    "font_class": "mic-filled",
+    "unicode": "\ue677"
+  },
+  {
+    "font_class": "micoff",
+    "unicode": "\ue67e"
+  },
+  {
+    "font_class": "micoff-filled",
+    "unicode": "\ue6b0"
+  },
+  {
+    "font_class": "minus",
+    "unicode": "\ue66f"
+  },
+  {
+    "font_class": "minus-filled",
+    "unicode": "\ue67d"
+  },
+  {
+    "font_class": "more",
+    "unicode": "\ue64d"
+  },
+  {
+    "font_class": "more-filled",
+    "unicode": "\ue64e"
+  },
+  {
+    "font_class": "navigate",
+    "unicode": "\ue66e"
+  },
+  {
+    "font_class": "navigate-filled",
+    "unicode": "\ue67a"
+  },
+  {
+    "font_class": "notification",
+    "unicode": "\ue6a6"
+  },
+  {
+    "font_class": "notification-filled",
+    "unicode": "\ue6c1"
+  },
+  {
+    "font_class": "paperclip",
+    "unicode": "\ue652"
+  },
+  {
+    "font_class": "paperplane",
+    "unicode": "\ue672"
+  },
+  {
+    "font_class": "paperplane-filled",
+    "unicode": "\ue675"
+  },
+  {
+    "font_class": "person",
+    "unicode": "\ue699"
+  },
+  {
+    "font_class": "person-filled",
+    "unicode": "\ue69d"
+  },
+  {
+    "font_class": "personadd",
+    "unicode": "\ue69f"
+  },
+  {
+    "font_class": "personadd-filled",
+    "unicode": "\ue698"
+  },
+  {
+    "font_class": "personadd-filled-copy",
+    "unicode": "\ue6d1"
+  },
+  {
+    "font_class": "phone",
+    "unicode": "\ue69c"
+  },
+  {
+    "font_class": "phone-filled",
+    "unicode": "\ue69b"
+  },
+  {
+    "font_class": "plus",
+    "unicode": "\ue676"
+  },
+  {
+    "font_class": "plus-filled",
+    "unicode": "\ue6c7"
+  },
+  {
+    "font_class": "plusempty",
+    "unicode": "\ue67b"
+  },
+  {
+    "font_class": "pulldown",
+    "unicode": "\ue632"
+  },
+  {
+    "font_class": "pyq",
+    "unicode": "\ue682"
+  },
+  {
+    "font_class": "qq",
+    "unicode": "\ue680"
+  },
+  {
+    "font_class": "redo",
+    "unicode": "\ue64a"
+  },
+  {
+    "font_class": "redo-filled",
+    "unicode": "\ue655"
+  },
+  {
+    "font_class": "refresh",
+    "unicode": "\ue657"
+  },
+  {
+    "font_class": "refresh-filled",
+    "unicode": "\ue656"
+  },
+  {
+    "font_class": "refreshempty",
+    "unicode": "\ue6bf"
+  },
+  {
+    "font_class": "reload",
+    "unicode": "\ue6b2"
+  },
+  {
+    "font_class": "right",
+    "unicode": "\ue6b5"
+  },
+  {
+    "font_class": "scan",
+    "unicode": "\ue62a"
+  },
+  {
+    "font_class": "search",
+    "unicode": "\ue654"
+  },
+  {
+    "font_class": "settings",
+    "unicode": "\ue653"
+  },
+  {
+    "font_class": "settings-filled",
+    "unicode": "\ue6ce"
+  },
+  {
+    "font_class": "shop",
+    "unicode": "\ue62f"
+  },
+  {
+    "font_class": "shop-filled",
+    "unicode": "\ue6cd"
+  },
+  {
+    "font_class": "smallcircle",
+    "unicode": "\ue67c"
+  },
+  {
+    "font_class": "smallcircle-filled",
+    "unicode": "\ue665"
+  },
+  {
+    "font_class": "sound",
+    "unicode": "\ue684"
+  },
+  {
+    "font_class": "sound-filled",
+    "unicode": "\ue686"
+  },
+  {
+    "font_class": "spinner-cycle",
+    "unicode": "\ue68a"
+  },
+  {
+    "font_class": "staff",
+    "unicode": "\ue6a7"
+  },
+  {
+    "font_class": "staff-filled",
+    "unicode": "\ue6cb"
+  },
+  {
+    "font_class": "star",
+    "unicode": "\ue688"
+  },
+  {
+    "font_class": "star-filled",
+    "unicode": "\ue68f"
+  },
+  {
+    "font_class": "starhalf",
+    "unicode": "\ue683"
+  },
+  {
+    "font_class": "trash",
+    "unicode": "\ue687"
+  },
+  {
+    "font_class": "trash-filled",
+    "unicode": "\ue685"
+  },
+  {
+    "font_class": "tune",
+    "unicode": "\ue6aa"
+  },
+  {
+    "font_class": "tune-filled",
+    "unicode": "\ue6ca"
+  },
+  {
+    "font_class": "undo",
+    "unicode": "\ue64f"
+  },
+  {
+    "font_class": "undo-filled",
+    "unicode": "\ue64c"
+  },
+  {
+    "font_class": "up",
+    "unicode": "\ue6b6"
+  },
+	{
+	  "font_class": "top",
+	  "unicode": "\ue6b6"
+	},
+  {
+    "font_class": "upload",
+    "unicode": "\ue690"
+  },
+  {
+    "font_class": "upload-filled",
+    "unicode": "\ue68e"
+  },
+  {
+    "font_class": "videocam",
+    "unicode": "\ue68c"
+  },
+  {
+    "font_class": "videocam-filled",
+    "unicode": "\ue689"
+  },
+  {
+    "font_class": "vip",
+    "unicode": "\ue6a8"
+  },
+  {
+    "font_class": "vip-filled",
+    "unicode": "\ue6c6"
+  },
+  {
+    "font_class": "wallet",
+    "unicode": "\ue6b1"
+  },
+  {
+    "font_class": "wallet-filled",
+    "unicode": "\ue6c2"
+  },
+  {
+    "font_class": "weibo",
+    "unicode": "\ue68b"
+  },
+  {
+    "font_class": "weixin",
+    "unicode": "\ue691"
+  }
+]
+
+// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
diff --git a/uni_modules/uni-icons/package.json b/uni_modules/uni-icons/package.json
new file mode 100644
index 0000000..6b681b4
--- /dev/null
+++ b/uni_modules/uni-icons/package.json
@@ -0,0 +1,89 @@
+{
+  "id": "uni-icons",
+  "displayName": "uni-icons 图标",
+  "version": "2.0.10",
+  "description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "icon",
+    "图标"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.2.14"
+  },
+  "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"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y",
+          "app-uvue": "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",
+					"钉钉": "y",
+					"快手": "y",
+					"飞书": "y",
+					"京东": "y"
+        },
+        "快应用": {
+          "华为": "y",
+          "联盟": "y"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-icons/readme.md b/uni_modules/uni-icons/readme.md
new file mode 100644
index 0000000..86234ba
--- /dev/null
+++ b/uni_modules/uni-icons/readme.md
@@ -0,0 +1,8 @@
+## Icons 图标
+> **组件名：uni-icons**
+> 代码块： `uIcons`
+
+用于展示 icons 图标 。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
diff --git a/uni_modules/uni-scss/changelog.md b/uni_modules/uni-scss/changelog.md
new file mode 100644
index 0000000..b863bb0
--- /dev/null
+++ b/uni_modules/uni-scss/changelog.md
@@ -0,0 +1,8 @@
+## 1.0.3（2022-01-21）
+- 优化 组件示例
+## 1.0.2（2021-11-22）
+- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
+## 1.0.1（2021-11-22）
+- 修复 vue3中scss语法兼容问题
+## 1.0.0（2021-11-18）
+- init
diff --git a/uni_modules/uni-scss/index.scss b/uni_modules/uni-scss/index.scss
new file mode 100644
index 0000000..1744a5f
--- /dev/null
+++ b/uni_modules/uni-scss/index.scss
@@ -0,0 +1 @@
+@import './styles/index.scss';
diff --git a/uni_modules/uni-scss/package.json b/uni_modules/uni-scss/package.json
new file mode 100644
index 0000000..7cc0ccb
--- /dev/null
+++ b/uni_modules/uni-scss/package.json
@@ -0,0 +1,82 @@
+{
+  "id": "uni-scss",
+  "displayName": "uni-scss 辅助样式",
+  "version": "1.0.3",
+  "description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
+  "keywords": [
+    "uni-scss",
+    "uni-ui",
+    "辅助样式"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "category": [
+        "JS SDK",
+        "通用 SDK"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u"
+        },
+        "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"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-scss/readme.md b/uni_modules/uni-scss/readme.md
new file mode 100644
index 0000000..b7d1c25
--- /dev/null
+++ b/uni_modules/uni-scss/readme.md
@@ -0,0 +1,4 @@
+`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-scss/styles/index.scss b/uni_modules/uni-scss/styles/index.scss
new file mode 100644
index 0000000..ffac4fe
--- /dev/null
+++ b/uni_modules/uni-scss/styles/index.scss
@@ -0,0 +1,7 @@
+@import './setting/_variables.scss';
+@import './setting/_border.scss';
+@import './setting/_color.scss';
+@import './setting/_space.scss';
+@import './setting/_radius.scss';
+@import './setting/_text.scss';
+@import './setting/_styles.scss';
diff --git a/uni_modules/uni-scss/styles/setting/_border.scss b/uni_modules/uni-scss/styles/setting/_border.scss
new file mode 100644
index 0000000..12a11c3
--- /dev/null
+++ b/uni_modules/uni-scss/styles/setting/_border.scss
@@ -0,0 +1,3 @@
+.uni-border {
+	border: 1px $uni-border-1 solid;
+}
\ No newline at end of file
diff --git a/uni_modules/uni-scss/styles/setting/_color.scss b/uni_modules/uni-scss/styles/setting/_color.scss
new file mode 100644
index 0000000..1ededd9
--- /dev/null
+++ b/uni_modules/uni-scss/styles/setting/_color.scss
@@ -0,0 +1,66 @@
+
+// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
+// @mixin get-styles($k,$c) {
+// 	@if $k == size or $k == weight{
+// 		font-#{$k}:#{$c}
+// 	}@else{
+// 		#{$k}:#{$c}
+// 	}
+// }
+$uni-ui-color:(
+	// 主色
+	primary: $uni-primary,
+	primary-disable: $uni-primary-disable,
+	primary-light: $uni-primary-light,
+	// 辅助色
+	success: $uni-success,
+	success-disable: $uni-success-disable,
+	success-light: $uni-success-light,
+	warning: $uni-warning,
+	warning-disable: $uni-warning-disable,
+	warning-light: $uni-warning-light,
+	error: $uni-error,
+	error-disable: $uni-error-disable,
+	error-light: $uni-error-light,
+	info: $uni-info,
+	info-disable: $uni-info-disable,
+	info-light: $uni-info-light,
+	// 中性色
+	main-color: $uni-main-color,
+	base-color: $uni-base-color,
+	secondary-color: $uni-secondary-color,
+	extra-color: $uni-extra-color,
+	// 背景色
+	bg-color: $uni-bg-color,
+	// 边框颜色
+	border-1: $uni-border-1,
+	border-2: $uni-border-2,
+	border-3: $uni-border-3,
+	border-4: $uni-border-4,
+	// 黑色
+	black:$uni-black,
+	// 白色
+	white:$uni-white,
+	// 透明
+	transparent:$uni-transparent
+) !default;
+@each $key, $child in $uni-ui-color {
+	.uni-#{"" + $key} {
+		color: $child;
+	}
+	.uni-#{"" + $key}-bg {
+		background-color: $child;
+	}
+}
+.uni-shadow-sm {
+	box-shadow: $uni-shadow-sm;
+}
+.uni-shadow-base {
+	box-shadow: $uni-shadow-base;
+}
+.uni-shadow-lg {
+	box-shadow: $uni-shadow-lg;
+}
+.uni-mask {
+	background-color:$uni-mask;
+}
diff --git a/uni_modules/uni-scss/styles/setting/_radius.scss b/uni_modules/uni-scss/styles/setting/_radius.scss
new file mode 100644
index 0000000..9a0428b
--- /dev/null
+++ b/uni_modules/uni-scss/styles/setting/_radius.scss
@@ -0,0 +1,55 @@
+@mixin radius($r,$d:null ,$important: false){
+  $radius-value:map-get($uni-radius, $r) if($important, !important, null);
+  // Key exists within the $uni-radius variable
+  @if (map-has-key($uni-radius, $r) and  $d){
+		@if $d == t {
+				border-top-left-radius:$radius-value;
+				border-top-right-radius:$radius-value;
+		}@else if $d == r {
+				border-top-right-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == b {
+				border-bottom-left-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == l {
+				border-top-left-radius:$radius-value;
+				border-bottom-left-radius:$radius-value;
+		}@else if $d == tl {
+				border-top-left-radius:$radius-value;
+		}@else if $d == tr {
+				border-top-right-radius:$radius-value;
+		}@else if $d == br {
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == bl {
+				border-bottom-left-radius:$radius-value;
+		}
+  }@else{
+		border-radius:$radius-value;
+  }
+}
+
+@each $key, $child in $uni-radius {
+	@if($key){
+		.uni-radius-#{"" + $key} {
+				@include radius($key)
+		}
+	}@else{
+		.uni-radius {
+				@include radius($key)
+		}
+	}
+}
+
+@each $direction in t, r, b, l,tl, tr, br, bl {
+	@each $key, $child in $uni-radius {
+		@if($key){
+			.uni-radius-#{"" + $direction}-#{"" + $key} {
+				@include radius($key,$direction,false)
+			}
+		}@else{
+			.uni-radius-#{$direction} {
+				@include radius($key,$direction,false)
+			}
+		}
+	}
+}
diff --git a/uni_modules/uni-scss/styles/setting/_space.scss b/uni_modules/uni-scss/styles/setting/_space.scss
new file mode 100644
index 0000000..3c89528
--- /dev/null
+++ b/uni_modules/uni-scss/styles/setting/_space.scss
@@ -0,0 +1,56 @@
+
+@mixin fn($space,$direction,$size,$n) {
+	@if $n {
+		#{$space}-#{$direction}: #{$size*$uni-space-root}px
+	} @else {
+		 #{$space}-#{$direction}: #{-$size*$uni-space-root}px
+	}
+}
+@mixin get-styles($direction,$i,$space,$n){
+	@if $direction == t {
+		@include fn($space, top,$i,$n);
+	} 
+	@if $direction == r {
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == b {
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == l {
+	 @include fn($space, left,$i,$n);
+	} 
+	@if $direction == x {
+		@include fn($space, left,$i,$n);
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == y {
+		@include fn($space, top,$i,$n);
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == a {
+		@if $n {
+			#{$space}:#{$i*$uni-space-root}px;
+		} @else {
+			#{$space}:#{-$i*$uni-space-root}px;
+		}
+	} 
+}
+
+@each $orientation in m,p {
+	$space: margin;
+	@if $orientation == m {
+		$space: margin;
+	} @else {
+		$space: padding;
+	}
+	@for $i from 0 through 16 {
+		@each $direction in t, r, b, l, x, y, a {
+			.uni-#{$orientation}#{$direction}-#{$i} { 
+				@include  get-styles($direction,$i,$space,true);
+			} 
+			.uni-#{$orientation}#{$direction}-n#{$i} { 
+				@include  get-styles($direction,$i,$space,false);
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/uni_modules/uni-scss/styles/setting/_styles.scss b/uni_modules/uni-scss/styles/setting/_styles.scss
new file mode 100644
index 0000000..689afec
--- /dev/null
+++ b/uni_modules/uni-scss/styles/setting/_styles.scss
@@ -0,0 +1,167 @@
+/* #ifndef APP-NVUE */
+
+$-color-white:#fff;
+$-color-black:#000;
+@mixin base-style($color) {
+	color: #fff;
+	background-color: $color;
+	border-color: mix($-color-black, $color, 8%);
+	&:not([hover-class]):active {
+		background: mix($-color-black, $color, 10%);
+		border-color: mix($-color-black, $color, 20%);
+		color: $-color-white;
+		outline: none;
+	}
+}
+@mixin is-color($color) {
+	@include base-style($color);
+	&[loading] {
+		@include base-style($color);
+		&::before {
+			margin-right:5px;
+		}
+	}
+	&[disabled] {
+	  &,
+		&[loading],
+	  &:not([hover-class]):active {
+	    color: $-color-white;
+			border-color: mix(darken($color,10%), $-color-white);
+	    background-color: mix($color, $-color-white);
+	  }
+	}
+
+}
+@mixin base-plain-style($color) {
+	color:$color;
+	background-color: mix($-color-white, $color, 90%);
+	border-color: mix($-color-white, $color, 70%);
+	&:not([hover-class]):active {
+	  background: mix($-color-white, $color, 80%);
+	  color: $color;
+	  outline: none;
+		border-color: mix($-color-white, $color, 50%);
+	}
+}
+@mixin is-plain($color){
+	&[plain] {
+		@include base-plain-style($color);
+		&[loading] {
+			@include base-plain-style($color);
+			&::before {
+				margin-right:5px;
+			}
+		}
+		&[disabled] {
+		  &,
+		  &:active {
+		    color: mix($-color-white, $color, 40%);
+		    background-color: mix($-color-white, $color, 90%);
+				border-color: mix($-color-white, $color, 80%);
+		  }
+		}
+	}
+}
+
+
+.uni-btn {
+	margin: 5px;
+	color: #393939;
+	border:1px solid #ccc;
+	font-size: 16px;
+	font-weight: 200;
+	background-color: #F9F9F9;
+	// TODO 暂时处理边框隐藏一边的问题
+	overflow: visible;
+	&::after{
+		border: none;
+	}
+
+	&:not([type]),&[type=default] {
+		color: #999;
+		&[loading] {
+			background: none;
+			&::before {
+				margin-right:5px;
+			}
+		}
+
+
+
+		&[disabled]{
+			color: mix($-color-white, #999, 60%);
+		  &,
+			&[loading],
+		  &:active {
+				color: mix($-color-white, #999, 60%);
+		    background-color: mix($-color-white,$-color-black , 98%);
+				border-color: mix($-color-white,  #999, 85%);
+		  }
+		}
+
+		&[plain] {
+			color: #999;
+			background: none;
+			border-color: $uni-border-1;
+			&:not([hover-class]):active {
+				background: none;
+			  color: mix($-color-white, $-color-black, 80%);
+				border-color: mix($-color-white, $-color-black, 90%);
+			  outline: none;
+			}
+			&[disabled]{
+			  &,
+				&[loading],
+			  &:active {
+			    background: none;
+					color: mix($-color-white, #999, 60%);
+					border-color: mix($-color-white,  #999, 85%);
+			  }
+			}
+		}
+	}
+
+	&:not([hover-class]):active {
+	  color: mix($-color-white, $-color-black, 50%);
+	}
+
+	&[size=mini] {
+		font-size: 16px;
+		font-weight: 200;
+		border-radius: 8px;
+	}
+
+
+
+	&.uni-btn-small {
+		font-size: 14px;
+	}
+	&.uni-btn-mini {
+		font-size: 12px;
+	}
+
+	&.uni-btn-radius {
+		border-radius: 999px;
+	}
+	&[type=primary] {
+		@include is-color($uni-primary);
+		@include is-plain($uni-primary)
+	}
+	&[type=success] {
+		@include is-color($uni-success);
+		@include is-plain($uni-success)
+	}
+	&[type=error] {
+		@include is-color($uni-error);
+		@include is-plain($uni-error)
+	}
+	&[type=warning] {
+		@include is-color($uni-warning);
+		@include is-plain($uni-warning)
+	}
+	&[type=info] {
+		@include is-color($uni-info);
+		@include is-plain($uni-info)
+	}
+}
+/* #endif */
diff --git a/uni_modules/uni-scss/styles/setting/_text.scss b/uni_modules/uni-scss/styles/setting/_text.scss
new file mode 100644
index 0000000..a34d08f
--- /dev/null
+++ b/uni_modules/uni-scss/styles/setting/_text.scss
@@ -0,0 +1,24 @@
+@mixin get-styles($k,$c) {
+	@if $k == size or $k == weight{
+		font-#{$k}:#{$c}
+	}@else{
+		#{$k}:#{$c}
+	}
+}
+
+@each $key, $child in $uni-headings {
+	/* #ifndef APP-NVUE */
+	.uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+	/* #ifdef APP-NVUE */
+	.container .uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+}
diff --git a/uni_modules/uni-scss/styles/setting/_variables.scss b/uni_modules/uni-scss/styles/setting/_variables.scss
new file mode 100644
index 0000000..557d3d7
--- /dev/null
+++ b/uni_modules/uni-scss/styles/setting/_variables.scss
@@ -0,0 +1,146 @@
+// @use "sass:math";
+@import  '../tools/functions.scss';
+// 间距基础倍数
+$uni-space-root: 2 !default;
+// 边框半径默认值
+$uni-radius-root:5px !default;
+$uni-radius: () !default;
+// 边框半径断点
+$uni-radius: map-deep-merge(
+  (
+    0: 0,
+		// TODO 当前版本暂时不支持 sm 属性
+    // 'sm': math.div($uni-radius-root, 2),
+    null: $uni-radius-root,
+    'lg': $uni-radius-root * 2,
+    'xl': $uni-radius-root * 6,
+    'pill': 9999px,
+    'circle': 50%
+  ),
+  $uni-radius
+);
+// 字体家族
+$body-font-family: 'Roboto', sans-serif !default;
+// 文本
+$heading-font-family: $body-font-family !default;
+$uni-headings: () !default;
+$letterSpacing: -0.01562em;
+$uni-headings: map-deep-merge(
+  (
+    'h1': (
+      size: 32px,
+			weight: 300,
+			line-height: 50px,
+			// letter-spacing:-0.01562em
+    ),
+    'h2': (
+      size: 28px,
+      weight: 300,
+      line-height: 40px,
+      // letter-spacing: -0.00833em
+    ),
+    'h3': (
+      size: 24px,
+      weight: 400,
+      line-height: 32px,
+      // letter-spacing: normal
+    ),
+    'h4': (
+      size: 20px,
+      weight: 400,
+      line-height: 30px,
+      // letter-spacing: 0.00735em
+    ),
+    'h5': (
+      size: 16px,
+      weight: 400,
+      line-height: 24px,
+      // letter-spacing: normal
+    ),
+    'h6': (
+      size: 14px,
+      weight: 500,
+      line-height: 18px,
+      // letter-spacing: 0.0125em
+    ),
+    'subtitle': (
+      size: 12px,
+      weight: 400,
+      line-height: 20px,
+      // letter-spacing: 0.00937em
+    ),
+    'body': (
+      font-size: 14px,
+			font-weight: 400,
+			line-height: 22px,
+			// letter-spacing: 0.03125em
+    ),
+    'caption': (
+      'size': 12px,
+      'weight': 400,
+      'line-height': 20px,
+      // 'letter-spacing': 0.03333em,
+      // 'text-transform': false
+    )
+  ),
+  $uni-headings
+);
+
+
+
+// 主色
+$uni-primary: #2979ff !default;
+$uni-primary-disable:lighten($uni-primary,20%) !default;
+$uni-primary-light: lighten($uni-primary,25%) !default;
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37 !default;
+$uni-success-disable:lighten($uni-success,20%) !default;
+$uni-success-light: lighten($uni-success,25%) !default;
+
+$uni-warning: #f3a73f !default;
+$uni-warning-disable:lighten($uni-warning,20%) !default;
+$uni-warning-light: lighten($uni-warning,25%) !default;
+
+$uni-error: #e43d33 !default;
+$uni-error-disable:lighten($uni-error,20%) !default;
+$uni-error-light: lighten($uni-error,25%) !default;
+
+$uni-info: #8f939c !default;
+$uni-info-disable:lighten($uni-info,20%) !default;
+$uni-info-light: lighten($uni-info,25%) !default;
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a !default; 			// 主要文字
+$uni-base-color: #6a6a6a !default;			// 常规文字
+$uni-secondary-color: #909399 !default;	// 次要文字
+$uni-extra-color: #c7c7c7 !default;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0 !default;
+$uni-border-2: #EDEDED !default;
+$uni-border-3: #DCDCDC !default;
+$uni-border-4: #B9B9B9 !default;
+
+// 常规色
+$uni-black: #000000 !default;
+$uni-white: #ffffff !default;
+$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
+
+// 背景色
+$uni-bg-color: #f7f7f7 !default;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px !default;
+$uni-spacing-base: 15px !default;
+$uni-spacing-lg: 30px !default;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
diff --git a/uni_modules/uni-scss/styles/tools/functions.scss b/uni_modules/uni-scss/styles/tools/functions.scss
new file mode 100644
index 0000000..ac6f63e
--- /dev/null
+++ b/uni_modules/uni-scss/styles/tools/functions.scss
@@ -0,0 +1,19 @@
+// 合并 map
+@function map-deep-merge($parent-map, $child-map){
+	$result: $parent-map;
+	@each $key, $child in $child-map {
+		$parent-has-key: map-has-key($result, $key);
+		$parent-value: map-get($result, $key);
+		$parent-type: type-of($parent-value);
+		$child-type: type-of($child);
+		$parent-is-map: $parent-type == map;
+		$child-is-map: $child-type == map;
+			
+		@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
+			$result: map-merge($result, ( $key: $child ));
+		}@else {
+			$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
+		}
+	}
+	@return $result;
+};
diff --git a/uni_modules/uni-scss/theme.scss b/uni_modules/uni-scss/theme.scss
new file mode 100644
index 0000000..80ee62f
--- /dev/null
+++ b/uni_modules/uni-scss/theme.scss
@@ -0,0 +1,31 @@
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+// 主色
+$uni-primary: #2979ff;
+// 辅助色
+$uni-success: #4cd964;
+// 警告色
+$uni-warning: #f0ad4e;
+// 错误色
+$uni-error: #dd524d;
+// 描述色
+$uni-info: #909399;
+// 中性色
+$uni-main-color: #303133;
+$uni-base-color: #606266;
+$uni-secondary-color: #909399;
+$uni-extra-color: #C0C4CC;
+// 背景色
+$uni-bg-color: #f5f5f5;
+// 边框颜色
+$uni-border-1: #DCDFE6;
+$uni-border-2: #E4E7ED;
+$uni-border-3: #EBEEF5;
+$uni-border-4: #F2F6FC;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);
diff --git a/uni_modules/uni-scss/variables.scss b/uni_modules/uni-scss/variables.scss
new file mode 100644
index 0000000..1c062d4
--- /dev/null
+++ b/uni_modules/uni-scss/variables.scss
@@ -0,0 +1,62 @@
+@import './styles/setting/_variables.scss';
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+
+// 主色
+$uni-primary: #2979ff;
+$uni-primary-disable:mix(#fff,$uni-primary,50%);
+$uni-primary-light: mix(#fff,$uni-primary,80%);
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37;
+$uni-success-disable:mix(#fff,$uni-success,50%);
+$uni-success-light: mix(#fff,$uni-success,80%);
+
+$uni-warning: #f3a73f;
+$uni-warning-disable:mix(#fff,$uni-warning,50%);
+$uni-warning-light: mix(#fff,$uni-warning,80%);
+
+$uni-error: #e43d33;
+$uni-error-disable:mix(#fff,$uni-error,50%);
+$uni-error-light: mix(#fff,$uni-error,80%);
+
+$uni-info: #8f939c;
+$uni-info-disable:mix(#fff,$uni-info,50%);
+$uni-info-light: mix(#fff,$uni-info,80%);
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a; 			// 主要文字
+$uni-base-color: #6a6a6a;			// 常规文字
+$uni-secondary-color: #909399;	// 次要文字
+$uni-extra-color: #c7c7c7;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0;
+$uni-border-2: #EDEDED;
+$uni-border-3: #DCDCDC;
+$uni-border-4: #B9B9B9;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);
+
+// 背景色
+$uni-bg-color: #f7f7f7;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px;
+$uni-spacing-base: 15px;
+$uni-spacing-lg: 30px;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4);
diff --git a/uni_modules/zhuo-tianditu-MultiPoint-Mapper/changelog.md b/uni_modules/zhuo-tianditu-MultiPoint-Mapper/changelog.md
new file mode 100644
index 0000000..e69de29
diff --git a/uni_modules/zhuo-tianditu-MultiPoint-Mapper/components/zhuo-tianditu-MultiPoint-Mapper/tianditu-map.vue b/uni_modules/zhuo-tianditu-MultiPoint-Mapper/components/zhuo-tianditu-MultiPoint-Mapper/tianditu-map.vue
new file mode 100644
index 0000000..14bc081
--- /dev/null
+++ b/uni_modules/zhuo-tianditu-MultiPoint-Mapper/components/zhuo-tianditu-MultiPoint-Mapper/tianditu-map.vue
@@ -0,0 +1,268 @@
+<template>
+    <view style="width: 100%; height: 100%">
+        <view id="mapDiv" class="mapDiv" :apikey="apiKey" :prop="option" :change:prop="Trenderjs.initTMap"></view>
+    </view>
+</template>
+
+<script>
+import tools from '../../tools.js';
+import iconPath from '../../static/point2.png';
+import iconRangePath from '../../static/range.png';
+export default {
+    name: 'TianDiTu-Map',
+    data() {
+        return {
+            Tmap: null,
+            option: {
+                type: '',
+                apikey: '',
+                cover: null,
+                lng: '',
+                lat: '',
+                png: iconPath,
+                rangePng: iconRangePath,
+                showLabel: true,
+                showCirle: false,
+                range: 0,
+            },
+        };
+    },
+    props: {
+        apiKey: {
+            type: String,
+            require: true,
+            default: '',
+        },
+        customIcon: {
+            type: String,
+            default: '',
+        },
+        showLabel: {
+            type: Boolean,
+            default: true,
+        },
+        showCirle: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    methods: {
+        compliteonLoadTianDiTu() {
+            this.$emit('onLoadTianDiTu');
+        },
+        initCharts(lng, lat) {
+            this.option = {
+                ...this.option,
+                apikey: this.apiKey,
+                showLabel: this.showLabel,
+                showCirle: this.showCirle,
+                lng,
+                lat,
+                png: this.customIcon || this.option.png,
+                type: 'open',
+            };
+        },
+        upDataCharts(lng, lat) {
+            this.option = {
+                ...this.option,
+                type: 'Icon',
+                lng,
+                lat,
+                png: this.customIcon || this.option.png,
+                type: 'update',
+                showLabel: this.showLabel,
+            };
+        },
+        addFeature(cover) {
+            this.option = {
+                ...this.option,
+                type: 'Icon',
+                cover,
+                png: this.customIcon || this.option.png,
+                type: 'addFeature',
+                showLabel: this.showLabel,
+            };
+        },
+        changeRange(range) {
+            this.option = {
+                ...this.option,
+                type: 'Icon',
+                png: this.customIcon || this.option.png,
+                type: 'changeRange',
+                showLabel: this.showLabel,
+                showCirle: this.showCirle,
+                range: range,
+            };
+        },
+        selectItem(info) {
+            this.$emit('onSelect', info);
+        },
+    },
+};
+</script>
+
+<script module="Trenderjs" lang="renderjs">
+var Tmap = null;
+export default {
+    data() {
+        return {
+            options: {},
+            circle: [],
+        }
+    },
+    mounted() {
+    },
+    methods: {
+        initTMap(newValue, oldValue, ownerInstance, instance) {
+            this.options = newValue
+            if (newValue.type === 'open' && newValue.apikey) {
+                if (!window.T) {
+                    const script = document.createElement('script')
+                    script.src = 'http://api.tianditu.gov.cn/api?v=4.0&tk=' + this.options.apikey
+                    script.onload = this.initChartsRender.bind(this)
+                    document.head.appendChild(script)
+                    console.log('open')
+                } else {
+                    const {
+                        lng,
+                        lat
+                    } = this.options
+                    Tmap = null;
+                    Tmap = new T.Map('mapDiv', {
+                        projection: 'EPSG:4326',
+                    });
+                    const control = new T.Control.Zoom({ position: T_ANCHOR_TOP_RIGHT});
+                    const scale = new T.Control.Scale({ position: T_ANCHOR_TOP_LEFT});
+                    Tmap.addControl(scale);
+                    Tmap.addControl(control);
+                    this.upDataChartsRender(lng, lat)
+                    this.$ownerInstance.callMethod('compliteonLoadTianDiTu')
+                }
+            } else {
+                const {
+                    lng,
+                    lat,
+                    cover,
+                    showLabel,
+                    showCirle,
+                    range
+                } = newValue
+
+                switch (newValue.type) {
+                    case 'update':
+                        this.upDataChartsRender(lng, lat)
+                        break;
+                    case 'addFeature':
+                        Tmap.clearOverLays()
+                        this.circle = []
+                        cover.map((item, index) => {
+                            this.setIcon(item.lon, item.lat, false, showLabel, false, showCirle, item)
+                        })
+                        break;
+                    case 'changeRange':
+                        this.setRange(range)
+                    default:
+                        break;
+                }
+            }
+        },
+        initChartsRender() {
+            this.$ownerInstance.callMethod('compliteonLoadTianDiTu')
+            const {
+                lng,
+                lat
+            } = this.options
+            var that = this;
+            Tmap = new T.Map('mapDiv', {
+                projection: 'EPSG:4326',
+            });
+            this.upDataChartsRender(lng, lat)
+            const control = new T.Control.Zoom({ position: T_ANCHOR_TOP_RIGHT});
+            const scale = new T.Control.Scale({ position: T_ANCHOR_TOP_LEFT});
+            Tmap.addControl(scale);
+            Tmap.addControl(control);
+            console.log('初始化1')
+        },
+        upDataChartsRender(lng, lat, zoom = 15) {
+            if (!Tmap) return
+            Tmap.centerAndZoom(new T.LngLat(lng, lat), zoom);
+        },
+        setRange(range) {
+            for (let item in this.circle) {
+                this.circle[item].setRadius(range * 1000)
+            }
+            // this.circle.setRadius(range * 1000)
+        },
+        setIcon(lng, lat, isClear, isClick = false, isLabel = false, isCirle = false, item) {
+            if (isClear) {
+                Tmap.clearOverLays()
+            }
+            const latlng = new T.LngLat(lng, lat)
+            const icon = new T.Icon({
+                iconUrl: this.options.png,
+                iconSize: new T.Point(30, 30),
+                iconAnchor: new T.Point(15, 30)
+            });
+            if (isLabel) {
+                const label = new T.Label({
+                    text: `<div style="max-width: 50px; overflow: hidden">${item.label}</div>`,
+                    position: latlng,
+                    offset: new T.Point(-50, 0)
+                });
+                Tmap.addOverLay(label);
+            }
+            if(isCirle) {
+                const circleObj = new T.Circle(latlng , parseFloat(50), {
+                  color:"#13C57C",weight:2,opacity:1,fillColor:"#13C57C",fillOpacity:0.24
+                })
+                this.circle.push(circleObj)
+                Tmap.addOverLay(circleObj);
+            }
+            const marker = new T.Marker(latlng, {
+                icon
+            });
+
+            if (isClick) {
+                this.removeMarkerClick(marker);
+                //注册标注的点击事件
+                marker.addEventListener("click", this.MarkerClick.bind(null, item));
+            }
+            Tmap.addOverLay(marker);
+        },
+        removeMarkerClick(marker) {
+            //移除标注的点击事件
+            marker.removeEventListener("click", this.MarkerClick);
+        },
+        MarkerClick(item, e) {
+            this.openInfo(item.label, e)
+            this.$ownerInstance.callMethod('selectItem', item)
+        },
+        openInfo(content, e) {
+            const point = e.lnglat;
+            const marker = new T.Marker(point); // 创建标注
+            const markerInfoWin = new T.InfoWindow(content, {
+                offset: new T.Point(0, -30)
+            }); // 创建信息窗口对象
+            Tmap.openInfoWindow(markerInfoWin, point); //开启信息窗口
+        }
+    },
+}
+</script>
+
+<style scoped>
+#mapDiv {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+/deep/ .tdt-control-copyright {
+    display: none;
+}
+
+/deep/ .tdt-label {
+    /*        background: transparent;
+        box-shadow: none;
+        border: 0; */
+}
+</style>
diff --git a/uni_modules/zhuo-tianditu-MultiPoint-Mapper/components/zhuo-tianditu-MultiPoint-Mapper/zhuo-tianditu-MultiPoint-Mapper.vue b/uni_modules/zhuo-tianditu-MultiPoint-Mapper/components/zhuo-tianditu-MultiPoint-Mapper/zhuo-tianditu-MultiPoint-Mapper.vue
new file mode 100644
index 0000000..c0c4f93
--- /dev/null
+++ b/uni_modules/zhuo-tianditu-MultiPoint-Mapper/components/zhuo-tianditu-MultiPoint-Mapper/zhuo-tianditu-MultiPoint-Mapper.vue
@@ -0,0 +1,214 @@
+<template>
+    <view style="width: 100%; height: 100%">
+        <view class="mask" style="width: 100%; height: 100%">
+            <tiandituMap
+                ref="tiandituMapRefs"
+                @onLoadTianDiTu="initMaps"
+                @onSelect="selectPoint"
+                :apiKey="apiKey"
+                :customIcon="icon"
+                :showLabel="showLabel"
+                :showCirle="showCirle"
+            ></tiandituMap>
+        </view>
+    </view>
+</template>
+<script>
+import tiandituMap from './tianditu-map.vue';
+import tools from '../../tools.js';
+export default {
+    name: 'zhuozhuoTiandituPlugin',
+    components: {
+        tiandituMap,
+    },
+    props: {
+        apiKey: {
+            type: String,
+            require: true,
+            default: '',
+        },
+        icon: {
+            type: String,
+            default: '',
+        },
+        showLabel: {
+            type: Boolean,
+            default: true,
+        },
+        showCirle: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data() {
+        return {
+            winWidth: 0,
+            winHeight: 0,
+            winTop: 0,
+            visible: false,
+            datalist: [],
+            selectItem: {},
+            iStatusBarHeight: 0,
+            option: {
+                apikey: 123123,
+            },
+        };
+    },
+    created() {
+        var that = this;
+        // #ifdef APP
+        // 44 + 10 44: search Input height
+        const searchHeight = this.search ? 54 : 10;
+        const { statusBarHeight, screenHeight, windowHeight } = uni.getSystemInfoSync();
+        if (screenHeight === windowHeight) {
+            that.iStatusBarHeight = statusBarHeight + searchHeight;
+        } else {
+            that.iStatusBarHeight = 0;
+        }
+        // #endif
+        uni.getSystemInfo({
+            success: function (res) {
+                that.winWidth = res.windowWidth;
+                that.winHeight = res.windowHeight;
+                that.winTop = res.windowTop;
+            },
+        });
+    },
+    methods: {
+        open(lon, lat) {
+            if (lon && lat) {
+                this.visible = true;
+                this.$nextTick(() => {
+                    this.$refs.tiandituMapRefs.initCharts(lon, lat);
+                });
+            } else {
+                console.error('请传入lon, lat');
+            }
+        },
+        upDateLonLat(cover) {
+            if (lon && lat) {
+                this.$refs.tiandituMapRefs.upDataCharts(lon && lat);
+            } else {
+                console.error('请传入lon, lat');
+            }
+        },
+        addFeature(cover) {
+            if (cover && Array.isArray(cover) && cover.length) {
+                this.$refs.tiandituMapRefs.addFeature(cover);
+            } else {
+                console.error('请传入 cover', cover);
+            }
+        },
+        changeRange(range) {
+            this.$refs.tiandituMapRefs.changeRange(range);
+        },
+        selectPoint(e) {
+            this.$emit('onSelect', e);
+        },
+        initMaps() {
+            console.warn('--------天地图加载完成--------');
+            this.$emit('onLoad');
+        },
+    },
+};
+</script>
+
+<style scope>
+.mask {
+    /* overflow: hidden; */
+    /* position: fixed;
+        left: 0;
+        z-index: 399; */
+    background-color: #ffffff;
+}
+
+/* footer */
+.list-boxd {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 401;
+    right: 0;
+    border-radius: 14px 14px 0 0;
+    background: #ffffff;
+    transition: all 1s;
+}
+
+.list-header {
+    height: 20px;
+    position: relative;
+    border-bottom: 1px solid #f3f4f6;
+    cursor: pointer;
+}
+
+.list-header::after {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    content: '';
+    height: 6px;
+    width: 60px;
+    border-top: 1px solid #e8e8e8;
+    border-bottom: 1px solid #e8e8e8;
+}
+
+.list-content {
+    max-height: 50vh;
+    overflow-y: scroll;
+}
+
+.card {
+    min-height: 44px;
+    padding: 12px;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.card-left {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.card-right {
+    padding-right: 10px;
+}
+
+.arrow {
+    border-top: 2px solid #666666;
+    border-right: 2px solid #666666;
+    width: 10px;
+    height: 10px;
+    transform: rotate(45deg);
+}
+
+.card:active {
+    background-color: #f3f4f6;
+}
+
+.card::after {
+    position: absolute;
+    content: '';
+    bottom: 0;
+    height: 1px;
+    background-color: #e8e8e8;
+    width: 90%;
+}
+
+.card:last-child::after {
+    height: 0;
+    background-color: #ffffff;
+}
+
+.card-title {
+    font-size: 18px;
+}
+
+.card-text {
+    color: #e8e8e8;
+    font-size: 13px;
+}
+</style>
diff --git a/uni_modules/zhuo-tianditu-MultiPoint-Mapper/package.json b/uni_modules/zhuo-tianditu-MultiPoint-Mapper/package.json
new file mode 100644
index 0000000..18af958
--- /dev/null
+++ b/uni_modules/zhuo-tianditu-MultiPoint-Mapper/package.json
@@ -0,0 +1,83 @@
+{
+  "id": "zhuo-tianditu-MultiPoint-Mapper",
+  "displayName": "zhuo-tianditu-MultiPoint-Mapper",
+  "version": "1.0.0",
+  "description": "zhuo-tianditu-MultiPoint-Mapper",
+  "keywords": [
+    "zhuo-tianditu-MultiPoint-Mapper"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "",
+      "data": "",
+      "permissions": ""
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "u",
+        "aliyun": "u",
+        "alipay": "u"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "u",
+          "vue3": "u"
+        },
+        "App": {
+          "app-vue": "u",
+          "app-nvue": "u",
+          "app-uvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "u",
+          "Android Browser": "u",
+          "微信浏览器(Android)": "u",
+          "QQ浏览器(Android)": "u"
+        },
+        "H5-pc": {
+          "Chrome": "u",
+          "IE": "u",
+          "Edge": "u",
+          "Firefox": "u",
+          "Safari": "u"
+        },
+        "小程序": {
+          "微信": "u",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u",
+          "钉钉": "u",
+          "快手": "u",
+          "飞书": "u",
+          "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/zhuo-tianditu-MultiPoint-Mapper/readme.md b/uni_modules/zhuo-tianditu-MultiPoint-Mapper/readme.md
new file mode 100644
index 0000000..b39dcd3
--- /dev/null
+++ b/uni_modules/zhuo-tianditu-MultiPoint-Mapper/readme.md
@@ -0,0 +1 @@
+# zhuo-tianditu-MultiPoint-Mapper
\ No newline at end of file
diff --git a/uni_modules/zhuo-tianditu-MultiPoint-Mapper/static/point.png b/uni_modules/zhuo-tianditu-MultiPoint-Mapper/static/point.png
new file mode 100644
index 0000000..4772c05
Binary files /dev/null and b/uni_modules/zhuo-tianditu-MultiPoint-Mapper/static/point.png differ
diff --git a/uni_modules/zhuo-tianditu-MultiPoint-Mapper/static/point2.png b/uni_modules/zhuo-tianditu-MultiPoint-Mapper/static/point2.png
new file mode 100644
index 0000000..40afccd
Binary files /dev/null and b/uni_modules/zhuo-tianditu-MultiPoint-Mapper/static/point2.png differ
diff --git a/uni_modules/zhuo-tianditu-MultiPoint-Mapper/static/range.png b/uni_modules/zhuo-tianditu-MultiPoint-Mapper/static/range.png
new file mode 100644
index 0000000..ccdbc15
Binary files /dev/null and b/uni_modules/zhuo-tianditu-MultiPoint-Mapper/static/range.png differ
diff --git a/uni_modules/zhuo-tianditu-MultiPoint-Mapper/tools.js b/uni_modules/zhuo-tianditu-MultiPoint-Mapper/tools.js
new file mode 100644
index 0000000..37f762f
--- /dev/null
+++ b/uni_modules/zhuo-tianditu-MultiPoint-Mapper/tools.js
@@ -0,0 +1,106 @@
+/**
+ * @param title  String，提示的内容
+ * @param duration  String，提示的延迟时间，单位毫秒，默认：1500
+ * @param mask  Boolean，是否显示透明蒙层，防止触摸穿透，默认：false
+ * @param icon  String，图标：success、error、fail、exception、loading、none，默认：none
+ **/
+export function createMessage(title, duration = 1500, mask = false, icon = "none") {
+    uni.showToast({
+        title,
+        duration: duration,
+        mask,
+        icon
+    });
+}
+
+/**
+ * @param url  String，请求的地址，默认：none
+ * @param data  Object，请求的参数，默认：{}
+ * @param method  String，请求的方式，默认：GET
+ * @param loading  Boolean，是否需要loading ，默认：false
+ * @param header  Object，headers，默认：{}
+ * @returns promise
+ **/
+export function createRequest(url, data = {}, loading = false, method = 'GET', header = {}) {
+    if (loading) {
+        uni.showLoading({
+            title: '请稍后',
+            mask: true
+        })
+    }
+    return new Promise((resolve, reject) => {
+        uni.request({
+            url: url,
+            method: method,
+            data: data,
+            header: header,
+            success: res => {
+                if (res.statusCode === 200) {
+                    resolve(res.data)
+                } else {
+                    if (res.data.msg) {
+                        const str = typeof res.data.resolve === 'string' ? ',' + res.data.resolve :
+                            ''
+                        createMessage(res.data.msg + str)
+                    }
+                    throw new Error('请求错误 ' + url)
+                    reject()
+                }
+            },
+            fail: (err) => {
+                reject(err)
+            },
+            complete: () => {
+                uni.hideLoading();
+            }
+        });
+    })
+}
+
+/**
+ * 数据格式化
+ * @param obj  Object，响应的数据
+ * @param type  Number 0 ｜ 1，处理类型
+ * @returns Object {address = string, name = string, location = {lon, lat }, infomation = {}}
+ */
+export function formatterAdressLocation(obj, type) {
+    switch (type) {
+        case 1:
+            return {
+                address: obj.formatted_address,
+                    name: '',
+                    location: obj.location,
+                    infomation: obj.addressComponent
+            }
+            break;
+        case 2:
+            const [lon, lat] = obj.lonlat.split(',')
+            return {
+                address: obj.address,
+                    name: obj.name,
+                    location: {
+                        lon,
+                        lat
+                    },
+                    infomation: obj
+            }
+            break
+        case 3:
+            return {
+                address: obj.location.keyWord,
+                    name: '',
+                    location: {
+                        lon: obj.location.lon,
+                        lat: obj.location.lat,
+                    },
+                    infomation: obj.location
+            }
+        default:
+            break;
+    }
+}
+export default {
+    createMessage,
+    createRequest,
+    formatterAdressLocation
+}
\ No newline at end of file