diff --git a/pages.json b/pages.json
index 1199858..4c10217 100644
--- a/pages.json
+++ b/pages.json
@@ -35,6 +35,12 @@
 			"style": {
 				"navigationBarTitleText": "编辑货物质量"
 			}
+		},
+		{
+			"path": "pages/monitor/details",
+			"style": {
+				"navigationBarTitleText": "质损详情"
+			}
 		}
 	],
 	"tabBar": {
diff --git a/pages/monitor/details.vue b/pages/monitor/details.vue
index 32a9e19..84c393f 100644
--- a/pages/monitor/details.vue
+++ b/pages/monitor/details.vue
@@ -1,6 +1,101 @@
 <template>
 	<view class="details">
-
+		<view class="container">
+			<view class="userInfo">
+				<p>填报人：张星星</p>
+				<p>上报部门：安全质量部</p>
+			</view>
+			<view class="formTitle">
+				基本信息
+			</view>
+			<ul>
+				<li class="flexLi">
+					<p class="liTitle">质损发生环节</p>
+					<view class="rightInfo">
+						<p>客户反馈</p>
+						<p>这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的描述
+						</p>
+					</view>
+				</li>
+				<li>
+					<p class="liTitle">板车照片</p>
+					<view class="picture">
+						<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
+					</view>
+				</li>
+				<li>
+					<p class="liTitle">板车车牌照</p>
+					<view class="picture">
+						<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
+					</view>
+				</li>
+				<li class="flexLi">
+					<p class="liTitle">质损负责人</p>
+					<p>张砰砰</p>
+				</li>
+				<li class="flexLi">
+					<p class="liTitle">签名</p>
+					<p>张砰砰</p>
+				</li>
+			</ul>
+			<view class="formTitle">
+				质损信息
+			</view>
+			<ul class="zsInfo">
+				<li>
+					<p>车架号/条形码：</p>
+					<p>1000000000</p>
+				</li>
+				<li>
+					<p>船名/航次：</p>
+					<p>运程10/HC98685976</p>
+				</li>
+				<li>
+					<p>车型：</p>
+					<p>1000000000</p>
+				</li>
+				<li>
+					<p>品牌：</p>
+					<p>这是一个品牌</p>
+				</li>
+				<li>
+					<p>场位：</p>
+					<p>1000000000</p>
+				</li>
+				<li>
+					<p>质损时间：</p>
+					<p>2023/09/08 23:00:00</p>
+				</li>
+				<li>
+					<p>质损货物品类：</p>
+					<p>商品车</p>
+				</li>
+				<li class="tsLi">
+					<p>质损概况：</p>
+					<p>其他 这是一段关于其他的描述</p>
+				</li>
+				<li class="tsLi">
+					<p>损伤情况：</p>
+					<p>磕伤（点状）</p>
+				</li>
+				<li class="tsLi">
+					<p>处置情况：</p>
+					<p>取消发运</p>
+				</li>
+				<li class="zpLi">
+					<p class="liTitle">质损照片</p>
+					<view class="picture">
+						<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
+					</view>
+				</li>
+				<li class="zpLi">
+					<p class="liTitle">车架号图片</p>
+					<view class="picture">
+						<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
+					</view>
+				</li>
+			</ul>
+		</view>
 	</view>
 </template>
 
@@ -8,5 +103,85 @@
 </script>
 
 <style lang="less" scoped>
-	
+	.details {
+		.container {
+			padding: 20px 30px;
+
+			.userInfo {
+				display: flex;
+				margin-bottom: 20px;
+
+				p {
+					margin-right: 30px;
+					font-size: 16px;
+				}
+			}
+
+			.formTitle {
+				padding-left: 10px;
+				border-left: 5px solid #2979ff;
+				font-size: 20px;
+				font-weight: bold;
+			}
+
+			ul {
+				margin-bottom: 30px;
+
+				.flexLi {
+					display: flex;
+				}
+
+				li {
+					margin-top: 30px;
+
+					.liTitle {
+						min-width: 100px;
+						margin-right: 20px;
+						font-size: 16px;
+						font-weight: bold;
+					}
+
+					.rightInfo {
+						p:first-child {
+							margin-bottom: 10px;
+						}
+					}
+
+					.picture {
+						margin-top: 20px;
+
+						/deep/.file-picker__box {
+							width: 120px !important;
+							height: 120px !important;
+							padding-top: 0;
+						}
+
+					}
+				}
+			}
+
+			.zsInfo {
+				display: flex;
+				flex-wrap: wrap;
+
+				li {
+					width: 48%;
+					display: flex;
+
+					p:first-child {
+						width: 120px;
+					}
+				}
+
+				.tsLi {
+					width: 100%;
+				}
+
+				.zpLi {
+					width: 100%;
+					display: block;
+				}
+			}
+		}
+	}
 </style>
\ No newline at end of file