diff --git a/pages.json b/pages.json
index 4c10217..8db8ee7 100644
--- a/pages.json
+++ b/pages.json
@@ -24,6 +24,24 @@
 				"navigationBarTitleText": "船舶作业"
 			}
 		},
+		{
+			"path": "pages/shipWork/documentList",
+			"style": {
+				"navigationBarTitleText": "单证列表"
+			}
+		},
+		{
+			"path": "pages/shipWork/mixWork",
+			"style": {
+				"navigationBarTitleText": "杂项作业"
+			}
+		},
+		{
+			"path": "pages/shipWork/mixAdd",
+			"style": {
+				"navigationBarTitleText": "杂项作业编辑"
+			}
+		},
 		{
 			"path": "pages/monitor/index",
 			"style": {
@@ -41,6 +59,12 @@
 			"style": {
 				"navigationBarTitleText": "质损详情"
 			}
+		},
+		{
+			"path": "pages/monitor/sign",
+			"style": {
+				"navigationBarTitleText": "签名"
+			}
 		}
 	],
 	"tabBar": {
diff --git a/pages/monitor/details.vue b/pages/monitor/details.vue
index 84c393f..5fe359a 100644
--- a/pages/monitor/details.vue
+++ b/pages/monitor/details.vue
@@ -20,13 +20,13 @@
 				<li>
 					<p class="liTitle">板车照片</p>
 					<view class="picture">
-						<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
+						<img src="../../static/images/testImg.jpg" alt="" v-for="item in 3">
 					</view>
 				</li>
 				<li>
 					<p class="liTitle">板车车牌照</p>
 					<view class="picture">
-						<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
+						<img src="../../static/images/testImg.jpg" alt="" v-for="item in 3">
 					</view>
 				</li>
 				<li class="flexLi">
@@ -70,6 +70,13 @@
 					<p>质损货物品类：</p>
 					<p>商品车</p>
 				</li>
+				<li class="imgLi">
+					<img src="../../static/images/car1.png" alt="">
+					<img src="../../static/images/car2.png" alt="">
+					<img src="../../static/images/car3.png" alt="">
+					<img src="../../static/images/car4.png" alt="">
+					<img src="../../static/images/car5.png" alt="">
+				</li>
 				<li class="tsLi">
 					<p>质损概况：</p>
 					<p>其他 这是一段关于其他的描述</p>
@@ -85,21 +92,37 @@
 				<li class="zpLi">
 					<p class="liTitle">质损照片</p>
 					<view class="picture">
-						<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
+						<img src="../../static/images/testImg.jpg" alt="" v-for="item in 6">
 					</view>
 				</li>
 				<li class="zpLi">
 					<p class="liTitle">车架号图片</p>
 					<view class="picture">
-						<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
+						<img src="../../static/images/testImg.jpg" alt="" v-for="item in 9">
 					</view>
 				</li>
 			</ul>
+			<view class="btnList">
+				<van-button type="default" @click="cancel">取消</van-button>
+			</view>
 		</view>
 	</view>
 </template>
 
 <script>
+	export default {
+		data() {
+			return {}
+		},
+		methods: {
+			// 取消
+			cancel() {
+				uni.navigateTo({
+					url: '/pages/monitor/index'
+				})
+			}
+		}
+	}
 </script>
 
 <style lang="less" scoped>
@@ -149,11 +172,13 @@
 
 					.picture {
 						margin-top: 20px;
+						display: flex;
+						flex-wrap: wrap;
 
-						/deep/.file-picker__box {
-							width: 120px !important;
-							height: 120px !important;
-							padding-top: 0;
+						img {
+							width: 120px;
+							height: 120px;
+							margin: 10px;
 						}
 
 					}
@@ -181,6 +206,42 @@
 					width: 100%;
 					display: block;
 				}
+
+				.imgLi {
+					width: 100%;
+					flex-wrap: wrap;
+
+					img:nth-of-type(1) {
+						width: 25%;
+					}
+
+					img:nth-of-type(2) {
+						width: 25%;
+					}
+
+					img:nth-of-type(3) {
+						width: 50%;
+					}
+
+					img:nth-of-type(4) {
+						width: 50%;
+					}
+
+					img:nth-of-type(5) {
+						width: 50%;
+					}
+				}
+			}
+
+			.btnList {
+				display: flex;
+				justify-content: center;
+
+				/deep/ .van-button {
+					margin: 30px 0;
+					width: 120px;
+					height: 50px;
+				}
 			}
 		}
 	}
