pad-app/pages/quality/details.vue

<template>
	<view class="details">
		<view class="container">
			<view class="userInfo">
				<p>填报人：张星星</p>
				<p>上报部门：安全质量部</p>
			</view>
			<view class="formTitle">
				基本信息
			</view>
			<view class="ul">
				<view class="li flexLi">
					<p class="liTitle">质损发生环节</p>
					<view class="rightInfo">
						<p>客户反馈</p>
						<p>这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的描述
						</p>
					</view>
				</view>
				<view class="li">
					<p class="liTitle">板车照片</p>
					<view class="picture">
						<image src="../../static/images/testImg.jpg" v-for="item in 3"></image>
					</view>
				</view>
				<view class="li">
					<p class="liTitle">板车车牌照</p>
					<view class="picture">
						<image src="../../static/images/testImg.jpg" v-for="item in 3"></image>
					</view>
				</view>
				<view class="li flexLi">
					<p class="liTitle">质损负责人</p>
					<p>张砰砰</p>
				</view>
				<view class="li flexLi">
					<p class="liTitle">签名</p>
					<p>张砰砰</p>
				</view>
			</view>
			<view class="formTitle">
				质损信息
			</view>
			<view class="ul zsInfo">
				<view class="li">
					<p>车架号/条形码：</p>
					<p>1000000000</p>
				</view>
				<view class="li">
					<p>船名/航次：</p>
					<p>运程10/HC98685976</p>
				</view>
				<view class="li">
					<p>车型：</p>
					<p>1000000000</p>
				</view>
				<view class="li">
					<p>品牌：</p>
					<p>这是一个品牌</p>
				</view>
				<view class="li">
					<p>场位：</p>
					<p>1000000000</p>
				</view>
				<view class="li">
					<p>质损时间：</p>
					<p>2023/09/08 23:00:00</p>
				</view>
				<view class="li">
					<p>质损货物品类：</p>
					<p>商品车</p>
				</view>
				<view class="li imgLi">
					<image src="../../static/images/car1.png"></image>
					<image src="../../static/images/car2.png"></image>
					<image src="../../static/images/car3.png"></image>
					<image src="../../static/images/car4.png"></image>
					<image src="../../static/images/car5.png"></image>
				</view>
				<view class="li tsLi">
					<p>质损概况：</p>
					<p>其他 这是一段关于其他的描述</p>
				</view>
				<view class="li tsLi">
					<p>损伤情况：</p>
					<p>磕伤（点状）</p>
				</view>
				<view class="li tsLi">
					<p>处置情况：</p>
					<p>取消发运</p>
				</view>
				<view class="li zpLi">
					<p class="liTitle">质损照片</p>
					<view class="picture">
						<image src="../../static/images/testImg.jpg" v-for="item in 6"></image>
					</view>
				</view>
				<view class="li zpLi">
					<p class="liTitle">车架号图片</p>
					<view class="picture">
						<image src="../../static/images/testImg.jpg" alt="" v-for="item in 9"></image>
					</view>
				</view>
			</view>
			<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;

						image {
							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;
					height: 400px;

					image {
						height: auto;
					}

					image:nth-of-type(1) {
						width: 25%;
					}

					image:nth-of-type(2) {
						width: 25%;
					}

					image:nth-of-type(3) {
						width: 50%;
					}

					image:nth-of-type(4) {
						width: 50%;
					}

					image:nth-of-type(5) {
						width: 50%;
					}
				}
			}

			.btnList {
				display: flex;
				justify-content: center;

				/deep/ .van-button {
					margin: 30px 0;
					width: 120px;
					height: 50px;
				}
			}
		}
	}
</style>