pad-app/pages/monitor/details.vue

<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">
						<img src="../../static/images/testImg.jpg" alt="" v-for="item in 3">
					</view>
				</li>
				<li>
					<p class="liTitle">板车车牌照</p>
					<view class="picture">
						<img src="../../static/images/testImg.jpg" alt="" v-for="item in 3">
					</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="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>
				</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">
						<img src="../../static/images/testImg.jpg" alt="" v-for="item in 6">
					</view>
				</li>
				<li class="zpLi">
					<p class="liTitle">车架号图片</p>
					<view class="picture">
						<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>
	.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;
						display: flex;
						flex-wrap: wrap;

						img {
							width: 120px;
							height: 120px;
							margin: 10px;
						}

					}
				}
			}

			.zsInfo {
				display: flex;
				flex-wrap: wrap;

				li {
					width: 48%;
					display: flex;

					p:first-child {
						width: 120px;
					}
				}

				.tsLi {
					width: 100%;
				}

				.zpLi {
					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;
				}
			}
		}
	}
</style>