diff --git a/pages/monitor/edit.vue b/pages/monitor/edit.vue
index 86b31eb..3454ba2 100644
--- a/pages/monitor/edit.vue
+++ b/pages/monitor/edit.vue
@@ -49,8 +49,9 @@
 					<p class="liTitle"><span class="required">*</span>责损负责人:</p>
 					<van-field v-model="lossHead" placeholder="请输入" />
 				</li>
-				<li>
+				<li class="zisun">
 					<p class="liTitle"><span class="required">*</span>签名:</p>
+					<p class="sign" @click="sign">点击签名</p>
 				</li>
 			</ul>
 			<view class="formTitle">
@@ -96,6 +97,13 @@
 						</van-radio>
 					</van-radio-group>
 				</li>
+				<li class="imgLi">
+					<img src="../../static/images/car1.png" alt="">
+					<img src="../../static/images/car2.png" alt="">
+					<img src="../../static/images/car3.png" alt="">
+					<img src="../../static/images/car4.png" alt="">
+					<img src="../../static/images/car5.png" alt="">
+				</li>
 				<li class="zsLi">
 					<p class="liTitle"><span class="required">*</span>资损概况:</p>
 					<van-checkbox-group class="radioList" v-model="result1">
@@ -244,6 +252,12 @@
 		},
 		onLoad() {},
 		methods: {
+			// 点击签名
+			sign() {
+				uni.navigateTo({
+					url: '/pages/monitor/sign'
+				})
+			},
 			// 船名
 			shipChange(e) {
 				this.shipValue = e
@@ -266,9 +280,8 @@
 			},
 			// 取消
 			cancel() {
-				console.log("取消")
 				uni.navigateTo({
-					url: '..//monitor/index'
+					url: '/pages/monitor/index'
 				})
 			}
 		}
@@ -355,6 +368,13 @@
 
 				}
 
+				.sign {
+					color: #2979ff;
+					line-height: 40px;
+					margin-left: 20px;
+					font-size: 16px;
+				}
+
 			}
 
 			.zsInfo {
@@ -380,6 +400,7 @@
 						background-color: #fff;
 						height: 44px;
 					}
+
 				}
 
 				.zsLi {
@@ -421,6 +442,31 @@
 						text-align: left;
 					}
 				}
+
+				.imgLi {
+					width: 100%;
+					flex-wrap: wrap;
+
+					img:nth-of-type(1) {
+						width: 25%;
+					}
+
+					img:nth-of-type(2) {
+						width: 25%;
+					}
+
+					img:nth-of-type(3) {
+						width: 50%;
+					}
+
+					img:nth-of-type(4) {
+						width: 50%;
+					}
+
+					img:nth-of-type(5) {
+						width: 50%;
+					}
+				}
 			}
 
 			.btnList {
diff --git a/pages/monitor/index.vue b/pages/monitor/index.vue
index da9b000..33c6fc2 100644
--- a/pages/monitor/index.vue
+++ b/pages/monitor/index.vue
@@ -73,7 +73,7 @@
 							</view>
 						</view>
 						<view class="rowFoot">
-							<view class="col">
+							<view class="col" @click="details">
 								详情
 							</view>
 							<view class="col" @click="edit">
@@ -132,16 +132,20 @@
 			},
 			// 点击新增
 			add() {
-				console.log("新增")
 				uni.navigateTo({
-					url: 'pages/monitor/edit'
+					url: '/pages/monitor/edit'
 				})
 			},
 			// 点击编辑
 			edit() {
-				console.log("编辑")
 				uni.navigateTo({
-					url: 'pages/monitor/edit'
+					url: '/pages/monitor/edit'
+				})
+			},
+			// 点击详情
+			details() {
+				uni.navigateTo({
+					url: '/pages/monitor/details'
 				})
 			},
 		}
