pad-app/pages/monitor/index.vue

<template>
	<view class="app">
		<head-info></head-info>
		<view class="container">
			<side-bar path='5'></side-bar>
			<view class="content">
				<view class="form">
					<button type="primary" class="button" @click="add">
						<uni-icons type="plusempty" color="#fff" size="20"></uni-icons>新增
					</button>
					<view class="right">
						<uni-easyinput suffixIcon="search" v-model="value" placeholder="船名/航次" @iconClick="iconClick">
						</uni-easyinput>
						<view class="select">
							<uni-data-select v-model="value1" :localdata="range1" @change="change">
							</uni-data-select>
						</view>
						<view class="select">
							<uni-data-select v-model="value2" :localdata="range2" @change="change">
							</uni-data-select>
						</view>
						<view class="select">
							<uni-data-select v-model="value3" :localdata="range3" @change="change">
							</uni-data-select>
						</view>
					</view>

				</view>
				<view class="itemList">
					<view class="item" v-for="item in itemList" :key="item.index">
						<view class="row">
							<view class="col weight">
								CJH290387532753799
							</view>
							<view class="col">
								品牌：特斯拉
							</view>
							<view class="col">
								车型：轿车
							</view>
						</view>
						<view class="row">
							<view class="col">
								船名：运程10
							</view>
							<view class="col">
								航次：HC867468096
							</view>
							<view class="col">
								场位：A2-09-08
							</view>
						</view>
						<view class="row">
							<view class="col">
								货物状态：已装船
							</view>
							<view class="col">
								作业时间：2023/09/08 14:00
							</view>
							<view class="col">
								作业人：张星星
							</view>
						</view>
						<view class="row">
							<view class="col">
								质损发生环节：收车交接
							</view>
							<view class="col">
								质损概况：碰撞
							</view>
							<view class="col">
								处置情况：带伤发运
							</view>
						</view>
						<view class="rowFoot">
							<view class="col" @click="details">
								详情
							</view>
							<view class="col" @click="edit">
								编辑
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import SideBar from '@/components/sider-bar/slider-bar';
	import HeadInfo from '@/components/head-info/head-info';
	export default {
		data() {
			return {
				value: '',
				value1: '',
				value2: '',
				value3: '',
				range1: [{
					value: 0,
					text: "一号港"
				}, ],
				range2: [{
					value: 0,
					text: "一号港"
				}, ],
				range3: [{
					value: 0,
					text: "一号港"
				}, ],
				itemList: [1, 1, 1, 1, 2, 1, 1, 1, 1],
			}
		},
		onLoad() {

		},
		components: {
			SideBar,
			HeadInfo
		},
		methods: {
			iconClick(type) {
				uni.showToast({
					title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
					icon: 'none'
				})
			},
			change(e) {
				console.log(e);
			},
			// 点击新增
			add() {
				uni.navigateTo({
					url: '/pages/monitor/edit'
				})
			},
			// 点击编辑
			edit() {
				uni.navigateTo({
					url: '/pages/monitor/edit'
				})
			},
			// 点击详情
			details() {
				uni.navigateTo({
					url: '/pages/monitor/details'

				})
			},
		}
	};
</script>

<style>
	.container {
		display: flex;
	}

	.content {
		flex: 1;
		padding: 20px;

		.form {
			display: flex;
			justify-content: space-between;
			height: 40px;
			line-height: 40px;

			.button {
				width: 90px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				margin: 0;
			}

			.right {
				width: 600px;
				height: 40px;
				display: flex;
				justify-content: space-between;

				.select {
					width: 130px;
					margin-left: 20px;

					.uni-select {
						height: 40px;
					}
				}
			}
		}

		.itemList {
			margin-top: 30px;

			.item {
				height: 110px;
				padding: 20px;
				border-bottom: 2px solid #e9e9e9;
				display: flex;
				justify-content: space-between;

				.weight {
					font-weight: 900;
				}

				.row {
					width: 22%;
					flex-direction: column;
					display: flex;
					justify-content: space-between;
				}

				.rowFoot {
					width: 12%;
					flex-direction: column;
					display: flex;
					justify-content: space-around;
					color: #1890ff;
				}
			}
		}
	}
</style>