pad-app/pages/index/instructDetails.vue

<template>
	<view class="details">
		<head-view title="货物详情"></head-view>
		<view class="container">
			<view class="formTitle">
				基本信息
			</view>
			<view class="formNr">
				<view class="row">
					<view class="col">
						<view class="title">
							船名:
						</view>
						<text>1123</text>
				
					</view>
					<view class="col">
						<view class="title">
							航次:
						</view>
						<text>1123</text>
					</view>
				</view>
				<view class="row">
					<view class="col">
						<view class="title">
							港口:
						</view>
						<text>1123</text>
				
					</view>
					<view class="col">
						<view class="title">
							泊位:
						</view>
						<text>1123</text>
					</view>
				</view>
				<view class="row">
					<view class="col">
						<view class="title">
							备注:
						</view>
						<text>1123</text>
				
					</view>
					<view class="col">
					
					</view>
				</view>
				<view class="row">
					<view class="col">
						<view class="title">
							货代:
						</view>
						<text>1123</text>
				
					</view>
					<view class="col">
						<view class="title">
							联系人:
						</view>
						<text>1123</text>
					</view>
				</view>
				<view class="row">
					<view class="col">
						<view class="title">
							联系方式:
						</view>
						<text>1123</text>
				
					</view>
					<view class="col">
						
					</view>
				</view>
			</view>
			<view class="formTitle">
				详细信息
			</view>
			<view class="formNr">
				<view class="row">
					<view class="col">
						<view class="title">
							提单号:
						</view>
						<text>1123</text>

					</view>
					<view class="col">
						<view class="title">
							品牌:
						</view>
						<text>1123</text>
					</view>
				</view>
				<view class="row">

					<view class="col">
						<view class="title">
							型号:
						</view>
						<text>1123</text>
					</view>
					<view class="col">
					</view>
				</view>
				<view class="row">
					<view class="col">
						<view class="title">
							车型明细:
						</view>
						<text>1123</text>

					</view>
					<view class="col">
						<view class="title">
							车长:
						</view>
						<text>1123</text>
					</view>
				</view>
				<view class="row">
					<view class="col">
						<view class="title">
							车宽:
						</view>
						<text>1123</text>

					</view>
					<view class="col">
						<view class="title">
							车高:
						</view>
						<text>1123</text>
					</view>
				</view>
				<view class="row">
					<view class="col">
						<view class="title">
							体积:
						</view>
						<text>1123</text>

					</view>
					<view class="col">
						<view class="title">
							重量:
						</view>
						<text>1123</text>
					</view>
				</view>
				<view class="row">
					<view class="col">
						<view class="title">
							数量:
						</view>
						<text>1123</text>

					</view>
					<view class="col">
						<view class="title">
							单票数量:
						</view>
						<text>1123</text>
					</view>
				</view>
				<view class="row">
					<view class="col">
						<view class="title">
							单票重量:
						</view>
						<text>1123</text>

					</view>
					<view class="col">
						<view class="title">
							单票体积:
						</view>
						<text>1123</text>
					</view>
				</view>
			</view>
			<view class="formTitle">
				货物明细
			</view>
			<view class="formNr">
				<uni-table border stripe emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr class="gray">
						<uni-th align="center" width="20">序号</uni-th>
						<uni-th align="center" width="20">车架号/条形码</uni-th>
						<uni-th align="center" width="20">作业状态</uni-th>
						<uni-th align="center" width="20">场位</uni-th>
						<uni-th align="center" width="20">操作</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr>
						<uni-td>1123</uni-td>
						<uni-td>2</uni-td>
						<uni-td>3</uni-td>
						<uni-td>4</uni-td>
						<uni-td align="center" class="blue" @click="cs">残损</uni-td>
					</uni-tr>
				</uni-table>
			</view>

		</view>
	</view>
</template>

<script>
	import HeadInfo from '@/components/head-info/head-info';
	export default {
		data() {
			return {}
		},
		components: {
			HeadInfo
		},
		methods: {
			cs() {
				console.log(1);
			}
		}
	}
</script>

<style lang="less" scoped>
	.blue {
		color: #108ee9;
	}

	.details {
		.container {
			padding: 20px 30px;

			.formTitle {
				padding-left: 10px;
				border-left: 5px solid #2979ff;
				font-size: 20px;
				font-weight: bold;
			}

			.formNr {
				margin: 40px 0 30px;

				.row {
					width: 70%;
					display: flex;
					justify-content: space-between;
					font-size: 18px;
					line-height: 60px;

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

						.title {
							width: 150px;
							text-align: right;
							font-weight: 900;
							color: #999ba6;
						}

					}
				}

				.gray {
					background-color: #f9f9f9;
				}

			}
		}
	}
</style>