diff --git a/pages/monitor/sign.vue b/pages/monitor/sign.vue
new file mode 100644
index 0000000..da7e573
--- /dev/null
+++ b/pages/monitor/sign.vue
@@ -0,0 +1,225 @@
+<template>
+	<view class="container">
+		<view class="sigh-btns">
+			<van-button class="btn" type="default" @tap="handleCancel">取消</van-button>
+			<van-button class="btn" type="default" @tap="handleReset">重写</van-button>
+			<van-button class="btn" type="default" @tap="handleConfirm">确认</van-button>
+			<!-- <button class="btn" @tap="handleCancel">取消</button>
+			<button class="btn" @tap="handleReset">重写</button>
+			<button class="btn" @tap="handleConfirm">确认</button> -->
+		</view>
+		<view class="sign-box">
+			<canvas class="mycanvas" :style="{width:width +'px',height:height +'px'}" canvas-id="mycanvas"
+				@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
+
+			<canvas canvas-id="camCacnvs" :style="{width:height +'px',height:width +'px'}" class="canvsborder"></canvas>
+
+		</view>
+	</view>
+
+</template>
+<script>
+	var x = 20;
+	var y = 20;
+	var tempPoint = []; //用来存放当前画纸上的轨迹点
+	var id = 0;
+	var type = '';
+	let that;
+	let canvasw;
+	let canvash;
+	export default {
+		data() {
+			return {
+				ctx: '', //绘图图像
+				points: [], //路径点集合,
+				width: 0,
+				height: 0
+			};
+		},
+		mounted() {},
+
+		onLoad(option) {
+			that = this;
+			console.log(option);
+			id = option.id;
+			type = option.type;
+			this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
+			//设置画笔样式
+			this.ctx.lineWidth = 4;
+			this.ctx.lineCap = 'round';
+			this.ctx.lineJoin = 'round';
+
+			uni.getSystemInfo({
+				success: function(res) {
+					console.log(res);
+					that.width = res.windowWidth * 0.8;
+					that.height = res.windowHeight * 0.85;
+				}
+			});
+		},
+
+		methods: {
+			//触摸开始，获取到起点
+			touchstart: function(e) {
+				let startX = e.changedTouches[0].x;
+				let startY = e.changedTouches[0].y;
+				let startPoint = {
+					X: startX,
+					Y: startY
+				};
+
+				/* **************************************************
+				    #由于uni对canvas的实现有所不同，这里需要把起点存起来
+				 * **************************************************/
+				this.points.push(startPoint);
+
+				//每次触摸开始，开启新的路径
+				this.ctx.beginPath();
+			},
+
+			//触摸移动，获取到路径点
+			touchmove: function(e) {
+				let moveX = e.changedTouches[0].x;
+				let moveY = e.changedTouches[0].y;
+				let movePoint = {
+					X: moveX,
+					Y: moveY
+				};
+				this.points.push(movePoint); //存点
+				let len = this.points.length;
+				if (len >= 2) {
+					this.draw(); //绘制路径
+				}
+				tempPoint.push(movePoint);
+			},
+
+			// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
+			touchend: function() {
+				this.points = [];
+			},
+
+			/* ***********************************************	
+			#   绘制笔迹
+			#   1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
+			#   2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
+			#   3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
+			************************************************ */
+			draw: function() {
+				let point1 = this.points[0];
+				let point2 = this.points[1];
+				this.points.shift();
+				this.ctx.moveTo(point1.X, point1.Y);
+				this.ctx.lineTo(point2.X, point2.Y);
+				this.ctx.stroke();
+				this.ctx.draw(true);
+			},
+
+			handleCancel() {
+				uni.navigateBack({
+					delta: 1
+				});
+			},
+
+			//清空画布
+			handleReset: function() {
+				console.log('handleReset');
+				that.ctx.clearRect(0, 0, that.width, that.height);
+				that.ctx.draw(true);
+				tempPoint = [];
+			},
+
+			//将签名笔迹上传到服务器，并将返回来的地址存到本地
+			handleConfirm: function() {
+				if (tempPoint.length == 0) {
+					uni.showToast({
+						title: '请先签名',
+						icon: 'none',
+						duration: 2000
+					});
+					return;
+				}
+				uni.canvasToTempFilePath({
+					canvasId: 'mycanvas',
+					success: function(res) {
+						let tempPath = res.tempFilePath;
+						console.log(tempPath)
+
+						const ctx = uni.createCanvasContext('camCacnvs', that);
+						ctx.translate(0, that.width);
+						ctx.rotate((-90 * Math.PI) / 180);
+						ctx.drawImage(tempPath, 0, 0, that.width, that.height);
+						ctx.draw();
+						setTimeout(() => {
+
+							//保存签名图片到本地
+							uni.canvasToTempFilePath({
+									canvasId: 'camCacnvs',
+									success: function(res) {
+										//这是签名图片文件的本地临时地址
+										let path = res.tempFilePath;
+
+									},
+									fail: err => {
+										console.log('fail', err);
+									}
+								},
+								this
+							);
+						}, 200);
+					}
+				});
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		display: flex;
+		flex-direction: row;
+		height: 100%;
+		padding: 50px 0;
+	}
+
+	.sign-box {
+		width: 80%;
+		height: 90%;
+		margin: auto;
+		display: flex;
+		flex-direction: column;
+		text-align: center;
+	}
+
+	.sign-view {
+		height: 100%;
+	}
+
+	.sigh-btns {
+		height: 100%;
+		margin: auto;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+	}
+
+	.btn {
+		margin: 30px 0px;
+		padding: 8rpx;
+		transform: rotate(90deg);
+		border: grey 1rpx solid;
+		width: 100px;
+		height: 50px;
+	}
+
+	.mycanvas {
+		margin: auto 0rpx;
+		background-color: #ececec;
+	}
+
+	.canvsborder {
+		border: 1rpx solid #333;
+		position: fixed;
+		top: 0;
+		left: 10000rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/shipWork/documentList.vue b/pages/shipWork/documentList.vue
new file mode 100644
index 0000000..8de6605
--- /dev/null
+++ b/pages/shipWork/documentList.vue
@@ -0,0 +1,120 @@
+<template>
+	<view class="documentList">
+		<view class="container">
+			<p class="title">作业单证</p>
+			<ul>
+				<li v-for="(item,index) in infoList" :key="index" @click="toGo(item.url)">
+					<view class="round"></view>
+					<span>{{item.name}}</span>
+				</li>
+			</ul>
+			<p class="title">其他作业</p>
+			<ul>
+				<li v-for="(item,index) in otherListh" :key="index" @click="toGo(item.url)">
+					<view class="round"></view>
+					<span>{{item.name}}</span>
+				</li>
+			</ul>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				infoList: [{
+					name: "杂项作业单",
+					url: "mixWork"
+				}, {
+					name: "系解缆",
+					url: "mixWork"
+				}, {
+					name: "供给",
+					url: "mixWork"
+				}, {
+					name: "指导员作业布置",
+					url: "mixWork"
+				}, {
+					name: "船舶装卸通知单",
+					url: "mixWork"
+				}, {
+					name: "质量意见征询",
+					url: "mixWork"
+				}, {
+					name: "异常情况",
+					url: "mixWork"
+				}, {
+					name: "MAFI清单",
+					url: "mixWork"
+				}],
+				otherListh: [{
+						name: "安全巡检",
+						url: "mixWork"
+					},
+					{
+						name: "船舶载货量",
+						url: "mixWork"
+					},
+					{
+						name: "船舶资料",
+						url: "mixWork"
+					},
+					{
+						name: "船舶计划",
+						url: "mixWork"
+					},
+					{
+						name: "作业查询",
+						url: "mixWork"
+					}
+				],
+			}
+		},
+		methods: {
+			toGo(url) {
+				uni.navigateTo({
+					url: `/pages/shipWork/${url}`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.documentList {
+		.container {
+			padding: 30px 20px;
+
+			.title {
+				font-size: 20px;
+				font-weight: bold;
+			}
+
+			ul {
+				display: flex;
+				flex-wrap: wrap;
+				padding: 20px;
+				margin-bottom: 20px;
+
+				li {
+					margin: 10px 20px;
+
+					.round {
+						width: 80px;
+						height: 80px;
+						background: #ccc;
+						border-radius: 50%;
+						margin: 10px auto;
+					}
+
+					span {
+						text-align: center;
+						font-size: 16px;
+						margin-top: 10px;
+					}
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/shipWork/mixAdd.vue b/pages/shipWork/mixAdd.vue
new file mode 100644
index 0000000..4a7e3e3
--- /dev/null
+++ b/pages/shipWork/mixAdd.vue
@@ -0,0 +1,152 @@
+<template>
+	<view class="mixAdd">
+		<view class="container">
+			<ul>
+				<li>
+					<p>船名：</p>
+					<span>快乐号</span>
+				</li>
+				<li>
+					<p><span class="required">*</span>航次：</p>
+					<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"></uni-data-select>
+				</li>
+				<li>
+					<p>进出口：</p>
+					<span>进口</span>
+				</li>
+				<li>
+					<p>贸易类型：</p>
+					<span>内贸</span>
+				</li>
+				<li>
+					<p><span class="required">*</span>天气：</p>
+					<span>未知</span>
+				</li>
+				<li>
+					<p><span class="required">*</span>泊位：</p>
+					<uni-data-select v-model="bwValue" :localdata="bwList" @change="bwChange"></uni-data-select>
+				</li>
+				<li>
+					<p><span class="required">*</span>作业组数：</p>
+					<uni-number-box @change="workChange" />
+				</li>
+				<li>
+					<p><span class="required">*</span>单船人数：</p>
+					<uni-number-box @change="shipChange" />
+				</li>
+				<li>
+					<p>作业时间：</p>
+				</li>
+			</ul>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				// 航次下拉框
+				hcValue: "",
+				hcList: [{
+						value: 0,
+						text: "航次0"
+					},
+					{
+						value: 1,
+						text: "航次1"
+					},
+					{
+						value: 2,
+						text: "航次2"
+					},
+				],
+				// 泊位下拉框
+				bwValue: "",
+				bwList: [{
+						value: 0,
+						text: "泊位0"
+					},
+					{
+						value: 1,
+						text: "泊位1"
+					},
+					{
+						value: 2,
+						text: "泊位2"
+					},
+				],
+				// 作业单数
+				workValue: 0,
+				// 单船人数
+				shipValue: 0,
+			}
+		},
+		methods: {
+			// 航次下拉
+			hcChange(e) {
+				this.hcValue = e;
+			},
+			// 泊位下拉
+			bwChange(e) {
+				this.bwValue = e;
+			},
+			// 作业组数
+			workChange(val) {
+				this.workValue = val;
+			},
+			// 单船人数
+			shipChange(val) {
+				this.shipValue = val;
+			},
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.mixAdd {
+		.container {
+			padding: 30px 20px;
+
+			ul {
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-between;
+
+				li {
+					width: 44%;
+					border-top: 1px solid #ccc;
+					border-bottom: 1px solid #ccc;
+					display: flex;
+					padding: 10px 20px;
+					line-height: 35px;
+					margin-bottom: 20px;
+
+					.required {
+						color: red;
+						margin-right: 5px;
+					}
+
+					/deep/.uni-numbox {
+						border: 1px solid #ccc;
+						box-sizing: border-box;
+					}
+
+					/deep/.uni-numbox-btns {
+						border-right: 1px solid #ccc;
+						border-left: 1px solid #ccc;
+						padding: 0 14px;
+						box-sizing: border-box;
+					}
+
+					/deep/.uni-numbox__value {
+						width: 100px;
+						height: 35px;
+						line-height: 35px;
+						background-color: #fff !important;
+					}
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/shipWork/mixWork.vue b/pages/shipWork/mixWork.vue
new file mode 100644
index 0000000..02ee611
--- /dev/null
+++ b/pages/shipWork/mixWork.vue
@@ -0,0 +1,168 @@
+<template>
+	<view class="mixWork">
+		<view class="container">
+			<view class="tabsList">
+				<view class="tabsBox" v-for="(item,index) in tabsList" :key="index" :class="{active:tabsIndex == index}"
+					@click="tabsClick(item,index)">{{item}}</view>
+			</view>
+			<ul v-if="tabsType == 1">
+				<li v-for="(item,index) in peopleInfo" :key="index">
+					<view class="title">航次：{{item.val1}}</view>
+					<p>贸易类型：{{item.val2}}</p>
+					<p>进出口：{{item.val3}}</p>
+					<p>作业组数：{{item.val4}}</p>
+					<p>单船人数：{{item.val5}}</p>
+					<p>状态：{{item.val6}}</p>
+				</li>
+			</ul>
+			<ul v-if="tabsType == 2">
+				<li v-for="(item,index) in shiftInfo" :key="index">
+					<view class="title">航次：{{item.val1}}</view>
+					<view class="shift">
+						<p>一工班</p>
+						<span>作业时间：2023/09/09 13:00:00</span>
+					</view>
+					<view class="shift">
+						<p>二工班</p>
+						<span>作业时间：2023/09/09 13:00:00</span>
+					</view>
+					<view class="shift">
+						<p>三工班</p>
+						<span>作业时间：2023/09/09 13:00:00</span>
+					</view>
+					<view class="state">状态：{{item.val6}}</view>
+				</li>
+			</ul>
+			<view class="addBtn" @click="add">+ 新增</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tabsList: ["人员信息", "工班信息"],
+				tabsType: 1,
+				tabsIndex: 0,
+				peopleInfo: [{
+					val1: "JK9795799",
+					val2: "内贸",
+					val3: "进口",
+					val4: "100",
+					val5: "100",
+					val6: "未上传",
+				}, {
+					val1: "JK9795799",
+					val2: "内贸",
+					val3: "进口",
+					val4: "100",
+					val5: "100",
+					val6: "未上传",
+				}, {
+					val1: "JK9795799",
+					val2: "内贸",
+					val3: "进口",
+					val4: "100",
+					val5: "100",
+					val6: "未上传",
+				}],
+				shiftInfo: [{
+					val1: "JK9795799",
+					val6: "未上传",
+				}, ]
+
+			}
+		},
+		methods: {
+			tabsClick(item, index) {
+				this.tabsIndex = index;
+				if (item == "人员信息") {
+					this.tabsType = 1;
+				} else {
+					this.tabsType = 2;
+				}
+			},
+			add() {
+				uni.navigateTo({
+					url: `/pages/shipWork/mixAdd`
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.mixWork {
+		.container {
+			padding: 30px 20px;
+
+			.tabsList {
+				display: flex;
+				justify-content: center;
+
+				.tabsBox {
+					width: 100px;
+					height: 50px;
+					border-radius: 4px;
+					margin: 0px 10px;
+					border: 1px solid #ccc;
+					text-align: center;
+					line-height: 50px;
+				}
+
+				.active {
+					background: #2979ff;
+					color: #fff;
+				}
+			}
+
+			ul {
+				padding: 20px 0;
+
+				li {
+					display: flex;
+					justify-content: space-between;
+					border-bottom: 1px solid #ccc;
+					padding: 20px;
+
+					.title {
+						font-size: 16px;
+						font-weight: bold;
+						display: flex;
+						flex-direction: column;
+						justify-content: center;
+					}
+
+					.shift {
+						p {
+							font-size: 16px;
+						}
+					}
+
+					.state {
+						display: flex;
+						flex-direction: column;
+						justify-content: center;
+					}
+				}
+			}
+
+			.addBtn {
+				position: fixed;
+				right: 50px;
+				bottom: 50px;
+				width: 100px;
+				height: 100px;
+				border-radius: 50%;
+				background-color: #2979ff;
+				color: #fff;
+				font-size: 24px;
+				text-align: center;
+				line-height: 100px;
+				font-weight: bold;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/static/images/car1.png b/static/images/car1.png
new file mode 100644
index 0000000..22a6b22
Binary files /dev/null and b/static/images/car1.png differ
diff --git a/static/images/car2.png b/static/images/car2.png
new file mode 100644
index 0000000..55c6509
Binary files /dev/null and b/static/images/car2.png differ
diff --git a/static/images/car3.png b/static/images/car3.png
new file mode 100644
index 0000000..425b903
Binary files /dev/null and b/static/images/car3.png differ
diff --git a/static/images/car4.png b/static/images/car4.png
new file mode 100644
index 0000000..124b6dd
Binary files /dev/null and b/static/images/car4.png differ
diff --git a/static/images/car5.png b/static/images/car5.png
new file mode 100644
index 0000000..f00d279
Binary files /dev/null and b/static/images/car5.png differ
diff --git a/static/images/testImg.jpg b/static/images/testImg.jpg
new file mode 100644
index 0000000..f4370f3
Binary files /dev/null and b/static/images/testImg.jpg differ
diff --git a/style/css/layout.css b/style/css/layout.css
index e07b1c5..98c9267 100644
--- a/style/css/layout.css
+++ b/style/css/layout.css
@@ -1,5 +1,5 @@
 .container {
-	min-height: 100vh;
+	min-height: calc(100vh - 44px);
 	background-color: #f5f6fa;
 }
 
diff --git a/uni_modules/uni-number-box/changelog.md b/uni_modules/uni-number-box/changelog.md
new file mode 100644
index 0000000..aab060d
--- /dev/null
+++ b/uni_modules/uni-number-box/changelog.md
@@ -0,0 +1,29 @@
+## 1.2.3（2023-05-23）
+更新示例工程
+## 1.2.2（2023-05-08）
+- 修复 change 事件执行顺序错误的问题
+## 1.2.1（2021-11-22）
+- 修复 vue3中某些scss变量无法找到的问题
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-number-box](https://uniapp.dcloud.io/component/uniui/uni-number-box)
+## 1.1.2（2021-11-09） 
+- 新增 提供组件设计资源，组件样式调整
+## 1.1.1（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.1.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-05-12）
+- 新增 组件示例地址
+## 1.0.6（2021-04-20）
+- 修复 uni-number-box 浮点数运算不精确的 bug
+- 修复 uni-number-box change 事件触发不正确的 bug
+- 新增 uni-number-box v-model 双向绑定
+## 1.0.5（2021-02-05）
+- 调整为uni_modules目录规范
+
+## 1.0.7（2021-02-05）
+- 调整为uni_modules目录规范
+- 新增 支持 v-model
+- 新增 支持 focus、blur 事件
+- 新增 支持 PC 端
diff --git a/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue b/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue
new file mode 100644
index 0000000..40786f5
--- /dev/null
+++ b/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue
@@ -0,0 +1,221 @@
+<template>
+	<view class="uni-numbox">
+		<view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{background}">
+			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }" :style="{color}">-</text>
+		</view>
+		<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number"
+			v-model="inputValue" :style="{background, color}" />
+		<view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :style="{background}">
+			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }" :style="{color}">+</text>
+		</view>
+	</view>
+</template>
+<script>
+	/**
+	 * NumberBox 数字输入框
+	 * @description 带加减按钮的数字输入框
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=31
+	 * @property {Number} value 输入框当前值
+	 * @property {Number} min 最小值
+	 * @property {Number} max 最大值
+	 * @property {Number} step 每次点击改变的间隔大小
+	 * @property {String} background 背景色
+	 * @property {String} color 字体颜色（前景色）
+	 * @property {Boolean} disabled = [true|false] 是否为禁用状态
+	 * @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
+	 * @event {Function} focus 输入框聚焦时触发的事件，参数为 event 对象
+	 * @event {Function} blur 输入框失焦时触发的事件，参数为 event 对象
+	 */
+
+	export default {
+		name: "UniNumberBox",
+		emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
+		props: {
+			value: {
+				type: [Number, String],
+				default: 1
+			},
+			modelValue: {
+				type: [Number, String],
+				default: 1
+			},
+			min: {
+				type: Number,
+				default: 0
+			},
+			max: {
+				type: Number,
+				default: 100
+			},
+			step: {
+				type: Number,
+				default: 1
+			},
+			background: {
+				type: String,
+				default: '#f5f5f5'
+			},
+			color: {
+				type: String,
+				default: '#333'
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				inputValue: 0
+			};
+		},
+		watch: {
+			value(val) {
+				this.inputValue = +val;
+			},
+			modelValue(val) {
+				this.inputValue = +val;
+			}
+		},
+		created() {
+			if (this.value === 1) {
+				this.inputValue = +this.modelValue;
+			}
+			if (this.modelValue === 1) {
+				this.inputValue = +this.value;
+			}
+		},
+		methods: {
+			_calcValue(type) {
+				if (this.disabled) {
+					return;
+				}
+				const scale = this._getDecimalScale();
+				let value = this.inputValue * scale;
+				let step = this.step * scale;
+				if (type === "minus") {
+					value -= step;
+					if (value < (this.min * scale)) {
+						return;
+					}
+					if (value > (this.max * scale)) {
+						value = this.max * scale
+					}
+				}
+
+				if (type === "plus") {
+					value += step;
+					if (value > (this.max * scale)) {
+						return;
+					}
+					if (value < (this.min * scale)) {
+						value = this.min * scale
+					}
+				}
+
+				this.inputValue = (value / scale).toFixed(String(scale).length - 1);
+				// TODO vue2 兼容
+				this.$emit("input", +this.inputValue);
+				// TODO vue3 兼容
+				this.$emit("update:modelValue", +this.inputValue);
+				this.$emit("change", +this.inputValue);
+			},
+			_getDecimalScale() {
+
+				let scale = 1;
+				// 浮点型
+				if (~~this.step !== this.step) {
+					scale = Math.pow(10, String(this.step).split(".")[1].length);
+				}
+				return scale;
+			},
+			_onBlur(event) {
+				this.$emit('blur', event)
+				let value = event.detail.value;
+				if (isNaN(value)) {
+					this.inputValue = this.min;
+					return;
+				}
+				value = +value;
+				if (value > this.max) {
+					value = this.max;
+				} else if (value < this.min) {
+					value = this.min;
+				}
+				const scale = this._getDecimalScale();
+				this.inputValue = value.toFixed(String(scale).length - 1);
+				this.$emit("input", +this.inputValue);
+				this.$emit("update:modelValue", +this.inputValue);
+				this.$emit("change", +this.inputValue);
+			},
+			_onFocus(event) {
+				this.$emit('focus', event)
+			}
+		}
+	};
+</script>
+<style lang="scss" >
+	$box-height: 26px;
+	$bg: #f5f5f5;
+	$br: 2px;
+	$color: #333;
+
+	.uni-numbox {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-numbox-btns {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		padding: 0 8px;
+		background-color: $bg;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-numbox__value {
+		margin: 0 2px;
+		background-color: $bg;
+		width: 40px;
+		height: $box-height;
+		text-align: center;
+		font-size: 14px;
+		border-left-width: 0;
+		border-right-width: 0;
+		color: $color;
+	}
+
+	.uni-numbox__minus {
+		border-top-left-radius: $br;
+		border-bottom-left-radius: $br;
+	}
+
+	.uni-numbox__plus {
+		border-top-right-radius: $br;
+		border-bottom-right-radius: $br;
+	}
+
+	.uni-numbox--text {
+		// fix nvue
+		line-height: 20px;
+
+		font-size: 20px;
+		font-weight: 300;
+		color: $color;
+	}
+
+	.uni-numbox .uni-numbox--disabled {
+		color: #c0c0c0 !important;
+		/* #ifdef H5 */
+		cursor: not-allowed;
+		/* #endif */
+	}
+</style>
diff --git a/uni_modules/uni-number-box/package.json b/uni_modules/uni-number-box/package.json
new file mode 100644
index 0000000..743d2e4
--- /dev/null
+++ b/uni_modules/uni-number-box/package.json
@@ -0,0 +1,82 @@
+{
+  "id": "uni-number-box",
+  "displayName": "uni-number-box 数字输入框",
+  "version": "1.2.3",
+  "description": "NumberBox 带加减按钮的数字输入框组件，用户可以控制每次点击增加的数值，支持小数。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "数字输入框"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-number-box/readme.md b/uni_modules/uni-number-box/readme.md
new file mode 100644
index 0000000..affc56f
--- /dev/null
+++ b/uni_modules/uni-number-box/readme.md
@@ -0,0 +1,13 @@
+
+
+## NumberBox 数字输入框
+> **组件名：uni-number-box**
+> 代码块： `uNumberBox`
+
+
+带加减按钮的数字输入框。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-number-box)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+